/* ───────────────────────── Tokens (dark-first) ───────────────────────── */
:root{
  color-scheme:dark;
  --bg:#0d1110; --bg-side:#111613; --bg-bar:#151a17; --bg-raise:#181e1b; --bg-inset:#0a0d0c;
  --line:#222a25; --line-2:#323d36;
  --fg:#e8eeea; --fg-2:#aab6af; --fg-3:#86938c;
  --accent:#3ddc84; --accent-ink:#04140a;
  --accent-soft:rgba(61,220,132,.10); --accent-line:rgba(61,220,132,.42);
  --hl:rgba(232,238,234,.05);
  --stat-bg:#3ddc84; --stat-fg:#04140a;
  --sx-key:#7cc4ff; --sx-str:#3ddc84; --sx-num:#f0c36d; --sx-com:#86938c; --sx-err:#ff8f85;
  --err-soft:rgba(255,143,133,.09);
  --tone-ok:#3ddc84; --tone-info:#7cc4ff; --tone-warn:#f0c36d; --tone-dim:#86938c;
  --glow:radial-gradient(60% 55% at 12% 0%,rgba(61,220,132,.09),transparent 70%);
  --shadow:0 28px 70px rgba(0,0,0,.55);
  --scrim:rgba(3,6,5,.62);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#fbfcfb; --bg-side:#f2f5f3; --bg-bar:#e9eeea; --bg-raise:#ffffff; --bg-inset:#f4f7f5;
    --line:#dbe2dd; --line-2:#c3cdc6;
    --fg:#111a15; --fg-2:#3f4e45; --fg-3:#59685f;
    --accent:#0a7a3d; --accent-ink:#ffffff;
    --accent-soft:rgba(10,122,61,.09); --accent-line:rgba(10,122,61,.42);
    --hl:rgba(17,26,21,.05);
    --stat-bg:#0a7a3d; --stat-fg:#ffffff;
    --sx-key:#0a5aa8; --sx-str:#0a7a3d; --sx-num:#8a5300; --sx-com:#59685f; --sx-err:#c0271b;
    --err-soft:rgba(192,39,27,.07);
    --tone-ok:#0a7a3d; --tone-info:#0a5aa8; --tone-warn:#8a5300; --tone-dim:#59685f;
    --glow:radial-gradient(60% 55% at 12% 0%,rgba(10,122,61,.07),transparent 70%);
    --shadow:0 28px 70px rgba(17,26,21,.18);
    --scrim:rgba(17,26,21,.34);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fbfcfb; --bg-side:#f2f5f3; --bg-bar:#e9eeea; --bg-raise:#ffffff; --bg-inset:#f4f7f5;
  --line:#dbe2dd; --line-2:#c3cdc6;
  --fg:#111a15; --fg-2:#3f4e45; --fg-3:#59685f;
  --accent:#0a7a3d; --accent-ink:#ffffff;
  --accent-soft:rgba(10,122,61,.09); --accent-line:rgba(10,122,61,.42);
  --hl:rgba(17,26,21,.05);
  --stat-bg:#0a7a3d; --stat-fg:#ffffff;
  --sx-key:#0a5aa8; --sx-str:#0a7a3d; --sx-num:#8a5300; --sx-com:#59685f; --sx-err:#c0271b;
  --err-soft:rgba(192,39,27,.07);
  --tone-ok:#0a7a3d; --tone-info:#0a5aa8; --tone-warn:#8a5300; --tone-dim:#59685f;
  --glow:radial-gradient(60% 55% at 12% 0%,rgba(10,122,61,.07),transparent 70%);
  --shadow:0 28px 70px rgba(17,26,21,.18);
  --scrim:rgba(17,26,21,.34);
}

/* ───────────────────────── Invariants ───────────────────────── */
:root{
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR",monospace;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --title-h:44px; --tabs-h:38px; --status-h:26px; --side-w:256px;
  --bl:max(16px,env(safe-area-inset-left,0px)); --br:max(16px,env(safe-area-inset-right,0px));
  --pad:clamp(16px,3.4vw,48px);
  --pl:max(var(--pad),env(safe-area-inset-left,0px)); --pr:max(var(--pad),env(safe-area-inset-right,0px));
  --sec-gap:clamp(64px,9vw,112px);
  --t-hero:clamp(34px,3.7vw,54px); --t-xl:clamp(24px,2.6vw,32px); --t-md:17px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ly-device:var(--sx-num); --ly-service:var(--sx-key); --ly-client:var(--fg-2); --ly-auto:var(--accent); --ly-note:var(--fg-3);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--title-h) + var(--tabs-h) + 20px);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
html.detail-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.7 var(--sans);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:calc(var(--status-h) + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-line)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
kbd{font:500 11px/1 var(--mono);padding:3px 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;color:var(--fg-2);background:var(--bg-raise)}

