:root{
  --ground:#E5DEF5; --ground2:#D2C6F0; --haze:#AE9EF2; --mauve:#C08AA5; --ink:#18122C; --ink2:#5E5580;
  --line:rgba(24,18,44,.16); --paper:rgba(255,255,255,.46); --halo:rgba(150,130,245,.55); --glowink:#5B47C9;
  --blob:#120D22; --blobtxt:#F1ECFF; --swirl-o:.5; --blend:overlay; --mos-o:.06; --mos-blend:multiply;
  --serif:"Spectral","New York",Georgia,serif; --hand:"Neucha","Bradley Hand",cursive; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0E0A1A; --ground2:#1B1433; --haze:#4B3DA6; --mauve:#6B3A5E; --ink:#E9E3FC; --ink2:#A197C9;
    --line:rgba(233,227,252,.14); --paper:rgba(255,255,255,.06); --halo:rgba(140,120,255,.42); --glowink:#B3A6FF;
    --blob:#05030B; --swirl-o:.22; --blend:screen; --mos-o:.045; --mos-blend:screen;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink); font:18px/1.6 var(--serif); overflow-x:hidden; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px dashed var(--glowink); outline-offset:4px}
img{max-width:100%; display:block}

/* sky */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.atmo{position:absolute; inset:-25%; background:var(--ground)}
.atmo i{position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,var(--haze),transparent); animation:drift 19s ease-in-out infinite alternate}
.atmo i:nth-child(1){left:18%; top:4%}
.atmo i:nth-child(2){left:40%; top:36%; width:55%; background:radial-gradient(closest-side,var(--mauve),transparent); opacity:.7; animation-duration:23s; animation-delay:-8s}
.atmo i:nth-child(3){left:-6%; top:54%; width:62%; animation-duration:29s; animation-delay:-3s; opacity:.85}
.atmo::before{content:""; position:absolute; inset:0; background:var(--swirl) center/cover; opacity:var(--swirl-o); mix-blend-mode:var(--blend); animation:spin 180s linear infinite}
.sky::after{content:""; position:absolute; inset:0; background:var(--mosaic); background-size:280px; image-rendering:pixelated; opacity:var(--mos-o); mix-blend-mode:var(--mos-blend)}
#stars{position:absolute; inset:0; width:100%; height:100%}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,-7%) scale(1.14)}100%{transform:translate(-7%,8%) scale(.93)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes morph{0%,100%{border-radius:58% 42% 55% 45%/45% 60% 40% 55%}33%{border-radius:40% 60% 38% 62%/58% 38% 62% 42%}66%{border-radius:52% 48% 64% 36%/40% 55% 45% 60%}}
@keyframes breathe{50%{transform:scale(1.045)}}
@keyframes flare{30%{box-shadow:0 0 7rem 3rem var(--haze)}}
@keyframes puff{18%{scale:1.1; filter:brightness(1.25)}45%{scale:.96}70%{scale:1.03}}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(0); opacity:0}}
@keyframes whisper{to{transform:translate(var(--dx),-7rem) rotate(var(--r)); opacity:0}}
@keyframes bump{from{opacity:.2; filter:blur(8px); transform:translateY(-.1em) scale(1.12)}}

/* layout */
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.4rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font:italic 300 1.7rem/1 var(--serif); letter-spacing:-.03em}
.brand img{width:2.1rem; height:2.1rem; border-radius:.55rem}
.nav nav{display:flex; gap:1.4rem; font-family:var(--hand); font-size:1.15rem}
.nav nav a{text-decoration:none; color:var(--ink2)}
.nav nav a:hover{color:var(--ink)}

