:root{--bg: #f4f0e8;--bg-2: #ede6da;--surface: #fffdf8;--surface-2: #faf5ec;--surface-3: #f1eadc;--ink: #211c15;--ink-2: #5b5346;--ink-3: #8c8472;--line: rgba(33, 28, 21, .12);--line-2: rgba(33, 28, 21, .065);--accent: #3a55c4;--accent-ink: #ffffff;--accent-deep: #2c43a6;--accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);--accent-line: color-mix(in srgb, var(--accent) 50%, var(--line));--enc: #3a55c4;--enc-soft: color-mix(in srgb, var(--enc) 12%, transparent);--enc-line: color-mix(in srgb, var(--enc) 44%, var(--line));--dec: #16876b;--dec-soft: color-mix(in srgb, var(--dec) 13%, transparent);--dec-line: color-mix(in srgb, var(--dec) 44%, var(--line));--warn: #c07d1a;--danger: #c0432c;--ok: #2f9d6a;--radius: 14px;--radius-sm: 9px;--maxw: 1340px;--font: "IBM Plex Sans JP", system-ui, -apple-system, sans-serif;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;--shadow-1: 0 1px 2px rgba(40, 30, 14, .05);--shadow-2: 0 16px 40px -24px rgba(40, 30, 14, .42);--io-pad: 14px 16px;--io-size: 13.5px;--io-lh: 1.7}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #14110c;--bg-2: #1a160f;--surface: #1e1913;--surface-2: #241e16;--surface-3: #2b231a;--ink: #f1eadd;--ink-2: #b4a991;--ink-3: #7d7464;--line: rgba(255, 244, 226, .13);--line-2: rgba(255, 244, 226, .06);--accent: #6f86ec;--accent-deep: #5b72de;--accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);--accent-line: color-mix(in srgb, var(--accent) 56%, var(--line));--enc: #7589ec;--enc-soft: color-mix(in srgb, var(--enc) 22%, transparent);--enc-line: color-mix(in srgb, var(--enc) 52%, var(--line));--dec: #45c49a;--dec-soft: color-mix(in srgb, var(--dec) 22%, transparent);--dec-line: color-mix(in srgb, var(--dec) 50%, var(--line));--warn: #dba23f;--danger: #e0685a;--ok: #4fb27e;--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--shadow-2: 0 18px 46px -24px rgba(0, 0, 0, .7)}}[data-theme=dark]{--bg: #14110c;--bg-2: #1a160f;--surface: #1e1913;--surface-2: #241e16;--surface-3: #2b231a;--ink: #f1eadd;--ink-2: #b4a991;--ink-3: #7d7464;--line: rgba(255, 244, 226, .13);--line-2: rgba(255, 244, 226, .06);--accent: #6f86ec;--accent-deep: #5b72de;--accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);--accent-line: color-mix(in srgb, var(--accent) 56%, var(--line));--enc: #7589ec;--enc-soft: color-mix(in srgb, var(--enc) 22%, transparent);--enc-line: color-mix(in srgb, var(--enc) 52%, var(--line));--dec: #45c49a;--dec-soft: color-mix(in srgb, var(--dec) 22%, transparent);--dec-line: color-mix(in srgb, var(--dec) 50%, var(--line));--warn: #dba23f;--danger: #e0685a;--ok: #4fb27e;--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--shadow-2: 0 18px 46px -24px rgba(0, 0, 0, .7)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}html,body{height:100%}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55;overflow:hidden}a{color:inherit;text-decoration:none}button{font-family:inherit}.app{position:relative;height:100dvh;display:flex;flex-direction:column}.topbar{flex:none;display:flex;align-items:center;gap:16px;padding:12px clamp(14px,2.6vw,26px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:30}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand__mark{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--surface);border:1px solid var(--line);color:var(--accent);transition:border-color .16s,transform .16s}.brand:hover .brand__mark{border-color:var(--accent-line);transform:translateY(-1px)}.brand__mark svg{width:21px;height:21px}.brand__txt{min-width:0}.brand__name{font-size:15.5px;font-weight:600;line-height:1.15;white-space:nowrap}.brand__sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}.badges{display:flex;align-items:center;gap:8px;margin-left:4px}.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap}.badge svg{width:13px;height:13px;color:var(--ok)}.badge.badge--lock svg{color:var(--accent)}.topspring{flex:1 1 12px}.actions{display:flex;align-items:center;gap:7px}.iconbtn{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:color .16s,border-color .16s,background .16s,transform .12s;position:relative}.iconbtn:hover{color:var(--ink);border-color:var(--ink-3)}.iconbtn:active{transform:translateY(1px)}.iconbtn svg{width:19px;height:19px}.iconbtn .tip{position:absolute;top:46px;left:50%;transform:translate(-50%);font-family:var(--mono);font-size:10.5px;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:40}.iconbtn:hover .tip{opacity:.95}.subbar{flex:none;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px clamp(14px,2.6vw,26px);border-bottom:1px solid var(--line);background:var(--surface-2)}.ctlgroup{display:inline-flex;align-items:center;gap:9px;min-width:0}.ctlgroup__lab{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}.ctlgroup__lab svg{width:15px;height:15px;color:var(--ink-3)}.subspring{flex:1 1 18px}.seg{display:inline-flex;align-items:center;position:relative;padding:3px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line)}.seg button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border:none;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:600;border-radius:7px;cursor:pointer;position:relative;z-index:1;transition:color .16s;white-space:nowrap}.seg button svg{width:15px;height:15px}.seg button.is-on{color:var(--accent)}.seg__thumb{position:absolute;top:3px;bottom:3px;border-radius:7px;background:var(--surface);box-shadow:var(--shadow-1);border:1px solid var(--accent-line);transition:left .22s cubic-bezier(.3,.7,.4,1),width .22s;z-index:0}.detect{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:color .18s,border-color .18s,background .18s}.detect .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none;transition:background .18s}.detect .dir-en{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.app[data-dir=encode] .detect{color:var(--enc);border-color:var(--enc-line);background:var(--enc-soft)}.app[data-dir=encode] .detect .dot{background:var(--enc)}.app[data-dir=decode] .detect{color:var(--dec);border-color:var(--dec-line);background:var(--dec-soft)}.app[data-dir=decode] .detect .dot{background:var(--dec)}.minibtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .12s}.minibtn:hover{color:var(--ink);border-color:var(--ink-3)}.minibtn:active{transform:translateY(1px)}.minibtn:disabled{opacity:.4;cursor:default;pointer-events:none}.minibtn svg{width:15px;height:15px}.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.8vw,20px);padding:clamp(12px,1.8vw,20px) clamp(14px,2.6vw,26px);overflow:hidden;position:relative}.flowmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);color:var(--ink-3);transition:color .2s,border-color .2s,transform .3s;pointer-events:none}.flowmark svg{width:18px;height:18px;transition:transform .3s}.app[data-dir=encode] .flowmark{color:var(--enc);border-color:var(--enc-line)}.app[data-dir=decode] .flowmark{color:var(--dec);border-color:var(--dec-line)}.app[data-dir=decode] .flowmark svg{transform:rotate(180deg)}@media(max-width:920px){.flowmark{display:none}}.panel{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}.panel--in{--tone: var(--enc);--tone-line: var(--enc-line);--tone-soft: var(--enc-soft)}.panel--out{--tone: var(--accent);--tone-line: var(--accent-line);--tone-soft: var(--accent-soft)}.app[data-dir=decode] .panel--out{--tone: var(--dec);--tone-line: var(--dec-line);--tone-soft: var(--dec-soft)}.panel__head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-2)}.panel__title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:.01em;white-space:nowrap;flex:none}.panel__title .tag{width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 20%,transparent)}.panel__title .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}.head-tools{display:flex;align-items:center;gap:8px;min-width:0}.typepill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--tone);padding:4px 10px;border-radius:999px;border:1px solid var(--tone-line);background:var(--tone-soft);letter-spacing:.04em;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}.typepill svg{width:12px;height:12px;flex:none}.typepill.is-hidden{display:none}.countpill{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-variant-numeric:tabular-nums;white-space:nowrap}.countpill b{color:var(--ink);font-weight:600;font-size:12px}.icontiny{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3);cursor:pointer;transition:color .15s,border-color .15s,background .15s}.icontiny:hover{color:var(--tone);border-color:var(--tone-line)}.icontiny:disabled{opacity:.4;cursor:default;pointer-events:none}.icontiny svg{width:14px;height:14px}.panel__body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.io{flex:1;min-height:0;margin:12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,background .15s}.io.focus{border-color:var(--tone);background:var(--surface);box-shadow:0 0 0 3px var(--tone-soft)}.input{flex:1;width:100%;min-height:0;margin:0;padding:var(--io-pad);font-family:var(--mono);font-size:var(--io-size);line-height:var(--io-lh);color:var(--ink);background:transparent;border:0;resize:none;outline:none;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;caret-color:var(--accent)}.input::placeholder{color:var(--ink-3)}.input.wrap-off{word-break:normal;overflow-wrap:normal;white-space:pre}.input::-webkit-scrollbar{width:10px;height:10px}.input::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 42%,transparent);border-radius:6px;border:3px solid transparent;background-clip:content-box}.output-text{flex:1;width:100%;min-height:0;margin:0;padding:var(--io-pad);font-family:var(--mono);font-size:var(--io-size);line-height:var(--io-lh);color:var(--ink);background:transparent;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;overflow:auto;-webkit-user-select:text;user-select:text}.output-text.wrap-off{word-break:normal;overflow-wrap:normal;white-space:pre}.output-text::-webkit-scrollbar{width:10px;height:10px}.output-text::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 42%,transparent);border-radius:6px;border:3px solid transparent;background-clip:content-box}.filechip{display:none;align-items:center;gap:11px;margin:12px 12px 0;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--enc-line);background:var(--enc-soft)}.filechip.show{display:flex}.filechip__thumb{width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-3);border:1px solid var(--line);display:grid;place-items:center;color:var(--enc)}.filechip__thumb img{width:100%;height:100%;object-fit:cover;display:block}.filechip__thumb svg{width:18px;height:18px}.filechip__txt{flex:1;min-width:0}.filechip__name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filechip__meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);letter-spacing:.02em;margin-top:1px}.filechip__x{width:28px;height:28px;flex:none;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:color .14s,background .14s}.filechip__x:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.filechip__x svg{width:15px;height:15px}.io.drag,.panel--in.drag .io{border-color:var(--enc);border-style:dashed;background:var(--enc-soft)}.io-hint{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;pointer-events:none;color:var(--ink-3);transition:opacity .2s}.io-hint__ic{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--surface-3);border:1px solid var(--line);color:var(--ink-3)}.io-hint__ic svg{width:24px;height:24px}.io-hint__t{font-size:13px;font-weight:600;color:var(--ink-2)}.io-hint__s{font-size:11.5px;line-height:1.6;text-wrap:pretty;max-width:34ch}.io-hint__fmts{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:4px}.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}.panel--in.has-content .io-hint{opacity:0}.out-empty{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;pointer-events:none;color:var(--ink-3)}.out-empty__ic{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--surface-3);border:1px solid var(--line)}.out-empty__ic svg{width:23px;height:23px;opacity:.8}.out-empty__t{font-size:13px;color:var(--ink-2);font-weight:600}.out-empty__s{font-size:11.5px;line-height:1.6;max-width:34ch;text-wrap:pretty}.panel--out.has-output .out-empty{display:none}.out-error{margin:12px;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--danger) 42%,transparent);background:color-mix(in srgb,var(--danger) 10%,transparent);display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink);line-height:1.6}.out-error svg{width:17px;height:17px;flex:none;color:var(--danger);margin-top:1px}.out-error b{color:var(--danger)}.snippet-tabs{flex:none;display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 12px 0}.snippet-tab{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer;transition:color .14s,border-color .14s,background .14s}.snippet-tab:hover{color:var(--ink);border-color:var(--ink-3)}.snippet-tab.is-on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}.snippet-tab svg{width:12px;height:12px}.preview{flex:none;margin:12px 12px 0;border-radius:var(--radius-sm);border:1px solid var(--line);background:repeating-conic-gradient(var(--surface-3) 0% 25%,var(--surface-2) 0% 50%) 50% / 18px 18px;display:grid;place-items:center;max-height:230px;overflow:hidden;position:relative}.preview img{max-width:100%;max-height:230px;object-fit:contain;display:block}.preview__pdf,.preview__file{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;color:var(--ink-2);background:var(--surface-2);width:100%}.preview__pdf svg,.preview__file svg{width:38px;height:38px;color:var(--dec)}.preview__file .nm{font-size:12.5px;font-weight:600;color:var(--ink)}.out-meta{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 12px 0}.metachip{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-variant-numeric:tabular-nums;white-space:nowrap}.metachip b{color:var(--ink);font-weight:600}.metachip--accent{border-color:var(--tone-line);background:var(--tone-soft);color:var(--tone)}.metachip--accent b{color:var(--tone)}.out-meta__spring{flex:1}.dlbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;border:1px solid transparent;background:var(--dec);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .12s}.dlbtn:hover{filter:brightness(1.07)}.dlbtn:active{transform:translateY(1px)}.dlbtn svg{width:15px;height:15px}.copybtn{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:8px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .12s,background .15s}.copybtn:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}.copybtn:active{transform:translateY(1px)}.copybtn:disabled{opacity:.4;cursor:default;pointer-events:none}.copybtn svg{width:14px;height:14px}.copybtn.copied{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 46%,transparent);background:color-mix(in srgb,var(--ok) 13%,transparent)}.statusbar{flex:none;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:9px clamp(14px,2.6vw,26px);border-top:1px solid var(--line);background:var(--surface-2)}.foot__brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);white-space:nowrap}.foot__brand svg{width:14px;height:14px;color:var(--accent)}.foot__note{font-size:11.5px;color:var(--ink-3);letter-spacing:.01em}.foot__keys{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.kbdhint{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:11.5px;color:var(--ink-3)}kbd{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px;border:1px solid var(--line);border-bottom-width:2px;background:var(--surface);color:var(--ink-2)}.dragveil{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:40px;background:color-mix(in srgb,var(--accent) 24%,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:40px 54px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 30px 80px -20px #00000080}.dragveil__card svg{width:46px;height:46px;color:var(--accent)}.dragveil__t{font-size:17px;font-weight:600;color:var(--ink)}.dragveil__s{font-size:12.5px;color:var(--ink-2)}.toast{position:fixed;left:50%;bottom:60px;transform:translate(-50%,16px);z-index:220;display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:13px;box-shadow:0 16px 36px -14px #0000008c;opacity:0;pointer-events:none;transition:opacity .24s,transform .24s}.toast.show{opacity:1;transform:translate(-50%)}.toast svg{width:16px;height:16px;flex:none;color:var(--ok)}@media(max-width:920px){body{overflow:auto}.app{height:auto;min-height:100dvh}.main{grid-template-columns:1fr;overflow:visible}.panel{overflow:visible}.io{min-height:280px}.badges{display:none}}@media(max-width:620px){.brand__sub,.foot__keys,.seg button span{display:none}.seg button{padding:0 11px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}