:root {
  color-scheme: light;
  --paper: #eee5d3;
  --ink: #20231f;
  --muted: rgba(32,35,31,.56);
  --line: rgba(34,35,30,.15);
  --panel: rgba(250,246,237,.86);
  --accent: #3766de;
  --dock-h: 104px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: 2; opacity: .62; mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(ellipse at 19% 31%, rgba(75,60,38,.07) 0 .45px, transparent .75px 3px), repeating-linear-gradient(84deg, rgba(83,68,44,.025) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 22%, rgba(255,255,255,.6), transparent 58%);
}
body::after { z-index: 8; box-shadow: inset 0 0 130px rgba(79,61,34,.1), inset 0 0 0 1px rgba(54,43,26,.1); }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

#sandbox { position: relative; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; cursor: crosshair; }
#world { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; z-index: 1; }

.topbar {
  position: fixed; z-index: 20; top: max(16px, env(safe-area-inset-top)); left: 20px; right: 20px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 11px; pointer-events: auto; }
.brand > span:last-child { display: grid; gap: 4px; }
.brand strong { font-size: 13px; line-height: 1; letter-spacing: .2em; font-weight: 800; }
.brand small { color: var(--muted); font-size: 8px; letter-spacing: .18em; font-weight: 700; }
.brand-mark { position: relative; display: block; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid rgba(32,35,31,.45); border-radius: 50%; }
.brand-mark::before { content:""; position:absolute; inset:8px; border:1px solid rgba(32,35,31,.16); border-radius:50%; }
.brand-mark i { position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:currentColor; transform-origin:-11px 2.5px; }
.brand-mark i:nth-child(1) { transform:translateX(11px); }
.brand-mark i:nth-child(2) { transform:translateX(11px) rotate(120deg); }
.brand-mark i:nth-child(3) { transform:translateX(11px) rotate(240deg); }

