:root{--bg-primary: #16161e;--bg-secondary: #1a1a24;--bg-tertiary: #22222e;--bg-elevated: #282836;--text-primary: #e8e4dc;--text-secondary: #a8a29e;--text-muted: #6b6662;--accent: #e8956a;--accent-hover: #f0a880;--accent-glow: rgba(232, 149, 106, .12);--accent-secondary: #d4785a;--success: #7ac495;--error: #e87a94;--warning: #e8b85a;--border: #2e2e3a;--border-subtle: #252530;--surface: #12121a;--font-display: "Fraunces", Georgia, serif;--font-body: "Lexend", -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary)}.playground{display:grid;grid-template-rows:auto 1fr;height:100vh}.header{display:flex;align-items:center;justify-content:space-between;padding:10px var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}.logo{display:flex;align-items:center;gap:10px}.logo-icon{width:28px;height:28px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--bg-primary)}.logo-text{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.logo-tag{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.header-controls{display:flex;align-items:center;gap:10px}.header-controls select{padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:13px;cursor:pointer;min-width:150px;transition:border-color .15s}.header-controls select:hover{border-color:var(--text-muted)}.header-controls select:focus{outline:none;border-color:var(--accent)}.help-btn{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;transition:all .15s}.help-btn:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.main{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.editor-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-subtle);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);min-height:40px}.panel-title{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.toolbar{display:flex;align-items:center;gap:6px}.btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-body);font-size:12px;cursor:pointer;transition:all .15s ease}.btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--text-muted)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg-primary);font-weight:500}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-danger{background:transparent;border-color:var(--border);color:var(--text-muted)}.btn-danger:hover{border-color:var(--error);color:var(--error);background:#e87a9414}#editor{flex:1;overflow:auto}#editor .cm-editor{height:100%}.editor-footer{display:flex;align-items:center;justify-content:space-between;padding:6px var(--space-md);background:var(--bg-secondary);border-top:1px solid var(--border-subtle)}.preview-panel{display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;background:var(--surface);overflow:hidden;padding:var(--space-lg)}#canvas{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 24px #0000004d,0 0 0 1px #ffffff08;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transition:box-shadow .2s ease;outline:none;cursor:crosshair}#canvas:focus{box-shadow:0 4px 24px #0000004d,0 0 0 2px var(--accent)}#canvas.success-glow{box-shadow:0 4px 24px #0000004d,0 0 0 1px #7ac4954d}#canvas.error-glow{box-shadow:0 4px 24px #0000004d,0 0 0 1px #e87a9466}.console-panel{height:140px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;background:var(--bg-secondary)}#console-output{flex:1;overflow-y:auto;padding:10px var(--space-md);font-family:var(--font-mono);font-size:12px;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word}.console-log{color:var(--text-secondary);padding:2px 0;word-break:break-word}.console-warning{padding:8px 10px;margin:4px 0;background:#e8b85a14;border-radius:var(--radius-sm);border:1px solid rgba(232,184,90,.2);color:var(--text-primary);white-space:pre-wrap}.console-error{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:8px 10px;margin:4px 0;background:#e87a9414;border-radius:var(--radius-sm);border:1px solid rgba(232,122,148,.2)}.error-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:var(--error);color:var(--bg-primary);border-radius:50%;font-size:10px;font-weight:700;flex-shrink:0}.error-text{color:var(--error);flex:1;min-width:0}.error-hint{width:100%;color:var(--text-muted);font-size:11px;margin-top:2px;padding-left:24px}.toggle-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);cursor:pointer;transition:color .15s}.toggle-label:hover{color:var(--text-secondary)}.toggle-label input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}@media(max-width:900px){.main{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.editor-panel{border-right:none;border-bottom:1px solid var(--border)}.header{flex-wrap:wrap;gap:12px}.btn{padding:12px 16px;font-size:15px;min-height:44px}.toolbar{gap:6px;flex-wrap:wrap}.header-controls select{padding:12px 14px;font-size:15px;min-height:44px}}@media(min-width:768px)and (max-width:900px)and (orientation:landscape){.main{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.editor-panel{border-right:1px solid var(--border);border-bottom:none}.console-panel{max-height:25vh}}@media(max-width:480px){.header{padding:8px 12px}.logo-text{font-size:16px}.logo-tag{display:none}.panel-header{padding:6px 12px}.panel-title{font-size:11px}.main{grid-template-rows:45% 55%}.btn{padding:10px 12px;font-size:13px;min-height:44px}.toolbar{gap:4px}.header-controls select{padding:10px 12px;font-size:14px;min-width:120px}.canvas-container{padding:10px}}@media(max-width:380px){.header{padding:6px 8px;gap:8px}.logo{gap:8px}.logo-icon{width:28px;height:28px;font-size:14px}.logo-text{font-size:14px}.header-controls{gap:6px;flex-wrap:wrap}.header-controls select{padding:8px 10px;font-size:13px;min-width:100px;flex:1}.btn{padding:8px 10px;font-size:12px}.main{grid-template-rows:40% 60%}.canvas-container{padding:6px}}@media(max-width:900px)and (orientation:landscape){.main{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.editor-panel{border-right:1px solid var(--border);border-bottom:none}.header{padding:6px 12px}.logo-icon{width:28px;height:28px}.logo-text{font-size:16px}.btn{padding:8px 12px;min-height:40px}.console-panel{height:auto;max-height:20vh}}@media(max-height:500px)and (orientation:landscape){.header{padding:4px 10px}.logo-tag{display:none}.panel-header{padding:4px 10px}.console-panel{display:none}}.virtual-keyboard{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--border);padding:8px;z-index:1000;display:flex;flex-direction:column;gap:4px}.vk-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.vk-key{min-width:44px;height:44px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:var(--font-mono);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 10px;transition:background .1s,transform .1s}.vk-key:active{transform:scale(.95);background:var(--accent);color:var(--bg-primary)}.vk-key-wide{padding:0 12px}.vk-key-action{min-width:60px;background:var(--bg-tertiary)}.vk-key-space{flex:1;max-width:200px}.vk-action-row{margin-top:4px}.vk-toggle-btn{position:fixed;bottom:10px;right:10px;width:48px;height:48px;border-radius:50%;background:var(--accent);border:none;color:var(--bg-primary);font-size:20px;cursor:pointer;z-index:999;box-shadow:0 4px 12px #f59e6b4d;display:none}.vk-toggle-btn:active{background:var(--accent-hover)}@media(hover:none)and (pointer:coarse){.vk-toggle-btn{display:flex;align-items:center;justify-content:center}}@media(hover:hover)and (pointer:fine){.virtual-keyboard,.vk-toggle-btn{display:none!important}}.vk-tooltip{position:fixed;bottom:70px;right:10px;background:var(--bg-elevated);color:var(--text-primary);padding:10px 14px;border-radius:8px;font-size:13px;box-shadow:0 4px 16px #0000004d;z-index:1000;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:auto;max-width:180px;text-align:center}.vk-tooltip:after{content:"";position:absolute;bottom:-8px;right:20px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--bg-elevated)}.vk-tooltip.visible{opacity:1;transform:translateY(0)}@media(hover:hover)and (pointer:fine){.vk-tooltip{display:none!important}}.var-inspector{background:var(--bg-tertiary);border-top:1px solid var(--border);padding:8px 12px;font-family:var(--font-mono);font-size:12px;max-height:120px;overflow-y:auto}.var-inspector-header{color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:500}.var-inspector-row{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--border-subtle)}.var-inspector-row:last-child{border-bottom:none}.var-name{color:var(--accent);font-weight:500;min-width:60px}.var-value{color:var(--text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color .3s ease,color .3s ease;padding:0 4px;border-radius:3px}.var-value.var-changed{background-color:var(--accent);color:var(--bg-primary)}.var-inspector-empty{color:var(--text-muted);font-style:italic}#stop-btn{transition:all .2s ease}#stop-btn.active{background:var(--error);border-color:var(--error);color:#fff;animation:pulse-stop 1.5s infinite}@keyframes pulse-stop{0%,to{box-shadow:0 0 #f38ba866}50%{box-shadow:0 0 0 6px #f38ba800}}.btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg-primary)}#speed-btn{min-width:50px;font-family:var(--font-mono);font-size:12px}.light-theme{--bg-primary: #faf8f5;--bg-secondary: #f4f2ef;--bg-tertiary: #ebe8e4;--bg-elevated: #ffffff;--text-primary: #34302a;--text-secondary: #6b6560;--text-muted: #9a948c;--accent: #d4785a;--accent-hover: #c26a4e;--accent-glow: rgba(212, 120, 90, .12);--accent-secondary: #b85f45;--success: #5a9a6e;--error: #c4584a;--warning: #c49840;--border: #ddd9d4;--border-subtle: #e8e5e0;--surface: #f8f6f3}.light-theme #canvas{box-shadow:0 2px 16px #00000014,0 0 0 1px #0000000a}.light-theme .canvas-container{background:var(--surface)}.light-theme .cm-editor{background:var(--bg-primary)}.light-theme .cm-gutters{background:var(--bg-secondary);color:var(--text-muted)}.debug-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.debug-toolbar .separator{width:1px;height:20px;background:var(--border);margin:0 4px}#frame-display{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);min-width:70px}.perf-display{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;margin-left:auto;padding:2px 6px;border-radius:var(--radius-sm);transition:background-color .15s ease}.perf-display:hover{background:var(--bg-secondary)}.perf-display:empty{display:none}.perf-display .fps{color:var(--accent-green)}.perf-display .fps.warning{color:var(--accent-orange)}.perf-display .fps.slow{color:var(--accent-red)}.canvas-container{position:relative}.coords-display{position:absolute;bottom:20px;left:20px;background:#16161ed9;color:var(--text-muted);font-family:var(--font-mono);font-size:11px;padding:4px 8px;border-radius:var(--radius-sm);pointer-events:none;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.light-theme .coords-display{background:#ffffffe6;color:var(--text-secondary)}@media(max-width:900px){.console-panel{height:auto;min-height:100px;max-height:30vh}}@media(max-width:600px){.coords-display{bottom:12px;left:12px;font-size:11px;padding:4px 8px}.console-panel{min-height:80px;max-height:25vh}}.welcome-overlay{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}.welcome-overlay.fade-out{animation:fadeOut .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.welcome-modal{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);max-width:380px;text-align:center;border:1px solid var(--border);box-shadow:0 16px 48px #00000059}.welcome-modal h2{margin:0 0 6px;font-size:22px;font-family:var(--font-display);color:var(--text-primary);font-weight:600}.welcome-modal>p{margin:0 0 20px;color:var(--text-secondary);font-size:14px;line-height:1.5}.welcome-points{text-align:left;margin-bottom:16px}.welcome-point{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--text-primary);font-size:13px}.welcome-icon{width:24px;height:24px;background:var(--accent);color:var(--bg-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex-shrink:0}.welcome-tip{background:var(--bg-tertiary);padding:10px 14px;border-radius:var(--radius-md);font-size:12px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}.welcome-start{background:var(--accent);color:var(--bg-primary);border:none;padding:10px 28px;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}.welcome-start:hover{background:var(--accent-hover)}.welcome-start:active{transform:scale(.98)}@media(max-width:480px){.welcome-modal{margin:16px;padding:24px}.welcome-modal h2{font-size:20px}}.error-modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:3000;padding:var(--space-md)}.error-modal-content{background:var(--bg-secondary);border:1px solid rgba(232,122,148,.3);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:380px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 16px 48px #0006}.error-modal-title{font-size:16px;font-weight:600;color:var(--error);margin:0 0 10px}.error-modal-message{font-size:13px;line-height:1.6;color:var(--text-primary);margin:0 0 14px;font-family:var(--font-mono);word-break:break-word}.error-modal-hint{font-size:12px;line-height:1.5;color:var(--text-secondary);margin:0 0 18px;padding:10px 12px;background:var(--bg-tertiary);border-radius:var(--radius-md)}.error-modal-dismiss{background:var(--accent);color:var(--bg-primary);border:none;padding:10px 20px;border-radius:var(--radius-md);cursor:pointer;font-weight:500;font-size:13px;width:100%;min-height:40px;transition:background .15s}.error-modal-dismiss:hover{background:var(--accent-hover)}.error-modal-dismiss:active{transform:scale(.98)}@media(max-width:380px){.error-modal-content{padding:16px}.error-modal-title{font-size:16px}.error-modal-message{font-size:13px}}@media(max-width:380px){.welcome-overlay{align-items:flex-start;padding-top:20px;overflow-y:auto}.welcome-modal{margin:12px;padding:20px}.welcome-modal h2{font-size:18px}.welcome-modal>p{font-size:13px;margin-bottom:16px}.welcome-point{font-size:13px;gap:10px}.welcome-icon{width:24px;height:24px;font-size:11px}.welcome-tip{padding:10px 12px;font-size:12px;margin-bottom:16px}.welcome-start{padding:10px 24px;font-size:14px;min-height:44px}}body.vk-open .playground{height:calc(100vh - 280px)}body.vk-open .main{grid-template-rows:60% 40%}@media(orientation:landscape){body.vk-open .main{grid-template-columns:1fr 1fr;grid-template-rows:1fr}}.settings-dropdown{position:relative;display:inline-block}.settings-panel{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm);display:none;flex-direction:column;gap:var(--space-xs);min-width:160px;z-index:100;box-shadow:0 4px 12px #0000004d}.settings-panel.open{display:flex}.settings-item{width:100%;text-align:left;justify-content:flex-start}body.high-contrast{--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-tertiary: #1a1a1a;--bg-elevated: #2a2a2a;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #b0b0b0;--accent: #ffcc00;--accent-hover: #ffe066;--accent-secondary: #ff9900;--success: #00ff00;--error: #ff0000;--warning: #ffff00;--border: #ffffff;--border-subtle: #666666}body.high-contrast .cm-editor{background:#000}body.high-contrast .cm-gutters{background:#0a0a0a;border-color:#fff}body.high-contrast .cm-activeLine{background:#222}body.high-contrast canvas{border:2px solid #ffffff}body.font-large{font-size:18px}body.font-large .cm-editor{font-size:16px}body.font-large .console{font-size:15px}body.font-xlarge{font-size:22px}body.font-xlarge .cm-editor{font-size:20px}body.font-xlarge .console{font-size:18px}@font-face{font-family:OpenDyslexic;src:url(https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:OpenDyslexic;src:url(https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:OpenDyslexicMono;src:url(https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexicMono-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}body.dyslexia-font{font-family:OpenDyslexic,-apple-system,sans-serif;letter-spacing:.05em;word-spacing:.1em;line-height:1.6}body.dyslexia-font .cm-editor{font-family:OpenDyslexicMono,ui-monospace,monospace;letter-spacing:.02em}body.dyslexia-font .console,body.dyslexia-font .var-inspector{font-family:OpenDyslexicMono,ui-monospace,monospace}.settings-divider{height:1px;background:var(--border);margin:var(--space-xs) 0}.shortcuts-overlay{position:fixed;inset:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.shortcuts-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.shortcuts-modal h2{color:var(--text-primary);font-family:var(--font-display);font-size:1.5rem;margin-bottom:var(--space-lg);text-align:center}.shortcuts-section{margin-bottom:var(--space-lg)}.shortcuts-section:last-of-type{margin-bottom:var(--space-md)}.shortcuts-section h3{color:var(--accent);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-sm)}.shortcuts-list{display:flex;flex-direction:column;gap:var(--space-xs)}.shortcut-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) 0}.shortcut-row kbd{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);white-space:nowrap}.shortcut-row span{color:var(--text-primary);font-size:.9rem}.shortcuts-close{width:100%;margin-top:var(--space-md);background:var(--accent);color:var(--bg-primary);font-weight:600}.shortcuts-close:hover{background:var(--accent-hover)}