/* Arc design system, "after hours" only. The one exception is the LCD: a reflective ivory screen
   set into the panel, so content reads like the display on a piece of hardware.
   Layout: phone = header, screen, wheel, pads, links. Desktop = screen | wheel, then pads | links. */
:root{
  --bg:#0e1013; --panel:#121418; --panel2:#15181c; --inset:#1b1e23; --inset2:#20242a;
  --border1:#1e2126; --border2:#272b31; --border3:#30353c; --border4:#3e444c; --divider:#171a1e;
  --text:#e9ecef; --text2:#bcc3ca; --text3:#8b939b; --text4:#7d858e; --text5:#4d545c;
  --accent:oklch(0.83 0.11 172); --accent-hover:oklch(0.89 0.1 172);
  --chip-bg:oklch(0.26 0.04 172); --chip-bd:oklch(0.4 0.06 172); --chip-fg:oklch(0.83 0.11 172);
  --soft-bg:oklch(0.83 0.11 172 / .08); --soft-bd:oklch(0.83 0.11 172 / .28);
  --accent-contrast:#06120f;
  --good-fg:oklch(0.83 0.11 172);
  --eL0:.48; --eLd:.2; --eC0:.06; --eCd:.12; --eFL:.93; --eFC:.07;
  --brand-sc:#ff5500; --brand-yt:#ff0000; --brand-sp:#1ed760; --brand-ig:#e1306c;
  --aur1:oklch(0.5 0.1 150 / .30); --aur2:oklch(0.52 0.09 205 / .26); --aur3:oklch(0.6 0.1 172 / .2);
  /* LCD */
  --lcd:#d8d1b5; --lcd-lo:#c6bf9f; --ink:#1d2030; --ink-dim:rgba(29,32,48,.58); --ink-faint:rgba(29,32,48,.22);
  --f-ui:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.7,.18,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-ui);font-size:12.5px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body,button,select,option,.btn,.pad{text-transform:lowercase}
input,textarea,pre,.addr,.l-addr,.keyname{text-transform:none}
.wrap{max-width:1120px;margin:0 auto;padding-block:14px 28px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:5px}
*{scrollbar-width:thin;scrollbar-color:var(--border3) transparent}
.lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:lowercase;color:var(--text4);font-weight:500;font-variant-numeric:tabular-nums}
.en{--t:calc((var(--e, 5) - 1) / 9);--eh:calc(225 - 185 * var(--t));
  --ec:oklch(calc(var(--eL0) + var(--eLd) * var(--t)) calc(var(--eC0) + var(--eCd) * var(--t)) var(--eh));
  --efg:oklch(var(--eFL) var(--eFC) var(--eh))}
.echip{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:3px;background:var(--ec);color:var(--efg);font-family:var(--f-mono);font-size:8.5px;font-weight:700;flex:none;line-height:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:lowercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;text-decoration:none}
.btn.acc{background:var(--accent);color:var(--accent-contrast);border:1px solid var(--accent)}
.btn.acc:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--text2);border:1px solid var(--border3)}
.btn.ghost:hover{border-color:var(--border4);color:var(--text)}

/* header */
.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:2px 0 14px}
.photo{width:56px;height:56px;border-radius:10px;border:1px solid var(--border2);overflow:hidden;position:relative;
  background:radial-gradient(80% 80% at 30% 20%,oklch(0.42 0.07 172 / .7),transparent 70%),radial-gradient(70% 70% at 90% 100%,oklch(0.45 0.09 60 / .45),transparent 70%),var(--inset);
  display:grid;place-items:end start;padding:6px}
.photo span{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.12em;color:var(--text3)}
.who{min-width:0}
.who h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.who p{margin:3px 0 0;color:var(--text2);font-size:12.5px}
.who .lbl{display:block;margin-top:3px}
.top .btn{height:34px;padding:0 14px}

/* instrument */
.device{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);grid-template-areas:"screen" "wheel" "pads" "links"}
.panel{background:var(--panel);border:1px solid var(--border1);border-radius:10px}

