/* ==========================================================================
   Session Countdown: styles
   Tokens → scene → stage (copy/clock) → chrome (toolbar, drawer) → utilities
   ========================================================================== */

:root{
  --accent:#C9EE3B; --accent-hi:#E9FF8E;
  --soft:rgba(201,238,59,.42);
  --ink:#F6F5F2; --ink-2:rgba(246,245,242,.80); --dim:rgba(246,245,242,.54); --faint:rgba(246,245,242,.32);
  --line:rgba(246,245,242,.14); --line-2:rgba(246,245,242,.26);
  --bg:#0B0B0C; --panel:rgba(14,15,16,.80);
  --ease:cubic-bezier(.22,.68,.24,1);
  --scale:1;                /* text scale multiplier (settings) */
  --dimmer:.55;             /* background darkening strength */
  --blur:0px;               /* background blur */
  --bgpos:50% 50%;          /* background focal point */
  --font-display:"Lora",Georgia,"Times New Roman",serif;
  --font-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-clock:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.6rem, 6vw, 6.5rem);
  --vgutter:clamp(1.4rem, 6vh, 4.5rem);
}
html[data-font="modern"]{ --font-display:"Archivo","Helvetica Neue",Arial,sans-serif; }
html[data-font="mono"]{ --font-clock:"JetBrains Mono",ui-monospace,Menlo,monospace; }

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:var(--font-ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.idle{ cursor:none; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }

/* --------------------------------------------------------------------------
   Scene (background layer)
   -------------------------------------------------------------------------- */
.scene{ position:fixed; inset:0; overflow:hidden; background:var(--bg); }
.scene .img{
  position:absolute; inset:-2%; width:104%; height:104%;
  background-size:cover; background-position:var(--bgpos); background-repeat:no-repeat;
  filter:blur(var(--blur)); transform-origin:var(--bgpos);
  transition:opacity 1.2s var(--ease);
}
.scene .img.kb{ animation:kenburns 60s var(--ease) infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }

/* Directional dimmer: two layers (column + row) so e.g. "bottom-left"
   darkens both the left edge and the bottom edge where the copy sits. */
.scene .shade{ position:absolute; inset:0; pointer-events:none; transition:opacity .8s var(--ease); }
.scene .shade.base{ background:rgba(6,7,8,calc(var(--dimmer) * .45)); }
.scene .shade.h, .scene .shade.v{ opacity:var(--dimmer); }
body[data-anchor$="l"] .scene .shade.h{ background:linear-gradient(100deg, rgba(6,7,8,.92) 0%, rgba(6,7,8,.62) 40%, rgba(6,7,8,.06) 74%, transparent 100%); }
body[data-anchor$="r"] .scene .shade.h{ background:linear-gradient(260deg, rgba(6,7,8,.92) 0%, rgba(6,7,8,.62) 40%, rgba(6,7,8,.06) 74%, transparent 100%); }
body[data-anchor$="c"] .scene .shade.h{ background:radial-gradient(55% 70% at 50% 50%, rgba(6,7,8,.70), rgba(6,7,8,.25) 60%, transparent 100%); }
body[data-anchor^="b"] .scene .shade.v{ background:linear-gradient(0deg, rgba(6,7,8,.90) 0%, rgba(6,7,8,.50) 34%, rgba(6,7,8,.04) 66%, transparent 100%); }
body[data-anchor^="t"] .scene .shade.v{ background:linear-gradient(180deg, rgba(6,7,8,.90) 0%, rgba(6,7,8,.50) 34%, rgba(6,7,8,.04) 66%, transparent 100%); }
body[data-anchor^="m"][data-anchor$="c"] .scene .shade.h{ background:radial-gradient(55% 75% at 50% 50%, rgba(6,7,8,.78), rgba(6,7,8,.30) 60%, transparent 100%); }
body.vignette .scene::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4,5,6,.55) 100%);
}
.scene .grain{
  position:absolute; inset:0; opacity:.10; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* Drawn SVG scenes: vector, so they stay crisp at any screen size. */
.scenesvg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scenesvg .glow{ opacity:.5; animation:breathe 9s var(--ease) infinite alternate; }
body.arrived .scenesvg .glow{ animation:none; opacity:.85; }
body.paused .scenesvg .glow{ animation:none; opacity:.3; }
@keyframes breathe{ from{ opacity:.42; } to{ opacity:.6; } }

/* Drawn "Aperture" scene, used when no image is selected. */
.drawn{ position:absolute; inset:0; }
.drawn .room{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 18% 6%, rgba(190,193,196,.55), transparent 58%),
    linear-gradient(165deg,#7E8285 0%, #64676A 20%, #45484B 45%, #24262A 72%, #0E0F11 100%);
}
.drawn .floor{ position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg, rgba(10,11,12,.15), rgba(8,9,10,.85)); }
.drawn .door{
  position:absolute; right:23%; bottom:34%;
  width:clamp(62px, 7.6vw, 132px); height:clamp(210px, 42vh, 430px);
  background:linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, var(--accent) 100%);
  box-shadow:0 0 90px 26px var(--soft), 0 0 240px 90px var(--soft);
  transition:box-shadow 1.2s var(--ease), background 1.2s var(--ease);
}
.drawn .spill{
  position:absolute; right:9%; bottom:6%; width:52%; height:44%;
  background:radial-gradient(ellipse at 72% 0%, var(--soft), transparent 62%);
  filter:blur(26px); opacity:.55; transform:skewX(-8deg); transition:opacity 1.2s var(--ease);
}
.drawn .fog{ position:absolute; border-radius:50%; filter:blur(46px); pointer-events:none; }
.drawn .f1{ right:14%; bottom:26%; width:46%; height:22%; background:rgba(226,230,232,.20); animation:drift 26s var(--ease) infinite alternate; }
.drawn .f2{ right:30%; bottom:30%; width:30%; height:16%; background:rgba(226,230,232,.14); animation:drift 34s var(--ease) infinite alternate-reverse; }
.drawn .f3{ left:6%;  bottom:30%; width:34%; height:12%; background:rgba(200,204,208,.08); animation:drift 42s var(--ease) infinite alternate; }
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-4%,-2%,0) scale(1.12); } }
.drawn .figure{ position:absolute; right:33%; bottom:33.4%; height:clamp(58px, 11vh, 118px); width:auto; }
.drawn .figure path, .drawn .figure circle{ fill:#0A0A0B; }
.drawn .figure.mirror{
  bottom:auto; top:66.6%; transform:scaleY(-1); opacity:.22; filter:blur(1.4px);
  -webkit-mask-image:linear-gradient(to top, transparent 5%, #000 85%); mask-image:linear-gradient(to top, transparent 5%, #000 85%);
}
.drawn .streak{
  position:absolute; right:26.5%; bottom:0; width:clamp(70px,9vw,150px); height:34%;
  background:linear-gradient(180deg, var(--soft), transparent 78%); filter:blur(18px); opacity:.5;
}
body.arrived .drawn .door{ box-shadow:0 0 140px 60px var(--soft), 0 0 340px 150px var(--soft); }
body.arrived .drawn .spill{ opacity:.9; }
body.paused .drawn .door{ box-shadow:0 0 55px 14px var(--soft), 0 0 150px 50px var(--soft); }
body.paused .drawn .spill{ opacity:.3; }

/* --------------------------------------------------------------------------
   Stage: the copy block, anchored on a 3×3 grid
   -------------------------------------------------------------------------- */
.stage{
  position:relative; z-index:3; height:100dvh; width:100vw;
  display:grid; padding:calc(var(--vgutter) + 3.2rem) var(--gutter) calc(var(--vgutter) + 2.6rem);
}
body[data-anchor^="t"] .stage{ align-content:start; }
body[data-anchor^="m"] .stage{ align-content:center; }
body[data-anchor^="b"] .stage{ align-content:end; }
body[data-anchor$="l"] .stage{ justify-content:start; }
body[data-anchor$="c"] .stage{ justify-content:center; }
body[data-anchor$="r"] .stage{ justify-content:end; }

.copy{ display:grid; gap:0; max-width:min(64ch, 58vw); }
body[data-anchor$="c"] .copy{ max-width:min(80ch, 78vw); text-align:center; justify-items:center; }
body[data-anchor$="r"] .copy{ text-align:right; justify-items:end; }
body[data-anchor$="l"] .copy{ text-align:left; justify-items:start; }

.eyebrow{
  font-size:calc(clamp(.58rem,.8vw,.76rem) * var(--scale)); font-weight:600; letter-spacing:.42em; text-transform:uppercase;
  color:var(--dim); margin:0 0 clamp(.9rem,2vh,1.6rem);
}
.clock{
  display:flex; align-items:flex-start; color:var(--accent); font-family:var(--font-clock);
  font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  font-size:calc(clamp(3.4rem, 12vw, 10.5rem) * var(--scale)); line-height:1;
  text-shadow:0 0 60px var(--soft);
  transition:opacity .7s var(--ease), color 1.2s var(--ease);
}
.unit{ display:flex; flex-direction:column; align-items:center; }
.grp{ display:flex; }
.mark{
  font-family:var(--font-ui); font-size:calc(clamp(.5rem,.66vw,.62rem) * var(--scale)); font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
  margin-top:clamp(.6rem,1.5vh,1.1rem); padding-left:.34em;
}
body.no-units .mark{ display:none; }
.sep{ display:flex; flex-direction:column; justify-content:center; gap:.19em; height:1em; margin:0 .1em; flex:none; }
.sep i{ width:.1em; height:.1em; border-radius:50%; background:currentColor; opacity:.4; }
.digit{ position:relative; width:1ch; height:1em; }
.digit span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.digit .in{ animation:rise .5s var(--ease) both; }
.digit .out{ animation:leave .5s var(--ease) both; }
@keyframes rise{ from{opacity:0; transform:translateY(.28em); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);} }
@keyframes leave{ from{opacity:1; transform:none; filter:blur(0);} to{opacity:0; transform:translateY(-.26em); filter:blur(8px);} }
body.urgent .clock{ animation:pulse 1s var(--ease) infinite alternate; }
@keyframes pulse{ from{ text-shadow:0 0 60px var(--soft); } to{ text-shadow:0 0 90px var(--soft), 0 0 30px var(--soft); } }

.rule{
  width:min(100%, 34rem); height:1px; background:var(--line-2);
  margin:clamp(1.5rem,3.8vh,2.6rem) 0 clamp(1.3rem,3.2vh,2.2rem);
}
body[data-anchor$="c"] .rule{ width:min(60%, 22rem); }
h1.title{
  font-family:var(--font-display); font-weight:400; text-wrap:balance;
  font-size:calc(clamp(1.5rem,3.4vw,3.4rem) * var(--scale)); line-height:1.14; letter-spacing:-.01em;
  margin:0 0 clamp(.8rem,2vh,1.3rem);
}
html[data-font="modern"] h1.title{ font-weight:600; letter-spacing:-.025em; }
.sub{
  font-family:var(--font-display); font-weight:400; text-wrap:pretty;
  font-size:calc(clamp(.9rem,1.45vw,1.5rem) * var(--scale)); line-height:1.42; color:var(--ink-2); margin:0;
}
.meta{
  font-size:calc(clamp(.6rem,.82vw,.78rem) * var(--scale)); font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin:clamp(.9rem,2.2vh,1.5rem) 0 0;
}
.meta b{ color:var(--accent); font-weight:600; }
.tip{
  margin:clamp(1.2rem,3vh,2rem) 0 0; max-width:52ch;
  font-size:calc(clamp(.8rem,1.05vw,1.05rem) * var(--scale)); line-height:1.5; color:var(--ink-2);
  display:flex; gap:.8em; align-items:baseline; opacity:0; transition:opacity .8s var(--ease);
}
.tip.show{ opacity:1; }
.tip::before{ content:""; flex:none; width:.5em; height:.5em; border-radius:50%; background:var(--accent); transform:translateY(-.1em); box-shadow:0 0 14px var(--soft); }
body[data-anchor$="c"] .tip{ justify-content:center; }
.pausechip{
  display:none; margin:clamp(.9rem,2vh,1.4rem) 0 0; color:var(--accent);
  font-size:calc(clamp(.52rem,.72vw,.66rem) * var(--scale)); font-weight:600; letter-spacing:.34em; text-transform:uppercase;
}
body.paused .pausechip{ display:block; }
body.paused .clock{ opacity:.5; }
.starting{
  font-family:var(--font-display); font-size:calc(clamp(1.05rem,1.7vw,1.7rem) * var(--scale));
  color:var(--accent); margin:clamp(.8rem,2vh,1.2rem) 0 0; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .8s var(--ease), max-height .8s var(--ease);
}
body.arrived .starting{ opacity:1; max-height:4em; }
body.arrived.hide-clock .clock, body.arrived.hide-clock .eyebrow{ display:none; }
[contenteditable]:focus{ outline:none; box-shadow:inset 0 -1px 0 var(--accent); }

/* --------------------------------------------------------------------------
   Dial ring layout: clock inside a circle that empties toward zero
   -------------------------------------------------------------------------- */
.timerblock{ display:contents; }
.readout{ display:contents; }
.dialring{ display:none; }
body[data-layout="dial"] .copy{ text-align:center; justify-items:center; max-width:min(84ch, 88vw); }
body[data-layout="dial"] .timerblock{
  display:grid; place-items:center; position:relative;
  width:min(56vh, 72vw, 600px); aspect-ratio:1;
  margin-bottom:clamp(1rem, 3vh, 2rem);
}
body[data-layout="dial"] .dialring{ display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
body[data-layout="dial"] .readout{ display:grid; justify-items:center; gap:clamp(.6rem, 1.6vh, 1rem); }
body[data-layout="dial"] .eyebrow{ margin:0; }
body[data-layout="dial"] .clock{
  font-size:calc(clamp(2.3rem, 7.6vw, 5.4rem) * var(--scale)); font-weight:400; letter-spacing:-.03em;
  color:var(--ink); text-shadow:none;
}
body[data-layout="dial"] .title{ font-size:calc(clamp(1.25rem, 2.5vw, 2.3rem) * var(--scale)); }
body[data-layout="dial"] .rule{ display:none; }
body[data-layout="dial"] .tip{ justify-content:center; }
.dtrack{ fill:none; stroke:var(--line-2); stroke-width:1.25; }
.darc{
  fill:none; stroke:var(--accent); stroke-width:1.75; stroke-linecap:round;
  stroke-dasharray:590.62; filter:drop-shadow(0 0 10px var(--soft));
  transition:stroke-dashoffset 1s linear, stroke .8s var(--ease);
}
.dhead{ fill:var(--accent); filter:drop-shadow(0 0 12px var(--soft)); }
#dialHead{ transform-box:view-box; transform-origin:50% 50%; transition:transform 1s linear, opacity .6s var(--ease); }
body.paused .darc, body.paused .dhead{ opacity:.45; }
body[data-layout="dial"].urgent .clock{ animation:none; }
body[data-layout="dial"].urgent .darc{ animation:arcpulse 1s var(--ease) infinite alternate; }
@keyframes arcpulse{ from{ filter:drop-shadow(0 0 8px var(--soft)); } to{ filter:drop-shadow(0 0 24px var(--soft)); } }

/* --------------------------------------------------------------------------
   Brand + corner info
   -------------------------------------------------------------------------- */
.brand{ position:fixed; z-index:4; display:flex; align-items:center; top:var(--vgutter); left:var(--gutter); transition:opacity .4s var(--ease); }
body[data-logo="tr"] .brand{ left:auto; right:var(--gutter); }
body[data-logo="bl"] .brand{ top:auto; bottom:var(--vgutter); }
body[data-logo="br"] .brand{ top:auto; bottom:var(--vgutter); left:auto; right:var(--gutter); }
body[data-logo="off"] .brand{ display:none; }
.logo{ height:clamp(22px,3.6vh,44px); width:auto; display:block; }
.wordmark{ font-weight:600; font-size:clamp(.7rem,.98vw,.95rem); letter-spacing:.26em; text-transform:uppercase; color:rgba(246,245,242,.84); }

.corner{
  position:fixed; z-index:4; top:var(--vgutter); right:var(--gutter); text-align:right;
  font-size:clamp(.58rem,.78vw,.74rem); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); line-height:1.8;
}
body[data-logo="tr"] .corner{ right:auto; left:var(--gutter); text-align:left; }
.corner b{ color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums; }
body.no-clock .corner{ display:none; }

.progress{ position:fixed; z-index:5; left:0; right:0; top:0; height:3px; background:rgba(255,255,255,.06); }
.progress i{ display:block; height:100%; width:0; background:var(--accent); box-shadow:0 0 12px var(--soft); transition:width 1s linear; }
body.no-progress .progress{ display:none; }

/* --------------------------------------------------------------------------
   Chrome: toolbar + drawer
   -------------------------------------------------------------------------- */
.chrome{ position:fixed; z-index:8; transition:opacity .45s var(--ease); }
body.idle .chrome, body.hide-chrome .chrome{ opacity:0; pointer-events:none; }
body.hide-chrome .brand, body.hide-chrome .corner{ }
body.drawer-open .toolbar{ right:calc(min(21.5rem, 100vw - 1.6rem) + 2rem); }
  .toolbar{ right:clamp(1rem,2.4vw,2.2rem); transition:right .45s var(--ease), opacity .45s var(--ease); bottom:clamp(1rem,2.4vw,2.2rem); display:flex; gap:.45rem; align-items:center; }
.btn{
  font:500 .62rem/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background:rgba(18,19,20,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px; padding:.62rem 1rem; cursor:pointer; white-space:nowrap;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn.go{ background:var(--accent); border-color:var(--accent); color:#0B0B0C; }
.btn.go:hover{ color:#0B0B0C; filter:brightness(1.08); }
.btn.icon{ padding:.62rem .8rem; font-size:.8rem; letter-spacing:0; }
.btn.ghost{ background:transparent; }
.btn.danger:hover{ border-color:#F07272; color:#F07272; }
.btn[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }

.drawer{
  top:clamp(.7rem, 1.6vh, 1.1rem); right:clamp(.7rem, 1.4vw, 1.1rem); bottom:clamp(.7rem, 1.6vh, 1.1rem);
  width:min(21.5rem, calc(100vw - 1.6rem));
  background:rgba(13,14,16,.62); backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.45);
  display:grid; grid-template-rows:auto auto 1fr auto;
  transform:translateX(calc(100% + 2rem)); transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.drawer.open{ transform:none; }
.drawer.peek{ opacity:.06; }
body.idle .drawer.open{ opacity:1; pointer-events:auto; }
.drawer header{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem .6rem; }
.drawer header h2{ margin:0; font:600 .66rem/1 var(--font-ui); letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2); }
.tabs{ display:flex; gap:.2rem; padding:0 1rem; border-bottom:1px solid var(--line); }
.tab{
  flex:1; background:none; border:0; border-bottom:2px solid transparent; color:var(--dim); cursor:pointer;
  font:600 .58rem/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; padding:.75rem .2rem .7rem;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.pane{ overflow-y:auto; padding:1.15rem 1.25rem 1.4rem; display:none; gap:1.1rem; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.pane.active{ display:grid; align-content:start; }
.drawer footer{ padding:.8rem 1.25rem; border-top:1px solid var(--line); }
.drawer footer .note{ margin:0; }

.field{ display:grid; gap:.5rem; }
.field > label, .field > .lbl{ font-size:.55rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:flex; justify-content:space-between; align-items:center; }
.field > label small{ letter-spacing:.1em; text-transform:none; color:var(--faint); font-weight:500; }
.row{ display:flex; gap:.5rem; align-items:center; }
.row > *{ min-width:0; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
input[type="datetime-local"], input[type="number"], input[type="text"], input[type="url"], textarea, select{
  flex:1; width:100%; min-width:0; font:500 .76rem/1.3 var(--font-ui); color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:8px;
  padding:.62rem .72rem; color-scheme:dark; accent-color:var(--accent);
}
textarea{ resize:vertical; min-height:3.2rem; line-height:1.45; }
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
input[type="range"]{ width:100%; accent-color:var(--accent); }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font:500 .6rem/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; padding:.5rem .8rem; cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); background:rgba(255,255,255,.06); }

.lights{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.light{
  width:22px; height:22px; border-radius:50%; padding:0; cursor:pointer; border:1px solid rgba(255,255,255,.22);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.light:hover{ transform:scale(1.14); }
.light[aria-pressed="true"]{ box-shadow:0 0 0 2px #101112, 0 0 0 3.5px #fff; }
.light.custom{ position:relative; overflow:hidden; background:conic-gradient(#f66,#fc6,#6f6,#6cf,#66f,#f6f,#f66); }
.light.custom input{ position:absolute; inset:-50%; width:200%; height:200%; opacity:0; cursor:pointer; }

.anchors{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; width:6.2rem; aspect-ratio:16/10; padding:4px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.03); }
.anchors button{ border:0; border-radius:3px; background:rgba(255,255,255,.08); cursor:pointer; transition:background .25s var(--ease); }
.anchors button:hover{ background:rgba(255,255,255,.2); }
.anchors button[aria-pressed="true"]{ background:var(--accent); }

.bgs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.bgs button{
  position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid var(--line); background:#111 center/cover no-repeat; color:var(--ink);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.bgs button:hover{ transform:translateY(-1px); border-color:var(--line-2); }
.bgs button[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.bgs button span{
  position:absolute; left:0; right:0; bottom:0; padding:.35rem .45rem; text-align:left;
  font:600 .5rem/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
}
.bgs button.drawn-thumb{ background:linear-gradient(165deg,#7E8285, #24262A 72%, #0E0F11); }
.bgs button.drawn-thumb::before{ content:""; position:absolute; right:28%; bottom:34%; width:9%; height:40%; background:var(--accent); box-shadow:0 0 16px 4px var(--soft); }
.bgs button svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.bgs button svg .glow{ animation:none; opacity:.55; }
.bgs button.plain-thumb{ background:#0B0B0C; }
.bgs button.upload-thumb{ border-style:dashed; display:grid; place-items:center; font:600 .52rem/1.4 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:center; }
.bgs button.upload-thumb:hover, .bgs button.upload-thumb.over{ color:var(--accent); border-color:var(--accent); }

.drop{
  border:1px dashed var(--line); border-radius:8px; padding:.7rem; text-align:center;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.drop:hover, .drop.over{ border-color:var(--accent); color:var(--accent); }
.note{ font-size:.58rem; letter-spacing:.08em; color:var(--dim); line-height:1.65; margin:0; }
.note kbd{ font:inherit; color:var(--ink-2); border:1px solid var(--line); border-radius:4px; padding:.05em .35em; }
.toggle{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.5rem 0; border-bottom:1px solid var(--line); cursor:pointer; }
.toggle:last-child{ border-bottom:0; }
.toggle span{ font-size:.68rem; color:var(--ink-2); }
.toggle input{ accent-color:var(--accent); width:1rem; height:1rem; margin:0; }
.profiles{ display:grid; gap:.4rem; }
.profile{ display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.03); }
.profile b{ flex:1; font-size:.7rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile .btn{ padding:.4rem .6rem; font-size:.52rem; }
/* Music panel (Suno embeds) */
.musicpanel{
  right:clamp(.7rem, 1.4vw, 1.1rem); bottom:calc(clamp(1rem, 2.4vw, 2.2rem) + 3.2rem);
  width:min(21.5rem, calc(100vw - 1.6rem));
  max-height:min(36rem, calc(100dvh - 9rem)); overflow-y:auto; scrollbar-width:thin;
  background:rgba(13,14,16,.72); backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.45);
  padding:1rem 1.1rem 1.1rem; display:grid; gap:.8rem; align-content:start;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.musicpanel.open{ opacity:1; pointer-events:auto; transform:none; }
body.idle .musicpanel.open{ opacity:1; pointer-events:auto; }
.musicpanel header{ display:flex; align-items:center; justify-content:space-between; }
.musicpanel h2{ margin:0; font:600 .66rem/1 var(--font-ui); letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2); }
.mchips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.mchips .chip .x{ margin-left:.5em; opacity:.55; }
.mchips .chip .x:hover{ color:#F07272; opacity:1; }
.msongs{ display:grid; gap:2px; max-height:11.5rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.trk{
  display:flex; gap:.55rem; align-items:baseline; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-radius:8px; padding:.42rem .5rem; color:var(--ink-2);
  font:500 .68rem/1.35 var(--font-ui);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.trk:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
.trk:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.trk[aria-current="true"]{ color:var(--accent); }
.trk .idx{ flex:none; width:1.8ch; font-size:.55rem; color:var(--dim); font-variant-numeric:tabular-nums; }
.trk[aria-current="true"] .idx{ color:var(--accent); }
.trk .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mplayer{ display:grid; gap:.55rem; padding-top:.2rem; }
.np{
  font-size:.74rem; font-weight:500; color:var(--ink); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mbar{ position:relative; height:3px; border-radius:999px; background:rgba(255,255,255,.12); cursor:pointer; }
.mbar::after{ content:""; position:absolute; inset:-9px 0; }
.mbar i{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:999px; background:var(--accent); }
.mtimes{
  display:flex; justify-content:space-between; font-size:.52rem; letter-spacing:.14em;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.mtransport{ display:flex; align-items:center; gap:.42rem; }
.tbtn{
  width:2rem; height:2rem; flex:none; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.tbtn:hover{ border-color:var(--accent); color:var(--accent); }
.tbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tbtn svg{ width:12px; height:12px; fill:currentColor; }
.tbtn.main{ width:2.4rem; height:2.4rem; background:var(--accent); border-color:var(--accent); color:#0B0B0C; }
.tbtn.main:hover{ color:#0B0B0C; filter:brightness(1.07); }
#mVol{ margin-left:auto; width:5.2rem; }

.toast{
  position:fixed; z-index:20; left:50%; bottom:clamp(1rem,4vh,2rem); transform:translate(-50%, 20px);
  background:rgba(18,19,20,.85); border:1px solid var(--line-2); color:var(--ink); border-radius:999px;
  padding:.6rem 1.1rem; font-size:.68rem; letter-spacing:.08em; opacity:0; pointer-events:none;
  backdrop-filter:blur(14px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Responsive / motion
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .copy, body[data-anchor$="c"] .copy{ max-width:100%; }
  .drawn .door{ right:8%; } .drawn .figure{ right:20%; } .drawn .streak{ right:11%; }
  .corner{ display:none; }
  .stage{ padding-top:calc(var(--vgutter) + 3.4rem); }
}
@media (max-width:600px){
  .toolbar .btn.text{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}