:root{font-family:Arial,Helvetica,sans-serif;color:#293c38;background:#eee9df;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button{cursor:pointer;border:1px solid #b8bdb2;border-radius:4px;background:transparent;color:inherit;padding:11px 13px;min-height:44px}button:hover{background:#e2e5d9}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #b95832;outline-offset:4px}header{display:flex;gap:25px;align-items:center;padding:24px 38px;border-bottom:1px solid #bfc5b6}.brand{font:italic 32px Georgia;text-decoration:none;color:inherit;letter-spacing:-3px}.brand span{font:22px Arial;color:#b95832;margin:0 4px}.heading{flex:1}.heading p,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}.heading h1{font-size:18px;font-weight:500;margin:8px 0 0}header button{font-size:12px}header button span{margin-left:22px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:650px}.viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 67%,#f9f4e9,transparent 60%);min-height:650px}.intro{position:absolute;top:36px;left:38px;z-index:1;pointer-events:none}.intro h2{font:38px/1.1 Georgia,serif;margin:15px 0}.intro em{font-size:30px;font-weight:400;color:#57715f}.intro>p:last-child{font-size:12px;line-height:1.7;color:#64726a}.stage{position:absolute;inset:100px 0 55px}.stage canvas{display:block}.stage-label{position:absolute;bottom:125px;font-size:10px;letter-spacing:1.7px}.stage-label.left{left:18%}.stage-label.right{right:18%}i{display:inline-block;border-radius:50%;width:7px;height:7px;margin-right:7px}.orange{background:#ef7c56}.blue{background:#4c96b6}.contact-note{position:absolute;bottom:65px;text-align:center;left:0;right:0;font-size:12px}.contact-note small{display:block;font-size:10px;color:#6e7b70;margin-top:8px}.lamp{display:inline-block;width:7px;height:7px;border-radius:50%;background:#979c90;margin-right:7px}.lamp.on{background:#48845c}.caption{position:absolute;bottom:0;left:0;right:0;padding:18px 35px;border-top:1px solid #c8cbbf;font-size:10px;color:#65766a;display:flex;justify-content:space-between}.caption span{font-size:9px;letter-spacing:1px}aside{padding:25px;background:#e2e7db;border-left:1px solid #bfc5b6}.panel-title{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;margin-bottom:22px}.panel-title span:last-child{font-size:20px}.tabs{display:flex;gap:5px}.tabs button{flex:1;font-size:11px;padding:9px 3px}.tabs .active{background:#314b3f;color:#fff;border-color:#314b3f}.controls{padding-top:22px}label{display:block;font-size:12px}output{float:right;font-variant-numeric:tabular-nums;color:#627568}input[type=range]{display:block;width:100%;margin:12px 0 18px;accent-color:#3a5b46;min-height:20px}.quick{display:flex;gap:8px}.quick button{flex:1;font-size:11px;padding:8px 4px}.select-label{font-size:9px;letter-spacing:1.5px;margin:24px 0 13px}select{display:block;width:100%;margin-top:9px;background:#f0f2e9;border:1px solid #bac4b4;color:#334f3e;border-radius:4px;padding:11px 6px;font-size:11px;min-height:44px}.press{width:100%;background:#c45d3a;color:#fff;border-color:#c45d3a;text-align:left;padding:16px;font-size:14px}.press:hover{background:#a94b2b}.press span{float:right;font-size:20px}.hint{font-size:10px;line-height:1.6;color:#657365}.status{font-size:11px;line-height:1.5;min-height:50px;border-left:2px solid #b7865d;padding-left:10px;margin:18px 0}.history{padding-top:15px;border-top:1px solid #bfc9b6}.history label{font-size:9px;letter-spacing:1px}.export{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.export button{font-size:10px;flex:1;white-space:nowrap;padding:8px}.inspectors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px;padding:32px 38px;border-top:1px solid #bfc5b6}.inspectors h3{font:26px Georgia;margin:12px 0}.inspectors p:last-child{font-size:11px;line-height:1.6;color:#6a786e;max-width:300px}figure{margin:10px 0 0}figure canvas{width:100%;image-rendering:pixelated;border:7px solid #faf7ef;box-shadow:0 3px 10px #24372b10;aspect-ratio:2;display:block}figcaption{font-size:11px;margin-top:13px;display:flex;justify-content:space-between}figcaption span{font-size:8px;letter-spacing:1px;color:#687768}footer{padding:20px 38px;border-top:1px solid #c8cbbf;font-size:10px;color:#6c7c70;display:flex;justify-content:space-between;gap:15px}.gpu-error{margin:210px 40px 0;padding:20px;background:#fff8e9;border:1px solid #c9a76b;font-size:14px}html{scroll-behavior:smooth}@media(min-width:1500px){.viewport{min-height:75vh}.stage{inset:100px 0 55px}.intro h2{font-size:48px}}@media(max-width:850px){header{padding:18px;gap:15px}.heading p{font-size:8px}.heading h1{font-size:15px}header button{font-size:10px;max-width:135px}.workspace{grid-template-columns:1fr}.viewport{min-height:570px}.intro{left:22px;top:25px}.intro h2{font-size:31px}.intro em{font-size:26px}.stage{inset:100px -60px 40px}aside{border-left:0;border-top:1px solid #bbc7b5;padding:24px}.inspectors{padding:25px;grid-template-columns:1fr 1fr;gap:22px}.inspectors>div{grid-column:span 2}.inspectors h3 br{display:none}.caption{padding:16px}.stage-label.left{left:10%}.stage-label.right{right:10%}footer{padding:20px;flex-direction:column}.export button{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