/* LCD screen */
.screen{grid-area:screen;padding:8px;display:flex;flex-direction:column}
.lcd{position:relative;flex:1;border-radius:6px;background:linear-gradient(180deg,var(--lcd),var(--lcd-lo));color:var(--ink);overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25);display:flex;flex-direction:column;height:318px}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);z-index:2}
.lcd-bar{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--ink);color:var(--lcd);padding:5px 10px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:lowercase;font-variant-numeric:tabular-nums;flex:none}
.lcd-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:11px 12px 10px;font-family:var(--f-mono);font-size:11.5px;line-height:1.55;min-height:0;scrollbar-color:var(--ink-dim) transparent}
.lcd-foot{flex:none;height:44px;border-top:1px solid var(--ink-faint);position:relative}
.lcd-foot canvas{display:block;width:100%;height:100%}
.l-tag{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:lowercase;border:1px solid var(--ink);padding:1px 6px;border-radius:2px;margin-right:4px}
.l-tag.solid{background:var(--ink);color:var(--lcd)}
.l-title{font-weight:800;font-size:19px;line-height:1.15;margin:8px 0 8px;letter-spacing:-.02em;text-wrap:balance}
.l-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-top:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint);padding:6px 0;margin-bottom:9px;font-variant-numeric:tabular-nums}
.l-meta div{min-width:0}
.l-meta small{display:block;font-size:8.5px;letter-spacing:.12em;color:var(--ink-dim)}
.l-meta strong{font-size:12.5px;font-weight:700;white-space:nowrap}
.l-ebar{display:flex;gap:1px;margin-top:4px}
.l-ebar i{width:5px;height:8px;background:var(--ink-faint)}
.l-ebar i.on{background:var(--ink)}
.l-story{font-family:var(--f-ui);font-size:13px;line-height:1.5;margin:0 0 10px}
.l-play{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.l-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:lowercase;
  background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:3px;padding:5px 9px;cursor:pointer;text-decoration:none;line-height:1.2}
.l-btn:hover,.l-btn.solid{background:var(--ink);color:var(--lcd)}
.l-btn.solid:hover{background:transparent;color:var(--ink)}
.l-btn svg{width:10px;height:10px}
.l-time{font-size:10.5px;font-variant-numeric:tabular-nums}
.l-demo{font-size:8.5px;letter-spacing:.12em;color:var(--ink-dim)}
.l-links{display:flex;flex-wrap:wrap;gap:6px}
.l-sec{font-size:8.5px;letter-spacing:.14em;color:var(--ink-dim);text-transform:lowercase;margin:12px 0 5px}
.l-sec:first-child{margin-top:0}
.l-h{font-weight:800;font-size:16px;line-height:1.2;margin:6px 0 8px;letter-spacing:-.01em;text-wrap:balance}
.l-prose{font-family:var(--f-ui);font-size:13px;line-height:1.55;max-width:62ch}
.l-prose p{margin:0 0 8px}
.l-facts{display:grid;grid-template-columns:72px minmax(0,1fr);gap:2px 10px;margin:8px 0 2px;font-size:11px}
.l-facts dt{color:var(--ink-dim);letter-spacing:.1em;text-transform:lowercase;font-size:9px;padding-top:2px}
.l-facts dd{margin:0}
.l-rows{list-style:none;margin:0;padding:0}
.l-rows li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:8px;padding:5px 0;border-bottom:1px solid var(--ink-faint);font-size:11px;align-items:baseline;font-variant-numeric:tabular-nums}
.l-rows li b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-rows li span{color:var(--ink-dim);white-space:nowrap}
.l-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.l-list button,.l-list a{width:100%;text-align:left;font:inherit;color:var(--ink);background:rgba(255,255,255,.18);border:1px solid rgba(29,32,48,.35);border-radius:4px;padding:7px 9px;cursor:pointer;display:grid;gap:1px;text-decoration:none}
.l-list button:hover,.l-list a:hover{background:rgba(255,255,255,.35)}
.l-list b{font-size:12.5px}
.l-list small{font-size:9px;letter-spacing:.1em;color:var(--ink-dim);text-transform:lowercase}
.l-back{font:inherit;font-size:9.5px;letter-spacing:.1em;text-transform:lowercase;background:none;border:0;color:var(--ink);padding:0;cursor:pointer;text-decoration:underline}
.l-addr{font-size:14px;font-weight:700;user-select:all;-webkit-user-select:all;display:inline-block;margin:2px 0 8px}
.toast{position:absolute;top:30px;right:8px;z-index:3;background:var(--ink);color:var(--lcd);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;padding:4px 8px;border-radius:3px;opacity:0;transition:opacity .15s;pointer-events:none}
.toast.on{opacity:1}

