:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0c0d10;--bg-elevated:#15161c;--bg-input:#1c1e26;--border:#2c2e38;--text:#ece8e1;--text-muted:#9a958c;--accent:#e8b86d;--accent-dim:#e8b86d24;--danger:#f0a3a3;--shadow:0 18px 50px #00000059;--radius:16px}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#efebe3;--bg-elevated:#f7f4ee;--bg-input:#fff;--border:#d8d1c4;--text:#1c1b19;--text-muted:#6b665c;--accent:#9a5f12;--accent-dim:#9a5f121f;--danger:#9b2c2c;--shadow:0 18px 50px #503c1414}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,sans-serif}button,input,select,textarea{font:inherit;color:inherit}.app{min-height:100dvh}.topbar{justify-content:space-between;align-items:center;gap:16px;max-width:1600px;margin:0 auto;padding:20px 28px 8px;display:flex}.brand{align-items:center;gap:14px;display:flex}.mark{background:var(--accent-dim);width:44px;height:44px;color:var(--accent);border-radius:12px;place-items:center;font-family:Georgia,Times New Roman,serif;font-size:22px;display:grid}.brand h1{letter-spacing:.01em;margin:0;font-size:20px}.brand p{color:var(--text-muted);margin:2px 0 0;font-size:13px}.theme-toggle{border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:inline-flex}.theme-toggle svg{width:18px;height:18px}.theme-toggle:hover{border-color:var(--accent)}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.overlay-controls{align-items:center;gap:8px;display:inline-flex}.overlay-blend{border:1px solid var(--border);background:var(--bg-elevated);border-radius:999px;align-items:center;gap:8px;padding:6px 10px 6px 14px;display:inline-flex}.overlay-blend-label{white-space:nowrap;font-size:14px}.overlay-blend select{background:var(--bg-input);width:auto;min-width:0;color:var(--text);color-scheme:inherit;border:0;border-radius:8px;padding:4px 8px}.overlay-blend select option{color:#1c1b19;background-color:#fff}.overlay-blend select:disabled{opacity:.45}.overlay-blend:focus-within{border-color:var(--accent)}.tumbler{border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;border-radius:999px;align-items:center;gap:10px;padding:6px 14px 6px 8px;display:inline-flex}.tumbler:hover{border-color:var(--accent)}.tumbler-track{background:var(--bg-input);border:1px solid var(--border);border-radius:999px;width:36px;height:22px;transition:background .15s,border-color .15s;position:relative}.tumbler-thumb{background:var(--text-muted);border-radius:50%;width:16px;height:16px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.tumbler.is-on .tumbler-track{background:var(--accent);border-color:var(--accent)}.tumbler.is-on .tumbler-thumb{background:var(--bg);transform:translate(14px)}.layout{grid-template-columns:340px minmax(0,1fr);gap:24px;max-width:1600px;margin:0 auto;padding:16px 28px 32px;display:grid}.panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:18px;height:fit-content;padding:20px;display:flex}.field{flex-direction:column;gap:8px;display:flex}.label,.label-row{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:12px}.label-row{justify-content:space-between;align-items:center;display:flex}.value{font-variant-numeric:tabular-nums;color:var(--text);text-transform:none;letter-spacing:0}.value-input{border:1px solid var(--border);background:var(--bg-input);text-align:right;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;width:4.75rem;color:var(--text);border-radius:8px;padding:4px 8px}.value-input:focus{border-color:var(--accent);outline:none}.hint{color:var(--text-muted);letter-spacing:0;text-transform:none;margin:0;font-size:12px;line-height:1.35}.dropzone{border:1px dashed var(--border);background:var(--bg-input);cursor:pointer;border-radius:12px;flex-direction:column;gap:4px;padding:16px;display:flex}.dropzone input{display:none}.dropzone strong{font-size:15px}.dropzone span{color:var(--text-muted);font-size:13px;line-height:1.4}.dropzone.is-dragging,.dropzone:hover{border-color:var(--accent);background:var(--accent-dim)}.error{color:var(--danger);margin:0;font-size:13px}textarea,select,.color-row input[type=text]{border:1px solid var(--border);background:var(--bg-input);width:100%;color:var(--text);color-scheme:inherit;border-radius:10px;outline:none;padding:10px 12px}select option{color:#1c1b19;background-color:#fff}textarea{resize:vertical;min-height:132px;line-height:1.45}textarea:focus,select:focus,.color-row input[type=text]:focus{border-color:var(--accent)}.ghost{color:var(--accent);cursor:pointer;background:0 0;border:0;align-self:flex-start;padding:0}.ghost:hover{text-decoration:underline}input[type=range]{width:100%;accent-color:var(--accent)}.color-row{grid-template-columns:48px 1fr;gap:8px;display:grid}.color-row input[type=color]{border:1px solid var(--border);background:var(--bg-input);cursor:pointer;border-radius:10px;width:48px;height:42px;padding:0}.previews{grid-template-columns:1fr 1fr;gap:16px;min-width:0;display:grid}.previews.is-overlay{grid-template-columns:1fr}.preview-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);min-width:0;box-shadow:var(--shadow);flex-direction:column;display:flex;overflow:hidden}.preview-card header{border-bottom:1px solid var(--border);flex-direction:column;justify-content:center;min-height:76px;padding:14px 16px 12px;display:flex}.preview-card h2{margin:0;font-size:15px}.preview-card header p{color:var(--text-muted);margin:4px 0 0;font-size:12px}.preview-body{scrollbar-gutter:stable;min-height:280px;padding:24px;overflow:auto}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere}.preview-text.is-grayscale{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.overlay-stage{isolation:isolate}.overlay-stack{position:relative}.overlay-layer{pointer-events:none;position:absolute;inset:0}@media (width<=1100px){.previews{grid-template-columns:1fr}}@media (width<=800px){.layout{grid-template-columns:1fr;padding:12px 16px 24px}.topbar{padding:16px 16px 8px}}