:root{--app-bg:#101014;--app-surface:#1a1a21;--app-border:#2a2a33;--app-fg:#e8e8ee;--app-muted:#9a9aa8;--app-accent:#6d8dff}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--app-bg);color:var(--app-fg);font:14px/1.5 system-ui,sans-serif}#app{height:100%}.app{grid-template-rows:auto 1fr;height:100%;display:grid}.toolbar{background:var(--app-surface);border-bottom:1px solid var(--app-border);flex-wrap:wrap;align-items:center;gap:16px;padding:10px 16px;display:flex}.brand{color:var(--app-fg);font-weight:700;text-decoration:none}.brand:hover{color:var(--app-accent)}.brand:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px;border-radius:2px}.spacer{flex:1}.btn{border:1px solid var(--app-border);color:var(--app-fg);min-height:34px;font:inherit;cursor:pointer;background:0 0;border-radius:6px;padding:6px 12px;transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}.btn:hover{background:#ffffff12;border-color:#3a3a46}.btn:active{background:#ffffff1f}.btn:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}.btn-primary{background:var(--app-accent);border-color:var(--app-accent);color:#10131f;font-weight:600}.btn-primary:hover{background:#859fff;border-color:#859fff}.btn-primary:active{background:#5c7df2;border-color:#5c7df2}.btn-secondary{color:var(--app-accent);border-color:#6d8dff73}.btn-secondary:hover{border-color:var(--app-accent);background:#6d8dff1f}.btn-ghost{color:var(--app-muted);border-color:#0000}.btn-ghost:hover{color:var(--app-fg);border-color:#0000}.btn-theme:after{content:" ▾" / "";opacity:.6}.knob-group{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.knob-label{color:var(--app-muted);font-size:12px}.knob{width:110px;accent-color:var(--app-accent);cursor:pointer;margin:0}.knob-accent{border:1px solid var(--app-border);cursor:pointer;background:0 0;border-radius:6px;width:36px;height:34px;padding:3px}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.menu{position:relative}.menu-list{background:var(--app-surface);border:1px solid var(--app-border);z-index:15;border-radius:8px;min-width:200px;padding:4px;display:none;position:absolute;top:calc(100% + 4px);left:0}.menu[data-open] .menu-list{display:grid}.menu-export .menu-list{left:auto;right:0}.menu-item{text-align:left;width:100%;color:var(--app-fg);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:8px 10px;display:block}.menu-item:hover{background:#ffffff12}.menu-item:focus-visible{outline:2px solid var(--app-accent);outline-offset:-2px}.panes{grid-template-columns:1fr 1fr;min-height:0;display:grid}.pane{min-width:0;min-height:0;overflow:auto}.pane-editor{border-right:1px solid var(--app-border)}.pane-editor .cm-editor{height:100%;font-size:14px}.pane-preview iframe{background:#fff;border:0;width:100%;height:100%}.view-toggle{display:none}@media (width<=768px){.view-toggle{display:inline-block}.panes{grid-template-columns:1fr}.app[data-view=preview] .pane-editor,.app[data-view=editor] .pane-preview,.app[data-view=split] .pane-preview{display:none}.app[data-view=preview] .pane-preview{display:block}}.theme-dialog{border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-fg);border-radius:12px;width:90vw;max-width:760px;max-height:80vh;padding:16px;display:none;overflow-y:auto}.theme-dialog[open]{display:block}.theme-dialog::backdrop{background:#0000008c}.dialog-head{z-index:1;background:var(--app-surface);justify-content:space-between;align-items:center;margin:-16px 0 8px;padding:16px 0 8px;display:flex;position:sticky;top:-16px}.dialog-head h2{margin:0;font-size:16px}.theme-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.theme-cards .theme-cat{text-transform:uppercase;letter-spacing:.08em;color:var(--app-muted);grid-column:1/-1;margin:10px 0 0;font-size:13px;font-weight:600}.theme-card{text-align:left;background:var(--app-bg);color:var(--app-fg);border:1px solid var(--app-border);cursor:pointer;font:inherit;border-radius:8px;gap:6px;padding:8px;display:grid;overflow:hidden}.theme-card:hover,.theme-card:focus-visible,.theme-card[aria-current=true]{border-color:var(--app-accent)}.theme-card[aria-current=true] .theme-name:after{content:" · current";color:var(--app-muted);font-weight:400}.theme-thumb{transform-origin:0 0;pointer-events:none;background:#fff;border:0;border-radius:4px;width:200%;height:280px;margin-bottom:-140px;transform:scale(.5)}.theme-name{font-weight:600}.theme-desc{color:var(--app-muted);font-size:12px}.notices{z-index:30;gap:8px;display:grid;position:fixed;bottom:16px;right:16px}.notice{background:var(--app-surface);border:1px solid var(--app-border);border-radius:6px;max-width:340px;margin:0;padding:10px 14px}.drop-hint{z-index:20;pointer-events:none;background:#101014a6;place-items:center;display:none;position:fixed;inset:0}.app[data-dragging=true] .drop-hint{display:grid}.drop-hint span{border:1px solid var(--app-accent);background:var(--app-surface);border-radius:8px;padding:14px 22px}.visually-hidden{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}