/* ============================================================ Pre-Install page — additions on top of docs.css that the real design system does not already define. Uses docs.css's .prose typography, .callout, .code-block, .table-wrap and .pager as-is, but skips its 3-column .docs-layout (no .docs-side / .docs-toc sidebars — see .pi-page below) since the reference is a single centered page. The zh/en toggle (.zh-only/.en-only, .lang-toggle) comes from invite-blocks.css, shared with the Invitation page. ============================================================ */ /* This page's code blocks drop the redundant .lang tag (docs.css shows "PowerShell" via .fname AND "POWERSHELL" via .lang in the same header — the same word twice). With .lang gone, dock .code-copy to the right edge itself so the header still reads as label-left / action-right. */ .pi-page .code-head .code-copy { margin-left: auto; } /* docs.css's .ct-bar/.ct-tab reads as a row of underlined text labels (border-bottom on the active one, transparent background otherwise) — fine for a tab strip glued to the top of a single code block, but on this page a mode switch (offline/online) sometimes precedes several paragraphs, callouts and code blocks, not just one — glued underline tabs read as ambiguous prose there, not an obvious toggle. Restyle it here as a rounded segmented switch instead, on the exact same pattern as the header's zh/en .lang-toggle: a pill track with a solid-fill active button, which reads as "a choice" at a glance regardless of what kind of content follows. Scoped to .pi-page so Docs.html's own code-tabs (still glued to a single code block there) are untouched. */ .pi-page .code-tabs { margin: 1.6rem 0 0; } .pi-page .ct-bar { display: inline-flex; gap: 0.15rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; } .pi-page .ct-tab { border-radius: 999px; padding: 0.4rem 1rem; border-bottom: 0; font-family: var(--font-ui); font-weight: 600; } .pi-page .ct-tab.active { background: var(--accent); color: var(--on-accent); border-bottom: 0; } .pi-page .code-tabs .code-block { margin-top: 1.4rem; border-radius: 12px; border-top: 1px solid #262f42; } /* method-tag: names WHICH sub-method a code-tabs panel is (Step 5.2's offline/online modes are genuinely different procedures — "copy a pre-quantized model" vs. "run qc quantization" — not just the same task run two ways, so it needs its own label). A second

right under the step's own

read as two competing headlines stacked on top of each other (mode-head's h2 + this h3 both bold, both close to the same size) — a small pill instead reads as a tag on the content, not a second title. */ .method-tag { display: inline-flex; align-items: center; margin: 0 0 0.7rem; padding: 0.28rem 0.8rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.82rem; font-weight: 600; } /* the switch sitting beside the step's own heading turned out fragile — at exactly the width where the heading (shrunk to its minimum) and the switch pill both still fit on one row, there was zero spare pixel of margin, one font-rendering difference away from the switch clipping past the edge instead of wrapping cleanly. Simpler and more robust: the heading is a normal, full-width step heading like every other step (wraps on its own like plain text always does), and the switch is just the next block in flow — always its own row, same left edge as the heading, no fitting math to get wrong. */ .pi-page .ct-bar { margin: 0 0 1rem; } /* The prereq box spells out raw URLs as link text (no spaces to wrap on) — at narrow widths that forces the box, and the whole page, wider than the viewport instead of wrapping. Let long tokens break anywhere — but not inside .code-block, where code intentionally scrolls horizontally instead of wrapping (docs.css sets white-space:pre there on purpose). */ .pi-page a, .pi-page p code { overflow-wrap: anywhere; } /* Single-column page — no .docs-side / .docs-toc sidebars. The reference mock is a plain centered page, not the site's 3-column docs layout, so this page skips docs.css's .docs-layout grid entirely. .prose itself (max-width:760px, from docs.css) still carries all the article typography; it just needs centering since it's no longer a grid child. */ .pi-page { padding: 2.4rem 0 5rem; } .pi-page .prose { /* docs.css's default max-width:760px is tuned for long-form prose; this page is table/code/screenshot-heavy, and the reference runs content the full width of its container (~1200px on a wide viewport — the same figure as the site's own --maxw). Let .wrap's own cap be the only one: drop .prose's narrower ceiling instead of picking a second number. */ max-width: none; margin-inline: auto; } /* an earlier pass capped paragraph/list text at 68ch so a line of prose wouldn't run past a comfortable reading width — but a short instruction or a callout only a couple sentences long doesn't read as "prose", it reads as a ragged, mostly-empty box with the last line or two chopped short for no visible reason. Full width (edge to edge, matching tables/code/figures/the step sidebar) reads cleaner for this page's actual content: short, boxed instructions, not long-form paragraphs. */ .pi-page .prose p { margin-top: 1.3rem; } /* body copy inherited the site's --step-0 (18-20px) and --text (93% lightness, near-white) — sized and lit for short doc paragraphs, not the long run of step-by-step instructions this page is mostly made of, where it read as both larger and brighter than it needed to be. Dial both down for plain paragraphs/list items only; headings keep full size and full --text brightness, and .lead (the page's opening statement) is deliberately excluded so it stays the prominent intro line rather than shrinking to body-copy weight. */ .pi-page .prose p:not(.lead), .pi-page .prose li { font-size: 0.95rem; color: var(--text-2); } /* the added margin-top above is meant for flowing paragraphs, but it's specific enough (.pi-page .prose p) to also outrank docs.css's own .callout p / .prereq .body p { margin: 0 } — which exist specifically so a callout's flush-top text stays vertically aligned with its icon (both flex siblings, icon pinned near the top). The extra margin pushed the text down away from the icon while the icon stayed put — a visible misalignment, not just a spacing tweak. Reassert margin:0 for every "icon + text" boxed component's body text, matching specificity so this always wins regardless of source order. */ .pi-page .prose .callout p, .pi-page .prose .prereq .body p, .pi-page .prose .pi-video-card__body p { margin-top: 0; } .pi-page > .prose > .eyebrow { margin-top: 0.5rem; } .pi-h1 { margin: 0.7rem 0 0; } .pi-grad { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* docs.css ships .callout.note/.tip/.warn but no green "success" variant (e.g. "you're done, this worked") — add it on the same pattern. Mixed into transparent rather than var(--surface), matching .tip's own --accent-soft and docs.css's .note/.warn: a wash of colour over whatever's behind it reads better than averaging toward a flat opaque neutral, and doesn't need to know var(--surface)'s exact value. */ .callout.success { border-left-color: var(--success); background: color-mix(in oklch, var(--success) 10%, transparent); } .callout.success .ic { color: var(--success); } .callout.success .ct-body strong { color: var(--success); } /* .skill-flow itself already washes its whole card with var(--accent-soft) — stacking .callout.success's own transparent wash on top of that averages the two tints into a muddy blue-green instead of reading as "success" clearly. Opaque var(--surface) instead, so it sits as a clean card on top of the already-tinted parent rather than blending with it. */ .skill-flow .callout.success { background: var(--surface); } /* Same box model as docs.css's .callout (10px radius, 0.95rem/1.1rem padding, 0.92rem body text at regular weight) so an FAQ item reads as the same family of box as the note/success callouts above it — only the accent color should change between them, not the weight or shape. */ .faq { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.2rem 0; } .faq + .faq { margin-top: 0.6rem; } /* oklch mixes by hue angle, and --warn (orange, hue 62) is much closer to var(--border)/var(--surface-2)'s hue (this palette's blue, ~263) going the "long way" than the short way — so oklch's default shorter-hue interpolation swings through magenta/navy instead of a sensible warm blend (confirmed by rendering both: oklch here produced a plainly purple border and a navy-blue background instead of muted orange). oklab mixes on Cartesian a/b instead of hue angle, so it can't wrap the wrong way around the wheel. */ .faq.faq-warn { border-color: color-mix(in oklab, var(--warn) 45%, var(--border)); } /* transparent, not var(--surface-2) — see docs.css's .callout.note/.warn for why: mixing into an opaque neutral reads as flat/dull (confirmed by rendering both side by side), a wash over transparent doesn't. */ .faq.faq-warn summary { background: color-mix(in oklab, var(--warn) 10%, transparent); } .faq.faq-warn summary .ic { color: var(--warn); } .faq summary { cursor: pointer; display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.1rem; font-weight: 400; font-size: var(--step--1); line-height: 1.6; list-style: none; background: var(--surface-2); color: var(--text); } .faq summary::-webkit-details-marker { display: none; } /* .ic is a bare — without an explicit box it stays inline and the SVG sits on the surrounding text's baseline, inheriting extra space from the 0.92rem/1.6 line-height it's sitting inside (a couple px more than the svg's own 20px). That extra space pushes the icon's visual center down from where the flex row's align-items:center thinks it is, reading as "icon sits a bit low against the text" even though the box model is centered. display:inline-flex shrink-wraps .ic to the svg's actual 20x20 size, same fix .callout .ic already has via explicit width/height. */ .faq summary .ic { flex: none; display: inline-flex; color: var(--accent-text); } .faq summary .ic svg { width: 20px; height: 20px; } .faq summary .chev { margin-left: auto; flex: none; width: 18px; height: 18px; transition: transform 0.2s var(--ease); } .faq[open] summary .chev { transform: rotate(180deg); } .faq .faq-body { padding: 1rem 1.1rem; border-top: 1px solid var(--border); font-size: var(--step--1); } .faq .faq-body > *:first-child { margin-top: 0; } /* ---- faq-success: a script step's "here's the DONE output you should see" box. First cut wrapped the output in a second, unrelated dark .code-block terminal chrome nested inside a neutral .faq — two flat dark boxes stacked with no colour cue for "this means it worked", which read as generic/ugly. Tint the whole disclosure green (same oklab-mix pattern as .faq-warn) and print the output straight on that tinted body in --success-coloured mono, no nested box, so "success" is legible from the collapsed summary alone and the open state reads as one coherent green panel instead of two boxes. ---- */ .faq.faq-success { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); } .faq.faq-success summary { background: color-mix(in oklab, var(--success) 10%, transparent); } .faq.faq-success summary .ic { color: var(--success); } .faq.faq-success .faq-body { background: color-mix(in oklab, var(--success) 6%, transparent); } .faq.faq-success .faq-body pre { margin: 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.7; color: var(--success); } .table-wrap td.chk { text-align: center; } /* --success is a per-theme accent tuned for soft text/icon-on-tint use (see .callout.success, .status-toggle) — in dark mode it's a pale mint (#7ee0c5) meant to read as light text on a dark surface, not as an opaque fill. Used as a solid badge background with a white checkmark on top, that pale mint washes out to low-contrast and looks broken. A checkmark badge reads as "done" the same way regardless of site theme, so give it its own fixed green rather than following --success. */ .table-wrap td.chk .badge { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #1a8f6e; color: #fff; align-items: center; justify-content: center; } .table-wrap td.chk .badge svg { width: 13px; height: 13px; } /* important/emphasised text outside a callout (plain step-body

) had no colour at all — just the browser's default bold, same colour as the surrounding sentence — so it didn't stand out the way a callout's coloured does. Give it the brand accent colour so "this part matters" reads consistently whether it's inside a callout or not. Scoped to .pi-page (not docs.css's .prose generally) since this is a deliberate choice for these workshop guide pages, not a site-wide one. */ .pi-page .prose strong { color: var(--accent-text); } /* circular step numbers to match the reference (docs.css's default .prose ol counter is a rounded square) — scoped to this page only. */ .pi-page .prose ol > li::before { border-radius: 50%; } /* ---- prereq: a bigger, more prominent callout for a hard requirement (e.g. "register before you start"), borrowed layout-wise from the original mock — icon-in-a-ring + eyebrow + heading — but built on our own tokens (accent gradient, not the mock's pink/violet). ---- */ .prereq { display: flex; gap: 1rem; align-items: flex-start; margin: 0.8rem 0; padding: 1.1rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--accent-soft); } .prereq .badge-ring { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--gradient-btn); color: var(--on-accent); box-shadow: 0 8px 20px var(--accent-glow); } .prereq .badge-ring svg { width: 18px; height: 18px; } .prereq .body { min-width: 0; } .prereq .body .k { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.3rem; } .prereq .body h3 { margin: 0 0 0.35rem; font-size: 1.15rem; } .prereq .body p { margin: 0; color: var(--text-2); line-height: 1.6; } /* ---- prereq--inline: for a short one-liner prereq (the "bring this" checklist cards) where stacking title above description just to have them wastes a whole line — put them on the same row instead. Not applied to every .prereq (the "register a Qualcomm account" card above still has multi-line body copy that needs its own line). .k stays full-width via flex-basis:100% so it's still its own line above. ---- */ /* .prereq's own align-items:flex-start lines the badge up with the .k label's line — barely visible when .body was three stacked lines tall, but now that .body is just two short lines, the badge reads as sitting too high instead of centered on the card. Center it on the whole card instead now that the card itself is short. */ .prereq--inline { align-items: center; } .prereq--inline .body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7rem; row-gap: 0.15rem; } .prereq--inline .body .k { flex-basis: 100%; margin-bottom: 0.1rem; } .prereq--inline .body h3 { margin: 0; flex: none; white-space: nowrap; } .prereq--inline .body p { margin: 0; flex: 1 1 240px; min-width: 0; } @media (max-width: 560px) { /* .body's flex-wrap above packs h3 + p onto one line whenever they're short enough to fit (e.g. "Mouse" + its one-line description), but wraps them onto separate lines once they don't (e.g. "Ethernet Adapter"'s longer pair) — so which cards get a bold title-on-its- own-line and which get title+body run together as one line varies card to card, depending on wording length, not by design. Force everyone onto the same stacked shape (title line, then body line) at phone width instead of leaving it to wrap-or-not chance. */ .prereq--inline .body { display: block; } .prereq--inline .body h3, .prereq--inline .body p { display: block; white-space: normal; } } /* no responsive handling at all previously — at phone widths the fixed badge stole enough of the row that the text column (already carrying full sentences and raw URLs) was squeezed down to roughly half the card's width, wrapping every few words into a tall, narrow, hard-to-read strip. Stack the badge above the text instead of beside it once the card itself gets narrow, same fix as .pi-video-card below. */ @media (max-width: 560px) { .prereq { flex-direction: column; padding: 1rem 1.1rem; } /* .prereq--inline's align-items:center (set above for the row layout, to center the badge against the short one-line body) means "center" on the cross axis — once .prereq goes column just above, the cross axis flips to horizontal, so the badge drifts to the middle of the card while the text stays left-aligned under it. Pin it back to the left edge so badge and text share one edge, same as .skill-flow's icon-left layout right below it on this page. */ .prereq--inline { align-items: flex-start; } } /* ---- pi-video-card: icon-left / text-right card with its own CTA button, matching the mock's video-card layout (badge + eyebrow + heading + body + button), on our tokens instead of the mock's pink/violet. Named pi-* (not .video-card) since docs.css already defines a real, differently- shaped .video-card used on other pages — reusing that name here would pull in conflicting rules. ---- */ .pi-video-card { display: flex; gap: 1.3rem; align-items: flex-start; margin: 1.5rem 0; padding: 1.8rem 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-grad, var(--surface)); } .pi-video-card__badge { position: relative; flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--gradient-btn); color: var(--on-accent); box-shadow: 0 8px 20px var(--accent-glow); } .pi-video-card__badge svg { width: 20px; height: 20px; position: relative; z-index: 1; } /* a soft pulsing ring behind the play icon — the "this is watchable, click me" nudge a static icon alone doesn't give. */ .pi-video-card__badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0.55; animation: pi-video-pulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes pi-video-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pi-video-card__badge::before { animation: none; display: none; } } .pi-video-card__eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.35rem; } .pi-video-card__body h3 { margin: 0 0 0.4rem; font-size: 1.1rem; } .pi-video-card__body > p { margin: 0 0 0.9rem; color: var(--text-2); } /* .prose a:not(.btn) (docs.css) outranks a single class on specificity and would otherwise repaint this link accent-blue-on-blue — match it with an equally-specific selector rather than !important. */ .pi-video-card a.pi-video-card__link { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.6rem 1.1rem; border-radius: 999px; white-space: nowrap; background: var(--gradient-btn); color: var(--on-accent); font-size: 0.86rem; font-weight: 600; border-bottom: none; } .pi-video-card__link svg { flex: none; } .pi-video-card__link svg { width: 14px; height: 14px; } .pi-video-card__body { min-width: 0; } /* same fix, same reason as .prereq above — no responsive handling meant the fixed 48px badge squeezed the eyebrow/heading/body/button column down to roughly half the card's width on a phone. */ @media (max-width: 560px) { .pi-video-card { flex-direction: column; padding: 1.4rem 1.3rem; } } /* ---- install flow: a mini in-page nav beside the 4 numbered install steps, mirroring the mock's "Windows 流程" side list — separate from the auto-generated .docs-toc on the far right, which lists the whole page, not just this sub-flow. Not in docs.css; page-scoped here. ---- */ .install-flow { display: grid; grid-template-columns: 168px 1fr; gap: 2.4rem; margin-top: 1.6rem; align-items: start; } /* grid items default to min-width:auto (their content's natural size), so without this a wide child (the flex-wrapped mobile nav below, or a long code line) can force the 1fr track — and the whole page — wider than the viewport instead of shrinking or wrapping. */ .install-flow > * { min-width: 0; } @media (max-width: 860px) { .install-flow { grid-template-columns: 1fr; } } .install-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 0.15rem; } .install-nav a { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0; color: var(--text-2); font-size: 0.88rem; } .install-nav a:hover { color: var(--text); } .install-nav a .n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); flex: none; } @media (max-width: 860px) { .install-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.2rem; } } /* ---- install-nav-toggle / install-nav-list: on Script.html the step list is 13 items long (Flashing/Pre-Install only ever had ~8), which read as an unbroken wall of wrapped links at tablet/phone widths — no grouping, nothing to scan. Collapse it behind a "Script steps ▾" toggle there instead, closed by default; .install-nav-head-based pages (Flashing, Pre-Install) are untouched since they never adopt this markup. display:contents on desktop keeps the list's children direct flex items of the sticky .install-nav column, same as before this wrapper existed. ---- */ .install-nav-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: 0; padding: 0; margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); cursor: default; } .install-nav-toggle__icon, .install-nav-toggle__count { display: none; } .install-nav-toggle .chev { display: none; flex: none; margin-left: auto; width: 14px; height: 14px; transition: transform 0.2s var(--ease); } .install-nav-list { display: contents; } @media (max-width: 860px) { /* :has() beats the shared row/wrap rule above on specificity, so this only applies to an .install-nav that actually contains the new collapsible list — Flashing/Pre-Install's plain children never match and keep the existing wrap-row layout untouched. */ .install-nav:has(.install-nav-list) { flex-direction: column; flex-wrap: nowrap; gap: 0; align-items: stretch; } /* below 860px this is the ONLY thing a reader sees of the sidebar until they tap it, so it's built as a real card — icon chip + step count + hover/active state — rather than the desktop version's plain small- caps label, which read as an inert caption rather than something tappable. */ .install-nav-toggle { cursor: pointer; gap: 0.75rem; margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-transform: none; letter-spacing: normal; font-family: var(--font-ui); font-size: 0.94rem; font-weight: 600; color: var(--text); transition: border-color 0.2s, background 0.2s; } .install-nav-toggle:hover { border-color: var(--accent); } .install-nav-toggle[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .install-nav-toggle__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--gradient-btn); color: var(--on-accent); box-shadow: 0 6px 16px var(--accent-glow); } .install-nav-toggle__icon svg { width: 15px; height: 15px; } .install-nav-toggle__label { display: flex; align-items: center; gap: 0.55rem; } .install-nav-toggle__count { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 0.1rem 0.5rem; } .install-nav-toggle[aria-expanded="true"] .install-nav-toggle__count { background: var(--surface); } .install-nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .install-nav-toggle .chev { display: block; color: var(--text-3); } .install-nav-list { display: none; } .install-nav-list.open { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.2rem; padding: 1rem; border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface); } } .install-steps { display: flex; flex-direction: column; } /* .install-step is itself a flex item of .install-steps (column direction), so its default min-width:auto uses its content's min-content size — a screenshot .fig img wants its full intrinsic pixel width no matter what width:100% says, which blows the row (and the whole page) wider than a phone viewport instead of letting the image shrink into it. */ .install-step { display: flex; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--border); min-width: 0; } /* same flex min-width:auto gotcha as .install-flow above — the body next to the fixed-width numeral needs this to actually shrink on narrow viewports instead of pushing the page wider. flex:1 (not the default flex:0 1 auto) is what actually guarantees it fills the rest of the row: without flex-grow, a step whose content is narrower than the available column (e.g. no wide screenshot to force a shrink-to-fit) left a visible gap of blank page after the text — every step happened to look full-width before only because its content was coincidentally wide enough to shrink into place, not because anything required it. */ .install-step-body { flex: 1; min-width: 0; } .install-step:last-child { border-bottom: none; padding-bottom: 0; } .install-step:first-child { padding-top: 0; } .install-step-num { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--accent-text); min-width: 2.2ch; padding-top: 0.15rem; } /* .prose h2 (docs.css) styles top-level section headings — border-top, padding-top:1.6rem, margin-top:3rem — meant to separate a new page section from whatever came before it. That same rule also matches these step headings (nested inside .prose too), stamping an unwanted rule and ~74px gap between every step's numeral and its own title. Reset it so the heading sits flush with the numeral instead. */ .install-step-body h2 { margin: 0 0 0.4rem; padding-top: 0; border-top: none; } .install-step-body > p:first-of-type { color: var(--text-2); margin-top: 0; } /* on a phone, a 2.8rem side-rail numeral spans the full height of the step (heading + body + image) but only ever labels the heading — that wastes width every line below it doesn't use. Fold it into the heading line itself as a small inline badge instead, and let paragraph/list/ figure children each take the full row below. display:contents lifts install-step-body's children up to be direct flex items of install-step so the badge and heading can share a flex line while everything else wraps onto its own. */ @media (max-width: 640px) { .install-step { flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1.5rem 0; } .install-step-num { font-family: var(--font-mono); font-weight: 700; font-size: 0.92rem; width: 1.9rem; height: 1.9rem; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); } .install-step-body { display: contents; } .install-step-body h2 { flex: 1 1 160px; min-width: 0; margin: 0; } /* min-width:0 is the fix, not just flex:1 1 100% — a flex item's default min-width:auto uses its content's min-content size, and a code-block's 

 is white-space:pre (never wraps), so its
     min-content equals its full unwrapped width. Without min-width:0
     here, an 
  1.  wrapping a code-block refused to shrink below
     that command's full width, forcing this row — and the whole page —
     wider than the phone screen instead of just letting the code-block's
     own overflow-x:auto handle it. */
  .install-step-body > :not(h2) { flex: 1 1 100%; min-width: 0; margin: 0; }
}

