/* The device page as a dossier, in the reel's language (#151515, cream, News Cycle, the
   yellow bar, hairlines). Loaded last on device pages; every rule is scoped to .dossier. */
body[data-page=device] { background: #151515; color: #fef9ed; }
body[data-page=device] .site-footer { background: #151515; border-top: 1px solid rgba(254,249,237,.1); }
.dossier { --ink: #151515; --cream: #fef9ed; --dim: rgba(254,249,237,.62); --faint: rgba(254,249,237,.52); --rule: rgba(254,249,237,.12); --yellow: #fbe154;
  --display: 'News Cycle', Impact, 'Arial Narrow', sans-serif; --label: 'Inter Display', Inter, sans-serif; --body: 'Instrument Sans', Inter, system-ui, sans-serif; }
body[data-page=device] main.dossier { max-width: none; width: 100%; margin: 0; padding: 0 0 40px; color: var(--cream); font-family: var(--body); }

/* Bar */
body[data-page=device] .dossier .dossier-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 68px; padding: 0 max(4vw, 20px);
  background: rgba(21,21,21,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.dossier .dossier-wordmark { font: 700 24px/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; color: var(--cream); text-decoration: none; }
.dossier .dossier-wordmark sup { font: 600 10px/1 var(--label); vertical-align: 11px; margin-left: 2px; opacity: .6; }
.dossier .dossier-crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 12px/1 var(--label); text-transform: uppercase; letter-spacing: -.01em; color: var(--faint); }
.dossier .dossier-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); text-decoration: none; white-space: nowrap; }
.dossier .dossier-crumbs a:hover { color: var(--cream); }
.dossier .dossier-bar-tools { margin-left: auto; display: flex; gap: 8px; }

