:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(circle at top,#172554,#0f172a 42%,#020617);color:#e2e8f0}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}#root{min-height:100vh}.page{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:48px 0 64px}.hero{margin-bottom:24px}.hero h1,.panel h2,.lead,.hint,.eyebrow{margin:0}.lead{margin-top:12px;max-width:700px;color:#cbd5e1;font-size:1.05rem}.hint{margin-top:10px;color:#94a3b8;font-size:.95rem}.eyebrow{color:#38bdf8;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:24px}.panel{border:1px solid rgba(148,163,184,.2);background:#0f172acc;border-radius:20px;padding:24px;box-shadow:0 24px 80px #02061759;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel__header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}.status-pill{align-self:center;border:1px solid rgba(56,189,248,.3);background:#0ea5e91f;color:#bae6fd;padding:8px 12px;border-radius:999px;font-size:.85rem;white-space:nowrap}.preview{display:grid;place-items:center;min-height:280px;padding:20px;margin-bottom:20px;border-radius:16px;background:linear-gradient(180deg,#0f172a66,#020617cc);border:1px solid rgba(148,163,184,.14)}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:grid;gap:8px}.field--full{grid-column:1 / -1}.field span{color:#cbd5e1;font-size:.92rem}.field input,.field select{width:100%;border-radius:10px;border:1px solid rgba(148,163,184,.25);background:#0f172af2;color:#f8fafc;padding:10px 12px}.field input[type=range]{padding:0}.toggles,.hook-controls{display:grid;gap:12px;margin-top:20px}.toggles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.toggle{display:flex;align-items:center;gap:10px;color:#e2e8f0}.toggle input{width:16px;height:16px}.hook-buttons{display:flex;gap:12px;margin-top:20px}.hook-buttons button{border:1px solid rgba(56,189,248,.3);background:#0ea5e91f;color:#e0f2fe;padding:10px 14px;border-radius:10px;cursor:pointer}.hook-buttons button:disabled{opacity:.45;cursor:not-allowed}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 0}.stats div{border-radius:14px;padding:14px;background:#0f172aa6;border:1px solid rgba(148,163,184,.12)}.stats dt{color:#94a3b8;font-size:.82rem}.stats dd{margin:6px 0 0;color:#f8fafc;font-weight:700}@media (max-width: 900px){.layout{grid-template-columns:1fr}.panel__header{flex-direction:column}}@media (max-width: 640px){.page{width:min(100% - 24px,1200px);padding-top:24px}.control-grid,.stats{grid-template-columns:1fr}.hook-buttons{flex-direction:column}}