/* ───────────────────────── Title bar ───────────────────────── */
.titlebar{position:sticky;top:0;z-index:50;height:var(--title-h);display:flex;align-items:center;gap:12px;padding:0 var(--br) 0 var(--bl);background:var(--bg-bar);border-bottom:1px solid var(--line);font:500 12.5px/1 var(--mono);color:var(--fg-2)}
.wintitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-3)}
.wintitle b{color:var(--fg);font-weight:500}
.wt-file{display:none}
.cmdk{display:none;align-items:center;gap:9px;height:30px;padding:0 8px 0 11px;border:1px solid var(--line-2);border-radius:4px;color:var(--fg-3);background:var(--bg);font:400 12px/1 var(--mono);transition:border-color .15s,color .15s}
.cmdk:hover{border-color:var(--accent-line);color:var(--fg)}
.tbtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:4px;color:var(--fg);flex:none;font:500 12px/1 var(--mono);transition:border-color .15s,background .15s}
.tbtn:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.tbtn .ic{font-size:14px}
.sprite{position:absolute}

/* ───────────────────────── Shell layout ───────────────────────── */
.layout{display:block}
.pane{min-width:0}
.explorer{display:none}
@media (min-width:960px){
  .layout{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr)}
  .explorer{display:flex;flex-direction:column;position:sticky;top:var(--title-h);align-self:start;height:calc(100dvh - var(--title-h) - var(--status-h));overflow-y:auto;background:var(--bg-side);border-right:1px solid var(--line);font:400 13px/1.4 var(--mono);color:var(--fg-2);padding:14px 0 16px;scrollbar-width:thin}
}
.ex-h{padding:0 18px 10px;font-size:11px;letter-spacing:.16em;color:var(--fg-3)}
.ex-root{display:flex;align-items:center;gap:6px;padding:4px 18px 8px;font-weight:700;font-size:11.5px;letter-spacing:.06em;color:var(--fg)}
.ex-root .ic{font-size:12px;color:var(--fg-3);transform:rotate(90deg)}
.node{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:0 16px 0 var(--ind,18px);border-left:2px solid transparent;text-decoration:none;color:var(--fg-2);transition:background .12s,color .12s}
.node:hover{background:var(--hl);color:var(--fg)}
.node[aria-current="true"]{background:var(--accent-soft);color:var(--fg);border-left-color:var(--accent)}
.node[aria-pressed="true"]{color:var(--fg);border-left-color:var(--accent);box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg)}
.node[aria-pressed="true"] .n{color:var(--accent)}
.node .ic{font-size:15px}
.node .n{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.node .f-label{font:400 12px/1 var(--sans);color:var(--fg-3)}
.node[aria-pressed="true"] .f-label{color:var(--fg-2)}
.node.dir .ic.chev{font-size:11px;color:var(--fg-3);transform:rotate(90deg)}
.kids{position:relative}
.kids::before{content:"";position:absolute;left:25px;top:0;bottom:0;border-left:1px solid var(--line)}
.kids .node{--ind:38px}
.fi{color:var(--fg-3)}
.fi-md{color:var(--sx-key)}.fi-kt{color:var(--sx-num)}.fi-ts{color:var(--sx-key)}.fi-py{color:var(--sx-str)}.fi-log{color:var(--fg-3)}.fi-sh{color:var(--accent)}.fi-dir{color:var(--sx-num)}
.ex-keys{margin-top:auto;padding:18px 18px 0;display:grid;gap:8px;font-size:11.5px;color:var(--fg-3)}
.ex-keys div{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* ───────────────────────── Editor tabs ───────────────────────── */
.tabs{position:sticky;top:var(--title-h);z-index:40;height:var(--tabs-h);display:flex;overflow-x:auto;background:var(--bg-bar);border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;display:flex;align-items:center;gap:8px;padding:0 18px;border-right:1px solid var(--line);font:500 12.5px/1 var(--mono);color:var(--fg-3);text-decoration:none;white-space:nowrap;transition:color .12s,background .12s}
.tab .ic{font-size:14px}
.tab:hover{color:var(--fg)}
.tab[aria-current="true"]{background:var(--bg);color:var(--fg)}
.tab[aria-current="true"]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent)}
.tab[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bg)}

/* ───────────────────────── Sections ───────────────────────── */
.sec{padding:var(--sec-gap) var(--pr) 0 var(--pl)}
.sec-in{max-width:1120px;margin:0 auto}
.sec-h{display:grid;gap:8px;margin-bottom:clamp(22px,3vw,34px)}
.sec-h h2{font:700 var(--t-xl)/1.15 var(--mono);letter-spacing:-.025em;color:var(--fg)}
.sec-h h2 .mk{color:var(--accent);font-weight:500;margin-right:.4em}
.cm{font:400 13px/1.6 var(--mono);color:var(--sx-com)}
.mk{color:var(--fg-3);font-family:var(--mono);font-weight:400}

