:root{--ink:#1a1a1a;--paper:#f0eee9;--line:#00000024;--accent:#ffe14d;color:var(--ink);background:var(--paper);font:13px/1.4 ui-monospace,Menlo,Consolas,monospace}body{margin:0}#app{grid-template-columns:290px 1fr;height:100vh;display:grid}h1{margin:0 0 -14px;line-height:0}.logo{cursor:default}h2{letter-spacing:1.5px;text-transform:uppercase;color:#888;-webkit-user-select:none;user-select:none;margin:0 0 8px;font:700 13px ui-monospace,monospace}h2.off,h3.off{opacity:.35}h3{letter-spacing:1.5px;text-transform:uppercase;color:#999;-webkit-user-select:none;user-select:none;margin:0 0 4px;font:700 10px ui-monospace,monospace}h2.big{font-size:17px}h2.tight,h3.tight{margin-bottom:2px}h2.sub2,h3.sub2{margin-top:6px}h2.gap,h3.gap{margin-top:12px}#rail{border-right:1px solid var(--line);background:#efefec;flex-direction:column;gap:32px;padding:16px;display:flex;overflow-y:auto}#rail section{flex-direction:column;gap:8px;display:flex}.cta{background:var(--accent);box-shadow:0 3px 0 var(--ink);border-radius:8px;margin-bottom:14px;padding:12px}.cta h2{color:var(--ink);margin-bottom:10px}#rail #text{border-width:2px;border-radius:6px;padding:8px 10px;font-size:16px;font-weight:700}#rail input[type=text],#rail select,#rail input[type=number],#rail input[type=url]{font:inherit;border:1.5px solid var(--ink);color:var(--ink);box-sizing:border-box;background:#fff;border-radius:4px;width:100%;padding:5px 7px}.sizerow{align-items:center;gap:8px;display:flex}.sizerow input{flex:1}.sizerow output{color:#666;white-space:nowrap;font-size:11px}#rail .row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}#rail input[type=color].off{opacity:.3}#rail label{align-items:center;gap:5px;display:inline-flex}#rail details label{gap:8px;margin-top:6px;display:flex}#randomize{margin-top:10px}#rail details label input{flex:1}#rail details{margin-top:16px}#rail summary{cursor:pointer;color:#666;-webkit-user-select:none;user-select:none}#rail label{-webkit-user-select:none;user-select:none}.sub{color:#666;align-items:center;gap:6px;display:flex}.drop{color:#888;text-align:center;cursor:pointer;border:1.5px dashed #999;border-radius:6px;padding:14px}.drop.over{border-color:var(--ink);color:var(--ink);background:#fff}.chips{flex-wrap:wrap;gap:4px;display:flex}.chip{-webkit-user-select:none;user-select:none;font:inherit;color:#333;cursor:pointer;background:#fff;border:1.5px solid #444;border-radius:4px;padding:2px 8px;font-size:11px}.chip.on{background:var(--ink);color:#fff}.chips.off .chip{opacity:.35;cursor:not-allowed}.sub.off{opacity:.35}#stage{background:#f4f4f2;flex-direction:column;min-width:0;display:flex}.dock{border-bottom:1px solid var(--line);flex:none}.dockbar{align-items:center;gap:12px;padding:0 16px 10px;display:flex}.previews{margin:12px 16px 0}.tabs{gap:10px;padding:8px 16px 10px;display:flex;overflow-x:auto}.urlhead{margin:0 0 6px}.tab{cursor:pointer;color:#aaa;width:160px;height:84px;font:inherit;background:#14141c;border:1.5px solid #444;border-radius:6px;flex-direction:column;flex:none;padding:0;font-size:10px;display:flex;overflow:hidden}.tab canvas{object-fit:contain;width:100%;height:60px;margin:0;display:block}.tab .thumb{background:#0a0f0a;justify-content:center;align-items:center;width:100%;height:60px;display:flex;overflow:hidden}.tab pre{color:#5dd77a;white-space:pre;transform-origin:50%;flex:none;height:auto;margin:0;font:10px/10px ui-monospace,Menlo,monospace}.tab span{color:#333;text-align:left;background:#fff;align-items:center;gap:4px;padding:4px;display:flex}.gh-mark{flex:none}.tab.on{outline:3px solid var(--accent)}.tab.on span{font-weight:700}.grow{flex:1}.exports{gap:6px;display:inline-flex}.tgl{border:1.5px solid #444;border-radius:4px;display:inline-flex;overflow:hidden}.tgl button{font:inherit;color:#555;cursor:pointer;background:#fff;border:0;padding:2px 8px;font-size:11px}.tgl button.on{background:var(--ink);color:#fff}.export{font:inherit;border:1.5px solid var(--ink);background:var(--accent);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:700}.context{flex:1;padding:16px;overflow:auto}.slot{display:inline-block}.slot canvas{max-width:100%;height:auto;display:block}.slot pre{white-space:pre;margin:0;font:10px/10px ui-monospace,monospace}.urlbar input{box-sizing:border-box;width:100%;font:inherit;border:1.5px solid #444;border-radius:4px;margin-bottom:10px;padding:6px}.site{background:#fff;border:1.5px solid #444;border-radius:6px;height:70vh;position:relative;overflow:hidden}.site iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.fakepage{pointer-events:none;position:absolute;inset:0}.fakepage .topbar{color:#ccc;pointer-events:auto;background:#14141c;align-items:center;gap:24px;padding:8px 16px;display:flex}.fakepage .slot{width:var(--mw);height:var(--mh);position:relative}.fakepage .slot canvas{width:150%;max-width:none;height:150%;position:absolute;top:-25%;left:-25%}.fakepage .slot pre{transform-origin:0 0;color:#eee;position:absolute;top:0;left:0;transform:translate(-8.333%,-8.333%)scale(.5)}.fakepage .body{color:#9a9a9a;max-width:720px;padding:40px 48px;font-family:system-ui,sans-serif}.fakepage h2{text-transform:none;letter-spacing:0;color:#8a8a8a;margin:0 0 10px;font:700 34px system-ui,sans-serif}.fakepage p{margin:0 0 18px;font-size:16px}.fakepage .btn{color:#888;background:#ddd;border-radius:6px;padding:8px 16px;font-size:14px;display:inline-block}.fakepage .cols{gap:32px;margin-top:40px;font-size:14px;line-height:1.5;display:flex}.fakepage .cols b{color:#8a8a8a}.page404{color:#5dd77a;background:#000;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:60vh;padding:40px;display:flex}.page404 p{margin:0}.page404 a{color:inherit}.page404 .slot canvas{width:var(--fw)}.gh{background:#fff;border:1.5px solid #444;border-radius:6px;position:relative;overflow:hidden}.gh img{width:100%;height:auto;display:block}.gh .slot{justify-content:center;align-items:center;display:flex;position:absolute;top:34.49%;left:5.51%}.gh .slot canvas{object-fit:contain;width:150%;max-width:none;height:150%;position:absolute;top:-25%;left:-25%}.gh .slot pre{color:#111;font-size:8px;line-height:8px}.term{background:#0a0f0a;border-radius:6px;min-height:60vh;overflow:hidden}.termbar{background:#2a2a2a;gap:6px;padding:8px;display:flex}.termbar i{background:#666;border-radius:50%;width:11px;height:11px;display:block}.termbody{color:#5dd77a;padding:16px}.termbody .slot pre{color:#5dd77a}.cursor{animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}[hidden]{display:none!important}.site.framed .topbar{background:0 0}.site.framed .links,.site.framed .body{display:none}.site.framed .topbar{padding:0}.slot.floating{cursor:move;outline-offset:2px;-webkit-user-select:none;user-select:none;touch-action:none;outline:1px dashed #ff4d0099;position:absolute}.slot.floating canvas{width:150%;max-width:none;height:150%;position:absolute;top:-25%;left:-25%}#mobile{background:var(--paper);z-index:10;padding:40px 24px 24px;display:none;position:fixed;inset:0}#mobile h1{margin-bottom:30px}#mobile p{overflow-wrap:anywhere;max-width:100%;margin-top:24px;padding-left:4px;font-size:15px;line-height:1.5}@media (width<=800px),(pointer:coarse) and (width<=1024px){#mobile{display:block}#rail,#stage{display:none}}