:root{font-family:Arial,Helvetica,sans-serif;color:#19343b;background:#f3eee2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #25424a35;background:transparent;color:inherit;padding:.8rem 1rem;border-radius:5px;text-align:left;transition:background .15s}button:hover{background:#19343b0e}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #cb654e;outline-offset:3px}button.primary{background:#19343b;color:#fff9eb}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #19343b30;padding:1.4rem 3vw}header a{font-weight:900;font-size:1.25rem;letter-spacing:-.06em;color:inherit;text-decoration:none}header a span{font-weight:400;margin-left:.25rem}header p,.eyebrow{font-size:.65rem;letter-spacing:.17em;font-weight:700}main{min-height:100vh}.intro{padding:2.5rem 3vw 2rem;display:flex;justify-content:space-between;align-items:end}h1{font:clamp(2.7rem,4.5vw,5.8rem)/.96 Georgia,serif;letter-spacing:-.065em;margin:1rem 0 .3rem}h1 em{color:#bd5d46;font-weight:400}.lede{font:1.1rem/1.6 Georgia,serif;color:#607477}.studio{display:grid;grid-template-columns:minmax(190px,1fr) minmax(400px,3.2fr) minmax(200px,1.1fr);gap:2vw;padding:1rem 3vw 3rem}aside{padding-top:1rem}h2{font:1.6rem Georgia,serif;margin:.8rem 0 1.4rem}aside p{font-size:.8rem;line-height:1.6;color:#556c6e}aside button{display:block;width:100%;margin:.5rem 0;font-size:.8rem}label{display:block;font-size:.75rem;margin:1rem 0}input{width:100%;padding:.6rem;border:1px solid #19343b30;background:#fff9ed;color:inherit;border-radius:4px;margin-top:.5rem}input[type=range]{padding:0;accent-color:#bd5d46}.swatches{display:flex;gap:.5rem}.swatches button{width:30px;height:30px;min-width:20px;padding:0;border-radius:50%;border:3px solid transparent}.swatches button[aria-pressed=true]{outline:2px solid #19343b;outline-offset:3px}.rule{border-left:2px solid #bd5d46;padding-left:.8rem;margin:1.5rem 0}.rule b{font:1.2rem Georgia,serif}.canvas-panel{background:#e2e0d3;padding:1.2rem;border-radius:8px;align-self:start}.caption{display:flex;justify-content:space-between;align-items:center}.caption h2{font-size:1.5rem;margin:.5rem 0 1.1rem;overflow-wrap:anywhere}.badge{text-align:right;font-size:.65rem;line-height:1.5}.canvas-panel svg{display:block;width:100%;aspect-ratio:4/3;touch-action:none;box-shadow:0 12px 30px #19343b16;border-radius:4px}.touch{cursor:crosshair}.tether{stroke-dasharray:6 6;animation:flow 2s linear infinite}@keyframes flow{to{stroke-dashoffset:-24}}.stats{display:flex;justify-content:space-between;font-size:.55rem;letter-spacing:.07em;margin:1rem 0}.status{font-size:.85rem;min-height:2rem}.row{display:flex;flex-wrap:wrap;gap:.5rem}.row button{font-size:.75rem}.fine{font-size:.65rem;line-height:1.6;color:#607477}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.source{padding:2rem 3vw;background:#19343b;color:#f3eee2;display:grid;grid-template-columns:1fr 1.4fr;gap:3vw}.source button{border-color:#f3eee260}.source p{font-size:.85rem;line-height:1.6;max-width:38rem}.source textarea{width:100%;min-height:250px;background:#243d43;color:#f3eee2;border:1px solid #f3eee240;padding:1rem;border-radius:5px;font:12px/1.6 monospace;resize:vertical}footer{padding:2rem 3vw}footer p{font-size:.75rem;line-height:1.7;max-width:900px}@media(max-width:1050px){.studio{grid-template-columns:200px minmax(0,1fr)}.studio>aside:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}.lede{display:none}}@media(max-width:650px){header p{display:none}.intro{padding-top:1rem}.studio{display:flex;flex-direction:column}.canvas-panel{order:-1;width:100%}.studio>aside:last-child{display:block}.source{grid-template-columns:1fr}.caption h2{font-size:1.15rem}.stats{font-size:.45rem}h1{font-size:3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.canvas-panel svg{pointer-events:all;cursor:crosshair}.focus-mode .intro,.focus-mode .studio>aside,.focus-mode .source,.focus-mode footer{display:none}.focus-mode .studio{grid-template-columns:1fr;max-width:1200px;margin:auto}.focus-mode .canvas-panel{width:100%;max-height:none}.focus-mode .canvas-panel svg{max-height:75vh}