/* Line-numbered documents (the signature gutter) */
.doc{--gw:28px;counter-reset:ln;font:400 13.5px/1.8 var(--mono);color:var(--fg)}
.l{display:grid;grid-template-columns:var(--gw) minmax(0,1fr);column-gap:18px;align-items:baseline;border-radius:2px;position:relative}
.l::before{counter-increment:ln;content:counter(ln);text-align:right;font:400 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-3);user-select:none;transition:color .12s}
.l:hover{background:var(--hl)}
.l:hover::before{color:var(--fg-2)}
.l.blank{min-height:1.8em}
.c{min-width:0}
.kw{color:var(--sx-key)}.st{color:var(--sx-str)}.nw{white-space:nowrap}.nm{color:var(--sx-num)}.pn{color:var(--fg-3)}.sk{color:var(--sx-key)}
.ind{display:inline-block;width:2ch}

/* ───────────────────────── Hero (README.md) ───────────────────────── */
.hero{position:relative;padding-top:clamp(28px,4.5vw,52px);background:var(--glow);background-repeat:no-repeat}
.ps1{display:flex;flex-wrap:wrap;gap:0 .6ch;font:400 13px/1.6 var(--mono);color:var(--fg-3);margin-bottom:clamp(18px,2.4vw,28px)}
.ps1 .u{color:var(--accent)}.ps1 .p{color:var(--sx-key)}.ps1 .br{color:var(--sx-num)}.ps1 .cmd{color:var(--fg)}
.hero-grid{display:grid;gap:36px 56px;align-items:start}
.hero-main{min-width:0}
@media (min-width:1180px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
.l-view .c{padding:4px 0 6px}
.viewtag{display:inline-flex;align-items:center;gap:9px;min-height:30px;padding:0 13px 0 11px;border:1px solid var(--accent-line);border-radius:3px;background:var(--accent-soft);font:600 13px/1 var(--sans);color:var(--fg)}
.viewtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.viewtag b{color:var(--accent);font-weight:700}
.l-note .c{max-width:40em;padding-left:1.5em;text-indent:-1.5em;font:400 14px/1.8 var(--sans);color:var(--fg-2)}
.l-note .mk{display:inline-block;width:1.5em;text-indent:0;font-size:.9em}
.readme .l{--gw:26px}
.h1{font:700 var(--t-hero)/1.12 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.h1 .l{column-gap:clamp(14px,2vw,22px);padding:.02em 0}
.h1 .l:hover{background:transparent}
.h1 .mk{font:500 .56em/1 var(--mono);color:var(--fg-3);margin-right:.32em;letter-spacing:0;vertical-align:.12em}
.h1 .l + .l .c{color:var(--accent)}
.caret{display:inline-block;width:.46em;height:.82em;margin-left:.1em;vertical-align:-.06em;background:var(--accent);animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.l-quote .c{font:400 var(--t-md)/1.78 var(--sans);color:var(--fg-2);max-width:37em;padding-left:1.5em;text-indent:-1.5em}
.l-quote .mk{display:inline-block;width:1.5em;text-indent:0;font-size:.9em}
.l-cap .c{font-size:14px}
.chk{color:var(--accent)}
.l-cta{align-items:center;padding:6px 0}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-raise);color:var(--fg);font:600 13px/1 var(--mono);text-decoration:none;transition:border-color .15s,background .15s,transform .15s var(--ease),filter .15s}
.btn:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.btn .ic{font-size:14px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.1);transform:translateY(-1px)}

