@font-face {
font-family: Outfit;
font-weight: 400;
font-display: swap;
src: url('/assets/outfit-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: Outfit;
font-weight: 600;
font-display: swap;
src: url('/assets/outfit-latin-600-normal.woff2') format('woff2');
}
@font-face {
font-family: Outfit;
font-weight: 700;
font-display: swap;
src: url('/assets/outfit-latin-700-normal.woff2') format('woff2');
}
:root {
--ground: #0a0a0f;
--raised: #16141c;
--line: #2a2732;
--text: #f3eff5;
--muted: #8e8797;
--pink: #ff3b5c;
--raspberry: #c4203f;
--measure: 66ch;
color-scheme: dark;
}
* {
box-sizing: border-box;
}
html {
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
margin: 0;
overflow-x: clip;
background: var(--ground);
color: var(--text);
font: 400 1.125rem/1.6 Outfit, system-ui, sans-serif;
}
a {
color: var(--pink);
text-underline-offset: 0.18em;
}
a,
button,
summary {
-webkit-tap-highlight-color: transparent;
}
a:focus-visible,
summary:focus-visible,
.button:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 3px;
border-radius: 6px;
}
.skip {
position: absolute;
left: -999px;
}
.skip:focus {
left: 16px;
top: 12px;
}
.bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
max-width: 1180px;
margin: 0 auto;
padding: 22px 32px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--text);
font-weight: 700;
font-size: 1.375rem;
letter-spacing: -0.02em;
text-decoration: none;
}
.brand-faces .eyes {
transform-box: fill-box;
transform-origin: center;
animation: blink 6s infinite;
}
.brand-faces .eyes-late {
animation-delay: -3.1s;
}
.brand:hover .brand-faces {
animation: hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes blink {
0%, 92%, 100% { transform: none; }
95% { transform: scaleY(0.1); }
}
@keyframes hop {
40% { transform: translateY(-4px) rotate(-6deg); }
}
.bar nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 20px;
font-size: 1rem;
}
.bar nav a {
color: var(--muted);
text-decoration: none;
}
.bar nav a:hover {
color: var(--text);
}
.languages {
position: relative;
}
.languages summary {
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
font-weight: 400;
cursor: pointer;
list-style: none;
}
.languages summary::-webkit-details-marker {
display: none;
}
.languages ul {
position: absolute;
right: 0;
z-index: 2;
min-width: 200px;
margin: 8px 0 0;
padding: 8px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--raised);
list-style: none;
}
.languages li a {
display: block;
padding: 8px 12px;
border-radius: 10px;
color: var(--text);
}
.languages li a:hover,
.languages li a[aria-current='page'] {
background: var(--line);
}
@media (prefers-reduced-motion: reduce) {
.brand-faces .eyes,
.brand:hover .brand-faces {
animation: none;
}
}
@media (max-width: 900px) {
.bar {
padding: 16px 20px;
}
.bar nav a {
display: none;
}
}
main {
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
}
.hero {
padding: 24px 0 96px;
}
.hero-text {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 24px 72px;
margin-bottom: 28px;
}
.hero-side {
padding-top: 8px;
}
.wordmark {
margin: 0;
font-size: clamp(4rem, 10vw, 8rem);
line-height: 0.95;
letter-spacing: -0.045em;
}
.letters span {
display: inline-block;
}
.kanji {
font-family: 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
font-size: 0.22em;
font-weight: 500;
letter-spacing: 0.35em;
color: var(--pink);
vertical-align: 0.7em;
}
.tagline {
margin: 0 0 12px;
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
line-height: 1.2;
}
.lead {
max-width: 48ch;
margin: 0;
color: var(--muted);
font-size: 1.2rem;
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: 36px;
}
.button {
display: inline-block;
margin: 0;
padding: 15px 26px;
border-radius: 16px;
background: var(--raspberry);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: transform 0.15s ease, background-color 0.15s ease;
}
a.button:hover {
background: #d62a4a;
transform: translateY(-2px);
}
.button-soon {
background: none;
border: 1px solid var(--line);
color: var(--muted);
}
.button-second {
background: none;
border: 1px solid var(--raspberry);
color: var(--text);
}
a.button-second:hover {
background: rgba(196, 32, 63, 0.18);
}
.block {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
gap: 24px 64px;
padding: 72px 0;
border-top: 1px solid var(--line);
}
.block-body {
min-width: 0;
max-width: var(--measure);
}
h2 {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.025em;
}
h3 {
margin: 0 0 6px;
font-size: 1.25rem;
}
.block p {
margin: 0 0 16px;
}
.note,
.muted {
color: var(--muted);
}
.steps {
counter-reset: step;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
margin: 0 0 40px;
padding: 0;
list-style: none;
}
.steps li {
counter-increment: step;
}
.steps li::before {
content: counter(step);
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-bottom: 14px;
border: 1px solid var(--pink);
border-radius: 50%;
color: var(--pink);
font-size: 0.9rem;
font-weight: 700;
}
.steps p {
margin: 0;
color: var(--muted);
}
.site-list {
display: flex;
flex-wrap: wrap;
gap: 6px 32px;
margin: 8px 0 28px;
padding: 0;
list-style: none;
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.015em;
}
.suggestion-list {
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.suggestion-list li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.suggestion-list .count {
color: var(--muted);
}
.block-body details {
border-bottom: 1px solid var(--line);
}
.block-body summary {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.block-body summary::-webkit-details-marker {
display: none;
}
.block-body summary::after {
content: '+';
color: var(--pink);
transition: transform 0.2s ease;
}
.block-body details[open] summary::after {
transform: rotate(45deg);
}
.block-body details p {
margin: 0;
padding-bottom: 18px;
color: var(--muted);
}
.prose {
max-width: var(--measure);
padding: 48px 0 80px;
}
.prose h1 {
margin: 0 0 8px;
font-size: clamp(2.25rem, 6vw, 3.25rem);
letter-spacing: -0.03em;
}
.prose h2 {
margin-top: 44px;
margin-bottom: 12px;
font-size: 1.5rem;
}
.prose li {
margin-bottom: 8px;
}
@media (max-width: 900px) {
main {
padding: 0 20px;
}
.hero {
padding: 24px 0 64px;
}
.hero-text {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 32px;
}
.block {
grid-template-columns: 1fr;
padding: 56px 0;
}
.steps {
grid-template-columns: 1fr;
gap: 24px;
}
}
.home .letters span {
animation: rise 0.55s calc(0.1s + var(--i) * 70ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home .kanji,
.home .tagline {
animation: rise 0.6s 0.55s ease-out both;
}
.home .lead,
.home .actions {
animation: rise 0.6s 0.7s ease-out both;
}
.home .window-a {
animation: enter-left 1s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home .window-b {
animation: enter-right 1s 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home .stage-hint {
animation: rise 0.6s 1.5s ease-out both;
}
.js .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes enter-left {
from { opacity: 0; translate: -90px 50px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes enter-right {
from { opacity: 0; translate: 90px 70px; }
to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.home .letters span,
.home .kanji,
.home .tagline,
.home .lead,
.home .actions,
.home .window,
.home .stage-hint {
animation: none;
}
.js .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.picture {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
container-type: inline-size;
background: #120d2b;
}
.scene,
.scene > span {
position: absolute;
}
.scene {
inset: 0;
transition: filter 0.35s ease;
}
.sky {
inset: 0;
background:
radial-gradient(70% 38% at 50% 80%, rgba(255, 92, 132, 0.42), transparent 70%),
linear-gradient(180deg, #0f0b26 0%, #251140 40%, #5c1a4b 70%, #b8365a 100%);
}
.stars {
inset: 0 0 38% 0;
background-image:
radial-gradient(1.5px 1.5px at 8% 18%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 21% 42%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 33% 12%, #ffe3ec 50%, transparent 51%),
radial-gradient(1px 1px at 46% 30%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 58% 8%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 64% 46%, #ffe3ec 50%, transparent 51%),
radial-gradient(1px 1px at 72% 22%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 94% 10%, #fff 50%, transparent 51%);
animation: twinkle 2.6s ease-in-out infinite alternate;
}
.stars-b {
background-image:
radial-gradient(1px 1px at 14% 30%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 27% 6%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 52% 18%, #ffe3ec 50%, transparent 51%),
radial-gradient(1px 1px at 86% 40%, #fff 50%, transparent 51%);
animation-duration: 1.9s;
animation-delay: -1s;
}
.shooting {
top: 7%;
left: 6%;
width: 20cqw;
height: 0.3cqw;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(255, 235, 245, 0.9));
opacity: 0;
transform-origin: 100% 50%;
animation: shoot 9s cubic-bezier(0.3, 0.5, 0.5, 1) 1.2s infinite;
}
.shooting::after {
content: '';
position: absolute;
top: 50%;
right: -0.35cqw;
width: 0.8cqw;
height: 0.8cqw;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 1.2cqw 0.35cqw rgba(255, 220, 235, 0.9);
transform: translateY(-50%);
}
.moon {
top: 10%;
right: 15%;
width: 11cqw;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle at 34% 58%, rgba(214, 150, 178, 0.35) 0 9%, transparent 10%),
radial-gradient(circle at 62% 30%, rgba(214, 150, 178, 0.28) 0 6%, transparent 7%),
radial-gradient(circle at 66% 66%, rgba(214, 150, 178, 0.22) 0 5%, transparent 6%),
radial-gradient(circle at 38% 36%, #fff6f9, #ffe2ec 60%, #f4c4d6);
box-shadow: 0 0 5cqw rgba(255, 190, 215, 0.5), 0 0 14cqw rgba(255, 120, 170, 0.22);
}
.clouds {
top: 15%;
left: 0;
right: 0;
height: 18%;
background-repeat: repeat-x;
background-size: 120cqw 100%;
background-position-x: var(--cloud, 0);
background-image:
radial-gradient(20% 36% at 20% 55%, rgba(255, 170, 200, 0.16), transparent 70%),
radial-gradient(15% 28% at 64% 40%, rgba(255, 170, 200, 0.12), transparent 70%);
}
@keyframes twinkle {
from { opacity: 0.5; }
to { opacity: 1; }
}
@keyframes shoot {
0% { opacity: 0; transform: rotate(16deg) translateX(0) scaleX(0.1); }
1% { opacity: 1; }
7% { opacity: 1; transform: rotate(16deg) translateX(34cqw) scaleX(1); }
10%, 100% { opacity: 0; transform: rotate(16deg) translateX(44cqw) scaleX(0.6); }
}
@media (prefers-reduced-motion: reduce) {
.stars,
.shooting {
animation: none;
}
}
.layer {
left: 0;
right: 0;
background-repeat: repeat-x;
background-size: auto 100%;
}
.far {
bottom: 20%;
height: 40%;
background-size: 110cqw 100%;
background-position-x: var(--far, 0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V62l38-24 34 18 52-36 44 30 40-20 48 34 46-30 52 26 46-14v104z' fill='%23361849'/%3E%3C/svg%3E");
}
.city {
bottom: 13%;
height: 34%;
background-size: 58cqw 100%;
background-position-x: var(--city, 0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cg fill='%231a0e26'%3E%3Crect x='4' y='40' width='26' height='60'/%3E%3Crect x='34' y='18' width='22' height='82'/%3E%3Crect x='60' y='52' width='30' height='48'/%3E%3Crect x='96' y='30' width='18' height='70'/%3E%3Crect x='118' y='60' width='34' height='40'/%3E%3Crect x='158' y='8' width='20' height='92'/%3E%3Crect x='182' y='44' width='28' height='56'/%3E%3Crect x='214' y='26' width='24' height='74'/%3E%3Crect x='244' y='56' width='30' height='44'/%3E%3Crect x='278' y='36' width='20' height='64'/%3E%3C/g%3E%3Cg fill='%23ffc66b'%3E%3Crect x='40' y='28' width='4' height='5'/%3E%3Crect x='48' y='44' width='4' height='5'/%3E%3Crect x='10' y='52' width='4' height='5'/%3E%3Crect x='164' y='20' width='4' height='5'/%3E%3Crect x='170' y='40' width='4' height='5'/%3E%3Crect x='220' y='36' width='4' height='5'/%3E%3Crect x='228' y='58' width='4' height='5'/%3E%3Crect x='102' y='42' width='4' height='5'/%3E%3Crect x='284' y='48' width='4' height='5'/%3E%3C/g%3E%3C/svg%3E");
}
.city-lights {
bottom: 13%;
height: 34%;
background-size: 58cqw 100%;
background-position-x: var(--city, 0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cg fill='%23ffd88f'%3E%3Crect x='24' y='60' width='4' height='5'/%3E%3Crect x='70' y='70' width='4' height='5'/%3E%3Crect x='136' y='72' width='4' height='5'/%3E%3Crect x='192' y='62' width='4' height='5'/%3E%3Crect x='250' y='74' width='4' height='5'/%3E%3C/g%3E%3C/svg%3E");
animation: flicker 5s steps(1) infinite;
}
.rail {
bottom: 0;
height: 22%;
background-size: 40cqw 100%;
background-position-x: var(--rail, 0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cg fill='%230c0714'%3E%3Crect y='6' width='120' height='7'/%3E%3Crect x='14' y='12' width='9' height='28'/%3E%3Crect x='74' y='12' width='9' height='28'/%3E%3C/g%3E%3Crect y='5' width='120' height='1.5' fill='%23ff3b5c' opacity='.55'/%3E%3C/svg%3E");
}
.poles {
top: 30%;
bottom: 20%;
left: 0;
right: 0;
background-repeat: repeat-x;
background-size: 64cqw 100%;
background-position-x: var(--poles, 0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 100' preserveAspectRatio='none'%3E%3Cg fill='%2308050f'%3E%3Crect x='0' width='8' height='100'/%3E%3Crect x='0' y='6' width='46' height='3'/%3E%3C/g%3E%3C/svg%3E");
}
.wire {
top: calc(30% + 0.35cqw);
left: 0;
right: 0;
height: 1px;
background: rgba(8, 5, 15, 0.85);
}
.water {
left: 0;
right: 0;
bottom: 0;
height: 17%;
background:
repeating-linear-gradient(90deg, transparent 0 6cqw, rgba(255, 200, 220, 0.16) 6cqw 9cqw) var(--rail, 0) 30% / 18cqw 1px repeat-x,
repeating-linear-gradient(90deg, transparent 0 4cqw, rgba(255, 200, 220, 0.1) 4cqw 6cqw) var(--city, 0) 70% / 13cqw 1px repeat-x,
linear-gradient(180deg, #431434, #120a1e);
}
.reflection {
bottom: 0;
right: 17%;
width: 7cqw;
height: 15%;
background: repeating-linear-gradient(180deg, rgba(255, 225, 238, 0.5) 0 0.3cqw, transparent 0.3cqw 1cqw);
mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(180deg, #000, transparent);
mask-composite: intersect;
animation: shimmer 1.4s ease-in-out infinite alternate;
}
.train {
bottom: calc(22% - 0.25cqw);
left: 0;
display: flex;
align-items: flex-end;
gap: 0.4cqw;
height: 5.4cqw;
transform: translateX(calc(var(--train, 0) * 190cqw - 90cqw));
}
.car {
width: 19cqw;
height: 100%;
border-radius: 1cqw 1cqw 0.3cqw 0.3cqw;
background:
linear-gradient(#ff3b5c, #ff3b5c) 0 84% / 100% 0.35cqw no-repeat,
repeating-linear-gradient(90deg, transparent 0 1.2cqw, #ffd68a 1.2cqw 3.1cqw, transparent 3.1cqw 3.6cqw) 0 30% / 100% 32% no-repeat,
linear-gradient(180deg, #2a1636, #130a1c);
box-shadow: 0 0 2.5cqw rgba(255, 190, 110, 0.22), inset 0 -0.7cqw 0 #0a0510;
}
.car:nth-child(3) {
border-top-right-radius: 4.5cqw 75%;
border-bottom-right-radius: 0.3cqw 20%;
}
.beam {
position: relative;
width: 24cqw;
height: 140%;
margin-left: -0.6cqw;
background: linear-gradient(90deg, rgba(255, 232, 190, 0.45), transparent);
clip-path: polygon(0 62%, 100% 20%, 100% 100%, 0 78%);
}
.petal {
top: -6%;
width: 1.6cqw;
height: 1cqw;
border-radius: 100% 0;
background: #ff9fb6;
opacity: 0.85;
animation: petal 7s linear infinite;
}
.p1 { left: 18%; }
.p2 { left: 42%; animation-duration: 9s; animation-delay: -3s; }
.p3 { left: 66%; animation-duration: 8s; animation-delay: -5s; }
.p4 { left: 86%; animation-duration: 10s; animation-delay: -1.5s; }
.paused-mark {
inset: 0;
margin: auto;
width: 8cqw;
height: 9cqw;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.paused-mark::before,
.paused-mark::after {
content: '';
position: absolute;
top: 0;
width: 34%;
height: 100%;
border-radius: 0.8cqw;
background: #fff;
box-shadow: 0 0 3cqw rgba(0, 0, 0, 0.4);
}
.paused-mark::before { left: 0; }
.paused-mark::after { right: 0; }
.window.is-paused .paused-mark {
opacity: 0.94;
transform: none;
}
.window.is-paused .scene {
filter: brightness(0.8) saturate(0.85);
}
.window.is-jumping .scene {
filter: brightness(1.45) blur(1.5px);
transition: none;
}
.window.is-paused .stars,
.window.is-paused .shooting,
.window.is-paused .reflection,
.window.is-paused .city-lights,
.window.is-paused .petal {
animation-play-state: paused;
}
@keyframes flicker {
0%, 18%, 41%, 77% { opacity: 1; }
12%, 35%, 63% { opacity: 0.15; }
}
@keyframes shimmer {
from { opacity: 0.55; transform: scaleX(0.85); }
to { opacity: 1; transform: scaleX(1.1); }
}
@keyframes petal {
from { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-4cqw, 32cqw) rotate(200deg); }
to { transform: translate(2cqw, 62cqw) rotate(380deg); }
}
@media (prefers-reduced-motion: reduce) {
.city-lights,
.reflection,
.petal {
animation: none;
}
.petal {
display: none;
}
.window.is-jumping .scene {
filter: none;
}
}
.stage {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 72px);
align-items: start;
padding: 24px 0 8px;
perspective: 1600px;
}
.aura {
position: absolute;
z-index: -1;
width: 46%;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(80px);
opacity: 0.32;
animation: float 14s ease-in-out infinite alternate;
}
.aura-a {
top: 0;
left: 0;
background: var(--pink);
}
.aura-b {
right: 0;
bottom: 0;
background: #6d2bd9;
animation-name: float-back;
}
.window {
margin: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 20px;
background: var(--raised);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.window-a {
transform: rotateY(5deg) rotateZ(-1deg);
}
.window-b {
margin-top: 44px;
transform: rotateY(-5deg) rotateZ(1deg);
}
.window.is-receiving {
box-shadow: 0 0 0 2px var(--pink), 0 30px 80px -30px rgba(255, 59, 92, 0.6);
}
.cursor {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 22px;
height: 22px;
background: #fff;
clip-path: polygon(0 0, 0 78%, 24% 60%, 42% 100%, 56% 94%, 40% 56%, 72% 56%);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
opacity: 0;
pointer-events: none;
transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.cursor.is-active {
opacity: 1;
}
@media (hover: none) {
.cursor {
width: 30px;
height: 30px;
margin: -11px 0 0 -11px;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
clip-path: none;
}
}
.signal {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.signal path {
fill: none;
stroke: var(--pink);
stroke-width: 2.5;
stroke-linecap: round;
opacity: 0;
filter: drop-shadow(0 0 6px rgba(255, 59, 92, 0.8));
}
.spark {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 18px 4px rgba(255, 59, 92, 0.7);
opacity: 0;
pointer-events: none;
}
.stage-hint {
grid-column: 1 / -1;
margin: 8px 0 0;
color: var(--muted);
text-align: center;
font-size: 1rem;
}
@keyframes float {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(6%, 4%) scale(0.9); }
}
@keyframes float-back {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-6%, -4%) scale(0.9); }
}
@media (max-width: 900px) {
.stage {
grid-template-columns: 1fr;
gap: 20px;
}
.window-a,
.window-b {
margin-top: 0;
transform: none;
}
.window-b {
margin-left: 8%;
}
.window-a {
margin-right: 8%;
}
}
@media (max-width: 520px) {
.episode {
display: none;
}
.window-a,
.window-b {
margin-left: 0;
margin-right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.aura {
animation: none;
}
.window,
.cursor {
transition: none;
}
}
.titlebar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 0.95rem;
}
.avatar {
width: 26px;
height: 26px;
flex: none;
}
.avatar .eyes {
transform-box: fill-box;
transform-origin: center;
animation: blink 5s infinite;
}
.window-b .avatar .eyes {
animation-delay: -2.2s;
}
.who {
font-weight: 700;
}
.episode {
overflow: hidden;
color: var(--muted);
white-space: nowrap;
text-overflow: ellipsis;
}
.sync {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex: none;
color: var(--muted);
font-size: 0.85rem;
}
.sync::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #5ee6a8;
}
.window.is-syncing .sync::before {
background: var(--pink);
animation: beat 0.4s ease-in-out infinite alternate;
}
.toast {
position: absolute;
top: 6%;
left: 4%;
max-width: 80%;
margin: 0;
padding: 8px 12px;
border-left: 3px solid var(--pink);
border-radius: 12px;
background: rgba(10, 10, 15, 0.86);
font-size: clamp(0.8rem, 3.6cqw, 1rem);
font-weight: 600;
opacity: 0;
transform: translateY(-10px) scale(0.96);
transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.is-shown {
opacity: 1;
transform: none;
}
.controls {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px 12px;
}
.play {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: none;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--pink);
cursor: pointer;
transition: transform 0.15s ease;
}
.play:active,
.play.is-pressed {
transform: scale(0.86);
}
.play .icon {
width: 12px;
height: 14px;
background: linear-gradient(90deg, #fff 0 34%, transparent 34% 66%, #fff 66%);
}
.window.is-paused .play .icon {
width: 13px;
margin-left: 3px;
background: #fff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.seek {
position: relative;
flex: 1;
height: 22px;
cursor: pointer;
}
.seek::before,
.fill {
position: absolute;
top: 9px;
left: 0;
height: 4px;
border-radius: 999px;
}
.seek::before {
content: '';
right: 0;
background: var(--line);
}
.fill {
width: calc(var(--progress, 0.35) * 100%);
background: var(--pink);
}
.head {
position: absolute;
top: 4px;
left: calc(var(--progress, 0.35) * 100% - 7px);
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px rgba(255, 59, 92, 0.3);
}
.seek:focus-visible,
.play:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 3px;
}
.time {
flex: none;
color: var(--muted);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
@keyframes beat {
to { transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
.avatar .eyes,
.window.is-syncing .sync::before {
animation: none;
}
.toast {
transition: none;
}
}
.art {
display: flex;
align-items: center;
gap: 6px;
height: 64px;
margin-bottom: 18px;
}
.art-code span {
display: grid;
place-items: center;
width: 30px;
height: 40px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--raised);
color: var(--text);
font-weight: 700;
}
.is-visible .art-code span {
animation: type-in 4.8s calc(var(--i) * 120ms) ease-out infinite;
}
.art-send {
position: relative;
justify-content: space-between;
width: 200px;
}
.art-send .avatar {
width: 40px;
height: 40px;
}
.bubble {
position: absolute;
left: 40px;
padding: 4px 10px;
border-radius: 999px;
background: var(--text);
color: var(--ground);
font-size: 0.8rem;
font-weight: 700;
opacity: 0;
}
.is-visible .bubble {
animation: send 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.art-play {
gap: 22px;
}
.bars {
display: flex;
align-items: flex-end;
gap: 4px;
height: 40px;
}
.bars i {
width: 6px;
height: 30%;
border-radius: 3px;
background: var(--pink);
}
.bars + .bars i {
background: var(--raspberry);
}
.is-visible .bars i {
animation: bounce 0.9s ease-in-out infinite alternate;
}
.bars i:nth-child(2) { animation-delay: -0.3s; }
.bars i:nth-child(3) { animation-delay: -0.6s; }
.bars i:nth-child(4) { animation-delay: -0.15s; }
.bars i:nth-child(5) { animation-delay: -0.45s; }
.site-list {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.marquee {
display: grid;
contain: paint;
gap: 4px;
margin: 8px 0 28px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-row {
display: flex;
width: max-content;
gap: 40px;
padding-right: 40px;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.02em;
animation: slide 26s linear infinite;
}
.marquee-row span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 1px var(--muted);
}
.marquee-back {
animation-direction: reverse;
animation-duration: 32s;
}
.marquee:hover .marquee-row {
animation-play-state: paused;
}
:root {
interpolate-size: allow-keywords;
}
.block-body details::details-content {
height: 0;
overflow: clip;
transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
}
.block-body details[open]::details-content {
height: auto;
}
.block-body summary {
transition: color 0.2s ease;
user-select: none;
}
.block-body summary:hover {
color: var(--pink);
}
.suggestion-list li {
animation: rise 0.5s calc(var(--i, 0) * 60ms) ease-out both;
}
@keyframes type-in {
0%, 4% { opacity: 0; transform: translateY(8px); }
10%, 86% { opacity: 1; transform: none; border-color: var(--pink); }
30% { border-color: var(--line); }
94%, 100% { opacity: 0; }
}
@keyframes send {
0% { opacity: 0; transform: translateX(0) scale(0.8); }
15% { opacity: 1; transform: translateX(0) scale(1); }
70% { opacity: 1; transform: translateX(46px) scale(1); }
85%, 100% { opacity: 0; transform: translateX(62px) scale(0.5); }
}
@keyframes bounce {
to { height: 100%; }
}
@keyframes slide {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.is-visible .art-code span,
.is-visible .bubble,
.is-visible .bars i,
.marquee-row,
.suggestion-list li {
animation: none;
}
.bubble {
opacity: 1;
transform: translateX(40px);
}
.marquee-row {
flex-wrap: wrap;
width: auto;
gap: 6px 32px;
}
.marquee-back,
.marquee-row span:nth-child(n + 8) {
display: none;
}
.block-body details::details-content {
transition: none;
}
}
.find {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 32px 64px;
margin: 24px 0;
padding: 48px;
border: 1px solid rgba(255, 59, 92, 0.35);
border-radius: 28px;
background:
radial-gradient(60% 90% at 85% 50%, rgba(196, 32, 63, 0.22), transparent 70%),
var(--raised);
}
.find h2 {
margin-bottom: 14px;
}
.find p {
margin: 0 0 28px;
color: var(--muted);
}
.crowd {
position: relative;
height: 240px;
container-type: inline-size;
--meet: 22cqw;
}
.face {
position: absolute;
width: 46px;
height: 46px;
animation: drift 6s ease-in-out infinite alternate;
}
.face .avatar {
width: 100%;
height: 100%;
}
.face-2 { animation-duration: 7s; animation-delay: -2s; }
.face-3 { animation-duration: 5.5s; animation-delay: -4s; }
.face-4 { width: 34px; height: 34px; animation-duration: 8s; }
.face-5 { width: 38px; height: 38px; animation-delay: -3s; }
.face-6 { width: 30px; height: 30px; animation-duration: 6.5s; animation-delay: -1s; }
.face-0,
.face-1 {
z-index: 1;
width: 62px;
height: 62px;
}
.is-visible .face-0 {
animation: meet-left 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.is-visible .face-1 {
animation: meet-right 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.is-visible .face-0 .eyes,
.is-visible .face-1 .eyes {
animation: glad 7s infinite;
}
@keyframes drift {
from { translate: 0 0; }
to { translate: 10px -14px; }
}
@keyframes meet-left {
0%, 10% { translate: 0 0; rotate: 0deg; }
40%, 62% { translate: var(--meet) -6px; rotate: 8deg; }
90%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes meet-right {
0%, 10% { translate: 0 0; rotate: 0deg; }
40%, 62% { translate: calc(var(--meet) * -1) 6px; rotate: -8deg; }
90%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes glad {
0%, 42%, 64%, 100% { transform: none; }
48% { transform: translateY(-3px) scaleY(1.15); }
54% { transform: translateY(1px); }
}
@media (max-width: 900px) {
.find {
grid-template-columns: 1fr;
padding: 32px 24px;
}
.crowd {
height: 180px;
}
}
@media (prefers-reduced-motion: reduce) {
.face,
.is-visible .face-0,
.is-visible .face-1,
.is-visible .face-0 .eyes,
.is-visible .face-1 .eyes {
animation: none;
}
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 20px;
padding: 0;
color: var(--muted);
font-size: 0.95rem;
list-style: none;
}
.crumbs li + li::before {
content: '/';
margin-right: 8px;
}
.guide .lead {
max-width: none;
margin-top: 16px;
}
.guide .actions {
margin: 28px 0 8px;
}
.guide-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px 32px;
}
.guide-group h3,
.guide-group p {
margin: 16px 0 8px;
color: var(--text);
font-size: 1rem;
font-weight: 600;
}
.guide-group ul {
margin: 0;
padding: 0;
list-style: none;
}
.guide-group li {
margin: 0 0 6px;
}
.table-wrap {
margin: 20px 0;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 14px;
}
.table-wrap:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 2px;
}
.table-wrap table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
font-size: 0.95rem;
}
.table-wrap caption {
padding: 14px 16px 0;
color: var(--muted);
text-align: left;
}
.table-wrap th,
.table-wrap td {
padding: 12px 16px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.table-wrap thead th {
color: var(--muted);
font-weight: 600;
}
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td {
border-bottom: none;
}
:root {
--gold: #f2c14e;
}
[hidden] {
display: none !important;
}
.bar nav a.nav-gold {
color: var(--gold);
}
.perks {
padding: 0;
list-style: none;
}
.perks li {
margin: 0 0 16px;
padding-left: 18px;
border-left: 3px solid var(--gold);
}
.perks h3 {
margin: 0 0 4px;
}
.perks p {
margin: 0;
color: var(--muted);
}
.account-page .button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.account-page .actions {
margin-top: 20px;
}
.account-page button.button {
border: none;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.account-page .button-second {
border: 1px solid var(--raspberry);
}
.room-form,
.invite-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.room-form label,
.invite-form label {
width: 100%;
color: var(--muted);
}
.room-form input {
width: 9ch;
padding: 13px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--raised);
color: var(--text);
font: 600 1.1rem/1 Outfit, system-ui, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.invite-form input {
width: min(100%, 24ch);
padding: 13px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--raised);
color: var(--text);
font: inherit;
}
.invite-form button.button {
border: none;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.invite-form button.button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.invite-label {
margin: 32px 0 4px;
color: var(--muted);
}
.invite-code {
margin: 0 0 24px;
color: var(--gold);
font-size: clamp(2.5rem, 9vw, 4rem);
font-weight: 700;
letter-spacing: 0.18em;
}
.link-button {
padding: 0;
border: none;
background: none;
color: var(--pink);
font: inherit;
text-decoration: underline;
text-underline-offset: 0.18em;
cursor: pointer;
}
@media (max-width: 900px) {
.bar nav a.nav-gold {
display: inline;
}
}
.checkout {
margin: 32px 0 48px;
padding: 28px;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--raised);
}
.plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 0;
padding: 0;
border: none;
}
.plans legend {
margin: 0 0 14px;
padding: 0;
font-size: 1.25rem;
font-weight: 700;
}
.plan {
position: relative;
display: grid;
gap: 4px;
padding: 18px 18px 18px 50px;
border: 2px solid var(--line);
border-radius: 18px;
background: var(--ground);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.plan input {
position: absolute;
top: 21px;
left: 18px;
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--gold);
}
.plan:has(input:checked) {
border-color: var(--gold);
background: rgba(242, 193, 78, 0.07);
}
.plan:has(input:focus-visible) {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.plan-name {
font-size: 1.1rem;
font-weight: 700;
}
.price {
color: var(--muted);
}
.price strong {
color: var(--text);
font-size: 2rem;
}
.price del {
margin-right: 6px;
color: var(--muted);
font-size: 1.1rem;
text-decoration-thickness: 2px;
}
.saving {
margin-left: 8px;
padding: 3px 10px;
border-radius: 999px;
background: var(--gold);
color: #1a1206;
font-size: 0.8rem;
font-weight: 700;
vertical-align: middle;
}
.included {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 20px 0;
padding: 0;
list-style: none;
}
.prose .included li {
margin: 0;
}
.included li::before {
content: '✓';
margin-right: 8px;
color: var(--gold);
font-weight: 700;
}
.gold-info {
padding-top: 18px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.92rem;
}
.gold-info h3 {
margin: 0 0 8px;
color: var(--text);
font-size: 1rem;
}
.gold-info ul {
margin: 0;
padding-left: 18px;
}
.prose .gold-info li {
margin-bottom: 4px;
}
.consent {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 20px 0 0;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--ground);
cursor: pointer;
}
.consent-missing {
border-color: var(--gold);
}
.consent input {
flex: none;
width: 20px;
height: 20px;
margin: 3px 0 0;
accent-color: var(--gold);
}
.checkout-button {
width: 100%;
margin-top: 16px;
padding: 17px 26px;
border: none;
font: inherit;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
}
.checkout-button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.guarantee {
margin: 12px 0 0;
color: var(--muted);
text-align: center;
}
.gold-status {
min-height: 1.6em;
margin: 8px 0 0;
color: var(--gold);
font-weight: 600;
text-align: center;
}
@media (max-width: 560px) {
.checkout {
padding: 20px 16px;
}
}
.foot {
margin-top: 48px;
border-top: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255, 59, 92, 0.06), transparent 70%);
color: var(--muted);
font-size: 0.95rem;
}
.foot-main {
display: grid;
gap: 36px;
max-width: 1180px;
margin: 0 auto;
padding: 56px 32px 36px;
}
.foot-brand {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
}
.foot-brand p {
margin: 0;
}
.foot-links {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 28px 28px;
}
.foot-links .guide-groups {
display: contents;
}
.foot .guide-group p {
margin: 0 0 12px;
color: var(--text);
font-size: 0.95rem;
}
.foot .guide-group li {
margin: 0 0 9px;
line-height: 1.35;
}
.foot a {
color: var(--muted);
text-decoration: none;
transition: color 0.15s ease;
}
.foot a:hover {
color: var(--text);
}
.foot .brand,
.foot .brand:hover {
color: var(--text);
}
.foot-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 24px;
max-width: 1180px;
margin: 0 auto;
padding: 20px 32px 40px;
border-top: 1px solid var(--line);
font-size: 0.875rem;
}
.foot-bottom p {
margin: 0;
}
@media (max-width: 1100px) {
.foot-links {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.foot-main {
gap: 28px;
padding: 40px 20px 28px;
}
.foot-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
}
.foot-bottom {
padding: 20px 20px 32px;
}
}