:root{--bg: #0B0F14;--panel: #111826;--ink: #E6E6E6;--muted: #9AA4B2;--brand: #6EE7F2;--accent: #9B87F5;--danger: #F97066;--ok: #22C55E;--warn: #F59E0B;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--font-ui: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";--font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--font-serif: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;--font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", system-ui, sans-serif;--font-slab: "Roboto Slab", "Rockwell", "Zilla Slab", Cambria, serif;--editor-zoom: 1.18;--editor-shift-x: 0;--editor-shift-y: 36px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}#root{display:grid;grid-template-rows:auto 1fr auto}button{font:inherit;color:inherit}*:focus{outline:none}input,textarea,select,button,[contenteditable=true]{outline:none;border:none;background:transparent}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.editor-container{display:flex;align-items:center;justify-content:center;height:100%}.editor-surface{width:min(68ch,calc(100vw - 48px));margin:16px auto 0;line-height:1.6;letter-spacing:.01em;outline:none;caret-color:var(--ink);position:relative;background:transparent;border:none;white-space:pre-wrap;padding:0 8px;transform-origin:center center;transform:translate(var(--editor-shift-x),var(--editor-shift-y)) scale(var(--editor-zoom))}.editor-surface *{background:transparent;border:0;box-shadow:none}.editor-input{min-height:60vh}.editor-input:focus{outline:none}.editor-input p{margin:0}.editor-input:has(p:empty):before{content:""}.editor-placeholder{position:absolute;top:0;left:-2.25px;color:color-mix(in oklab,var(--ink) 40%,transparent);pointer-events:none;font:inherit;font-size:1em;line-height:inherit}.hud{position:fixed;left:50%;bottom:28px;transform:translate(-50%);background:color-mix(in oklab,var(--panel) 88%,transparent);color:var(--ink);padding:18px 24px;border-radius:999px;display:flex;gap:18px;align-items:center;box-shadow:0 10px 28px #00000059;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease,background .15s ease;font-size:14px;font-family:var(--font-ui);min-width:680px}.hud.hide{opacity:0;transform:translate(-50%,8px);pointer-events:none}.hud:hover{box-shadow:0 12px 32px #00000059;background:color-mix(in oklab,var(--panel) 86%,transparent)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;position:sticky;top:0;background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 100%,transparent) 60%,transparent)}.inline-title{background:transparent;border:none;color:var(--ink);font-size:14px;padding:4px 8px;border-radius:6px}.inline-title:focus{outline:1px solid color-mix(in oklab,var(--brand) 60%,transparent)}.chip{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.ghost{appearance:none;background:transparent;border:none;color:var(--muted);padding:6px 8px;border-radius:8px;transition:color .15s ease,transform .15s ease,background .15s ease;font-size:14px}.ghost:hover{color:var(--ink);transform:translateY(-1px);background:color-mix(in oklab,var(--panel) 40%,transparent)}.ghost:active{transform:translateY(0)}.hud .quick{display:inline-flex;gap:8px;margin-left:8px;align-items:center}.hud .quick button{padding:2px 8px;background:color-mix(in oklab,var(--panel) 70%,transparent);border-radius:6px}.hud .quick .color-trigger{width:22px;height:22px;border-radius:6px;background:color-mix(in oklab,var(--panel) 70%,transparent)}.color-pop{position:relative}.color-pop .palette{position:absolute;bottom:30px;left:0;display:none;gap:6px;background:color-mix(in oklab,var(--panel) 92%,transparent);padding:8px;border-radius:10px;box-shadow:0 10px 24px #00000059}.color-pop.open .palette{display:inline-flex}.color-pop .palette .ghost{width:24px;height:24px;border-radius:6px}.palette.rows{flex-direction:column;gap:8px}.palette.rows .row{display:inline-flex;gap:8px}.font-pop{position:relative}.font-pop .font-menu{position:absolute;bottom:32px;left:0;display:none;gap:6px;background:color-mix(in oklab,var(--panel) 92%,transparent);padding:6px 8px;border-radius:10px;box-shadow:0 10px 24px #00000059}.font-pop.open .font-menu{display:inline-flex}.size-slider{-webkit-appearance:none;appearance:none;width:140px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--accent));outline:none;transition:filter .15s ease}.size-slider:hover{filter:brightness(1.1)}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid color-mix(in oklab,var(--panel) 70%,transparent)}.size-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid color-mix(in oklab,var(--panel) 70%,transparent)}[data-focus="1"]~.hud,[data-focus="1"]~.topbar{display:none}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}@media (max-width: 820px){.editor-placeholder{left:-2px}@media (min-resolution: 3dppx){.editor-placeholder{left:-2.25px}}@media (min-resolution: 2dppx) and (max-resolution: 2.99dppx){.editor-placeholder{left:-2px}}:root{--editor-zoom: 1;--editor-shift-x: 0;--editor-shift-y: 20px}.topbar{padding:8px 10px;gap:6px;flex-wrap:wrap}.topbar .topbar-actions{gap:6px}.inline-title{min-width:unset!important;width:60vw;font-size:13px;padding:6px 10px}.editor-surface{width:calc(100vw - 28px);margin:8px auto 0;padding:0 4px;transform:translate(var(--editor-shift-x),var(--editor-shift-y)) scale(var(--editor-zoom))}.editor-input{min-height:58vh}.ghost{padding:4px 6px;border-radius:6px;font-size:13px}.chip{font-size:12px}.hud{left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));min-width:unset;width:calc(100vw - 24px);padding:10px 12px;gap:10px;font-size:12px}}