/* wheel */
.wheelzone{grid-area:wheel;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 10px 12px}
.aurora{position:absolute;left:0;right:0;top:0;height:60%;pointer-events:none;opacity:.0;transition:opacity .55s var(--ease);
  background:radial-gradient(55% 90% at 15% 0%,var(--aur1),transparent 70%),radial-gradient(50% 80% at 85% 0%,var(--aur2),transparent 70%),radial-gradient(70% 70% at 50% -10%,var(--aur3),transparent 72%);
  background-size:180% 140%;animation:aurora 26s ease-in-out infinite alternate;animation-play-state:paused;
  -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent);mask-image:linear-gradient(180deg,#000 20%,transparent)}
body.playing .aurora{opacity:1;animation-play-state:running}
@keyframes aurora{0%{background-position:0% 0%}50%{background-position:70% 20%}100%{background-position:100% 0%}}
.wheelzone::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--soft-bd),transparent);opacity:0;transition:opacity .55s}
body.playing .wheelzone::before{opacity:1}
.seg-ctl{position:relative;display:inline-flex;border:1px solid var(--border2);border-radius:5px;overflow:hidden;z-index:1}
.seg-ctl button{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:lowercase;background:transparent;color:var(--text3);border:0;border-right:1px solid var(--border2);height:28px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg-ctl button:last-child{border-right:0}
.seg-ctl button:hover{color:var(--text)}
.seg-ctl button[aria-pressed="true"]{background:var(--inset2);color:var(--text)}
.seg-ctl small{color:var(--text4);font-size:9px}
.wheel{position:relative;width:min(100%,360px);aspect-ratio:1;max-width:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;border-radius:50%}
.wheel.drag{cursor:grabbing}
.wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring{transition:opacity .3s var(--ease);will-change:transform}
.ring.dim{opacity:.45}
.bezel{fill:var(--panel2);stroke:var(--border2)}
.tick{fill:var(--text5)}
.seg{fill:color-mix(in oklch,var(--ec) 20%,var(--inset));stroke:var(--panel);stroke-width:2;transition:fill .3s var(--ease)}
.seg.sel{fill:var(--accent)}
.ring.dim .seg.sel{fill:color-mix(in oklch,var(--ec) 20%,var(--inset));stroke:var(--accent);stroke-width:1.5}
.seg-label{font-family:var(--f-mono);font-size:10px;font-weight:600;fill:var(--text3);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.seg-label.sel{fill:var(--accent-contrast)}
.ring.dim .seg-label.sel{fill:var(--accent)}
.glyph{fill:var(--ec)}
.glyph.set{fill:none;stroke:var(--ec);stroke-width:2.4}
.glyph.sel{fill:var(--accent-contrast)}
.glyph.set.sel{fill:none;stroke:var(--accent-contrast)}
.ring.dim .glyph.sel{fill:var(--ec)}
.ring.dim .glyph.set.sel{fill:none;stroke:var(--ec)}
.core{fill:var(--bg);stroke:var(--border2)}
.needle{fill:var(--accent)}
.prog-bg{fill:none;stroke:var(--border2);stroke-width:2}
.prog{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;transform:rotate(-90deg)}
.hub{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;
  background:var(--panel);border:1px solid var(--border3);color:var(--text);display:grid;place-items:center;align-content:center;gap:4px;padding:0;transition:border-color .3s,background .3s}
.hub:hover{border-color:var(--border4)}
.hub[aria-pressed="true"]{border-color:var(--accent);background:var(--soft-bg)}
.hub:active{transform:translate(-50%,-50%) scale(.98)}
.hub svg{position:static;width:16px;height:16px}
.hub .act{font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--text2)}
.hub .idx{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;color:var(--text4)}
.legend{position:relative;display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.lg-t{background:var(--text3)}
.lg-s{border:2px solid var(--text3)}
.lg-e{width:42px;height:8px;border-radius:2px;background:linear-gradient(90deg,oklch(.48 .06 225),oklch(.58 .12 132),oklch(.68 .18 40))}
.hint{position:absolute;left:50%;top:13%;transform:translateX(-50%);background:var(--inset2);border:1px solid var(--border3);color:var(--text);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;line-height:1.45;padding:6px 9px;border-radius:6px;pointer-events:none;transition:opacity .55s var(--ease);text-align:center;width:max-content;max-width:86%;z-index:3}
.hint b{color:var(--accent);font-weight:600}
.hint.gone{opacity:0}

/* pads */
.pads{grid-area:pads;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(58px,auto);gap:6px;align-content:start}
.links{grid-area:links;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start}
.pad{position:relative;border-radius:8px;border:1px solid var(--border2);background:var(--panel2);color:var(--text2);cursor:pointer;text-decoration:none;
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:lowercase;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;padding:8px 9px;min-height:54px;text-align:left;min-width:0;
  transition:border-color .15s,background .3s var(--ease),color .15s,transform .08s;-webkit-tap-highlight-color:transparent}
.pad:hover{border-color:var(--border4);color:var(--text)}
.pad small{font-family:var(--f-mono);font-size:9px;font-weight:400;letter-spacing:.04em;text-transform:lowercase;color:var(--text4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pad .row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;min-width:0}
.pad .row > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad .dot{width:6px;height:6px;border-radius:50%;background:var(--border3);transition:background .15s;flex:none}
.pad .brand{width:8px;height:8px;border-radius:2px;flex:none}
.pad.lit,.pad:active{transform:translateY(1px);border-color:var(--soft-bd);background:var(--inset)}
.pad.on{background:var(--chip-bg);border-color:var(--chip-bd);color:var(--chip-fg)}
.pad.on .dot{background:var(--accent)}
.book{grid-column:3 / span 2;grid-row:1 / span 2;background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-size:12px;letter-spacing:.14em;padding:10px 11px;animation:breathe 2.6s ease-in-out infinite}
.book:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast)}
.book small{color:var(--accent-contrast);opacity:.75;font-size:9.5px}
.book .curve{width:100%;height:30px;display:block;overflow:visible}
.book .curve path{fill:none;stroke:var(--accent-contrast);stroke-width:1.6;stroke-linecap:round;opacity:.8;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--ease) .4s forwards}
.book.lit,.book:active{background:var(--accent-hover);border-color:var(--accent-hover)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 var(--soft-bd)}50%{box-shadow:0 0 0 5px var(--soft-bg),0 0 22px 2px var(--soft-bd)}}
@keyframes draw{to{stroke-dashoffset:0}}
.foot{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between}

