:root{--bg: #111418;--bg-elev: #1a1f26;--line: rgba(244, 241, 236, .1);--text: #f4f1ec;--muted: #9aa3ad;--coral: #ff5a3d;--coral-dim: rgba(255, 90, 61, .16);--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}body.popup-body{width:280px}.trace-popup{padding:16px;background:radial-gradient(500px 220px at 100% 0%,rgba(255,90,61,.18),transparent 55%),linear-gradient(160deg,#151a21,#111418 60%)}.trace-brand{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}.trace-brand strong{font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.03em}.trace-brand span{color:var(--muted);font-size:.78rem}.trace-actions{display:flex;flex-direction:column;gap:8px}.trace-action{appearance:none;border:1px solid var(--line);background:#ffffff08;color:var(--text);border-radius:12px;padding:12px;text-align:left;cursor:pointer;font:inherit;transition:background .16s ease,border-color .16s ease,transform .12s ease}.trace-action:hover{background:var(--coral-dim);border-color:#ff5a3d73}.trace-action:active{transform:scale(.98)}.trace-action em{display:block;font-style:normal;font-weight:600;margin-bottom:2px}.trace-action small{color:var(--muted);font-size:.75rem}.trace-action:disabled{opacity:.55;cursor:default;transform:none}.trace-action.record{border-color:#ff5a3d59}.trace-action.record.active{background:var(--coral-dim);border-color:#ff5a3da6}.trace-action.record.active em{color:var(--coral)}.trace-rec-banner{margin-bottom:10px;padding:8px 10px;border-radius:10px;background:var(--coral-dim);color:var(--coral);font-size:.78rem;font-weight:600}.trace-error{margin-top:10px;color:#ffb4a8;font-size:.78rem}.trace-editor{min-height:100vh;display:grid;grid-template-rows:auto 1fr;background:radial-gradient(900px 400px at 80% -10%,rgba(255,90,61,.12),transparent 50%),#0d1014}.trace-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#111418eb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}.trace-toolbar .brand{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-right:8px}.trace-toolbar .meta{color:var(--muted);font-size:.8rem;margin-right:auto;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-group,.color-group{display:flex;gap:4px;align-items:center;padding:3px;border:1px solid var(--line);border-radius:12px;background:#ffffff05}.tool-btn,.icon-btn{appearance:none;border:none;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:9px;cursor:pointer;display:grid;place-items:center;font:inherit;font-size:.72rem;font-weight:600}.tool-btn.active,.tool-btn:hover,.icon-btn:hover{background:var(--coral-dim);color:var(--text)}.color-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px #fff3}.primary-btn{appearance:none;border:none;background:var(--coral);color:#1a0906;font:inherit;font-weight:700;border-radius:11px;padding:0 14px;height:36px;cursor:pointer}.ghost-btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;border-radius:11px;padding:0 12px;height:36px;cursor:pointer}.trace-stage{overflow:auto;padding:24px;display:grid;place-items:start center}.canvas-wrap{position:relative;box-shadow:0 24px 80px #00000073;border-radius:4px;overflow:hidden;background:#000;max-width:100%}.canvas-wrap canvas{display:block;max-width:100%;height:auto;cursor:crosshair}.empty-state{margin:80px auto;text-align:center;max-width:360px}.empty-state h1{font-family:var(--display);margin:0 0 8px}.empty-state p{color:var(--muted)}