@media (max-width:480px){.ps1 .br{display:none}.btn{padding:0 13px}.cta{gap:8px}}
.side-panes{display:grid;gap:16px;margin-top:clamp(28px,4vw,44px)}
@media (min-width:640px){.side-panes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.box{background:var(--bg-inset);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.box-tab{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:var(--bg-bar);border-bottom:1px solid var(--line);font:500 12px/1 var(--mono);color:var(--fg)}
.box-tab .ic{font-size:14px}
.box-tab .sub{margin-left:auto;color:var(--fg-3);font-weight:400}
.box .doc{padding:14px 14px 16px}
.box .doc .l{--gw:20px;column-gap:14px}

/* ───────────────────────── System map (hero) ───────────────────────── */
.mapbox{min-width:0}
.mapbox .box-tab .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-note{padding:12px 14px 0;font:400 12px/1.6 var(--mono);color:var(--sx-com)}
.map-host{padding:8px 14px 6px}
.map{min-width:0}
.map-svg{display:block;max-width:100%;overflow:visible}
.map-svg text{font-family:var(--mono)}
.mh{cursor:pointer;outline:none}
.mh-hit{fill:transparent;stroke:transparent;stroke-width:2}
.mh-no{font-size:11px;font-weight:700;fill:var(--c)}
.mh-en{font-size:11px;fill:var(--fg-2)}
.map-svg .mh-ko{font-family:var(--sans);font-size:11.5px;fill:var(--fg-3)}
.mh-n{font-size:11px;fill:var(--fg-3);text-anchor:end}
.mh-rule{stroke:var(--line);stroke-width:1}
.mh:hover .mh-en,.mh:focus-visible .mh-en{fill:var(--fg)}
.mh:focus-visible .mh-hit{stroke:var(--accent)}
.mn{cursor:pointer;outline:none}
.mn-r{fill:var(--bg-raise);stroke:var(--c);stroke-opacity:.6;stroke-width:1;transition:fill .12s,stroke-opacity .12s}
.mn-t{font-size:12px;fill:var(--fg);text-anchor:middle}
.mn-bar{fill:var(--accent)}
.mn.feat .mn-r{fill:var(--accent-soft);stroke:var(--accent);stroke-opacity:1;stroke-width:1.5}
.mn.feat .mn-t{font-weight:700}
.mn:hover .mn-r{fill:var(--accent-soft);stroke-opacity:1}
.mn:focus-visible .mn-r{stroke:var(--accent);stroke-opacity:1;stroke-width:2.5}
.trace{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.trace.t{stroke-dasharray:none}
.trace-dot{fill:var(--bg-inset);stroke:var(--accent);stroke-width:1.5}
.map-legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 14px;padding:10px 0;border-top:1px solid var(--line);font:400 11.5px/1.6 var(--mono);color:var(--fg-2)}
.map-legend span{display:inline-flex;align-items:center;gap:7px}
.lg-feat{width:14px;height:10px;border:1.5px solid var(--accent);border-radius:2px;background:var(--accent-soft)}
.lg-trace{width:14px;height:10px;border-top:1.5px dashed var(--accent)}
.map-foot{padding:0 14px 14px;font:400 12px/1.7 var(--sans);color:var(--fg-3)}

/* ───────────────────────── Services (opened files) ───────────────────────── */
.svcs{display:grid;gap:clamp(20px,2.6vw,32px)}
.svc{container:svc/inline-size;background:var(--bg-inset);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:6px;overflow:hidden}
.svc-tab{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:var(--bg-bar);border-bottom:1px solid var(--line);font:500 12px/1 var(--mono);color:var(--fg);white-space:nowrap;overflow:hidden}
.svc-tab .ic{font-size:14px}
.svc-tab .pin{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:var(--accent);font-weight:400;font-size:11.5px}
.lyc{display:inline-flex;align-items:center;gap:6px;color:var(--fg-2);font-weight:400;font-size:11.5px}
.ly{display:inline-block;width:7px;height:7px;border-radius:1px;background:var(--c,var(--fg-3));flex:none}
.svc-body{padding:clamp(16px,2.4vw,28px)}
.svc-head{display:grid;gap:10px;margin-bottom:20px}
.svc-title{font:700 clamp(22px,2.3vw,30px)/1.25 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.svc-title button{text-align:left;transition:color .12s}
.svc-title button:hover{color:var(--accent)}
.svc-tag{max-width:44em;font:400 16px/1.7 var(--sans);color:var(--fg-2)}
.badges{display:flex;flex-wrap:wrap;gap:4px 18px;font:400 12.5px/1.7 var(--mono);color:var(--fg)}
.badges span{display:inline-flex;align-items:baseline;gap:7px}
.badges .k{color:var(--sx-key);font-weight:500}
.svc-scope{max-width:46em;font:400 14px/1.75 var(--sans);color:var(--fg-2)}
.svc-scope .mk{margin-right:.5ch;color:var(--sx-com)}
.cols{display:grid;gap:26px}
@container svc (min-width:880px){.cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}}
.col{min-width:0}
.col h4{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);font:700 12.5px/1.4 var(--mono);letter-spacing:.02em;color:var(--accent)}
.col h4 .mk{margin-right:.5ch;color:var(--fg-3);font-weight:500}
.ifc{display:grid;gap:10px}
.ifc div{display:grid;grid-template-columns:7ch minmax(0,1fr);gap:0 1.2ch}
.ifc dt{font:500 12px/1.9 var(--mono);color:var(--sx-key)}
.ifc dd{min-width:0;font:400 14px/1.7 var(--sans);color:var(--fg)}
.col .dec{max-width:none;gap:14px}
.col .dec b{font-size:14.5px}
.col .dec p{font-size:14px;line-height:1.75}
.cons{display:grid;gap:10px}
.cons li{display:grid;grid-template-columns:7px minmax(0,1fr);gap:0 10px;font:400 14px/1.75 var(--sans);color:var(--fg)}
.cons li::before{content:"";width:7px;height:7px;margin-top:.62em;border-radius:50%;background:var(--tone-warn)}
.res{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line-2);font:400 13.5px/1.75 var(--sans);color:var(--fg-2)}
.res b{margin-right:.6ch;font:600 11.5px/1 var(--mono);color:var(--sx-key)}
.svc-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px clamp(16px,2.4vw,28px);border-top:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--fg-3)}

