/* LeTa · Living Screen */
@font-face{font-family:Archivo;src:url('../fonts/archivo-400_800-lat.woff2') format('woff2');font-weight:400 800;font-display:swap}
/* hidden always wins over component display rules (chips, fieldsets, panels) */
[hidden]{display:none!important}
@font-face{font-family:Archivo;src:url('../fonts/archivo-400_800-ext.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Mono;src:url('../fonts/jetbrains-mono-400-lat.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Mono;src:url('../fonts/jetbrains-mono-400-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --ink:#131310;--ink-2:#1b1b17;--ink-3:#262520;
  --bone:#eae7de;--bone-2:#d9d2c4;--muted:#a9a498;
  --copper:#cda17e;--copper-hi:#e6bf9b;--copper-deep:#8e674b;
  --line:rgba(234,231,222,.13);
  --gutter:clamp(16px,3.2vw,48px);
  --osd-h:64px;
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:Georgia,'Times New Roman',serif;
  --sans:Archivo,system-ui,sans-serif;
  --mono:Mono,ui-monospace,monospace;
  --dock-unit:52px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,p,figure,ol,ul,fieldset{margin:0;padding:0}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
::selection{background:var(--copper);color:var(--ink)}
:focus-visible{outline:2px solid var(--copper);outline-offset:4px;border-radius:4px}
html{scrollbar-color:#4a443b var(--ink);scrollbar-width:thin}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:#4a443b;border-radius:8px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.5;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.035em}
.line{display:block}
.skip{position:fixed;left:12px;top:12px;z-index:200;padding:10px 16px;background:var(--bone);color:var(--ink);transform:translateY(-200%)}
.skip:focus{transform:none}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- S0 · Gate ---------- */
.gate{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:var(--ink);
  --ix:50%;--iy:50%;--iris:0px;
  -webkit-mask-image:radial-gradient(circle at var(--ix) var(--iy),transparent var(--iris),#000 calc(var(--iris) + 1px));
          mask-image:radial-gradient(circle at var(--ix) var(--iy),transparent var(--iris),#000 calc(var(--iris) + 1px))}
.no-js .gate,.gate.is-gone{display:none}
.gate-inner{display:grid;justify-items:center;text-align:center;gap:28px;padding:var(--gutter);max-width:720px}
.standby{width:9px;height:9px;border-radius:50%;background:var(--copper);box-shadow:0 0 18px 4px rgba(205,161,126,.45),0 0 2px var(--copper-hi);animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
/* the gate's words stay hidden until the script has put in the visitor's language and hour,
   so the default English never flashes; a late fallback reveals them if the script never arrives */
.js .gate:not(.is-lit) :is(.gate-greeting,.gate-enter span,.gate-sound){visibility:hidden;animation:gateFallback 0s 6s forwards}
@keyframes gateFallback{to{visibility:visible}}
.gate-greeting{font-size:clamp(28px,4.2vw,56px);line-height:1.12;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.gate-greeting em{display:block;font-family:var(--serif);font-weight:400;color:var(--bone-2)}
.gate-count{color:var(--muted);font-variant-numeric:tabular-nums}
.gate-enter{display:inline-flex;align-items:center;gap:18px;min-height:56px;padding:0 26px;border:1px solid rgba(205,161,126,.5);border-radius:999px;font-size:15px;letter-spacing:-.01em;transition:background .4s var(--ease),color .4s var(--ease),opacity .6s,border-color .4s}
.gate-enter svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.gate-enter:hover:not(:disabled){background:var(--copper);color:var(--ink);border-color:var(--copper)}
.gate-enter:hover:not(:disabled) svg{transform:translateX(4px)}
.gate-enter:disabled{opacity:.18;cursor:progress}
.gate-sound{color:#8f8a7e;font-size:10px}

/* ---------- OSD frame ---------- */
.osd{position:fixed;inset:0;z-index:70;pointer-events:none;color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.osd a,.osd button{pointer-events:auto}
.osd-brand{position:absolute;left:var(--gutter);top:calc(var(--osd-h)/2);transform:translateY(-50%);display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.04em}
.osd-brand img{width:26px;height:26px;border-radius:8px}
.osd-actions{position:absolute;right:var(--gutter);top:calc(var(--osd-h)/2);transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.osd-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;transition:background .3s}
.osd-btn:hover{background:rgba(234,231,222,.08)}
.osd-dim{opacity:.45}
.osd-btn svg{width:15px;height:15px}
.lang{position:relative}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;padding:6px;border-radius:14px;background:rgba(22,21,18,.96);border:1px solid rgba(234,231,222,.14);box-shadow:0 20px 40px -12px rgba(0,0,0,.7);text-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lang-list[hidden]{display:none}
.lang-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:0 10px;border-radius:9px;font-size:14px;color:var(--bone-2);text-align:left}
.lang-list button .mono{width:22px;color:var(--muted);font-size:10px}
.lang-list button:hover,.lang-list button:focus-visible{background:rgba(234,231,222,.08);color:var(--bone);outline:none}
.lang-list button:focus-visible{box-shadow:inset 0 0 0 2px var(--copper)}
.lang-list button[aria-checked=true]{color:var(--bone)}
.lang-list button[aria-checked=true] .mono{color:var(--copper)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;background:currentColor;height:4px;border-radius:1px}
.osd-sound[aria-pressed=true] .eq i{animation:eq 1.1s ease-in-out infinite}
.osd-sound[aria-pressed=true] .eq i:nth-child(2){animation-delay:-.4s}.osd-sound[aria-pressed=true] .eq i:nth-child(3){animation-delay:-.75s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.osd-get{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--bone);color:var(--ink);font-size:13px;font-weight:500;text-shadow:none;transition:background .3s}
.osd-get:hover{background:var(--copper-hi)}
.osd-soon{cursor:default;white-space:nowrap}.osd-soon:hover{background:var(--bone)}
.osd-channel,.osd-clock{position:absolute;bottom:22px;font-variant-numeric:tabular-nums;color:var(--bone-2)}
.osd-channel{left:var(--gutter)}
.osd-clock{right:var(--gutter)}
.osd-channel [data-ch-num]{color:var(--copper)}
.osd-line{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.osd-line-top{top:var(--osd-h)}
.osd-line-bottom{bottom:58px}
.osd-mark{position:absolute;width:11px;height:11px}
.osd-mark::before,.osd-mark::after{content:'';position:absolute;background:rgba(234,231,222,.5)}
.osd-mark::before{left:5px;top:0;width:1px;height:11px}.osd-mark::after{top:5px;left:0;height:1px;width:11px}
.osd-mark-tl{left:calc(var(--gutter) - 5px);top:calc(var(--osd-h) - 5px)}
.osd-mark-tr{right:calc(var(--gutter) - 5px);top:calc(var(--osd-h) - 5px)}
.osd-mark-bl{left:calc(var(--gutter) - 5px);bottom:53px}
.osd-mark-br{right:calc(var(--gutter) - 5px);bottom:53px}
.osd-channel,.osd-clock{transition:opacity .5s}

/* ---------- S1/S2 · Room ---------- */
.room{position:relative;height:440vh}
.room-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0c0c0a}
.room-cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.room-still,.room-still img{position:absolute;inset:0;width:100%;height:100%}
.room-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:0;transition:opacity 1.4s ease}
.room-still img.is-on{opacity:1}
.room-still img[data-tod=night]{filter:brightness(1.45) contrast(1.05)}
.room-still img[data-tod=dawn]{filter:brightness(1.12)}
.tod-dial{margin-top:30px;max-width:440px}
.tod-note{font-size:13px;line-height:1.5;color:var(--bone-2);text-wrap:pretty}
.tod-note b{font-weight:500;color:var(--copper);font-variant-numeric:tabular-nums}
.tod-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tod-options button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px 0 10px;border-radius:999px;border:1px solid rgba(234,231,222,.2);font-size:13px;color:var(--bone-2);background:rgba(16,15,13,.35);transition:background .3s,color .3s,border-color .3s}
.tod-options svg{width:16px;height:16px}
.tod-options button:hover{border-color:rgba(234,231,222,.5);color:var(--bone)}
.tod-options button[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.tod-options button.is-now::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--copper);margin-left:2px}
.tod-toast{position:absolute;left:50%;top:calc(var(--osd-h) + 22px);transform:translate(-50%,-8px);padding:9px 16px;border-radius:999px;background:rgba(16,15,13,.72);border:1px solid rgba(205,161,126,.35);color:var(--bone);opacity:0;transition:opacity .6s,transform .6s var(--ease);white-space:nowrap;pointer-events:none}
.tod-toast.is-on{opacity:1;transform:translate(-50%,0)}
.room-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,10,8,.78) 0%,rgba(10,10,8,.38) 34%,transparent 58%),
  linear-gradient(0deg,rgba(10,10,8,.7) 0%,transparent 26%),
  linear-gradient(180deg,rgba(10,10,8,.55) 0%,transparent 18%)}
[data-tod=day] .room-shade{background:
  linear-gradient(90deg,rgba(18,17,14,.84) 0%,rgba(18,17,14,.5) 34%,transparent 58%),
  linear-gradient(0deg,rgba(18,17,14,.6) 0%,transparent 22%),
  linear-gradient(180deg,rgba(18,17,14,.5) 0%,transparent 16%)}
.hero{position:absolute;left:var(--gutter);top:50%;transform:translateY(-46%);width:min(46vw,680px)}
.hero-title{font-size:clamp(60px,8.6vw,156px);line-height:.9;letter-spacing:-.05em;font-weight:500}
.hero-title .serif{color:var(--bone-2);padding:.04em 0 .12em}
.hero-sub{margin-top:34px;max-width:38ch;font-size:17px;color:#d4cec2;text-wrap:pretty}
.hero-promise{margin-top:26px;color:var(--copper)}
.tv-hotspot{white-space:nowrap;position:absolute;left:68%;top:41%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(234,231,222,.22);background:rgba(18,17,14,.55);font-size:13px;color:var(--bone);transition:background .35s,border-color .35s,opacity .4s,transform .5s var(--ease)}
.tv-hotspot:hover{background:rgba(205,161,126,.9);border-color:var(--copper);color:var(--ink)}
.tv-led{width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 10px 2px rgba(205,161,126,.6);animation:breathe 3.6s ease-in-out infinite}
.tv-hotspot:hover .tv-led{background:var(--ink);box-shadow:none}
.scroll-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--bone-2)}
.scroll-tick{width:1px;height:34px;background:linear-gradient(var(--bone),transparent);animation:tick 2.2s var(--ease) infinite;transform-origin:top}
@keyframes tick{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.room-glow{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(230,170,120,.55),rgba(120,140,190,.22) 55%,transparent 100%);filter:blur(10px)}
.room-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(6,6,5,.85) 100%)}
.screen{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;transform-origin:0 0;opacity:0;pointer-events:none;background:#000;border-radius:2px;will-change:left,top,width,height}
.screen-inner{position:absolute;inset:0;overflow:hidden;background:#050504}
.screen-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.screen-boot{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;opacity:0}
.screen-boot img{width:96px;height:96px;border-radius:26px}
.screen-boot span{font-size:40px;font-weight:600;letter-spacing:-.05em}
.screen-bar{position:absolute;left:0;right:0;top:0;height:var(--osd-h);display:flex;align-items:center;justify-content:center;gap:40px;font-size:13px;color:var(--bone-2);border-bottom:1px solid rgba(234,231,222,.08);background:rgba(10,10,9,.35)}
.screen-bar-brand{display:flex;align-items:center;gap:8px;font-weight:500}
.screen-bar-brand img{border-radius:5px}
.screen-dock{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:flex-end;gap:10px;padding:10px;border-radius:24px;background:rgba(28,27,24,.36);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.screen-dock .app-tile{width:52px;border-radius:24%;box-shadow:none}
.screen-welcome{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(88vw,640px);text-align:center;font-size:clamp(28px,3.2vw,48px);line-height:1.12;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.screen-welcome em{display:block;margin-top:18px;font-style:normal;font-size:16px;line-height:1.6;letter-spacing:0;font-weight:400;color:var(--muted);text-wrap:pretty}
.screen-flash{position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:overlay;pointer-events:none}
.screen-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 28%,transparent 42%,transparent 70%,rgba(255,255,255,.04) 100%)}

/* Manifesto (scroll-lit words) */
.manifesto{position:relative;padding:clamp(140px,22vh,260px) var(--gutter);background:var(--ink)}
.manifesto-text{max-width:22ch;font-size:clamp(38px,5.6vw,96px);line-height:1.04;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.manifesto-text .sx-word{opacity:.14}
.manifesto-text em{font-family:var(--serif);font-weight:400;color:var(--copper-hi)}
.manifesto-sign{margin-top:48px;color:var(--muted)}

/* Pear-style chapter rail */
.rail{position:fixed;left:14px;top:50%;z-index:69;transform:translateY(-50%);display:flex;align-items:flex-start;gap:14px;pointer-events:none;opacity:0;transition:opacity .6s}
body.dock-on .rail{opacity:1}
.rail-ticks{display:grid;gap:11px}
.rail-ticks li{width:10px;height:1px;background:rgba(234,231,222,.32);transition:width .5s var(--ease),background .5s}
.rail-ticks li.is-on{width:30px;background:var(--copper)}
.rail-label{display:none;color:var(--bone-2);font-size:10px;white-space:nowrap;transform:translateY(var(--ry,0));transition:transform .5s var(--ease);margin-top:-6px}

/* Cursor + grain */
.cursor{position:fixed;left:0;top:0;z-index:130;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label,.has-cursor [role=button]{cursor:none}
.has-cursor input,.has-cursor textarea{cursor:text}
.cursor.is-text .cursor-body,.cursor.is-text .cursor-label{opacity:0}
.cursor-body{position:absolute;left:-11px;top:-2px;width:22px;height:48px;transform-origin:11px 2px;transition:opacity .2s}
.cursor-remote{width:22px;height:48px;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.cursor-remote .r-body{fill:#2a2925;stroke:rgba(234,231,222,.35);stroke-width:1}
.cursor-remote .r-pad{fill:#1a1916;stroke:rgba(234,231,222,.22);stroke-width:.8}
.cursor-remote .r-ok{fill:#3a3832}
.cursor-remote .r-btn{fill:#3a3832}
.cursor-remote .r-led{fill:#5a5348;transition:fill .2s}
.cursor.is-hover .cursor-remote .r-led,.cursor.is-label .cursor-remote .r-led{fill:var(--copper-hi)}
.cursor.is-hover .cursor-remote .r-ok,.cursor.is-label .cursor-remote .r-ok{fill:var(--copper)}
.cursor-beam{position:absolute;left:11px;top:2px;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid var(--copper-hi);opacity:0;transform:scale(.2)}
.cursor.is-press .cursor-beam{animation:beam .5s ease-out}
@keyframes beam{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.6)}}
.cursor-label{position:absolute;left:18px;top:6px;padding:5px 10px;border-radius:999px;background:var(--copper);color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .25s var(--ease)}
.cursor.is-label .cursor-label{opacity:1;transform:none}
.grain{position:fixed;inset:-50%;z-index:125;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(6) infinite}
/* phones and TVs: keep the grain, skip its motion (it re-blends the whole screen) */
@media (pointer:coarse){.grain{animation:none;inset:0}}
.has-cursor dialog[open],.has-cursor dialog[open] *{cursor:auto}
.has-cursor dialog[open] :is(a,button,video){cursor:pointer}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Split text masks */
.sx-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sx-char,.sx-word{display:inline-block}

/* Aristide slices, Trionn viewfinder, Pear halftone */
.slices{position:absolute;inset:0;display:flex;pointer-events:none;z-index:2}
.slices i{flex:1;background-size:var(--sw) 100%;background-repeat:no-repeat}
.vf{position:absolute;inset:0;pointer-events:none;z-index:3}
.vf i{position:absolute;width:18px;height:18px;border-color:var(--copper);border-style:solid;border-width:0}
.vf i:nth-child(1){left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.vf i:nth-child(2){right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.vf i:nth-child(3){left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.vf i:nth-child(4){right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.halftone{--d:0;-webkit-mask-image:radial-gradient(circle,#000 calc(var(--d)*1px),transparent calc(var(--d)*1px + 1px));mask-image:radial-gradient(circle,#000 calc(var(--d)*1px),transparent calc(var(--d)*1px + 1px));-webkit-mask-size:16px 16px;mask-size:16px 16px}

/* Inkwell ring of 20 styles */
.ring-scene{position:relative;height:100vh;height:100svh;overflow:hidden;perspective:1400px;margin:0 calc(var(--gutter)*-1)}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ring button{position:absolute;left:calc(var(--rw)*-.5);top:calc(var(--rw)*-.28);width:var(--rw);aspect-ratio:16/9;border-radius:8px;overflow:hidden;backface-visibility:hidden;box-shadow:0 20px 40px -18px rgba(0,0,0,.8);transition:filter .3s}
.ring button img{width:100%;height:100%;object-fit:cover}
.ring button:hover{filter:brightness(1.15)}
.ring-caption{position:absolute;left:50%;bottom:12vh;transform:translateX(-50%);text-align:center;color:var(--bone-2)}
.ring-caption .mono{color:var(--copper)}

/* Oryzo construction lines */
.construct{position:absolute;pointer-events:none;overflow:visible;z-index:2}
.construct .c-box{fill:none;stroke:rgba(205,161,126,.45);stroke-width:.6;stroke-dasharray:2 2}
.construct .c-path{fill:none;stroke:var(--copper-hi);stroke-width:1}
.construct .c-handle{stroke:rgba(230,191,155,.7);stroke-width:.6}
.construct circle{fill:var(--ink);stroke:var(--copper-hi);stroke-width:.8}

/* ---------- Dock (site navigation) ---------- */
.dock{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,140%);opacity:0;pointer-events:none;transition:transform .9s var(--ease),opacity .6s}
.dock.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.dock-list{--u:var(--dock-unit);display:flex;align-items:flex-end;gap:calc(var(--u)*.18);padding:calc(var(--u)*.2);border-radius:calc(var(--u)*.46);border:1px solid rgba(255,255,255,.12);transition:background .5s,border-radius .5s,padding .3s}
.dock[data-glass=glass] .dock-list{background:rgba(28,27,24,.36);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
.dock[data-glass=frosted] .dock-list{background:rgba(70,66,58,.42);-webkit-backdrop-filter:blur(30px) saturate(.9) brightness(1.08);backdrop-filter:blur(30px) saturate(.9) brightness(1.08)}
.dock[data-glass=liquid] .dock-list{position:relative;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px) saturate(1.4) brightness(1.06);backdrop-filter:blur(12px) saturate(1.4) brightness(1.06);backdrop-filter:url(#liquid) blur(1px) saturate(1.5) brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.06),0 20px 44px -18px rgba(0,0,0,.7)}
.dock[data-glass=liquid] .dock-list::before{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%,transparent 70%,rgba(255,255,255,.06))}
.dock[data-glass=matte] .dock-list{background:#141923;border-color:rgba(205,161,126,.35)}
.dock[data-glass=none] .dock-list{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.dock[data-glass=none] .dock-item{box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.dock[data-frame=slight] .dock-list{border-radius:calc(var(--u)*.24)}
.dock[data-frame=sharp] .dock-list{border-radius:4px}
.dock[data-frame=capsule] .dock-list{border-radius:999px;padding-inline:calc(var(--u)*.4)}
.dock-item{position:relative;display:grid;place-items:center;width:var(--u);height:var(--u);border-radius:30%;background:rgba(234,231,222,.09);color:var(--bone);transform-origin:50% 100%;transition:background .3s,color .3s,border-radius .5s;will-change:transform}
.dock[data-shape=rounded] .dock-item{border-radius:24%}
.dock[data-shape=circle] .dock-item{border-radius:50%}
.dock[data-shape=square] .dock-item{border-radius:14%}
.dock-item svg{width:46%;height:46%}
.dock[data-icon=glass] .dock-item:not([aria-current]){background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2)}
.dock[data-icon=adaptive] .dock-item:not([aria-current]){background:rgba(205,161,126,.2);color:var(--copper-hi)}
.dock[data-icon=custom] .dock-item:not([aria-current]){background:rgba(63,95,134,.55);color:#eef2f8}
.dock-item:hover,.dock-item:focus-visible{background:rgba(234,231,222,.18)}
.dock-item[aria-current=true]{background:var(--copper);color:var(--ink)}
.dock-item[aria-current=true]::after{content:'';position:absolute;bottom:calc(var(--u)*-.14);left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--copper)}
.dock-label{position:absolute;left:0;bottom:calc(100% + 14px);padding:6px 12px;border-radius:8px;background:rgba(20,19,16,.88);border:1px solid rgba(234,231,222,.12);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.dock-label.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Chapters ---------- */
.chapter{position:relative;padding:clamp(110px,16vh,190px) var(--gutter)}
.chapter h2{font-size:clamp(44px,6.2vw,108px);line-height:.94;letter-spacing:-.05em;font-weight:500;text-wrap:balance}
.chapter h2 .serif{color:var(--bone-2)}
.chapter-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,6vw,110px);align-items:end;margin-bottom:clamp(48px,8vh,96px)}
.chapter-head p{max-width:42ch;color:var(--muted);font-size:17px;text-wrap:pretty}

/* S3 · Wall */
.wall{min-height:100vh;display:grid;place-items:center;overflow:hidden;background:var(--ink)}
.wall-clutter{position:absolute;inset:-4% -4%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:10px;padding:10px}
.ad{position:relative;border-radius:10px;overflow:hidden;background:var(--c,#2a2722);display:flex;align-items:flex-end;padding:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);will-change:transform,opacity,filter}
.ad::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.22),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.ad b{position:absolute;top:12px;left:12px;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.45);font-weight:400}
.ad span{position:relative}
.wall-copy{position:relative;z-index:2;text-align:center;max-width:1000px}
.wall-copy p{margin:30px auto 0;max-width:44ch;color:#cfc9bd;font-size:18px}
.wall-copy .wall-proof{margin-top:34px;color:var(--copper);font-size:12px;font-variant-numeric:tabular-nums}
.wall-proof em{font-style:normal;color:var(--bone)}

/* S5 · Atelier */
.atelier-bench{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.6fr);gap:clamp(24px,4vw,64px);align-items:center}
.atelier-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 0 0 8px #0b0b09,0 0 0 9px rgba(234,231,222,.1),0 40px 80px -30px rgba(0,0,0,.8)}
.atelier-screen>img{width:100%;height:100%;object-fit:cover}
.atelier-controls{display:grid;gap:20px}
.atelier-controls fieldset{display:flex;flex-wrap:wrap;gap:8px}
.atelier-controls legend{width:100%;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.atelier-controls label{position:relative;cursor:pointer}
.atelier-controls input[type=radio]{position:absolute;opacity:0;inset:0;cursor:pointer}
.atelier-controls label span{display:inline-flex;min-height:38px;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;transition:background .3s,color .3s,border-color .3s}
.atelier-controls input:checked+span{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.atelier-controls input:focus-visible+span{outline:2px solid var(--copper);outline-offset:3px}
.atelier-range{display:flex;align-items:center;gap:16px;width:100%}
.atelier-range input{flex:1;accent-color:var(--copper)}
.atelier-range output{font-family:var(--mono);font-size:12px;color:var(--copper);min-width:4ch;font-variant-numeric:tabular-nums}
.atelier-result{color:var(--bone-2);font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.35;letter-spacing:-.02em}

/* S6 · Weather */
.weather{min-height:100vh;display:flex;align-items:center;overflow:hidden}
.weather-media{position:absolute;inset:0}
.weather-media video{width:100%;height:100%;object-fit:cover}
.weather-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,12,.86),rgba(10,12,12,.35) 60%,rgba(10,12,12,.2)),linear-gradient(0deg,rgba(10,10,9,.6),transparent 40%)}
.weather-copy{position:relative;max-width:680px}
.weather h2.is-live{font-size:clamp(38px,4.6vw,78px)}
.weather-copy>p{margin-top:28px;max-width:42ch;color:#d3cec4;font-size:17px}
.weather-form{margin-top:40px;display:grid;gap:10px;max-width:460px}
.weather-form label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.weather-field{display:flex;border-bottom:1px solid rgba(234,231,222,.4);transition:border-color .3s}
.weather-field:focus-within{border-color:var(--copper)}
.weather-field input::placeholder{color:rgba(234,231,222,.28)}
.weather-field input{flex:1;min-width:0;background:none;border:0;padding:12px 0;font-size:24px;letter-spacing:-.02em;outline:none;caret-color:var(--copper)}
.weather-field button{padding:0 4px 0 18px;font-size:14px;color:var(--copper)}
.weather-status{min-height:1.5em;color:var(--bone-2)}

/* S7/S8 · Screens */
.shelf-figure,.desk-figure{position:relative}
.shelf-figure img,.desk-figure img{width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 8px #0b0b09,0 0 0 9px rgba(234,231,222,.1),0 50px 90px -30px rgba(0,0,0,.85)}
.shelf-figure figcaption,.desk-figure figcaption{margin-top:28px;color:var(--muted)}
.desk-figure figcaption{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--bone-2)}

/* S9 · Depths (channel zapper) */
.depths{padding-bottom:0}
/* S9 hidden channels: a TV guide, flipped at your own pace */
.chg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(24px,3.4vw,60px);align-items:start}
.chg>*{min-width:0}
.chg-tv{display:grid;gap:14px}
.chg-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#090908;cursor:pointer;box-shadow:0 0 0 8px #0b0b09,0 0 0 9px rgba(234,231,222,.1),0 50px 90px -30px rgba(0,0,0,.85)}
.chg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.chg-noise{position:absolute;inset:0;opacity:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(234,231,222,.18) 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 50%,rgba(234,231,222,.25),rgba(10,10,9,.85));mix-blend-mode:screen}
.chg-osd{position:absolute;left:18px;top:14px;padding:6px 10px;border-radius:6px;background:rgba(10,10,9,.55);color:#9fe39a;font-size:clamp(12px,1.1vw,16px);letter-spacing:.08em;text-shadow:0 0 8px rgba(120,220,120,.5)}
.chg-remote{display:flex;align-items:center;gap:8px}
.chg-btn{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--bone-2);transition:background .25s,color .25s,border-color .25s}
.chg-btn:hover{border-color:var(--bone);color:var(--bone)}
.chg-auto{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:40px;padding:0 14px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chg-auto i{width:8px;height:8px;border-radius:50%;background:#5d594f;transition:background .3s,box-shadow .3s}
.chg-auto[aria-pressed=true] i{background:var(--copper);box-shadow:0 0 8px var(--copper);animation:breathe 2.4s ease-in-out infinite}
.chg-copy{min-height:clamp(150px,17vw,220px)}
.chg-title{font-size:clamp(26px,2.5vw,40px);line-height:1.05;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.chg-body{margin-top:14px;color:var(--muted);font-size:15.5px;max-width:44ch;text-wrap:pretty}
.chg-body em{display:block;margin-top:10px;font-family:var(--serif);color:var(--bone-2);font-size:17px}
.chg-list{margin-top:22px;border-top:1px solid var(--line)}
.chg-list button{position:relative;display:flex;align-items:baseline;gap:14px;width:100%;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px;color:var(--muted);transition:color .25s,padding .35s var(--ease)}
.chg-list button .mono{font-size:10px;color:var(--muted);transition:color .25s}
.chg-list button:hover{color:var(--bone)}
.chg-list button[aria-selected=true]{color:var(--bone);padding-left:12px}
.chg-list button[aria-selected=true] .mono{color:var(--copper)}
.chg-list button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.chg-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:0 50%}

/* S12 · Return: the camera steps back out of the TV */
.return{position:relative;height:260vh;padding:0}
.return-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0c0c0a}
.return-cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.return-room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.return-glow{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(closest-side,rgba(230,170,120,.5),rgba(120,140,190,.2) 55%,transparent);filter:blur(10px)}
.return-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(10,10,8,.86),rgba(10,10,8,.35) 55%,transparent),linear-gradient(0deg,rgba(10,10,8,.75),transparent 45%)}
.return-screen{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;background:#050504;will-change:transform}
.return-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.return-dock{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%)}
.return-dock .dock{position:static;transform:none;opacity:1;pointer-events:none}
.return-copy{position:absolute;left:var(--gutter);bottom:clamp(100px,16vh,180px);max-width:720px;opacity:0}
.return-copy>p:not(.mono){margin-top:26px;max-width:40ch;color:#d4cec2;font-size:18px}
.room-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.weather-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.weather-copy,.weather-tv{z-index:2}
/* CTA */
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:40px;min-height:60px;padding:0 28px;border-radius:999px;background:var(--copper);color:#191612;font-size:16px;font-weight:500;transition:background .3s}
.cta svg{width:18px;height:18px;fill:currentColor;stroke:none}
.cta:hover{background:var(--copper-hi)}
.return-small{margin-top:20px;color:var(--muted)}

/* Obys / AIM: a slow band of the promise, nudged by scroll speed */
/* Lando / Obys: a small picture follows the pointer over the list */
.peek{position:fixed;left:0;top:0;z-index:66;width:280px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .3s,scale .3s;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.peek.is-on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}

/* Footer */
.footer{position:relative;padding:clamp(80px,12vh,140px) var(--gutter) 140px;border-top:1px solid var(--line);overflow:hidden}
.footer-banner{position:relative;margin:0 auto clamp(36px,6vh,72px);width:min(100%,920px);aspect-ratio:16/9;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 38%,transparent 100%);will-change:transform,opacity}
.footer-banner img{width:100%;height:100%;object-fit:contain;filter:saturate(.92)}
.footer-line{font-size:clamp(28px,3.6vw,60px);line-height:1.1;max-width:20ch;color:var(--bone-2)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(60px,10vh,120px)}
.footer-links{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.footer-links a{padding:10px 0;transition:color .3s}
.footer-links a:hover{color:var(--copper)}
.footer-copy{color:#8f8a7e}

/* S11 · Saver */
.saver{position:fixed;inset:0;z-index:110;background:#050504;opacity:0;visibility:hidden;transition:opacity 1.6s ease,visibility 0s 1.6s;cursor:none}
.saver.is-on{opacity:1;visibility:visible;transition:opacity 1.6s ease}
.saver video{width:100%;height:100%;object-fit:cover;opacity:.8}
.saver-copy{position:absolute;left:var(--gutter);bottom:clamp(40px,8vh,90px)}
.saver-clock{font-size:clamp(80px,12vw,200px);line-height:.9;letter-spacing:-.06em;font-weight:500;font-variant-numeric:tabular-nums}
.saver-line{margin-top:16px;font-size:20px;color:var(--bone-2)}
.saver-line em{font-family:var(--serif)}

/* Signal transition */
.signal{position:fixed;inset:0;width:100%;height:100%;z-index:118;pointer-events:none;display:none}
.signal.is-on{display:block}
.signal.is-fallback{background:var(--ink);opacity:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* placeholders while pictures arrive */
.chg-screen,.tvset-screen,.shelf-tv,.desk-tv,.atelier-screen,.spec-stage,.look-frame,.launch,.ring button,.guide img,.bnr,.weather-tv img{background-color:#16150f;background-image:linear-gradient(110deg,#16150f 30%,#211f19 50%,#16150f 70%)}

/* Shared TV frame */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.spec-stage,.tvset-screen,.shelf-tv,.desk-tv,.weather-tv img{border-radius:12px;overflow:hidden;background:#090908;box-shadow:0 0 0 8px #0b0b09,0 0 0 9px rgba(234,231,222,.1),0 50px 90px -30px rgba(0,0,0,.85)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--bone-2);transition:background .3s,color .3s,border-color .3s}
.chip:hover{border-color:rgba(234,231,222,.45);color:var(--bone)}
.chip[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}

/* S4 · Zap TV */
.tvset{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.55fr);gap:clamp(28px,4vw,72px);align-items:center}
.tvset-screen{position:relative;aspect-ratio:16/9}
.tvset-img{width:100%;height:100%;object-fit:cover}
.tvset-static{position:absolute;inset:0;opacity:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .9 0 0 0 0 .86 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px}
.tvset-static.is-on{animation:static .38s steps(5) both}
@keyframes static{0%{opacity:.95;background-position:0 0;transform:translateY(-2%)}60%{opacity:.6}100%{opacity:0;background-position:60px 140px;transform:none}}
.tvset-osd{position:absolute;top:7%;right:5%;display:flex;align-items:baseline;gap:14px;font-size:clamp(13px,1.4vw,20px);letter-spacing:.08em;color:#f4f1e8;text-shadow:0 0 12px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.9);opacity:0;transition:opacity .4s}
.tvset-osd [data-tv-num]{font-size:2.2em;line-height:1;color:var(--copper-hi)}
.tvset-osd.is-on{opacity:1}
.tvset-count{color:var(--copper)}
.tvset-name{margin-top:14px;font-size:clamp(30px,3vw,48px);line-height:1;letter-spacing:-.04em;font-weight:500}
.tvset-desc{margin-top:16px;color:var(--muted);font-size:16px;min-height:4.8em;text-wrap:pretty}
.tvset-remote{display:flex;gap:10px;margin-top:28px}
.tvset-remote button{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border-radius:999px;background:var(--ink-3);border:1px solid rgba(234,231,222,.14);transition:background .3s,transform .2s}
.tvset-remote button:hover{background:#353329}
.tvset-remote button:active{transform:scale(.96)}
.tvset-remote svg{width:18px;height:18px}
.tvset-hint{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--bone-2)}
.guide{display:flex;gap:12px;margin-top:clamp(36px,6vh,64px);overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.guide li{flex:0 0 auto;scroll-snap-align:start}
.guide button{display:grid;gap:8px;width:148px;text-align:left}
.guide img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;opacity:.5;transition:opacity .3s,box-shadow .3s}
.guide button:hover img{opacity:.85}
.guide button[aria-current=true] img{opacity:1;box-shadow:0 0 0 2px var(--copper)}
.guide span{font-size:12px;color:var(--muted);white-space:nowrap}
.guide b{font-family:var(--mono);font-weight:400;color:var(--copper);margin-right:6px}

/* S5 · Atelier capture */
.atelier-screen{margin:0}
.atelier-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atelier-badge{position:absolute;left:14px;top:12px;z-index:3;display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;background:rgba(10,10,9,.6);font-size:9px;color:var(--bone-2)}
.atelier-badge i{width:6px;height:6px;border-radius:50%;background:#e5484d;box-shadow:0 0 8px #e5484d;animation:breathe 2.4s ease-in-out infinite}
.dock.dock-demo{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);opacity:1;pointer-events:none;z-index:2;transition:none}
.dock.dock-demo .dock-item{background:var(--c);color:#fff}
.dock.dock-demo[data-icon=glass] .dock-item{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);color:color-mix(in oklab,var(--c) 70%,#fff)}
.dock.dock-demo[data-icon=adaptive] .dock-item{background:color-mix(in oklab,var(--c) 28%,#8a6a52);color:#f4ead9}
.dock.dock-demo[data-icon=custom] .dock-item{background:#3f5f86;color:#eef2f8}
.dock.dock-demo[data-shape=squircle] .dock-item{border-radius:0;-webkit-mask:var(--squircle) center/100% 100% no-repeat;mask:var(--squircle) center/100% 100% no-repeat}
.dock.dock-demo .dock-item svg{stroke-width:1.7}
.atelier-pip{position:absolute;right:14px;top:40px;z-index:3;width:30%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(234,231,222,.25),0 14px 30px -10px rgba(0,0,0,.8);transition:width .6s var(--ease),right .6s var(--ease),top .6s var(--ease),border-radius .6s}
.atelier-pip img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.atelier-pip .atelier-cap{position:absolute;left:6px;bottom:6px;right:6px;padding:4px 6px;border-radius:4px;background:rgba(10,10,9,.72);color:var(--bone-2);font-size:8px;line-height:1.4}
.atelier-screen.show-real .atelier-pip{right:0;top:0;width:100%;border-radius:0}
.atelier-screen.show-real .atelier-pip .atelier-cap{font-size:10px;left:14px;bottom:14px;right:auto}
.atelier-screen img{transition:opacity .35s}

/* Wide tiles (banners) with focus parallax */
.banners{padding-top:clamp(40px,8vh,90px)}
.bnr-stage{position:relative;aspect-ratio:21/9;min-height:360px;border-radius:14px;overflow:hidden;display:grid;place-items:end center;padding-bottom:clamp(40px,7%,90px);background:#090908;box-shadow:0 0 0 1px rgba(234,231,222,.08),0 50px 90px -30px rgba(0,0,0,.85)}
.bnr-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.bnr-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,7,.85),transparent 55%);pointer-events:none}
.bnr-row{position:relative;z-index:2;display:flex;gap:clamp(10px,1.4vw,22px);padding:30px clamp(16px,3vw,40px);perspective:900px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.bnr-row::-webkit-scrollbar{display:none}
.bnr{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;position:relative;flex:none;width:clamp(140px,13vw,224px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#141412;transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s,1));transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 10px 22px -12px rgba(0,0,0,.8);will-change:transform}
.bnr:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
.bnr.is-focus{--s:1.14;z-index:3;box-shadow:0 30px 50px -14px rgba(0,0,0,.9),0 0 0 2px rgba(234,231,222,.85)}
.bnr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bnr-shine{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(70% 90% at var(--mx) var(--my),rgba(255,255,255,.32),transparent 60%);transition:opacity .3s;mix-blend-mode:screen}
.bnr.is-focus .bnr-shine{opacity:1}
.bnr-gen{position:absolute;inset:0;display:grid;place-items:center}
.bnr-gen .g-bg,.bnr-gen .g-blur,.bnr-gen .g-chip{position:absolute}
.bnr-gen .g-bg{inset:0}
.bnr-gen .g-blur{inset:-30%;display:grid;place-items:center;filter:blur(18px);opacity:.75}
.bnr-gen .g-blur svg{width:70%;height:70%;color:var(--c);stroke-width:3}
.bnr-gen .g-chip{width:30%;aspect-ratio:1;border-radius:24%;display:grid;place-items:center;color:#fff}
.bnr-gen .g-chip svg{width:58%;height:58%;stroke-width:1.7}
.bnr-gen .g-hl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 40%)}
/* Original: blurred icon colours, scrim, glow, glass highlight */
[data-style=original] .g-bg{background:radial-gradient(circle at 50% 60%,color-mix(in oklab,var(--c) 55%,#000),#0c0c0b 80%)}
[data-style=original] .g-chip{background:var(--c);box-shadow:0 0 40px color-mix(in oklab,var(--c) 70%,transparent)}
/* Minimal: plain dark tile, icon in the middle */
[data-style=minimal] .g-bg{background:#18181a}
[data-style=minimal] .g-blur,[data-style=minimal] .g-hl{display:none}
[data-style=minimal] .g-chip{background:var(--c)}
/* Glass: icon on a glass tile tinted with its colours */
[data-style=glass] .g-bg{background:linear-gradient(150deg,color-mix(in oklab,var(--c) 45%,#222),color-mix(in oklab,var(--c) 18%,#111))}
[data-style=glass] .g-chip{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.5);color:#fff}
[data-style=glass] .g-blur{opacity:.4}
/* Color: a bold tile filled with the app's main colour */
[data-style=color] .g-bg{background:var(--c)}
[data-style=color] .g-blur{display:none}
[data-style=color] .g-chip{background:transparent;width:46%}
[data-style=color] .g-chip svg{width:70%;height:70%;stroke-width:1.5}
.bnr-caption{position:relative;z-index:2;display:grid;justify-items:center;gap:4px;margin-top:-6px;text-align:center}
.bnr-name{font-size:18px;font-weight:500;letter-spacing:-.02em}
.bnr-src{font-size:10px;color:var(--copper)}
.bnr-stage .stage-note{z-index:3}
.bnr-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 48px;margin-top:28px}
.bnr-controls .mono{color:var(--muted);margin-bottom:10px}
.bnr-fit{flex-basis:100%;max-width:62ch;font-size:14px;color:var(--muted)}
.bnr-fit b{color:var(--bone-2);font-weight:500}
.bnr-hint{margin-left:auto;font-family:var(--serif);font-style:italic;color:var(--bone-2);font-size:17px}

/* S6 · Scenes + TV */
.weather{gap:clamp(24px,4vw,72px)}
.weather-copy{flex:1 1 0}
.scenes{margin-top:36px}
.scenes-label{color:var(--muted)}
.scenes-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.scenes-list .chip{background:rgba(12,12,11,.4)}
.scenes-list .chip[aria-pressed=true]{background:var(--bone)}
.weather-tv{position:relative;flex:0 1 min(38vw,600px);margin:0}
.weather-tv img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:opacity .4s}
.weather-tv figcaption{margin-top:16px;color:var(--bone-2)}

/* S7 · Shelf */
.shelf-bench{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.55fr);gap:clamp(28px,4vw,72px);align-items:center}
.shelf-tv{position:relative;aspect-ratio:16/9}
.shelf-tv>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease,transform .9s var(--ease)}
.shelf-open{opacity:0;transform:translateY(5%)}
.shelf-tv[data-open=true] .shelf-open{opacity:1;transform:none}
.shelf-up{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;background:rgba(16,15,13,.78);border:1px solid rgba(205,161,126,.5);font-size:14px;transition:background .3s,top .7s var(--ease),opacity .4s}
.shelf-up svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.shelf-up:hover{background:var(--copper);color:var(--ink)}
.shelf-tv[data-open=true] .shelf-up{top:12%}
.shelf-tv[data-open=true] .shelf-up svg{transform:rotate(180deg)}
.shelf-label{color:var(--muted)}
.shelf-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.shelf-story{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-size:15px;color:var(--bone);padding:8px 0;border-bottom:1px solid rgba(205,161,126,.5);transition:color .3s}
.shelf-story svg{width:18px;height:18px;fill:var(--copper);stroke:none}
.shelf-story:hover{color:var(--copper-hi)}
.shelf-note{margin-top:30px;color:#8f8a7e;font-size:10px;line-height:1.7}

/* S8 · Desk */
.desk-tv img{width:100%;height:auto;display:block;transition:opacity .35s}
.desk-figure figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:30px}
.desk-finishes{display:flex;gap:8px}
.desk-guest{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--bone-2)}

/* Films */
.launch{position:relative;aspect-ratio:16/9;border-radius:clamp(10px,1.2vw,18px);overflow:hidden;background:#0b0b09;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);cursor:pointer}
.launch-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.launch::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,8,.55),transparent 38%);pointer-events:none}
.launch-play{position:absolute;z-index:2;left:clamp(14px,2vw,32px);bottom:clamp(14px,2vw,32px);display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:999px;background:rgba(234,231,222,.94);color:var(--ink);font-size:15px;letter-spacing:-.01em;transition:transform .4s var(--ease)}
.launch-play svg{width:36px;height:36px;padding:10px;border-radius:50%;background:var(--ink);fill:var(--bone);stroke:none}
.launch-play i{font-style:normal;font-size:11px;color:#6b665b}
.launch:hover .launch-play{transform:scale(1.04)}
.player{padding:0;border:0;background:transparent;max-width:min(92vw,1500px);width:100%;overflow:visible}
.player::backdrop{background:rgba(6,6,5,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.player video{width:100%;max-height:84vh;border-radius:12px;background:#000}
.player-close{position:absolute;right:0;bottom:calc(100% + 12px);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;color:var(--bone);font-size:14px;background:rgba(234,231,222,.08)}
.player-close svg{width:16px;height:16px}

/* Up close (details) */
.spec-tabs{display:flex;flex-wrap:wrap;gap:4px 34px;border-bottom:1px solid var(--line);margin-bottom:clamp(32px,5vh,56px)}
.spec-tabs button{position:relative;display:inline-flex;align-items:baseline;gap:10px;padding:16px 0;font-size:clamp(18px,1.8vw,26px);letter-spacing:-.03em;color:var(--muted);transition:color .3s}
.spec-tabs button .mono{font-size:11px;color:var(--muted)}
.spec-tabs button:hover{color:var(--bone)}
.spec-tabs button[aria-selected=true]{color:var(--bone)}
.spec-tabs button[aria-selected=true] .mono{color:var(--copper)}
.spec-tabs button[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper)}
.spec-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:clamp(28px,4vw,72px);align-items:start}
.spec-panel[hidden]{display:none}
.spec-stage{position:relative;aspect-ratio:16/9;isolation:isolate}
.spec-stage:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
.spec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spec-designs .stage-note{right:auto;left:14px}
.stage-note{position:absolute;right:14px;top:12px;z-index:3;padding:5px 9px;border-radius:6px;background:rgba(10,10,9,.6);color:var(--bone-2);font-size:9px;pointer-events:none}
.screen-note{opacity:0;position:absolute;right:calc(var(--gutter) + 4px);bottom:96px;color:rgba(234,231,222,.62);font-size:10px;pointer-events:none}
.spec-hint{position:absolute;left:16px;bottom:14px;padding:6px 10px;border-radius:6px;background:rgba(10,10,9,.6);color:var(--bone-2);font-size:10px;pointer-events:none}
.spec-copy h3{font-size:clamp(26px,2.4vw,38px);line-height:1.08;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.spec-copy>p{margin-top:16px;color:var(--muted);font-size:16px;text-wrap:pretty}
.spec-ctl{margin-top:26px;display:grid;gap:10px}
.spec-ctl .mono{color:var(--muted);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{min-height:36px;padding:0 13px;font-size:13px}
.swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;max-width:300px;margin-top:4px}
.swatches[hidden]{display:none}
.swatches button{aspect-ratio:1;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);transition:transform .2s}
.swatches button:hover{transform:scale(1.12)}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--copper)}
.facts{margin-top:30px;border-bottom:1px solid var(--line)}
.facts li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;color:var(--bone-2)}
.facts li::before{content:'';flex:none;width:6px;height:1px;margin-top:.75em;background:var(--copper)}

.icon-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.2vw,30px);padding:0 6%}
.app-tile{position:relative;flex:none;display:grid;place-items:center;width:clamp(42px,6.4vw,92px);aspect-ratio:1;color:#fff;background:var(--c);border-radius:22%;transition:border-radius .5s var(--ease),width .5s var(--ease),background .5s,color .5s,box-shadow .5s;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.app-tile svg{width:50%;height:50%;stroke-width:1.6}
[data-shape=soft] .app-tile{border-radius:34%}
[data-shape=square] .app-tile{border-radius:7%}
[data-shape=capsule] .app-tile{aspect-ratio:1.45;width:clamp(56px,8.6vw,124px);border-radius:999px}
[data-shape=circle] .app-tile{border-radius:50%}
[data-shape=bevel] .app-tile{border-radius:0;clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
[data-shape=squircle] .app-tile{border-radius:0;-webkit-mask:var(--squircle) center/100% 100% no-repeat;mask:var(--squircle) center/100% 100% no-repeat}
[data-treat=dynamic] .app-tile{background:color-mix(in oklab,var(--c) 30%,#7d5c46)}
[data-treat=glass] .app-tile{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -10px rgba(0,0,0,.6);color:color-mix(in oklab,var(--c) 70%,#fff)}
[data-treat=plate] .app-tile{background:var(--plate,#efe9dd);color:var(--plate-ink,#1b1a17)}

.mag-bar{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:clamp(6px,.9vw,12px);padding:clamp(6px,.8vw,11px);border-radius:clamp(14px,1.6vw,22px);background:rgba(36,34,30,.42);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .6s,transform .8s var(--ease)}
.mag-i{position:relative;flex:none;display:grid;place-items:center;width:clamp(26px,3.6vw,52px);aspect-ratio:1;border-radius:24%;background:var(--c);color:#fff;transform-origin:50% 100%;transition:transform .14s ease-out;will-change:transform}
.mag-i svg{width:50%;height:50%;stroke-width:1.6}
.mag-i.is-recent::after{content:'';position:absolute;transform:translateY(clamp(18px,2.6vw,34px));width:4px;height:4px;border-radius:50%;background:var(--bone)}
.mag-bar[data-rest=fade]{opacity:.28}
.mag-bar[data-rest=hide]{opacity:0;transform:translate(-50%,160%)}
.spec-dock:hover .mag-bar,.spec-dock:focus-within .mag-bar,.spec-dock:focus .mag-bar{opacity:1;transform:translateX(-50%)}
.mag-bar[data-pos=left]{left:4%;top:50%;bottom:auto;flex-direction:column;align-items:flex-start;transform:translateY(-50%)}
.mag-bar[data-pos=left]{gap:clamp(4px,.6vw,8px)}
.mag-bar[data-pos=left] .mag-i{transform-origin:0 50%;width:clamp(18px,2.5vw,36px)}
.mag-bar[data-pos=left] .mag-i.is-recent::after{transform:translateX(clamp(-12px,-1.4vw,-8px));left:0}
.mag-bar[data-pos=left][data-rest=hide]{transform:translate(-160%,-50%)}
.spec-dock:hover .mag-bar[data-pos=left],.spec-dock:focus-within .mag-bar[data-pos=left],.spec-dock:focus .mag-bar[data-pos=left]{transform:translateY(-50%)}
.mag-i::before{content:attr(data-name);position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);font-size:clamp(6px,.62vw,9px);line-height:1;white-space:nowrap;color:#f4f1e8;text-shadow:0 1px 3px rgba(0,0,0,.8);opacity:0;transition:opacity .25s;pointer-events:none}
.mag-bar[data-pos=left] .mag-i::before{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.mag-bar[data-names=all] .mag-i::before,.mag-bar[data-names=focused] .mag-i.is-focus::before{opacity:1}
.mag-bar[data-names=all] .mag-i.is-recent::after{opacity:0}
.mag-bar[data-names=all]{padding-bottom:clamp(14px,1.6vw,22px)}
.mag-bar[data-names=all][data-pos=left]{padding-bottom:clamp(6px,.8vw,11px);padding-right:clamp(40px,5vw,70px)}

/* icon motion */
[data-motion=sweep] .app-tile{overflow:hidden}
[data-motion=sweep] .app-tile::after{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);transform:translateX(-90%);animation:tileSweep 3.4s ease-in-out infinite}
[data-motion=sweep] .app-tile:nth-child(2)::after{animation-delay:.25s}[data-motion=sweep] .app-tile:nth-child(3)::after{animation-delay:.5s}[data-motion=sweep] .app-tile:nth-child(4)::after{animation-delay:.75s}[data-motion=sweep] .app-tile:nth-child(5)::after{animation-delay:1s}[data-motion=sweep] .app-tile:nth-child(6)::after{animation-delay:1.25s}
[data-motion=alive] .app-tile :is(svg,.app-logo){animation:tileAlive 2.8s ease-in-out infinite}
[data-motion=alive] .app-tile:nth-child(even) :is(svg,.app-logo){animation-delay:-1.4s}
@keyframes tileSweep{0%,30%{transform:translateX(-90%)}70%,100%{transform:translateX(90%)}}
@keyframes tileAlive{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7%) rotate(-4deg)}60%{transform:translateY(2%) rotate(3deg)}}

/* E · focus light */
.spec-focus{perspective:900px}
.focus-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,34px);padding:0 6%}
.focus-i{--gc:var(--c);--gs:1;position:relative;flex:none;display:grid;place-items:center;width:clamp(40px,6.6vw,96px);aspect-ratio:1;border-radius:24%;background:var(--c);color:#fff;overflow:hidden;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.7);transition:scale .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.focus-i svg{width:50%;height:50%;stroke-width:1.6}
.spec-focus:not([data-glow=own]) .focus-i{--gc:var(--glow)}
.spec-focus[data-strength=soft] .focus-i{--halo:0 0 16px 1px color-mix(in srgb,var(--gc) 45%,transparent);--halo-lo:0 0 8px 0 color-mix(in srgb,var(--gc) 25%,transparent)}
.spec-focus[data-strength=normal] .focus-i{--halo:0 0 30px 5px color-mix(in srgb,var(--gc) 62%,transparent);--halo-lo:0 0 14px 1px color-mix(in srgb,var(--gc) 32%,transparent)}
.spec-focus[data-strength=strong] .focus-i{--halo:0 0 48px 12px color-mix(in srgb,var(--gc) 82%,transparent);--halo-lo:0 0 22px 3px color-mix(in srgb,var(--gc) 42%,transparent)}
.spec-focus[data-growth=calm] .focus-i.is-focus{--gs:1.14}
.spec-focus[data-growth=bold] .focus-i.is-focus{--gs:1.26;transform:rotateX(9deg) translateY(-4%)}
.focus-i.is-focus{scale:var(--gs);z-index:2;box-shadow:var(--halo),0 18px 30px -12px rgba(0,0,0,.7)}
.spec-focus[data-pulse=on] .focus-i.is-focus{animation:focusPulse 2.6s ease-in-out infinite}
@keyframes focusPulse{50%{box-shadow:var(--halo-lo),0 18px 30px -12px rgba(0,0,0,.7)}}
.spec-focus[data-rim=on] .focus-i.is-focus::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.82),inset 0 2px 8px rgba(255,255,255,.35);pointer-events:none}
.spec-focus[data-sweep=on] .focus-i.is-focus::before{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);animation:tileSweep 2.8s ease-in-out infinite;pointer-events:none}
.focus-i.is-press{animation:pressSink .34s var(--ease)}
.spec-focus[data-pulse=on] .focus-i.is-focus.is-press{animation:pressSink .34s var(--ease),focusPulse 2.6s ease-in-out .34s infinite}
@keyframes pressSink{40%{translate:0 5%;filter:brightness(.86)}}
.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.chip:disabled{opacity:.38;cursor:default}

/* F · ready designs */
.design-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.design-name{position:absolute;left:16px;bottom:14px;z-index:3;padding:6px 11px;border-radius:6px;background:rgba(10,10,9,.62);font-size:13px;color:var(--bone)}
.design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.design-card{display:grid;gap:5px;text-align:left;font-size:11.5px;line-height:1.2;color:var(--bone-2)}
.design-card img{width:100%;aspect-ratio:16/9;border-radius:7px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
.design-card:hover img{transform:translateY(-2px)}
.design-card[aria-pressed=true]{color:var(--bone)}
.design-card[aria-pressed=true] img{box-shadow:0 0 0 2px var(--copper)}
.design-undo-row{margin-top:6px}

.catalog-open.is-ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}
.catalog-open.is-ghost output{background:rgba(234,231,222,.08)}
.catalog-open.is-ghost svg{background:var(--bone);stroke:var(--ink)}
.catalog-open.is-ghost:hover{border-color:var(--bone);background:transparent}
.facts-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:26px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--bone-2);transition:color .3s}
.facts-toggle i{font-style:normal;font-family:var(--mono);font-size:16px;color:var(--copper);transition:transform .35s var(--ease)}
.facts-toggle[aria-expanded=true]{border-bottom-color:transparent}
.facts-toggle[aria-expanded=true] i{transform:rotate(45deg)}
.facts-toggle:hover{color:var(--bone)}
.facts-toggle+.facts{margin-top:0}
.facts[hidden]{display:none}
.smenu-items ul.is-extra{columns:2 300px}
.smenu-items li.has-img{grid-template-columns:120px 1fr;column-gap:16px;align-items:start}
.smenu-items li.has-img img{grid-row:1/span 3;width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.smenu-items li.has-img small{font-size:13.5px;color:var(--bone-2)}
@media (max-width:900px){.chg{grid-template-columns:1fr}.chg-copy{min-height:0}}
@media (max-width:760px){
  .chg-side{display:flex;flex-direction:column;min-width:0}
  .chg-list{order:-1;display:flex;gap:6px;margin:0 calc(var(--gutter)*-1) 18px;padding:2px var(--gutter);border:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .chg-list::-webkit-scrollbar{display:none}
  .chg-list li{flex:none;scroll-snap-align:center}
  .chg-list button{justify-content:center;width:auto;min-width:48px;padding:11px 14px;border:1px solid var(--line);border-radius:999px;overflow:hidden}
  .chg-list button .mono{font-size:12px}
  .chg-list button[aria-selected=true]{padding-left:14px;background:var(--bone);border-color:var(--bone)}
  .chg-list button[aria-selected=true] .mono{color:var(--ink)}
  .chg-name{display:none}
  .chg-bar{bottom:0;height:2px}
}
@media (max-width:760px){.smenu-items li.has-img{grid-template-columns:92px 1fr}.smenu-items li.has-img img{width:92px}.extras-teaser .catalog-open{width:100%;justify-content:space-between}}
.extras-teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(56px,9vh,110px);padding:clamp(22px,3vh,34px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.extras-title{font-size:clamp(34px,4.2vw,68px);line-height:1;letter-spacing:-.045em;font-weight:500;max-width:16ch}
.extras-title em{display:block;font-family:var(--serif);font-weight:400;color:var(--bone-2)}
.extras-teaser .extras-title{margin:0}
/* "a few more things" dialog */
.catalog-open{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 10px 0 24px;border-radius:999px;background:var(--bone);color:var(--ink);font-size:15px;transition:background .3s,border-color .3s}
.catalog-open output{padding:4px 8px;border-radius:999px;background:rgba(19,19,16,.1);font-size:11px}
.catalog-open svg{width:34px;height:34px;padding:9px;border-radius:50%;background:var(--ink);fill:none;stroke:var(--bone);stroke-width:1.8}
.smenu{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0e0e0c;color:var(--bone);overflow:hidden}
.smenu::backdrop{background:rgba(0,0,0,.5)}
.smenu-inner{display:grid;grid-template-rows:auto 1fr;height:100%;padding:clamp(18px,3vh,36px) var(--gutter) 0}
.smenu-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 28px;padding-bottom:clamp(16px,2.4vh,26px);border-bottom:1px solid var(--line)}
.smenu-head h3{font-size:clamp(30px,3.6vw,56px);line-height:1;letter-spacing:-.045em;font-weight:500}
.smenu-head h3 em{font-style:italic;font-weight:400;color:var(--bone-2)}
.smenu-close{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-size:14px}
.smenu-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.smenu-close:hover{border-color:var(--bone)}
.smenu-items{overflow-y:auto;overscroll-behavior:contain;padding:26px 0 60px;outline:0}
.smenu-items h4{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;font-size:clamp(24px,2.4vw,36px);font-weight:500;letter-spacing:-.035em}
.smenu-items h4 .mono{font-size:11px;color:var(--copper)}
.smenu-items ul{columns:2 320px;column-gap:clamp(24px,3vw,56px)}
.smenu-items li{break-inside:avoid;display:grid;gap:6px;padding:13px 0;border-top:1px solid rgba(234,231,222,.08)}
.smenu-items li b{font-weight:500;font-size:15px}
.smenu-items li small{font-size:12.5px;line-height:1.45;color:var(--muted)}
@media (max-width:760px){
  .smenu-head{grid-template-columns:1fr auto}
  .smenu-close span{display:none}
  .smenu-close{padding:0 14px}
  .smenu-items{padding:16px 0 50px}
}

.spec-wall{background:#0d1220}
.depth{position:absolute;inset:-5%;--px:0;--py:0}
.depth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.depth-bg{transform:translate3d(calc(var(--px)*-8px),calc(var(--py)*-4px),0) scale(1.02)}
.depth-fg{transform:translate3d(calc(var(--px)*30px),calc(var(--py)*12px),0) scale(1.08)}
.artmode{position:absolute;inset:0;display:none;place-items:center;background:radial-gradient(70% 60% at 50% 0%,#4a443b,#25221e 70%)}
.artmode figure{width:62%;margin:0;padding:3.2%;background:#efe9dd;border:clamp(4px,.6vw,9px) solid #1b1a17;box-shadow:0 28px 46px -12px rgba(0,0,0,.65),0 2px 4px rgba(0,0,0,.4)}
.artmode img{width:100%;aspect-ratio:16/9;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.spec-wall[data-mode=art] .depth{display:none}
.spec-wall[data-mode=art] .artmode{display:grid}

.spec-saver{background:#000}
.kb{position:absolute;inset:0;overflow:hidden}
.kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.kb img.is-on{opacity:1;animation:kb 9s linear both}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.kb-dock{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:flex;gap:8px;padding:8px;border-radius:14px;background:rgba(30,28,25,.5);border:1px solid rgba(255,255,255,.12);transition:opacity .8s,transform .8s var(--ease)}
.kb-dock i{width:clamp(18px,2.4vw,34px);aspect-ratio:1;border-radius:26%;background:rgba(234,231,222,.24)}
.kb-clock{position:absolute;left:5%;top:7%;display:grid;gap:2px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);font-size:clamp(14px,1.5vw,20px);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:font-size .9s var(--ease),opacity .5s,left .01s,top .01s}
.kb-clock small{font-family:var(--mono);font-size:.5em;letter-spacing:.06em;text-transform:uppercase;opacity:.8;font-weight:400}
.kb-dim{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.spec-saver[data-step="1"] .kb-dock,.spec-saver[data-step="2"] .kb-dock,.spec-saver[data-step="3"] .kb-dock,.spec-saver[data-step="4"] .kb-dock,.spec-saver[data-step="5"] .kb-dock{opacity:0;transform:translate(-50%,40%)}
.spec-saver[data-step="2"] .kb-clock,.spec-saver[data-step="3"] .kb-clock,.spec-saver[data-step="4"] .kb-clock{font-size:clamp(34px,5vw,78px)}
.spec-saver[data-step="3"] .kb-clock{translate:6px 4px}
.spec-saver[data-step="4"] .kb-dim{opacity:.72}
.spec-saver[data-step="5"] .kb-dim{opacity:.97}
.idle-line{margin-top:26px}
.idle-play{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 18px 0 14px;border-radius:999px;background:var(--bone);color:var(--ink);font-size:14px;font-weight:500;transition:background .3s}
.idle-play:hover{background:var(--copper-hi)}
.idle-play svg{width:16px;height:16px;fill:currentColor;stroke:none}
.idle-steps{position:relative;margin-top:22px;display:grid;gap:0;border-left:1px solid var(--line);padding-left:18px}
.idle-steps li{position:relative;padding:7px 0;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a857a;transition:color .4s}
.idle-steps li::before{content:'';position:absolute;left:-22px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ink);border:1px solid #4d4840;transition:background .4s,border-color .4s}
.idle-steps li.is-on{color:var(--bone)}
.idle-steps li.is-on::before{background:var(--copper);border-color:var(--copper)}

/* Extras */
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{--dock-unit:42px;--osd-h:56px}
  .chapter-head{grid-template-columns:1fr;gap:24px}
  .atelier-bench{grid-template-columns:1fr}
  .tvset,.shelf-bench{grid-template-columns:1fr}
  .weather{flex-direction:column;align-items:stretch;justify-content:center}
  .weather-tv{flex:none;width:100%}
  .spec-panel{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--dock-unit:32px}
  .dock-list{max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dock-list::-webkit-scrollbar{display:none}
  .room{height:440vh}
  .room-still img{object-position:66% 50%}
  .room-shade{background:linear-gradient(0deg,rgba(10,10,8,.92) 0%,rgba(10,10,8,.7) 34%,transparent 58%),linear-gradient(180deg,rgba(10,10,8,.5),transparent 18%)}
  .screen-dock .app-tile{width:30px}
  .screen-dock{gap:6px;padding:7px;border-radius:16px}
  .screen-boot img{width:64px;height:64px;border-radius:18px}
  .screen-boot span{font-size:28px}
  .screen-bar{display:none}
  .hero{top:auto;bottom:84px;transform:none;width:auto;right:var(--gutter)}
  .hero-sub{display:none}
  .scroll-hint{display:none}
  .manifesto-text{font-size:clamp(32px,9vw,48px)}
  .hero-title{font-size:clamp(52px,16vw,84px)}
  .hero-sub{margin-top:20px;font-size:15px}
  .hero-promise{font-size:10px}
  .tod-dial{margin-top:20px}
  .tod-note{font-size:12px}
  .tod-options button{min-height:34px;font-size:12px;padding:0 10px 0 8px}
  .tod-toast{white-space:normal;width:calc(100% - 2*var(--gutter));text-align:center;border-radius:14px}
  .tv-hotspot{font-size:12px}
  .osd-btn [data-sound-label]{display:none}
  .osd-get{padding:0 14px}
  .scroll-hint{bottom:70px}
  .chapter{padding-top:96px;padding-bottom:96px}
  .chapter-head p,.wall-copy p,.weather-copy>p{font-size:15px}
  .wall-clutter{grid-template-columns:repeat(3,1fr)}
  .footer-links{gap:20px}
  .tvset-desc{min-height:0}
  .return-copy{bottom:84px;right:var(--gutter)}
  .return-copy h2{font-size:clamp(38px,11vw,52px)}
  .return-copy>p:not(.mono){display:none}
  .return-copy .cta{margin-top:22px}
  .return-shade{background:linear-gradient(0deg,rgba(10,10,8,.95) 0%,rgba(10,10,8,.75) 38%,transparent 60%)}
  .bnr-stage{aspect-ratio:auto;min-height:300px}
  .bnr-row{justify-content:flex-start;width:100%}
  .bnr{width:160px}
  .bnr-hint{margin-left:0}
  .spec-tabs{gap:0 22px}
  .spec-hint{display:none}
  .stage-note{font-size:8px;right:8px;top:8px;max-width:70%;text-align:right}
  .atelier-badge{display:none}
  .atelier-screen .stage-note{top:8px;left:8px;right:auto;bottom:auto;max-width:55%;text-align:left}
  .atelier-pip{top:36px;width:38%}
  .screen-note{left:var(--gutter);right:var(--gutter);text-align:center;font-size:8px;bottom:64px}
  .spec-tabs button{font-size:17px;padding:12px 0}
  .swatches{grid-template-columns:repeat(9,1fr)}
  .guide button{width:120px}
  .desk-guest{font-size:17px}
  body.dock-on .osd-channel,body.dock-on .osd-clock,body.dock-on .osd-line-bottom,body.dock-on .osd-mark-bl,body.dock-on .osd-mark-br{opacity:0}
}
@media (max-width:380px){.osd-brand span{display:none}}

@media (max-height:720px) and (min-width:761px){.scroll-hint{display:none}.hero-sub{margin-top:22px}.tod-dial{margin-top:20px}}

@media (max-width:1100px){.rail{display:none}}

/* ---------- Reduced motion ---------- */
.reduce .room{height:auto}
.reduce .room-stage{position:relative}
.reduce .scroll-hint,.reduce .scroll-tick{display:none}
.reduce .dock{transition:none}
.reduce .wall-clutter{opacity:.16}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- New version / early access ---------- */
.feature-kicker{color:var(--copper)!important;margin-bottom:18px;font-size:10px!important;letter-spacing:.12em}
.feature-announcement{margin:0 var(--gutter);padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px}
.feature-announcement>.mono{color:var(--copper);flex:none;font-size:10px}
.feature-announcement>p:not(.mono){color:var(--bone-2);font-size:15px}
.feature-announcement>a{margin-left:auto;white-space:nowrap;font-size:13px;border-bottom:1px solid var(--copper);padding-bottom:4px}
.feature-section{scroll-margin-top:56px}
.feature-section h3{margin:0;font-size:clamp(26px,3vw,44px);line-height:1.12;font-weight:500;letter-spacing:-.035em}
.feature-note{font-size:13px;color:var(--muted);line-height:1.6}
.feature-note.mono{font-size:9px;letter-spacing:.05em;padding-top:14px}
.frame-bench{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,76px);align-items:start}
.frame-view{min-width:0}
.frame-wall{display:flex;align-items:center;justify-content:center;min-height:440px;padding:clamp(26px,4vw,64px);background:radial-gradient(ellipse at 50% 30%,#39352e,#25241f 60%,#1b1b17);border:1px solid var(--line)}
.frame-object{--frame-color:#c4a06b;width:100%;max-width:640px;padding:clamp(7px,1vw,16px);background:linear-gradient(135deg,#ffffff25,#00000030),var(--frame-color);border:1px solid #ffffff25;box-shadow:0 25px 30px -18px #0009,inset 0 0 0 2px #ffffff17,inset 0 0 10px #0006;transition:background .25s,padding .25s}
.frame-mount{padding:clamp(22px,3.4vw,54px);background:#e2d8c5;box-shadow:inset 0 1px 8px #0003}
.frame-opening{box-shadow:0 0 0 1px #faf7ee,inset 0 0 8px #0005;position:relative}
.frame-opening::after{content:'';position:absolute;inset:0;box-shadow:inset 0 2px 6px #0005;pointer-events:none}
.frame-opening img{width:100%;max-height:380px;object-fit:contain}
.frame-object[data-material="0"]{padding:0;border:0;background:none;box-shadow:none}
.frame-object[data-material="1"]{padding:5px}
.frame-object[data-material="5"],.frame-object[data-material="6"],.frame-object[data-material="12"],.frame-object[data-material="13"]{background:repeating-linear-gradient(92deg,#0001 0 1px,transparent 1px 5px),linear-gradient(135deg,#ffffff30,#0002),var(--frame-color)}
.frame-object[data-material="7"]{box-shadow:inset 0 0 0 3px #e9d6b1,inset 0 0 0 6px #847655,0 20px 25px -12px #0007}
.frame-object[data-material="8"]{background:repeating-linear-gradient(0deg,#0005 0 1px,#fff2 2px 3px,transparent 4px 6px),var(--frame-color)}
.frame-object[data-material="9"]{padding:clamp(12px,1.6vw,24px);box-shadow:inset 0 0 14px #000,0 28px 22px -14px #000b}
.frame-object[data-material="10"]{background:repeating-linear-gradient(140deg,#fff2 0 2px,#0001 2px 4px,transparent 4px 8px),var(--frame-color)}
.frame-object[data-material="11"]{background:repeating-linear-gradient(2deg,#ffffff35 0 1px,transparent 1px 3px),var(--frame-color)}
.frame-object[data-material="14"]{background:repeating-linear-gradient(0deg,#fff2 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#0002 0 1px,transparent 1px 3px),var(--frame-color)}
.frame-object[data-mat="0"] .frame-mount{padding:0;box-shadow:none}
.frame-object[data-mat="1"] .frame-mount{padding:clamp(9px,1.2vw,20px)}
.frame-object[data-mat="2"] .frame-mount{padding:clamp(28px,4vw,64px)}
.frame-object[data-mat="3"] .frame-opening{border:6px solid #c9bfae;outline:1px solid #f5eee0}
.frame-object[data-mat="4"] .frame-mount{padding-bottom:clamp(32px,4.6vw,70px)}
.frame-object[data-mat="5"] .frame-mount{background:#30312b;padding:clamp(12px,2vw,32px)}
.frame-object[data-mat="5"] .frame-opening{box-shadow:0 5px 15px #000a}
.frame-object[data-mat="6"] .frame-opening{border:5px solid #b9aa91;outline:5px solid #eee6d9;box-shadow:0 0 0 10px #d2c5ae}
.frame-object[data-texture="1"]:not([data-mat="0"]) .frame-mount{background-image:repeating-linear-gradient(37deg,#fff1 0 1px,transparent 1px 4px)}
.frame-object[data-texture="2"]:not([data-mat="0"]) .frame-mount{background-image:repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#fff3 0 1px,transparent 1px 3px)}
.frame-object[data-texture="3"]:not([data-mat="0"]) .frame-mount{background-image:repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,#0001 0 1px,transparent 1px 2px)}
.frame-selection{font-size:14px;margin-top:20px;min-height:24px;color:var(--bone-2)}
.frame-art-options{margin-top:22px}
.frame-controls{display:grid;gap:26px}
.frame-control-hint{font-size:15px;color:var(--muted)}
.frame-controls h3{font-size:15px;font-weight:500;margin-bottom:12px;letter-spacing:0}
.frame-materials .chip{display:inline-flex;align-items:center;gap:8px}
.frame-materials i{display:block;width:12px;height:12px;background:var(--sample);border:1px solid #ffffff45;border-radius:50%;flex:none}
.feature-section .chip{border:1px solid var(--line);border-radius:8px;min-height:38px;font-size:12px;transition:background .2s,border-color .2s}
.feature-section .chip[aria-pressed="true"]{background:var(--copper);color:var(--ink);border-color:var(--copper)}
.feature-section .chip:disabled{opacity:.3;cursor:default}
.feature-proof{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,76px);align-items:center;margin-top:76px;padding-top:50px;border-top:1px solid var(--line)}
.feature-proof img{width:100%;border:1px solid var(--line)}
.feature-proof-copy>p:not(.feature-kicker){margin-top:20px;color:var(--muted);max-width:50ch}
.gallery-proof{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.media{background:var(--ink-2)}
.media-tabs{display:flex;flex-wrap:wrap;gap:8px 32px;border-bottom:1px solid var(--line);margin-bottom:38px}
.media-tabs button{font-size:17px;min-height:48px;padding:6px 0 17px;color:var(--muted);border-bottom:2px solid transparent}
.media-tabs button[aria-selected="true"]{color:var(--bone);border-bottom-color:var(--copper)}
.media-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,76px);align-items:center;min-height:380px}
.media-panel[hidden]{display:none}
.media-panel-copy>p{margin-top:20px;color:var(--muted);max-width:51ch}
.media-panel figure img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#191a17;border:1px solid var(--line)}
.media-support{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.media-support li{padding:6px 12px;border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--bone-2)}
.media-format-list{display:grid;gap:12px;margin-top:28px;font-size:13px;letter-spacing:.05em;color:var(--copper)}
.poster-note{display:flex;gap:36px;align-items:center;margin-top:60px;padding-top:32px;border-top:1px solid var(--line)}
.poster-timing{color:var(--copper);font-size:20px;white-space:nowrap}
.poster-note h3{font-size:23px}
.poster-note p{color:var(--muted);margin-top:12px;font-size:15px;max-width:70ch}
.language-poster img{width:100%;border:1px solid var(--line)}
.language-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin:30px 0 24px}
.language-options li{display:flex;align-items:center;gap:14px;min-height:54px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.language-code{color:var(--copper);min-width:52px;font-size:10px;flex:none}
.language-options bdi{overflow-wrap:anywhere}
.early-access{scroll-margin-top:100px;margin-top:70px;padding:clamp(24px,4vw,50px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;border:1px solid #cda17e45;background:linear-gradient(135deg,#cda17e0d,transparent)}
.early-access h3{font-size:clamp(28px,3vw,44px)}
.early-access p:not(.feature-kicker){color:var(--muted);margin-top:18px;max-width:58ch}
.early-action .cta{margin-top:0;min-height:52px;padding:10px 22px;font-size:14px;text-align:center}
.early-address{display:block;overflow-wrap:anywhere;margin-top:16px;font-size:15px;color:var(--bone-2)}
.early-action .feature-note{font-size:12px}
.return-store{display:block;width:fit-content;margin-top:16px;font-size:13px;border-bottom:1px solid #eae7de66}
.no-js .frame-controls,.no-js .frame-art-options{display:none}
.no-js .frame-bench{grid-template-columns:1fr}
.no-js .media-panel[hidden]{display:grid;margin-top:50px}
.no-js .media-tabs{display:none}
@media(max-width:1000px){.frame-bench,.feature-proof,.gallery-proof,.media-panel{grid-template-columns:1fr}.frame-wall{min-height:400px}.frame-controls{grid-template-columns:1fr}.gallery-proof figure{grid-row:1}.language-options{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-announcement{flex-wrap:wrap;gap:12px 20px}.feature-announcement>a{margin-left:0}.early-access{grid-template-columns:1fr}}
@media(max-width:760px){.feature-kicker{margin-bottom:16px}.frame-wall{min-height:260px;padding:30px 20px}.frame-opening img{max-height:300px}.frame-selection{font-size:13px}.feature-proof{margin-top:45px;padding-top:32px}.media-tabs{gap:0 20px}.media-tabs button{font-size:14px}.media-panel{min-height:0}.poster-note{align-items:flex-start;gap:20px}.poster-timing{font-size:13px}.poster-note h3{font-size:21px}.language-options{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}.language-options li{font-size:13px;gap:6px}.language-code{min-width:42px;font-size:9px}.early-access{margin-top:42px;gap:28px}.feature-announcement{padding:24px 0}.feature-announcement>p:not(.mono){font-size:14px}}

/* Existing art direction retained; accessibility and loading resilience. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gate[hidden]{display:none}
.gate-sound-toggle{border:1px solid var(--line);min-height:40px}
.gate-sound-toggle [data-sound-label]{display:inline!important}
.feature-promo{margin:0 0 48px}
.feature-promo img{width:100%;height:auto;border:1px solid var(--line)}
.feature-promo figcaption{font-size:14px;color:var(--muted);line-height:1.7;max-width:95ch;margin-top:16px}
.feature-overview{padding:60px var(--gutter) 0}
main>.feature-promo{margin:0 var(--gutter) 60px}
.saver-start{display:block;margin-top:22px;padding:10px 16px;border:1px solid var(--copper);border-radius:8px}
.reduce .screen-welcome,.reduce .screen-note,.reduce .tv-hotspot{display:none}
.reduce .return,.no-js .return{height:auto}
.reduce .return-stage,.no-js .return-stage{position:relative}
.no-js .room{height:auto}
.no-js .room-stage{position:relative}
.no-js:not([data-boot="fallback"]) .room-still img[data-tod="evening"]{opacity:1}
.no-js .room-still img.is-on{opacity:1}
.no-js .screen,.no-js .return-screen,.no-js .tv-hotspot,.no-js .tod-dial,.no-js .dock,.no-js .osd-sound,.no-js .lang,.no-js .scroll-hint{display:none}
.no-js .return-copy,.no-js .return-shade,.no-js .wall-copy,.no-js .hero-sub,.no-js .hero-promise{opacity:1!important;visibility:visible!important;transform:none!important}
.no-js .sx-word,.no-js .sx-char{opacity:1!important;transform:none!important}
.no-js .ring-scene{display:none}
@media(max-width:760px){.feature-promo figcaption{font-size:13px}.feature-overview{padding-top:40px}.reduce .room-stage{min-height:740px}}

.no-js[data-boot="fallback"] .room-still img:not(.is-on){opacity:0!important}

.return-copy .feature-kicker{margin-bottom:24px;color:var(--copper-hi);font-size:11px;letter-spacing:.1em}
.return-copy .return-address{display:block;width:fit-content;margin-top:20px;font-size:15px;text-decoration:underline;text-underline-offset:4px;color:var(--bone-2)}
.return-copy .return-note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--bone-2)}
.no-js .tvset-remote,.no-js .tvset-hint{display:none}

/* Native app icons: local, lossless, with original proportions. */
.has-app-logo{overflow:hidden;isolation:isolate}
.app-tile.has-app-logo,.mag-i.has-app-logo,.focus-i.has-app-logo{background:#151512}
.app-logo{display:block;width:100%;height:100%;object-fit:contain;scale:var(--logo-scale,1);pointer-events:none}
.has-app-logo .app-fallback{display:none}
.has-app-logo.logo-failed .app-logo{display:none}
.has-app-logo.logo-failed .app-fallback{display:block;width:50%;height:50%}
.has-app-logo[data-app-id="play-store"] .app-logo{max-width:48px;max-height:48px}
.dock-demo .dock-item.has-app-logo{background:rgba(17,17,15,.55)}
.dock-demo[data-icon=glass] .dock-item.has-app-logo{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.04))}
.dock-demo[data-icon=adaptive] .dock-item.has-app-logo{background:rgba(205,161,126,.2)}
.dock-demo[data-icon=custom] .dock-item.has-app-logo{background:rgba(63,95,134,.55)}
[data-treat=dynamic] .app-tile.has-app-logo{background:color-mix(in oklab,var(--c) 30%,#7d5c46)}
[data-treat=glass] .app-tile.has-app-logo{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.06))}
[data-treat=plate] .app-tile.has-app-logo{background:var(--plate,#efe9dd)}
.bnr-gen .g-chip .app-logo{width:100%;height:100%}

/* Current native icon settings: the same look on the TV and every Dock preview. */
.atelier-note{color:var(--muted);font-size:12px;line-height:1.6}
.atelier-controls fieldset:disabled{opacity:.5}
.atelier-controls .atelier-color{display:flex;align-items:center;gap:12px;width:100%}
.atelier-controls .atelier-color span{padding:0;border:0;min-height:32px;color:var(--muted);font-size:12px}
.atelier-color input[type=color]{width:38px;height:32px;padding:3px;border:1px solid var(--line);border-radius:7px;background:transparent;cursor:pointer}
.atelier-color input:disabled{opacity:.4;cursor:default}
.atelier-actions{justify-content:flex-start}
.desk-options,.media-backup{color:var(--muted);font-size:14px;line-height:1.7}
.desk-options{margin:0 0 24px;max-width:800px}
.media-backup{padding:24px 0 0;max-width:800px}
.media-backup h3{color:var(--bone);font:400 25px/1.25 var(--serif);margin-bottom:10px}
.has-app-logo{overflow:visible}
.has-app-logo .app-logo{width:calc(100% * var(--inner-size,.9));height:calc(100% * var(--inner-size,.9));border-radius:inherit}
.app-symbol-wrap{display:none;position:absolute;width:calc(66% * var(--inner-size,.9));height:calc(66% * var(--inner-size,.9));max-width:60px;max-height:60px;pointer-events:none}
.app-symbol-original,.app-symbol-tint{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.app-symbol-tint{display:none;background:var(--logo-color,var(--bone));-webkit-mask:var(--symbol-mask) center/contain no-repeat;mask:var(--symbol-mask) center/contain no-repeat}
[data-app-look]:not([data-app-look=original]) .has-app-symbol:not(.symbol-failed)>.app-logo{display:none}
[data-app-look]:not([data-app-look=original]) .has-app-symbol:not(.symbol-failed) .app-symbol-wrap{display:block}
[data-app-look]:not([data-app-look=original]):not([data-logo-mode=original]) .app-symbol-original{display:none}
[data-app-look]:not([data-app-look=original]):not([data-logo-mode=original]) .app-symbol-tint{display:block}
[data-app-look]:not([data-app-look=original]) .whole-app-icon>.app-logo{width:calc(72% * var(--inner-size,.9));height:calc(72% * var(--inner-size,.9))}
[data-app-look=ceramic] .has-app-logo{background:#e4ded3;box-shadow:inset 0 1px 0 #fff9,0 9px 22px -12px #0009}
[data-app-look=custom] .has-app-logo{background:var(--plate,#3f5f86)}
[data-app-look=adaptive] .has-app-logo{background:#454138}
[data-app-look=glass] .has-app-logo{background:linear-gradient(160deg,#ffffff4d,#ffffff0f);box-shadow:inset 0 1px 0 #ffffff59,0 9px 22px -12px #0009}
[data-app-look] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:24%;aspect-ratio:1;clip-path:none;-webkit-mask:none;mask:none}
[data-app-look][data-shape=soft] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:34%}
[data-app-look][data-shape=square] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:4%}
[data-app-look][data-shape=circle] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:50%}
[data-app-look][data-shape=capsule] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:999px;aspect-ratio:1.3}
[data-app-look][data-shape=bevel] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:0;clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
[data-app-look][data-shape=squircle] :is(.app-tile,.mag-i,.focus-i,.dock-item.has-app-logo){border-radius:0;-webkit-mask:var(--squircle) center/100% 100% no-repeat;mask:var(--squircle) center/100% 100% no-repeat}
.screen-dock .app-tile{width:var(--app-unit,52px)}
.screen-dock[data-frame=sharp]{border-radius:4px}
.screen-dock[data-frame=slight]{border-radius:10px}
.screen-dock[data-frame=capsule]{border-radius:999px}
.screen-dock[data-glass=none]{background:transparent;border-color:transparent;backdrop-filter:none}
.screen-dock[data-glass=matte]{background:#141411eb;backdrop-filter:none}
.screen-dock[data-glass=frosted]{background:#ffffff18;backdrop-filter:blur(22px)}
.screen-dock[data-glass=liquid]{background:linear-gradient(150deg,#ffffff38,#ffffff0b);box-shadow:inset 0 1px 0 #ffffff4d;backdrop-filter:blur(14px)}
.has-app-logo.logo-failed .app-symbol-wrap{display:none!important}
.has-app-logo.symbol-failed>.app-logo{display:block}
[data-motion=alive] .app-symbol-wrap{animation:tileAlive 2.8s ease-in-out infinite}
[data-motion=alive] .app-tile:nth-child(even) .app-symbol-wrap{animation-delay:-1.4s}
@media(max-width:760px){.screen-dock .app-tile{width:min(var(--app-unit,30px),calc((100vw - 110px)/10))}}
@media(prefers-reduced-motion:reduce){[data-motion=alive] .app-symbol-wrap{animation:none}}
html.reduce [data-motion=alive] .app-symbol-wrap{animation:none}

/* Native artwork layers stay legible on all five plate finishes. */
[data-app-look][data-app-look=ceramic] :is(.app-tile,.mag-i,.focus-i,.dock-item).has-app-logo{background:#e4ded3;box-shadow:inset 0 1px 0 #fff9,0 9px 22px -12px #0009}
[data-app-look][data-app-look=custom] :is(.app-tile,.mag-i,.focus-i,.dock-item).has-app-logo{background:var(--plate,#3f5f86)}
[data-app-look][data-app-look=adaptive] :is(.app-tile,.mag-i,.focus-i,.dock-item).has-app-logo{background:#454138}
[data-app-look][data-app-look=glass] :is(.app-tile,.mag-i,.focus-i,.dock-item).has-app-logo{background:linear-gradient(160deg,#ffffff4d,#ffffff0f);box-shadow:inset 0 1px 0 #ffffff59,0 9px 22px -12px #0009}
[data-app-look]:not([data-app-look=original])[data-logo-mode=original] .prefer-native-original>.app-logo{display:block;width:calc(72% * var(--inner-size,.9));height:calc(72% * var(--inner-size,.9))}
[data-app-look]:not([data-app-look=original])[data-logo-mode=original] .prefer-native-original .app-symbol-wrap{display:none}
.spec-icons[data-app-look] .app-tile{width:min(calc(clamp(42px,6.4vw,92px) * var(--preview-scale,1)),calc((100vw - 100px)/7))}
.mag-bar[data-app-look] .mag-i{width:min(calc(clamp(26px,3.6vw,52px) * var(--preview-scale,1)),calc((100vw - 100px)/10))}
.spec-focus[data-app-look] .focus-i{width:min(calc(clamp(40px,6.6vw,96px) * var(--preview-scale,1)),calc((100vw - 100px)/7))}

/* Every website icon uses the same original/tinted artwork rules. */
[data-app-look][data-logo-mode=original]:not([data-app-look=original]) .has-app-logo>.app-logo{display:block;width:calc(72% * var(--inner-size,.9));height:calc(72% * var(--inner-size,.9))}
[data-app-look][data-logo-mode=original]:not([data-app-look=original]) .has-app-logo .app-symbol-wrap{display:none}
@media(min-width:901px){.atelier-screen{position:sticky;top:96px;align-self:start}}

/* Keep native bitmap clarity while preserving the inner-size adjustment. */
.app-symbol-wrap{max-width:calc(40px * var(--inner-size,.9));max-height:calc(40px * var(--inner-size,.9))}
.has-app-logo[data-app-id=play-store] .app-logo{max-width:calc(48px * var(--inner-size,.9));max-height:calc(48px * var(--inner-size,.9))}
/* ceramic finish for the drawn tiles */
.dock.dock-demo[data-icon=ceramic] .dock-item,[data-app-look=ceramic] .app-tile,[data-app-look=ceramic] .mag-i,[data-app-look=ceramic] .focus-i{background:#e4ded3;color:color-mix(in oklab,var(--c) 75%,#2a2925);box-shadow:inset 0 1px 0 #fff9,0 9px 22px -12px #0009}
.dock[data-icon=ceramic] .dock-item:not([aria-current]){background:#e4ded3;color:#2a2925}
/* early-access form */
.join{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:18px;background:#141411;color:var(--bone);box-shadow:0 40px 120px -30px #000}
.join::backdrop{background:rgba(6,6,5,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.join[open]{animation:joinIn .45s var(--ease)}
@keyframes joinIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.join-form{position:relative;display:grid;gap:14px;padding:clamp(22px,4vw,34px);overflow:auto;max-height:calc(100dvh - 34px)}
.join-close{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.join-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.join-kicker{font-size:10px;color:var(--copper);letter-spacing:.08em}
.join h2{font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.035em;font-weight:500;margin-top:-6px}
.join-lead{color:var(--muted);font-size:15px;margin-bottom:4px}
.join-field{display:grid;gap:6px;font-size:13px;color:var(--bone-2)}
.join-field i{font-style:normal;color:var(--muted)}
.join-field input,.join-field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(234,231,222,.04);color:var(--bone);font:inherit;font-size:15px;resize:vertical}
.join-field input:focus,.join-field textarea:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(205,161,126,.18)}
.join-send{justify-self:start;margin-top:4px;border:0;cursor:pointer}
.join-send:disabled{opacity:.6;cursor:progress}
.join-status{font-size:14px;min-height:1.2em;color:var(--bone-2)}
.join-status[data-kind=ok]{color:#9fd8a3}
.join-status[data-kind=warn] a{color:var(--copper-hi);text-decoration:underline}
.join-form.is-done .join-field,.join-form.is-done .join-send{display:none}
.join-small{font-size:12px;color:var(--muted)}
.join-small a{color:var(--bone-2);text-decoration:underline}
.has-cursor .join,.has-cursor .join *{cursor:auto}
.has-cursor .join :is(a,button){cursor:pointer}
/* LeTa tiles: editorial graphite plates, bone lines, copper rim and accent (the app's own palette).
   :where() keeps them at base strength, so every Dock-studio look can still restyle them. */
:is(.app-tile,.mag-i,.focus-i):where(.leta-tile),.dock.dock-demo .dock-item:where(.leta-tile),.return-dock .dock-item:where(.leta-tile){
  background:radial-gradient(120% 90% at 30% 10%,color-mix(in oklab,var(--c) 70%,#a08b78) 0%,var(--c) 58%,color-mix(in oklab,var(--c) 75%,#000) 100%);
  color:#eee6d9;box-shadow:inset 0 0 0 1px rgba(159,120,96,.55),inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px -12px rgba(0,0,0,.8)}
.leta-tile .app-glyph{width:52%;height:52%;fill:none;stroke:#eee6d9;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.leta-tile .app-glyph .accent{stroke:#d59d78}
.leta-tile .app-art{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.leta-tile[data-app-id=apps] .app-art{width:62%;height:62%}
[data-icon=ceramic] .leta-tile .app-glyph,[data-app-look=ceramic] .leta-tile .app-glyph{stroke:#2f2c28}
[data-icon=ceramic] .leta-tile .app-glyph .accent,[data-app-look=ceramic] .leta-tile .app-glyph .accent{stroke:#a8643e}
/* "Write to us" dialog: four tabs, one form at a time */
.join{width:min(560px,calc(100vw - 32px))}
.join-shell{position:relative;display:grid;gap:14px;padding:clamp(22px,4vw,34px);overflow:auto;max-height:calc(100dvh - 34px)}
.join .join-form{display:grid;gap:14px;padding:0;overflow:visible;max-height:none}
.join-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.join-tabs button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--bone-2);transition:background .25s,color .25s,border-color .25s}
.join-tabs button:hover{border-color:var(--bone)}
.join-tabs button[aria-selected=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.join-tabs button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.join-rate{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.join-rate legend{width:100%;margin-bottom:8px;font-size:13px;color:var(--bone-2)}
.join-rate label{position:relative}
.join-rate input{position:absolute;inset:0;opacity:0;cursor:pointer}
.join-rate span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13px}
.join-rate input:checked+span{background:var(--copper);color:var(--ink);border-color:var(--copper)}
.join-rate input:focus-visible+span{outline:2px solid var(--copper);outline-offset:2px}
.join-field select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#1b1b18;color:var(--bone);font:inherit;font-size:15px}
.join .join-form.is-done>:not(.join-lead){display:none}
.return-routes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;font-size:14px;color:var(--muted)}
.return-routes button{color:var(--bone-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(234,231,222,.35)}
.return-routes button:hover{color:var(--copper-hi)}


/* 2026-10-18 · LeTa 1.2.9: Icon Atelier, LeTa Collection, Painting Atelier steps, what's new, film chapters */
.styles-note{margin-top:22px;text-align:center}
.ia-bench,.wp-bench{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,76px);align-items:start}
.ia-view,.wp-view{min-width:0}
.ia-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(8px,1vw,14px);border:1px solid var(--line);background:#16150f}
.ia-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
.ia-dock{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);display:flex;gap:clamp(6px,1.1vw,16px);padding:clamp(8px,1.2vw,16px) clamp(10px,1.6vw,22px);border-radius:clamp(16px,2vw,28px);background:rgba(18,18,16,.46);border:1px solid rgba(234,231,222,.16);box-shadow:0 22px 40px -22px #000,inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.ia-dock li{width:clamp(34px,5.2vw,74px);aspect-ratio:1}
.ia-dock li:first-child{transform:translateY(-6%) scale(1.12);filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.ia-dock img{width:100%;height:100%;object-fit:contain;display:block}
.ia-name{position:absolute;left:clamp(14px,2.4vw,32px);top:clamp(12px,2.2vw,28px);display:grid;gap:4px;max-width:70%;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.ia-name .mono{color:var(--copper)}
.ia-name b{font-size:clamp(20px,2.6vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.ia-name em{font-family:var(--serif);color:var(--bone-2);font-size:clamp(14px,1.4vw,19px)}
.ia-controls,.wp-controls{display:grid;gap:24px;align-content:start}
.ia-controls h3,.wp-controls h3{font-size:15px;font-weight:500;margin-bottom:12px;letter-spacing:0}
.ia-chips .chip{padding:0 12px 0 6px}
.ia-chips .chip img{width:26px;height:26px;border-radius:7px;object-fit:contain;background:none}
.ia-facts{display:grid;gap:0;border-top:1px solid var(--line)}
.ia-facts li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--bone-2);line-height:1.5}
.ia-facts li::before{content:'';display:inline-block;width:5px;height:5px;margin:0 12px 2px 0;border-radius:50%;background:var(--copper)}
.ia-proof{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}
.ia-real{display:grid;gap:18px}
.ia-real img{border-radius:10px}
.ia-real figcaption{padding-top:8px}
.wp-stage{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(8px,1vw,14px);border:1px solid var(--line);background:#16150f}
.wp-big{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:clamp(14px,2vw,26px);background:linear-gradient(to top,rgba(10,10,8,.78),transparent);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.wp-cap .mono{color:var(--copper)}
.wp-cap b{font-weight:500;font-size:clamp(16px,1.6vw,22px);letter-spacing:-.02em}
.wp-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.wp-thumbs button{display:block;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--line);opacity:.62;transition:opacity .3s,border-color .3s,transform .4s var(--ease)}
.wp-thumbs button:hover{opacity:.9}
.wp-thumbs button[aria-pressed=true]{opacity:1;border-color:var(--copper);transform:translateY(-2px)}
.wp-thumbs img{width:100%;height:100%;object-fit:cover}
.wp-rooms .chip .mono{font-size:10px;color:inherit;opacity:.7;letter-spacing:.04em}
.wp-tour{justify-self:start}
.wp-sources{color:var(--muted);font-size:15px;max-width:46ch}
.wp-proof{display:block}
.wp-proof img{width:100%;border-radius:10px}
.paint{margin-top:76px;padding-top:50px;border-top:1px solid var(--line)}
.paint-head{margin-bottom:34px}
.paint-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.paint-steps figure{margin:0 0 16px}
.paint-steps img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.paint-steps h4{color:var(--copper);font-size:11px;margin:0 0 8px}
.paint-steps p{color:var(--muted);font-size:14px;line-height:1.6}
.paint-real{margin-top:6px}
.paint-proof{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.paint-sub{margin-top:40px!important}
.paint-presets-label{color:var(--copper);margin-top:28px;font-size:10px}
.paint-presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.paint-presets li{padding:6px 11px;border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--bone-2)}
.paint-proof .feature-note{max-width:52ch}
.paint-frames{margin:0}
.paint-flip{position:relative;display:block;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--line);cursor:pointer}
.paint-flip img{width:100%;aspect-ratio:16/9;object-fit:cover}
.paint-count{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(16,15,13,.72);color:var(--bone)}
.paint-flip:hover .paint-count{background:var(--copper);color:var(--ink)}
.news-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-bottom:26px}
.news-card{padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(234,231,222,.035),transparent 60%)}
.news-card:first-child{border-color:rgba(205,161,126,.45);background:linear-gradient(160deg,rgba(205,161,126,.08),transparent 60%)}
.news-card header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.news-card header .mono{color:var(--copper)}
.news-date{font-family:var(--serif);font-style:italic;color:var(--bone-2);font-size:16px}
.news-card ul{display:grid;gap:12px}
.news-card li{position:relative;padding-left:18px;font-size:14px;line-height:1.55;color:var(--bone-2)}
.news-card li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--copper)}
.film-chapters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:22px}
.film-chapters>.mono{color:var(--muted)}
.film-chapters ol{display:flex;flex-wrap:wrap;gap:6px}
.film-chapters button{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--bone-2);transition:background .3s,color .3s,border-color .3s}
.film-chapters button .mono{color:var(--copper);font-size:10px}
.film-chapters button:hover{border-color:var(--copper);color:var(--bone)}
.film-credit{margin-top:16px;font-size:12px;max-width:90ch}
.no-js .ia-controls,.no-js .wp-controls,.no-js .film-chapters{display:none}
.no-js .ia-bench,.no-js .wp-bench{grid-template-columns:1fr}
@media(max-width:1000px){.ia-bench,.wp-bench,.ia-proof,.paint-proof{grid-template-columns:1fr}.paint-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.news-list{grid-template-columns:1fr}}
@media(max-width:760px){.ia-dock{gap:5px;padding:7px 9px;bottom:9%}.ia-dock li{width:calc((100vw - 2*var(--gutter) - 90px)/8)}.ia-name{max-width:88%}.wp-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}.paint-steps{grid-template-columns:1fr}.paint{margin-top:45px;padding-top:32px}.film-chapters{gap:10px}.news-card header{flex-direction:column;gap:4px}}

/* 1.3: the newest scenarios (Time Machine decades, three cards) and the second film */
.fresh{margin-top:clamp(72px,12vh,140px);padding-top:clamp(40px,6vh,72px);border-top:1px solid var(--line)}
.fresh-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:6px clamp(32px,6vw,110px);align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.fresh-head .feature-kicker{grid-column:1/-1;margin-bottom:6px}
.fresh-head h3{font-size:clamp(30px,3.6vw,56px);line-height:1;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.fresh-head p:not(.feature-kicker){max-width:42ch;color:var(--muted);font-size:17px;text-wrap:pretty}
.fresh-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.55fr);gap:clamp(28px,4vw,72px);align-items:center}
.fresh-screen{position:relative;margin:0;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background-color:#16150f;box-shadow:0 0 0 8px #0b0b09,0 0 0 9px rgba(234,231,222,.1),0 50px 90px -30px rgba(0,0,0,.85)}
.fresh-screen img{width:100%;height:100%;object-fit:cover}
.fresh-count{color:var(--copper)}
.fresh-name{margin-top:14px;font-size:clamp(30px,3vw,48px);line-height:1;letter-spacing:-.04em;font-weight:500}
.fresh-desc{margin-top:16px;color:var(--muted);font-size:16px;text-wrap:pretty}
.fresh-eras{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fresh-side .shelf-story{margin-top:26px}
.fresh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(40px,7vh,80px)}
.fresh-cards figure{margin:0;display:grid;gap:14px}
.fresh-cards img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background-color:#16150f;box-shadow:0 0 0 1px rgba(234,231,222,.1),0 30px 60px -30px rgba(0,0,0,.8)}
.fresh-cards figcaption{display:grid;gap:6px}
.fresh-cards b{font-weight:500;font-size:19px;letter-spacing:-.02em}
.fresh-cards span{color:var(--muted);font-size:14px;line-height:1.55;text-wrap:pretty}
.fresh-pro{max-width:68ch;margin:clamp(36px,6vh,64px) auto 0;text-align:center;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:var(--bone-2);text-wrap:balance}
.film-extra{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(48px,8vh,96px)}
.film-extra-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:clamp(10px,1.2vw,18px);overflow:hidden;background:#0b0b09;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);cursor:pointer}
.film-extra-poster img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.film-extra-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,8,.55),transparent 38%);pointer-events:none}
.film-extra-poster .launch-play{pointer-events:none}
.film-extra-poster:hover img{transform:scale(1.03)}
.film-extra-poster:hover .launch-play{transform:scale(1.04)}
.film-extra-poster:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
.film-extra-copy h3{font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.film-extra-copy p:not(.feature-kicker){margin-top:16px;max-width:44ch;color:var(--muted);font-size:16px;text-wrap:pretty}
.news-card:first-child{grid-column:1/-1}
.news-card:first-child ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(24px,4vw,56px)}
@media(max-width:1000px){.fresh-head,.fresh-stage,.film-extra{grid-template-columns:1fr}.fresh-cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.fresh-cards{grid-template-columns:1fr}.fresh-pro{font-size:16px}.news-card:first-child ul{grid-template-columns:1fr}}