/* FRW4 design concepts: shared, token-driven restyle of the home page.
 * Loaded only when <html data-concept="a|b|c"> is set by concepts/concepts.js.
 * Each concept file defines the tokens below and adds its own layout rules.
 * The firmware screen inside the simulator stays dark in every concept: it
 * depicts the product's LCD, not page chrome.
 */
:root[data-concept]{
  --bg:var(--c-bg);--panel:var(--c-surface);--panel2:var(--c-surface-2);--line:var(--c-line);--muted:var(--c-text-3);
  --ink:var(--c-text);--amber:var(--c-accent);--amber2:var(--c-accent-2);--teal:var(--c-ok);--red:var(--c-danger);
  --mono:var(--font-mono);--sans:var(--font-body);
  --label:600 var(--label-size,11px)/1.3 var(--font-mono);
}
:root[data-concept] body{background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);font-size:var(--body-size,17px);line-height:1.6}
:root[data-concept] .grain{display:none}
:root[data-concept] ::selection{background:var(--c-accent);color:var(--c-accent-ink)}
:root[data-concept] :is(button,a,input):focus-visible{outline:2px solid var(--c-focus,var(--c-accent));outline-offset:3px}
:root[data-concept] h1,:root[data-concept] h2,:root[data-concept] h3{font-family:var(--font-display);color:var(--c-text)}
:root[data-concept] h1 em,:root[data-concept] h2 em{color:var(--c-accent);font-style:var(--em-style,normal)}

/* Announcement and header */
:root[data-concept] .announcement{background:var(--c-band);color:var(--c-band-ink);font:var(--label);letter-spacing:.08em;height:34px}
:root[data-concept] .announcement .status-dot{background:var(--c-band-ink);box-shadow:none}
:root[data-concept] .site-header{border-bottom:1px solid var(--c-line);background:var(--c-header,transparent)}
:root[data-concept] .brand-emblem{border-color:var(--c-accent);color:var(--c-accent);font-family:var(--font-display)}
:root[data-concept] .brand-text{font-family:var(--font-display);color:var(--c-text)}
:root[data-concept] .brand-text>span{color:var(--c-accent)}
:root[data-concept] .brand-text small{color:var(--c-text-3);font:500 9px var(--font-mono);letter-spacing:.12em}
:root[data-concept] .main-nav a,:root[data-concept] .top-cta{font:var(--nav-font,500 12px/1 var(--font-body));letter-spacing:var(--nav-track,.02em)}
:root[data-concept] .main-nav a{color:var(--c-text-2)}
:root[data-concept] .main-nav a:hover{color:var(--c-accent)}
:root[data-concept] .top-cta{border:1px solid var(--c-text);color:var(--c-text);border-radius:var(--radius)}
:root[data-concept] .top-cta:hover{background:var(--c-text);color:var(--c-bg)}
:root[data-concept] .top-cta span{color:inherit}
:root[data-concept] .nav-toggle{color:var(--c-text)}
@media(max-width:760px){:root[data-concept] .main-nav{background:var(--c-surface);border-bottom:1px solid var(--c-line)}}

/* Hero */
:root[data-concept] .eyebrow{color:var(--c-accent);font:var(--label);letter-spacing:.14em}
:root[data-concept] .eyebrow-line{background:var(--c-accent)}
:root[data-concept] .eyebrow.light{color:var(--c-text-3)}
:root[data-concept] h1{font-size:var(--h1-size);letter-spacing:var(--h1-track);font-weight:var(--h1-weight);line-height:var(--h1-lead,1.02)}
:root[data-concept] .hero-lede{color:var(--c-text-2);font-size:var(--lede-size,19px);line-height:1.65;max-width:34em}
:root[data-concept] .hero p[style]{color:var(--c-text-3)!important;font:500 12px var(--font-mono)!important}
:root[data-concept] .btn{min-height:50px;font:var(--btn-font,600 13px/1 var(--font-body));letter-spacing:.02em;border-radius:var(--radius)}
:root[data-concept] .btn.primary{background:var(--c-accent);color:var(--c-accent-ink)}
:root[data-concept] .btn.primary:hover{background:var(--c-accent-hover)}
:root[data-concept] .btn.secondary{background:transparent;border:1px solid var(--c-line-strong);color:var(--c-text)}
:root[data-concept] .btn.secondary:hover{border-color:var(--c-text)}
:root[data-concept] .hero-meta strong{font-family:var(--font-display);color:var(--c-text)}
:root[data-concept] .hero-meta small{color:var(--c-text-3);font:500 10px var(--font-mono);letter-spacing:.1em}
:root[data-concept] .hero-art{background:var(--c-hero-art,transparent);border-radius:var(--radius-lg)}
:root[data-concept] .hero-glow{display:none}
:root[data-concept] .hero-corner{border-color:var(--c-line-strong)!important}
:root[data-concept] .hero-art-index,:root[data-concept] .hero-side-note{color:var(--c-text-3);font:500 10px var(--font-mono)}
:root[data-concept] .hero-side-note span{color:var(--c-accent)}