/* ───────────────────────── Flow diagrams (stages) ───────────────────────── */
.fig{margin:0 0 26px;padding:16px;border:1px dashed var(--line-2);border-radius:6px;background:var(--bg)}
.fig-cap{margin-top:14px;font:400 11.5px/1.7 var(--mono);color:var(--fg-3)}
.flow-wrap{container:flow/inline-size;display:grid;gap:16px}
.ly-device{--c:var(--ly-device)}.ly-service{--c:var(--ly-service)}.ly-client{--c:var(--ly-client)}.ly-auto{--c:var(--ly-auto)}.ly-note{--c:var(--ly-note)}
.flow-lab{margin-bottom:8px;font:400 12px/1.4 var(--mono);color:var(--sx-com)}
.flow-row{display:grid;gap:22px}
.fl{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg-raise)}
.fl.cond{border-style:dashed}
.fl-i{font:500 11px/1 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.fl-t{font:600 14px/1.45 var(--mono);color:var(--fg)}
.fl-s{font:400 13px/1.65 var(--sans);color:var(--fg-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chips span{padding:2px 8px;border:1px solid var(--line-2);border-radius:3px;background:var(--bg-inset);font:500 12px/1.6 var(--mono);color:var(--fg)}
.fl + .fl::before{content:"";position:absolute;left:20px;top:-22px;height:22px;border-left:1px solid var(--accent-line)}
.fl + .fl::after{content:"";position:absolute;left:16px;top:-6px;border:4px solid transparent;border-top:6px solid var(--accent-line);border-bottom:0}
.flow-note{padding-top:12px;border-top:1px dashed var(--line-2);font:400 13px/1.7 var(--sans);color:var(--fg-2)}
.flow-note b{margin-right:.6ch;font:600 11.5px/1 var(--mono);color:var(--sx-key)}
@container flow (min-width:700px){
  .flow-row{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
  .fl + .fl::before{left:-22px;top:26px;width:22px;height:0;border-left:0;border-top:1px solid var(--accent-line)}
  .fl + .fl::after{left:-10px;top:22px;border:4px solid transparent;border-left:6px solid var(--accent-line);border-right:0}
}

/* ───────────────────────── Index (ls -la) ───────────────────────── */
.chip-slot{margin:0 calc(-1 * var(--pr)) 14px calc(-1 * var(--pl))}
@media (min-width:960px){.chip-slot{display:none}}
.chip-slot .filters{display:flex;gap:8px;overflow-x:auto;padding:2px var(--pr) 8px var(--pl);scrollbar-width:none;scroll-padding-inline:var(--pl)}
.chip-slot .filters::-webkit-scrollbar{display:none}
.chip-slot .node{flex:none;width:auto;min-height:40px;padding:0 14px;gap:8px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-inset)}
.chip-slot .node:hover{border-color:var(--accent-line)}
.chip-slot .node .f-ico,.chip-slot .node .f-id{display:none}
.chip-slot .node .f-label{font:500 13.5px/1 var(--sans);color:var(--fg)}
.chip-slot .node .n{margin-left:0;color:var(--fg-3)}
.chip-slot .node[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.chip-slot .node[aria-pressed="true"] .n{color:var(--accent)}
.cmdbar{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 10px 0 14px;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:6px;font:400 14px/1 var(--mono);transition:border-color .15s,box-shadow .15s;scroll-margin-top:calc(var(--title-h) + var(--tabs-h) + 20px)}
.cmdbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cmdbar label{display:flex;align-items:center;gap:8px;flex:none;color:var(--fg-2);white-space:nowrap}
.cmdbar label .d{color:var(--accent);font-weight:700}
.cmdbar input{flex:1;min-width:0;height:46px;border:0;background:transparent;color:var(--fg);font:400 14px/1 var(--mono);caret-color:var(--accent);padding:0;-webkit-appearance:none;appearance:none}
.cmdbar input:focus-visible{outline:none}
.cmdbar input::placeholder{color:var(--fg-3);font-family:var(--sans)}
.cmdbar input::-webkit-search-cancel-button,.cmdbar input::-webkit-search-decoration{display:none}
.mini{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;color:var(--fg-2);font:500 12px/1 var(--mono);white-space:nowrap;transition:border-color .15s,color .15s}
.mini:hover{border-color:var(--accent-line);color:var(--fg)}
.mini .ic{font-size:12px}
.ls-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:18px 0 10px}
.total{display:flex;flex-wrap:wrap;gap:2px 16px;font:400 12.5px/1.6 var(--mono);color:var(--fg-3)}
.mini[aria-pressed="true"]{border-color:var(--accent-line);color:var(--fg);background:var(--accent-soft)}
.total b{color:var(--fg);font-weight:600}
.ls{container:ls/inline-size}
.ls ul{border-bottom:1px solid var(--line)}
.row,.ls-head{display:grid;column-gap:16px;align-items:center;grid-template-columns:92px minmax(0,1fr) 138px 150px 112px 78px 16px;grid-template-areas:"mode name status plat layer cat go"}
.ls-head{padding:0 14px;height:34px;border-bottom:1px solid var(--line-2);font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--fg-3)}
.row{position:relative;padding:15px 14px;border-top:1px solid var(--line);font:400 12.5px/1.5 var(--mono);color:var(--fg-2);transition:background .12s}
.row:first-child{border-top:0}
.row::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transition:transform .18s var(--ease)}
.row:hover{background:var(--hl)}
.row:hover::before,.row:focus-within::before{transform:scaleY(1)}
.h-mode{grid-area:mode}.h-name{grid-area:name}.h-status{grid-area:status}.h-plat{grid-area:plat}.h-layer{grid-area:layer}.h-cat{grid-area:cat}
.c-mode{grid-area:mode;display:flex;gap:12px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-mode b{font-weight:600;color:var(--fg-3)}
.c-mode b.x{color:var(--accent)}
.c-status{grid-area:status;display:flex;align-items:baseline;gap:8px;color:var(--fg)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tone,var(--tone-dim));flex:none;transform:translateY(-1px)}
.tone-ok{--tone:var(--tone-ok)}.tone-info{--tone:var(--tone-info)}.tone-warn{--tone:var(--tone-warn)}.tone-dim{--tone:var(--tone-dim)}
.c-meta{display:contents}
.c-plat{grid-area:plat;min-width:0}
.c-cat{grid-area:cat;color:var(--fg-3)}
.c-layer{grid-area:layer;display:flex;align-items:center;gap:7px;color:var(--fg-2);white-space:nowrap}
.grp{display:flex;align-items:baseline;gap:6px 10px;padding:22px 14px 9px;border-top:1px solid var(--line-2);font:500 12px/1.5 var(--mono);color:var(--fg-3)}
.ls-head + .grp{border-top:0}
.grp .g-no{color:var(--c);font-weight:700;letter-spacing:.04em}
.grp .g-en{color:var(--fg)}
.grp .g-ko{font-family:var(--sans);font-size:12.5px}
.grp .g-n{margin-left:auto;font-variant-numeric:tabular-nums}
.c-name{grid-area:name;min-width:0;display:grid;gap:3px}
.name{font:700 15px/1.35 var(--mono);color:var(--fg);letter-spacing:-.01em;text-align:left;transition:color .12s}
.name::after{content:"";position:absolute;inset:0}
.row:hover .name{color:var(--accent)}
.sum{font:400 13.5px/1.6 var(--sans);color:var(--fg-2);max-width:60ch}
.go{grid-area:go;font-size:14px;color:var(--fg-3);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .2s var(--ease),color .15s}
.row:hover .go{opacity:1;transform:none;color:var(--accent)}
@container ls (max-width:999px){
  .row,.ls-head{grid-template-columns:92px minmax(0,1fr) 150px;grid-template-areas:"mode name status" "mode meta status"}
  .ls-head{grid-template-areas:"mode name status"}
  .c-meta{display:flex;flex-wrap:wrap;gap:0 14px;grid-area:meta;color:var(--fg-3);margin-top:2px}
  .c-plat,.c-layer,.c-cat{grid-area:auto}
  .go,.h-plat,.h-layer,.h-cat{display:none}
}
@container ls (max-width:619px){
  .ls-head{display:none}
  .row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mode status" "name name" "meta meta";row-gap:6px;padding:16px 4px 16px 12px}
  .c-status{justify-content:flex-end;text-align:right}
  .name{font-size:16px}
  .c-meta{margin-top:0}
}
.empty{margin-top:8px;padding:28px 20px;border:1px dashed var(--line-2);border-radius:6px;background:var(--bg-inset);font:400 13px/1.7 var(--mono);color:var(--fg-2)}
.empty .ko{display:block;margin:10px 0 16px;font:400 14.5px/1.7 var(--sans);color:var(--fg)}
.empty .pr{color:var(--accent)}

/* ───────────────────────── Process (CI pipeline run) ───────────────────────── */
.ci{background:var(--bg-inset);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ci-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:var(--bg-bar);border-bottom:1px solid var(--line);font:500 12px/1 var(--mono);color:var(--fg);white-space:nowrap;overflow:hidden}
.ci-bar .ic{font-size:14px}
.ci-bar .sub{margin-left:auto;color:var(--accent);font-weight:600}
.ci-body{padding:20px clamp(14px,2.4vw,26px) 24px;font:400 14px/1.7 var(--mono)}
.tp{color:var(--fg-3)}
.tp .d{color:var(--accent);font-weight:700}
.tp .cmd{color:var(--fg)}
.stages{margin:18px 0 22px}
.stage{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px}
.stage-rail{display:flex;flex-direction:column;align-items:center}
.badge{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--accent);border-radius:50%;background:var(--accent-soft);color:var(--accent);flex:none}
.badge .ic{font-size:12px;stroke-width:2.2}
.rail-line{flex:1;width:1px;min-height:16px;margin:4px 0;background:var(--accent-line)}
.stage:last-child .rail-line{background:transparent}
.stage-main{min-width:0;padding-bottom:22px}
.stage-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font:500 12px/1.6 var(--mono)}
.stage-meta .no{color:var(--sx-num);font-variant-numeric:tabular-nums}
.stage-meta .key{color:var(--accent);font-weight:700;letter-spacing:.05em}
.stage-t{margin-top:4px;font:600 17px/1.5 var(--sans);letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.stage-b{margin-top:2px;font:400 14px/1.7 var(--sans);color:var(--fg-2)}
.stage-ok{margin-top:8px;font:500 12px/1 var(--mono);color:var(--accent)}
@media (min-width:900px){
  .stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage{display:block}
  .stage-rail{flex-direction:row;align-items:center}
  .rail-line{width:auto;height:1px;min-height:0;margin:0 10px}
  .stage-main{padding:16px 22px 0 0}
}
.tout{display:block;margin:2px 0 4px 0;color:var(--accent);font-weight:500}
.cur{display:inline-block;width:.55em;height:1.05em;vertical-align:-.18em;background:var(--fg-3);margin-left:.4ch}

/* ───────────────────────── Contact (contact.http): two request lines that are plain links ───────────────────────── */
.contact-box{max-width:760px}
.contact-box .doc{padding:14px 14px 12px}
.rq{display:block;color:var(--fg);text-decoration:none}
.l-sep .c{font-weight:700}
.l-sep .mk{margin-right:1ch;color:var(--sx-com)}
.l-req .c{display:flex;align-items:center;gap:1.2ch}
.l-req .m{color:var(--sx-num);font-weight:700}
.l-req .u{min-width:0;color:var(--sx-key);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .12s}
.l-req .ic{margin-left:auto;font-size:14px;color:var(--fg-3);transition:color .12s}
.rq:hover .u,.rq:focus-visible .u{text-decoration-color:currentColor}
.rq:hover .ic{color:var(--accent)}
.contact-note{padding:10px 16px 12px;border-top:1px solid var(--line);font:400 12px/1.7 var(--mono);color:var(--sx-com)}

/* ───────────────────────── Footer ───────────────────────── */
.foot{padding:clamp(56px,8vw,96px) var(--pr) 40px var(--pl)}
.foot-in{max-width:1120px;margin:0 auto;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font:400 12.5px/1.7 var(--mono);color:var(--fg-3)}
.foot a{color:var(--fg-2);text-underline-offset:3px}
.foot a:hover{color:var(--accent)}
.foot .tilde{width:100%;color:var(--fg-3);line-height:1.4}

/* ───────────────────────── Status bar ───────────────────────── */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--status-h) + env(safe-area-inset-bottom,0px));padding:0 var(--br) env(safe-area-inset-bottom,0px) var(--bl);display:flex;align-items:center;gap:16px;background:var(--stat-bg);color:var(--stat-fg);font:500 11.5px/1 var(--mono);white-space:nowrap;overflow:hidden}
.sb-i{display:inline-flex;align-items:center;gap:6px}
.sb-i .ic{font-size:13px}
.sb-sp{flex:1}
.hide-sm{display:none}
@media (min-width:720px){.hide-sm{display:inline-flex}.cmdk{display:inline-flex}.wt-file{display:inline}}

