@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* base64.im — design tokens, light by default; [data-theme=dark] set by theme.js before first paint. */
:root{--bg:#f7f7f4;--panel:#fff;--ink:#18191b;--ink2:#3c3f44;--muted:#63676e;--line:#e4e4de;--hover:#f0f0eb;--accent:oklch(.55 .13 155);--accent-text:oklch(.47 .12 155);--accent-ink:#fff;--accent-soft:oklch(.96 .03 155);--err:oklch(.55 .17 25);--err-soft:oklch(.96 .03 25);--j1:oklch(.56 .14 25);--j2:oklch(.56 .14 290);--j3:oklch(.56 .12 200);--sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans','Malgun Gothic','Microsoft YaHei',sans-serif;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light}
:root[data-theme=dark]{--bg:#111312;--panel:#191b1a;--ink:#e8e9e6;--ink2:#c4c7c3;--muted:#959a96;--line:#2a2e2c;--hover:#222624;--accent:oklch(.72 .14 155);--accent-text:oklch(.78 .13 155);--accent-ink:#0c1510;--accent-soft:oklch(.3 .05 155);--err:oklch(.72 .15 25);--err-soft:oklch(.28 .05 25);--j1:oklch(.75 .13 25);--j2:oklch(.75 .13 290);--j3:oklch(.75 .11 200);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
h1,h2,h3,p,ol,ul,pre,dl,dd{margin:0}
a{color:var(--accent-text)}a:hover{color:var(--ink)}
button{font:500 12.5px var(--sans);color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
button:disabled{cursor:default}
code,kbd,pre,textarea{font-family:var(--mono)}
[hidden]{display:none!important}
::selection{background:var(--accent-soft)}
:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}textarea:focus-visible{outline:none}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
summary{list-style:none}summary::-webkit-details-marker{display:none}
.skip{position:absolute;left:-999px;top:8px;z-index:50;padding:8px 12px;background:var(--panel);border-radius:8px}.skip:focus{left:8px}
.mono{font-family:var(--mono)}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{max-width:1200px;margin:0 auto;padding:8px 24px;min-height:60px;display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.logo:hover{color:var(--ink)}
.logo-mark{width:28px;height:28px;flex:none;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.logo-mark svg{width:69%;height:auto;display:block;fill:currentColor}
.logo .tld{color:var(--muted);font-weight:400}
.tabs{display:flex;gap:2px;flex:1 1 auto;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;color:var(--muted);font-weight:500;font-size:13.5px;text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{background:var(--accent-soft);color:var(--accent-text)}
.header-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:500 13px var(--sans);transition:border-color .15s}
.lang-btn:hover{border-color:var(--muted)}
.lang-btn[aria-expanded=true]{border-color:var(--accent)}
.lang-code{min-width:22px;height:20px;padding:0 3px;border-radius:5px;background:var(--hover);color:var(--muted);display:grid;place-items:center;font:600 10px var(--mono);letter-spacing:.03em}
.chev{width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);margin:0 2px;transition:transform .15s}
.lang-btn[aria-expanded=true] .chev{transform:translateY(2px) rotate(-135deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:212px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 10px 30px -8px rgba(15,20,15,.18),0 2px 6px rgba(15,20,15,.06);display:flex;flex-direction:column;gap:1px}
.lang-menu a{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13px}
.lang-menu a:hover{background:var(--hover);color:var(--ink)}
.lang-menu a[aria-current]{background:var(--accent-soft)}
.lang-menu .code{width:22px;font:600 10px var(--mono);color:var(--muted)}
.lang-menu .name{flex:1}
.lang-menu .check{color:var(--accent-text);font-size:12px}
.theme-switch{display:flex;padding:2px;gap:2px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.theme-switch button{display:flex;align-items:center;justify-content:center;width:28px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);transition:background .15s,color .15s}
.theme-switch button[aria-checked=true]{background:var(--hover);color:var(--ink)}
.theme-switch .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor}
.theme-switch [data-theme-value=dark] .dot{background:currentColor}

/* Main + tool */
main{max-width:1200px;margin:0 auto;padding:32px 24px 64px;display:flex;flex-direction:column;gap:56px}
.tool{display:flex;flex-direction:column;gap:18px}
.intro{display:flex;flex-direction:column;gap:8px;max-width:760px}
.intro h1{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.intro p{color:var(--muted);font-size:15px;line-height:1.6;text-wrap:pretty}
.crumbs{display:flex;gap:6px;font-size:12.5px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span:last-child{color:var(--ink)}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.segmented{display:flex;padding:3px;gap:2px;background:var(--hover);border:1px solid var(--line);border-radius:10px}
.segmented button{height:30px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:500 13px var(--sans)}
.segmented button[aria-checked=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dir{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dir i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dir[data-state=ok] i{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dir[data-state=error] i{background:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.toggles{display:flex;gap:6px;flex-wrap:wrap}
.charset{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:500 12.5px var(--sans);cursor:pointer}
.charset:hover{border-color:var(--muted)}
.toggle{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.toggle .track{width:24px;height:14px;border-radius:7px;background:var(--line);position:relative;transition:background .15s}
.toggle .track::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:left .15s}
.toggle[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.toggle[aria-pressed=true] .track{background:var(--accent)}
.toggle[aria-pressed=true] .track::after{left:12px}
.panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.panes.narrow{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.pane{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:380px;overflow:hidden;box-shadow:0 1px 2px rgba(20,20,15,.04)}
.pane.auto{min-height:0}
.pane[data-state=error]{border-color:var(--err)}
.pane-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.pane-head.wrap{flex-wrap:wrap;padding:8px}
.pane-title{display:flex;gap:10px;align-items:baseline}
.pane-title strong{font-size:13px;font-weight:600;white-space:nowrap}
.stat{font:12px var(--mono);color:var(--muted)}
.actions{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.btn-ghost{height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--hover);color:var(--ink)}
.btn-ghost[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-text)}
.btn-primary{height:30px;min-width:72px;padding:0 12px;border:0;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-weight:600;transition:background .15s}
.btn-primary:disabled{background:var(--hover);color:var(--muted)}
.btn-primary.lg{height:36px;padding:0 16px;font-size:13px;border-radius:8px}
.btn-outline{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink)}
.btn-outline:hover{border-color:var(--muted)}
.btn-outline.lg{height:36px;padding:0 16px;font-size:13px;border-radius:8px}
.editor{flex:1;min-height:320px;width:100%;padding:16px;border:0;outline:none;resize:vertical;background:transparent;color:var(--ink);caret-color:var(--accent);font:14px/1.65 var(--mono);word-break:break-all}
.editor.small{font-size:12.5px;line-height:1.6}
.editor.short{flex:none;min-height:110px;font-size:13px;line-height:1.6}
.text-view{flex:1;display:flex;flex-direction:column}
.editor::placeholder{color:var(--muted);opacity:.75}
.hint{padding:0 16px 12px;font-size:12px;color:var(--muted)}
.drop-overlay{position:absolute;inset:6px;border:2px dashed var(--accent);border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-text);font-weight:600;pointer-events:none}
.file-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px}
.file-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);max-width:100%}
.file-ext{width:36px;height:44px;flex:none;border-radius:5px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font:600 10px var(--mono)}
.file-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.file-info strong{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-view .note{font-size:12.5px;color:var(--muted)}
.empty{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px 16px}
.empty>span{font-size:13px;color:var(--muted)}
.examples{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.examples button{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);text-align:left;font-weight:400}
.examples button:hover{border-color:var(--accent)}
.examples code{font-size:12px;word-break:break-all}
.examples span{font-size:12px;color:var(--muted)}
.error-box{flex:1;padding:20px 16px;display:flex;flex-direction:column;gap:14px}
.error-box .err-head{display:flex;flex-direction:column;gap:4px}
.error-box strong{color:var(--err);font-weight:600}
.error-box .err-msg{color:var(--ink2);line-height:1.6;text-wrap:pretty}
.err-snippet{font:13px/1.7 var(--mono);padding:12px 14px;border-radius:8px;background:var(--err-soft);color:var(--muted);word-break:break-all}
.err-snippet mark{background:var(--err);color:#fff;padding:1px 4px;border-radius:3px}
.error-box .btns{display:flex;gap:8px;flex-wrap:wrap}
.binary{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px}
.binary p{color:var(--ink2);line-height:1.6}
.hex{padding:12px 14px;border-radius:8px;background:var(--bg);font:12.5px/1.7 var(--mono);color:var(--ink);white-space:pre;overflow:auto}
.statusbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;font:12px var(--mono);color:var(--muted)}
.statusbar .keys{display:flex;align-items:center;gap:6px}
kbd{padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--panel);font:11px var(--mono);color:var(--ink)}

/* Image tools */
.dropzone{min-height:340px;border:1.5px dashed var(--line);border-radius:14px;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;transition:background .15s,border-color .15s}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.drop-icon{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font:600 18px var(--mono)}
.dropzone strong{font-size:17px;font-weight:600}
.dropzone>span{color:var(--muted)}
.dropzone .btns{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.inline-err{color:var(--err)}
.checker{flex:1;min-height:240px;display:grid;place-items:center;padding:20px;background-color:var(--panel);background-image:conic-gradient(var(--hover) 25%,transparent 0 50%,var(--hover) 0 75%,transparent 0);background-size:16px 16px}
.checker.tall{min-height:280px}
.checker img{max-width:100%;max-height:300px;display:block}
.checker .msg{color:var(--muted);background:var(--panel);padding:6px 10px;border-radius:6px}
.checker .msg.err{color:var(--err);padding:10px 14px;border-radius:8px;max-width:320px;text-align:center;line-height:1.5}
.meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;padding:14px 16px;border-top:1px solid var(--line);font-size:13px}
.meta dt{color:var(--muted)}
.meta dd{font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pane-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pane-foot.compact{padding:8px 16px;font:12px var(--mono);color:var(--muted)}
.pane-foot .stat{font-size:12.5px}
.row-btns{display:flex;gap:6px;padding:0 16px 14px}

/* JWT */
.token-view{padding:16px;font:13px/1.65 var(--mono);word-break:break-all;cursor:text;min-height:78px}
.token-view .p0{color:var(--j1)}.token-view .p1{color:var(--j2)}.token-view .p2{color:var(--j3)}.token-view .sep{color:var(--muted)}
.pane-error{padding:12px 16px;border-top:1px solid var(--line);color:var(--err)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-head{padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-head .sq{width:8px;height:8px;border-radius:2px}
.card-head .alg{margin-left:auto;font:400 12px var(--mono);color:var(--muted)}
.card pre{padding:16px;font:13px/1.6 var(--mono);white-space:pre-wrap;word-break:break-all}
.claim{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-bottom:1px solid var(--line)}
.claim:last-child{border-bottom:0}
.claim .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.claim .k{font:500 13px var(--mono)}
.claim .v{color:var(--muted);font-size:13px}
.tag{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--hover);color:var(--muted)}
.tag.ok{background:var(--accent-soft);color:var(--accent-text)}
.tag.bad{background:var(--err-soft);color:var(--err)}
.bg-j1{background:var(--j1)}.bg-j2{background:var(--j2)}.bg-j3{background:var(--j3)}

/* Article */
.layout{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.article{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:44px;max-width:780px}
.article section{display:flex;flex-direction:column;gap:14px}
.article h2{font-size:21px;font-weight:600;letter-spacing:-.01em}
.article p{color:var(--ink2);line-height:1.7;text-wrap:pretty}
.steps{padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:14px}
.steps .n{flex:none;width:24px;height:24px;border-radius:6px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font:600 12px var(--mono)}
.steps span:last-child{color:var(--ink2);line-height:1.7}
.alphabet{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.alphabet div{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-radius:6px;background:var(--bg)}
.alphabet b{font:500 15px var(--mono);color:var(--ink)}
.alphabet small{font:10px var(--mono);color:var(--muted)}
.alphabet .pad{background:var(--accent-soft)}.alphabet .pad b{color:var(--accent-text)}
.table{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.table>div{display:grid;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.table>div:last-child{border-bottom:0}
.table .th{padding:10px 16px;font-size:12px;font-weight:600;color:var(--muted)}
.table.cols3>div{grid-template-columns:minmax(110px,1fr) minmax(120px,1.2fr) minmax(0,2fr)}
.table.cols2>div{grid-template-columns:minmax(90px,1fr) minmax(0,3fr)}
.table.claims>div{grid-template-columns:64px minmax(0,1fr);padding:11px 16px}
.table .name{font-weight:500}
.table .code{font:13px var(--mono)}
.table .desc{color:var(--ink2)}
.table .stack{display:flex;flex-direction:column;gap:4px}
.table .stack code{font-size:12.5px;color:var(--accent-text);word-break:break-all}
.sigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sigs div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.sigs b{font-weight:600}.sigs code{font-size:12px;color:var(--muted)}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
.parts div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-top:3px solid;border-radius:10px;background:var(--panel)}
.parts b{font-weight:600}.parts span{color:var(--ink2);line-height:1.6}
.parts .c1{border-top-color:var(--j1)}.parts .c1 b{color:var(--j1)}
.parts .c2{border-top-color:var(--j2)}.parts .c2 b{color:var(--j2)}
.parts .c3{border-top-color:var(--j3)}.parts .c3 b{color:var(--j3)}
.faq{gap:6px!important}
.faq h2{margin-bottom:6px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:15px 0;cursor:pointer;font-weight:500;font-size:15px}
.faq summary .plus{color:var(--muted);font:400 18px var(--mono);transition:transform .15s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{margin:0 0 16px}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.related a{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .15s}
.related a:hover{border-color:var(--accent);color:var(--ink)}
.related strong{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:14px}
.related strong span{color:var(--accent-text)}
.related a>span{color:var(--muted);font-size:13px;line-height:1.55}
.prose{max-width:720px;display:flex;flex-direction:column;gap:14px}
.prose h1{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.prose h2{font-size:19px;font-weight:600;margin-top:12px}
.prose p,.prose li{color:var(--ink2);line-height:1.7}
.prose ul{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.aside{flex:0 1 260px;min-width:220px;position:sticky;top:84px;display:flex;flex-direction:column;gap:20px}
.toc{display:flex;flex-direction:column;gap:2px}
.toc .label{font:600 11px var(--mono);letter-spacing:.08em;color:var(--muted);padding:0 10px 6px;text-transform:uppercase}
.toc a{padding:6px 10px;border-radius:6px;color:var(--ink2);text-decoration:none;font-size:13.5px}
.toc a:hover{background:var(--hover);color:var(--ink)}
.private{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.private strong{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.private strong::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.private span{color:var(--muted);font-size:13px;line-height:1.6}
@media (max-width:1000px){.aside{display:none}}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:var(--panel)}
.foot{max-width:1200px;margin:0 auto;padding:40px 24px 28px;display:flex;flex-direction:column;gap:32px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:28px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-brand{gap:10px}
.foot-brand .logo{font-size:14px}
.foot-brand .logo-mark{width:24px;height:24px;border-radius:6px}
.foot-brand>span{color:var(--muted);font-size:13px;line-height:1.6;max-width:240px}
.foot-label{font:600 11px var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.foot-col a{color:var(--ink2);text-decoration:none;font-size:13.5px}
.foot-col a:hover{color:var(--accent-text)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.foot-langs{display:flex;gap:14px;flex-wrap:wrap}
.foot-langs a{color:var(--muted);text-decoration:none}
.foot-langs a:hover,.foot-langs a[aria-current]{color:var(--ink)}
@media (max-width:640px){.bar,main,.foot{padding-left:16px;padding-right:16px}main{padding-top:24px;gap:44px}.intro h1,.prose h1{font-size:25px}.pane{min-height:300px}.editor{min-height:240px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}