:root{color:#deded9;font-synthesis:none;--surface:#141616;--border:#303333;--muted:#9c9f9b;--amber:#e9a34b;background:#101212;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:86px;padding:0 30px;display:flex}h1{letter-spacing:3px;margin:0;font-size:28px;font-weight:600}button,.file-button,select{color:inherit;cursor:pointer;background:#191c1c;border:1px solid #454948;border-radius:5px;min-height:44px;padding:12px 16px;font:500 14px Arial,sans-serif;transition:background .15s}button:hover,.file-button:hover{background:#2b3030}button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,.file-button:focus-within{outline-offset:3px;outline:2px solid #ffd38e}.accent,button[aria-pressed=true]{background:var(--amber);color:#111411;border-color:#f0b662}.accent:hover,button[aria-pressed=true]:hover{background:#f2b564}main{grid-template-columns:minmax(0,1fr) 320px;gap:26px;padding:26px;display:grid}.production{min-width:0}#viewport{aspect-ratio:16/9;border:1px solid var(--border);background:#0b0d0d;border-radius:5px;width:100%;overflow:hidden}canvas{width:100%;height:100%;display:block}nav{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;display:grid}nav button{min-height:64px;font-size:15px}nav span{margin-right:5px}.hint,.help{color:var(--muted);font-size:12px;line-height:1.6}.hint{margin:16px 0}.help code{overflow-wrap:anywhere;font:11px monospace}aside{flex-direction:column;gap:12px;display:flex}aside>section{border:1px solid var(--border);border-radius:5px;padding:18px}h2{letter-spacing:1px;margin:0 0 16px;font-size:16px;font-weight:500}.notice{text-align:center;border:1px dashed #494d48;border-radius:4px;margin:0 0 12px;padding:15px 8px;font-size:14px;line-height:1.5}.file-button{text-align:center;display:block;position:relative}.file-button input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.toggle{justify-content:space-between;align-items:center;min-height:40px;font-size:14px;display:flex}.toggle input{accent-color:var(--amber);width:18px;height:18px}details{border-top:1px solid var(--border);margin-top:10px;padding-top:12px}summary{cursor:pointer;text-transform:uppercase;letter-spacing:.5px;font-size:12px;line-height:1.5}.slider{grid-template-columns:36px 1fr 36px;align-items:center;gap:12px;margin:20px 0;font-size:14px;display:grid}.slider:last-child{margin-bottom:4px}input[type=range]{width:100%;accent-color:var(--amber);min-height:24px;margin:0}.slider output{text-align:right;color:#babdb7;font-size:12px}dl{margin:0}dl>div{border-top:1px solid var(--border);justify-content:space-between;gap:16px;padding:11px 0;font-size:12px;display:flex}dd{text-align:right;color:#b3bbab;max-width:180px;margin:0}dt{color:#b6b9b4}footer{border-top:1px solid var(--border);color:#b8bcb5;align-items:center;gap:12px;padding:24px 30px;font-size:14px;display:flex}.status-dot{background:#93ac68;border-radius:50%;flex-shrink:0;width:9px;height:9px}.format{letter-spacing:1.5px;color:#80867e;margin-left:auto;font-size:10px}.morph-slider{grid-template-columns:1fr 38px;gap:4px 8px;margin:16px 0;font-size:12px;display:grid}.morph-slider span{overflow-wrap:anywhere;grid-column:1/-1}.morph-slider output{text-align:right;color:var(--muted);align-self:center}#morphs{max-height:320px;overflow:auto}select{width:100%;margin:10px 0;font-size:12px}.button-row{gap:6px;display:flex}.button-row button{flex:1;min-width:0;padding:10px;font-size:12px}.program header,.program aside,.program nav,.program .hint,.program footer{display:none}.program main{padding:0;display:block}.program .production{background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.program #viewport{border:0;border-radius:0;flex-shrink:0;width:min(100vw,177.778vh)}@media (width>=1600px){main{grid-template-columns:minmax(0,1fr) 360px;gap:30px;padding:30px}}@media (width<=1000px){main{grid-template-columns:1fr}aside{grid-template-columns:1fr 1fr;display:grid}header{padding:0 20px}h1{font-size:23px}}@media (width<=560px){header{gap:12px;height:74px;padding:0 14px}h1{letter-spacing:2px;font-size:17px}#program{min-height:40px;padding:10px;font-size:10px}main{gap:12px;padding:14px}nav{gap:6px;margin-top:10px}nav button{min-height:52px;padding:8px;font-size:11px}nav span{margin:0 0 5px;font-size:9px;display:block}aside{display:flex}aside>section{padding:16px}footer{padding:18px 14px;font-size:12px}.format{display:none}.hint{font-size:10px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}