/* ---- ts-modal: the troubleshooting write-ups (Script page) were a
   popup dialog in the reference, not inline page sections — a reader
   mid-step opens it, checks the fix, and closes it without losing their
   place, which reading it as a same-page jump-and-scroll-back loses.
   Nothing like this exists elsewhere in the design system yet, so it's
   built fresh here on the same tokens as everything else (surface/
   border/radius-lg), not the reference's own styling. ---- */
.ts-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  padding: 4vh 1.2rem;
  /* flex, not grid: a grid item's percentage width resolves against its
     own track, and an auto track under justify-items:center sizes to
     the item's max-content instead of the container — so
     .ts-modal-panel's width:100% (mobile breakpoint below) silently
     did nothing and the panel rendered at its natural content width,
     wider than the viewport, pushing the close button off-screen
     entirely. A flex item's percentage width resolves against the
     container's own content box, which is what we actually want here. */
  align-items: flex-start; justify-content: center;
  background: color-mix(in oklab, black 65%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ts-modal-overlay.open { display: flex; }
.ts-modal-panel {
  width: min(94vw, 760px); max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.ts-modal-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border);
}
.ts-modal-head h3 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; min-width: 0; }
.ts-modal-close {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: color 0.15s, border-color 0.15s;
}
.ts-modal-close:hover { color: var(--text); border-color: var(--accent); }
.ts-modal-close svg { width: 15px; height: 15px; }
.ts-modal-body { padding: 1.3rem 1.4rem 1.6rem; }
.ts-modal-body .prose { max-width: none; }
.ts-modal-body .prose > *:first-child { margin-top: 0; }
.ts-modal-body .prose ol > li::before { border-radius: 50%; }
/* skill-flow-explain-modal (the beginner install walkthrough) needs to
   outrank .pi-page .prose p:not(.lead), .pi-page .prose li's page-wide
   0.95rem dial-down above — that rule is tuned for this page's normal
   short doc paragraphs, not a step-by-step guide meant to be read at a
   glance while also following along on a second screen. var(--step-1)
   matches .lead/.prose h3's size instead of introducing a new one. */
