:root{--bg: #f4f3f0;--bg-2: #efeee9;--surface: #ffffff;--surface-2: #faf9f6;--surface-3: #f1efe9;--ink: #15181d;--ink-2: #565b66;--ink-3: #898e99;--line: rgba(21,24,29,.1);--line-2: rgba(21,24,29,.06);--accent: #2f53c8;--accent-ink: #ffffff;--accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);--ok: #1f8a5b;--ok-soft: color-mix(in srgb, var(--ok) 11%, transparent);--warn: #c77d1a;--danger: #cf4b3c;--radius: 14px;--radius-sm: 9px;--maxw: 1340px;--font: "IBM Plex Sans JP", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace}[data-theme=dark]{--bg: #0f1115;--bg-2: #14161b;--surface: #181b21;--surface-2: #1d212a;--surface-3: #21262f;--ink: #eef0f3;--ink-2: #a3a9b5;--ink-3: #6e7480;--line: rgba(255,255,255,.11);--line-2: rgba(255,255,255,.06);--accent: #5b7df0;--accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);--ok: #3fb27e;--ok-soft: color-mix(in srgb, var(--ok) 18%, transparent);--warn: #dba23f;--danger: #e0685a}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}html,body{min-height:100%}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,var(--line-2) 1px,transparent 1px),linear-gradient(to bottom,var(--line-2) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(120% 70% at 50% -8%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 70% at 50% -8%,#000 0%,transparent 70%)}a{color:inherit;text-decoration:none}button{font-family:inherit}.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(16px,3vw,32px) clamp(14px,3vw,32px) 40px;display:flex;flex-direction:column;gap:clamp(15px,2vw,20px);min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand__mark{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--accent)}.brand__mark svg{width:23px;height:23px}.brand__txt{min-width:0}.brand__name{font-size:clamp(17px,2vw,20px);font-weight:600;letter-spacing:.01em;line-height:1.15;white-space:nowrap}.brand__sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}.actions{display:flex;align-items:center;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:border-color .16s,color .16s,background .16s,transform .12s,filter .15s}.btn:hover{color:var(--ink);border-color:var(--ink-3)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn svg{width:17px;height:17px;flex:none}.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn--primary:hover:not(:disabled){filter:brightness(1.07);color:var(--accent-ink);border-color:transparent}.iconbtn{width:42px;height:42px;flex:none;padding:0;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;position:relative;transition:border-color .16s,color .16s,background .16s,transform .12s}.iconbtn:hover{color:var(--ink);border-color:var(--ink-3)}.iconbtn:active{transform:translateY(1px)}.iconbtn svg{width:19px;height:19px}.iconbtn.is-on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.iconbtn .tip{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);font-size:11px;letter-spacing:.03em;white-space:nowrap;background:var(--ink);color:var(--bg);padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}.iconbtn:hover .tip{opacity:.95}.statusbar{display:flex;align-items:center;gap:clamp(10px,2vw,16px);flex-wrap:wrap;padding:0 2px}.stat-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--ink-2);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}.pill b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}.pill .dotmark{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}.pill--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 38%,transparent);background:var(--ok-soft)}.pill--ok b{color:var(--ok)}.pill--ok .dotmark{background:var(--ok)}.pill--accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,transparent);background:var(--accent-soft)}.pill--accent b{color:var(--accent)}.pill--accent .dotmark{background:var(--accent)}.privacy-note{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);letter-spacing:.01em}.privacy-note svg{width:14px;height:14px;color:var(--ok);flex:none}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;min-width:0}.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}.panel__title{display:flex;align-items:baseline;gap:9px;font-size:13.5px;font-weight:600;letter-spacing:.02em}.panel__title .en{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}.panel__meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);letter-spacing:.02em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}.panel__meta b{color:var(--accent);font-weight:600}.work{display:grid;gap:clamp(14px,1.8vw,18px);grid-template-columns:minmax(0,392px) minmax(0,1fr);align-items:start}@media(max-width:940px){.work{grid-template-columns:1fr}}.left,.right{display:flex;flex-direction:column;gap:14px;min-width:0}.stage{overflow:hidden}.stage__body{position:relative}.dropzone{border:1.5px dashed color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:var(--radius);background:var(--surface);padding:38px 22px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;transition:border-color .16s,background .16s}.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}.dropzone__ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--accent-soft);color:var(--accent)}.dropzone__ico svg{width:26px;height:26px}.dropzone__t{font-size:14.5px;font-weight:600;color:var(--ink)}.dropzone__t b{color:var(--accent)}.dropzone__s{font-size:11.5px;color:var(--ink-3);line-height:1.55;text-wrap:pretty;max-width:30ch}.dropzone__keys{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:2px}.kbd{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 7px;background:var(--surface-2)}.dropzone__formats{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.fmt-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:2px 6px}.imgview{display:none;flex-direction:column}.stage.has-img .dropzone{display:none}.stage.has-img .imgview{display:flex}.imgview__frame{position:relative;background:repeating-conic-gradient(var(--surface-3) 0 25%,transparent 0 50%) 0 0/18px 18px,var(--surface-2);display:grid;place-items:center;min-height:236px;max-height:340px;overflow:hidden;border-bottom:1px solid var(--line);cursor:crosshair}.imgview__frame img{max-width:100%;max-height:340px;display:block}.imgview__loupe{position:absolute;pointer-events:none;display:none;align-items:center;gap:8px;background:var(--ink);color:var(--bg);padding:6px 9px;border-radius:8px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;transform:translate(-50%,-150%);white-space:nowrap;z-index:4;box-shadow:0 8px 22px -8px #0009}.imgview__loupe .sw{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.5);flex:none}.imgview__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap}.imgview__name{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:80px}.imgview__dims{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}.minibtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:500;cursor:pointer;transition:border-color .14s,color .14s,background .14s}.minibtn:hover{color:var(--ink);border-color:var(--ink-3)}.minibtn svg{width:14px;height:14px}.controls{padding:16px;display:flex;flex-direction:column;gap:17px}.ctl{display:flex;flex-direction:column;gap:9px}.ctl__lbl{display:flex;align-items:center;justify-content:space-between;gap:10px}.ctl__lbl .t{font-size:12.5px;font-weight:600;color:var(--ink)}.ctl__lbl .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}.seg{display:flex;padding:3px;gap:3px;background:var(--surface-3);border-radius:11px;border:1px solid var(--line)}.seg button{flex:1;min-height:42px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:color .15s;padding:5px 6px;line-height:1.25}.seg button .sub{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #00000014;border:1px solid var(--line)}.seg button[aria-pressed=true] .sub{color:var(--accent)}.mode-desc{font-size:11.5px;color:var(--ink-3);line-height:1.55;text-wrap:pretty;display:flex;gap:7px;align-items:flex-start}.mode-desc svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--ink-3)}.countrow{display:flex;align-items:center;gap:14px}.countrow input[type=range]{flex:1}.count-val{font-family:var(--mono);font-size:20px;font-weight:600;min-width:62px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}.count-val small{font-size:11px;color:var(--ink-3);font-weight:400;margin-left:2px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--line);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 1px 4px #00000040;cursor:pointer}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);cursor:pointer}.swatches{padding:14px;display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column;cursor:grab;position:relative;transition:transform .12s,box-shadow .14s,border-color .14s}.swatch:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px #0006;border-color:var(--ink-3)}.swatch:active{cursor:grabbing}.swatch.dragging{opacity:.5}.swatch__chip{height:88px;position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:9px}.swatch__rank{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:999px;backdrop-filter:blur(4px)}.swatch__share{font-family:var(--mono);font-size:9.5px;padding:2px 6px;border-radius:6px;backdrop-filter:blur(4px);letter-spacing:.02em}.swatch__body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:7px}.swatch__hex{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink);display:flex;align-items:center;gap:7px;cursor:pointer;text-transform:uppercase}.swatch__hex:hover{color:var(--accent)}.swatch__hex .ic{width:13px;height:13px;opacity:0;transition:opacity .14s}.swatch__hex:hover .ic{opacity:.7}.swatch__codes{display:flex;flex-direction:column;gap:3px}.code-line{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.01em;display:flex;align-items:center;gap:6px;cursor:pointer;border-radius:5px;padding:1px 4px;margin:0 -4px;transition:background .12s,color .12s}.code-line:hover{background:var(--surface-3);color:var(--ink-2)}.code-line .tag{color:var(--ink-3);opacity:.7;min-width:26px}.swatch__foot{display:flex;align-items:center;gap:6px;padding:8px 11px;border-top:1px solid var(--line-2)}.swatch__name{font-family:var(--mono);font-size:10px;color:var(--ink-3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch__link{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--accent);padding:3px 8px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:var(--accent-soft);transition:filter .14s;white-space:nowrap}.swatch__link:hover{filter:brightness(1.04)}.swatch__link svg{width:11px;height:11px}.swatches-empty{grid-column:1/-1;padding:48px 20px;text-align:center;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:12px}.swatches-empty svg{width:38px;height:38px;opacity:.5}.swatches-empty__t{font-size:13px;color:var(--ink-2);font-weight:500}.swatches-empty__s{font-size:11.5px;max-width:34ch;line-height:1.6;text-wrap:pretty}.swatch--skel{border-style:dashed;pointer-events:none}.swatch--skel .swatch__chip{background:linear-gradient(100deg,var(--surface-3) 30%,var(--surface-2) 50%,var(--surface-3) 70%);background-size:200% 100%;animation:shimmer 1.1s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.out__tabs{display:flex;gap:4px}.tab{height:32px;padding:0 13px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink-3);font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .14s,background .14s,border-color .14s}.tab svg{width:14px;height:14px}.tab:hover{color:var(--ink-2)}.tab[aria-selected=true]{color:var(--ink);background:var(--surface-3);border-color:var(--line)}.out__panes{position:relative}.pane{display:none}.pane.is-on{display:block}.codewrap{position:relative}.code-format{display:flex;gap:5px;padding:11px 14px 0}.fmt-tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-3);padding:4px 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;transition:color .14s,border-color .14s,background .14s}.fmt-tab[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.codeblock{margin:11px 14px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);position:relative;overflow:hidden}.codeblock pre{margin:0;padding:15px 16px;overflow:auto;max-height:320px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-2);scrollbar-width:thin;scrollbar-color:var(--line) transparent;white-space:pre}.codeblock pre::-webkit-scrollbar{width:9px;height:9px}.codeblock pre::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}.codeblock .tok-key{color:var(--ink);font-weight:500}.codeblock .tok-val{color:var(--accent)}.codeblock .tok-com{color:var(--ink-3);font-style:italic}.code-copy{position:absolute;top:9px;right:9px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:11.5px;font-weight:500;cursor:pointer;transition:color .14s,border-color .14s,background .14s}.code-copy:hover{color:var(--ink);border-color:var(--ink-3)}.code-copy svg{width:13px;height:13px}.code-copy.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-soft)}.uiprev{padding:14px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 188px;align-items:start}@media(max-width:560px){.uiprev{grid-template-columns:1fr}}.mock{border-radius:13px;overflow:hidden;border:1px solid var(--line);background:var(--mock-bg,#ffffff);color:var(--mock-text,#15181d);transition:background .2s,color .2s;min-height:280px;display:flex;flex-direction:column}.mock[data-drop=bg]{outline:2px dashed var(--accent);outline-offset:-4px}.mock__bar{display:flex;align-items:center;gap:9px;padding:13px 15px}.mock__dot{width:10px;height:10px;border-radius:50%;background:var(--mock-primary,#2f53c8)}.mock__brand{font-size:13px;font-weight:700;letter-spacing:.01em}.mock__nav{margin-left:auto;display:flex;gap:13px;font-size:11px;opacity:.7}.mock__hero{padding:6px 15px 16px}.mock__eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mock-primary,#2f53c8);font-weight:600}.mock__h{font-size:21px;font-weight:700;line-height:1.25;margin:7px 0 8px;letter-spacing:-.01em}.mock__p{font-size:11.5px;line-height:1.6;opacity:.72;max-width:34ch}.mock__row{display:flex;gap:9px;align-items:center;margin-top:14px}.mock__btn{height:36px;padding:0 16px;border-radius:9px;border:0;cursor:pointer;background:var(--mock-primary,#2f53c8);color:var(--mock-onprimary,#fff);font-size:12.5px;font-weight:600;font-family:inherit;transition:background .2s,color .2s}.mock__btn--ghost{background:transparent;color:var(--mock-text,#15181d);border:1px solid currentColor;opacity:.7}.mock__card{margin:auto 15px 15px;padding:13px;border-radius:11px;background:var(--mock-card,rgba(0,0,0,.04));display:flex;gap:11px;align-items:center}.mock__avatar{width:38px;height:38px;border-radius:10px;background:var(--mock-primary,#2f53c8);flex:none;opacity:.9}.mock__cardtxt .a{font-size:12px;font-weight:600}.mock__cardtxt .b{font-size:10.5px;opacity:.62}.roles{display:flex;flex-direction:column;gap:9px}.roles__hint{font-size:10.5px;color:var(--ink-3);line-height:1.5;text-wrap:pretty}.role{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;transition:border-color .14s,background .14s}.role:hover{border-color:var(--ink-3)}.role.armed{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.role.dragover{border-color:var(--accent);background:var(--accent-soft)}.role__sw{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);flex:none;box-shadow:inset 0 0 0 1px #ffffff40}.role__txt{flex:1;min-width:0}.role__name{font-size:12px;font-weight:600;color:var(--ink)}.role__val{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;display:block}.role__shuffle{width:26px;height:26px;border:0;background:transparent;color:var(--ink-3);border-radius:7px;cursor:pointer;display:grid;place-items:center}.role__shuffle:hover{color:var(--accent);background:var(--accent-soft)}.role__shuffle svg{width:14px;height:14px}.dragveil{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:40px;background:color-mix(in srgb,var(--accent) 30%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.dragveil.show{display:flex}.dragveil__card{background:var(--surface);border:2px dashed var(--accent);border-radius:20px;padding:42px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 30px 80px -20px #00000080}.dragveil__card svg{width:48px;height:48px;color:var(--accent)}.dragveil__t{font-size:18px;font-weight:600;color:var(--ink)}.dragveil__s{font-size:13px;color:var(--ink-2)}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);z-index:200;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:13px;letter-spacing:.02em;box-shadow:0 14px 34px -14px #00000080;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;display:flex;align-items:center;gap:9px;max-width:90vw}.toast .sw{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.4)}.toast svg{width:16px;height:16px;flex:none;color:var(--ok)}.toast.show{opacity:1;transform:translate(-50%)}.foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-3)}.foot__left{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.02em}.foot__left svg{width:15px;height:15px;color:var(--accent)}.foot__note{font-size:11.5px;letter-spacing:.01em}@media(max-width:720px){.brand__sub,.btn .lbl{display:none}.btn--primary .lbl{display:inline}.privacy-note{display:none}}@media(prefers-reduced-motion:reduce){.swatch--skel .swatch__chip{animation:none}}