.app{flex-direction:column;gap:1.25rem;display:flex}.app-header{text-align:center}.app-header h1{letter-spacing:-.02em;color:#f8fafc;margin:0;font-size:2.25rem}.app-header .accent{color:var(--accent-bright)}.accent-picker{justify-content:center;gap:.5rem;margin-top:.75rem;display:flex}.accent-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:20px;height:20px;padding:0;transition:transform .12s;box-shadow:0 0 0 1px #0f172a40}.accent-swatch:hover{transform:scale(1.15)}.accent-swatch.selected{border-color:#f8fafc;box-shadow:0 0 0 2px #0f172a80}.accent-swatch:focus-visible{outline-offset:2px;outline:2px solid #f8fafc}.tagline{color:#94a3b8;text-wrap:balance;margin:.35rem 0 0;font-size:.95rem}.demo-hint{color:#cbd5e1;text-wrap:balance;max-width:36rem;margin:.35rem auto 0;font-size:.9rem;line-height:1.45}.nowrap{white-space:nowrap}.app-main{flex-direction:column;gap:1.25rem;display:flex}.pane{background:var(--surface);color:var(--text);border-radius:14px;flex-direction:column;min-height:320px;padding:1rem 1.1rem 1.1rem;display:flex;box-shadow:0 10px 30px #02061759}.pane-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.pane-header h2{color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:.72rem;font-weight:700}.pane-actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.md-toolbar{flex-wrap:wrap;align-items:center;gap:.15rem;margin-bottom:.6rem;display:flex}.md-toolbar button{border:1px solid var(--border);min-width:30px;height:30px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:7px;padding:0 .45rem;font-size:.85rem;line-height:1;transition:background .12s,color .12s}.md-toolbar button:hover{background:var(--surface-muted);color:var(--accent);border-color:var(--accent)}.md-toolbar-sep{background:var(--border);align-self:stretch;width:1px;margin:.15rem .3rem}.editor-host{border:1px solid var(--border);border-radius:10px;flex:1;min-height:300px;transition:box-shadow .15s;overflow:hidden}.editor-host.drag-over{box-shadow:inset 0 0 0 2px var(--accent)}.editor-host .cm-editor{height:100%;min-height:300px}.editor-host .cm-editor.cm-focused{outline:none}.editor-meta{color:var(--text-muted);justify-content:flex-end;align-items:center;gap:.6rem;margin-top:.6rem;font-size:.8rem;display:flex}.placeholder{color:var(--text-muted);text-wrap:pretty;font-style:italic}.usage-text{color:var(--text-muted);font-variant-numeric:tabular-nums;transition:color .2s}.usage-text.usage-warn{color:#b45309}.usage-text.usage-danger,.usage-text.usage-over{color:#dc2626;font-weight:600}.usage-ring{flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex;position:relative}.usage-ring-track{stroke:var(--border)}.usage-ring-progress{stroke:var(--accent);transition:stroke-dashoffset .2s,stroke .2s}.usage-warn .usage-ring-progress{stroke:#f59e0b}.usage-danger .usage-ring-progress,.usage-over .usage-ring-progress{stroke:#dc2626}.usage-ring-remaining{font-variant-numeric:tabular-nums;color:#dc2626;font-size:.62rem;font-weight:700;line-height:1;position:absolute}.notice{color:#92400e;text-wrap:pretty;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;margin:0 0 .5rem;padding:.5rem .7rem;font-size:.85rem}.qr-pane{min-height:auto}.qr-body{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.qr-canvas-wrap{border:1px solid var(--border);background:#fff;border-radius:10px;justify-content:center;align-items:center;min-width:260px;min-height:260px;padding:.75rem;display:flex}.qr-canvas-wrap canvas{max-width:100%;height:auto!important}.qr-status{flex:1;min-width:220px}.qr-meta{color:var(--text-muted);margin:.5rem 0 0;font-size:.8rem}.qr-error{color:var(--error-text);background:var(--error-bg);text-align:center;text-wrap:pretty;border-radius:8px;margin:0;padding:.75rem 1rem}.warning{color:var(--warning-text);background:var(--warning-bg);text-wrap:pretty;border-radius:8px;margin:0;padding:.6rem .8rem;font-size:.85rem}.primary-button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.5rem .9rem;font-size:.85rem;font-weight:600;transition:background .15s}.primary-button:hover:not(:disabled){background:var(--accent-hover)}.primary-button:disabled{opacity:.45;cursor:not-allowed}.ghost-button{color:var(--accent);border:1px solid var(--border);background:0 0;border-radius:8px;padding:.35rem .7rem;font-size:.8rem}.ghost-button:hover{background:var(--surface-muted)}.quality-field{align-items:center;gap:.4rem;display:inline-flex}.quality-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.65rem;font-weight:700}.quality-select{color:var(--text);background:var(--surface-muted);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:.35rem .55rem;font-family:inherit;font-size:.8rem}.quality-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.app-footer{text-align:center;color:#64748b;text-wrap:balance;font-size:.8rem}@media (width>=900px){.app-main{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:1.25rem;display:grid}.editor-pane{min-height:70vh}.qr-pane{position:sticky;top:1rem}.qr-body{flex-direction:column;align-items:stretch}.qr-canvas-wrap{align-self:center}}@media (width<=899px){.qr-body{flex-direction:column;align-items:stretch}.qr-canvas-wrap{align-self:center}}@media (width<=600px){body #root{padding:1rem}.app{gap:1rem}.app-header h1{font-size:1.85rem}.tagline{font-size:.85rem}.demo-hint{font-size:.82rem}.pane{min-height:260px;padding:.85rem .9rem .95rem}.qr-canvas-wrap{width:100%;min-width:0;min-height:0}.editor-meta{flex-wrap:wrap;row-gap:.35rem}}:root{--bg:#0f172a;--surface:#fff;--surface-muted:#f1f5f9;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-bright:#60a5fa;--warning-bg:#fef3c7;--warning-text:#92400e;--error-bg:#fee2e2;--error-text:#b91c1c;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Hiragino Sans,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1200px 600px at 50% -10%, #1e293b 0%, var(--bg) 60%);color:#e2e8f0;min-height:100vh}#root{max-width:1200px;margin:0 auto;padding:1.5rem}button{cursor:pointer;font-family:inherit}