/* ───────────────────────── Detail panel ───────────────────────── */
.scrim{position:fixed;left:0;right:0;top:var(--title-h);bottom:var(--status-h);z-index:80;background:var(--scrim);display:none}
.detail{position:fixed;z-index:90;inset:0;display:flex;flex-direction:column;background:var(--bg);animation:slide .28s var(--ease);padding-top:env(safe-area-inset-top,0px)}
@keyframes slide{from{transform:translateX(36px)}to{transform:none}}
@media (min-width:720px){
  .scrim{display:block}
  .detail{inset:var(--title-h) 0 var(--status-h) auto;width:min(720px,100vw);padding-top:0;border-left:1px solid var(--line-2);box-shadow:var(--shadow)}
}
.d-tabs{display:flex;align-items:stretch;height:44px;flex:none;background:var(--bg-bar);border-bottom:1px solid var(--line)}
.d-file{position:relative;display:flex;align-items:center;gap:8px;padding:0 18px 0 var(--bl);background:var(--bg);border-right:1px solid var(--line);font:500 12.5px/1 var(--mono);color:var(--fg);min-width:0}
.d-file::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent)}
.d-file::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bg)}
.d-file .ic{font-size:14px}
.d-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-close{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-width:44px;padding:0 var(--br) 0 16px;font:500 12.5px/1 var(--mono);color:var(--fg-2);transition:color .12s,background .12s}
.d-close:hover{color:var(--fg);background:var(--hl)}
.d-close .ic{font-size:15px}
.d-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:26px var(--br) calc(48px + env(safe-area-inset-bottom,0px)) var(--bl);scrollbar-width:thin}
@media (min-width:720px){.d-scroll{padding:30px 40px 56px}.d-file{padding-left:20px}.d-close{padding-right:20px}}
.crumb{display:flex;flex-wrap:wrap;gap:2px 8px;font:400 12px/1.6 var(--mono);color:var(--fg-3);margin-bottom:14px}
.crumb span+span::before{content:"›";margin-right:8px;color:var(--fg-3)}
.d-title{font:700 clamp(28px,4vw,38px)/1.18 var(--sans);letter-spacing:-.03em;text-wrap:balance;margin-bottom:10px}
.d-tag{font:400 var(--t-md)/1.7 var(--sans);color:var(--fg-2);margin-bottom:14px}
.d-sum{max-width:38em;color:var(--fg);font:400 15.5px/1.8 var(--sans)}
.d-links{margin:20px 0 26px}
.fm{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:8px}
.fm .doc{font-size:13px}
.fm .k{display:inline-block;min-width:10ch;color:var(--sx-key)}
.fm .v{color:var(--fg)}
.md-h{margin:34px 0 10px;font:700 14px/1.4 var(--mono);color:var(--accent);letter-spacing:.01em}
.md-h .mk{color:var(--fg-3);margin-right:.5ch;font-weight:500}
.d-p{max-width:38em;font:400 15.5px/1.8 var(--sans);color:var(--fg)}
.dec{display:grid;gap:18px;max-width:38em}
.dec li{display:grid;grid-template-columns:2ch minmax(0,1fr);gap:0 1ch}
.dec li .mk{color:var(--accent);padding-top:3px}
.dec b{display:block;font:600 15.5px/1.6 var(--sans);color:var(--fg);margin-bottom:2px}
.dec p{font:400 15px/1.8 var(--sans);color:var(--fg-2)}
.d-fig{margin-top:26px}
.d-fig .fig{margin-bottom:0}
.d-scroll .cons{max-width:38em}
.d-scroll .cons li{font-size:15px;line-height:1.8;color:var(--fg-2)}