@media (min-width:880px){
  .wrap{padding-block:22px 32px}
  .photo{width:72px;height:72px}
  .who h1{font-size:22px}
  .device{gap:12px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"screen wheel" "pads links"}
  .lcd{height:auto;min-height:440px}
  .wheel{width:min(100%,400px)}
  .pads{grid-auto-rows:minmax(62px,auto)}
  .links .pad{min-height:62px}
}

/* booking */
.bk{position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;background:var(--bg)}
.bk-in{max-width:680px;margin:0 auto;padding-block:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 40px);
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--divider)}
.bk h2{font-size:15px;font-weight:600;margin:4px 0 0;text-wrap:balance}
.bk-lede{color:var(--text3);margin:4px 0 0;max-width:58ch}
fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
legend{display:flex;gap:10px;align-items:baseline;padding:0;margin-bottom:10px;font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:lowercase;color:var(--text2)}
legend em{font-style:normal;color:var(--text4);font-weight:500}
legend small{color:var(--text5);font-weight:400;letter-spacing:.08em}
.moods{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-bottom:4px;scrollbar-width:none}
.moods::-webkit-scrollbar{display:none}
.mood-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.mdots{display:flex;gap:4px}
.mdots i{width:4px;height:4px;border-radius:2px;background:var(--border3);transition:width .3s var(--ease),background .3s}
.mdots i.on{width:14px;background:var(--accent)}
.mood{position:relative;display:flex;flex-direction:column;flex:0 0 150px;scroll-snap-align:start;cursor:pointer;border-radius:10px;overflow:hidden;border:1px solid var(--border2);background:var(--panel2);transition:border-color .15s}
.mood:hover{border-color:var(--border4)}
.mood input{position:absolute;opacity:0;width:1px;height:1px}
.mood .art{display:block;height:68px;max-width:100%;position:relative;
  background:radial-gradient(70% 90% at 25% 15%,color-mix(in oklch,var(--ec) 75%,transparent),transparent 70%),radial-gradient(60% 80% at 90% 100%,color-mix(in oklch,var(--ec) 40%,transparent),transparent 70%),var(--inset)}
