:root { color-scheme: dark; --bg:#07101f; --panel:#101d31; --line:#2d405c; --ink:#edf5ff; --muted:#a9bad2; --accent:#33d6c7; --gold:#f5bf37; --warn:#ffd47b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:linear-gradient(145deg,#07101f,#101933 55%,#07101f); color:var(--ink); font:16px/1.65 Inter,ui-sans-serif,system-ui,sans-serif; }
a { color:#72e7dc; text-underline-offset:.16em; }
a:hover { color:#fff; }
code { color:#ffe391; font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
pre { max-width:80ch; overflow:auto; margin:1rem 0; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:#050b13; color:#edf5ff; line-height:1.55; }
pre code { color:inherit; }
.skip-link { position:absolute; left:-999px; top:0; background:white; color:#111; padding:.75rem 1rem; z-index:5; }.skip-link:focus { left:1rem; top:1rem; }
.site-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:2rem; align-items:center; padding:1rem max(5vw,1.5rem); background:#091426eF; border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }.brand { font-weight:900; letter-spacing:.12em; }.brand span { color:var(--accent); font-weight:600; letter-spacing:0; }.site-header nav { display:flex; flex-wrap:wrap; gap:1rem; }.site-header a { color:var(--muted); text-decoration:none; font-size:.88rem; }.site-header a:hover { color:white; }
main { max-width:1120px; margin:auto; padding:0 1.5rem 5rem; }.hero { padding:5rem 0 3rem; }.eyebrow { color:var(--accent); font-size:.75rem; letter-spacing:.16em; font-weight:800; }.hero h1 { font-size:clamp(2.5rem,7vw,5rem); line-height:1; margin:.4rem 0 1rem; }.lede { max-width:65ch; font-size:1.2rem; color:var(--muted); }.notice,.warning { border:1px solid #37647b; border-radius:14px; padding:1rem 1.2rem; background:#0b2034; max-width:80ch; }.warning { border-color:#806321; color:#ffe2a0; background:#2a220f; }
.section { padding:2.5rem 0; border-top:1px solid var(--line); scroll-margin-top:5rem; }.section h2 { font-size:2rem; margin:0 0 .5rem; }.section h3 { margin:2rem 0 .35rem; color:var(--accent); }.section p,.section li,.section dd { max-width:80ch; } li { margin:.55rem 0; } em { color:var(--gold); font-style:normal; font-weight:700; }.steps { padding-left:1.4rem; }.steps li::marker { color:var(--accent); font-weight:800; }.legend { display:grid; grid-template-columns:minmax(12rem,20rem) 1fr; gap:.6rem 1.25rem; background:#0a1729; padding:1.25rem; border-radius:12px; }.legend dt { font-weight:800; color:var(--gold); }.legend dd { margin:0; color:var(--muted); }
.screen-map { margin:1.5rem 0; padding:1rem; border:1px solid var(--line); border-radius:16px; background:#081323; }.map-stage { position:relative; width:100%; padding:4.4rem 9rem 4.5rem; }.map-stage img { display:block; width:100%; height:auto; border:1px solid #34506e; border-radius:8px; box-shadow:0 16px 45px #0009; }.callout-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }.callout-lines path { fill:none; stroke:var(--gold); stroke-width:1.6; vector-effect:non-scaling-stroke; }.callout { position:absolute; z-index:1; max-width:10rem; padding:.32rem .55rem; border:1px solid #94752c; border-radius:.45rem; background:#161c26; color:#ffe391; font-weight:800; font-size:clamp(.57rem,1.05vw,.79rem); line-height:1.15; box-shadow:0 4px 15px #0008; }.c-network { left:8%; top:1.1rem; }.c-asset { left:34%; top:.7rem; }.c-workspace { right:1%; top:.55rem; max-width:13rem; }.c-chart { left:.2rem; top:28%; }.c-wallet { right:.2rem; top:45%; }.c-history { left:.2rem; bottom:1.1rem; }.c-trade { left:71%; bottom:.6rem; }.c-metrics { right:.2rem; bottom:.6rem; }.screen-map figcaption,.screenshot figcaption { color:var(--muted); font-size:.9rem; padding:.75rem .25rem 0; }.screenshot { margin:1.5rem 0; padding:.75rem; border-radius:16px; background:#050b13; border:1px solid var(--line); }.screenshot img { display:block; width:100%; height:auto; border-radius:10px; }.checklist li::marker { content:'✓  '; color:var(--accent); font-weight:900; } footer { padding:2rem 5vw; text-align:center; color:var(--muted); border-top:1px solid var(--line); font-size:.88rem; }
.window-figure { position:relative; margin:1.5rem 0 2rem; padding:4.6rem 9.5rem 4.5rem; border:1px solid var(--line); border-radius:16px; background:#081323; }.window-crop { position:relative; overflow:hidden; border:1px solid #34506e; border-radius:8px; box-shadow:0 16px 45px #0009; }.window-crop img { position:absolute; display:block; max-width:none; height:auto; }.window-lines { position:absolute; inset:0; width:100%; height:calc(100% - 2rem); pointer-events:none; overflow:visible; }.window-lines path { fill:none; stroke:var(--gold); stroke-width:1.7; vector-effect:non-scaling-stroke; }.window-label { position:absolute; z-index:1; max-width:11rem; padding:.35rem .55rem; border:1px solid #94752c; border-radius:.45rem; background:#161c26; color:#ffe391; font-weight:800; font-size:clamp(.6rem,1.05vw,.8rem); line-height:1.2; box-shadow:0 4px 15px #0008; }.window-label.top-left { top:.75rem; left:2%; }.window-label.top-right { top:.75rem; right:2%; text-align:right; }.window-label.bottom-left { bottom:2.55rem; left:2%; }.window-label.bottom-right { bottom:2.55rem; right:2%; text-align:right; }.window-figure figcaption { color:var(--muted); font-size:.9rem; padding:.8rem .2rem 0; }.wallet-view .window-crop { aspect-ratio:577/500; }.wallet-view .window-crop img { width:439.7%; left:-339.7%; top:-28%; }.chart-view .window-crop { aspect-ratio:1520/600; }.chart-view .window-crop img { width:166.9%; left:0; top:-23.3%; }.trade-view .window-crop { aspect-ratio:577/405; }.trade-view .window-crop img { width:439.7%; left:-339.7%; top:-153.1%; }.history-view .window-crop { aspect-ratio:1520/265; }.history-view .window-crop img { width:166.9%; left:0; top:-286.8%; }.screen-map figcaption,.screenshot figcaption { color:var(--muted); font-size:.9rem; padding:.75rem .25rem 0; }.screenshot { margin:1.5rem 0; padding:.75rem; border-radius:16px; background:#050b13; border:1px solid var(--line); }.screenshot img { display:block; width:100%; height:auto; border-radius:10px; }.checklist li::marker { content:'✓  '; color:var(--accent); font-weight:900; } footer { padding:2rem 5vw; text-align:center; color:var(--muted); border-top:1px solid var(--line); font-size:.88rem; }
:where(a,button,input,textarea,select):focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (max-width:700px) { .site-header { position:static; align-items:flex-start; flex-direction:column; gap:.6rem; }.map-stage,.window-figure { padding:3.3rem 4.4rem 3.3rem; }.callout,.window-label { max-width:5.5rem; font-size:.52rem; padding:.22rem .32rem; }.c-network { left:5%; top:.5rem; }.c-asset { left:31%; top:.35rem; }.c-workspace { right:0; top:.35rem; max-width:6.1rem; }.c-chart { top:29%; }.c-wallet { top:47%; }.c-history { bottom:.3rem; }.c-trade { left:55%; bottom:.3rem; }.c-metrics { right:0; bottom:.3rem; }.window-label.top-left { top:.4rem; left:1%; }.window-label.top-right { top:.4rem; right:1%; }.window-label.bottom-left { bottom:1.8rem; left:1%; }.window-label.bottom-right { bottom:1.8rem; right:1%; }.legend { grid-template-columns:1fr; gap:.1rem; }.legend dd { margin-bottom:.8rem; }.hero { padding-top:3rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.guide-table { width:100%; max-width:80ch; margin:1.5rem 0; border-collapse:collapse; background:#0a1729; }
.guide-table caption { text-align:left; color:var(--muted); padding-bottom:.6rem; }
.guide-table th,.guide-table td { padding:.75rem; text-align:left; border:1px solid var(--line); overflow-wrap:anywhere; }
.guide-table thead th { color:var(--accent); }

.wallet-view .window-label.bottom-left,.wallet-view .window-label.bottom-right { bottom:1rem; }
@media (max-width:700px) { .wallet-view { padding:1rem; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; } .wallet-view .window-crop { grid-area:2/1/3/3; } .wallet-view .window-lines { display:none; } .wallet-view .window-label { position:static; max-width:none; font-size:.72rem; } .wallet-view .top-left { grid-area:1/1; } .wallet-view .top-right { grid-area:1/2; } .wallet-view .bottom-left { grid-area:3/1; } .wallet-view .bottom-right { grid-area:3/2; } .wallet-view figcaption { grid-area:4/1/5/3; } }

/* Instructions stay beside readable captures, then stack on narrow screens. */
main { max-width:1400px; }
.guide-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:start; margin:1.5rem 0 2.5rem; }
.guide-copy { min-width:0; }
.guide-copy > :first-child { margin-top:0; }
.guide-copy h4 { margin:0 0 .8rem; color:var(--accent); font-size:1.3rem; }
.guide-visuals { min-width:0; }
.guide-shot { margin:0 0 1.3rem; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:#080f1b; }
.shot-link { position:relative; display:block; width:fit-content; max-width:100%; margin:auto; }
.guide-shot img { display:block; max-width:100%; width:auto; height:auto; border-radius:7px; }
.guide-shot figcaption { margin-top:.8rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.guide-shot figcaption strong { color:var(--ink); }
.enlarge-hint { display:block; font-size:.78rem; color:var(--accent); margin-top:.3rem; }
.shot-marker { position:absolute; display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; background:var(--gold); border:2px solid #07101f; color:#07101f; font-weight:900; font-size:.75rem; transform:translate(-50%,-60%); box-shadow:0 1px 5px #000; }
.workspace-gallery { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:1.25rem; margin:2rem 0; }
.workspace-gallery .guide-shot { margin:0; }
.capture-note { color:var(--muted); }
@media (max-width:980px) { .guide-pair { grid-template-columns:1fr; gap:1rem; } .guide-visuals { max-width:760px; } }
@media (max-width:700px) { .workspace-gallery { grid-template-columns:1fr; } main { padding-inline:1rem; } .guide-shot { padding:.6rem; } .section h2 { font-size:1.65rem; } }
@media print { .site-header { position:static; } .guide-pair { grid-template-columns:1fr; } .guide-shot { break-inside:avoid; } .enlarge-hint { display:none; } }
.shot-outline { position:absolute; border:2px solid var(--gold); border-radius:6px; pointer-events:none; }

@media (max-width:600px) { .guide-table th,.guide-table td { padding:.5rem .35rem; font-size:.75rem; overflow-wrap:normal; } }