.lab-status {
  position: absolute; left: 50%; transform: translateX(-50%); display:flex; align-items:center; gap:8px;
  height:35px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:rgba(250,246,237,.68); backdrop-filter:blur(14px); color:var(--muted);
}
.lab-status i { width:6px; height:6px; border-radius:50%; background:#4cad68; box-shadow:0 0 0 4px rgba(76,173,104,.12); }
.lab-status span, .lab-status b { font-size:8px; letter-spacing:.12em; }
.lab-status span { color:var(--ink); font-weight:800; }
.lab-status b { font-weight:600; }
.lab-status.paused i { background:#efac2d; box-shadow:0 0 0 4px rgba(239,172,45,.13); }

.top-actions { display:flex; align-items:center; gap:2px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(250,246,237,.82); box-shadow:0 12px 40px rgba(56,44,26,.1); backdrop-filter:blur(18px); pointer-events:auto; }
.round-button, .save-button { height:38px; border:0; border-radius:999px; cursor:pointer; transition:transform .16s, background .16s, opacity .16s; }
.round-button { width:40px; display:grid; place-items:center; background:transparent; color:rgba(32,35,31,.72); }
.round-button:hover { background:rgba(32,35,31,.075); }
.round-button:active, .save-button:active { transform:scale(.92); }
.round-button:disabled { opacity:.24; }
.round-button.active { background:rgba(32,35,31,.1); }
.round-button svg, .save-button svg, #enter-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.round-button span { display:none; }
.sound-on { color:#3766de; }
.save-button { display:flex; align-items:center; gap:7px; padding:0 15px 0 12px; margin:0 2px; border:0; background:var(--ink); color:#faf6ec; }
.save-button span { font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

.color-rail {
  position:fixed; z-index:17; top:50%; left:18px; transform:translateY(-50%); width:78px; padding:12px 9px;
  border:1px solid var(--line); border-radius:25px; background:var(--panel); box-shadow:0 22px 65px rgba(56,44,26,.12); backdrop-filter:blur(18px);
}
.color-rail p { margin:0 0 9px; text-align:center; line-height:1.1; }
.color-rail p strong { display:block; font-size:9px; letter-spacing:.15em; }
.color-rail p span { display:block; margin-top:4px; color:var(--muted); font:italic 10px Georgia,serif; }
.colors { display:grid; gap:4px; }
.color { position:relative; display:grid; place-items:center; width:58px; min-height:51px; padding:6px 3px 4px; border:0; border-radius:16px; background:transparent; cursor:pointer; transition:background .16s, transform .16s; }
.color:hover { background:rgba(32,35,31,.055); }
.color:active { transform:scale(.92); }
.color i { width:25px; height:25px; border-radius:54% 46% 51% 49%; background:var(--c); box-shadow:inset -4px -4px 7px rgba(0,0,0,.1), 0 3px 8px color-mix(in srgb,var(--c) 25%,transparent); transform:rotate(8deg); }
.color span { margin-top:4px; font-size:7px; font-weight:800; letter-spacing:.1em; color:var(--muted); }
.color.active { background:color-mix(in srgb,var(--c) 13%,transparent); }
.color.active::after { content:""; position:absolute; left:-4px; top:13px; width:3px; height:25px; border-radius:3px; background:var(--c); }
.color.active span { color:var(--ink); }

.walter-button { position:fixed; z-index:17; right:22px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:10px; min-width:138px; padding:10px 14px 10px 9px; border:1px solid rgba(32,35,31,.16); border-radius:999px; background:rgba(31,34,30,.9); color:#f9f4e9; box-shadow:0 15px 45px rgba(32,35,31,.18); cursor:pointer; backdrop-filter:blur(15px); transition:transform .18s; }
.walter-button:hover { transform:translateY(-50%) scale(1.04); }
.walter-button:active { transform:translateY(-50%) scale(.96); }
.walter-button > span:last-child { display:grid; gap:2px; text-align:left; }
.walter-button strong { font-size:9px; letter-spacing:.16em; }
.walter-button small { color:rgba(249,244,233,.62); font:italic 10px Georgia,serif; }
.walter-orbit { position:relative; width:34px; height:34px; flex:0 0 auto; border:1px solid rgba(255,255,255,.32); border-radius:50%; animation:orbit-spin 12s linear infinite; }
.walter-orbit::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.walter-orbit i { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; left:50%; top:50%; margin:-2px; transform-origin:-9px 2px; }
.walter-orbit i:nth-child(1){transform:translateX(9px)} .walter-orbit i:nth-child(2){transform:translateX(9px) rotate(120deg)} .walter-orbit i:nth-child(3){transform:translateX(9px) rotate(240deg)}
@keyframes orbit-spin { to { rotate:360deg; } }

.machine-dock {
  position:fixed; z-index:18; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px); height:var(--dock-h); padding:8px 9px 8px 16px; border:1px solid var(--line); border-radius:28px; background:rgba(250,246,237,.9); box-shadow:0 22px 75px rgba(56,44,26,.15); backdrop-filter:blur(22px) saturate(.9);
}
.dock-label { width:128px; flex:0 0 auto; }
.dock-label strong { display:block; font-size:9px; letter-spacing:.16em; }
.dock-label span { display:block; margin-top:5px; color:var(--muted); font:italic 10px/1.25 Georgia,serif; }
.machine-list { display:flex; gap:3px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.machine-list::-webkit-scrollbar { display:none; }
.machine-tool { position:relative; display:flex; align-items:center; gap:7px; height:84px; min-width:82px; padding:8px 10px; border:0; border-radius:20px; background:transparent; cursor:pointer; transition:background .16s, transform .16s; }
.machine-tool:hover { background:rgba(32,35,31,.06); }
.machine-tool:active { transform:scale(.94); }
.machine-tool.active { background:var(--ink); color:#faf6ec; }
.machine-tool > span { display:grid; gap:3px; text-align:left; }
.machine-tool strong { font-size:8px; letter-spacing:.09em; }
.machine-tool small { color:var(--muted); font:italic 9px Georgia,serif; white-space:nowrap; }
.machine-tool.active small { color:rgba(250,246,236,.6); }
.machine-icon { display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; border:1px solid currentColor; border-radius:50%; font-style:normal; font-size:16px; }
.well-icon { color:#335ed2; box-shadow:inset 0 0 0 7px rgba(51,94,210,.12); }
.repel-icon { color:#e74f6d; }
.fan-icon { color:#2aa5b4; }
.vortex-icon { color:#8b55d9; font-size:22px; }
.portal-icon { color:#cf4aaa; }
.prism-icon { color:#efac25; }
.bumper-icon { color:#45a966; }
.erase-icon { color:#74766f; font-size:23px; }
.machine-tool.active .machine-icon { color:#faf6ec; }

.aim-tip { position:fixed; z-index:15; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; gap:5px; text-align:center; pointer-events:none; animation:hint-pulse 2.2s ease-in-out infinite; }
.aim-tip strong { font-size:11px; letter-spacing:.18em; }
.aim-tip span { color:var(--muted); font:italic 12px Georgia,serif; }
.aim-tip.hidden { opacity:0; visibility:hidden; animation:none; transition:opacity .4s, visibility .4s; }
@keyframes hint-pulse { 50% { transform:translate(-50%,-50%) translateY(-5px); opacity:.65; } }

.walter-note { position:fixed; z-index:23; top:80px; left:50%; transform:translate(-50%,-14px); display:flex; align-items:center; gap:9px; max-width:min(460px,calc(100vw - 32px)); padding:9px 14px 9px 9px; border:1px solid var(--line); border-radius:999px; background:rgba(250,246,237,.92); box-shadow:0 12px 35px rgba(56,44,26,.12); opacity:0; pointer-events:none; transition:.3s; }
.walter-note.show { opacity:1; transform:translate(-50%,0); }
.walter-note b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#faf6ec; font:10px Georgia,serif; }
.walter-note p { margin:0; color:rgba(32,35,31,.72); font:italic 11px Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast { position:fixed; z-index:25; left:50%; bottom:calc(var(--dock-h) + 34px); transform:translate(-50%,12px); padding:9px 15px; border-radius:999px; background:rgba(31,34,30,.9); color:#faf6ec; font-size:9px; font-weight:750; letter-spacing:.1em; opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.onboarding { position:fixed; z-index:50; inset:0; display:flex; align-items:center; overflow:hidden; background:#ede4d1; transition:opacity .8s, visibility .8s; }
.onboarding.gone { opacity:0; visibility:hidden; pointer-events:none; }
.onboarding::before { content:""; position:absolute; inset:0; opacity:.52; background-image:repeating-radial-gradient(ellipse at 20% 20%,rgba(76,58,35,.07) 0 .5px,transparent .8px 3px),radial-gradient(circle at 42% 38%,rgba(255,255,255,.65),transparent 50%); }
.welcome-brand { position:absolute; z-index:2; top:30px; left:34px; display:flex; align-items:center; gap:11px; font-size:10px; font-weight:800; letter-spacing:.2em; }
.welcome-copy { position:relative; z-index:3; width:min(620px,52vw); margin-left:9vw; }
.eyebrow { margin:0 0 18px!important; color:#3766de!important; font:800 10px/1 "Avenir Next",sans-serif!important; letter-spacing:.18em; text-transform:uppercase; }
.welcome-copy h1 { margin:0; font:400 clamp(46px,6vw,92px)/.9 Georgia,"Times New Roman",serif; letter-spacing:-.055em; }
.welcome-copy h1 em { color:#3766de; font-weight:400; }
.welcome-copy > p { max-width:510px; margin:24px 0; color:rgba(32,35,31,.65); font:italic clamp(15px,1.5vw,20px)/1.45 Georgia,serif; }
.how-it-works { display:flex; align-items:center; gap:12px; margin:26px 0; }
.how-it-works span { display:flex; align-items:center; gap:7px; font-size:9px; font-weight:750; letter-spacing:.05em; }
.how-it-works b { display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(32,35,31,.25); border-radius:50%; font-size:9px; }
.how-it-works i { color:rgba(32,35,31,.3); font-style:normal; }
#enter-button { display:flex; align-items:center; justify-content:space-between; width:236px; height:57px; padding:0 18px 0 21px; border:0; border-radius:999px; background:var(--ink); color:#faf6ec; cursor:pointer; transition:transform .2s, box-shadow .2s; }
#enter-button:hover { transform:translateY(-2px); box-shadow:0 15px 35px rgba(32,35,31,.2); }
#enter-button span { font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.welcome-copy > small { display:block; margin:12px 0 0 18px; color:rgba(32,35,31,.45); font:italic 10px Georgia,serif; }
.welcome-note { position:absolute; z-index:3; left:34px; bottom:28px; display:flex; align-items:center; gap:9px; color:var(--muted); font:italic 11px Georgia,serif; }
.welcome-note span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--ink); color:#faf6ec; font-size:9px; }
.onboarding-art { position:absolute; z-index:1; right:4vw; top:7vh; width:48vw; height:86vh; }
.onboarding-art::before { content:""; position:absolute; width:clamp(300px,37vw,620px); height:clamp(300px,37vw,620px); right:3%; top:9%; border:1px solid rgba(32,35,31,.12); border-radius:50%; box-shadow:0 0 0 38px rgba(32,35,31,.025),0 0 0 90px rgba(32,35,31,.018); }
.orb { position:absolute; z-index:3; width:clamp(55px,6vw,92px); aspect-ratio:1; border-radius:52% 48% 55% 45%; filter:saturate(1.08); animation:float 5s ease-in-out infinite; }
.orb::after { content:""; position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.48),transparent 35%); }
.orb-a { right:25%; top:18%; background:#3766de; box-shadow:0 20px 50px rgba(55,102,222,.25); }
.orb-b { right:5%; top:51%; background:#ec4f71; box-shadow:0 20px 50px rgba(236,79,113,.25); animation-delay:-1.2s; }
.orb-c { right:45%; top:62%; width:clamp(40px,4vw,68px); background:#f4bb27; box-shadow:0 20px 50px rgba(244,187,39,.25); animation-delay:-2.3s; }
.track { position:absolute; display:block; border:2px dashed rgba(32,35,31,.17); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(25deg); }
.track-a { width:72%; height:50%; right:6%; top:25%; }
.track-b { width:48%; height:34%; right:28%; top:40%; transform:rotate(-34deg); }
.portal-demo { position:absolute; z-index:2; right:19%; bottom:7%; width:78px; height:126px; border:8px solid #8f58db; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.65),0 0 38px rgba(143,88,219,.45),inset 0 0 30px rgba(143,88,219,.4); transform:rotate(20deg); }
@keyframes float { 50% { transform:translateY(-18px) rotate(8deg); } }

@media (max-width: 1150px) {
  .machine-dock { width:calc(100vw - 190px); justify-content:flex-start; }
  .machine-tool { min-width:76px; }
  .machine-tool > span { display:none; }
  .dock-label { width:102px; }
  .walter-button { right:16px; min-width:auto; padding:8px; }
  .walter-button > span:last-child { display:none; }
}

@media (max-width: 700px) {
  :root { --dock-h:78px; }
  .topbar { top:max(9px,env(safe-area-inset-top)); left:10px; right:10px; align-items:flex-start; }
  .brand-mark { width:31px; height:31px; }
  .brand > span:last-child { gap:2px; }
  .brand strong { font-size:10px; letter-spacing:.16em; }
  .brand small { font-size:6px; }
  .lab-status { top:42px; height:25px; padding:0 9px; gap:5px; }
  .lab-status span { font-size:7px; }
  .lab-status b { display:none; }
  .top-actions { padding:3px; gap:0; }
  .round-button { width:31px; height:31px; }
  .round-button svg, .save-button svg { width:15px; height:15px; }
  .top-actions #sound-button, .desktop-only { display:none; }
  .save-button { height:31px; width:31px; padding:0; margin:0; display:grid; place-items:center; }
  .save-button span { display:none; }
  .color-rail { top:76px; left:50%; transform:translateX(-50%); width:auto; padding:4px 6px; border-radius:999px; }
  .color-rail p { display:none; }
  .colors { display:flex; gap:1px; }
  .color { width:45px; min-height:42px; padding:5px 3px; border-radius:999px; }
  .color i { width:25px; height:25px; }
  .color span { display:none; }
  .color.active::after { left:50%; top:auto; bottom:-1px; width:17px; height:2px; transform:translateX(-50%); }
  .walter-button { right:10px; top:auto; bottom:calc(var(--dock-h) + max(24px,env(safe-area-inset-bottom))); transform:none; padding:6px; }
  .walter-button:hover, .walter-button:active { transform:scale(.96); }
  .walter-orbit { width:32px; height:32px; }
  .machine-dock { left:0; bottom:0; transform:none; width:100%; max-width:none; height:calc(var(--dock-h) + env(safe-area-inset-bottom)); padding:7px 6px max(7px,env(safe-area-inset-bottom)); border-width:1px 0 0; border-radius:20px 20px 0 0; gap:4px; }
  .dock-label { display:none; }
  .machine-list { width:100%; gap:2px; padding:0 1px; }
  .machine-dock::after { content:"›"; position:absolute; right:1px; top:17px; display:grid; place-items:center; width:16px; height:40px; border-radius:10px 0 0 10px; background:linear-gradient(90deg,transparent,rgba(250,246,237,.96)); color:rgba(32,35,31,.45); font:20px Georgia,serif; pointer-events:none; }
  .machine-tool { flex:0 0 61px; min-width:61px; height:62px; padding:5px; justify-content:center; border-radius:16px; }
  .machine-tool > span { display:grid; position:absolute; bottom:5px; left:0; right:0; text-align:center; }
  .machine-tool strong { font-size:6px; letter-spacing:.06em; }
  .machine-tool small { display:none; }
  .machine-icon { width:29px; height:29px; margin-bottom:13px; }
  .aim-tip { top:52%; }
  .aim-tip strong { font-size:9px; }
  .aim-tip span { font-size:10px; }
  .toast { bottom:calc(var(--dock-h) + max(24px,env(safe-area-inset-bottom))); max-width:calc(100vw - 92px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .walter-note { top:112px; }
  .walter-note p { font-size:10px; }
  .onboarding { align-items:flex-end; }
  .welcome-brand { top:max(20px,env(safe-area-inset-top)); left:20px; }
  .welcome-copy { width:auto; margin:0 20px calc(66px + env(safe-area-inset-bottom)); }
  .welcome-copy h1 { font-size:clamp(43px,14vw,70px); line-height:.93; }
  .welcome-copy > p { max-width:340px; margin:18px 0; font-size:15px; }
  .how-it-works { gap:7px; margin:18px 0; flex-wrap:wrap; }
  .how-it-works span { font-size:8px; }
  .how-it-works b { width:20px; height:20px; }
  #enter-button { width:100%; height:55px; }
  .welcome-copy > small { text-align:center; margin:10px 0 0; font-size:9px; }
  .welcome-note { display:none; }
  .onboarding-art { right:-5vw; top:5vh; width:72vw; height:48vh; opacity:.72; }
  .onboarding-art::before { width:73vw; height:73vw; right:-10%; top:0; }
  .orb-a { right:28%; top:5%; } .orb-b { right:0; top:50%; } .orb-c { right:55%; top:48%; }
  .portal-demo { width:47px; height:76px; right:15%; bottom:0; border-width:5px; }
}

@media (max-width: 370px) {
  .brand small { display:none; }
  .color { width:41px; }
  .machine-tool { flex-basis:57px; min-width:57px; }
  .how-it-works i { display:none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }