:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#dce5e4;background:#101514;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:85px;padding:0 5%;border-bottom:1px solid #29312f;display:flex;align-items:center;justify-content:space-between}.brand{color:#dce5e4;text-decoration:none;font-size:23px;font-weight:750;letter-spacing:4px}.brand span{font:10px monospace;letter-spacing:2px;color:#6f827b;margin-left:26px}.status{font:11px monospace;color:#bdebb2}main{max-width:1500px;margin:auto;padding:40px 5%}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font:10px monospace;letter-spacing:2px;color:#8c9e94}h1{font-size:clamp(28px,3vw,43px);letter-spacing:-1.5px;margin:12px 0}.intro p:not(.eyebrow){font-size:14px;color:#87968f}.tag{border:1px solid #354239;border-radius:20px;padding:9px 13px;font:10px monospace;color:#a8baab}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 275px;border:1px solid #354039;border-radius:12px;overflow:hidden;background:#151c19}.viewport{min-width:0}.canvashead,footer{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:10px monospace;color:#81958a}.canvashead{border-bottom:1px solid #29372e}.canvashead i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c4ec9d;margin-right:8px}.stage{position:relative;aspect-ratio:10/7;background:#111b16}canvas{position:absolute;width:100%;height:100%;inset:0}#overlay{touch-action:none;cursor:crosshair}.hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font:10px monospace;padding:10px 16px;background:#101b16d9;border:1px solid #334338;border-radius:20px;color:#9cad9e}footer{border-top:1px solid #29372e}footer b{color:#c7e5b2;font-weight:400}em{font-style:normal;color:#506256;margin:0 8px}aside{border-left:1px solid #354039;padding:24px}.modes{display:flex;background:#0e1511;border:1px solid #344037;padding:4px;border-radius:7px;margin:18px 0 24px}button{cursor:pointer;border:1px solid #3b4b3d;background:#1d2a21;color:#b7c9bc;border-radius:5px;padding:10px 12px;font:11px inherit}button:hover{border-color:#b7dc95}.modes button{flex:1;border:0;font-size:11px;padding:9px 5px;background:transparent}.modes .active{background:#c6e8a6;color:#172413}.range{display:block;font-size:12px;color:#b9c7be;margin:22px 0}.range output{float:right;font:11px monospace;color:#caeaa9}input[type=range]{display:block;width:100%;accent-color:#caeaa9;margin:16px 0 0}.check{display:flex;gap:10px;align-items:center;font-size:11px;margin:17px 0;color:#a5b6aa}input[type=checkbox]{accent-color:#c6e8a6}.divider{height:1px;background:#334035;margin:26px 0}.buttons{display:flex;gap:8px}.buttons button{flex:1}.reset{width:100%;background:transparent;margin-top:10px}.note{margin-top:25px;padding:15px;background:#1d2820;border-left:2px solid #8bad71}.note span{font:9px monospace;letter-spacing:1px;color:#c1d8aa}.note p{font-size:11px;line-height:1.8;color:#94a98f}.note small{font-size:10px;line-height:1.6;color:#6e856d;display:block}.bottom{display:flex;justify-content:space-between;font:9px monospace;color:#64776a;margin-top:18px;letter-spacing:1px}@media(max-width:850px){main{padding:25px 4%}.workspace{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid #354039}.tag,.brand span{display:none}.bottom{gap:20px;font-size:8px}.stage{aspect-ratio:10/7}.hint{font-size:8px}}

.modes{flex-wrap:wrap;gap:3px}.modes button{min-width:65px}.light-list{display:flex;gap:5px;flex-wrap:wrap;margin:15px 0}.light-list button{flex:1;padding:9px 5px;background:#111915}.light-list button.active{border-color:#d9e6ce;background:#2b372f}.color-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:20px;color:#b9c7be}input[type=color]{width:52px;height:30px;border:1px solid #455348;padding:2px;background:#101713;border-radius:5px;cursor:pointer}.muted{color:#65786c;letter-spacing:0}button:disabled{opacity:.35;cursor:default}.workspace{align-items:start}.viewport{position:sticky;top:0}aside{width:100%}@media(max-width:850px){.viewport{position:static}}
[hidden]{display:none!important}.camera{margin-bottom:14px}