:root{--bg-darker: #181818;--bg-editor: #1e1e1e;--bg-sidebar: #333333;--bg-header: #2d2d2d;--vscode-blue: #007acc;--vscode-green: #4ec9b0;--vscode-red: #f44747;--text-dim: #858585}body{margin:0;background:var(--bg-darker);color:#ccc;font-family:Segoe UI,Fira Code,monospace;overflow:hidden}.ide-layout{display:flex;flex-direction:column;height:100vh;width:100vw;-webkit-user-select:none;user-select:none}.ide-topbar{height:38px;background:var(--bg-header);display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #3c3c3c;font-size:13px}.flex-row{display:flex;align-items:center;gap:10px}.file-name{color:#969696;font-style:italic}.sync-tag{display:flex;align-items:center;gap:6px;padding:2px 10px;border-radius:12px;background:#ffffff08;font-size:11px;transition:all .3s}.sync-tag.saving{color:var(--vscode-green);background:#4ec9b01a}.sync-tag.saved{color:var(--vscode-blue)}.stat{color:var(--text-dim);display:flex;align-items:center;gap:5px}.stat.record{color:var(--vscode-green);font-weight:600}.ide-body{flex:1;display:flex;overflow:hidden}.ide-nav{width:50px;background:var(--bg-sidebar);display:flex;flex-direction:column;align-items:center;padding-top:15px}.nav-btn{width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:#858585;cursor:pointer;transition:color .2s}.nav-btn.active{color:#fff;border-left:2px solid #fff}.nav-btn:hover{color:#fff}.canvas-container{flex:1;position:relative;background:var(--bg-editor)}.main-canvas{width:100%;height:100%;display:block}.ui-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100}.start-card{background:#252526;padding:40px 60px;border-radius:4px;border:1px solid #454545;text-align:center;box-shadow:0 30px 60px #0009}.start-card h1{color:var(--vscode-green);margin-bottom:10px;font-size:28px}.start-card.error h2{color:var(--vscode-red)}.hint{color:#888;font-size:14px;margin-top:20px}.play-btn{background:var(--vscode-blue);color:#fff;border:none;padding:12px 30px;border-radius:2px;font-size:16px;font-weight:700;cursor:pointer;margin-top:25px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.play-btn:hover:not(:disabled){filter:brightness(1.2)}.play-btn:disabled{opacity:.5;cursor:not-allowed}.live-score{position:absolute;top:25px;right:25px;background:#0006;padding:10px 20px;border-radius:4px;border-left:4px solid var(--vscode-blue)}.live-score .label{font-size:11px;color:var(--text-dim);display:block}.live-score .val{font-size:28px;font-weight:800;color:#fff;font-family:monospace}.ide-status{height:24px;background:var(--vscode-blue);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px;color:#fff}.status-left,.status-right{display:flex;align-items:center;gap:15px}.color-chip{background:#0003;padding:0 10px;height:24px;line-height:24px;font-weight:700}.pulse{animation:blink 1s infinite}@keyframes blink{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.score-box{font-size:40px;margin:20px 0;color:#fff}.new-tag{color:#ffca28;font-weight:700;margin-bottom:20px;animation:scaleUp .5s ease-out}@keyframes scaleUp{0%{transform:scale(0)}to{transform:scale(1.2)}}