:root{color-scheme:dark;font:15px/1.55 system-ui,sans-serif;color:#dddcc9;background:#091113;--gold:#e4c976;--mint:#9bdbc9;--line:#bdc29f30}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 25% 0,#c9a44d15,transparent 60%),radial-gradient(ellipse at 90% 55%,#6ac2b812,transparent 55%);min-height:100vh}main{max-width:1550px;margin:auto;padding:32px clamp(16px,3vw,48px)}header{max-width:950px;margin-bottom:24px}h1,h2{font-family:Georgia,serif;font-weight:500;margin:.35em 0;color:#eee7cd}h1{font-size:clamp(28px,3.2vw,48px)}h2{font-size:23px}p{color:#b6c6c5;margin:.7em 0}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:var(--gold);font-size:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px}.viewport,aside,.explanation article,details{border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#172426bb,#0b1415dd);box-shadow:0 14px 36px #0004,inset 0 1px #fff06;overflow:hidden}.status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);font-size:12px;color:#a4c0ba}.badge{border:1px solid #e4c97666;color:#f0d791;padding:4px 9px;border-radius:20px;background:#d1b4630c}.stage{position:relative;min-height:390px;height:clamp(390px,50vw,600px);background:radial-gradient(ellipse at 50% 45%,#13313766,transparent 67%)}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}canvas:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}.hint{position:absolute;bottom:14px;left:18px;pointer-events:none;font-size:12px;color:#b7c8bd88}#error{position:absolute;inset:10%;place-content:center;background:#201c13ee;padding:22px;color:#ffd48d;white-space:pre-wrap}#error:not([hidden]){display:grid}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);padding:14px;gap:12px;background:#0b111899}.metrics b{display:block;color:var(--mint);font-size:21px;font-weight:600}.metrics span{font-size:11px;color:#aabbb5}.caption{padding:10px 18px;min-height:57px;font-size:13px}.caption.warning{color:#f6c891}aside{padding:20px}aside h2{font-size:21px;margin:0 0 18px}label{display:block;font-size:13px;color:#c3d2cc;margin:14px 0}output{float:right;color:#f0d994}select,button,.load{font:inherit;background:linear-gradient(135deg,#263234,#121a1e);border:1px solid #c5b46e55;border-radius:10px;color:#f2dfac;padding:10px 12px;cursor:pointer}select{width:100%;margin-top:7px}option{background:#152124;color:#eee2bb}input[type=range]{display:block;appearance:none;width:100%;height:5px;background:linear-gradient(90deg,#708b86,#ccb26c);border:1px solid #d4bd7844;border-radius:5px;margin:14px 0 20px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid #f4e3ad;background:#bd9c4b;box-shadow:0 0 10px #e2c57766}.buttons{display:flex;gap:8px}.buttons button{flex:1;font-size:12px}button:hover,.load:hover{border-color:#ebd187;box-shadow:0 0 12px #d8be7422}button:focus-visible,select:focus-visible,.load:focus-within{outline:2px solid var(--gold);outline-offset:3px}.check{display:flex;align-items:center;gap:8px}.check input{accent-color:var(--gold)}.source{border-top:1px solid var(--line);padding-top:14px;margin-top:22px;font-size:12px}.source p{font-size:12px}.source button,.load{font-size:12px;display:inline-block}.load input{width:1px;height:1px;opacity:0;position:absolute}.source b{color:#dacc9a}.explanation{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.explanation article{padding:22px}.explanation h2{font-size:22px}.explanation p{font-size:14px}.symbol{font:italic 31px Georgia,serif;color:var(--gold);text-shadow:0 0 17px #d7bd7155}.explanation article:nth-child(2) .symbol{color:var(--mint)}.explanation article:nth-child(3) .symbol{color:#baadeb}details{padding:17px 22px;font-size:13px}summary{cursor:pointer;color:#e9d797;font-size:14px}code{color:#b6ddd2}footer{font-size:12px;color:#7b9793;margin:22px 0}a{color:#c6ba83}@media(max-width:900px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}aside h2,.source{grid-column:1/-1}.explanation{grid-template-columns:1fr}.stage{height:440px}}@media(max-width:480px){main{padding:18px 12px}.metrics{grid-template-columns:1fr 1fr}aside{display:block}.stage{height:390px}}