/* ERA Wallet User Guide — generated by build_site.py. Palette/fonts: see STYLE-NOTES.md */
:root{
  --bg:#ffffff; --bg-alt:#f5f5f0; --card:#ffffff; --text:#0d0e1c; --muted:#555568; --muted-2:#888899;
  --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.16); --code-bg:#f0f0ea;
  --accent:#ff6a1a; --accent-2:#ff8c42; --accent-tint:rgba(255,106,26,.10); --green:#00b67a; --red:#dc3c3c;
  --header-bg:#07080f; --header-text:#ffffff; --header-muted:#b0b0cc; --hero-bg:#0d0e1c;
  --note-bg:#f5f5f0; --warn-bg:#fff2ea; --warn-border:#ff6a1a; --verify-bg:#fff3b0; --verify-text:#4a3b00; --verify-border:#e6c74c;
  --ph-border:#9a9ab0; --ph-text:#6b6b80; --shadow:0 2px 12px rgba(0,0,0,.06); --device-frame:#1b1b1b;
  --font-head:'Chakra Petch','Impact',sans-serif; --font-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif; --font-mono:'IBM Plex Mono',Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#07080f; --bg-alt:#0d0e1c; --card:#0f1020; --text:#ffffff; --muted:#b0b0cc; --muted-2:#8888aa;
    --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.18); --code-bg:#161626;
    --accent-tint:rgba(255,106,26,.15); --green:#22d47a; --note-bg:#0f1020; --warn-bg:rgba(255,106,26,.10);
    --verify-bg:#4a3b00; --verify-text:#ffe680; --verify-border:#b59a2a; --ph-border:#555568; --ph-text:#8888aa;
    --shadow:0 2px 12px rgba(0,0,0,.4); --device-frame:#2a2a33; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07080f; --bg-alt:#0d0e1c; --card:#0f1020; --text:#ffffff; --muted:#b0b0cc; --muted-2:#8888aa;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.18); --code-bg:#161626;
  --accent-tint:rgba(255,106,26,.15); --green:#22d47a; --note-bg:#0f1020; --warn-bg:rgba(255,106,26,.10);
  --verify-bg:#4a3b00; --verify-text:#ffe680; --verify-border:#b59a2a; --ph-border:#555568; --ph-text:#8888aa;
  --shadow:0 2px 12px rgba(0,0,0,.4); --device-frame:#2a2a33; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
code,pre{font-family:var(--font-mono);font-size:.88em}
code{background:var(--code-bg);padding:.1em .4em;border-radius:6px}
pre{background:var(--code-bg);padding:14px 16px;border-radius:12px;overflow-x:auto;line-height:1.5}
pre code{background:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.1;letter-spacing:-.5px;margin:0}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.8px;text-transform:uppercase;padding:13px 28px;border-radius:100px;border:1px solid transparent;cursor:pointer;text-decoration:none!important;transition:transform .2s,box-shadow .2s,background .2s,color .2s;line-height:1}
.btn-primary{background:var(--accent);color:#fff!important;box-shadow:0 0 24px rgba(255,106,26,.35),0 4px 16px rgba(0,0,0,.25)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 0 40px rgba(255,106,26,.55),0 8px 24px rgba(0,0,0,.3)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:10px 20px;font-size:12px}

/* header */
.site-header{background:var(--header-bg);color:var(--header-text);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.07)}
.header-inner{max-width:1260px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none!important}
.brand img{height:34px;width:auto;display:block}
.brand-sub{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--header-muted);border-left:1px solid rgba(255,255,255,.2);padding-left:12px}
.header-links{margin-left:auto;display:flex;align-items:center;gap:22px}
.header-links a{color:var(--header-muted);font-size:14px;font-weight:500}
.header-links a:hover{color:#fff;text-decoration:none}
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.15);color:var(--header-muted);width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:inline}
}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;padding:8px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px}