.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem}
.hand{font-family:var(--hand)}
.ann{font-family:var(--hand); color:var(--glowink); font-size:1.25rem; line-height:1.25}
.scrib{display:block; width:100%; height:.5em; overflow:visible}
.scrib path{fill:none; stroke:var(--glowink); stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem 3rem; align-items:center; padding-block:2.5rem 4rem}
@media (max-width:860px){.hero{grid-template-columns:1fr; padding-top:1rem}.nav nav{gap:.9rem; font-size:1rem}}
.kanji{display:inline-flex; align-items:baseline; gap:.7rem; rotate:-2deg}
.kanji b{font:400 2.2rem/1 var(--serif); color:var(--ink)}
h1{margin:.4rem 0 0; font:italic 200 clamp(4.2rem,11vw,8.6rem)/.8 var(--serif); letter-spacing:-.055em; width:fit-content}
.tagline{margin:1.6rem 0 0; font:italic 300 clamp(1.6rem,3.2vw,2.3rem)/1.15 var(--serif); max-width:18ch; text-wrap:balance}
.lede{margin:1.2rem 0 0; color:var(--ink2); max-width:46ch}
.cta{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; margin-top:2rem}
.store{display:inline-flex; align-items:center; gap:.7rem; padding:.85rem 1.4rem .85rem 1.1rem; border-radius:1.2rem .6rem 1.4rem .8rem; background:var(--ink); color:var(--ground); text-decoration:none; box-shadow:.25rem .3rem 0 var(--haze)}
.store svg{width:1.4rem; height:1.4rem; fill:currentColor}
.store span{display:flex; flex-direction:column; line-height:1.1}
.store small{font:.62rem var(--mono); letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.store strong{font:italic 400 1.25rem var(--serif)}
.linkhand{font-family:var(--hand); font-size:1.25rem; text-decoration:none; color:var(--ink)}
.linkhand .scrib{margin-top:-.1em}

.stage{position:relative; display:grid; place-items:center; min-height:26rem}
.stage .phrase{position:absolute; left:4%; top:6%; margin:0; font:italic 300 2.4rem/1 var(--serif); rotate:-3deg}
.stage .count{position:absolute; right:6%; top:2%; margin:0; font:italic 200 7.5rem/.8 var(--serif); letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.stage .count.bump{animation:bump .5s cubic-bezier(.2,.8,.2,1)}
.stage .emo{position:absolute; right:38%; top:13%; font-size:2.4rem; rotate:-14deg}
.blob{position:relative; z-index:2; width:min(17rem,70vw); aspect-ratio:1; margin-top:6rem; border:0; cursor:pointer; color:var(--blobtxt); font:1.9rem var(--hand);
  background:radial-gradient(circle at 38% 30%,rgba(90,70,170,.55),transparent 60%), var(--inktex) center/cover, var(--blob);
  box-shadow:0 0 3.2rem .6rem var(--halo); animation:morph 9s ease-in-out infinite, breathe 4.8s ease-in-out infinite; transition:scale .3s cubic-bezier(.3,1.8,.5,1); touch-action:manipulation}
.blob::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse at 34% 26%,rgba(255,255,255,.2),transparent 42%), radial-gradient(ellipse at 45% 40%,transparent 42%,rgba(0,0,0,.38) 80%)}
.blob span{position:relative; z-index:1; display:inline-block; rotate:-6deg}
.blob:active{scale:.92}
.blob.flare{animation:morph 9s ease-in-out infinite, breathe 4.8s ease-in-out infinite, flare .9s ease-out, puff .85s cubic-bezier(.2,1.4,.4,1)}
.stage .note{position:absolute; bottom:.5rem; right:8%; margin:0; rotate:-4deg}
.fly{position:absolute; z-index:3; width:6px; height:6px; margin:-3px; border-radius:50%; background:#fff; box-shadow:0 0 10px 3px var(--haze); pointer-events:none; animation:fly .95s cubic-bezier(.15,.7,.3,1) forwards}
.whisper{position:absolute; z-index:3; pointer-events:none; white-space:nowrap; font-family:var(--hand); color:var(--glowink); animation:whisper 1.3s ease-out forwards}

/* sections */
section{padding:4.5rem 0}
.sh{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 2rem; margin-bottom:2.4rem}
h2{margin:0; font:italic 300 clamp(2.3rem,5vw,3.6rem)/1 var(--serif); letter-spacing:-.035em; text-wrap:balance}
.sh .ann{max-width:40ch; rotate:-1.5deg}

.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{padding:1.6rem 1.5rem; background:var(--paper); border-radius:2rem .8rem 2.4rem 1rem; backdrop-filter:blur(8px)}
.step:nth-child(2){rotate:.8deg; margin-top:1.4rem; border-radius:.9rem 2.2rem 1rem 2.6rem}
.step:nth-child(3){rotate:-.6deg}
.step h3{margin:.2rem 0 .5rem; font:italic 400 1.6rem/1.1 var(--serif)}
.step p{margin:0; color:var(--ink2)}
.step .num{font:italic 200 2.6rem/1 var(--serif); color:var(--glowink)}

.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem}
.chip{padding:.45rem .9rem; font:italic 400 1.15rem var(--serif); background:var(--paper); border-radius:1rem .5rem 1.1rem .6rem}
.chip:nth-child(odd){rotate:-1.5deg}
.chip:nth-child(3n){rotate:1.2deg}

