:root { --ink:#111d22; --muted:#637174; --line:rgba(17,29,34,.13); --paper:#f6f7f1; --card:#fff; --accent:#326fd1; }
*{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(135deg,rgba(50,111,209,.14),transparent 40%),var(--paper)}
button,a,input{font:inherit}.shell{width:min(1460px,calc(100% - 28px));margin:0 auto;padding:22px 0 34px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px}.brand{display:inline-flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-weight:850}.brand img{width:42px;height:42px}.actions{display:flex;gap:8px}.actions button{min-height:40px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:850;padding:0 14px;cursor:pointer}.actions button+button{background:#202c31}.layout{display:grid;grid-template-columns:minmax(0,1fr)390px;gap:18px}.stage-panel,.control-panel{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.82);box-shadow:0 22px 58px rgba(24,36,34,.1)}.stage-panel{padding:18px}.intro p{margin:0 0 8px;color:var(--accent);font-size:.78rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.intro h1{margin:0 0 18px;font-size:clamp(2.5rem,5vw,5rem);line-height:.92;letter-spacing:0}canvas{display:block;width:100%;height:620px;border:1px solid var(--line);border-radius:8px;background:#eef4f7}.control-panel{padding:18px}.readouts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.readouts article,.controls,.notes{border:1px solid var(--line);border-radius:8px;background:#fff}.readouts article{min-height:92px;padding:14px}.readouts span,.controls span{display:block;color:var(--muted);font-size:.74rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em}.readouts strong{display:block;margin-top:10px;font-size:1.15rem}.controls{display:grid;gap:15px;margin-top:12px;padding:15px}.controls label{display:grid;gap:8px}.controls input{width:100%;accent-color:var(--accent)}.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.control-row b{font-size:.95rem}.notes{margin-top:12px;padding:16px}.notes h2{margin:0 0 8px;font-size:1.15rem}.notes p{margin:0;color:var(--muted);line-height:1.55}@media(max-width:980px){.layout{grid-template-columns:1fr}.control-panel{order:-1}canvas{height:480px}}@media(max-width:640px){.topbar{align-items:start;flex-direction:column}.shell{width:min(100% - 20px,1460px)}.readouts{grid-template-columns:1fr}}