:root{color-scheme:dark;font-family:Segoe UI Variable,Avenir Next,Trebuchet MS,sans-serif;--bg: #08111d;--bg-2: #0e1727;--panel: rgba(14, 22, 37, .82);--panel-border: rgba(144, 180, 219, .18);--text: #edf5ff;--muted: #9bb0cb;--accent: #7fd8ff;--accent-2: #ffcb77;--shadow: 0 24px 60px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--text);background:radial-gradient(circle at top left,rgba(127,216,255,.18),transparent 30%),radial-gradient(circle at top right,rgba(255,203,119,.14),transparent 24%),linear-gradient(180deg,#09111d,#040811)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 92%)}button,select,input{font:inherit}#app{width:100%}.shell{width:min(1320px,calc(100vw - 32px));margin:0 auto;padding:24px 0 40px;display:grid;gap:18px}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:24px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);gap:20px;padding:28px;align-items:end}.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--accent)}h1,h2,p{margin:0}h1{font-size:clamp(2.3rem,5vw,4.7rem);line-height:.95;letter-spacing:-.05em}h2{font-size:1.05rem;letter-spacing:-.02em}.lede{margin-top:14px;max-width:68ch;color:var(--muted);line-height:1.6}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.metrics>div{padding:14px 16px;border-radius:18px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.metrics dt{color:var(--muted);font-size:.82rem;margin-bottom:6px}.metrics dd{margin:0;font-size:1.05rem;font-variant-numeric:tabular-nums}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:20px 24px}.controls label{display:grid;gap:10px}.controls span,.controls strong,.caption,.card-header p,.notes p,.notes li{color:var(--muted)}.controls strong{font-size:.92rem;font-weight:600}.controls select,.controls input[type=range]{width:100%}.controls select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--text);background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px}.controls input[type=range]{accent-color:var(--accent)}.canvas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.canvas-card{padding:18px;display:grid;gap:14px}.card-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.card-header p{max-width:28ch;text-align:right;line-height:1.5}canvas{width:100%;aspect-ratio:4 / 3;display:block;border-radius:18px;background:#0a1020;border:1px solid rgba(255,255,255,.08)}.caption{margin:0;font-size:.9rem;line-height:1.5}.notes{padding:20px 24px;display:grid;gap:14px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.notes ul{margin:0;padding-left:18px;display:grid;gap:8px;line-height:1.55}@media(max-width:980px){.hero,.canvas-grid,.controls,.notes{grid-template-columns:1fr}.card-header{flex-direction:column}.card-header p{text-align:left}}@media(max-width:640px){.shell{width:min(100vw - 20px,1320px);padding-top:10px}.hero,.controls,.canvas-card,.notes{padding:16px}.metrics{grid-template-columns:1fr}}