/* Layout: a slow vertical descent through a dark studio. Seven small custom keyboards sit on plinths stacked down one spine; the camera stops at each, a spec panel sits opposite the object, and numbered callouts point at its parts. Single committed dark look, no bright surfaces. */
:root{
  --bg:#0B1220; --bg-2:#13203A; --bg-deep:#0B1220; --floor:#0F1A2C; --card:#16223A; --ink:#E8EEF7; --ink-2:#9FB0C8; --mute:#7D8FAB; --line:rgba(150,180,230,.14);
  --accent:#2F7BFF; --accent-hi:#6FA8FF; --cyan:#38D6FF; --accent-text:#6FA8FF; --sage:#38D6FF;
  --f-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --f-body:"Manrope","Helvetica Neue",system-ui,sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  --st:env(safe-area-inset-top, 0px); --sb:env(safe-area-inset-bottom, 0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0; background:linear-gradient(180deg, var(--bg-2), var(--bg)) fixed var(--bg); color:var(--ink); font-family:var(--f-body); overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--accent); outline-offset:3px}
/* ink-blue sky behind the transparent 3D canvas: lighter at the top, faint cyan haze far away */
#sky{position:fixed; inset:0; pointer-events:none; background:radial-gradient(90% 38% at 50% 34%, rgba(56,214,255,.07), rgba(56,214,255,0) 70%), radial-gradient(120% 70% at 50% 0%, rgba(47,123,255,.10), rgba(47,123,255,0) 60%), linear-gradient(180deg, var(--bg-2) 0%, #101A2F 45%, var(--bg) 100%)}
#gl{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:pan-y}
#lines{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
.track{height:800vh}

/* top bar */
.top{position:fixed; z-index:10; inset:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-top:calc(var(--st) + 22px); padding-left:calc(var(--gl) + 12px); padding-right:calc(var(--gr) + 12px); pointer-events:none}
.top > *{pointer-events:auto}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none}
.logo .dm{height:15px; width:auto; display:block; overflow:visible}
.logo b{font-family:var(--f-mono); font-weight:600; font-size:.86rem; letter-spacing:.08em}
.logo span{font-family:var(--f-serif); font-style:italic; font-size:1.2rem; color:var(--ink-2)}
.tr{display:flex; align-items:center; gap:18px}
.mono{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-variant-numeric:tabular-nums}
.snd{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; display:flex; gap:8px; align-items:center}
.snd i{width:6px; height:6px; border-radius:50%; background:var(--mute)}
.snd[aria-pressed="true"] i{background:var(--accent)}

/* panels */
.panel{position:fixed; z-index:5; top:50%; width:min(25rem, 36vw); display:flex; flex-direction:column; gap:18px;
  opacity:0; visibility:hidden; transform:translateY(calc(-50% + 16px)); transition:opacity .45s ease, transform .45s ease, visibility 0s .45s}