.mood .art svg{position:absolute;left:8px;right:8px;bottom:8px;width:calc(100% - 16px);height:45%;overflow:visible}
.mood .art path{fill:none;stroke:var(--efg);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
.mood .cap{display:flex;flex-direction:column;gap:4px;padding:8px 10px 10px;flex:1}
.mood .feel{font-size:11px;line-height:1.35;color:var(--text2);flex:1}
.mood b{font-size:12.5px;font-weight:600;line-height:1.25}
.mood .r{display:flex;align-items:center;gap:6px}
.mood .tick{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:4px;background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .15s,transform .3s var(--ease)}
.mood .tick svg{width:11px;height:11px}
.mood:has(input:checked){border-color:var(--accent)}
.mood:has(input:checked) .tick{opacity:1;transform:none}
.mood:has(input:focus-visible){outline:1px solid var(--accent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips label{position:relative;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;background:var(--inset);color:var(--text2);border:1px solid transparent;border-radius:999px;padding:5px 11px;cursor:pointer;transition:background .15s,color .15s}
.chips label:hover{color:var(--text)}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label:has(input:checked){background:var(--chip-bg);border-color:var(--chip-bd);color:var(--chip-fg)}
.chips label:has(input:focus-visible){outline:1px solid var(--accent);outline-offset:2px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:560px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:grid;gap:5px;min-width:0;align-content:start}
.field > span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--text4);text-transform:lowercase}
.field > span i{font-style:normal;color:var(--accent)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:6px 10px;min-height:34px;width:100%;min-width:0;transition:border-color .15s}
@media (min-width:700px){.field input,.field select,.field textarea{font-size:12.5px;min-height:30px}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:76px;resize:vertical}
.field input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--accent);min-height:24px}
.rangeout{font-family:var(--f-mono);color:var(--text);font-size:11px}
.stack{display:grid;gap:12px}
.submit{width:100%;height:36px;font-size:10.5px}
.err{font-family:var(--f-mono);font-size:10px;color:oklch(0.72 0.15 25);min-height:1.2em;margin:6px 0 0}
.brief pre{white-space:pre-wrap;word-break:break-word;background:var(--panel);border:1px solid var(--border1);color:var(--text);font-family:var(--f-mono);font-size:11px;line-height:1.6;border-radius:10px;padding:14px;margin:0 0 10px;user-select:text;-webkit-user-select:text;font-variant-numeric:tabular-nums}
.brief .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.addr{font-family:var(--f-mono);font-size:12px;background:var(--inset);border:1px solid var(--border2);padding:5px 9px;border-radius:5px;user-select:all;-webkit-user-select:all}
.status{font-family:var(--f-mono);font-size:10px;color:var(--good-fg);min-height:1.2em}
.note{color:var(--text3);max-width:60ch;margin:0 0 8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .book .curve path{stroke-dashoffset:0}
  .book{box-shadow:0 0 0 3px var(--soft-bd)}
}

