:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#203846;background:#f3efe5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;background:#e9e5d8;color:#203846;border:1px solid #c9c9bb;border-radius:6px;padding:.6rem .75rem}button:hover{background:#d8e5d9}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #bd5d37;outline-offset:2px}main{min-height:100dvh;width:100%}header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.5rem 3vw;border-bottom:1px solid #c7cabc;background:#fbf7ed}.eyebrow{font-size:.65rem;letter-spacing:.18em;color:#64847e;font-weight:800}h1{font-family:Georgia,serif;font-size:2.2rem;margin:.25rem 0}h1 span{display:block;font:400 .8rem system-ui;color:#70817f;margin-top:.3rem}.chip{border:1px solid #98b3a1;border-radius:40px;padding:.6rem;font-size:.65rem;letter-spacing:.1em}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:1.5rem;padding:1.5rem 3vw}.stage{min-width:0}.stagehead{display:flex;justify-content:space-between;gap:1rem}.stagehead h2{font-family:Georgia,serif;margin:.4rem 0;font-size:1.5rem;overflow-wrap:anywhere}.stagehead p{font-size:.75rem}.stagehead strong{font:italic 2rem Georgia;color:#bd6546}.visual{position:relative;background:#102632;border-radius:16px;overflow:hidden;min-height:420px;display:grid;grid-template-columns:1fr 1fr;padding:1.3rem;gap:.5rem;box-shadow:0 15px 40px #20384620}canvas{width:100%;height:380px;display:block}.reference{align-self:center;color:#8eacae;text-align:center}.reference span{font-size:.52rem;letter-spacing:.08em}.reference svg{display:block;width:100%;height:320px;image-rendering:pixelated}.scrubber{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 0}.scrubber label{flex:1;min-width:200px}.scrubber p{flex-basis:100%;font-size:.7rem;margin:0;color:#647971}.scrubber input{width:100%;accent-color:#c16c4a}.route{display:grid;gap:.75rem}.route>h3{margin:.25rem 0}.route article{border-left:4px solid #9bb9a1;background:#fcf9f1;padding:.85rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;border-radius:8px}.route article>button,.route article>p,.route fieldset,.route .buttons{grid-column:1/-1}.route article>button{text-align:left;background:transparent;border:0;display:flex;gap:.7rem;align-items:center}.route small{margin-left:auto;font-size:.68rem}.route p{font-size:.7rem;margin:.2rem}.pass{background:#d3e7cb;color:#385c43}.fail{background:#efd1bd;color:#9d432c}.pass,.fail{padding:.3rem .5rem;border-radius:50%}aside{background:#fffaf0;border:1px solid #dedccd;border-radius:12px;padding:1.15rem;align-self:start}h2{font-family:Georgia,serif}aside h2{margin-top:0}label{display:block;font-size:.72rem;color:#526d6e;margin:.4rem 0}input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{display:block;width:100%;border:1px solid #c8d1c4;background:#fffdf5;border-radius:5px;padding:.5rem;color:#203846;margin-top:.2rem}input[type=color]{display:block;width:100%;height:30px}input[type=checkbox]{accent-color:#507966}.buttons{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}.buttons button{font-size:.69rem}.coords{display:flex;gap:.5rem;align-items:center}.coords>*{flex:1;min-width:0}.paintgrid{display:grid;grid-template-columns:repeat(16,1fr);margin:.8rem 0;border:4px solid #263f49;aspect-ratio:1}.paintgrid button{padding:0;border:0;border-radius:0;aspect-ratio:1}.paintgrid button:hover{outline:1px solid white;z-index:1}.palette{display:flex;gap:.25rem}.palette button{flex:1;height:28px;padding:0}.palette button[aria-pressed=true]{outline:2px solid #b64f2d;outline-offset:2px}aside p,footer p{font-size:.73rem;line-height:1.5}textarea{height:180px;font:12px ui-monospace,monospace}details{margin:.8rem 0}summary{cursor:pointer;font-size:.78rem;font-weight:650}fieldset{border:1px solid #d5ddce;display:flex;gap:.5rem;flex-wrap:wrap}legend{font-size:.7rem}footer{padding:1rem 3vw;border-top:1px solid #c9d1c4}footer [role=status]{font-size:.85rem;background:#dfebd9;padding:.8rem;border-radius:6px}h3{font-size:.9rem}button{transition:background .16s ease}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 310px}.visual{grid-template-columns:1fr}.reference svg{height:200px}canvas{height:300px}}@media(max-width:720px){header{padding:1rem}.chip{display:none}.workspace{grid-template-columns:1fr;padding:1rem}.visual{min-height:0}.route article{grid-template-columns:1fr}.route small{margin:0}h1{font-size:1.9rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.expanded header,.expanded aside{display:none}.expanded .workspace{grid-template-columns:1fr}.expanded .visual{min-height:65dvh}.expanded canvas{height:60dvh}.expanded .reference svg{height:50dvh}.reference svg{animation:reveal .24s ease-out}@keyframes reveal{0%{opacity:.35}to{opacity:1}}label,input,button,summary,p,h2{overflow-wrap:anywhere}