:root{
  --bg:#03060A;
  --bg2:#070C12;
  --glass:rgba(12,18,26,.54);
  --glass-strong:rgba(18,25,34,.72);
  --border:rgba(201,143,74,.26);
  --border-soft:rgba(201,143,74,.12);
  --text:#F0E8D8;
  --muted:#AFA89A;
  --dim:#746E64;
  --bronze:#C98F4A;
  --gold:#E6C27A;
  --teal:#2E7C78;
  --amber:#FFB15C;
  --red:#FF6A3C;
  --shadow:rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
#field{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:grab;background:
  radial-gradient(circle at 72% 38%, rgba(201,143,74,.15), transparent 31%),
  radial-gradient(circle at 30% 72%, rgba(46,124,120,.13), transparent 28%),
  linear-gradient(135deg,#020407,#081018 55%,#05070a);}
#field.dragging{cursor:grabbing}#trail{position:fixed;inset:0;z-index:1;width:100vw;height:100vh;pointer-events:none}.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:screen;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.62"/></svg>')}.vignette{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.42) 100%),linear-gradient(90deg,rgba(0,0,0,.45),transparent 34%,transparent 66%,rgba(0,0,0,.34))}
.brand{position:fixed;top:22px;left:28px;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border:1px solid var(--border-soft);background:linear-gradient(135deg,rgba(10,16,23,.56),rgba(10,16,23,.2));backdrop-filter:blur(16px);border-radius:999px;box-shadow:0 20px 60px var(--shadow)}.brand-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);font-family:"Cormorant Garamond",serif;font-size:24px;color:var(--gold);background:rgba(201,143,74,.09)}.brand-title{font:500 12px/1.1 "IBM Plex Mono",monospace;letter-spacing:.24em;color:var(--gold)}.brand-sub{margin-top:3px;font:400 12px/1 Inter,sans-serif;color:var(--muted)}
.status-panel{position:fixed;right:28px;bottom:88px;z-index:5;width:min(360px,calc(100vw - 56px));padding:20px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(12,18,26,.68),rgba(12,18,26,.34));backdrop-filter:blur(18px);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.42)}.eyebrow{display:flex;align-items:center;gap:9px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.22em;color:var(--amber)}.pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px var(--amber);animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{opacity:.32;transform:scale(.75)}}.status-panel h1{margin:16px 0 5px;font:500 clamp(30px,4vw,48px)/.95 "Cormorant Garamond",serif;color:var(--text);letter-spacing:-.03em}.status-panel p{margin:0 0 16px;color:var(--muted);font-size:14px}.progress{height:1px;background:rgba(240,232,216,.12);overflow:hidden;margin:16px 0}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold),var(--amber));box-shadow:0 0 18px rgba(230,194,122,.7)}.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.meta-grid div{padding:10px;border:1px solid var(--border-soft);background:rgba(255,255,255,.025);border-radius:14px}.meta-grid span{display:block;font:400 9px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}.meta-grid b{display:block;margin-top:6px;font:500 12px/1 "IBM Plex Mono",monospace;color:var(--text)}
.controls{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;display:flex;gap:8px;padding:8px;border:1px solid var(--border-soft);border-radius:999px;background:rgba(12,18,26,.56);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.34)}button{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;padding:10px 14px;border-radius:999px;cursor:pointer;transition:.22s ease}button:hover{color:var(--gold);border-color:var(--border);background:rgba(201,143,74,.08)}button.active{color:var(--bg);background:linear-gradient(135deg,var(--gold),var(--bronze));}
.shape-strip{position:fixed;left:28px;bottom:28px;z-index:5;width:min(460px,calc(100vw - 56px));display:flex;gap:6px;flex-wrap:wrap;opacity:.72}.shape-dot{width:6px;height:6px;border-radius:50%;background:rgba(240,232,216,.26);border:0;padding:0;transition:.2s}.shape-dot:hover{background:var(--gold);transform:scale(1.8)}.shape-dot.current{background:var(--amber);box-shadow:0 0 12px var(--amber);transform:scale(1.5)}
.instructions{position:fixed;top:24px;right:28px;z-index:5;display:flex;gap:18px;color:var(--dim);font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em}.noscript{position:fixed;inset:auto 24px 24px 24px;z-index:10;background:var(--glass-strong);border:1px solid var(--border);border-radius:18px;padding:18px;color:var(--text)}
@media (max-width:900px){.instructions{display:none}.brand{left:14px;top:14px}.status-panel{right:14px;left:14px;bottom:86px;width:auto;padding:16px}.controls{bottom:18px;width:calc(100vw - 28px);justify-content:center}.shape-strip{display:none}button{padding:10px 11px}.meta-grid{grid-template-columns:repeat(3,1fr);gap:6px}.status-panel h1{font-size:34px}}
@media (max-width:520px){.brand-title{letter-spacing:.16em}.brand-sub{font-size:11px}.status-panel{border-radius:18px}.controls{gap:4px}.meta-grid b{font-size:10px}button{font-size:9px;padding:9px 8px}.status-panel p{font-size:12px}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}