:root{--ink:#eef1ff;--muted:#9299b4;--bg:#10131f;--panel:#191d2e;--panel2:#222740;--line:#343b5d;--purple:#8b7cff;--cyan:#51d6d0;--yellow:#ffd166;--red:#ff6b7a;--shadow:0 18px 50px rgba(0,0,0,.32);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{padding-top:calc(58px + env(safe-area-inset-top));font-size:15px}button,input,textarea{font:inherit}.hidden{display:none!important}button{color:inherit}.topbar{position:fixed;z-index:20;left:0;right:0;top:0;height:calc(58px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);display:flex;align-items:center;gap:18px;background:rgba(16,19,31,.96);border-bottom:1px solid var(--line);padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.brand{display:flex;align-items:center;gap:9px;background:none;border:0;font-weight:800;font-size:17px;padding:0;cursor:pointer}.logo{width:30px;height:30px;display:grid;place-items:center;color:var(--bg);background:var(--yellow);box-shadow:4px 4px 0 var(--purple);font-family:monospace;font-size:22px}.topbar nav{display:flex;align-self:stretch;margin:auto}.nav-button{border:0;border-bottom:3px solid transparent;background:none;padding:0 16px;color:var(--muted);font-weight:700;cursor:pointer}.nav-button.active{color:var(--ink);border-color:var(--cyan)}.icon-button{background:none;border:0;font-size:18px;letter-spacing:2px;padding:10px;cursor:pointer}.view{min-height:calc(100vh - 58px)}.hero-view{max-width:1100px;margin:auto;padding:80px 32px;display:flex;align-items:center;justify-content:space-between;gap:70px}.hero-copy{max-width:570px}.eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900}.hero-copy h1,.page-heading h2{font-size:clamp(40px,7vw,78px);line-height:.96;letter-spacing:-.045em;margin:16px 0 22px}.hero-copy h1 em{font-style:normal;color:var(--yellow)}.hero-copy p,.page-heading p{color:var(--muted);font-size:18px;line-height:1.6}.hero-actions,.gallery-actions{display:flex;gap:12px;margin-top:28px}.primary,.secondary,.run-button,.small-button{border:0;border-radius:5px;padding:12px 18px;font-weight:800;cursor:pointer}.primary,.run-button{background:var(--yellow);color:#18151b;box-shadow:3px 3px 0 #c4972e}.secondary,.small-button{background:var(--panel2);border:1px solid var(--line)}.hero-console{width:360px;background:var(--panel);border:1px solid var(--line);padding:18px;box-shadow:12px 12px 0 #080a10;transform:rotate(2deg)}.mini-screen{position:relative;height:210px;background:#080a10;border:8px solid #2c324d;overflow:hidden;color:white;text-align:center;font:24px monospace;padding-top:10px}.pixel-ball{position:absolute;width:12px;height:12px;left:50%;top:45%;background:var(--yellow);box-shadow:0 0 14px var(--yellow)}.pixel-paddle{position:absolute;width:8px;height:50px;top:40%;background:var(--cyan)}.pixel-paddle.left{left:15px}.pixel-paddle.right{right:15px}.hero-console code{display:block;line-height:1.8;color:#d6daf0;padding:14px 4px 0}.hero-console b{color:var(--purple)}.hero-console i{color:var(--cyan);font-style:normal}.project-bar{height:64px;padding:8px max(16px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#151827}.project-bar label{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.14em}.project-bar input{width:min(45vw,300px);border:0;background:transparent;color:var(--ink);font-weight:800;font-size:19px;outline:none}.project-actions{display:flex;gap:8px}.run-button{padding:9px 18px}.run-button span{margin-right:5px}.workspace{height:calc(100vh - 122px - env(safe-area-inset-top));display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(320px,.95fr)}.code-panel,.preview-panel{min-width:0;display:flex;flex-direction:column;background:var(--panel)}.code-panel{border-right:1px solid var(--line)}.panel-heading{height:38px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#20253a;border-bottom:1px solid var(--line);font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--muted)}.editor-wrap{position:relative;display:flex;flex:1;min-height:0;background:#151827}.editor-wrap pre{width:42px;margin:0;padding:16px 9px;text-align:right;background:#111420;color:#59617e;border-right:1px solid #292e47;font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;user-select:none}.editor-wrap textarea{flex:1;resize:none;border:0;outline:0;padding:16px;background:transparent;color:#e8eaff;caret-color:var(--yellow);font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2;white-space:pre;overflow:auto}.quick-keys{height:43px;flex:none;display:flex;overflow-x:auto;border-top:1px solid var(--line);background:#20253a}.quick-keys button{min-width:49px;border:0;border-right:1px solid var(--line);background:transparent;color:#c5cae1;font:14px monospace}.preview-panel{background:#0c0e17}.screen-shell{position:relative;margin:auto;width:min(64vh,74%);aspect-ratio:1/1;border:10px solid #282e47;box-shadow:0 15px 45px #000;background:#000;image-rendering:pixelated;touch-action:none}.screen-shell canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.play-overlay{position:absolute;inset:0;background:rgba(8,10,16,.76);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:var(--muted);font-weight:700}.play-overlay button{width:58px;height:58px;border-radius:50%;border:0;background:var(--yellow);color:#151827;font-size:24px;padding-left:7px}.touch-controls{display:flex;align-items:center;justify-content:space-around;height:132px;flex:none;padding:0 9%;user-select:none;-webkit-user-select:none}.dpad{position:relative;width:112px;height:112px}.dpad button,.action-buttons button{position:absolute;border:0;background:#2d334c;color:#818aa9;touch-action:none}.dpad button{width:38px;height:38px}.dpad .up{left:37px;top:0}.dpad .down{left:37px;bottom:0}.dpad .left{left:0;top:37px}.dpad .right{right:0;top:37px}.dpad i{position:absolute;width:38px;height:38px;left:37px;top:37px;background:#2d334c}.action-buttons{position:relative;width:116px;height:82px}.action-buttons button{width:52px;height:52px;border-radius:50%;font-weight:900;font-size:17px;left:0;bottom:0;background:#53426c;color:#c99cff}.action-buttons .a{left:auto;right:0;top:0;background:#36575e;color:var(--cyan)}.dpad button.pressed,.action-buttons button.pressed{filter:brightness(1.7);transform:scale(.94)}.error-console{margin:0 18px;padding:9px 12px;border-left:3px solid var(--red);background:#301b26;color:#ff9ca6;font:12px/1.4 monospace;max-height:65px;overflow:auto}.page-heading{max-width:1050px;margin:auto;padding:65px 25px 28px}.page-heading h2{font-size:clamp(38px,6vw,62px);margin:12px 0}.page-heading p{max-width:700px;margin-bottom:20px}.page-heading input{width:min(100%,500px);padding:13px 15px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);outline:none}.category-tabs{max-width:1050px;margin:auto;padding:0 25px 18px;display:flex;gap:8px;overflow:auto}.category-tabs button{border:1px solid var(--line);border-radius:99px;background:transparent;padding:7px 13px;color:var(--muted);white-space:nowrap}.category-tabs button.active{background:var(--purple);color:white;border-color:var(--purple)}.lexicon-grid,.gallery-grid{max-width:1050px;margin:auto;padding:0 25px 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}.lex-card,.app-card{background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden}.lex-card header,.app-card .card-copy{padding:16px}.lex-card h3,.app-card h3{margin:0 0 7px;font:800 20px ui-monospace,SFMono-Regular,Menlo,monospace}.lex-card p,.app-card p{margin:0;color:var(--muted);line-height:1.45}.lex-card pre{margin:0;padding:14px;background:#10131f;color:#d8dcf3;min-height:95px;white-space:pre-wrap;font:12px/1.55 monospace}.lex-card footer{display:flex;border-top:1px solid var(--line)}.lex-card footer button{flex:1;border:0;background:transparent;padding:10px;font-weight:800;color:var(--cyan)}.lex-card footer button+button{border-left:1px solid var(--line);color:var(--yellow)}.gallery-heading{display:flex;align-items:end;justify-content:space-between;gap:25px}.app-thumb{height:160px;position:relative;display:grid;place-items:center;background:#080a10;image-rendering:pixelated;overflow:hidden}.app-thumb canvas{width:160px;height:160px;image-rendering:pixelated}.app-card footer{display:flex;padding:0 16px 16px;gap:8px}.app-card footer button{flex:1}.tag{display:inline-block;margin-bottom:10px;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.toast{position:fixed;z-index:50;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);padding:11px 16px;border-radius:5px;background:var(--ink);color:var(--bg);font-weight:800;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.popover{position:fixed;z-index:40;right:10px;top:calc(52px + env(safe-area-inset-top));width:180px;background:var(--panel2);border:1px solid var(--line);box-shadow:var(--shadow);padding:6px}.popover button{width:100%;text-align:left;border:0;background:transparent;padding:10px}
@media(max-width:720px){body{padding-top:calc(52px + env(safe-area-inset-top));font-size:14px}.topbar{height:calc(52px + env(safe-area-inset-top));gap:5px}.brand>span:last-child{display:none}.topbar nav{margin:auto}.nav-button{padding:0 11px;font-size:13px}.hero-view{padding:40px 20px;display:block}.hero-console{width:100%;margin-top:45px}.hero-copy h1{font-size:49px}.project-bar{height:58px}.project-actions .small-button{display:none}.run-button{padding:8px 12px}.workspace{height:calc(100vh - 110px - env(safe-area-inset-top));display:block;overflow-y:auto}.code-panel{height:52%;min-height:290px;border-right:0;border-bottom:1px solid var(--line)}.preview-panel{min-height:550px}.screen-shell{width:min(86vw,360px);margin:20px auto}.touch-controls{height:138px}.page-heading{padding-top:38px}.gallery-heading{display:block}.gallery-actions{margin-bottom:5px}.lexicon-grid,.gallery-grid{grid-template-columns:1fr}.quick-keys{padding-bottom:env(safe-area-inset-bottom);height:calc(43px + env(safe-area-inset-bottom))}}
@supports not (aspect-ratio:1/1){.screen-shell{height:360px}@media(max-width:720px){.screen-shell{height:86vw;max-height:360px}}}