/* ===================== production additions ===================== */
html,body{min-height:100%}
/* phone: fixed-height LCD so the wheel never jumps between records; desktop stretches to the wheel */
.lcd{flex:none;height:364px}
@media (min-width:880px){.lcd{flex:1;height:auto}}
.who .lbl{text-wrap:balance}
img.photo{display:block;object-fit:cover;padding:0;background:var(--inset)}
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.l-share{margin-left:auto}
.l-rows li b a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.l-prose a{color:inherit}

/* LCD bar beat LED */
.bar-r{display:inline-flex;align-items:center;gap:6px;min-width:0}
.bar-r > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);flex:none;box-shadow:inset 0 0 0 1px rgba(216,209,181,.25);transition:background .06s}
body.playing .led{background:rgba(216,209,181,.35)}
.led.on{background:var(--accent)!important;box-shadow:0 0 6px var(--accent)}

/* ----- beat-reactive (--beat 0..1 is set on .device every frame while playing) ----- */
.device{--beat:0}
body.playing .aurora{transform:scale(calc(1 + var(--beat) * .07));filter:brightness(calc(1 + var(--beat) * .9));transform-origin:50% 0}
.halo{fill:var(--accent);opacity:0;transition:opacity .25s}
body.playing .halo.on{opacity:calc(.12 + var(--beat) * .55);transition:none}
.needle{transform-origin:50% 0;transform-box:fill-box}
body.playing .needle{transform:scale(calc(1 + var(--beat) * .22))}
body.playing .hub[aria-pressed="true"]{box-shadow:0 0 calc(4px + var(--beat) * 30px) calc(var(--beat) * 4px) var(--soft-bd),inset 0 0 calc(var(--beat) * 18px) var(--soft-bg)}
body.playing .prog{stroke-width:calc(2.4px + var(--beat) * 2.2px)}

/* ----- boot-up intro ----- */
.sweep{position:absolute;left:0;right:0;top:0;height:38%;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.28) 70%,rgba(255,255,255,.55) 92%,transparent)}
.lcd.power{animation:lcdOn .62s steps(1,end) both}
.lcd.power .sweep{animation:sweep .9s var(--ease) .18s both}
.lcd.power .lcd-foot{opacity:0;animation:fadeIn .4s ease 1.3s forwards}
@keyframes lcdOn{0%{filter:brightness(.18) contrast(1.4)}12%{filter:brightness(.9)}18%{filter:brightness(.3)}30%{filter:brightness(1.12)}38%{filter:brightness(.7)}52%,100%{filter:none}}
@keyframes sweep{0%{opacity:.9;transform:translateY(-100%)}100%{opacity:0;transform:translateY(280%)}}
@keyframes fadeIn{to{opacity:1}}
.boot-scr{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px;font-size:11.5px;letter-spacing:.04em}
.boot-l div{min-height:1.55em}
.boot-l b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.boot-l span{color:var(--ink-dim)}
.boot-l em{font-style:normal}
.boot-cur{display:inline-block;width:7px;height:12px;background:var(--ink);animation:blink .5s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
body.booting .pads .pad,body.booting .links .pad{opacity:0;transform:translateY(6px);animation:padIn .5s var(--ease) forwards}
body.booting .pads .pad:nth-child(1){animation-delay:1.05s}
body.booting .pads .pad:nth-child(2){animation-delay:1.1s}
body.booting .pads .pad:nth-child(3){animation-delay:1.15s}
body.booting .pads .pad:nth-child(4){animation-delay:1.2s}
body.booting .pads .pad:nth-child(5){animation-delay:1.0s}
body.booting .links .pad{animation-delay:1.3s}
@keyframes padIn{to{opacity:1;transform:none}}
body.booting .hub{animation:hubIn .7s var(--ease) .5s both}
@keyframes hubIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}100%{opacity:1;transform:translate(-50%,-50%)}}

