:root { color-scheme:dark; --bg:#07111d; --panel:#0d1b2a; --panel2:#102338; --line:#20364a; --text:#eef6fb; --muted:#91a5b8; --cyan:#4dd7e5; --amber:#ffbf47; --green:#61d89b; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; color:var(--text); background:radial-gradient(circle at 85% -10%,#143656 0,transparent 36%),linear-gradient(180deg,#081522 0,#050b12 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:24px 24px; }
.app-shell { width:min(100%,760px); min-height:100vh; margin:auto; padding:env(safe-area-inset-top) 20px calc(32px + env(safe-area-inset-bottom)); }
.topbar { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { display:block; width:42px; height:42px; border:1px solid #2c7380; border-radius:11px; object-fit:cover; box-shadow:0 0 18px rgba(77,215,229,.13),inset 0 0 16px #163b48; }
.brand strong,.brand small { display:block; }.brand strong { font-size:15px; letter-spacing:.02em; }.brand small { margin-top:3px; font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.status { font:600 9px/1 ui-monospace,monospace; letter-spacing:.12em; color:var(--muted); }.status i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
main { outline:none; }.loading,.error { margin:50px 0; color:var(--muted); text-align:center; }
.hero { padding:48px 2px 30px; }.eyebrow { margin:0 0 12px; color:var(--cyan); font:700 11px/1 ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; max-width:650px; font-size:clamp(34px,8vw,58px); line-height:.98; letter-spacing:-.045em; }.hero p { max-width:510px; margin:18px 0 0; color:var(--muted); font-size:15px; line-height:1.55; }
.section-label { display:flex; justify-content:space-between; margin:10px 2px 12px; color:var(--muted); font:700 10px/1 ui-monospace,monospace; letter-spacing:.15em; text-transform:uppercase; }
.mode-picker { margin:0 0 30px; }.mode-heading { display:flex; justify-content:space-between; margin:0 2px 10px; color:var(--muted); font:700 10px/1 ui-monospace,monospace; letter-spacing:.15em; text-transform:uppercase; }.mode-slider { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; border:1px solid var(--line); border-radius:17px; background:#091522; overflow:hidden; }.mode-slider::before { content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border:1px solid #347583; border-radius:13px; background:linear-gradient(120deg,#153848,#102b3b); box-shadow:0 5px 18px rgba(0,0,0,.22); transition:transform .22s ease; }.mode-slider[data-mode="list"]::before { transform:translateX(100%); }.mode-slider button { position:relative; z-index:1; min-height:58px; border:0; color:var(--muted); background:transparent; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }.mode-slider button[aria-checked="true"] { color:var(--text); }.mode-slider strong,.mode-slider small { display:block; }.mode-slider strong { font-size:14px; }.mode-slider small { margin-top:5px; color:var(--muted); font-size:10px; letter-spacing:.04em; }
.item-list,.steps { display:grid; gap:9px; }.item-link { display:grid; grid-template-columns:43px 1fr 28px; align-items:center; min-height:72px; padding:10px 14px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(120deg,rgba(17,38,59,.96),rgba(10,25,40,.94)); color:var(--text); text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.item-link:active,.step:active { transform:scale(.985); }.item-no,.step-number { color:var(--cyan); font:700 11px/1 ui-monospace,monospace; }.item-name { font-size:15px; font-weight:650; }.item-meta { display:block; margin-top:5px; color:var(--muted); font:500 9px/1 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }.arrow { color:#628098; font-size:22px; }
.detail-head { padding:38px 2px 26px; }.back-top { display:inline-flex; margin-bottom:30px; color:var(--muted); text-decoration:none; font:650 11px/1 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }.detail-index { color:var(--cyan); font:700 11px/1 ui-monospace,monospace; letter-spacing:.16em; }.detail-head h1 { margin-top:12px; font-size:clamp(34px,9vw,54px); }.instruction { display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:13px 15px; border:1px solid #564a2b; border-radius:12px; background:#201c14; color:#d4c29e; font-size:12px; line-height:1.45; }.instruction b { color:var(--amber); font-family:ui-monospace,monospace; }
.step { width:100%; min-height:86px; display:grid; grid-template-columns:38px 1fr 22px; gap:8px; align-items:start; padding:15px 14px; border:1px solid var(--line); border-radius:15px; color:var(--text); background:linear-gradient(120deg,#102238,#0b1927); text-align:left; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }.step-number { padding-top:4px; }.step-copy { min-width:0; line-height:1.48; overflow:hidden; }.step.revealed .step-copy { overflow:auto; }.step-copy p { margin:0 0 8px; }.step-copy p:last-child { margin-bottom:0; }.step-copy ul { margin:0; padding-left:18px; }.step-copy del { color:#758697; }.table { min-width:420px; font-size:12px; }.table>div { display:grid; grid-auto-columns:minmax(120px,1fr); grid-auto-flow:column; border-bottom:1px solid var(--line); }.table span { padding:7px; }
.step:not(.revealed) .step-copy { height:31px; border-radius:6px; background:repeating-linear-gradient(90deg,#294158 0,#294158 8px,#22384d 8px,#22384d 11px); }.step:not(.revealed) .step-copy>* { visibility:hidden; }.step.revealed { border-color:#347583; background:linear-gradient(120deg,#123140,#0c202c); }.step.revealed .reveal-icon::after { content:"✓"; color:var(--green); }.step:not(.revealed) .reveal-icon::after { content:"+"; color:#557289; }
.list-step { grid-template-columns:38px minmax(0,1fr); cursor:default; }.list-step:active { transform:none; }.list-instruction { border-color:#245168; background:#0d2431; color:#aac5d2; }.list-instruction b { color:var(--cyan); }
.home-link { display:flex; justify-content:center; align-items:center; min-height:58px; margin-top:24px; border:1px solid var(--line); border-radius:14px; color:var(--cyan); text-decoration:none; font:700 11px/1 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }.source-note { margin:28px 0 0; color:#647a8d; text-align:center; font-size:10px; line-height:1.5; }
@media (hover:hover) { .item-link:hover,.step:hover,.home-link:hover { border-color:#3a7188; } }
@media (max-width:430px) { .app-shell { padding-left:14px; padding-right:14px; }.topbar { height:76px; }.status { font-size:8px; }.hero { padding-top:38px; }.item-link { min-height:68px; }.back-top { margin-bottom:25px; } }