/* purrplecat.art — "Open Late". Near-black room tinted by the work in view (--room), paper-white type, one accent from the art (--acc).
   Imbue (display, optical size axis) + Geologica (labels). No pill buttons, no highlighter, no seams. */
@font-face{font-family:Imbue;src:url(/fonts/imbue.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Geologica;src:url(/fonts/geologica.woff2) format("woff2");font-weight:300 600;font-display:swap}
@property --room{syntax:"<color>";inherits:true;initial-value:#0B0A0F}
@property --acc{syntax:"<color>";inherits:true;initial-value:#B79CFF}
:root{--ink:#0B0A0F;--paper:#F4EFE6;--dim:rgba(244,239,230,.62);--line:rgba(244,239,230,.16);--room:#0B0A0F;--acc:#B79CFF;
 --disp:Imbue,"Didot","Bodoni 72",Georgia,serif;--ui:Geologica,system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.7,0,.2,1);--out:cubic-bezier(.2,.8,.2,1);--pb:64px}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{transition:--room 1.2s cubic-bezier(.2,.8,.2,1),--acc 1.2s cubic-bezier(.2,.8,.2,1);margin:0;font:300 16px/1.6 var(--ui);background:transparent;min-height:100vh;padding-bottom:calc(var(--pb) + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;overflow-x:hidden}
#room{position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--room) 100%,#fff 4%),var(--room) 55%,color-mix(in srgb,var(--room) 55%,#000));transition:background-color 1.1s var(--out)}
@supports not (background:color-mix(in srgb,red,blue)){#room{background:var(--room)}}
#room::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%);opacity:.9;transition:opacity 1s}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--paper);color:var(--ink);padding:8px 12px}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{width:min(1240px,100% - 48px);margin:0 auto}
.kick{font:500 11px/1.4 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.h1{font:300 clamp(48px,9vw,148px)/.9 var(--disp);font-variation-settings:"opsz" 100;letter-spacing:-.02em;margin:0}
.h1 em,.h2 em{font-style:italic;color:var(--acc)}
.h2{font:300 clamp(34px,5vw,72px)/.95 var(--disp);font-variation-settings:"opsz" 90;letter-spacing:-.015em;margin:0 0 28px}
.lede{font-size:clamp(16px,1.4vw,19px);color:var(--dim);max-width:60ch;margin:24px 0 0}
.fine{font-size:13px;color:var(--dim);max-width:80ch}
.fine a,.lede a,.ft a{text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
/* masthead */
.mast{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:28px;padding:18px clamp(16px,3vw,36px);pointer-events:none}
.mast>*{pointer-events:auto}
.pg-work .mast,.pg-list .mast,.pg-wp .mast,.pg-about .mast,.pg-404 .mast{position:absolute}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 var(--disp);font-variation-settings:"opsz" 40;letter-spacing:-.01em}
.mark i{font-style:italic;color:var(--acc);transition:color 1s}
.lg{width:26px;height:26px}
.mast-n{display:flex;gap:22px;margin-left:auto}
.mast-n a{font:500 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--dim);padding:8px 0;position:relative}
.mast-n a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.mast-n a:hover,.mast-n a[aria-current]{color:var(--paper)}.mast-n a:hover::after,.mast-n a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.mast-c{margin:0;font:400 11px/1 var(--ui);letter-spacing:.14em;color:var(--dim);font-variant-numeric:tabular-nums}
/* ---------------- the wall ---------------- */
.pg-wall{overflow:hidden;height:100vh;height:100dvh;padding:0}
.pg-wall main{position:fixed;inset:0}
.wall{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
.wall.grab{cursor:grabbing}
.pg-wall main::before,.pg-wall main::after{content:"";position:fixed;left:0;right:0;z-index:4;pointer-events:none}
.pg-wall main::before{top:0;height:150px;background:linear-gradient(color-mix(in srgb,var(--room) 92%,#000),transparent)}
.pg-wall main::after{bottom:0;height:260px;background:linear-gradient(transparent,color-mix(in srgb,var(--room) 88%,#000) 78%)}
.hint-c{display:none}@media (hover:none){.hint-c{display:inline}.hint-f{display:none}}
.plane{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
/* no-JS / pre-JS: a calm grid */
.wall:not(.live){overflow:auto;touch-action:auto;padding:110px 24px 140px}
.wall:not(.live) .plane{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px;align-items:center}
.t{display:block;text-decoration:none;background:color-mix(in srgb,var(--room) 70%,#000);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.t img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--out),opacity .6s}
.wall.live .t{position:absolute;left:0;top:0;will-change:transform;contain:layout paint}
.wall.live .t:hover img{transform:scale(1.035)}
.wall.live .plane:has(.t:hover) .t:not(:hover){opacity:.55}
.wall.live .t{transition:opacity .6s var(--out)}
.wall.live .t.dim{opacity:.12}
.wall.live .t.dim img{filter:none}
.wall.live .t:focus-visible{outline-offset:6px}
.lobby{position:fixed;left:clamp(16px,3vw,36px);top:84px;z-index:5;pointer-events:none;mix-blend-mode:normal;transition:opacity 1s var(--out),transform 1s var(--out)}
.lobby-k{font:500 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.lobby-h{margin:0;font:300 clamp(40px,6.4vw,104px)/.88 var(--disp);font-variation-settings:"opsz" 100;letter-spacing:-.025em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.lobby-h em{color:var(--acc);transition:color 1s}
.moved .lobby{opacity:0;transform:translateY(-14px)}
.cap{position:fixed;left:clamp(16px,3vw,36px);bottom:calc(var(--pb) + 26px);z-index:6;pointer-events:none;display:grid;gap:4px;max-width:60vw;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.cap-n{font:500 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);transition:color 1s}
.cap-t{font:300 clamp(30px,4.2vw,64px)/.95 var(--disp);font-variation-settings:"opsz" 90;letter-spacing:-.02em;font-style:italic}
.cap-m{font:400 12px/1.2 var(--ui);letter-spacing:.08em;color:var(--dim)}
.cap>span{display:block;overflow:hidden}
.cap.in>span{animation:capin .9s var(--out) both}.cap.in>.cap-t{animation-delay:.05s}.cap.in>.cap-m{animation-delay:.1s}
@keyframes capin{from{opacity:0;transform:translateY(60%);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
.yrs{position:fixed;right:clamp(16px,3vw,36px);bottom:calc(var(--pb) + 28px);z-index:6;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 14px;max-width:46vw}
.yrs button{min-width:28px;min-height:30px;text-align:center;font:400 12px/1 var(--ui);letter-spacing:.06em;color:var(--dim);padding:8px 0;font-variant-numeric:tabular-nums;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.yrs button:hover{color:var(--paper)}.yrs button[aria-pressed=true]{color:var(--paper);border-bottom-color:var(--acc)}
.hint{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:29;margin:0;font:400 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);pointer-events:none;transition:opacity .8s}
.hint-d{color:var(--paper)}
.moved .hint{opacity:0}
.cur{position:fixed;left:0;top:0;z-index:40;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;border:1px solid rgba(244,239,230,.55);display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .3s,width .35s var(--out),height .35s var(--out),margin .35s var(--out),background-color .35s;backdrop-filter:blur(2px)}
.cur span{font:500 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase}
.cur.on{opacity:1}.cur.open{width:96px;height:96px;margin:-48px 0 0 -48px;background:color-mix(in srgb,var(--acc) 85%,transparent);border-color:transparent;color:var(--ink)}
@media (pointer:fine){.wall.live,.wall.live .t{cursor:none}}
@media (pointer:coarse),(hover:none){.cur{display:none}}
.ns{position:fixed;left:24px;bottom:90px}
/* fly layer (shared-element transition) */
#fly{position:fixed;inset:0;z-index:45;pointer-events:none}
#fly img{position:fixed;left:0;top:0;transform-origin:0 0;object-fit:cover;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);will-change:transform}
.pcnav-busy body{cursor:progress}
/* ---------------- artwork room ---------------- */
.w-hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;padding:110px clamp(16px,4vw,64px) 60px;max-width:1500px;margin:0 auto}
.w-fig{margin:0;position:relative}
.w-fig img{width:100%;aspect-ratio:1;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04)}
.w-h{font:300 clamp(52px,7.6vw,132px)/.86 var(--disp);font-variation-settings:"opsz" 100;letter-spacing:-.03em;margin:0 0 30px;font-style:italic;text-wrap:balance}
.w-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin:0 0 30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.w-dl dt{font:500 10px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.w-dl dd{margin:0;font-size:15px}
.w-act{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;background:var(--paper);color:var(--ink);font:500 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--paper);border-radius:2px;transition:background-color .3s,color .3s,border-color .3s}
.btn svg{width:11px;height:11px;fill:currentColor}
.btn:hover{background:var(--acc);border-color:var(--acc)}
.btn.ln{background:transparent;color:var(--paper);border-color:var(--line)}.btn.ln:hover{border-color:var(--paper)}
.w-pal ul,.w-lk ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sw{display:flex;flex-direction:column;gap:6px;font:400 11px/1 var(--ui);letter-spacing:.06em;color:var(--dim);text-align:left}
.sw i{display:block;width:62px;height:62px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .4s var(--out)}
.sw:hover i{transform:translateY(-4px)}.sw:hover{color:var(--paper)}.sw.ok{color:var(--acc)}
.w-lk a{display:inline-flex;gap:6px;align-items:baseline;padding:8px 0;margin-right:16px;font:400 15px/1 var(--ui);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.w-lk a:hover{border-color:var(--acc);color:var(--acc)}.w-lk a span{font-size:11px;color:var(--dim)}
/* widescreen: framed print that grows to full bleed as you scroll */
.wz{position:relative;height:190vh}
.wz-st{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.wz-f{margin:0;width:100vw;aspect-ratio:16/9;max-height:100vh;transform:scale(.62);transform-origin:50% 50%;will-change:transform}
.wz-f img{width:100%;height:100%;object-fit:contain}
.wz-c{position:absolute;left:clamp(16px,4vw,64px);bottom:34px;text-shadow:0 2px 20px rgba(0,0,0,.7)}
.wz-c p{margin:0;color:var(--dim);font-size:13px}
@supports (animation-timeline:view()){
 .wz-f{animation:wzoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
 @keyframes wzoom{from{transform:scale(.62)}to{transform:scale(1)}}}
.w-sec{padding:clamp(70px,10vw,140px) 0}
.dl{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.dl li{display:grid;grid-template-columns:110px 1fr 160px 90px auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.d-k{font:500 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.d-l{font:400 italic 22px/1 var(--disp)}.d-s,.d-z{color:var(--dim);font-size:14px}
.d-a{font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:12px 0 10px;border-bottom:1px solid var(--paper)}
.d-a:hover{color:var(--acc);border-color:var(--acc)}
.rs{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.r{display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:center;border-bottom:1px solid var(--line);transition:background-color .3s}
.r:hover{background:rgba(255,255,255,.03)}
.r-n{font:400 12px/1 var(--ui);color:var(--dim);font-variant-numeric:tabular-nums;padding-left:4px}
.r-p{text-align:left;padding:16px 0;display:flex;align-items:center;gap:12px}
.r-t{font:300 clamp(20px,2.2vw,28px)/1.1 var(--disp);font-variation-settings:"opsz" 40}
.r-p::before{content:"";width:0;height:0;border-left:8px solid var(--dim);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:border-color .3s}
.r-p:hover::before,.r.on .r-p::before{border-left-color:var(--acc)}
.r.on .r-t{color:var(--acc);font-style:italic}
.r-p.now::before{border:0;width:9px;height:10px;border-left:3px solid var(--acc);border-right:3px solid var(--acc)}
.r-d{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums}
.r-dl{font:500 10px/1 var(--ui);letter-spacing:.16em;color:var(--dim);text-decoration:none;padding:10px 4px}.r-dl:hover{color:var(--paper)}
.w-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:40px clamp(16px,4vw,64px) 80px;border-top:1px solid var(--line)}
.w-pn{text-decoration:none;display:grid;gap:6px}.w-pn span{font:500 10px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.w-pn b{font:300 italic clamp(24px,3vw,44px)/1 var(--disp)}.w-pn:hover b{color:var(--acc)}.w-pn.nx{text-align:right}
.film{list-style:none;margin:0;padding:0;display:flex;gap:4px;max-width:min(52vw,640px);overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.film::-webkit-scrollbar{display:none}
.film a{display:block;position:relative;width:44px;flex:none;text-decoration:none;transition:transform .4s var(--out)}.film img{opacity:.45;transition:opacity .3s}
.film a:hover,.film a[aria-current]{transform:translateY(-4px)}.film a:hover img,.film a[aria-current] img{opacity:1}
.film img{width:44px;height:44px}.film span{display:block;font:400 10px/1 var(--ui);color:var(--dim);margin-top:5px;text-align:center}
/* ---------------- index / wallpapers / about ---------------- */
.pg-h{padding:150px 0 30px}
.ix{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ix-r a{display:grid;grid-template-columns:52px minmax(0,1fr) 70px 200px 120px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
.ix-n{font:400 12px/1 var(--ui);color:var(--dim);font-variant-numeric:tabular-nums}
.ix-t{font:300 clamp(26px,3.6vw,54px)/1 var(--disp);font-variation-settings:"opsz" 80;letter-spacing:-.015em;transition:transform .5s var(--out),color .3s}
.ix-y,.ix-k{font-size:13px;color:var(--dim)}
.ix-p{display:flex;gap:3px}.ix-p i{width:18px;height:18px;background:var(--c)}
.ix-i{position:absolute;right:140px;top:50%;width:170px;height:170px;transform:translate(0,-50%) scale(.85) rotate(-3deg);opacity:0;pointer-events:none;z-index:2;transition:opacity .35s,transform .5s var(--out);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.ix-r a:hover .ix-t,.ix-r a:focus-visible .ix-t{transform:translateX(14px);color:var(--acc);font-style:italic}
.ix-r a:hover .ix-i,.ix-r a:focus-visible .ix-i{opacity:1;transform:translate(0,-50%) scale(1) rotate(-3deg)}
.wcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:48px 28px}
.wc-i{display:block;overflow:hidden}.wc-i img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--out)}.wc-i:hover img{transform:scale(1.04)}
.wc-t{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px}.wc-t b{font:300 italic 26px/1 var(--disp)}.wc-t span{font-size:12px;color:var(--dim)}
.wc-d{display:flex;gap:16px;margin:0}.wc-d a{font:500 10px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line)}.wc-d a:hover{border-color:var(--paper)}
.ab-g{display:grid;grid-template-columns:1fr 1fr;gap:60px}.ab-g p{color:var(--dim);max-width:56ch}
.faq{margin:0;border-top:1px solid var(--line)}.faq div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:30px;padding:24px 0;border-bottom:1px solid var(--line)}
.faq dt{font:300 clamp(22px,2.4vw,32px)/1.1 var(--disp)}.faq dd{margin:0;color:var(--dim)}
.nf{position:relative;min-height:80vh}.nf-frame{position:absolute;right:8vw;top:160px;width:min(30vw,340px);aspect-ratio:1;border:1px solid var(--line);box-shadow:inset 0 0 0 18px rgba(244,239,230,.03)}
/* footer */
.ft{padding:90px 0 40px;border-top:1px solid var(--line);margin-top:40px}
.ft-big{font:300 clamp(46px,8vw,128px)/.88 var(--disp);font-variation-settings:"opsz" 100;letter-spacing:-.025em;margin:0 0 60px}.ft-big em{color:var(--acc)}
.ft-g{display:grid;grid-template-columns:1fr 1.4fr 1.4fr;gap:40px}
.ft h2{font:500 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:0 0 8px}.ft p{color:var(--dim);font-size:14px;margin:0 0 12px}
.inl{display:flex;flex-wrap:wrap;gap:6px 16px}
.ft .fine{margin-top:50px}
/* player bar */
.pb{position:fixed;left:0;right:0;bottom:0;z-index:35;height:calc(var(--pb) + env(safe-area-inset-bottom));padding:0 clamp(12px,3vw,36px) env(safe-area-inset-bottom);display:grid;grid-template-columns:40px minmax(0,1fr) auto minmax(120px,1.2fr) auto;gap:16px;align-items:center;
 background:color-mix(in srgb,var(--room) 62%,rgba(8,8,12,.75));-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid var(--line);transition:background-color 1.1s}
.pb-c{width:40px;height:40px}
.pb-t{margin:0;min-width:0;display:grid}.pb-t b{font:400 italic 19px/1.15 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-t span{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.pb-ctl{display:flex;align-items:center;gap:6px}
.pb-b{width:36px;height:36px;display:grid;place-items:center;color:var(--dim)}.pb-b:hover{color:var(--paper)}
.pb-b svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:2}
.pb-pp{width:44px;height:44px;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:2px;transition:background-color .3s}.pb-pp:hover{background:var(--acc)}
.pb-pp svg{width:13px;height:13px;fill:currentColor}
.pb-sk{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.pb-rail{position:relative;flex:1;height:22px;display:flex;align-items:center}
.pb-rail::before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line)}
.pb-rail i{position:absolute;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:background-color 1s}
.pb-seek{position:absolute;inset:0;width:100%;margin:0;opacity:0;cursor:pointer}
.pb-dl{font:500 10px/1 var(--ui);letter-spacing:.18em;color:var(--dim);text-decoration:none;padding:10px 0}.pb-dl:hover{color:var(--paper)}
.toast{position:fixed;left:50%;bottom:calc(var(--pb) + 20px);transform:translate(-50%,20px);z-index:50;background:var(--paper);color:var(--ink);padding:12px 18px;font:500 12px/1 var(--ui);letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--out)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* page entrance */
main>*{animation:enter .9s var(--out) both}
.pg-wall main>*{animation:none}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fly-on .hero-img{opacity:0}
/* responsive */
@media (max-width:900px){
 .mast{gap:14px;padding:14px 16px;flex-wrap:wrap}.mast-c{display:none}.mast-n{gap:14px}.mast-n a{font-size:10px;letter-spacing:.14em}
 .w-hero{grid-template-columns:1fr;padding-top:96px;min-height:0}
 .dl li{grid-template-columns:1fr auto;gap:4px 12px}.d-k{grid-column:1/-1}.d-s,.d-z{font-size:12px}.d-a{grid-row:2/4;grid-column:2}
 .ix-r a{grid-template-columns:36px minmax(0,1fr) auto;gap:12px}.ix-k,.ix-p,.ix-i{display:none}
 .ab-g,.faq div,.ft-g{grid-template-columns:1fr;gap:18px}
 .w-nav{grid-template-columns:1fr 1fr}.film{display:none}
 .pb{grid-template-columns:36px minmax(0,1fr) auto;gap:12px}.pb-sk,.pb-dl{display:none}.pb-c{width:36px;height:36px}
 .pb::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px}
 .cap{bottom:calc(var(--pb) + 64px);max-width:calc(100vw - 32px)}
 .yrs{left:16px;right:16px;max-width:none;justify-content:flex-start;bottom:calc(var(--pb) + 14px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:14px}
 .yrs::-webkit-scrollbar{display:none}
 .hint{top:auto;bottom:calc(var(--pb) + 150px);left:16px;transform:none}
 .lobby{top:112px}.kick,.lobby-k,.cap-n,.hint,.mast-n a,.cap-m,.pb-t span,.yrs button{font-size:12px}.mast-n a{letter-spacing:.1em}.mast-n{gap:12px}.pg-wall main::before{height:190px}
 .nf-frame{display:none}
 .wz{height:auto}.wz-st{position:static;height:auto;padding:30px 0}.wz-f{transform:none!important;animation:none!important}.wz-c{position:static;padding:16px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .wz{height:auto}.wz-st{position:static;height:auto}.wz-f{transform:none!important;animation:none!important}.wz-c{position:static;padding:16px clamp(16px,4vw,64px)}
}