:root{font-family:Arial,sans-serif;color:#222b30;background:#f5f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;padding:36px 4vw 24px}header{display:grid;grid-template-columns:1fr 2fr 1.3fr;align-items:center;gap:24px;border-bottom:1px solid #b9b9af;padding-bottom:30px}.eyebrow,.bar,small{font-size:11px;letter-spacing:.12em}.eyebrow{align-self:start}h1{font-family:Georgia,serif;font-size:clamp(38px,4vw,70px);font-weight:400;line-height:1;margin:0}h1 em{color:#a34a30;font-weight:400}.intro{font-size:16px;line-height:1.7}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:40px;padding-top:30px}.bar{display:flex;justify-content:space-between;padding:0 0 15px}svg{display:block;width:100%;max-height:64vh;box-shadow:0 10px 30px #232b3020;background:#eee9df;overflow:hidden}.readout{display:flex;gap:50px;padding:24px 0}.readout small{display:block}.readout strong{display:block;font-family:Georgia,serif;font-size:34px;font-weight:400;margin-top:6px}.hint,.formula{font-size:12px;line-height:1.7;color:#5d6668}.margins{display:flex;justify-content:space-between;border-block:1px solid #c7c7bd;padding:14px 0;font-size:12px}.margins b{display:block;padding-top:6px}h2{font-size:12px;letter-spacing:.1em;font-weight:500;margin:0 0 20px}button,input,select,textarea{font:inherit}button{background:#faf8f3;border:1px solid #b4b9b3;padding:10px 13px;color:#273134;cursor:pointer;border-radius:3px}button:hover{background:#e5e8de}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #e05b37;outline-offset:3px}.region-list{display:grid;gap:6px;margin-bottom:10px}.region-list button{display:flex;align-items:center;text-align:left;gap:10px}.region-list b{margin-left:auto}.region-list i{width:12px;height:12px}.active{border-color:#263f41;background:#e5e8de}label{display:grid;gap:7px;font-size:12px;margin-top:14px}input{min-width:0;width:100%;border:1px solid #b4b9b3;padding:9px;background:#fffcf5;border-radius:3px}input[type=color]{height:38px;padding:4px}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.mask{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:208px;margin:12px 0}.mask button{aspect-ratio:1;padding:0;border-radius:0}nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}details{padding-top:12px}summary{cursor:pointer;font-size:13px}.desk{border-top:1px solid #b9b9af;margin-top:38px;padding-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.desk p,footer p{font-size:13px;line-height:1.7;max-width:75ch}textarea{width:100%;min-height:180px;font:12px/1.5 monospace;background:#e9e9df;border:1px solid #aeb5af;padding:14px;resize:vertical}footer{margin-top:35px;border-top:1px solid #b9b9af;padding-top:15px}footer small{letter-spacing:0;line-height:1.7;display:block;max-width:90ch}[role=status]{color:#83502f;font-weight:700}.centroid{transition:transform .25s ease}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(max-width:800px){main{padding:24px 20px}header{grid-template-columns:1fr}.workspace,.desk{grid-template-columns:1fr;gap:26px}svg{max-height:none}.intro{margin:0}.readout{gap:24px}.readout strong{font-size:27px}}.focused header,.focused aside,.focused .desk,.focused footer{display:none}.focused .workspace{grid-template-columns:1fr;padding-top:0}.focused .stage{max-width:1150px;width:100%;margin:auto}.focused svg{max-height:72vh}.focused{padding-top:8px}
