@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--acid:#d8fc44;--text:#f3f1e9;--muted:#8a8c86;--rule:#383b35;--mono:'DM Mono',monospace;--sans:'Space Grotesk',sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:#000;color:var(--text);width:100%;height:100%;overflow:hidden;font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input,label{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,input:focus-visible,.upload:focus-visible{outline:2px solid var(--acid);outline-offset:3px}::selection{background:var(--acid);color:#000}
#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:#000}#grain{pointer-events:none;position:fixed;inset:0;opacity:.15;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}
.corner-brand{position:fixed;right:26px;top:22px;color:#e4e9d5;font-size:22px;font-weight:700;letter-spacing:-.08em;mix-blend-mode:screen;pointer-events:none}.corner-brand span{color:var(--acid)}.corner-meta{position:fixed;bottom:24px;right:26px;color:#b4c1aa;pointer-events:none;display:flex;gap:25px;font:10px var(--mono);letter-spacing:.09em}.corner-meta span:nth-child(2){color:#7f817d}
#console{position:fixed;left:18px;top:18px;bottom:18px;width:293px;background:rgba(9,11,10,.93);border:1px solid #393d36;box-shadow:0 15px 55px #0009;backdrop-filter:blur(22px);padding:17px 17px 12px;z-index:5;overflow:auto;scrollbar-width:thin;scrollbar-color:#4a5141 transparent;transition:transform .25s ease,opacity .25s ease}#console.collapsed{transform:translateX(-115%);opacity:0;pointer-events:none}.console-header{display:flex;justify-content:space-between;gap:10px;align-items:start}.mini{font:9px/1.45 var(--mono);color:#949e8c;letter-spacing:.04em}.hide-button{border:1px solid var(--rule);color:var(--text);background:transparent;padding:5px 8px;font:12px var(--mono)}h1{font-size:39px;line-height:.91;letter-spacing:-.09em;margin:20px 0 6px;font-weight:700}h1 span{color:var(--acid);font-style:italic}h1 small{font:9px var(--mono);vertical-align:top;letter-spacing:0;padding-left:5px}.subtitle{font:9px var(--mono);letter-spacing:.09em;color:#b0b9aa}.rule{border-bottom:1px solid var(--rule);margin:17px 0}.section-head{display:flex;justify-content:space-between;gap:8px;font:10px var(--mono);letter-spacing:.035em;margin-bottom:11px}.section-head small{font:9px var(--mono);color:var(--acid)}.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.mode{color:#b6bdb1;border:1px solid #41463c;background:rgba(26,31,25,.6);padding:9px 8px;display:flex;gap:8px;align-items:center;min-height:37px;text-align:left;letter-spacing:-.015em}.mode b{font:9px var(--mono);color:#858e7f;font-weight:400}.mode span{font-size:11px;font-weight:600}.mode:hover{border-color:#afba9a;color:#fff}.mode.active{background:var(--acid);border-color:var(--acid);color:#0a0a07}.mode.active b{color:#38402f}.upload{display:flex;align-items:center;justify-content:center;border:1px solid var(--acid);color:var(--acid);padding:12px;font:11px var(--mono);cursor:pointer;transition:background .2s}.upload:hover{background:var(--acid);color:#111}.filename{font:9px/1.5 var(--mono);color:#a0a59d;margin:9px 0 11px;white-space:normal;overflow-wrap:anywhere}.transport{display:flex;gap:6px;align-items:center}.transport button{border:1px solid #444a3e;background:#161a15;color:#f0f4ed;padding:10px 14px;font:11px var(--mono)}.transport button#play{flex:1;background:var(--acid);color:#111;font-weight:500;border-color:var(--acid)}.transport #time{font:9px var(--mono);color:#8d958c;white-space:nowrap}#seek{width:100%;margin-top:9px;accent-color:var(--acid);height:5px;cursor:pointer}.sliderline{display:flex;justify-content:space-between;margin-top:13px;font:10px var(--mono);color:#aeb8a8}.sliderline output{color:#eef0e8}.config-slider{width:100%;accent-color:var(--acid);cursor:pointer;height:6px;margin:12px 0 2px}.level{height:3px;background:#353933;margin:17px 0 0;overflow:hidden}.level div{width:0;background:var(--acid);height:100%;transition:width .12s linear}.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-foot button{background:transparent;color:var(--acid);border:1px solid #647352;padding:9px 11px;font:10px var(--mono)}.panel-foot span{font:9px/1.55 var(--mono);color:#90958d;text-align:right}.privacy{font:9px/1.5 var(--mono);color:#737971;margin:16px 0 0}#showPanel{position:fixed;left:19px;top:18px;background:var(--acid);border:0;padding:11px 13px;color:#050605;z-index:5;font:10px var(--mono)}#showPanel[hidden]{display:none}#notice{position:fixed;bottom:60px;right:24px;max-width:320px;font:11px/1.4 var(--mono);color:#eff6eb;pointer-events:none;z-index:10}
@media(max-height:780px){#console{padding:14px;top:10px;bottom:10px}.rule{margin:11px 0}h1{font-size:34px;margin-top:12px}.mode{padding:7px 8px;min-height:32px}.filename{margin:7px 0}.privacy{margin-top:10px}}
@media(max-width:600px){#console{left:10px;top:10px;bottom:10px;width:min(272px,calc(100vw - 20px));background:rgba(6,8,7,.94)}.corner-brand{top:20px;right:17px;font-size:18px}.corner-meta{right:17px;bottom:13px;font-size:9px;gap:10px;max-width:45%;text-align:right;flex-wrap:wrap;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#fallback-stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:#000}#stage[hidden]{display:none}
.fullscreen-toggle{position:fixed;right:24px;bottom:60px;z-index:12;padding:10px 13px;border:1px solid #67705b;background:rgba(7,9,7,.68);color:var(--acid);font:10px var(--mono);letter-spacing:.045em;backdrop-filter:blur(12px);transition:background .15s,border-color .15s}
.fullscreen-toggle:hover{background:#d8fc44;color:#080808;border-color:#d8fc44}
body.immersive #console,body.immersive #showPanel,body.immersive .corner-brand,body.immersive .corner-meta{display:none!important}
body.immersive .fullscreen-toggle{bottom:20px;right:20px;opacity:.65}
body.immersive .fullscreen-toggle:hover,body.immersive .fullscreen-toggle:focus-visible{opacity:1}
@media(max-width:600px){.fullscreen-toggle{bottom:54px;right:14px;font-size:9px}}


/* v0.6 — Open Canvas / AI Studio */
.ai-entry{width:100%;margin-top:19px;border:1px solid var(--acid);background:var(--acid);color:#10120b;display:flex;flex-direction:column;align-items:flex-start;padding:12px 13px;text-align:left;gap:3px;transition:filter .16s,transform .16s}
.ai-entry:hover{filter:brightness(1.15);transform:translateY(-1px)}.ai-entry span{font:700 15px var(--sans);letter-spacing:-.035em}.ai-entry small{font:9px var(--mono);letter-spacing:.065em}
.ai-studio{position:fixed;inset:0;z-index:30;display:flex;background:rgba(2,3,2,.47)}.ai-studio[hidden]{display:none}
.ai-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.99) 0%,rgba(0,0,0,.95) 40%,rgba(0,0,0,.15) 78%,rgba(0,0,0,.06) 100%);pointer-events:none}
.ai-editor{position:relative;width:min(570px,100%);height:100%;overflow:auto;padding:25px clamp(22px,4.3vw,65px) 35px;border-right:1px solid rgba(216,252,68,.32);scrollbar-width:thin;scrollbar-color:#434c34 transparent}
.ai-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;font:10px var(--mono);color:#b8c5af;letter-spacing:.05em}.ai-topline button{border:1px solid #444e3b;background:transparent;color:#d4e1ce;padding:10px;font:10px var(--mono);white-space:nowrap}.ai-topline button:hover{border-color:var(--acid);color:var(--acid)}
.ai-kicker{color:var(--acid);font:10px var(--mono);letter-spacing:.1em;margin:48px 0 15px}
.ai-editor h2{font:700 clamp(52px,6vw,96px)/.84 var(--sans);letter-spacing:-.10em;margin:0}.ai-editor h2 em{color:var(--acid);font-weight:700}.ai-intro{max-width:420px;font-size:13px;line-height:1.55;color:#b0bbb0;margin:22px 0 29px}
#aiForm{display:flex;flex-direction:column;gap:9px}.ai-label{font:10px var(--mono);color:var(--acid);letter-spacing:.08em;margin-top:11px}#aiForm textarea{background:rgba(12,16,11,.82);border:1px solid #4d5944;resize:vertical;color:#f1f4ed;padding:12px 13px;min-height:80px;font:13px/1.45 var(--sans);border-radius:0;outline:0}#aiForm textarea:focus{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid)}#aiForm textarea::placeholder{color:#677365}
.ai-examples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 3px}.ai-examples span{font:9px var(--mono);color:#808c7d;width:100%;margin-bottom:2px}.ai-examples button{font:9px var(--mono);background:none;border:1px solid #46523e;padding:7px;color:#b5bfb2}.ai-examples button:hover{color:#111;background:var(--acid);border-color:var(--acid)}
.ai-actions{display:flex;gap:8px;align-items:stretch;margin-top:13px}.ai-actions button{font:11px var(--mono);padding:13px;border:1px solid #637059;color:#d4e0d0;background:#1b2218}.ai-actions #generateAI{background:var(--acid);border-color:var(--acid);color:#111;flex:1;font-weight:700}.ai-actions button:disabled{opacity:.45;cursor:wait}.ai-actions button:hover:not(:disabled){filter:brightness(1.12)}
.ai-message{min-height:35px;color:#adbdaa;font:10px/1.6 var(--mono);margin-top:15px}.ai-message.error{color:#ff8b8d}.ai-message.success{color:var(--acid)}
.ai-archive{border-top:1px solid #384331;margin-top:21px;padding-top:13px}.ai-archive-head{display:flex;justify-content:space-between;color:var(--acid);font:10px var(--mono);letter-spacing:.1em;margin-bottom:12px}#aiSaved{font:10px/1.6 var(--mono);color:#778574}#aiSaved .saved-world{display:flex;gap:5px;align-items:center;border-bottom:1px solid #232c21;padding:6px 0}#aiSaved .saved-world button{border:0;background:transparent;color:#d9e4d1;font:10px var(--mono);padding:7px;text-align:left}#aiSaved .saved-world button:first-child{flex:1}#aiSaved .saved-world button:hover{color:var(--acid)}#aiSaved .saved-world .delete-world{color:#b78d8c}
.ai-privacy{margin-top:16px;font:9px/1.65 var(--mono);color:#758171;max-width:460px}
.ai-right{pointer-events:none;position:absolute;right:5%;top:8%;bottom:9%;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right}.ai-right span{color:#8d9f85;font:10px var(--mono)}.ai-right strong{font:700 clamp(27px,5vw,70px)/.9 var(--sans);letter-spacing:-.07em;color:#e9f3e6;opacity:.92}.ai-right #viewAI{pointer-events:auto;padding:12px 16px;border:1px solid var(--acid);background:var(--acid);color:#10140d;font:11px var(--mono)}.ai-right #viewAI[hidden]{display:none}
@media(max-width:750px){.ai-editor{width:100%;border-right:0;background:rgba(0,0,0,.94);padding:20px 23px 34px}.ai-scrim{background:rgba(0,0,0,.98)}.ai-right{display:none}.ai-kicker{margin-top:34px}.ai-editor h2{font-size:clamp(54px,12vw,75px)}}