.panel.L{left:calc(var(--gl) + 4vw)} .panel.R{right:calc(var(--gr) + 92px)}
.panel{pointer-events:none; overflow:visible} .panel.on a, .panel.on button, .panel.on .handle, .panel.on .mail{pointer-events:auto}
.panel.on{opacity:1; visibility:visible; transform:translateY(-50%); transition:opacity .8s ease .15s, transform .8s ease .15s}
.panel.hero{top:auto; bottom:calc(var(--sb) + 76px); left:calc(var(--gl) + 4vw); width:min(36rem, 60vw); transform:translateY(16px)}
.panel.hero.on{transform:none}
.panel.hero h1{font-size:clamp(2.6rem, 5.4vw, 5rem)}
@media (min-width:821px){ .panel:not(.hero){padding:26px 28px; background:rgba(22,34,58,.9);  border:1px solid var(--line); border-radius:16px} }
#topshade{position:fixed; left:0; right:0; top:0; height:150px; z-index:4; pointer-events:none; background:linear-gradient(rgba(11,18,32,.6), rgba(11,18,32,0))}
#film{position:fixed; inset:0; z-index:3; pointer-events:none; background:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(6,11,22,.55) 100%)}
#film::after{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.06}
#shade{position:fixed; left:0; right:0; bottom:0; height:55vh; z-index:4; pointer-events:none; background:linear-gradient(rgba(11,18,32,0), rgba(11,18,32,.9) 70%)}
.idx{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); display:flex; align-items:center; gap:12px}
.idx::after{content:""; width:44px; height:1px; background:var(--line)}
.panel h1, .panel h2{font-family:var(--f-serif); font-weight:400; margin:0; line-height:1.02; letter-spacing:-.01em; text-wrap:balance}
.panel h1{font-size:clamp(2.6rem, 4.4vw, 4.3rem)}
.panel h2{font-size:clamp(2.3rem, 3.8vw, 3.6rem)}
.panel h1 em, .panel h2 em{color:var(--accent)}
.panel p{margin:0; color:var(--ink-2); font-size:1rem; line-height:1.62; max-width:42ch}
dl{margin:0; display:grid; grid-template-columns:auto minmax(0, 1fr); border-top:1px solid var(--line)}
dt, dd{margin:0; padding-block:9px; border-bottom:1px solid var(--line)}
dt{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); padding-right:22px; align-self:center}
dd{text-align:right; font-size:.88rem; color:var(--ink)}
.handle{font-family:var(--f-serif); font-size:2rem; color:var(--ink); user-select:all}
.cta{display:flex; gap:10px; flex-wrap:wrap}
.btn{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:12px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:var(--bg-deep); transition:transform .2s}
.btn:hover{transform:translateY(-2px); background:var(--accent-hi); border-color:var(--accent-hi)}
.btn.ghost:hover{background:rgba(111,168,255,.08); border-color:var(--accent-hi)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}