#skill-flow-explain-modal .prose p,
#skill-flow-explain-modal .prose li {
  font-size: var(--step-1); line-height: 1.6;
}
/* on mobile this used to go edge-to-edge with square corners and full
   viewport height — indistinguishable from just being the page, which
   defeats the entire "pop up, check it, dismiss back to where you were"
   point of a modal. Anchor it to the bottom as a sheet instead: rounded
   top corners, a visible sliver of dimmed backdrop above it, and a grab
   handle — the same visual grammar a native bottom sheet uses to say
   "this is dismissible, there's a page behind me." */
@media (max-width: 640px) {
  .ts-modal-overlay { padding: 0; align-items: flex-end; }
  .ts-modal-panel { width: 100%; max-height: 86vh; border-radius: 18px 18px 0 0; }
  .ts-modal-head { border-radius: 18px 18px 0 0; padding-top: 1.5rem; }
  .ts-modal-head::before {
    content: ""; position: absolute; top: 0.55rem; left: 50%;
    width: 36px; height: 4px; border-radius: 999px;
    background: var(--border-strong); transform: translateX(-50%);
  }
}

/* Step 5.3/5.4's numbered sub-lists are "do this: rest
   of the sentence" — the reference dims everything after the bold lead-
   in (muted grey) so the action verb is what actually stands out; ours
   rendered the whole sentence at full contrast, which read as flat/
   uniform instead of "here's the action, here's the detail." Scoped to
   .install-step-body so the troubleshooting modal's 
       (plain
   sentences, no bold lead-in) isn't affected — muting a sentence with
   nothing bold to contrast against would just look like disabled text. */
