body{margin:0}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--accent:oklch(50% .17 265);--accent-hover:oklch(42% .17 265);--accent-soft:oklch(95% .03 265);--accent-tint:oklch(97% .02 265);--on-accent:#fff;--fg:#1c1d21;--fg-2:#4a4d55;--muted:#6b6e76;--bg:#f7f7f8;--surface:#fff;--line:#e6e7ea;--line-2:#e1e3e7;--control-line:#d6d8dd;--dash:#c9ccd3;--segment-bg:#ebecef;--stat-bg:#f4f5f6;--check:#eef0f2;--ok-fg:#2f6b4f;--ok-bg:#e8f4ee;--ok-dot:#2f8f5f;--warn-fg:#5c4400;--warn-bg:#fff3cd;--warn-dot:#c99a06;--err-fg:#8a1c1c;--err-bg:#fde2e2;--mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;color:var(--fg);background:var(--bg);font-family:Noto Sans JP,system-ui,Segoe UI,Yu Gothic UI,Hiragino Sans,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--accent:oklch(65% .15 265);--accent-hover:oklch(72% .14 265);--accent-soft:oklch(30% .06 265);--accent-tint:oklch(27% .04 265);--fg:#e6e7ea;--fg-2:#b9bcc4;--muted:#8f939c;--bg:#131417;--surface:#1c1d21;--line:#2c2e34;--line-2:#34363d;--control-line:#3d4048;--dash:#4a4d55;--segment-bg:#26282d;--stat-bg:#24262b;--check:#2a2c32;--ok-fg:#a8dcc0;--ok-bg:#1d3328;--warn-fg:#f1d98a;--warn-bg:#3a3014;--err-fg:#f4b4b4;--err-bg:#43201f}}*{box-sizing:border-box}.mono{font-family:var(--mono)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.only-narrow{display:none}button{font:inherit;color:var(--on-accent);background:var(--accent);cursor:pointer;border:1px solid #0000;border-radius:10px;height:40px;padding:0 16px;font-weight:500}button:hover:not(:disabled){background:var(--accent-hover)}button.secondary{color:var(--fg);background:var(--surface);border-color:var(--control-line);font-weight:400}button.secondary:hover:not(:disabled){background:var(--stat-bg)}button.link{color:var(--fg-2);background:0 0;height:auto;padding:4px 0;font-weight:400}button.link:hover:not(:disabled){color:var(--accent);background:0 0}button.large{height:48px;padding:0 22px;font-size:15px}button.small{border-radius:8px;height:32px;padding:0 12px;font-size:13px}button.link.small{height:auto;padding:0}button.square{border-radius:8px;width:32px;height:32px;padding:0}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,summary:focus-visible,.viewer:focus-visible,.knob:focus-visible,.code-view:focus-visible,.drop-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}input[type=range]{width:100%;accent-color:var(--accent);margin:0}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;height:60px;padding:0 32px;display:flex}.brand{align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.logo{width:22px;height:22px;display:block}.topnav{gap:24px;font-size:14px;display:flex}.topbar-file{min-width:0;color:var(--fg-2);align-items:center;gap:12px;font-size:13px;display:flex}.file-meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.alert{border-radius:10px;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:10px 14px;font-size:14px;display:flex}.alert.error{background:var(--err-bg);color:var(--err-fg)}.hint{color:var(--muted);margin:0;font-size:12px}.landing{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:28px;padding:40px;display:flex}.landing>.alert{width:min(820px,100%)}.hero{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.hero h1{letter-spacing:-.01em;text-wrap:balance;margin:0;font-size:40px;font-weight:700}.hero p{color:var(--fg-2);margin:0;font-size:16px}.drop-card{border:2px dashed var(--dash);background:var(--surface);cursor:pointer;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:18px;width:min(820px,100%);min-height:340px;padding:24px;display:flex}.drop-card:hover{border-color:var(--accent)}.drop-target{display:contents}.drop-icon{background:var(--accent-soft);width:56px;height:56px;color:var(--accent);border-radius:14px;justify-content:center;align-items:center;font-size:26px;display:flex}.drop-title{font-size:18px;font-weight:500}.drop-hint{color:var(--muted);order:1;font-size:12px}.drop-actions{align-items:center;gap:12px;display:flex}.privacy{color:var(--ok-fg);background:var(--ok-bg);border-radius:999px;align-items:center;gap:8px;max-width:820px;padding:8px 14px;font-size:14px;display:flex}.privacy .dot{background:var(--ok-dot);border-radius:50%;flex:none;width:8px;height:8px}.privacy.server{color:var(--warn-fg);background:var(--warn-bg);border-radius:12px}.privacy.server .dot{background:var(--warn-dot)}.engine-note{color:var(--muted);margin:-16px 0 0;font-size:13px}.workspace{flex:1;grid-template-columns:minmax(0,1fr) 340px;height:calc(100vh - 60px);min-height:520px;display:grid}.stage{flex-direction:column;gap:12px;min-height:0;padding:24px;display:flex}.stage-bar{justify-content:space-between;align-items:center;gap:12px;display:flex}.segmented{background:var(--segment-bg);border-radius:8px;padding:3px;display:flex}.segmented button{height:auto;color:var(--fg-2);background:0 0;border-radius:6px;padding:6px 14px;font-size:13px;font-weight:400}.segmented button:hover:not(:disabled){color:var(--fg);background:0 0}.segmented button[aria-pressed=true]{color:var(--fg);background:var(--surface);box-shadow:0 1px 2px #00000014}.zoom-controls{align-items:center;gap:6px;display:flex}.zoom-level{width:56px;height:32px;color:var(--fg-2);background:0 0;padding:0;font-size:13px;font-weight:400}.zoom-level:hover:not(:disabled){background:var(--segment-bg)}.viewer{border:1px solid var(--line-2);background-color:var(--surface);background-image:linear-gradient(45deg, var(--check) 25%, transparent 25%, transparent 75%, var(--check) 75%), linear-gradient(45deg, var(--check) 25%, transparent 25%, transparent 75%, var(--check) 75%);-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;background-position:0 0,10px 10px;background-size:20px 20px;border-radius:12px;flex:1;min-height:0;position:relative;overflow:hidden}.viewer.zoomed{touch-action:none;cursor:grab}.viewer.zoomed:active{cursor:grabbing}.layer,.layer-clip{position:absolute;inset:0}.layer{transform-origin:0 0}.layer img{object-fit:contain;width:100%;height:100%;display:block}.divider{background:var(--accent);pointer-events:none;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px)}.knob{border:2px solid var(--accent);width:36px;height:36px;color:var(--accent);cursor:ew-resize;pointer-events:auto;touch-action:none;background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:13px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000026}.tag{color:#fff;pointer-events:none;border-radius:4px;padding:3px 8px;font-size:12px;position:absolute}.tag-left{background:#1c1d21bf;top:12px;left:12px}.tag-right{background:var(--accent);top:12px;right:12px}.tag-hint{font-family:var(--mono);background:#1c1d21bf;font-size:11px;bottom:10px;right:10px}.hint-touch{display:none}@media (pointer:coarse){.hint-touch{display:block}.hint-mouse{display:none}}.viewer-busy{color:#fff;background:#1c1d21cc;border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-size:13px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.viewer-busy~.tag-hint{display:none}.spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.code-view{border:1px solid var(--line-2);background:var(--surface);border-radius:12px;flex:1;min-height:0;overflow:auto}.code-view pre{font:12px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:16px}.code-note{color:var(--muted);margin:0;padding:0 16px 16px;font-size:12px}.settings{background:var(--surface);border-left:1px solid var(--line);flex-direction:column;gap:24px;padding:24px;display:flex;overflow-y:auto}.setting{flex-direction:column;gap:8px;display:flex}.setting-label{color:var(--fg-2);font-size:13px;font-weight:700}.setting-row{justify-content:space-between;align-items:center;font-size:13px;display:flex}.scale-labels{color:var(--muted);font-size:11px}.presets{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.preset{height:64px;color:var(--fg);background:var(--surface);border:1px solid var(--line-2);flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;font-weight:400;display:flex}.preset:hover:not(:disabled){background:var(--accent-tint)}.preset[aria-pressed=true]{border:2px solid var(--accent);background:var(--accent-tint)}.preset-label{font-size:14px;font-weight:500}.preset-sub{color:var(--muted);font-size:11px}.switch-row{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.switch-text{flex-direction:column;gap:2px;display:flex}.switch-title{font-size:14px;font-weight:500}.switch-sub{color:var(--muted);font-size:12px}.switch{appearance:none;background:var(--control-line);cursor:pointer;border-radius:12px;flex:none;width:40px;height:24px;margin:0;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:left .15s;position:absolute;top:3px;left:3px}.switch:checked{background:var(--accent)}.switch:checked:after{left:19px}.advanced summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none}.advanced summary::-webkit-details-marker{display:none}.advanced summary:after{content:" ▾"}.advanced[open] summary:after{content:" ▴"}.advanced-body{flex-direction:column;gap:10px;margin-top:12px;display:flex}.palette-actions{gap:12px;display:flex}.palette{flex-wrap:wrap;gap:8px 14px;margin:0;padding:0;list-style:none;display:flex}.swatch-item{cursor:pointer;align-items:center;gap:6px;display:flex}.swatch{border:1px solid #00000040;border-radius:4px;width:22px;height:22px;display:inline-block}.share{color:var(--muted);font-size:11px}.actions{flex-direction:column;gap:12px;margin-top:auto;display:flex}.stats{color:var(--fg-2);background:var(--stat-bg);border-radius:10px;grid-template-columns:1fr 1fr;gap:8px;padding:12px;font-size:12px;display:grid}.stats b{color:var(--fg);font-weight:500}.drop-overlay{z-index:10;color:var(--accent);background:color-mix(in oklch, var(--accent) 12%, transparent);border:4px dashed var(--accent);pointer-events:none;place-items:center;font-size:1.3rem;font-weight:700;display:grid;position:fixed;inset:0}.help-dialog{width:min(560px,100vw - 32px);max-height:calc(100vh - 64px);color:var(--fg);background:var(--surface);border:0;border-radius:14px;padding:0;box-shadow:0 8px 30px #0003}.help-dialog::backdrop{background:#00000059}.help-body{padding:24px}.help-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.help-head h2{margin:0;font-size:18px}.icon-button{width:36px;height:36px;color:var(--fg-2);background:0 0;padding:0;font-size:20px}.icon-button:hover:not(:disabled){background:var(--stat-bg)}.help-steps{color:var(--fg-2);flex-direction:column;gap:12px;margin:0;padding-left:1.4em;font-size:14px;line-height:1.7;display:flex}.help-steps b{color:var(--fg);display:block}.help-faq{margin:0;font-size:14px;line-height:1.7}.help-faq dt{margin-top:14px;font-weight:700}.help-faq dt:first-child{margin-top:0}.help-faq dd{color:var(--fg-2);margin:4px 0 0}@media (width<=720px){.only-wide{display:none}.only-narrow{display:inline}.topbar{height:56px;padding:0 20px}.logo{width:20px;height:20px}.topnav{gap:16px;font-size:13px}.topbar-file .secondary{color:var(--accent);background:0 0;border:0;padding:0}.landing{justify-content:flex-start;align-items:stretch;gap:20px;padding:28px 20px}.hero{text-align:left;align-items:flex-start;gap:8px}.hero h1{font-size:26px;line-height:1.4}.hero p{font-size:14px}.drop-card{background:0 0;border:0;flex:1;align-items:stretch;gap:10px;min-height:0;padding:0}.drop-target{border:2px dashed var(--dash);background:var(--surface);border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;min-height:240px;padding:20px;display:flex}.drop-card:hover .drop-target{border-color:var(--accent)}.drop-icon{width:52px;height:52px;font-size:24px}.drop-title{font-size:16px}.drop-hint{font-size:11px}.drop-actions{flex-direction:column;align-items:stretch;gap:10px}.drop-actions button{border-radius:12px}.privacy{background:0 0;justify-content:center;padding:0;font-size:12px}.privacy .dot{width:7px;height:7px}.privacy.server{background:var(--warn-bg);justify-content:flex-start;padding:8px 12px}.engine-note{text-align:center;margin:0}.workspace{height:auto;min-height:0;padding-bottom:88px;display:block}.stage{padding:16px 16px 0}.zoom-controls{display:none}.viewer,.code-view{background-position:0 0,8px 8px;background-size:16px 16px;border-radius:14px;flex:none;height:330px}.knob{width:32px;height:32px;font-size:12px}.tag-left,.tag-right{top:10px}.settings{background:0 0;border-left:0;gap:18px;padding:18px 16px;overflow:visible}.presets{background:var(--segment-bg);border-radius:10px;gap:0;padding:3px;display:flex}.preset,.preset[aria-pressed=true]{background:0 0;border:0;border-radius:8px;flex:1;height:40px}.preset[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 2px #00000014}.preset-label{font-weight:400}.preset-sub{display:none}.actions{z-index:5;padding:12px 16px calc(20px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex-direction:row;align-items:center;gap:10px;position:fixed;bottom:0;left:0;right:0}.stats{background:0 0;flex-direction:column;gap:0;width:76px;padding:0;font-size:11px;display:flex}.stats b{font-weight:400}.actions .primary-action{flex:1}.actions button{border-radius:12px}.actions .secondary{width:64px;padding:0;font-size:12px}}