.phones{display:flex; justify-content:center; gap:clamp(1rem,3vw,2.4rem); flex-wrap:wrap; margin-top:1rem}
.phones figure{margin:0; width:min(15rem,42vw)}
.phones img{border-radius:2.2rem; box-shadow:0 0 0 .45rem #0c0917, 0 2rem 4rem -1rem rgba(20,10,40,.45)}
.phones figure:nth-child(1){rotate:-2.5deg; margin-top:2rem}
.phones figure:nth-child(2){rotate:1.2deg}
.phones figure:nth-child(3){rotate:-.8deg; margin-top:3rem}
.phones figcaption{margin-top:1.1rem; text-align:center; font-family:var(--hand); color:var(--ink2); font-size:1.1rem}

.together{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem 3rem; align-items:center}
@media (max-width:860px){.together{grid-template-columns:1fr}}
.together p{color:var(--ink2); max-width:48ch}
.ticket{display:inline-flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.3rem; border:1.5px dashed var(--glowink); border-radius:1.4rem; background:var(--paper); rotate:-2deg}
.tiles{display:flex; gap:.25rem}
.tiles b{display:grid; place-items:center; width:2.1rem; height:2.9rem; font:700 1.5rem var(--mono); color:#241a47; background:#efe8ff; border-radius:.45rem}
.tiles b:nth-child(odd){rotate:-3deg} .tiles b:nth-child(even){rotate:2.5deg}
.tiles i{align-self:center; font-style:normal; opacity:.5}
.quiet{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.2rem 2.4rem; list-style:none; margin:0; padding:0}
.quiet li{padding:.9rem 0; border-top:1px dashed var(--line)}
.quiet strong{display:block; font:italic 400 1.3rem var(--serif)}
.quiet span{color:var(--ink2)}

details{border-top:1px dashed var(--line); padding:1rem 0}
summary{cursor:pointer; list-style:none; font:italic 400 1.35rem var(--serif)}
summary::-webkit-details-marker{display:none}
summary::after{content:" +"; font-family:var(--hand); color:var(--glowink)}
details[open] summary::after{content:" −"}
details p{margin:.6rem 0 0; color:var(--ink2); max-width:62ch}

footer{position:relative; z-index:1; padding:3rem 0 4rem; color:var(--ink2); font-size:.95rem}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; border-top:1px dashed var(--line); padding-top:1.6rem}
footer nav{display:flex; gap:1.4rem; font-family:var(--hand); font-size:1.1rem}

/* documents */
.doc{max-width:44rem; padding-block:2rem 4rem}
.doc h1{font-size:clamp(3rem,8vw,5rem)}
.doc h2{font-size:1.9rem; margin:2.6rem 0 .8rem}
.doc p,.doc li{color:var(--ink2)}
.doc strong{color:var(--ink)}
.doc .updated{margin-top:1rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}