.install-step-body ol > li { color: var(--text-2); }
.install-step-body ol > li strong { color: var(--text); }

/* ---- img-gallery / img-link / img-lightbox: Step 5.4's reference shows
   "Image 1/2/3" as small icon + text links, not photo thumbnails — the
   image itself only appears once someone actually opens it, in the
   lightbox overlay (same overlay/close-button language as .ts-modal,
   just built for a single image instead of a dialog with a header). ---- */
.img-gallery { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-top: 0.7rem; }
.img-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; cursor: zoom-in;
  color: var(--accent-text); font-size: 0.9rem; font-weight: 600;
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  transition: border-color 0.15s;
}
.img-link:hover { border-bottom-color: var(--accent); }
.img-link svg { width: 16px; height: 16px; flex: none; }

.img-lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 210;
  align-items: center; justify-content: center; padding: 4vh 4vw;
  background: color-mix(in oklab, black 80%, transparent);
}
.img-lightbox-overlay.open { display: flex; }
.img-lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.img-lightbox-close {
  position: fixed; top: 1.2rem; right: 1.2rem; z-index: 211;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.15s;
}
.img-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.img-lightbox-close svg { width: 18px; height: 18px; }

/* ---- step-shot: an actual screenshot for one of the .img-todo slots above
   (once filled in). display:block on the  avoids the few stray
   pixels of baseline whitespace an inline img leaves under itself. ---- */
