/* StackChan v4. All tokens and selectors are limited to the two guide bodies.
   Material reference: vault.html :root, body, body::before/after, .asset-card.
   The outer journey bar reserves its expanded height; only the surface compacts. */
body[data-guide]{
 --paper:#f3eee2;--surface:#fbf8f0;--ink:#101a26;--muted:#5f5646;--line:#d8cfbd;--soft:#ece4d2;
 --accent:#101a26;--on-accent:#f3eee2;--accent-hover:#24374c;--link:#314e69;--focus:#314e69;
 --tip-bg:#f4eddf;--tip-line:#76581e;--warn-bg:#f0e7dc;--disabled-bg:#e0d8c9;--disabled-ink:#625b50;
 --serif:'Noto Serif SC','Source Han Serif SC','Source Han Serif','Songti SC',serif;
 --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --glow-brass:rgba(200,163,90,.16);--glow-red:rgba(176,63,37,.035);--edge:rgba(57,43,19,.04);
 --bg-top:#f6f1e6;--bg-bottom:#eee7d8;--grid:rgba(200,163,90,.055);--grain:rgba(83,65,33,.018);
 min-height:100vh;isolation:isolate;position:relative;color:var(--ink);
 background:radial-gradient(ellipse at 18% 8%,var(--glow-brass),transparent 32%),radial-gradient(ellipse at 84% 18%,var(--glow-red),transparent 28%),linear-gradient(180deg,var(--bg-top),var(--paper) 48%,var(--bg-bottom));
 background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
body[data-guide]::before,body[data-guide]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body[data-guide]::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(180deg,#0008,#0002 46%,#0005)}
body[data-guide]::after{background:repeating-linear-gradient(112deg,transparent 0 34px,var(--grain) 34px 35px),radial-gradient(ellipse at 50% 28%,transparent 38%,var(--edge)),linear-gradient(180deg,transparent 65%,var(--edge))}
body[data-guide] .shell{max-width:1240px;padding-inline:32px}
body[data-guide] .guide{max-width:none}
body[data-guide] [hidden]{display:none!important}
body[data-guide] .hero{padding:36px 0 24px}
body[data-guide] h1{font-family:var(--serif);font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.35;letter-spacing:.015em}
body[data-guide] .lead{font-size:18px;line-height:1.8;max-width:38em}
body[data-guide] .site-nav a,body[data-guide] .back{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
body[data-guide] .guide-tabs{display:flex;gap:8px;padding:20px;margin-top:26px;background:var(--soft);width:fit-content;border-radius:10px;max-width:100%}
body[data-guide] .guide-tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:16px 20px;color:var(--muted);font-size:15px;text-decoration:none;border-radius:6px}
body[data-guide] .guide-tabs [aria-current]{background:var(--surface);color:var(--ink);box-shadow:0 2px 5px #0000000c;font-weight:600}
body[data-guide] .journey-sentinel{height:1px}
body[data-guide] .journey-bar{position:sticky;top:0;z-index:5;pointer-events:none}
body[data-guide] .journey-surface{background:var(--surface);padding:20px 24px;border:1px solid var(--line);border-radius:10px;pointer-events:auto;box-shadow:0 8px 24px #00000008}
body[data-guide] .journey{display:grid;grid-template-columns:4fr 5fr;gap:32px}
body[data-guide] .journey-segment{min-width:0}
body[data-guide] .journey-segment strong{font:500 13px/1.8 var(--mono);letter-spacing:.08em;color:var(--muted)}
body[data-guide] .journey ol{list-style:none;display:flex;padding:0;margin:8px 0 0;gap:8px}
body[data-guide] .journey li{flex:1;min-width:0;margin:0}
body[data-guide] .journey a{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font-size:13px;min-width:44px;min-height:52px;border-radius:6px;padding:4px 2px}
body[data-guide] .journey-dot{font-size:18px;line-height:1.3}
body[data-guide] .journey-name{text-align:center;overflow-wrap:normal;word-break:normal}
body[data-guide] .journey [aria-current]{color:var(--link);font-weight:600;box-shadow:inset 0 -1px 0 var(--link)}
body[data-guide] .journey .is-done .journey-dot,body[data-guide] .is-complete .stage-mark{color:var(--tip-line)}
body[data-guide] .journey-bar.is-compact .journey-surface{padding-block:16px;border-radius:0 0 10px 10px}
body[data-guide] .is-compact .journey{gap:24px}
body[data-guide] .is-compact .journey-segment{display:flex;align-items:center;gap:14px}
body[data-guide] .is-compact .journey-segment strong{white-space:nowrap;font-size:12px}
body[data-guide] .is-compact .journey ol{flex:1;margin:0;gap:0}
body[data-guide] .is-compact .journey a{padding:0;min-height:44px}
body[data-guide] .is-compact .journey-name{display:none}
body[data-guide] .storage-scope{font-size:13px;color:var(--muted);margin:12px 0 28px}
body[data-guide] [data-storage-status]{display:block;font-size:13px;color:var(--muted);margin:12px 0}
body[data-guide] [data-storage-status]:empty{display:none}
body[data-guide] .stage{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;scroll-margin-top:100px}
body[data-guide] .stage-main{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px #00000008}
body[data-guide] .stage h2{border:0;margin:0;padding:0;font-size:17px}
body[data-guide] .stage-toggle{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:transparent;color:var(--ink);padding:20px 24px;font-size:16px;line-height:1.7;border-radius:12px}
body[data-guide] .stage-mark{color:var(--muted);flex:none}
body[data-guide] .stage-title{flex-shrink:0;font-family:var(--serif);font-size:18px}
body[data-guide] .chevron{margin-left:auto;flex:none}
body[data-guide] .is-open .chevron{transform:rotate(180deg)}
body[data-guide] .closed-goal{font-weight:400;color:var(--muted);font-size:14px}
body[data-guide] .is-open .closed-goal{display:none}
body[data-guide] .is-complete:not(.is-open) .stage-main{background:var(--tip-bg)}
body[data-guide] .stage-panel{padding:0 24px 24px}
body[data-guide] .stage-goal{font-family:var(--serif);font-size:clamp(22px,2.3vw,28px);line-height:1.6;font-weight:600;margin:0 0 20px;text-wrap:pretty}
body[data-guide] .why-card{min-width:0;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:20px 24px;font-size:15px}
body[data-guide] .why-card summary{cursor:pointer;min-height:44px;padding-block:8px;color:var(--muted);font-size:14px}
body[data-guide] .why-content p{line-height:1.85;margin:14px 0 0}
body[data-guide] .why-content table{font-size:13px;margin:16px 0;line-height:1.7}
body[data-guide] .why-content th,body[data-guide] .why-content td{padding:16px}
body[data-guide] .why-slot:has(.why-card){margin:0 0 22px}
body[data-guide] figure{margin:20px 0}
body[data-guide] figure>a{display:block}
body[data-guide] figure img{border-radius:8px;max-width:100%;height:auto;margin-inline:auto}
body[data-guide] figure.official{background:#e9e3d3;border-radius:10px;padding:20px;border:1px solid var(--line)}
body[data-guide] figure.official img{border-radius:4px}
body[data-guide] figure img[src*="guide_homebtn"]{max-width:320px}
body[data-guide] figcaption{font-size:12px;line-height:1.7;margin-top:10px;color:var(--muted)}
body[data-guide] .official figcaption{color:#514d43}
body[data-guide] .stage-actions{list-style:none;counter-reset:action;margin:24px 0 0;padding:0}
body[data-guide] .stage-action{counter-increment:action;border-top:1px solid var(--line);padding:20px 0;margin:0}
body[data-guide] .action-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;line-height:1.8;min-height:44px}
body[data-guide] .action-check:before{content:counter(action,decimal-leading-zero);font:24px/1.35 var(--serif);font-variant-numeric:tabular-nums;color:var(--muted);min-width:1.3em}
body[data-guide] .action-check input{width:18px;height:18px;margin:6px 0 0;accent-color:var(--tip-line);flex:none;cursor:pointer}
body[data-guide] .action-check>span{min-width:0;flex:1;font-weight:500}
body[data-guide] [data-action]{display:block;scroll-margin-top:100px}
body[data-guide] .step-result,body[data-guide] .step-note{font-size:14px;line-height:1.8;margin:10px 0;color:var(--muted)}
body[data-guide] .step-help{margin:12px 0 0;padding:20px 24px;background:var(--warn-bg);border-radius:8px;scroll-margin-top:100px}
body[data-guide] .step-help summary{cursor:pointer;font-size:14px;min-height:44px;padding-block:8px;color:var(--ink)}
body[data-guide] .step-help p,body[data-guide] .step-help li{font-size:15px;line-height:1.8}
body[data-guide] .step-help p:last-child{margin-bottom:0}
body[data-guide] .stage-accept{padding-top:20px;border-top:1px solid var(--line)}
body[data-guide] .stage-accept>p{font-size:19px;font-weight:600;line-height:1.7;margin:0 0 16px}
body[data-guide] .accept-actions{display:flex;gap:12px}
body[data-guide] button,body[data-guide] .next{padding:16px 20px;background:var(--accent);color:var(--on-accent);transition:transform 120ms ease-out}
body[data-guide] .stage-done{flex:1;min-height:52px;border-radius:8px;font-weight:600;white-space:nowrap}
body[data-guide] .stage-missing,body[data-guide] .copy-row button,body[data-guide] .ota-choices button{background:var(--soft);color:var(--ink);border:0;border-radius:8px}
body[data-guide] .stage-missing{white-space:nowrap}
body[data-guide] button:disabled{opacity:1;background:var(--disabled-bg);color:var(--disabled-ink);cursor:default;transform:none}
body[data-guide] .stage-transition{font-size:14px;color:var(--muted);margin:22px 0;padding-left:24px;line-height:1.8}
body[data-guide] .ota-field{margin:16px 0}
body[data-guide] .ota-field label{display:block;margin-bottom:8px;font-size:15px}
body[data-guide] .ota-field input{width:100%;min-width:0;font:inherit;font-size:16px;min-height:48px;padding:16px 20px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
body[data-guide] .ota-field input::placeholder{color:var(--muted);opacity:1}
body[data-guide] .ota-reuse,body[data-guide] .ota-conflict{padding:20px 24px;background:var(--soft);border-radius:8px;margin:16px 0}
body[data-guide] .ota-conflict{background:var(--warn-bg);border:1px solid var(--line)}
body[data-guide] .ota-difference{text-align:center;font-size:24px;line-height:1;color:var(--muted)}
body[data-guide] .ota-choices{display:grid;gap:12px}
body[data-guide] .ota-choices button{overflow-wrap:anywhere;text-align:left;min-height:44px;padding:16px}
body[data-guide] .ota-reuse output{display:block;font-family:var(--mono);font-size:15px;overflow-wrap:anywhere;margin-bottom:12px}
body[data-guide] pre{padding:20px 24px;border-radius:10px;font-size:15px;line-height:1.85}
body[data-guide] .menu-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 24px}
body[data-guide] .menu-cards figure{margin:0;padding:20px;border-radius:10px;background:var(--paper);min-width:0}
body[data-guide] .menu-cards .menu-icon{max-width:160px;margin:0 auto;border-radius:6px}
body[data-guide] .menu-cards figcaption{color:var(--ink);margin-top:10px}
body[data-guide] .menu-cards figcaption span{display:block;font-size:15px;margin:4px 0}
body[data-guide] .menu-source{font-size:12px;color:var(--muted);margin:-14px 0 24px}
body[data-guide] .completion{padding:24px;background:var(--tip-bg);border:1px solid var(--line);border-radius:12px;scroll-margin-top:100px}
body[data-guide] .completion h2{border:0;padding:0;font-family:var(--serif)}
body[data-guide] .completion .next{margin-bottom:0;border-radius:8px}
body[data-guide] .skip{background:var(--accent);color:var(--on-accent);padding:16px 20px;z-index:10}
body[data-guide] summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
body[data-guide] button:active:not(:disabled){transform:translateY(1px);background:var(--accent-hover);color:var(--on-accent)}
/* Match the generic button state specificity: keep marks on a neutral surface. */
body[data-guide] .stage-toggle:active:not(:disabled){background:var(--soft);color:var(--ink)}
@media(hover:hover) and (pointer:fine){
 body[data-guide] button:hover:not(:disabled){background:var(--accent-hover);color:var(--on-accent)}
 body[data-guide] .stage-toggle:hover:not(:disabled){background:var(--soft);color:var(--ink)}
 body[data-guide] .guide-tabs a:hover{background:var(--soft);color:var(--link)}
 body[data-guide] .journey a:hover{color:var(--link);text-decoration:underline}
}
@media(min-width:1100px){
 body[data-guide] .stage{grid-template-columns:minmax(0,1fr) 320px}
 body[data-guide] .why-card{position:sticky;top:94px;grid-column:2;grid-row:1}
 body[data-guide] .why-card summary{pointer-events:none;list-style:none}
 body[data-guide] .why-card summary::-webkit-details-marker{display:none}
 body[data-guide] .why-card .why-content{display:block}
 body[data-guide] .stage-transition,body[data-guide] .completion{max-width:calc(100% - 344px)}
}
@media(max-width:1099px){body[data-guide] .guide{max-width:800px}}
@media(max-width:699px){
 body[data-guide] .shell{padding-inline:16px}
 body[data-guide] .hero{padding:28px 0 20px}
 body[data-guide] .lead{font-size:17px}
 body[data-guide] .guide-tabs{width:100%;padding:16px;gap:4px}
 body[data-guide] .guide-tabs a{flex:1;text-align:center;padding:16px;font-size:14px}
 body[data-guide] .journey-surface{padding:16px}
 body[data-guide] .journey{grid-template-columns:1fr;gap:16px}
 /* Keep two rows at 390px: nine 44px targets cannot fit on one 356px row. */
 body[data-guide] .is-compact .journey{grid-template-columns:1fr;gap:4px}
 body[data-guide] .is-compact .journey-segment{gap:0}
 body[data-guide] .is-compact .journey-segment strong{display:none}
 body[data-guide] .journey ol{margin-top:4px;gap:4px}
 body[data-guide] .journey-name{font-size:12px;white-space:nowrap}
 body[data-guide] .stage-toggle{padding:16px;font-size:15px;flex-wrap:wrap;gap:8px}
 body[data-guide] .stage-title{font-size:17px}
 body[data-guide] .closed-goal{flex-basis:100%;order:4;padding-left:25px;font-size:13px}
 body[data-guide] .stage-panel{padding:0 16px 16px}
 body[data-guide] .stage-goal{font-size:22px}
 body[data-guide] figure.official,body[data-guide] .menu-cards figure{padding:16px}
 body[data-guide] .filmstrip{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;border-radius:6px}
 body[data-guide] .filmstrip img{width:auto;max-width:none;height:auto;margin:0}
 body[data-guide] .menu-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body[data-guide] .stage-done,body[data-guide] .stage-missing{padding-inline:16px;font-size:15px}
 body[data-guide] .accept-actions{gap:8px}
 body[data-guide] .stage-transition{padding-left:16px}
 body[data-guide] .why-card,body[data-guide] .step-help,body[data-guide] .ota-reuse,body[data-guide] .ota-conflict,body[data-guide] pre{padding:16px}
 body[data-guide] [data-action],body[data-guide] .step-help{scroll-margin-top:148px}
}
@media(prefers-color-scheme:dark){
 body[data-guide]{--paper:#070e18;--surface:#0d1724;--ink:#e6dec5;--muted:#b6aa92;--line:#1e2836;--soft:#121f2d;
 --accent:#c8a35a;--on-accent:#070e18;--accent-hover:#dbba7c;--link:#d9b873;--focus:#d9b873;
 --tip-bg:#101a26;--tip-line:#c8a35a;--warn-bg:#251c1a;--disabled-bg:#26303c;--disabled-ink:#b6aa92;
 --glow-brass:rgba(200,163,90,.18);--glow-red:rgba(176,63,37,.10);--edge:rgba(0,0,0,.20);
 --bg-top:#08101b;--bg-bottom:#050a11;--grid:rgba(200,163,90,.065);--grain:rgba(230,222,197,.025)}
 body[data-guide] .stage-main{box-shadow:0 16px 36px #00000026}
}
@media(prefers-reduced-motion:reduce){body[data-guide] button,body[data-guide] .next{transition:none}body[data-guide] button:active:not(:disabled){transform:none}}