/* Section structure */
:root[data-concept] .section-divider{border-top:1px solid var(--c-line);color:var(--c-text-3);font:var(--label);letter-spacing:.12em}
:root[data-concept] .section-divider span:first-child{color:var(--c-accent)}
:root[data-concept] .section-intro h2,:root[data-concept] .future-inner h2,:root[data-concept] .interest-section h2,:root[data-concept] .docs-callout h2{font-size:var(--h2-size);letter-spacing:var(--h2-track);font-weight:var(--h2-weight);line-height:1.08}
:root[data-concept] .section-intro p,:root[data-concept] .future-inner p,:root[data-concept] .interest-section p,:root[data-concept] .docs-callout p{color:var(--c-text-2);font-size:var(--body-size,17px);line-height:1.7}
:root[data-concept] .subtle{color:var(--c-text-2);font-size:14px;line-height:1.65}

/* 3D explorer */
:root[data-concept] .viewer-panel{border:1px solid var(--c-line);border-radius:var(--radius-lg);overflow:hidden;background:var(--c-surface)}
:root[data-concept] .viewer-main{background:var(--c-stage)}
:root[data-concept] .viewer-grid{background-image:linear-gradient(var(--c-stage-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-stage-grid) 1px,transparent 1px)}
:root[data-concept] .viewer-tag,:root[data-concept] .viewer-meta,:root[data-concept] .viewer-bottomline{color:var(--c-stage-text);font:500 10px var(--font-mono)}
:root[data-concept] .viewer-sidebar{background:var(--c-surface);border-left:1px solid var(--c-line)}
:root[data-concept] .side-heading{color:var(--c-text);font:var(--label);letter-spacing:.1em}
:root[data-concept] .side-heading span:last-child{color:var(--c-accent)}
:root[data-concept] .viewer-controls{border-top:1px solid var(--c-line)}
:root[data-concept] .view-preset{border-bottom:1px solid var(--c-line);color:var(--c-text-3);font:600 12px var(--font-mono);padding:16px 2px}
:root[data-concept] .view-preset span{color:var(--c-text);font-family:var(--font-body);font-weight:600}
:root[data-concept] :is(.view-preset.active,.view-preset:hover) :is(span),:root[data-concept] .view-preset.active,:root[data-concept] .view-preset:hover{color:var(--c-accent)}
:root[data-concept] .utility-btn{background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-text);border-radius:var(--radius);font-size:16px;min-height:44px}
:root[data-concept] .utility-btn span{font:600 11px var(--font-mono)}
:root[data-concept] :is(.utility-btn[aria-pressed=true],.utility-btn.active){border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-soft)}
:root[data-concept] .utility-btn:hover{border-color:var(--c-accent)}
:root[data-concept] .color-chooser{border-top:1px solid var(--c-line)}
:root[data-concept] .color-chooser-title{color:var(--c-text);font:var(--label)}
:root[data-concept] .color-chooser-title small{color:var(--c-text-3)}
:root[data-concept] .color-choice{background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-text-2);border-radius:var(--radius);font:600 10px var(--font-mono)}
:root[data-concept] .color-choice.active{background:var(--c-accent-soft);border-color:var(--c-accent);color:var(--c-accent)}
:root[data-concept] .motion-telemetry{border-top:1px solid var(--c-line);color:var(--c-text-2)}
:root[data-concept] .motion-telemetry>strong{color:var(--c-ok-text)}
:root[data-concept] .motion-grid span{color:var(--c-text-3);font-size:10px}
:root[data-concept] .motion-grid b{color:var(--c-text);font-size:13px}
:root[data-concept] .motion-jump{color:var(--c-accent);border-top:1px solid var(--c-line);font-size:11px}
:root[data-concept] .aside-note{border-top:1px solid var(--c-line)}
:root[data-concept] .aside-note span{color:var(--c-accent)}
:root[data-concept] .aside-note p{color:var(--c-text-2);font-size:12px;line-height:1.6}
:root[data-concept] .explorer-state{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg)}
:root[data-concept] .explorer-parts button{background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-text);border-radius:var(--radius);font:500 13px var(--font-body);min-height:44px}
:root[data-concept] .explorer-parts button small{color:var(--c-text-3);font:500 10px var(--font-mono)}
:root[data-concept] :is(.explorer-parts button.active,.explorer-parts button:hover){border-color:var(--c-accent);background:var(--c-accent-soft)}
:root[data-concept] .explorer-scrub label{color:var(--c-text-3);font:var(--label)}
:root[data-concept] .explorer-card{background:var(--c-accent-soft);border:1px solid var(--c-accent);border-radius:var(--radius)}
:root[data-concept] .explorer-card h4{font-family:var(--font-display);color:var(--c-text);font-size:17px}
:root[data-concept] .explorer-card p{color:var(--c-text-2);font-size:13px}
:root[data-concept] .explorer-disclosure{color:var(--c-accent)!important;font:600 10px var(--font-mono)!important}
:root[data-concept] .explorer-inside-note img{border:1px solid var(--c-line);border-radius:var(--radius)}
:root[data-concept] .hotspot{background:var(--c-hotspot-bg);color:var(--c-hotspot-ink);border:1px solid var(--c-accent);border-radius:var(--radius-sm);font:600 10px var(--font-mono)}
:root[data-concept] .hotspot:before{background:var(--c-accent)}

