:root {
  --bg: #0a0a12;
  --bg-editor: #0d0d16;
  --bg-toolbar: #111118;
  --text: #e0e4ec;
  --text-secondary: #7a7e92;
  --text-muted: #44475a;
  --accent: #ff79c6;
  --green: #50fa7b;
  --cyan: #8be9fd;
  --purple: #bd93f9;
  --orange: #ffb86c;
  --red: #ff5555;
  --yellow: #f1fa8c;
  --comment: #6272a4;
  --border: rgba(255,121,198,0.06);
  --font: 'Inter',system-ui,sans-serif;
  --mono: 'Fira Code',monospace;
  --radius: 6px;
  --transition: 0.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}

.toolbar{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;background:var(--bg-toolbar);border-bottom:1px solid var(--border);height:36px}
.toolbar-left,.toolbar-center,.toolbar-right{display:flex;align-items:center;gap:6px}
.logo{font-size:0.95rem}
h1{font-size:0.82rem;font-weight:600;color:var(--accent)}

.btn{padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.68rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.select{padding:3px 6px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.68rem;cursor:pointer}
.fps{font-family:var(--mono);font-size:0.65rem;color:var(--text-muted)}

.app-layout{display:flex;height:calc(100vh - 36px)}
.editor-pane{flex:1;display:flex;background:var(--bg-editor);overflow:hidden;position:relative}
.canvas-pane{flex:1;position:relative;min-width:0}
.divider{width:2px;background:var(--border);cursor:col-resize;flex-shrink:0}
.divider:hover{background:var(--accent)}

canvas{width:100%;height:100%;display:block}

/* Line numbers */
.line-numbers{padding:8px 8px 8px 4px;font-family:var(--mono);font-size:0.78rem;line-height:1.7;color:var(--text-muted);text-align:right;user-select:none;overflow:hidden;min-width:32px}

.editor{flex:1;border:none;resize:none;background:transparent;color:var(--text);font-family:var(--mono);font-size:0.78rem;line-height:1.7;padding:8px 10px;tab-size:4;white-space:pre;overflow:auto}
.editor:focus{outline:none}

/* Error overlay */
.error-overlay{position:absolute;bottom:0;left:0;right:0;max-height:40%;overflow:auto;background:rgba(255,85,85,0.08);border-top:2px solid var(--red);padding:10px 14px;font-family:var(--mono);font-size:0.75rem;color:var(--red);line-height:1.5}

@media(max-width:640px){
  .app-layout{flex-direction:column}
  .editor-pane,.canvas-pane{flex:none;height:50vh}
  .divider{width:auto;height:2px;cursor:row-resize}
}