/* ───────────────────────── No-JS fallback (<noscript>) ───────────────────────── */
@media (scripting:none){#shell,.statusbar{display:none}body{padding-bottom:0}}
.nojs{padding:clamp(28px,4.5vw,52px) var(--pr) 64px var(--pl);background:var(--glow);background-repeat:no-repeat}
.nojs-name{font:700 15px/1.5 var(--mono)}
.nojs-name span{margin-left:1ch;font-weight:400;color:var(--fg-3)}
.nojs-h{margin:10px 0 18px;font:700 var(--t-hero)/1.12 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.nojs-h span{display:block}
.nojs-h span+span{color:var(--accent)}
.nojs-intro{max-width:37em;font:400 var(--t-md)/1.78 var(--sans);color:var(--fg-2)}
.nojs-sec{margin:clamp(40px,6vw,64px) 0 14px}
.nojs-list{border-top:1px solid var(--line)}
.nojs-list li{position:relative;display:grid;gap:3px;padding:14px 4px;border-bottom:1px solid var(--line)}
.nojs-list li:hover{background:var(--hl)}
.nojs-list .name{text-decoration:none}
.nojs-list li:hover .name{color:var(--accent)}

/* ───────────────────────── Motion preferences ───────────────────────── */
@media (hover:none){[data-kbd],.d-close kbd{display:none!important}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .caret{opacity:1}
}

/* Skip link: first tab stop, hidden until focused (the old home had one). */
.skip-link{position:fixed;z-index:100;top:-80px;left:max(8px,env(safe-area-inset-left,0px));padding:10px 14px;background:var(--accent);color:var(--accent-ink);font:600 13px/1 var(--mono);text-decoration:none;border-radius:4px}
.skip-link:focus{top:calc(8px + env(safe-area-inset-top,0px))}
#main:focus{outline:none}