/* Simulator: page chrome follows the concept; the device and its LCD stay product-dark. */
:root[data-concept] .sim-layout{border:1px solid var(--c-line);background:var(--c-surface);border-radius:var(--radius-lg);overflow:hidden}
:root[data-concept] .sim-machine{background:var(--c-stage);border-right:1px solid var(--c-line)}
:root[data-concept] .sim-machine:before{display:none}
:root[data-concept] .machine-eyebrow,:root[data-concept] .machine-eyebrow-right,:root[data-concept] .sim-status,:root[data-concept] .sim-status span:last-child{color:var(--c-stage-text);font:600 10px var(--font-mono)}
:root[data-concept] .device-body{box-shadow:0 24px 50px var(--c-shadow),inset 2px 2px 2px #ffffff17,inset -2px -2px 5px #0009}
:root[data-concept] .motion-preview{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
:root[data-concept] .motion-preview-head,:root[data-concept] .motion-preview-info{color:var(--c-text-2);font:600 10px var(--font-mono);border-color:var(--c-line)}
:root[data-concept] .motion-preview-head strong,:root[data-concept] .motion-preview-info b{color:var(--c-accent)}
:root[data-concept] .motion-preview-info span{color:var(--c-text-3)}
:root[data-concept] .motion-preview-info span:last-child{color:var(--c-ok-text)}
:root[data-concept] .motion-preview-stage{background:var(--c-stage-inset)}
:root[data-concept] .motion-preview-stage:before{background-image:linear-gradient(var(--c-stage-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-stage-grid) 1px,transparent 1px)}
:root[data-concept] .preview-overlay{color:var(--c-stage-text);text-shadow:none}
:root[data-concept] .preview-overlay span:last-child{color:var(--c-accent)}
:root[data-concept] .motion-preview-note{color:var(--c-text-2);font:400 12px/1.6 var(--font-body)}
:root[data-concept] .sim-controls{background:var(--c-surface)}
:root[data-concept] .controls-heading{color:var(--c-text);font:var(--label);letter-spacing:.1em}
:root[data-concept] .chip{border-color:var(--c-ok);color:var(--c-ok-text);border-radius:var(--radius-sm)}
:root[data-concept] .sim-help{color:var(--c-text-2);font-size:14px;line-height:1.7}
:root[data-concept] .sim-help b{color:var(--c-text)}
:root[data-concept] .control-label{color:var(--c-text);font:var(--label)}
:root[data-concept] .control-label>span{color:var(--c-accent)}
:root[data-concept] :is(.mode-btn,.button-trio button,.pedal-buttons button,.presentation-buttons button,.sim-extra-buttons button,.sim-service-buttons button){background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-text);border-radius:var(--radius);font-family:var(--font-mono);min-height:44px}
:root[data-concept] .mode-btn small{color:var(--c-text-3)}
:root[data-concept] .mode-btn.active{background:var(--c-accent-soft);border-color:var(--c-accent);color:var(--c-accent)}
:root[data-concept] .mode-btn.active small{color:var(--c-accent)}
:root[data-concept] :is(.mode-btn,.button-trio button,.pedal-buttons button,.presentation-buttons button,.sim-extra-buttons button,.sim-service-buttons button):hover{border-color:var(--c-accent);color:var(--c-accent)}
:root[data-concept] .pedal-buttons .danger,:root[data-concept] .sim-service-buttons button:nth-child(2){background:var(--c-danger-soft);border-color:var(--c-danger);color:var(--c-danger)}
:root[data-concept] .mini-helper,:root[data-concept] .slider-ends{color:var(--c-text-3);font:500 10px var(--font-mono)}
:root[data-concept] .sim-controls input[type=range]{background:var(--c-line);accent-color:var(--c-accent)}
:root[data-concept] .sim-controls input[type=range]::-webkit-slider-thumb{background:var(--c-accent);border-color:var(--c-surface);box-shadow:0 0 0 1px var(--c-accent)}
:root[data-concept] .sim-message{background:var(--c-ok-soft);border:1px solid var(--c-ok);color:var(--c-ok-text);border-radius:var(--radius);font:500 11px/1.5 var(--font-mono)}
:root[data-concept] .sim-message.error{background:var(--c-danger-soft);border-color:var(--c-danger);color:var(--c-danger)}
:root[data-concept] .sim-note{color:var(--c-text-3);font-size:12px}
:root[data-concept] .presentation-motion-group,:root[data-concept] .sim-controls .sim-group.sim-service{border-top:1px solid var(--c-line)}

/* Configurator */
:root[data-concept] .config-visual{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);overflow:hidden}
:root[data-concept] .config-preview-heading,:root[data-concept] .config-preview-footer{color:var(--c-text-2);border-color:var(--c-line);font:600 10px var(--font-mono)}
:root[data-concept] .config-preview-heading>span:last-child,:root[data-concept] .config-preview-footer button{color:var(--c-accent)}
:root[data-concept] .config-live-dot{background:var(--c-ok);box-shadow:none}
:root[data-concept] .config-preview-stage{background:var(--c-stage)}
:root[data-concept] .config-preview-stage:before{background-image:linear-gradient(var(--c-stage-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-stage-grid) 1px,transparent 1px)}
:root[data-concept] .config-preview-note{color:var(--c-stage-text)}
:root[data-concept] .config-legend{background:var(--c-surface-2);border-top:1px solid var(--c-line);color:var(--c-text-2);font:500 10px/1.5 var(--font-mono)}
:root[data-concept] .config-visual-disclaimer{color:var(--c-text-3);font:400 12px/1.6 var(--font-body);padding-top:12px}
:root[data-concept] .config-form{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg)}
:root[data-concept] .config-step{border-bottom:1px solid var(--c-line)}
:root[data-concept] .config-step-title>span{background:var(--c-accent-soft);color:var(--c-accent);border-radius:var(--radius-sm);font-weight:600}
:root[data-concept] .config-step-title strong{color:var(--c-text);font:600 13px var(--font-body);letter-spacing:.04em}
:root[data-concept] .config-step-title small{color:var(--c-text-3);font:500 10px var(--font-mono)}
:root[data-concept] .config-base{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--radius)}
:root[data-concept] .config-base>b{color:var(--c-text);font:600 14px var(--font-body)}
:root[data-concept] .config-base>span{color:var(--c-text-2);font:400 13px/1.5 var(--font-body)}
:root[data-concept] .config-base>strong,:root[data-concept] .config-addon strong{color:var(--c-text);font-family:var(--font-mono)}
:root[data-concept] .config-finish,:root[data-concept] .config-addon{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--radius)}
:root[data-concept] .config-finish:has(input:checked),:root[data-concept] .config-addon:has(input:checked){border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:none}
:root[data-concept] .config-finish span,:root[data-concept] .config-addon b{color:var(--c-text);font:600 12px var(--font-body)}
:root[data-concept] .config-finish small,:root[data-concept] .config-addon small{color:var(--c-text-3);font:400 12px/1.45 var(--font-body)}
:root[data-concept] .config-addon input{accent-color:var(--c-accent)}
:root[data-concept] .config-quantity label strong{color:var(--c-text);font:600 13px var(--font-body)}
:root[data-concept] .config-quantity label small{color:var(--c-text-3)}
:root[data-concept] .config-qty-control{border:1px solid var(--c-line-strong);border-radius:var(--radius);overflow:hidden}
:root[data-concept] .config-qty-control button{background:var(--c-surface-2);color:var(--c-text);width:44px;height:44px}
:root[data-concept] .config-qty-control output{color:var(--c-text)}
:root[data-concept] .config-summary{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--radius)}
:root[data-concept] .config-summary-label{color:var(--c-text);font:var(--label)}
:root[data-concept] .config-summary-label span{color:var(--c-accent)}
:root[data-concept] .config-line{color:var(--c-text-2);font:400 13px/1.5 var(--font-body)}
:root[data-concept] .config-line strong{color:var(--c-text);font-family:var(--font-mono)}
:root[data-concept] .config-line.muted{color:var(--c-text-3)}
:root[data-concept] .config-total{border-top:1px solid var(--c-line-strong);color:var(--c-text-2)}
:root[data-concept] .config-total strong{color:var(--c-text);font-family:var(--font-display)}
:root[data-concept] .config-price-note{color:var(--c-text-3);font:400 12px/1.6 var(--font-body)}
:root[data-concept] .config-actions .btn{border-radius:var(--radius);font:600 12px var(--font-body);min-height:44px}
:root[data-concept] .config-feedback{color:var(--c-ok-text)}

