:root{color-scheme:light;--paper:#f4f1e9;--ink:#172c35;--muted:#617078;--line:#d9ddd6;--accent:#176653;--mint:#8de6c5}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}header,main,footer{max-width:1400px;margin:auto}header{padding:24px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{font-weight:800;letter-spacing:.12em}.brand span{font-weight:400;letter-spacing:0;color:var(--muted);margin-left:12px}.edition,.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700}.edition{color:var(--muted)}main{padding:0 40px}.intro{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:38px 0 30px}.eyebrow{text-transform:uppercase;color:var(--accent);margin:0 0 16px}h1{font-size:clamp(36px,4.4vw,64px);font-weight:500;letter-spacing:-.06em;line-height:1.05;margin:0 0 18px}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro p:not(.eyebrow){color:var(--muted);margin:0;line-height:1.6}.formula{font:italic 28px Georgia,serif;white-space:nowrap;padding-right:20px}.formula span{display:block;font:12px system-ui;color:var(--muted);margin-top:14px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 288px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fbfaf6}.stage{background:#101c25;position:relative;min-height:520px;height:clamp(460px,57vh,680px);overflow:hidden}.stage-top,.stage-bottom{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;color:#a0b3bf;font-size:11px;letter-spacing:.08em;z-index:1}.stage-top{top:22px}.stage-top span:first-child{color:var(--mint)}.stage-bottom{bottom:20px;letter-spacing:0;font-size:12px}.stage-bottom span:first-child{max-width:85%}canvas{display:block;width:100%;height:100%;touch-action:none}canvas.drawing{cursor:crosshair}aside{padding:26px 24px;display:flex;flex-direction:column;gap:24px}.control-section+.control-section{padding-top:24px;border-top:1px solid var(--line)}button{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:transparent;border:1px solid #ccd3cd;border-radius:8px;padding:10px 12px;cursor:pointer;min-height:40px}button:hover{background:#e7eee6}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #cb8856;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.presets button[aria-pressed="true"]{background:#e2eee5;border-color:#7eaa94;color:var(--accent)}.wide{width:100%}.secondary{border-style:dashed}.small{font-size:12px;color:var(--muted);line-height:1.6;margin:12px 0 0}label{display:flex;justify-content:space-between;font-size:13px;align-items:center}output{font-weight:700;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent);margin:14px 0 5px;cursor:pointer}.range-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin:0 0 24px}.toggles{margin:18px 0;display:grid;gap:12px}.toggles label{justify-content:flex-start;gap:8px}.toggles input{accent-color:var(--accent);width:16px;height:16px;margin:0}.actions{display:flex;gap:8px}.primary{background:var(--accent);color:white;border-color:var(--accent);flex:1}.primary:hover{background:#124f41}#status{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.explanation{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:32px;padding:32px 0}.explanation h2{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:0;max-width:240px}.explanation p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}footer{border-top:1px solid var(--line);padding:20px 40px;display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--muted)}
@media(max-width:800px){header{padding:20px}.edition,.formula{display:none}main{padding:0 16px}.intro{padding:28px 4px}.studio{grid-template-columns:1fr}.stage{height:52vh;min-height:330px;max-height:560px}aside{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px}.control-section+.control-section{border-top:0;padding-top:0}#status{grid-column:1/-1}.explanation{grid-template-columns:1fr;gap:14px;padding:26px 4px}.explanation h2{max-width:none}footer{padding:20px;flex-wrap:wrap}.brand span{font-size:12px}.stage-top,.stage-bottom{left:16px;right:16px}}
@media(max-width:460px){aside{grid-template-columns:1fr}.control-section+.control-section{border-top:1px solid var(--line);padding-top:20px}.stage-bottom{font-size:10px}.intro .eyebrow{font-size:9px}}