:root{font-family:Arial,Helvetica,sans-serif;color:#e7e7d9;background:#182c2d;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{border:1px solid #627476;background:#243c3d;color:inherit;padding:.6rem .8rem;cursor:pointer;border-radius:3px}button:hover{background:#385253}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #edb887;outline-offset:3px}button:disabled{opacity:.4;cursor:default}input:not([type=range]):not([type=file]):not([type=checkbox]){width:5rem;background:#142728;color:#eee;border:1px solid #738283;padding:.5rem}input[type=range]{accent-color:#edb887;width:100%}main{min-height:100dvh}header{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 4vw;border-bottom:1px solid #3d5353;font-size:.7rem;letter-spacing:.14em}header a{color:#e8bb90;text-decoration:none}.hero{display:grid;grid-template-columns:1fr 1.6fr;min-height:78vh;padding:4rem 4vw 2rem;gap:1rem;background:radial-gradient(ellipse at 75% 55%,#305457,transparent 60%)}.eyebrow{font-size:.68rem;letter-spacing:.2em;color:#acd0ce}h1{font-family:Georgia,serif;font-size:clamp(3rem,6vw,6.7rem);font-weight:400;line-height:.95;letter-spacing:-.05em;margin:2rem 0}h1 em{color:#efb480;font-weight:400}.intro{font-size:1rem;line-height:1.8;color:#bacbca}.swatches{display:flex;gap:1.5rem;font-size:.7rem;margin-top:2rem;color:#f5ad78}.swatches b+b{color:#85bac4}.viewport{position:relative;min-height:480px}.scene{position:absolute;inset:0 0 85px;min-height:300px}.scene canvas{width:100%;height:100%;display:block}.scene:after{content:attr(data-error);position:absolute;bottom:0;color:#e8bb90}.metric{position:absolute;top:0;right:0;font-size:.8rem;color:#bfd1cf}.metric strong{font-family:Georgia,serif;font-size:2rem;color:#fff}.metric span{display:block;text-align:right;margin-top:.5rem}.view-controls{position:absolute;bottom:0;left:0;right:0;display:flex;gap:2rem;justify-content:center}.view-controls label{max-width:220px;flex:1;font-size:.8rem}.workbench{background:#ede9df;color:#213e40;padding:3rem 4vw}.toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.toolbar h2{width:100%;font:2rem Georgia,serif;margin:0 0 1rem}.workbench button,.workbench select{background:#e1e2d9;color:#203c3d;border-color:#a8b6b0}.workbench button:hover{background:#ccd4cd}.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}.panels article{border-top:2px solid #8b9d95;padding-top:1rem;min-width:0}.panels h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em}.panels p{font-size:.8rem;line-height:1.6;min-height:4em}.panels label{font-size:.8rem;display:block;margin:.7rem 0}.cells,.surface{display:grid;gap:2px;margin:1rem 0;aspect-ratio:1}.cells button{padding:0;border:0;background:#d2d4cc;min-width:0;min-height:0}.cells button.a{background:#c77d4b}.cells button.b{background:#528a95}.surface{touch-action:none;gap:3px}.surface button{padding:0;color:#fff;font-size:.7rem;border:0;min-width:0}.components{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:.4rem}.components button{font-size:.8rem;text-align:left}ol{font-size:.8rem;max-height:130px;overflow:auto}.export{padding:3rem 4vw;max-width:1100px}.export h2{font:2rem Georgia,serif}.export p{color:#b5c6c4;line-height:1.7}.export button{margin:.3rem .4rem .3rem 0}.file{display:block;margin:1.5rem 0}.file input{display:block;margin-top:.7rem;font-size:.8rem}footer{padding:2rem 4vw;border-top:1px solid #48605e;font-size:.8rem;line-height:1.6;color:#b6c8c6}details{max-width:800px}summary{cursor:pointer}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:2rem}.viewport{min-height:450px}.panels{grid-template-columns:1fr}.cells,.surface{max-width:420px}header span{display:none}h1 br{display:none}h1{font-size:4rem}.intro br{display:none}.panels p{min-height:auto}}@media(prefers-reduced-motion:no-preference){.hero h1{animation:arrive .7s ease-out}.hero .intro{animation:arrive 1s ease-out}button{transition:background .15s}}@keyframes arrive{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}