/* Capabilities, documentation, roadmap, interest, footer */
:root[data-concept] .feature-grid{border-color:var(--c-line)}
:root[data-concept] .feature-card{background:var(--c-surface);border-color:var(--c-line)}
:root[data-concept] .feature-card:hover{background:var(--c-surface-2)}
:root[data-concept] .feature-highlight{background:var(--c-highlight);color:var(--c-highlight-ink)}
:root[data-concept] .feature-highlight :is(h3,p,.feature-num,.feature-bottom){color:var(--c-highlight-ink)}
:root[data-concept] .feature-icon{color:var(--c-accent)}
:root[data-concept] .feature-highlight .feature-icon,:root[data-concept] .feature-highlight .feature-bottom span{color:var(--c-highlight-accent)}
:root[data-concept] .feature-num{color:var(--c-text-3);font:600 11px var(--font-mono)}
:root[data-concept] .feature-card h3{font-size:18px;letter-spacing:0;font-weight:var(--h3-weight,650)}
:root[data-concept] .feature-card p{color:var(--c-text-2);font-size:15px;line-height:1.65}
:root[data-concept] .feature-bottom{border-top:1px solid var(--c-line);color:var(--c-text-3);font:600 10px var(--font-mono)}
:root[data-concept] .feature-highlight .feature-bottom{border-color:#ffffff33}
:root[data-concept] .feature-bottom span{color:var(--c-accent)}
:root[data-concept] .docs-callout{border-top:1px solid var(--c-line)}
:root[data-concept] .docs-callout-meta{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);color:var(--c-text-3)}
:root[data-concept] .docs-callout-meta strong{color:var(--c-accent);font-family:var(--font-display)}
:root[data-concept] .docs-callout-meta small{color:var(--c-text-2)}
:root[data-concept] .future-section{background:var(--c-band-soft);border-color:var(--c-line)}
:root[data-concept] .future-list{border-top:1px solid var(--c-line-strong)}
:root[data-concept] .future-list>div{border-bottom:1px solid var(--c-line);font:600 13px var(--font-body);color:var(--c-text)}
:root[data-concept] .future-list span{color:var(--c-accent);font-family:var(--font-mono)}
:root[data-concept] .future-list i{color:var(--c-text-3);font:600 10px var(--font-mono)}
:root[data-concept] .interest-tag{color:var(--c-accent);font:var(--label);letter-spacing:.16em}
:root[data-concept] .interest-section>small{color:var(--c-text-3);font:500 11px var(--font-mono)}
:root[data-concept] footer{background:var(--c-footer);border-top:1px solid var(--c-line)}
:root[data-concept] .footer-inner>div:not(.brand),:root[data-concept] .footer-inner>span{color:var(--c-footer-ink);font:500 11px var(--font-mono)}
:root[data-concept] footer .brand-text{color:var(--c-footer-ink)}