@media (prefers-reduced-motion:reduce){
  body.playing .aurora,body.playing .needle{transform:none;filter:none}
  body.playing .halo.on{opacity:.25}
}

/* faded "coming soon" pads */
.pad.soon{opacity:.36;cursor:default;pointer-events:none;filter:saturate(.4)}
/* set preview credit on the LCD */
.l-prev{margin:0 0 10px;font-size:11px;line-height:1.45;border-left:2px solid var(--ink);padding-left:8px}
.l-prev small{display:block;font-size:8.5px;letter-spacing:.14em;color:var(--ink-dim)}
.l-prev b{font-weight:700}
.l-prev span{color:var(--ink-dim)}

/* ----- booking wizard: desktop shows every step, phone (.bk.wiz) shows one at a time ----- */
.wiz-head,#wizBack,#wizNext,.wiz-only{display:none}
.wiz-btns{display:flex;gap:8px}
.wiz-btns .submit{flex:1}
.bk.wiz form{display:flex;flex-direction:column;min-height:calc(100dvh - 150px)}
.bk.wiz .wiz-head{display:block;position:sticky;top:0;z-index:3;background:var(--bg);padding:8px 0 14px;margin-bottom:4px}
.wiz-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}
.wiz-meta .lbl:last-child{color:var(--text2)}
.wiz-bar{height:3px;border-radius:2px;background:var(--border2);overflow:hidden}
.wiz-bar i{display:block;height:100%;width:25%;background:var(--accent);border-radius:2px;transition:width .4s var(--ease)}
.bk.wiz .step{display:none;margin-bottom:12px}
.bk.wiz .step.cur{display:block;animation:stepIn .32s var(--ease)}
.bk.wiz .step.cur.back{animation-name:stepBack}
.bk.wiz .step legend{font-size:12px;margin-bottom:14px}
.bk.wiz .step legend:focus{outline:none}
@keyframes stepIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.bk.wiz .wiz-only{display:inline}
.bk.wiz .wiz-nav{margin-top:auto;position:sticky;bottom:0;z-index:3;padding:18px 0 calc(env(safe-area-inset-bottom,0px) + 10px);
  background:linear-gradient(180deg,transparent,var(--bg) 16px)}
.bk.wiz .wiz-nav .err{margin:0 0 8px}
.bk.wiz #wizBack,.bk.wiz #wizNext,.bk.wiz.last .submit{display:inline-flex;height:42px;font-size:11px}
.bk.wiz #wizNext{flex:1}
.bk.wiz .submit,.bk.wiz.last #wizNext,.bk.wiz.first #wizBack{display:none}
/* vibe step: every vibe visible at once instead of a swipe carousel */
.bk.wiz .moods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-right:0;padding-right:0}
.bk.wiz .mood{flex:none}
.bk.wiz .mood .art{height:46px}
.bk.wiz .mood-foot{display:none}
@media (prefers-reduced-motion:reduce){.bk.wiz .step.cur{animation:none}}
.bk.wiz .bk-lede{display:none}
.bk.wiz .bk-head{padding-bottom:8px;margin-bottom:10px}

/* footer heart: a deeper green than the book me block */
:root{--heart:oklch(0.66 0.14 165)}
.heart{color:var(--heart);font-family:system-ui,-apple-system,sans-serif;font-size:11px;line-height:1;font-variant-emoji:text;vertical-align:-1px}
/* phone: no dead space under the footer, just the home-indicator inset */
@media (max-width:879px){
  .wrap{padding-bottom:max(12px, env(safe-area-inset-bottom, 0px))}
  .foot{margin-top:12px}
}