/* ui/guide.css — additions layered on cells.css's token/card/nav system for the "how to use the viewer" explainer page. Nothing here redefines a cells.css class; it only adds guide-specific pieces cells.css has no need for (keyboard chips, the screen-map diagram, numbered steps, a compact glossary table). Loaded AFTER cells.css. */ /* ── keyboard / mouse chips ────────────────────────────────────────────── */ .kbd{ display:inline-flex;align-items:center;justify-content:center; min-width:1.6em;padding:2px 7px; font-family:var(--ff-m);font-size:11.5px;line-height:1.4;color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent); border:1px solid var(--line);border-bottom-width:2px;border-radius:3px; } /* ── numbered steps (quick-start) ──────────────────────────────────────── */ .steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:step} .steps li{ counter-increment:step; display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:baseline; color:var(--ink-2);font-size:14px;line-height:1.55; } .steps li::before{ content:counter(step); width:26px;height:26px;display:grid;place-items:center; font-family:var(--ff-m);font-size:11px;color:var(--am); border:1px solid color-mix(in srgb,var(--am) 55%,var(--line));border-radius:50%; align-self:start; } .steps strong{color:var(--ink);font-variation-settings:'wght' 600} /* ── the screen-map diagram: a labelled schematic of the viewer's own screen regions. Built from plain positioned divs (no screenshot asset to go stale) inside a fixed-aspect frame that mimics the real 16:9-ish viewport, so "top-right" in the text and "top-right" on the diagram are the same place. ─────────────────────────────────────────────────────── */ .screenmap{ position:relative;width:100%;aspect-ratio:16/9.2; border:1px solid var(--line);background: linear-gradient(160deg,color-mix(in srgb,var(--bg-2) 100%,transparent),var(--bg)); overflow:hidden;margin-top:clamp(16px,2vw,22px); } .screenmap::before{ /* faint starfield texture, purely decorative */ content:'';position:absolute;inset:0;opacity:.5;pointer-events:none; background-image: radial-gradient(1px 1px at 12% 22%,var(--ink-3) 40%,transparent 41%), radial-gradient(1px 1px at 68% 64%,var(--ink-3) 40%,transparent 41%), radial-gradient(1.5px 1.5px at 40% 78%,var(--ink-3) 40%,transparent 41%), radial-gradient(1px 1px at 84% 30%,var(--ink-3) 40%,transparent 41%), radial-gradient(1px 1px at 25% 55%,var(--ink-3) 40%,transparent 41%), radial-gradient(1.5px 1.5px at 92% 82%,var(--ink-3) 40%,transparent 41%); } .sm-zone{ position:absolute;display:flex;flex-direction:column;gap:2px; border:1px dashed color-mix(in srgb,var(--cy) 45%,var(--line)); background:color-mix(in srgb,var(--cy) 6%,transparent); padding:5px 7px;border-radius:2px; } .sm-zone b{ font-family:var(--ff-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--cy);white-space:nowrap; } .sm-zone span{font-size:10px;color:var(--ink-3);line-height:1.3;max-width:26ch} .sm-zone.am{border-color:color-mix(in srgb,var(--am) 45%,var(--line));background:color-mix(in srgb,var(--am) 6%,transparent)} .sm-zone.am b{color:var(--am)} .sm-zone.gr{border-color:color-mix(in srgb,var(--gr) 45%,var(--line));background:color-mix(in srgb,var(--gr) 6%,transparent)} .sm-zone.gr b{color:var(--gr)} .sm-zone.vi{border-color:color-mix(in srgb,var(--vi) 45%,var(--line));background:color-mix(in srgb,var(--vi) 6%,transparent)} .sm-zone.vi b{color:var(--vi)} .sm-nav{top:0;left:0;right:0;height:9%;flex-direction:row;align-items:center;justify-content:space-between} .sm-toolbar{top:13%;right:2%;width:30%;height:7%} .sm-display{top:22%;right:2%;width:30%;height:24%} .sm-sidebar{top:13%;left:2%;width:8%;height:7%} .sm-hips{top:23%;left:2%;width:24%;height:9%} .sm-sky{bottom:2%;left:2%;width:26%;height:9%} .sm-status{bottom:13%;left:2%;width:22%;height:6%} .sm-nearby{bottom:2%;right:2%;width:26%;height:9%} .sm-tracks{bottom:2%;left:38%;width:24%;height:6%} .sm-drawer{top:9%;right:0;bottom:0;width:16%;border-style:solid} /* The drawer zone deliberately OVERLAPS the toolbar / display / nearby zones, because that is what the real drawer does when it slides in. It is last in the DOM so it paints on top, but its fill is translucent, so the dashed border of the toolbar underneath used to run straight through its caption. Give the drawer's own two lines an opaque backing so they stay readable. */ .sm-drawer > b,.sm-drawer > span{ background:var(--bg);padding:1px 5px;margin-left:-5px; width:max-content;max-width:calc(100% + 10px); } /* The unlabelled middle of the schematic IS the map itself — say so, or a first-time reader reads the empty area as "nothing here". Centred, no box: it is the backdrop every other zone floats over, not another panel. */ .sm-canvas{ position:absolute;top:34%;left:20%;right:20%; display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center; } .sm-canvas b{ font-family:var(--ff-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-2); } .sm-canvas span{font-size:10px;color:var(--ink-3);line-height:1.3} @media (max-width:760px){ .screenmap{aspect-ratio:9/17;} .sm-zone span{display:none} .sm-canvas{left:8%;right:8%;top:38%} .sm-canvas span{display:none} /* at phone width the drawer strip is ~56px wide, so its nowrap label was clipped mid-word ("DETECTIO") by the map's overflow:hidden. Widen it and let the label wrap instead of amputating it. */ .sm-drawer{width:30%} .sm-drawer > b{white-space:normal} .sm-toolbar,.sm-display{right:2%;width:44%} .sm-hips{width:44%} .sm-sky,.sm-nearby{width:44%} .sm-tracks{left:28%;width:44%} } /* ── disclosure panel: this page's key text is far longer than the one-word tags cells.css was built for, and cells.css pins `.truth-k .tag` to `white-space:nowrap` inside a 150px grid column — so the label ran ~180px past its column and collided with the

beside it. Let it wrap, and drop the decorative rule that only makes sense on a single-line tag. ────────── */ .truth-k{align-items:baseline} .truth-k .tag{white-space:normal;line-height:1.5} .truth-k i{display:none} /* ── compact key/value glossary rows (sign, verdict, etc.) ─────────────── */ .gloss{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line);margin-top:10px} .gloss > div{ background:color-mix(in srgb,var(--bg) 55%,transparent); padding:9px 12px;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline; } .gloss dt{font-family:var(--ff-m);font-size:11px;color:var(--ink);white-space:nowrap} .gloss dd{margin:0;color:var(--ink-2);font-size:13px;line-height:1.55} .gloss dt .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle} @media (max-width:560px){.gloss > div{grid-template-columns:1fr}} /* ── on-this-page quick nav (mirrors the .back link language) ──────────── */ .jumplinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,2vw,20px)} .jumplinks a{ font-family:var(--ff-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-2);border:1px solid var(--line);padding:7px 11px;border-radius:2px; transition:color .25s,border-color .25s; } .jumplinks a:hover{color:var(--cy);border-color:var(--cy)} /* ── real screenshots of the live viewer, with a caption ───────────────── */ figure.shot{ margin:clamp(16px,2vw,22px) 0 0;border:1px solid var(--line);background:var(--bg-2); overflow:hidden; } figure.shot img{display:block;width:100%;height:auto} figure.shot figcaption{ padding:9px 12px;border-top:1px solid var(--line-2); color:var(--ink-3);font-size:11.5px;line-height:1.5;font-family:var(--ff-m); } figure.shot figcaption b{color:var(--ink-2);font-weight:400} .shotrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);margin-top:clamp(16px,2vw,22px)} .shotrow figure.shot{margin-top:0} @media (max-width:760px){.shotrow{grid-template-columns:1fr}} /* section spacing rhythm for a long-form reading page */ .guide-sec{padding-block:clamp(28px,4vh,52px);border-top:1px solid var(--line-2)} .guide-sec h2{ font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em; font-variation-settings:'wght' 620,'wdth' 92;margin:0 0 6px; } .guide-sec .card-sub{margin-bottom:16px;display:block} .guide-sec > .wrap > p.lede{color:var(--ink-2);font-size:clamp(13.5px,1vw,15.5px);line-height:1.65;max-width:74ch;margin:0 0 18px} /* ── real cutout PNGs (63px panels) shown large. They are genuine exported thumbnails, not re-rendered art, so upscaling them must NOT be smoothed: at 63px a browser's default bilinear filter turns a two-pixel residual into a soft smudge and the shapes this section teaches stop being readable. Nearest-neighbour keeps one data pixel one visible square. ── */ figure.shot.px img{image-rendering:pixelated;image-rendering:crisp-edges;background:#000} /* The two cutout figures below the panel key have different native widths — a 1-panel 63px stamp beside a 3-panel 191px strip — so equal columns would magnify the narrow one 3x more than its neighbour and the two would stop being comparable. Size the columns to the images instead, so both render at roughly the same pixels-per-pixel. */ .shotrow.fit{grid-template-columns:216px minmax(0,654px);justify-content:start;align-items:start} @media (max-width:960px){.shotrow.fit{grid-template-columns:1fr;max-width:420px}} /* ── caveat / disclosure box. The showcase pages define `.disc` in their own inline