/* Review-only concept switcher */
.concept-switcher{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;flex-wrap:wrap;max-width:calc(100% - 32px);align-items:center;gap:6px;padding:6px;background:#ffffffee;border:1px solid #0002;border-radius:10px;box-shadow:0 8px 24px #0002;font:600 11px/1 system-ui,sans-serif;color:#222}
.concept-switcher span{padding:0 6px;color:#555}
.concept-switcher a{padding:8px 10px;border-radius:7px;color:#222;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.concept-switcher a[aria-current=true]{background:#222;color:#fff}
.concept-switcher a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(max-width:560px){.concept-switcher{left:8px;right:8px;bottom:8px;max-width:none;justify-content:center;gap:2px}.concept-switcher span{display:none}.concept-switcher a{padding:6px 7px;min-height:28px;font-size:10.5px}}

/* Technical data, drawings, printable parts */
:root[data-concept] .tech-section,:root[data-concept] .drawings-section,:root[data-concept] .parts-section{padding-top:96px;padding-bottom:104px}
:root[data-concept] :is(.spec-group,.parts-group,.parts-foot) h3{font-family:var(--font-display);font-size:19px;color:var(--c-text);font-weight:var(--h3-weight,650)}
:root[data-concept] .spec-table{font-size:16px}
:root[data-concept] .spec-table :is(th,td){border-color:var(--c-line);padding:12px 12px 12px 0}
:root[data-concept] .spec-table th{color:var(--c-text-2);font-weight:500}
:root[data-concept] .spec-table td{color:var(--c-text)}
:root[data-concept] .spec-table td.spec-src{color:var(--c-accent);font:600 11px var(--font-mono)}
:root[data-concept] .spec-legend{color:var(--c-text-2);font-size:14px}
:root[data-concept] .spec-legend b{color:var(--c-accent);font-family:var(--font-mono)}
:root[data-concept] .spec-status{color:var(--c-text-2);font-size:14px;border-color:var(--c-accent)}
:root[data-concept] .drawing-sheet{border:1px solid var(--c-line);border-radius:var(--radius-sm);background:#f6f6f2}
:root[data-concept] .drawing figcaption{color:var(--c-text-3);font-size:14px}
:root[data-concept] .drawing figcaption b{color:var(--c-text)}
:root[data-concept] .drawing-dims text{font-family:var(--font-mono)}
:root[data-concept] .parts-group{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg)}
:root[data-concept] .parts-group li{border-color:var(--c-line);color:var(--c-text);font-size:15px}
:root[data-concept] .parts-group li b{color:var(--c-accent)}
:root[data-concept] .parts-foot p{color:var(--c-text-2);font-size:16px}
:root[data-concept] .parts-foot a{color:var(--c-accent)}

/* Header: switch to the compact menu below 1500 px so larger type never overflows. */
@media(max-width:1500px){
  :root[data-concept] .nav-toggle{display:block;background:transparent;border:1px solid var(--c-line-strong);border-radius:var(--radius-sm);font-size:20px;width:44px;height:44px;order:3}
  :root[data-concept] .site-header{position:relative}
  :root[data-concept] .main-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;background:var(--c-surface);border-bottom:1px solid var(--c-line);padding:8px 48px 16px;z-index:30;box-shadow:0 18px 30px var(--c-shadow)}
  :root[data-concept] .main-nav.open{display:flex}
  :root[data-concept] .main-nav a{padding:14px 0;border-bottom:1px solid var(--c-line);font-size:15px}
  :root[data-concept] .top-cta{margin-left:auto}
}

/* Readability floor for the target readers (55–70, technical background): body text 18 px,
 * secondary text 15 px, small labels 12.5 px, all against the concept's paper colour.
 * The firmware screen replica inside the simulator keeps its own scale. */
:root[data-concept] .announcement{font-size:14px}
:root[data-concept] .main-nav a{font-size:15px}
:root[data-concept] .top-cta,:root[data-concept] .btn{font-size:15px}
:root[data-concept] .brand-text small{font-size:11px}
:root[data-concept] .hero p[style]{font-size:13.5px!important}
:root[data-concept] .hero-meta small,:root[data-concept] .hero-art-index,:root[data-concept] .hero-side-note{font-size:12.5px}
:root[data-concept] .section-divider{font-size:13px}
:root[data-concept] :is(.viewer-topline,.viewer-bottomline,.utility-btn span,.aside-note span,.metric-line span,.motion-grid span){font-size:12.5px}
:root[data-concept] :is(.side-heading,.controls-heading,.control-label,.view-preset,.chip,.sim-status,.sim-note,.feature-num,.feature-bottom,.future-list i,.interest-tag,.interest-section>small,.motion-jump){font-size:13px}
:root[data-concept] :is(.subtle,.aside-note p,.sim-message,.mini-helper,.slider-ends,.explorer-card p,.drawing figcaption){font-size:15px;line-height:1.6}
:root[data-concept] :is(.sim-help,.feature-card p,.future-list>div,.parts-group li){font-size:16px;line-height:1.65}
:root[data-concept] :is(.mode-btn,.pedal-buttons button,.sim-extra-buttons button,.sim-service-buttons button,.presentation-buttons button){font-size:14px}
:root[data-concept] .motion-grid b{font-size:15px}
:root[data-concept] .spec-table{font-size:17px}
:root[data-concept] .spec-table td{font-variant-numeric:tabular-nums}
:root[data-concept] :is(.config-step-title small,.config-legend,.config-visual-disclaimer,.config-preview-note,.config-base>span){font-size:13.5px}
:root[data-concept] :is(.footer-inner>div:not(.brand),.footer-inner>span){font-size:14px}
:root[data-concept] .drawing-dims text{font-size:34px}
@media(max-width:760px){
  :root[data-concept] body{font-size:17px}
  :root[data-concept] .spec-table{font-size:16px}
}

/* Hero image: the concepts use the light studio still (frw4-2.1-hero-light.jpg, set by concepts.js),
 * so the frame takes the still's own background colour. */
:root[data-concept] .hero-art{background:#ebeae7;overflow:hidden}
:root[data-concept] .hero-art img{object-fit:cover;object-position:50% 55%}
:root[data-concept] .hero-corner{border-color:var(--c-line-strong)}
:root[data-concept] .spec-src,:root[data-concept] .spec-legend b{font-size:12px;letter-spacing:.06em}
:root[data-concept] .parts-group li b{font-size:14px;font-variant-numeric:tabular-nums}
@media(max-width:760px){:root[data-concept] .hero-art img{object-fit:contain;object-position:50% 50%}}
:root[data-concept] .hero-video-toggle{border-color:var(--c-line-strong);background:var(--c-surface);color:var(--c-text);font-family:var(--font-body);border-radius:var(--radius-sm)}
:root[data-concept] .hero-video-toggle:focus-visible{outline-color:var(--c-focus)}