/* Hero */
body[data-page=device] .dossier .dossier-hero { background: radial-gradient(52% 58% at 74% 50%, color-mix(in srgb, var(--tint, #5a5a5a) 40%, transparent) 0%, color-mix(in srgb, var(--tint, #5a5a5a) 13%, transparent) 45%, transparent 75%) !important; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px; align-items: center;
  min-height: min(760px, calc(100svh - 68px)); padding: 48px max(4vw, 20px) 56px; margin: 0; border: 0; overflow: hidden; }
body[data-page=device] .dossier .dossier-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0; max-width: 620px; padding: 0; background: none; border: 0; }
body[data-page=device] .dossier .dossier-maker { margin: 0 0 14px; font: 600 13px/1.2 var(--label); letter-spacing: -.01em; text-transform: uppercase; color: var(--dim); }
body[data-page=device] .dossier .dossier-maker span { margin-left: 8px; padding: 0; border: 0; color: var(--faint); }
body[data-page=device] .dossier .dossier-copy h1 { margin: 0; font: 700 clamp(52px, 7.2vw, 128px)/.88 var(--display); letter-spacing: -.035em; text-transform: uppercase; color: var(--cream); text-wrap: balance; overflow-wrap: anywhere; }
body[data-page=device] .dossier .dossier-purpose { margin: 22px 0 0; max-width: 36ch; font: 400 19px/1.45 var(--body); color: rgba(254,249,237,.78); }

/* Actions: the yellow bar, then square icon buttons */

/* Openness badge */
.dossier .bp-badge i, .dossier .bp-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.dossier :is(.bp-badge,.bp-pill).bp-open-hardware i, .dossier .bp-open-hardware .bp-pill i { background: #7fe3a0; box-shadow: 0 0 10px #7fe3a0; }
.dossier :is(.bp-badge).bp-schematics i, .dossier .bp-schematics .bp-pill i { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.dossier :is(.bp-badge).bp-open-firmware i, .dossier .bp-open-firmware .bp-pill i { background: #8fb8ff; box-shadow: 0 0 10px #8fb8ff; }
.dossier :is(.bp-badge).bp-closed i, .dossier .bp-closed .bp-pill i { background: #ff7a66; }

/* Where to buy: price, then every shop as a row */
body[data-page=device] .dossier .purchase-note { margin: 10px 0 0; font: 400 13px/1.45 var(--body); color: var(--faint); }
body[data-page=device] .dossier .device-fit { display: grid; gap: 0; margin: 26px 0 0; border-top: 1px dashed var(--rule); }
body[data-page=device] .dossier .device-fit div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--rule); }
body[data-page=device] .dossier .device-fit dt { font: 600 11px/1.4 var(--label); text-transform: uppercase; color: var(--faint); }
body[data-page=device] .dossier .device-fit dd { margin: 0; font: 400 15px/1.45 var(--body); color: rgba(254,249,237,.82); }
body[data-page=device] .dossier .device-evidence { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font: 600 11px/1.3 var(--label); text-transform: uppercase; color: var(--faint); text-decoration: none; }
body[data-page=device] .dossier .device-evidence svg { width: 13px; height: 13px; }

/* The deal: facts, one Buy pill beside a round Share, other shops as plain rows. The pieces
   are the sheet's (sheet.css, .sh-*); .sh-scope gives them its tokens here. */
body[data-page=device] .dossier .dossier-deal { max-width: 520px; margin: 26px 0 0; }
body[data-page=device] .dossier .dossier-deal .sh-facts { margin: 0; }
body[data-page=device] .dossier .dossier-deal .sh-facts a { color: inherit; text-decoration: none; }
body[data-page=device] .dossier .dossier-deal .sh-facts a:hover { color: var(--yellow); }
body[data-page=device] .dossier .dossier-cta { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; }
body[data-page=device] .dossier .dossier-cta .sh-buy { flex: 1 1 auto; }
.dossier .dossier-round { display: grid; place-items: center; flex: none; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: rgba(254,249,237,.08); box-shadow: inset 0 0 0 1px rgba(254,249,237,.18); color: var(--cream); cursor: pointer; transition: background 160ms ease, transform 220ms cubic-bezier(.23,1,.32,1); }
.dossier .dossier-round:hover { background: rgba(254,249,237,.16); transform: translateY(-2px); }
.dossier .dossier-round:active { transform: scale(.96); }
.dossier .dossier-round:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.dossier .dossier-round svg { width: 18px; height: 18px; }
body[data-page=device] .dossier .dossier-shops { margin: 28px 0 0; }
body[data-page=device] .dossier .dossier-shops .sh-h { margin: 0 0 4px; }
body[data-page=device] .dossier .dossier-compare { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font: 500 14px/1.3 var(--body); color: var(--dim); text-decoration: none; }
body[data-page=device] .dossier .dossier-compare:hover { color: var(--cream); }
body[data-page=device] .dossier .dossier-compare svg { width: 14px; height: 14px; }

/* Top bar search: a quiet pill, an icon alone on phones. */
.dossier .dossier-search { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(254,249,237,.07); box-shadow: inset 0 0 0 1px rgba(254,249,237,.14); color: var(--dim); font: 500 14px/1 var(--body); text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.dossier .dossier-search:hover { background: rgba(254,249,237,.13); color: var(--cream); }
.dossier .dossier-search svg { width: 16px; height: 16px; }

/* The sticky bar on phones rises once the hero's pill has scrolled away (app.js). */
body[data-page=device] .dossier .device-mobile-actions { gap: 12px; padding: 10px 12px 10px 20px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: rgba(18,18,17,.9); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--rule); color: var(--cream); transform: translateY(110%); transition: transform 360ms cubic-bezier(.23,1,.32,1); }
body[data-page=device] .dossier .device-mobile-actions.is-shown { transform: none; }
body[data-page=device] .dossier .device-mobile-actions strong { font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--cream); }
body[data-page=device] .dossier .device-mobile-actions > div > span { font: 500 12px/1.2 var(--body); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { body[data-page=device] .dossier .device-mobile-actions { transition: none; } }
@media (max-width: 900px) {
  body[data-page=device] .dossier .dossier-deal { max-width: none; }
  .dossier .dossier-search { width: 40px; padding: 0; justify-content: center; }
  .dossier .dossier-search span { display: none; }
}

/* Art: the device, lifted, floating in its own light */
body[data-page=device] .dossier .dossier-art { position: relative; z-index: 1; display: grid; place-items: center; min-height: 460px; height: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; aspect-ratio: auto; }
.dossier .dossier-device { position: relative; max-width: min(92%, 680px); max-height: 560px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 34px 34px rgba(0,0,0,.55)); animation: dossier-float 6s ease-in-out infinite alternate; }
.dossier .dossier-photo { position: relative; max-width: min(92%, 620px); max-height: 520px; object-fit: contain; border: 1px solid var(--rule); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.dossier .dossier-noart { font: 700 clamp(60px, 8vw, 140px)/.9 var(--display); text-transform: uppercase; color: rgba(254,249,237,.08); text-align: center; }
@keyframes dossier-float { from { transform: translateY(-1.4%); } to { transform: translateY(1.4%); } }
@media (prefers-reduced-motion: reduce) { .dossier .dossier-device { animation: none; } }
body[data-page=device] .dossier .dossier-art figcaption { position: absolute; right: 0; bottom: -8px; z-index: 2; font: 500 11px/1.3 var(--label); color: var(--faint); }
body[data-page=device] .dossier .dossier-art figcaption summary { cursor: pointer; list-style: none; text-transform: uppercase; }
body[data-page=device] .dossier .dossier-art figcaption a { color: var(--dim); }

/* Section nav */
body[data-page=device] .dossier .device-section-nav { position: sticky; top: 68px; z-index: 20; display: flex; gap: 28px; margin: 0; padding: 0 max(4vw, 20px); height: 52px; align-items: center; background: rgba(21,21,21,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
body[data-page=device] .dossier .device-section-nav a { font: 600 12px/1 var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--dim); text-decoration: none; white-space: nowrap; padding: 0; border: 0; }
body[data-page=device] .dossier .device-section-nav a:hover { color: var(--cream); }
body[data-page=device] .dossier .device-section-nav a span { color: var(--faint); margin-left: 4px; }

/* Sections */
.dossier .dossier-section { padding: 72px max(4vw, 20px) 24px; scroll-margin-top: 124px; }
.dossier .dossier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 0 0 28px; }
.dossier .dossier-label { margin: 0; font: 600 13px/1 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .dossier-head h2 { margin: 0; font: 700 clamp(40px, 5vw, 76px)/.9 var(--display); letter-spacing: -.03em; text-transform: uppercase; color: var(--cream); }

/* Blueprint */
.dossier .bp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 30px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 16px; background: rgba(254,249,237,.03); }
.dossier .bp-pill { display: inline-flex; align-items: center; gap: 9px; font: 700 18px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.dossier .bp-status p, .dossier .bp-summary { margin: 0; flex: 1 1 320px; font: 400 16px/1.5 var(--body); color: rgba(254,249,237,.8); }
.dossier .bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px 36px; }
.dossier .bp-block h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 600 12px/1 var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--dim); }
.dossier .bp-block h3 span { color: var(--faint); }
.dossier .bp-block ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dossier .bp-block li { border-bottom: 1px solid var(--rule); }
.dossier .bp-block li > a, .dossier .bp-block li > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; gap: 4px 12px; padding: 12px 2px; color: var(--cream); text-decoration: none; }
.dossier .bp-block li > a:hover { color: var(--yellow); }
.dossier .bp-files li > a { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-rows: auto auto; }
.dossier .bp-kind { grid-column: 1; font: 600 11px/1.2 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .bp-file { grid-column: 1; grid-row: 2; font: 500 15px/1.35 var(--body); overflow-wrap: anywhere; }
.dossier .bp-format { grid-column: 2; grid-row: 1 / span 2; padding: 0; border: 0; letter-spacing: .06em; text-transform: uppercase; font: 600 11px/1 var(--label); color: var(--dim); }
.dossier .bp-files .bp-host { display: none; }
.dossier .bp-files li > a > svg { grid-column: 3; grid-row: 1 / span 2; }
.dossier .bp-view { display: inline-block; margin: -4px 0 12px 2px; font: 600 12px/1 var(--label); text-transform: uppercase; color: var(--yellow); text-decoration: none; }
.dossier .bp-view:hover { text-decoration: underline; }
.dossier .bp-repo, .dossier .bp-part { font: 600 14px/1.35 ui-monospace, 'SF Mono', Menlo, monospace; overflow-wrap: break-word; word-break: normal; }
.dossier .bp-role { font: 500 13px/1.3 var(--body); color: var(--faint); }
.dossier .bp-repos li > a { grid-template-columns: minmax(0, 1fr) auto auto 16px; grid-template-rows: auto auto; }
.dossier .bp-repos .bp-repo { grid-column: 1; }
.dossier .bp-repos .bp-role { grid-column: 1; grid-row: 2; }
.dossier .bp-license { grid-row: 1 / span 2; padding: 0; border: 0; letter-spacing: .06em; text-transform: uppercase; font: 600 11px/1 var(--label); color: var(--dim); }
.dossier .bp-stars { grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--label); color: var(--yellow); }
.dossier .bp-repos li > a > svg:last-child { grid-row: 1 / span 2; }
.dossier .bp-parts li > :is(a, div) { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-rows: auto auto auto; }
.dossier .bp-parts .bp-chips { grid-row: 3; }
.dossier .bp-parts .bp-part { grid-column: 1; }
.dossier .bp-parts .bp-role { grid-column: 1; grid-row: 2; }
.dossier .bp-parts .bp-host { grid-column: 2; grid-row: 1 / span 2; padding: 0; border: 0; letter-spacing: .06em; text-transform: uppercase; }
.dossier .bp-parts li > a > svg { grid-column: 3; grid-row: 1 / span 2; }
.dossier .bp-parts .bp-host { font: 600 11px/1 var(--label); text-transform: uppercase; color: var(--dim); }
.dossier .bp-clone { display: flex; align-items: center; margin: 14px 0 0; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: #0e0e0e; }
.dossier .bp-clone code { flex: 1; min-width: 0; padding: 12px 14px; overflow-x: auto; white-space: nowrap; font: 500 13px/1.2 ui-monospace, 'SF Mono', Menlo, monospace; color: #cfe8d6; }
.dossier .bp-clone button, .dossier .bp-agent button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--cream); cursor: pointer; font: 600 12px/1 var(--label); text-transform: uppercase; }
.dossier .bp-clone button:hover, .dossier .bp-agent button:hover { color: var(--yellow); }
.dossier :is(.bp-clone, .bp-agent) button.is-done { color: var(--ink); background: var(--yellow); }
.dossier .bp-notes { margin: 24px 0 0; max-width: 90ch; font: 400 14px/1.55 var(--body); color: var(--faint); }
.dossier .bp-notes summary { cursor: pointer; font: 600 11px/1.3 var(--label); text-transform: uppercase; color: var(--dim); }
.dossier .bp-notes p { margin: 10px 0 0; }
.dossier .bp-checked { margin: 8px 0 0; font: 600 11px/1.3 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .bp-agent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 0; padding: 18px 20px; border: 1px dashed rgba(254,249,237,.22); }
.dossier .bp-agent > div:first-child { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 360px; }
.dossier .bp-agent > div:first-child svg { flex: none; margin-top: 3px; color: var(--yellow); }
.dossier .bp-agent p { margin: 0; font: 400 15px/1.45 var(--body); color: rgba(254,249,237,.78); }
.dossier .bp-agent strong { color: var(--cream); font-weight: 600; }
.dossier .bp-agent-links { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.dossier .bp-agent-links a { display: inline-flex; align-items: center; padding: 0 14px; height: 44px; color: var(--cream); text-decoration: none; font: 600 12px/1 var(--label); text-transform: uppercase; border-right: 1px solid var(--rule); }
.dossier .bp-agent-links a:hover { color: var(--yellow); }
.dossier .bp-agent-links button { border-left: 0; }

/* Specs and resources keep their structure; they take the dossier's type and rules. */
body[data-page=device] .dossier .device-reference-layout { padding: 48px max(4vw, 20px) 24px; gap: 48px; }
body[data-page=device] .dossier :is(.device-specifications, .device-resources) { background: none; border: 0; box-shadow: none; }
body[data-page=device] .dossier :is(.device-specifications, .device-resources) h2 { font: 700 clamp(34px, 3.6vw, 52px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; color: var(--cream); }
body[data-page=device] .dossier .device-spec-group { border-color: var(--rule); background: none; }
body[data-page=device] .dossier .device-spec-group summary h3 { font: 600 15px/1.2 var(--label); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
body[data-page=device] .dossier .device-spec-group dt { color: var(--faint); }
body[data-page=device] .dossier .device-spec-group dd { color: rgba(254,249,237,.86); }
body[data-page=device] .dossier .device-resource-list a, body[data-page=device] .dossier .device-repo-card { border-radius: 0; background: rgba(254,249,237,.03); border-color: var(--rule); }

/* Related: cut-outs on lit tiles */
body[data-page=device] .dossier .device-related { padding: 64px max(4vw, 20px) 40px; margin: 0; max-width: none; }
body[data-page=device] .dossier .device-related .section-heading h2 { font: 700 clamp(34px, 3.6vw, 52px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; color: var(--cream); }
.dossier .dossier-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; }
.dossier .dossier-rel { display: grid; gap: 6px; padding: 0 0 12px; color: var(--cream); text-decoration: none; }
.dossier .dossier-rel-art { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 6px; background: radial-gradient(95% 72% at 50% 40%, #2d2c29 0%, #1e1e1c 56%, #171716 100%); box-shadow: inset 0 0 0 1px rgba(254,249,237,.08); overflow: hidden; }
.dossier .dossier-rel-art img { max-width: 78%; max-height: 74%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); transition: transform 300ms cubic-bezier(.23,1,.32,1); }
.dossier .dossier-rel-art img.is-photo { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; filter: none; }
.dossier .dossier-rel:hover .dossier-rel-art img { transform: translateY(-4px) scale(1.03); }
.dossier .dossier-rel-maker { font: 600 11px/1.2 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .dossier-rel-name { font: 700 24px/.95 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.dossier .dossier-rel-meta { font: 500 13px/1.3 var(--body); color: var(--dim); }

/* Phones: art first and shorter, name smaller, one column, the buy bar stays reachable */
@media (max-width: 900px) {
  body[data-page=device] .dossier .dossier-hero { background: radial-gradient(90% 38% at 50% 22%, color-mix(in srgb, var(--tint, #5a5a5a) 40%, transparent) 0%, transparent 72%) !important; grid-template-columns: 1fr; min-height: 0; padding: 12px 20px 40px; gap: 0; }
  body[data-page=device] .dossier .dossier-art { order: -1; min-height: 0; height: 42svh; max-height: 380px; margin: 0 -20px 8px; }
  body[data-page=device] .dossier .dossier-art figcaption { right: 20px; bottom: 0; }
  .dossier .dossier-device { max-height: 88%; max-width: 86%; }
  .dossier .dossier-photo { max-height: 90%; }
  body[data-page=device] .dossier .dossier-copy h1 { font-size: clamp(44px, 13vw, 72px); }
  body[data-page=device] .dossier .dossier-purpose { font-size: 17px; margin-top: 16px; }
  body[data-page=device] .dossier .dossier-bar { gap: 14px; height: 60px; padding: 0 16px; }
  .dossier .dossier-crumbs a:first-child span { display: none; }
  body[data-page=device] .dossier .device-section-nav { top: 60px; gap: 22px; padding: 0 20px; }
  .dossier .dossier-section { padding: 56px 20px 16px; scroll-margin-top: 116px; }
  body[data-page=device] .dossier .device-fit div { grid-template-columns: 96px 1fr; }
  .dossier .dossier-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page=device] .dossier .device-reference-layout { padding: 40px 20px 16px; }
}

/* The sticky bar on phones: name and the yellow bar, in the dossier's type. */
body[data-page=device] .dossier .device-spec-group dd { line-height: 1.5; }
@media (max-width: 560px) {
  .dossier .dossier-crumbs span[aria-hidden], .dossier .dossier-crumbs a + a { display: none; }
  .dossier .dossier-wordmark { font-size: 21px; }
  .dossier .dossier-label { flex-basis: 100%; }
}

/* Parts: /parts/ and /parts/<chip>/ share the dossier's chrome. */
body[data-page=parts] { background: #151515; color: #fef9ed; }
body[data-page=parts] main.dossier { max-width: none; width: 100%; margin: 0; padding: 0 0 64px; color: var(--cream); font-family: var(--body); }
body[data-page=parts] .dossier .dossier-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 68px; padding: 0 max(4vw, 20px); background: rgba(21,21,21,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.dossier .pt-hero { padding: 64px max(4vw, 20px) 32px; border-bottom: 1px solid var(--rule); }
.dossier .pt-hero h1 { margin: 12px 0 0; font: 700 clamp(56px, 9vw, 150px)/.86 var(--display); letter-spacing: -.035em; text-transform: uppercase; color: var(--cream); }
.dossier .pt-chip h1 { font-family: var(--display); }
.dossier .pt-lede { margin: 22px 0 0; max-width: 60ch; font: 400 19px/1.5 var(--body); color: rgba(254,249,237,.78); }
.dossier .pt-search { display: block; max-width: 520px; margin: 28px 0 0; }
.dossier .pt-search input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid rgba(254,249,237,.25); background: rgba(254,249,237,.04); color: var(--cream); font: 500 16px/1 var(--body); border-radius: 0; }
.dossier .pt-search input:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }
.dossier .pt-top { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.dossier .pt-top a { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--cream); text-decoration: none; }
.dossier .pt-top a:hover { border-color: var(--yellow); }
.dossier .pt-top strong { font: 600 14px/1 ui-monospace, 'SF Mono', Menlo, monospace; }
.dossier .pt-top span { font: 700 14px/1 var(--display); color: var(--yellow); }
.dossier .pt-group { padding: 56px max(4vw, 20px) 0; }
.dossier .pt-group .dossier-head h2 { font-size: clamp(34px, 4vw, 60px); }
.dossier .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dossier .pt-tile { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: rgba(254,249,237,.02); color: var(--cream); text-decoration: none; transition: border-color 140ms ease, transform 200ms cubic-bezier(.23,1,.32,1); }
.dossier .pt-tile:hover { border-color: rgba(254,249,237,.45); transform: translateY(-2px); }
.dossier .pt-thumbs { display: flex; align-items: center; height: 64px; margin-bottom: 8px; }
.dossier .pt-thumbs img { width: 76px; height: 60px; object-fit: contain; margin-right: -14px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.dossier .pt-thumbs img.is-photo { object-fit: cover; width: 56px; height: 56px; margin-right: 6px; }
.dossier .pt-name { font: 600 19px/1.15 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: -.02em; }
.dossier .pt-maker { font: 500 13px/1.3 var(--body); color: var(--faint); }
.dossier .pt-count { margin-top: 6px; font: 700 15px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--yellow); }
.dossier .pt-empty { padding: 40px max(4vw, 20px); color: var(--dim); }
.dossier .pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 28px 0 0; }
.dossier .pt-back { font: 600 12px/1 var(--label); text-transform: uppercase; color: var(--dim); text-decoration: none; }
.dossier .pt-back:hover { color: var(--cream); }
.dossier .pt-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 36px 0 0; border-top: 1px solid var(--rule); }
.dossier .pt-stats div { padding: 16px 36px 0 0; }
.dossier .pt-stats dt { font: 600 11px/1 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .pt-stats dd { margin: 8px 0 0; font: 700 48px/.9 var(--display); color: var(--cream); }
.dossier .dossier-rel { position: relative; }
.dossier .pt-open { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1.2 var(--label); text-transform: uppercase; color: var(--dim); }
.dossier .pt-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dossier .pt-open.bp-open-hardware i { background: #7fe3a0; } .dossier .pt-open.bp-schematics i { background: var(--yellow); }
.dossier .pt-open.bp-open-firmware i { background: #8fb8ff; } .dossier .pt-open.bp-closed i { background: #ff7a66; }
.dossier .pt-open-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.dossier .pt-open-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 2px; border-bottom: 1px solid var(--rule); }
.dossier .pt-open-name { font: 700 22px/1 var(--display); text-transform: uppercase; color: var(--cream); text-decoration: none; }
.dossier .pt-open-name:hover { color: var(--yellow); }
.dossier .pt-open-links { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.dossier .pt-open-links a { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.2 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--dim); text-decoration: none; }
.dossier .pt-open-links a:hover { color: var(--yellow); }
.dossier .bp-chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.dossier .bp-chip { font: 600 11px/1.3 var(--label); text-transform: uppercase; color: var(--yellow); text-decoration: none; }
.dossier .bp-chip:hover { text-decoration: underline; }
@media (max-width: 560px) { .dossier .pt-grid { grid-template-columns: 1fr 1fr; } .dossier .pt-name { font-size: 15px; } .dossier .pt-open-links { margin-left: 0; } }
body[data-page=parts] .dossier .dossier-section { padding-top: 48px; }
body[data-page=parts] .dossier .pt-group { padding-top: 40px; }

/* /agents/ */
.dossier .ag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px; }
.dossier .ag-h { margin: 0 0 10px; font: 600 12px/1 var(--label); text-transform: uppercase; color: var(--dim); }
.dossier .ag-pre { margin: 0 0 10px; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: #0e0e0e; overflow-x: auto; }
.dossier .ag-pre code { font: 500 13px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; color: #cfe8d6; }
.dossier .ag-tools { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.dossier .ag-tools li { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--rule); }
.dossier .ag-tools strong { font: 600 14px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--yellow); }
.dossier .ag-tools span { font: 400 15px/1.5 var(--body); color: rgba(254,249,237,.78); }
.dossier .ag-what { font: 400 14px/1.4 var(--body); color: var(--dim); }
@media (max-width: 560px) { .dossier .ag-tools li { grid-template-columns: 1fr; gap: 6px; } }

.dossier .dossier-nav { margin-left: auto; display: flex; gap: 22px; }
.dossier .dossier-nav a { font: 600 12px/1 var(--label); text-transform: uppercase; letter-spacing: .01em; color: var(--dim); text-decoration: none; }
.dossier .dossier-nav a:hover { color: var(--cream); }
.dossier .dossier-nav + .dossier-bar-tools { margin-left: 18px; }
@media (max-width: 900px) { .dossier .dossier-nav { display: none; } .dossier .dossier-nav + .dossier-bar-tools { margin-left: auto; } }

.dossier .bp-maker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 14px 0 0; padding: 14px 20px; border: 1px solid var(--rule); border-radius: 16px; }
.dossier .bp-maker p { margin: 0; flex: 1 1 320px; font: 400 14px/1.45 var(--body); color: var(--dim); }
.dossier .bp-maker strong { color: var(--cream); font-weight: 600; }
.dossier .bp-maker button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--cream); cursor: pointer; font: 600 12px/1 var(--label); text-transform: uppercase; }
.dossier .bp-maker button:hover { color: var(--yellow); }
.dossier .bp-maker button.is-done { background: var(--yellow); color: var(--ink); }

/* The design explorer: the maker's KiCad schematic and board and their 3D models, opened in
   the page (public/blueprint-viewer.js). */
.dossier .bpv { margin: 0 0 30px; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: #141413; }
.dossier .bpv-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.dossier .bpv-tabs::-webkit-scrollbar { display: none; }
.dossier .bpv-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px; border: 0; border-right: 1px solid var(--rule); background: transparent; color: var(--dim); cursor: pointer; font: 700 16px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; transition: color 140ms ease, background 140ms ease; }
.dossier .bpv-tabs button:hover { color: var(--cream); }
.dossier .bpv-tabs button em { font: 600 11px/1 var(--label); font-style: normal; letter-spacing: 0; opacity: .75; }
.dossier .bpv-tabs button[aria-selected=true] { color: var(--cream); background: #1f1e1b; box-shadow: inset 0 -2px 0 var(--yellow); }
.dossier .bpv-tabs button[aria-selected=true] em { color: var(--yellow); opacity: 1; }
.dossier .bpv-tabs button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.dossier .bpv-stage { position: relative; height: clamp(360px, 58vw, 640px); display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 70% at 50% 45%, #2a2926 0%, #191918 70%); }
.dossier .bpv-stage.is-live { background: #111110; }
.dossier .bpv-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.dossier .bpv-stage canvas:active { cursor: grabbing; }
.dossier .bpv-stage kicanvas-embed { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dossier .bpv-cover { display: grid; justify-items: center; gap: 12px; max-width: 540px; padding: 28px 20px; text-align: center; }
.dossier .bpv-mark svg { width: 60px; height: 60px; color: var(--cream); opacity: .22; }
.dossier .bpv-title { margin: 0; font: 700 clamp(24px, 3.2vw, 34px)/.95 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: var(--cream); overflow-wrap: anywhere; }
.dossier .bpv-note { margin: 0; font: 400 14px/1.5 var(--body); color: var(--dim); overflow-wrap: anywhere; }
.dossier .bpv-note a { color: var(--cream); text-underline-offset: 3px; }
.dossier .bpv-warn { margin: 0; padding: 8px 12px; border: 1px solid rgba(251,225,84,.3); background: rgba(251,225,84,.06); font: 400 13px/1.45 var(--body); color: rgba(254,249,237,.8); }
.dossier .bpv-pick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 600 11px/1 var(--label); text-transform: uppercase; color: var(--dim); }
.dossier .bpv-pick select { max-width: min(76vw, 380px); height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: #1c1b19; color: var(--cream); font: 500 14px/1 var(--body); }
.dossier .bpv-open { display: inline-flex; align-items: center; gap: 9px; height: 50px; margin-top: 6px; padding: 0 20px; border: 0; background: var(--yellow); color: var(--ink); cursor: pointer; font: 700 17px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; transition: background 140ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
.dossier .bpv-open:hover { background: #ffe96b; }
.dossier .bpv-open:active { transform: scale(.98); }
.dossier .bpv-open:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.dossier .bpv-open svg { width: 18px; height: 18px; }
.dossier .bpv-open em { margin-left: 4px; padding-left: 11px; border-left: 1px solid rgba(21,21,21,.25); font: 600 12px/1 var(--label); font-style: normal; }
.dossier .bpv-loading { width: min(60%, 320px); height: 2px; background: rgba(254,249,237,.12); overflow: hidden; }
.dossier .bpv-progress { display: block; width: 40%; height: 100%; background: var(--yellow); animation: bpv-slide 1.1s ease-in-out infinite alternate; }
@keyframes bpv-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .dossier .bpv-progress { animation: none; width: 100%; opacity: .5; } }
.dossier .bpv-bar { display: flex; align-items: center; gap: 12px 16px; padding: 12px 18px; border-top: 1px solid var(--rule); }
.dossier .bpv-status { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font: 400 13px/1.4 var(--body); color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.dossier .bpv-source { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--label); text-transform: uppercase; color: var(--dim); text-decoration: none; }
.dossier .bpv-source:hover { color: var(--cream); }
@media (max-width: 600px) {
  .dossier .bpv-tabs button { flex: 1 1 0; justify-content: center; gap: 7px; padding: 0 8px; font-size: 15px; }
  .dossier .bpv-tabs button:last-child { border-right: 0; }
  .dossier .bpv-tabs button em { display: none; }
  .dossier .bpv-stage { height: 440px; }
}

/* /open/ */
.dossier .op-filters button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--cream); cursor: pointer; }
.dossier .op-filters button strong { font: 600 13px/1 var(--label); text-transform: uppercase; }
.dossier .op-filters button span { font: 700 14px/1 var(--display); color: var(--yellow); }
.dossier .op-filters button[aria-pressed=true] { border-color: var(--yellow); background: rgba(251,225,84,.08); }
.dossier .op-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 0; }
.dossier .op-tile .dossier-rel-art { position: relative; }
.dossier .op-marks { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.dossier .op-3d { padding: 3px 7px; background: var(--yellow); color: var(--ink); font: 700 12px/1 var(--display); letter-spacing: .04em; }
.dossier .op-tile .pt-open { margin: 2px 0 2px; }
.dossier .op-tile[hidden] { display: none; }
.dossier.open-page .dossier-section { padding-top: 28px; }

/* /ideas/: the map of what combines with what, and the combinations nobody sells. */
.dossier.ideas-page .dossier-section { padding-top: 32px; }
.dossier .id-matrix-wrap { margin: 18px 0 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--rule); border-radius: 16px; background: #141413; }
.dossier .id-matrix { border-collapse: collapse; margin: 0 auto; }
.dossier .id-matrix th { font: 600 12px/1.1 var(--label); text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.dossier .id-matrix thead th { height: 104px; padding: 0 0 10px; vertical-align: bottom; }
.dossier .id-matrix thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
.dossier .id-matrix tbody th { position: sticky; left: 0; z-index: 1; padding: 0 14px 0 16px; text-align: right; background: #141413; }
.dossier .id-matrix td { width: 46px; height: 46px; padding: 2px; }
.dossier .id-matrix td button { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid transparent; background: rgba(254,249,237,.04); color: var(--cream); cursor: pointer; font: 700 17px/1 var(--display); transition: transform 120ms cubic-bezier(.23,1,.32,1), border-color 120ms ease; }
.dossier .id-matrix td button:hover { border-color: rgba(254,249,237,.5); }
.dossier .id-matrix td button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.dossier .id-matrix td button[aria-pressed=true] { border-color: var(--cream); transform: scale(1.06); }
.dossier .id-matrix .is-n1 button { background: rgba(254,249,237,.1); }
.dossier .id-matrix .is-n2 button { background: rgba(254,249,237,.2); }
.dossier .id-matrix .is-n3 button { background: rgba(254,249,237,.32); }
.dossier .id-matrix .is-n4 button { background: rgba(254,249,237,.46); color: #151515; }
.dossier .id-matrix .is-self button { background: transparent; border-color: rgba(254,249,237,.14); color: var(--dim); font-size: 14px; }
.dossier .id-matrix .is-zero button { color: var(--faint); background: transparent; }
.dossier .id-matrix .is-gap button { background: rgba(251,225,84,.16); border-color: rgba(251,225,84,.55); }
.dossier .id-matrix .is-gap button:hover { background: rgba(251,225,84,.3); }
.dossier .id-panel { margin: 14px 0 0; padding: 20px; border: 1px solid var(--rule); border-radius: 16px; background: #1a1917; }
.dossier .id-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.dossier .id-panel-head h3 { margin: 0; font: 700 30px/1 var(--display); text-transform: uppercase; color: var(--cream); }
.dossier .id-panel-head p { flex: 1 1 300px; margin: 0; font: 400 15px/1.45 var(--body); color: var(--dim); }
.dossier .id-panel-close { margin-left: auto; height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--cream); cursor: pointer; font: 600 11px/1 var(--label); text-transform: uppercase; }
.dossier .id-panel .dossier-related { margin-top: 18px; }
.dossier .id-panel-idea { display: inline-flex; align-items: center; height: 44px; margin-top: 14px; padding: 0 16px; background: var(--yellow); color: var(--ink); font: 700 15px/1 var(--display); text-transform: uppercase; text-decoration: none; }

.dossier .id-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; margin-top: 18px; }
.dossier .id-card { padding: 22px 22px 20px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, rgba(251,225,84,.05), transparent 120px), #161615; scroll-margin-top: 140px; }
.dossier .id-card:target { border-color: var(--yellow); }
.dossier .id-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 12px; font: 700 clamp(34px, 4.4vw, 52px)/.9 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--cream); }
.dossier .id-card h3 i { font-style: normal; color: var(--yellow); }
.dossier .id-line { margin: 0; font: 400 16px/1.5 var(--body); color: rgba(254,249,237,.8); }
.dossier .id-today { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 0; padding: 12px 14px; border: 1px dashed rgba(254,249,237,.18); font: 400 14px/1.3 var(--body); color: var(--dim); }
.dossier .id-today > span:first-child { flex: 1 0 100%; font: 600 11px/1 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .id-today a { color: var(--cream); text-decoration: none; }
.dossier .id-today a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dossier .id-today b { font-weight: 600; color: var(--yellow); }
.dossier .id-today i { font-style: normal; color: var(--faint); }
.dossier .id-sum { margin-left: auto; font: 700 20px/1 var(--display); color: var(--cream); }
.dossier .id-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 18px; }
.dossier .id-k { margin: 0 0 8px; font: 600 11px/1.2 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .id-start a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--cream); text-decoration: none; border-top: 1px solid rgba(254,249,237,.07); }
.dossier .id-start a:hover strong { color: var(--yellow); }
.dossier .id-start strong { display: block; font: 600 14px/1.25 var(--body); }
.dossier .id-start em { display: flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--label); font-style: normal; text-transform: uppercase; color: var(--dim); }
.dossier .id-thumb { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; background: #222120; }
.dossier .id-thumb img { max-width: 40px; max-height: 40px; object-fit: contain; }
.dossier .id-thumb img.is-photo { width: 44px; height: 44px; max-width: none; max-height: none; object-fit: cover; }
.dossier .bp-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(254,249,237,.4); }
.dossier .bp-dot.bp-open-hardware { background: #7fe3a0; }
.dossier .bp-dot.bp-schematics { background: var(--yellow); }
.dossier .id-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; }
.dossier .id-chips .id-k { margin: 0 6px 0 0; }
.dossier .id-chips a { padding: 5px 9px; border: 1px solid var(--rule); color: var(--cream); font: 600 12px/1 var(--label); text-transform: uppercase; text-decoration: none; }
.dossier .id-chips a:hover { border-color: var(--yellow); color: var(--yellow); }
.dossier .id-single { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.dossier .id-single a { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); color: var(--cream); text-decoration: none; }
.dossier .id-single .id-thumb { grid-row: 1 / 4; }
.dossier .id-pair { font: 700 20px/1 var(--display); text-transform: uppercase; }
.dossier .id-pair i { font-style: normal; color: var(--yellow); }
.dossier .id-only { font: 500 14px/1.35 var(--body); color: rgba(254,249,237,.8); }
.dossier .id-counts { font: 500 11px/1.3 var(--label); text-transform: uppercase; color: var(--faint); }
.dossier .id-single a:hover .id-pair { color: var(--yellow); }
.dossier .id-foot { padding-bottom: 60px; }
.dossier .id-foot a { color: var(--cream); }
@media (max-width: 600px) {
  .dossier .id-matrix td { width: 38px; height: 38px; }
  .dossier .id-matrix td button { font-size: 15px; }
  .dossier .id-matrix tbody th { padding: 0 8px 0 10px; font-size: 11px; }
  .dossier .id-card { padding: 18px 16px; }
}

/* The T-Deck Plus running LilyShark (src/dossier.mjs tdeckFloat): the model alone, floating on
   the page, fading in once loaded. No frame, badge or stage. */
.tdeck-float { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.tdeck-float-stage { position: relative; width: 100%; aspect-ratio: 1 / 1.08; max-height: min(64vh, 600px); }
/* The web app frames the handset and the antenna's metal base; the rubber boot and whip run
   past the frame. Here they fade out upward instead of ending in a hard edge. */
.tdeck-float-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms ease; cursor: grab; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
.tdeck-float-canvas:active { cursor: grabbing; }
.tdeck-float-canvas:focus-visible { outline: 1px solid rgba(254,249,237,.35); outline-offset: -1px; }
.tdeck-float.is-live .tdeck-float-canvas { opacity: 1; }
.tdeck-float-stage::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 4%; height: 6%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); opacity: 0; transition: opacity 700ms ease; pointer-events: none; }
.tdeck-float.is-live .tdeck-float-stage::after { opacity: 1; }
.tdeck-float.is-failed .tdeck-float-canvas { display: none; }
.tdeck-float-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.tdeck-float-fallback[hidden] { display: none; }
.tdeck-float-fallback img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tdeck-float-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; min-height: 0; }
.tdeck-float-screens { display: flex; gap: 18px; }
.tdeck-float-screens button { padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: rgba(254,249,237,.5); cursor: pointer; font: 600 11px/1 'Inter Display', Inter, sans-serif; letter-spacing: .03em; text-transform: uppercase; transition: color 160ms ease, border-color 160ms ease; }
.tdeck-float-screens button:hover { color: #fef9ed; }
.tdeck-float-screens button[aria-pressed=true] { color: #fef9ed; border-bottom-color: #fbe154; }
.tdeck-float-screens button:focus-visible { outline: 2px solid #fbe154; outline-offset: 3px; }
.tdeck-float-ar { display: inline-flex; align-items: center; padding: 6px 0; color: rgba(254,249,237,.55); font: 600 11px/1 'Inter Display', Inter, sans-serif; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.tdeck-float-ar[hidden] { display: none; }
.tdeck-float-ar:hover { color: #fef9ed; }
.tdeck-float-ar img { width: 1px; height: 1px; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tdeck-float-canvas, .tdeck-float-stage::after { transition: none; } }
/* The image credit belongs to the photo, which shows only if 3D fails. */
.dossier-art:has(.tdeck-float) > figcaption { display: none; }
.dossier-art:has(.tdeck-float.is-failed) > figcaption { display: block; }