/* callouts */
.co{position:fixed; left:0; top:0; z-index:3; pointer-events:none; opacity:0; display:flex; flex-direction:column; gap:3px; white-space:nowrap; will-change:transform}
.co b{font-family:var(--f-mono); font-weight:500; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.co b i{font-style:normal; color:var(--accent-text); margin-right:8px}
.co span{font-size:.8rem; color:var(--mute)}
.co.l{align-items:flex-end; text-align:right}

/* depth gauge */
.gauge{position:fixed; z-index:6; right:calc(var(--gr) + 12px); bottom:calc(var(--sb) + 16px); display:flex; align-items:center; gap:16px}
.gauge ol{list-style:none; margin:0; padding:0; display:flex; gap:12px; position:relative}
.gauge ol::before{content:""; position:absolute; left:4px; right:4px; top:50%; height:1px; background:var(--line)}
.gauge button{display:block; background:none; border:0; padding:4px 0; cursor:pointer}
.gauge button span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.gauge button i{display:block; width:9px; height:9px; border-radius:50%; border:1px solid var(--mute); background:var(--bg); position:relative; z-index:1; transition:all .3s}
.gauge button:hover i{border-color:var(--ink)}
.gauge button.on i{background:var(--accent); border-color:var(--accent)}

.tele{position:fixed; z-index:6; left:calc(var(--gl) + 12px); bottom:calc(var(--sb) + 20px)}
.hint{position:fixed; z-index:6; left:50%; transform:translateX(-50%); bottom:calc(var(--sb) + 22px); display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .6s}
.hint i{width:1px; height:30px; background:linear-gradient(var(--ink-2), transparent)}
.hint.gone{opacity:0}
#loader{position:fixed; inset:0; z-index:60; background:linear-gradient(180deg, var(--bg-2), var(--bg)); display:grid; place-items:center; transition:background .9s ease}
#loader.fly{background:rgba(11,18,32,0)}
.ld2{position:relative; width:min(560px, 82vw); aspect-ratio:23 / 7}
.ld-dots{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; gap:14px; transition:opacity .3s, transform .45s cubic-bezier(.6,0,.3,1)}
.ld-dots i{width:12px; height:12px; border-radius:50%; background:#1B2840; transition:background .12s, box-shadow .2s}
.ld-dots i.on{background:#2F7BFF; box-shadow:0 0 14px rgba(47,123,255,.55); animation:clk .24s ease-out}
@keyframes clk{35%{transform:scale(.5)} 70%{transform:scale(1.18)}}
#loader.rev .ld-dots{opacity:0; transform:translate(-50%, -50%) scale(.4)}
.ld-mx{position:absolute; inset:0; pointer-events:none}
.ld-mx svg{width:100%; height:auto; display:block; overflow:visible}
.ld-mx .px{transform:scale(0); transform-box:fill-box; transform-origin:center; transition:transform .42s cubic-bezier(.3,1.7,.5,1) var(--d)}
.ld-mx .bg{opacity:0; transition:opacity .5s var(--d)}
#loader.rev .ld-mx .px{transform:scale(1)} #loader.rev .ld-mx .bg{opacity:1} #loader.fly .ld-mx .bg{opacity:0; transition-delay:0s}
.ld-devs{position:absolute; right:0; top:calc(100% + 6px); line-height:1; font-family:var(--f-serif); font-style:italic; font-size:2.2rem; color:var(--ink-2); opacity:0; transform:translateY(8px); transition:opacity .5s .5s, transform .5s .5s}
#loader.rev .ld-devs{opacity:1; transform:none} #loader.fly .ld-devs{opacity:0; transition-delay:0s; transition-duration:.25s}
.ld-meta2{position:absolute; left:0; right:0; top:calc(100% + 78px); display:flex; justify-content:space-between; transition:opacity .3s}
#ldbin{letter-spacing:.42em; color:#6FA8FF} #loader.fly .ld-meta2{opacity:0}
body.pre .top .logo{opacity:0}
#loader.done{visibility:hidden; pointer-events:none}
.lid{position:absolute; left:0; right:0; height:50.5%; background:#0B1220; transition:transform 1.15s cubic-bezier(.75,0,.2,1)}
.lid.t{top:0; border-bottom:1px solid rgba(56,214,255,0)} .lid.b{bottom:0}
#loader.open .lid.t{transform:translateY(-101%)} #loader.open .lid.b{transform:translateY(101%)}
.ld-in{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding-left:var(--gl); padding-right:var(--gr); transition:opacity .45s, transform .6s, filter .45s}
#loader.open .ld-in{opacity:0; transform:scale(1.05); filter:blur(6px)}
.ld-in.glitch{animation:gl .42s steps(1) both}
@keyframes gl{0%{transform:translate(0)} 15%{transform:translate(-7px,2px); filter:drop-shadow(5px 0 rgba(56,214,255,.8)) drop-shadow(-5px 0 rgba(47,123,255,.8))} 35%{transform:translate(6px,-3px); filter:none}
  55%{transform:translate(-3px,1px); filter:drop-shadow(-6px 0 rgba(56,214,255,.8)) drop-shadow(6px 0 rgba(47,123,255,.8))} 75%{transform:translate(2px,0); filter:none} 100%{transform:none}}
.ld-keys{display:flex; gap:10px; flex-wrap:nowrap}
.ld-keys .gap{width:20px}
.kc{width:clamp(30px, 7.4vw, 60px); aspect-ratio:1; max-width:100%; border-radius:10px; background:#22304A; border:0; display:grid; place-items:center;
  font-family:var(--f-mono); font-weight:600; font-size:clamp(.9rem, 2.4vw, 1.4rem); color:transparent;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(150,180,230,.06), 0 7px 0 #0A1222; transform:translateY(-7px);
  transition:transform .12s, box-shadow .12s, background .25s, color .25s}
.kc.on{transform:translateY(0); background:#3B4A68; color:#E8EEF7; box-shadow:inset 0 -5px 0 rgba(0,0,0,.22), 0 2px 0 #0A1222}
.kc.on.r{background:#2F7BFF; color:#0B1220}
.ld-meta, .ld-bar{width:min(540px, 100%)}
.ld-meta{display:flex; justify-content:space-between; gap:16px}
.ld-bar{height:1px; background:rgba(150,180,230,.14)} .ld-bar i{display:block; height:100%; width:0; background:var(--accent)}
.ld-go{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:8px; opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s; pointer-events:none}
.ld-go.on{opacity:1; transform:none; pointer-events:auto}
.kc.enter{width:168px; aspect-ratio:auto; height:66px; color:#0B1220; background:#2F7BFF; transform:none; cursor:pointer; display:flex; flex-direction:column; gap:3px; animation:breathe 1.8s ease-in-out infinite}
.kc.enter b{font-weight:600; letter-spacing:.12em} .kc.enter small{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.kc.enter:active{transform:translateY(5px); box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), 0 2px 0 #0A1222}
@keyframes breathe{50%{box-shadow:inset 0 -7px 0 rgba(0,0,0,.35), 0 7px 0 #0A1222, 0 0 0 10px rgba(47,123,255,.16)}}
.ld-quiet{background:none; border:0; color:var(--mute); cursor:pointer; text-decoration:underline; text-underline-offset:4px}
body.pre .top, body.pre .panel, body.pre .gauge, body.pre .tele, body.pre .hint, body.pre #callouts, body.pre #lines, body.pre #shade{opacity:0 !important}
.top, .gauge, .tele, #callouts, #lines, #shade{transition:opacity .9s ease}
.idx .biome{color:var(--mute)} .idx .biome::before{content:"· "; color:var(--mute)}
#cur{position:fixed; left:0; top:0; z-index:40; width:30px; height:30px; margin:-15px 0 0 -15px; border:1.5px solid rgba(159,176,200,.55); border-radius:50%; pointer-events:none; display:none; place-items:center;
  transition:width .2s, height .2s, margin .2s, background .2s, border-color .2s}
#cur span{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bg-deep); opacity:0; transition:opacity .2s}
#cur.big{width:60px; height:60px; margin:-30px 0 0 -30px; background:var(--accent); border-color:var(--accent)} #cur.big span{opacity:1}
body.fine #cur{display:grid} body.fine #gl{cursor:none !important}

@media (max-width:820px){
  .panel, .panel.L, .panel.R{left:0; right:0; top:auto; bottom:0; width:auto; gap:10px; overflow:visible;
    padding-top:40px; padding-bottom:calc(var(--sb) + 20px); padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px));
    background:linear-gradient(rgba(22,34,58,0), rgba(22,34,58,.94) 40px); transform:translateY(16px)}
  .panel.on{transform:none}
  .panel p{font-size:.92rem; line-height:1.5}
  .panel h2{font-size:2rem} .panel.hero h1{font-size:2.4rem}
  .panel dl{display:none}
  .gauge, .tele, .hint{display:none}
  .co span{display:none}
  .top{padding-left:calc(var(--gl) + 4px); padding-right:calc(var(--gr) + 4px)}
}
@media (prefers-reduced-motion: reduce){ .panel, .panel.on, .lid, .ld-in{transition:none} .kc.enter{animation:none} }
@media (max-width:820px){ .panel.hero{left:0; right:0; width:auto; bottom:0; background:none; padding-bottom:calc(var(--sb) + 28px)} .panel.hero h1{font-size:2.5rem} }
/* get-your-website flow */
.gw-open{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--accent); background:var(--accent); color:var(--bg-deep); border-radius:999px; padding:8px 14px; cursor:pointer}
#gw{position:fixed; inset:0; z-index:70; background:var(--card); overflow-y:auto; overscroll-behavior:contain}
.gw-in{max-width:1180px; margin:0 auto; padding-top:calc(var(--st) + 20px); padding-bottom:calc(var(--sb) + 32px); padding-left:var(--gl); padding-right:var(--gr); display:flex; flex-direction:column; gap:22px}
.gw-top{display:flex; justify-content:space-between; align-items:center; gap:16px}
.gw-x{background:none; border:1px solid var(--line); color:var(--ink-2); border-radius:999px; padding:7px 12px; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; display:flex; gap:8px; align-items:center}
.gw-x kbd{font-family:inherit; font-size:.6875rem; border:1px solid var(--line); border-radius:4px; padding:1px 4px; color:var(--mute)}
.gw-steps{list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap}
.gw-steps li{display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.gw-steps li b{display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#22304A; color:var(--mute); font-weight:600; box-shadow:inset 0 -4px 0 rgba(0,0,0,.35), 0 3px 0 #0A1222; transition:all .2s}
.gw-steps li.on{color:var(--ink)} .gw-steps li.on b{background:var(--accent); color:#0B1220}
.gw-steps li.done b{background:#3B4A68; color:#E8EEF7}
.gw-steps li + li::before{content:""; width:18px; height:1px; background:var(--line)}
.gw-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:40px; align-items:start}
.gw-form{display:flex; flex-direction:column; gap:22px; min-width:0}
.gw-pane{display:none; flex-direction:column; gap:16px}
.gw-pane.on{display:flex}
.gw-pane h2{font-family:var(--f-serif); font-weight:400; font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.05; margin:0; text-wrap:balance}
.gw-sub{margin:0; color:var(--ink-2); line-height:1.6; max-width:46ch}
.gw-note{margin:0; color:var(--mute); text-transform:none; letter-spacing:.04em; font-size:.6875rem}
.gw-domain{display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:#0F1A2C; padding:6px 6px 6px 14px; gap:6px; min-width:0}
.gw-domain:focus-within{border-color:var(--accent)}
.gw-pre{font-family:var(--f-mono); color:var(--mute); font-size:.95rem}
.gw-domain input{flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink); font-family:var(--f-mono); font-size:1.15rem; padding-block:10px}
.gw-domain select{background:#22304A; color:var(--ink); border:0; border-radius:8px; font-family:var(--f-mono); font-size:.95rem; padding:10px 8px}
.gw-sugg, .gw-chips{display:flex; flex-wrap:wrap; gap:8px}
.gw-sugg button, .gw-chips button{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; border:1px solid var(--line); background:transparent; color:var(--ink-2); border-radius:999px; padding:8px 12px; cursor:pointer}
.gw-sugg button:hover{border-color:var(--accent); color:var(--ink)}
.gw-chips button[aria-pressed="true"]{background:#3B4A68; color:#E8EEF7; border-color:#3B4A68}
.gw-types{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
.gw-types button{text-align:left; border:1px solid var(--line); background:#0F1A2C; color:var(--ink); border-radius:12px; padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:border-color .15s, background .15s}
.gw-types button b{font-weight:600; font-size:.95rem} .gw-types button span{color:var(--mute); font-size:.8rem}
.gw-types button:hover{border-color:rgba(111,168,255,.5)}
.gw-types button[aria-checked="true"]{border-color:var(--accent); background:#14284D}
.gw-field{width:100%; background:#0F1A2C; border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:12px 14px; font-family:var(--f-body); font-size:1rem; outline:none}
.gw-field:focus{border-color:var(--accent)}
.gw-seg{display:flex; background:#0F1A2C; border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px}
.gw-seg button{flex:1; border:0; background:transparent; color:var(--ink-2); border-radius:9px; padding:10px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
.gw-seg button[aria-checked="true"]{background:#3B4A68; color:#E8EEF7}
.gw-days{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px}
.gw-days button, .gw-times button{border:1px solid var(--line); background:#0F1A2C; color:var(--ink-2); border-radius:10px; padding:10px 4px; cursor:pointer; font-family:var(--f-mono); font-size:.7rem; display:flex; flex-direction:column; align-items:center; gap:2px}
.gw-days button b{font-family:var(--f-serif); font-weight:400; font-size:1.4rem; color:var(--ink)}
.gw-times{display:flex; flex-wrap:wrap; gap:8px} .gw-times button{flex-direction:row; padding:10px 14px}
.gw-days button[aria-checked="true"], .gw-times button[aria-checked="true"]{border-color:var(--accent); background:#14284D; color:var(--ink)}
.gw-fields{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.gw-fields label{display:flex; flex-direction:column; gap:6px; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.gw-fields label span{text-transform:none; letter-spacing:0}
.gw-err{margin:0; min-height:1.2em; color:#F5B971; font-size:.88rem}
.gw-sum{margin:0; background:#0F1A2C; border:1px solid var(--line); border-radius:12px; padding:16px; font-family:var(--f-mono); font-size:.8rem; line-height:1.7; color:var(--ink); white-space:pre-wrap; overflow-x:auto}
.gw-done-cta{display:flex; gap:10px; flex-wrap:wrap}
.gw-nav{display:flex; justify-content:space-between; gap:10px}
.gw-nav .btn{min-width:120px}
.gw-nav .btn[disabled]{opacity:.4; cursor:default}
/* preview */
.gw-prev{position:sticky; top:20px; display:flex; flex-direction:column; gap:10px; min-width:0}
.gw-browser{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0F1A2C; box-shadow:0 30px 60px rgba(0,0,0,.45)}
.gw-bar{display:flex; align-items:center; gap:6px; padding:10px 12px; background:#1B2840; border-bottom:1px solid var(--line)}
.gw-bar i{width:9px; height:9px; border-radius:50%; background:#3B4A68}
.gw-bar span{margin-left:10px; flex:1; min-width:0; background:#0B1220; border-radius:6px; padding:5px 10px; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gw-site{--pv-a:#2F7BFF; --pv-b:#14161B; --pv-c:#E6ECF0; --pv-t:#15171C; background:var(--pv-c); color:var(--pv-t); padding:16px 18px 18px; display:flex; flex-direction:column; gap:16px; transition:background .4s, color .4s}
.pv-nav{display:flex; align-items:center; gap:12px; font-size:.72rem}
.pv-nav b{font-family:var(--f-serif); font-weight:400; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%}
.pv-nav span{flex:1; display:flex; gap:12px; justify-content:flex-end; opacity:.7; white-space:nowrap; overflow:hidden}
.pv-nav em{font-style:normal; background:var(--pv-a); color:#fff; padding:5px 10px; border-radius:999px; font-size:.6875rem; white-space:nowrap}
.pv-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:center}
.pv-hero small{font-size:.6875rem; letter-spacing:.16em; opacity:.6}
.pv-hero h3{font-family:var(--f-serif); font-weight:400; font-size:clamp(1.3rem, 2.4vw, 1.9rem); line-height:1.05; margin:6px 0 8px; text-wrap:balance}
.pv-hero p{margin:0 0 12px; font-size:.78rem; opacity:.75; line-height:1.5}
.pv-cta{display:inline-block; background:var(--pv-b); color:var(--pv-c); padding:8px 14px; border-radius:999px; font-size:.7rem}
.pv-img{aspect-ratio:4/3.4; max-width:100%; border-radius:10px; background:linear-gradient(150deg, var(--pv-a), var(--pv-b)); position:relative; overflow:hidden}
.pv-img::after{content:""; position:absolute; left:18%; right:18%; bottom:0; height:62%; border-radius:999px 999px 0 0; background:rgba(255,255,255,.14)}
.pv-cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.pv-cards div{background:rgba(0,0,0,.05); border-radius:9px; padding:10px; display:flex; flex-direction:column; gap:3px; min-width:0}
.pv-cards b{font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pv-cards span{font-size:.6875rem; opacity:.6}
.pv-cards i{width:16px; height:16px; border-radius:5px; background:var(--pv-a); opacity:.85; margin-bottom:4px}
.gw-phone{position:absolute; right:14px; bottom:14px; width:30%; max-width:150px; aspect-ratio:9/18.5; border-radius:18px; background:#0F1A2C; border:5px solid #2A3650; box-shadow:0 16px 40px rgba(0,0,0,.5); overflow:hidden}
.pv-app{height:100%; background:var(--pv-c, #E6ECF0); color:#15171C; display:flex; flex-direction:column; gap:6px; padding:12px 8px 0; font-size:.6875rem}
.pv-app b{font-family:var(--f-serif); font-weight:400; font-size:.85rem}
.pv-app #pv-app-rows{display:flex; flex-direction:column; gap:5px; flex:1}
.pv-app #pv-app-rows div{background:rgba(0,0,0,.06); border-radius:6px; padding:6px; display:flex; justify-content:space-between; gap:4px}
.pv-tabbar{display:flex; justify-content:space-around; padding:6px 0 8px; border-top:1px solid rgba(0,0,0,.08)}
.pv-tabbar i{width:12px; height:4px; border-radius:2px; background:rgba(0,0,0,.2)} .pv-tabbar i:first-child{background:#2F7BFF}
@media (max-width:900px){
  .gw-grid{grid-template-columns:minmax(0, 1fr); gap:24px}
  .gw-prev{position:static}
  .gw-phone{width:26%}
  .gw-days{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .gw-fields{grid-template-columns:minmax(0, 1fr)}
  .gw-steps li + li::before{width:8px}
}


/* ---------- small details: progress line, studio clock, ripple, magnetic buttons ---------- */
#prog{position:fixed; left:0; top:0; height:2px; width:100%; z-index:61; background:linear-gradient(90deg, var(--accent), var(--accent-hi)); transform-origin:0 50%; transform:scaleX(0); pointer-events:none}
.live{display:inline-flex; align-items:center; gap:7px; white-space:nowrap} .live b{font-weight:500; color:var(--ink)} .live em{font-style:normal}
.live i{width:7px; height:7px; border-radius:50%; background:#3B4A68} .live.open i{background:var(--cyan); box-shadow:0 0 0 0 rgba(56,214,255,.6); animation:livep 1.8s infinite} .live.open em{color:var(--cyan)}
@keyframes livep{70%{box-shadow:0 0 0 7px rgba(56,214,255,0)} 100%{box-shadow:0 0 0 0 rgba(56,214,255,0)}}
.ripple{position:fixed; z-index:62; width:10px; height:10px; margin:-5px 0 0 -5px; border:1.5px solid #2F7BFF; border-radius:50%; pointer-events:none; animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(5); opacity:0; border-color:var(--cyan)}}
.mag{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (max-width:820px){ .live{display:none} }
@media (prefers-reduced-motion: reduce){ .live.open i{animation:none} .ripple{display:none} .mag{transition:none} }

/* ---------- production fixes ---------- */
.gw-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.gw-done-cta[hidden]{display:none}
#gw-done-h:focus{outline:none}
.gw-open, .snd, .top .mono{white-space:nowrap}
/* phone header: one row, 40px tap targets, sound becomes an icon button (label kept for screen readers) */
@media (max-width:820px){
  .tr{gap:10px}
  .gw-open, .snd{min-height:40px}
}
@media (max-width:560px){
  #depth{display:none}
  .tr{gap:8px}
  #count{letter-spacing:.04em}
  .gw-open{letter-spacing:.06em; padding:0 12px}
  .snd{width:40px; padding:0; justify-content:center}
  .snd span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
}
@media (max-width:359px){ #count{display:none} }
@media (prefers-reduced-motion: reduce){ .ld-dots i.on{animation:none} .btn:hover{transform:none} }

/* ---------- Electric Midnight glow: electric-blue buttons carry a soft light ---------- */
.btn:not(.ghost){box-shadow:0 0 0 1px rgba(111,168,255,.22), 0 10px 30px -10px rgba(47,123,255,.7)}
.btn:not(.ghost):hover{box-shadow:0 0 0 1px rgba(111,168,255,.45), 0 12px 36px -8px rgba(111,168,255,.75)}
.logo .dm{filter:drop-shadow(0 0 4px rgba(47,123,255,.45))}

/* ---------- one main call to action: big hero button, quiet header button ---------- */
.btn-hero{font-size:.8rem; padding:17px 26px; display:inline-flex; align-items:center; gap:12px}
.btn-hero .arr{font-family:var(--f-body); font-size:1.05rem; letter-spacing:0; transition:transform .25s}
.btn-hero:hover .arr{transform:translateX(4px)}
.top .gw-open{background:transparent; color:var(--ink); border-color:rgba(111,168,255,.45); transition:opacity .45s ease, visibility 0s .45s, border-color .2s, background .2s}
.top .gw-open:hover{border-color:var(--accent-hi); background:rgba(111,168,255,.08)}
body.at-hero .top .gw-open{opacity:0; visibility:hidden; pointer-events:none}
body:not(.at-hero) .top .gw-open{transition:opacity .45s ease, visibility 0s, border-color .2s, background .2s}
@media (prefers-reduced-motion: reduce){ .top .gw-open, .btn-hero .arr{transition:none} }

/* ---------- contact block ---------- */
.contact{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.mail{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.85rem; color:var(--ink); user-select:all}
.mail-copy{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; user-select:none}
.mail-copy:hover{border-color:var(--accent-hi); color:var(--ink)}
.panel p.reply{font-size:.85rem; color:var(--mute)}
@media (max-width:820px){ .contact{gap:10px 14px} .panel .btn-hero{padding:14px 20px} .panel p.reply{font-size:.8rem} }

/* ---------- hero: the H1 is the small mono label; the display line keeps the approved look ---------- */
.panel.hero h1.idx{font-family:var(--f-mono); font-weight:400; font-size:.6875rem; line-height:1.5; letter-spacing:.16em; text-wrap:balance}
.panel .hero-tag{font-family:var(--f-serif); font-weight:400; margin:0; line-height:1.02; letter-spacing:-.01em; text-wrap:balance; color:var(--ink); font-size:clamp(2.6rem, 5.4vw, 5rem); max-width:none}
.panel .hero-tag em{color:var(--accent)}
@media (max-width:820px){ .panel .hero-tag{font-size:2.5rem} }

/* ---------- booking: services, time zones, privacy note ---------- */
.gw-times button{flex-direction:column; align-items:flex-start; gap:3px}
.gw-times button small{font-size:.6875rem; color:var(--mute)}
.gw-times button[aria-checked="true"] small{color:var(--ink-2)}
.gw-legal{margin:0; font-size:.8rem; color:var(--mute)} .gw-legal a{color:var(--accent-hi)}

/* ---------- footer + expandable About / Privacy (they scroll in after the 3D descent) ---------- */
.foot, .xp{position:relative; z-index:8; background:var(--floor)}
.foot{border-top:1px solid var(--line); padding:56px var(--gr) calc(var(--sb) + 28px) var(--gl)}
.foot-in{max-width:72rem; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap:36px}
.foot-brand{display:flex; flex-direction:column; gap:14px}
.foot-brand p{margin:0; color:var(--ink-2); line-height:1.6; max-width:38ch}
.foot .foot-where{color:var(--mute)}
.foot-links{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.foot-links .mono{margin-bottom:4px}
.foot-links a{color:var(--ink); text-decoration:none; font-size:.95rem} .foot-links a:hover{color:var(--accent-hi); text-decoration:underline; text-underline-offset:4px}
.foot-hours{color:var(--mute); font-size:.9rem}
.foot-bar{max-width:72rem; margin:40px auto 0; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px}
.foot-copy{margin:0; color:var(--mute); font-size:.85rem}
.foot-xp{display:flex; gap:10px; flex-wrap:wrap}
.xp-btn, .xp-close{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer; text-decoration:none}
.xp-btn:hover, .xp-close:hover, .xp-btn[aria-expanded="true"]{border-color:var(--accent-hi); color:var(--ink)}
.xp{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s ease}
.xp.open{grid-template-rows:1fr}
.xp-in{overflow:hidden; min-height:0; padding:0 var(--gr) 0 var(--gl)}
.xp-card{max-width:72rem; margin:0 auto 48px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px clamp(20px, 4vw, 44px) 36px; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease}
.xp.open .xp-card{opacity:1; transform:none; transition-delay:.12s}
.xp-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px}
.xp-body{max-width:65ch}
.xp-body h2{font-family:var(--f-serif); font-weight:400; font-size:clamp(2rem, 4vw, 3rem); line-height:1.05; margin:0 0 18px; text-wrap:balance}
.xp-body h2 em{color:var(--accent)}
.xp-body h3{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); font-weight:500; margin:26px 0 8px}
.xp-body p{color:var(--ink-2); line-height:1.7; margin:0 0 14px}
.xp-body a{color:var(--accent-hi)} .xp-body strong{color:var(--ink); font-weight:600}
.xp-body .updated{color:var(--mute); margin-bottom:18px}
.xp-body .sig{color:var(--ink); font-family:var(--f-serif); font-style:italic; font-size:1.25rem; margin-top:20px}
.about{display:flex; gap:28px; align-items:flex-start; max-width:none}
.about-text{max-width:65ch}
.founder-ph{flex:none; width:96px; height:96px; border-radius:50%; background:linear-gradient(150deg, #22304A, #0F1A2C); border:1px solid rgba(111,168,255,.35); display:grid; place-items:center; object-fit:cover}
.founder-ph span{font-family:var(--f-serif); font-size:2rem; color:var(--accent-hi)}
@media (max-width:820px){
  .foot-in{grid-template-columns:minmax(0, 1fr); gap:28px}
  .about{flex-direction:column; gap:18px}
  .founder-ph{width:72px; height:72px}
}
@media (prefers-reduced-motion: reduce){ .xp, .xp-card{transition:none} }
/* header gets a solid backdrop once the footer / About / Privacy scroll under it */
.top::before{content:""; position:absolute; inset:0 0 -14px; background:linear-gradient(var(--floor) 72%, rgba(15,26,44,0)); opacity:0; transition:opacity .3s; pointer-events:none; z-index:-1}
body.in-foot .top::before{opacity:1}