.step-shot {
  display: block; margin: 0.55rem 0 0.15rem;
  max-width: 100%; width: 100%;
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ---- hint-hover: a short reminder that only shows on hover/focus, for a
   step whose full detail isn't worth a permanent extra sentence (the
   install walkthrough in the skill-flow explain modal). Same visual
   language as .icon-btn[data-tip] above (arrow, var(--shadow), var(--ease))
   rather than a from-scratch box — that one's already tuned; this just
   swaps its nowrap trigger for a wrapping one so it works on a run of
   inline text instead of only an icon button. ---- */
.hint-hover {
  position: relative; display: inline-block;
  border-bottom: 1px dotted var(--text-3); cursor: help;
}
.hint-hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px; white-space: normal;
  background: var(--text); color: var(--bg);
  font-size: 0.72rem; font-weight: 400; line-height: 1.5;
  padding: 0.5rem 0.65rem; border-radius: 7px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
  z-index: 70;
}
.hint-hover::before {
  content: ""; position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-bottom-color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
  z-index: 70;
}
.hint-hover:hover::after, .hint-hover:hover::before,
.hint-hover:focus-visible::after, .hint-hover:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* username@host / path halves of a terminal prompt line, so a transcript
   reads the way a real terminal does instead of one flat colour. */
/* --code-accent/--code-accent-2 both track the active colour palette's
   two hues, which for the default "blue" palette sit only ~26° apart
   (263.5 vs 237.4) — user@host and path rendered as two barely-
   distinguishable blues instead of the reference's clearly two-tone
   green/blue prompt. --success is a fixed green independent of palette
   (real terminals colour the user green too), paired with the same
   --code-accent blue used for the code paths — a real green/blue split
   that also can't collapse into itself if someone picks a palette whose
   h1/h2 land close together. */
.code-block .term-user { color: var(--success); }
.code-block .term-path { color: var(--code-accent); }

/* a