/* search */
.header-search,.sidebar-search,.hero-search{position:relative}
.header-search{flex:0 1 320px}
input[type="search"][data-search]{width:100%;font:inherit;font-size:14px;padding:9px 14px 9px 36px;border-radius:100px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
.site-header input[type="search"][data-search]{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#fff}
.site-header input[type="search"][data-search]::placeholder{color:rgba(255,255,255,.5)}
input[type="search"][data-search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);color:var(--text);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);max-height:60vh;overflow:auto;z-index:60;padding:6px}
.search-results a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.search-results a:hover,.search-results a.active{background:var(--accent-tint)}
.search-results .sr-title{display:block;font-family:var(--font-head);font-weight:600;font-size:15px}
.search-results .sr-sec{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.search-results .sr-sum{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.search-results .sr-none{padding:10px 12px;color:var(--muted);font-size:14px}
.search-results mark{background:var(--accent-tint);color:inherit;border-radius:3px;padding:0 1px}

/* layout */
.layout{max-width:1260px;margin:0 auto;display:grid;grid-template-columns:270px minmax(0,1fr);gap:0;min-height:60vh}
.sidebar{border-right:1px solid var(--border);padding:28px 20px 40px 20px;position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow-y:auto}
.sidebar-search{display:none}
.sb-section{margin-bottom:22px}
.sb-title{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li a{display:block;padding:6px 10px;border-radius:8px;color:var(--text);font-size:14.5px;line-height:1.35;text-decoration:none}
.sidebar li a:hover{background:var(--accent-tint)}
.sidebar li a[aria-current="page"]{background:var(--accent);color:#fff;font-weight:500}
.sidebar-backdrop{display:none}
.main{padding:40px 48px 64px;min-width:0}

/* landing */
.hero{background:linear-gradient(180deg,var(--hero-bg),var(--header-bg));color:#fff;border-radius:20px;padding:56px 48px;margin:0 0 40px}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(34px,4.5vw,56px);letter-spacing:-1px;color:#fff;margin-bottom:16px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero-sub{color:#b0b0cc;max-width:60ch;font-size:18px;margin:0 0 28px}
.hero-search{max-width:520px}
.hero-search input[type="search"][data-search]{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff;padding:13px 16px 13px 40px;font-size:16px}
.hero-search input[type="search"][data-search]::placeholder{color:rgba(255,255,255,.55)}
.start-here,.section-grid{margin:0 0 44px}
.start-here h2,.section-grid h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.start-list{display:flex;flex-direction:column;gap:12px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;color:var(--text);text-decoration:none!important;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card-num{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.card-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.card-title{font-family:var(--font-head);font-weight:600;font-size:18px;line-height:1.2}
.card-summary{color:var(--muted);font-size:15px;line-height:1.45}
.card-time{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);margin-top:6px}

/* guide page */
.breadcrumb{font-size:13.5px;color:var(--muted);margin-bottom:20px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb a{color:var(--muted)}
.breadcrumb .sep{color:var(--muted-2)}
.page-title{font-size:clamp(30px,4vw,42px);letter-spacing:-1px;margin-bottom:12px}
.summary{font-size:19px;color:var(--muted);max-width:60ch;margin:0 0 22px;line-height:1.5}
.meta{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:18px;row-gap:12px;align-items:baseline;border:1px solid var(--border);background:var(--bg-alt);border-radius:14px;padding:16px 18px;margin:0 0 36px;max-width:70ch}
.meta-row{display:contents}
.meta-k{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);white-space:nowrap;align-self:baseline}
.meta-v{font-size:15.5px;color:var(--text)}
.content{max-width:70ch}
.content p{margin:0 0 1em}
.journey{margin:6px 0 22px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.journey-label{margin:0 0 10px;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.journey ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.journey li a{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--muted);font-size:14px;height:100%;box-sizing:border-box}
.journey .jn{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:13px;background:var(--border);color:var(--text)}
.journey li.done .jn{background:var(--accent);color:#fff;opacity:.6}
.journey li.current a{border-color:var(--accent);color:var(--text)}
.journey li.current .jn{background:var(--accent);color:#fff}
.journey-next{display:block;margin:28px 0 8px;padding:18px 22px;border-radius:14px;background:var(--accent);color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(255,106,26,.25)}
.journey-next:hover{transform:translateY(-2px)}
.journey-next-label{display:block;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;margin-bottom:6px}
.journey-next-title{display:block;font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.2}
.journey-next-sum{display:block;font-size:14px;opacity:.9;margin-top:6px}
.meta-outcome .meta-v{color:var(--text)}
.journey-end{background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:none}
@media (max-width:600px){.journey ol{grid-template-columns:1fr}}
.src{font-size:12.5px;color:var(--muted);margin-left:.35em;white-space:nowrap}
.src a{color:var(--muted);text-decoration:underline dotted}
.src a:hover{color:var(--accent)}
.content h2{font-size:26px;margin:44px 0 16px;padding-top:6px}
.content h3{font-size:20px;margin:30px 0 10px}
.content h4{font-size:17px;margin:22px 0 8px}
.content ul,.content ol{padding-left:1.4em;margin:0 0 1em}
.content li{margin:0 0 .45em}
.content li p{margin:0 0 .4em}
.content hr{border:0;border-top:1px solid var(--border);margin:32px 0}
.content strong{font-weight:600}
.content a.broken-link{color:var(--red);border-bottom:1px dashed var(--red)}
.inline-img{vertical-align:middle;max-height:1.6em}
.table-wrap{overflow-x:auto;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top}
th{font-family:var(--font-head);font-weight:600;background:var(--bg-alt)}

/* numbered steps */
ol.steps{list-style:none;padding:0;margin:0 0 1.5em;counter-reset:step}
ol.steps>li{counter-increment:step;position:relative;padding:0 0 22px 52px;margin:0;border-left:2px solid var(--border);margin-left:17px}
ol.steps>li:last-child{border-left-color:transparent;padding-bottom:6px}
ol.steps>li::before{content:counter(step);position:absolute;left:-19px;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--bg)}
ol.steps>li>p:first-child{margin-top:4px;font-size:18px}
ol.steps>li>ul,ol.steps>li>ol{margin-top:4px}
ol.steps>li>ul li{margin-bottom:.3em}
.content details{border:1px solid var(--border);border-radius:12px;padding:10px 16px;margin:0 0 1.2em;background:var(--bg-alt)}
.content details summary{cursor:pointer;font-weight:600;font-family:var(--font-head)}
.content details[open] summary{margin-bottom:8px}
.content details>p:last-child{margin-bottom:4px}

/* ---- ERA device drawing (ported from ERA-firmware/simulator/src/web/index.html, .device et al.) ----
   Simulator geometry: body 509x811, radius 48, screen 352x528 (176x264 framebuffer at 2x) at top 97,
   button 144x33 at bottom 28. Here the body is 508x810 and the screen top 98 (1 px off the
   simulator) so that at --era-scale:.5 every edge lands on a whole CSS pixel: body 254x405,
   screen 176x264 at (39,49). Every length is multiplied by --era-scale so one number resizes the
   whole device; .5 = 1 device pixel per CSS pixel, which keeps `image-rendering: pixelated` crisp. */
:root{--era-scale:.5}
/* every figure is a centred column, whatever wraps it (a step, a paragraph, <details>, a table
   cell, "Done"): device shots, photos and any raw <figure> written in the Markdown */
figure{display:flex;flex-direction:column;align-items:center;text-align:center;margin:12px 0 22px}
figure.era-shot{margin:14px 0 26px}
figure.era-shot .device{
  position:relative;width:calc(508px * var(--era-scale));height:calc(810px * var(--era-scale));
  background:linear-gradient(170deg,#3a3a3e 0%,#2a2a2e 25%,#1c1c20 55%,#121216 80%,#0a0a0d 100%);
  border-radius:calc(48px * var(--era-scale));overflow:hidden;flex:0 0 auto;
  box-shadow:
    0 calc(40px * var(--era-scale)) calc(80px * var(--era-scale)) calc(-15px * var(--era-scale)) rgba(0,0,0,.45),
    0 calc(16px * var(--era-scale)) calc(32px * var(--era-scale)) calc(-6px * var(--era-scale)) rgba(0,0,0,.35),
    0 calc(6px * var(--era-scale)) calc(14px * var(--era-scale)) rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 3px 4px rgba(255,255,255,.12),
    inset 2px 0 0 rgba(255,255,255,.14),
    inset -2px 0 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(255,255,255,.08),
    inset 0 -4px 8px rgba(0,0,0,.5);
}
figure.era-shot .device>.bezel-ring{position:absolute;inset:3px;border-radius:calc(45px * var(--era-scale));pointer-events:none;z-index:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.4)}
figure.era-shot .device::before{content:'';position:absolute;inset:0;border-radius:calc(48px * var(--era-scale));pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 75% 40% at 45% -5%,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 35%,transparent 65%)}
figure.era-shot .device::after{content:'';position:absolute;inset:0;border-radius:calc(48px * var(--era-scale));pointer-events:none;z-index:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.03) 55%,transparent 70%)}
figure.era-shot .screen-bezel,figure.era-shot .hw-button{z-index:1}
/* explicit box + left offset (no translate(-50%)) and max-width:none on the img: the global
   img{max-width:100%} inside a shrink-to-fit absolute box otherwise halves the screen */
figure.era-shot .screen-bezel{position:absolute;top:calc(98px * var(--era-scale));left:calc(78px * var(--era-scale));width:calc(352px * var(--era-scale));height:calc(528px * var(--era-scale));padding:0;margin:0;background:transparent;line-height:0}
figure.era-shot .screen-bezel img{display:block;width:100%;height:100%;max-width:none;background:#f5f0e8;image-rendering:pixelated;border-radius:2px;object-fit:fill}
figure.era-shot .hw-button{position:absolute;bottom:calc(28px * var(--era-scale));left:50%;transform:translateX(-50%);width:calc(144px * var(--era-scale));height:calc(33px * var(--era-scale));border-radius:999px;
  background:linear-gradient(180deg,#2e2e31 0%,#202023 40%,#131316 80%,#0e0e10 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.35),0 3px 6px -1px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 1px rgba(0,0,0,.5)}
figure.era-shot figcaption,figure.photo figcaption{font-size:14px;color:var(--muted);margin-top:12px;max-width:42ch;line-height:1.4}
/* "Done" / outside-the-steps screenshot: same device, same centring (the class only marks where
   it came from; it used to be left-aligned, which made those shots the odd ones out) */
figure.era-shot--inline{margin:16px 0 24px}
.fig-note{font-size:14px;color:var(--muted-2);text-align:center;margin:-14px 0 20px!important}
figure.photo img{max-width:min(520px,100%);border-radius:12px;border:1px solid var(--border)}
/* an image that is the only thing in a paragraph, list item, table cell or <details> body
   (inline Markdown image on its own line inside other text) is centred as a block too */
.content p>img.inline-img:only-child,.content li>img.inline-img:only-child,.content td>img.inline-img:only-child,.content details>img{display:block;margin:10px auto;max-height:none}
@media (max-width:600px){:root{--era-scale:.45}}
@media print{:root{--era-scale:.4}}

/* placeholders + verify marks (kept visible so the team can find them) */
.placeholder{display:block;border:2px dashed var(--ph-border);border-radius:12px;padding:20px 18px;margin:12px auto 22px;color:var(--ph-text);font-family:var(--font-mono);font-size:14px;line-height:1.5;text-align:center;max-width:min(420px,100%)}
.placeholder-tag{font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:11px}
.placeholder.inline{display:inline;padding:.15em .5em;margin:0;border-width:1px;border-radius:6px;font-size:.85em;text-align:left;max-width:none}
mark.verify{background:var(--verify-bg);color:var(--verify-text);outline:1px solid var(--verify-border);border-radius:4px;padding:0 .3em;font-family:var(--font-mono);font-size:.82em}

/* callouts */
blockquote{margin:0 0 1.2em;padding:14px 18px;border-left:4px solid var(--border-strong);background:var(--note-bg);border-radius:0 12px 12px 0;color:var(--text)}
blockquote p:last-child{margin-bottom:0}
/* callouts carry an icon so the eye lands on them: i = note/tip, ! in a triangle = caution/warning */
blockquote.callout{position:relative;padding-left:58px}
blockquote.callout::before{content:'';position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:26px 26px}
blockquote.note,blockquote.tip{border-left-color:var(--green)}
blockquote.note::before,blockquote.tip::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322d47a'/%3E%3Crect x='10.7' y='10' width='2.6' height='8' rx='1.2' fill='%23fff'/%3E%3Ccircle cx='12' cy='6.8' r='1.6' fill='%23fff'/%3E%3C/svg%3E")}
blockquote.caution{border-left-color:var(--verify-border);background:var(--note-bg)}
blockquote.caution::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 22.5 21h-21z' fill='%23e6c74c'/%3E%3Crect x='10.8' y='8.5' width='2.4' height='6.5' rx='1.1' fill='%23141413'/%3E%3Ccircle cx='12' cy='17.6' r='1.5' fill='%23141413'/%3E%3C/svg%3E")}
blockquote.warning{border-left-color:var(--warn-border);background:var(--warn-bg)}
blockquote.warning::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 22.5 21h-21z' fill='%23ff6a1a'/%3E%3Crect x='10.8' y='8.5' width='2.4' height='6.5' rx='1.1' fill='%23fff'/%3E%3Ccircle cx='12' cy='17.6' r='1.5' fill='%23fff'/%3E%3C/svg%3E")}
blockquote.callout strong:first-child{font-family:var(--font-head);letter-spacing:.5px;text-transform:uppercase;font-size:.9em}
@media (max-width:600px){blockquote.callout{padding-left:50px}blockquote.callout::before{left:12px;width:24px;height:24px;background-size:24px 24px}}

/* prev / next */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 32px;max-width:70ch}
.pn{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:14px;padding:14px 18px;color:var(--text);text-decoration:none!important;background:var(--card);box-shadow:var(--shadow)}
.pn:hover{border-color:var(--accent)}
.pn.next{text-align:right}
.pn.empty{border:0;background:none;box-shadow:none}
.pn-label{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.pn-title{font-family:var(--font-head);font-weight:600;font-size:16px}

/* feedback */
.feedback{border-top:1px solid var(--border);padding-top:24px;max-width:70ch;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.feedback-q{font-family:var(--font-head);font-weight:600;font-size:18px;margin:0}
.feedback-btns{display:flex;gap:10px}
.feedback-note,.source-note{flex-basis:100%;font-size:13px;color:var(--muted-2);margin:0}
.feedback-thanks{margin:0;color:var(--green);font-weight:500}
.source-note{margin-top:16px}

/* footer */
.site-footer{background:var(--header-bg);color:#b0b0cc;margin-top:40px;border-top:1px solid rgba(255,255,255,.07)}
.footer-inner{max-width:1260px;margin:0 auto;padding:28px 20px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.site-footer a{color:#fff}
.footer-note{color:#8888aa}
.site-footer code{background:rgba(255,255,255,.08);color:#b0b0cc}

/* responsive */
@media (max-width:1000px){
  .header-links a:not(.btn){display:none}
  .header-search{display:none}
  .main{padding:28px 24px 56px}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .nav-toggle{display:flex}
  .sidebar{position:fixed;left:0;top:64px;bottom:0;align-self:auto;height:calc(100vh - 64px);height:calc(100dvh - 64px);box-sizing:border-box;padding-bottom:calc(40px + env(safe-area-inset-bottom));width:min(320px,86vw);background:var(--bg);transform:translateX(-105%);transition:transform .25s;z-index:45;max-height:none;box-shadow:0 0 40px rgba(0,0,0,.3);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  body.nav-open .sidebar{transform:none}
  body.nav-open{position:fixed;width:100%;overflow:hidden}
  .sidebar-search{display:block;margin-bottom:18px}
  body.nav-open .sidebar-backdrop{display:block;position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.4);z-index:40}
  .hero{padding:36px 22px;border-radius:16px}
  .prevnext{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .pn.empty{display:none}
}
@media (max-width:600px){
  body{font-size:17px}
  .main{padding:20px 16px 48px}
  .brand-sub{display:none}
  .header-links .btn{display:none}
  ol.steps>li{padding-left:44px;margin-left:15px}
  ol.steps>li::before{width:32px;height:32px;left:-17px;font-size:15px}
  .meta{padding:12px 14px;column-gap:12px}
}
@media print{
  .site-header,.sidebar,.sidebar-backdrop,.feedback,.prevnext,.site-footer{display:none!important}
  .layout{display:block}
  .main{padding:0}
}

/* CSS iPhone (15/16 Pro proportions, screen 393x900 pt incl. status + home strips) for app screenshots */
/* iPhone 15/16 Pro-style frame for companion-app screenshots (578x1200, status bar stripped).
   Geometry in pt (393x852 screen), scaled by --ph-scale. */
:root{--ph-scale:.62;--ph-bg:#08080f}
figure.phone-shot{display:flex;flex-direction:column;align-items:center;text-align:center;margin:18px 0 22px}
.iphone{position:relative;width:calc(393px*var(--ph-scale) + 2*calc(11px*var(--ph-scale)));
  height:calc(900px*var(--ph-scale) + 2*calc(11px*var(--ph-scale)));padding:calc(11px*var(--ph-scale));
  border-radius:calc(66px*var(--ph-scale));box-sizing:border-box;
  background:linear-gradient(160deg,#3a3a40 0%,#232327 40%,#151518 100%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55),0 10px 24px -8px rgba(0,0,0,.35),
    inset 0 1.5px 0 rgba(255,255,255,.28),inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(255,255,255,.10),inset 0 -2px 4px rgba(0,0,0,.6)}
.iphone::before{content:'';position:absolute;inset:calc(3px*var(--ph-scale));border-radius:calc(63px*var(--ph-scale));
  box-shadow:inset 0 0 0 calc(1px*var(--ph-scale)) rgba(255,255,255,.07);pointer-events:none}
/* side keys */
.iphone .k{position:absolute;background:linear-gradient(90deg,#3b3b40,#1c1c1f);border-radius:2px}
.iphone .k.mute{left:calc(-2.5px*var(--ph-scale));top:calc(178px*var(--ph-scale));width:calc(3px*var(--ph-scale));height:calc(32px*var(--ph-scale))}
.iphone .k.vup{left:calc(-2.5px*var(--ph-scale));top:calc(238px*var(--ph-scale));width:calc(3px*var(--ph-scale));height:calc(64px*var(--ph-scale))}
.iphone .k.vdn{left:calc(-2.5px*var(--ph-scale));top:calc(318px*var(--ph-scale));width:calc(3px*var(--ph-scale));height:calc(64px*var(--ph-scale))}
.iphone .k.pwr{right:calc(-2.5px*var(--ph-scale));top:calc(270px*var(--ph-scale));width:calc(3px*var(--ph-scale));height:calc(100px*var(--ph-scale));background:linear-gradient(270deg,#3b3b40,#1c1c1f)}
.iphone-screen{position:relative;width:100%;height:100%;border-radius:calc(55px*var(--ph-scale));overflow:hidden;background:var(--ph-bg);
  box-shadow:inset 0 0 0 calc(1px*var(--ph-scale)) #000}
.iphone-status{position:relative;height:calc(50px*var(--ph-scale));background:var(--ph-bg);color:#fff;
  font:600 calc(15.5px*var(--ph-scale))/1 -apple-system,'SF Pro Text','IBM Plex Sans',sans-serif}
.iphone-status .t{position:absolute;left:calc(46px*var(--ph-scale));top:calc(17px*var(--ph-scale));letter-spacing:-.2px}
.iphone-status .island{position:absolute;left:50%;top:calc(11px*var(--ph-scale));transform:translateX(-50%);
  width:calc(126px*var(--ph-scale));height:calc(37px*var(--ph-scale));border-radius:999px;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.iphone-status .icons{position:absolute;right:calc(28px*var(--ph-scale));top:calc(15px*var(--ph-scale));display:flex;gap:calc(6px*var(--ph-scale));align-items:center}
.iphone-status .sig{display:inline-flex;gap:1px;align-items:flex-end;height:calc(11px*var(--ph-scale))}
.iphone-status .sig i{display:block;width:calc(3px*var(--ph-scale));background:#fff;border-radius:1px}
.iphone-status .bat{position:relative;width:calc(25px*var(--ph-scale));height:calc(12px*var(--ph-scale));border:calc(1.2px*var(--ph-scale)) solid rgba(255,255,255,.55);border-radius:calc(3.5px*var(--ph-scale));box-sizing:border-box}
.iphone-status .bat::before{content:'';position:absolute;inset:calc(1.5px*var(--ph-scale));right:calc(3px*var(--ph-scale));background:#fff;border-radius:calc(1.5px*var(--ph-scale))}
.iphone-status .bat::after{content:'';position:absolute;right:calc(-3.5px*var(--ph-scale));top:calc(3px*var(--ph-scale));width:calc(1.8px*var(--ph-scale));height:calc(4.5px*var(--ph-scale));background:rgba(255,255,255,.55);border-radius:0 2px 2px 0}
.iphone-screen img{display:block;width:100%;height:auto}
.iphone-bottom{height:calc(34px*var(--ph-scale));background:var(--ph-bg)}
.iphone .home{position:absolute;left:50%;bottom:calc(19px*var(--ph-scale));transform:translateX(-50%);width:calc(140px*var(--ph-scale));height:calc(5px*var(--ph-scale));border-radius:999px;background:rgba(255,255,255,.9)}

@media (max-width:600px){:root{--ph-scale:.5}}