:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e6e8d9;background:#121b19;color-scheme:dark;font-size:14px}*{box-sizing:border-box}body{margin:0}header{height:66px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #344139}.brand{letter-spacing:.18em;font-weight:750;font-size:18px}.brand span{font-size:10px;color:#a3b2a2;font-weight:450;margin-left:15px}.tag{font:11px monospace;letter-spacing:.1em}.tag b{border:1px solid #64745b;border-radius:50%;padding:7px;margin-left:9px}main{max-width:1800px;margin:auto;padding:30px 3vw}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow,.section-label{font:10px monospace;letter-spacing:.13em;color:#a5ba8a}.intro h1{font-size:clamp(32px,3.4vw,55px);font-weight:450;letter-spacing:-.04em;margin:8px 0}.intro h1 span{color:#b6d88c}.intro p{margin:8px 0;color:#aab6a8}.intro-note{font:12px/1.7 monospace;color:#92a28f;text-align:right}.workspace{display:grid;grid-template-columns:220px minmax(300px,1fr) 250px;border:1px solid #3a483e;border-radius:10px;overflow:hidden}aside{padding:23px 17px;background:#19241f}.section-label{margin-bottom:25px}.stage{min-width:0;background:#202d26;border-left:1px solid #3a483e;border-right:1px solid #3a483e}.stage-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 25px}.stage-heading h2{font-weight:450;font-size:22px;letter-spacing:-.02em;margin:6px 0 0}#badge{font:9px monospace;border:1px solid #5f7950;padding:6px 8px;color:#c0d2a4;border-radius:3px}.viewport{position:relative;height:420px;background:linear-gradient(#263c36,#677966 70%,#4d5940 70%);overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-corner{position:absolute;top:17px;left:20px;pointer-events:none;font:9px/1.8 monospace;color:#c5d1b6;letter-spacing:.07em}.scale-label{position:absolute;bottom:14px;left:20px;color:#abff65;font:11px monospace}.toolbar{display:flex;gap:18px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid #3a483e}.toolbar label{flex:1;min-width:150px}.camera{padding:13px 22px;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.camera label{font-size:10px;display:flex;align-items:center;gap:10px}.camera input{width:100%;padding:0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3a483e;padding:20px 22px;gap:10px}.metrics strong{display:block;font:22px monospace;font-weight:400;color:#d4e9b3}.metrics span{display:block;font:8px monospace;letter-spacing:.07em;color:#9bab96;margin-top:7px}label{display:block;font-size:11px;color:#b7c4ad;margin-bottom:12px}input:not([type=range]):not([type=color]),select{display:block;width:100%;padding:9px 8px;margin-top:6px;border:1px solid #475a46;background:#1c2b22;color:#e3e9d7;border-radius:4px;font:12px inherit}input[type=range]{accent-color:#bbd89b;display:block;width:100%;margin-top:8px}input[type=color]{display:block;width:42px;height:29px;border:0;background:none;margin-top:5px;padding:0}button{font:12px inherit;color:#dfe7d4;border:1px solid #526849;background:#25382a;border-radius:4px;padding:10px;text-align:left;cursor:pointer}button:hover{background:#334b32}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d8fca9;outline-offset:2px}.actions{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}.vertical{flex-direction:column}.primary{background:#c3dc9f;color:#20301e;border-color:#c3dc9f;font-weight:700}.primary:hover{background:#d5e9b8}.small{font-size:10px;line-height:1.65;color:#94a38d}#library button{display:block;width:100%;margin:8px 0;padding:13px 10px;border-color:transparent;background:transparent}#library button.active{border-color:#6d8656;background:#2f432b}#library button small{display:block;color:#98b082;font:9px monospace;margin-bottom:7px;letter-spacing:.06em}fieldset{padding:0;border:0;margin:20px 0}fieldset:disabled{opacity:.55}legend{font:10px monospace;color:#a6bb90;margin-bottom:15px}.colors{display:flex;gap:18px}output{display:block;margin:18px 0;color:#cfdfb9;font:12px/1.6 monospace;overflow-wrap:anywhere}details{background:#19241f;border:1px solid #344139;padding:15px;border-radius:5px;color:#aaba9f;font-size:12px;line-height:1.7}summary{cursor:pointer}code{overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;padding:25px 0;font:9px monospace;letter-spacing:.1em;color:#8c9c87}@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(280px,1fr)}.editor{grid-column:1/-1;border-top:1px solid #3a483e}.editor fieldset{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.editor #growth{display:contents}.editor .colors{align-items:start}.viewport{height:430px}}@media(max-width:650px){main{padding:20px 12px}.intro-note{display:none}.workspace{display:block}aside{padding:18px}.section-label{margin-bottom:15px}#library{display:flex;overflow-x:auto;gap:8px}#library button{min-width:160px}.search-label{display:none}.stage{border:0;border-top:1px solid #3a483e}.stage-heading{padding:20px 15px}.stage-heading h2{font-size:19px}#badge{max-width:95px}.viewport{height:370px}.metrics{padding:20px 15px}.metrics strong{font-size:19px}.editor fieldset{grid-template-columns:1fr 1fr}footer span{display:none}}
:root [hidden]{display:none!important}