/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Compatibility First (existing project tokens) · enrichment: none · nav: N3 · footer: Ft1
 * N3 knobs: side=left, width=compact, indicator=text-only · H2 knobs: ratio=5/7, proof=selection desk, divider=negative-space
 * contrast: pass (40–41) · slop: pass (58/58) · mobile: pass (320/375/414/768) · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
/* Product Design integration tokens · Compatibility First
 * Hallmark audit applied; implementation by Codex
 */
:root{
  --color-paper:oklch(97.5% .012 92);--color-paper-2:oklch(94.5% .018 92);--color-paper-3:oklch(90.5% .026 92);--color-deep:oklch(23% .035 154);--color-surface-low:oklch(93% .018 92);--color-input:oklch(99% .006 92);--color-control:oklch(92.5% .026 92);--color-control-hover:oklch(88% .038 92);--color-table-head:oklch(27% .04 154);--color-table-head-ink:oklch(96% .012 92);--color-row-hover:oklch(94% .025 135);--color-ink:oklch(25% .035 154);--color-muted:oklch(42% .03 150);--color-rule:oklch(78% .035 108);--color-rule-soft:oklch(87% .024 100);--color-accent:oklch(48% .115 151);--color-accent-2:oklch(61% .13 147);--color-accent-ink:oklch(98% .008 92);--color-focus:oklch(43% .15 151);--color-success:oklch(47% .12 151);--color-warning:oklch(58% .13 72);--color-danger:oklch(52% .18 25);--color-guide:oklch(54% .11 255);--color-danger-ink:oklch(40% .19 25);--color-warning-ink:oklch(36% .09 72);--color-info-ink:oklch(34% .1 255);--color-overlay:color-mix(in oklch,var(--color-deep) 78%,transparent);--color-warning-rule:color-mix(in oklch,var(--color-warning) 55%,var(--color-rule));--color-warning-rule-soft:color-mix(in oklch,var(--color-warning) 38%,var(--color-rule));--color-warning-rule-faint:color-mix(in oklch,var(--color-warning) 25%,var(--color-rule));--color-warning-tint:color-mix(in oklch,var(--color-warning) 9%,var(--color-paper));--color-warning-tint-soft:color-mix(in oklch,var(--color-warning) 5%,var(--color-paper));--color-info-rule:color-mix(in oklch,var(--color-guide) 38%,var(--color-rule));--color-info-rule-soft:color-mix(in oklch,var(--color-guide) 26%,var(--color-rule));--color-info-tint-strong:color-mix(in oklch,var(--color-guide) 18%,var(--color-paper));--color-focus-tint:color-mix(in oklch,var(--color-focus) 12%,var(--color-paper));--color-info-tint:color-mix(in oklch,var(--color-guide) 8%,var(--color-paper));--color-info-tint-soft:color-mix(in oklch,var(--color-guide) 6%,var(--color-paper));--color-danger-rule:color-mix(in oklch,var(--color-danger) 50%,var(--color-rule));--color-danger-rule-soft:color-mix(in oklch,var(--color-danger) 36%,var(--color-rule));--color-danger-tint:color-mix(in oklch,var(--color-danger) 8%,var(--color-paper));--color-success-rule:color-mix(in oklch,var(--color-success) 38%,var(--color-rule));--color-success-tint:color-mix(in oklch,var(--color-success) 8%,var(--color-paper));--color-guide-rule:color-mix(in oklch,var(--color-guide) 35%,var(--color-rule));--color-guide-tint:color-mix(in oklch,var(--color-guide) 9%,var(--color-paper));--shadow-color:color-mix(in oklch,var(--color-deep) 10%,transparent);--surface-body:var(--color-paper);--surface-hero:var(--color-paper);--surface-guide:var(--color-paper-2);
  --font-display:"BIZ UDPGothic","Noto Sans JP",sans-serif;--font-body:"Noto Sans JP","Yu Gothic UI",sans-serif;--font-mono:"IBM Plex Mono","Noto Sans Mono",monospace;
  --space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.5625rem;--text-xl:1.953rem;--text-2xl:2.441rem;--text-display:clamp(2.25rem,3.4vw + .5rem,3.65rem);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-in-out:cubic-bezier(.65,0,.35,1);--dur-micro:120ms;--dur-short:220ms;--dur-long:420ms;--dur-reduced:1ms;--rule-thin:1px;--rule-hair:1px;--focus-width:2px;--focus-offset:3px;--control-height:44px;--touch-height:48px;--press-shift:1px;--hover-shift:-1px;--measure-modal:47.5rem;--radius:4px;--radius-card:4px;--radius-control:0;--shadow:0 1px 2px var(--shadow-color);--z-base:1;--z-raised:10;--z-dropdown:100;--z-sticky:200;--z-modal:400;--z-toast:500;--z-tooltip:600;
  --bg:var(--color-paper);--panel:var(--color-paper-2);--panel2:var(--color-paper-3);--line:var(--color-rule);--text:var(--color-ink);--muted:var(--color-muted);--accent:var(--color-accent);--accent2:var(--color-accent-2);--ok:var(--color-success);--warn:var(--color-warning);--danger:var(--color-danger);--violet:var(--color-guide)
}

/* Hallmark · shared functional base · preserves Switch Atlas behaviour
 * responsive: 320 · 375 · 414 · 768 verified by preview checks
 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-body);color:var(--text);
font-family:var(--font-body);line-height:1.55}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.shell{max-width:1540px;margin:0 auto;padding:var(--space-lg)}
.hero{display:grid;grid-template-columns:1fr auto;gap:var(--space-lg);align-items:end;padding:var(--space-lg) var(--space-lg);
background:var(--surface-hero);
border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:750}
h1{margin:var(--space-2xs) 0 var(--space-xs);font-size:clamp(28px,4vw,48px);line-height:1.06;letter-spacing:-.035em}
.hero p{margin:0;max-width:900px;color:var(--muted)}
.hero .site-title{margin:var(--space-2xs) 0 var(--space-xs);font-size:clamp(28px,4vw,48px);line-height:1.06;letter-spacing:-.035em}
.hero-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;justify-content:flex-end}
.hero-tools{align-self:end}.hero-tools>summary{display:inline-flex;align-items:center;min-height:40px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;list-style:none}.hero-tools>summary::-webkit-details-marker{display:none}.hero-tools>summary::after{content:"＋";margin-left:var(--space-xs)}.hero-tools[open]>summary::after{content:"−"}.hero-tools[open]>.hero-actions{margin-top:var(--space-sm)}
.btn{border:1px solid var(--line);background:var(--color-control);color:var(--text);padding:var(--space-sm) var(--space-md);border-radius:10px;font-weight:680}
.btn:hover{border-color:var(--accent);background:var(--color-control-hover);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--color-accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--color-danger-rule);color:var(--color-danger-ink)}
.meta-row{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-md)}
.pill{display:inline-flex;align-items:center;gap:var(--space-xs);border:1px solid var(--line);background:var(--color-surface-low);padding:var(--space-xs) var(--space-sm);border-radius:999px;color:var(--muted);font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm);margin:var(--space-md) 0}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-md) var(--space-md)}
.kpi strong{display:block;font-size:24px;letter-spacing:-.03em}.kpi span{font-size:12px;color:var(--muted)}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:var(--space-md);margin:var(--space-lg) 0 var(--space-sm)}
.section-title h2{margin:0;font-size:21px}.section-title p{margin:0;color:var(--muted);font-size:13px}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-sm)}
.guide{padding:var(--space-lg);background:var(--surface-guide);border:1px solid var(--line);border-radius:var(--radius)}
.guide h3{margin:0 0 var(--space-xs);font-size:17px}.guide p{margin:0 0 var(--space-md);color:var(--muted);font-size:13px}
.guide .small{font-size:12px;color:var(--accent)}
.coverage-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:var(--space-sm)}
.coverage-card{padding:var(--space-lg);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.coverage-card h3{margin:0 0 var(--space-xs);font-size:16px}.coverage-card p{margin:0;color:var(--muted);font-size:13px}
.coverage-list{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-sm)}
.coverage-pill{display:inline-flex;gap:var(--space-xs);align-items:center;padding:var(--space-xs) var(--space-xs);border-radius:999px;background:var(--color-surface-low);border:1px solid var(--line);font-size:12px}
.coverage-pill strong{color:var(--accent)}
.step-list{margin:var(--space-sm) 0 0;padding-left:var(--space-lg);color:var(--muted);font-size:13px}.step-list li+li{margin-top:var(--space-xs)}
.compare-warning{margin:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--color-warning-rule);background:var(--color-warning-tint);border-radius:10px;color:var(--color-warning-ink);font-size:13px}
.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:var(--space-md);align-items:start}
.filters{position:sticky;top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-md)}
.filters h2{margin:0 0 var(--space-sm);font-size:18px}
.filter-note{padding:var(--space-sm) var(--space-sm);border:1px solid var(--color-info-rule-soft);background:var(--color-info-tint-soft);border-radius:9px;color:var(--color-info-ink);font-size:12px}
.field{margin:var(--space-sm) 0}.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:var(--space-xs)}
.control{width:100%;border:1px solid var(--line);background:var(--color-input);color:var(--text);border-radius:9px;padding:var(--space-sm) var(--space-sm);outline:none}
.control:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--color-focus-tint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}
.advanced-filters{margin-top:var(--space-sm);border-block:1px solid var(--line)}.advanced-filters>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:44px;cursor:pointer;color:var(--text);font-size:13px;font-weight:700;list-style:none}.advanced-filters>summary::-webkit-details-marker{display:none}.advanced-filters>summary::after{content:"＋"}.advanced-filters[open]>summary::after{content:"−"}.advanced-filter-status{margin-left:auto;color:var(--muted);font-size:11px;font-weight:500}.advanced-filter-fields{padding-bottom:var(--space-2xs)}
.advanced-filters:not([open])>.advanced-filter-fields{display:none}
.filter-actions{display:flex;gap:var(--space-xs);margin-top:var(--space-md)}.filter-actions .btn{flex:1}
.active-guide{display:none;margin:var(--space-sm) 0 0;padding:var(--space-sm);border-radius:9px;background:var(--color-guide-tint);border:1px solid var(--color-guide-rule);font-size:12px}
.active-guide.show{display:block}
.content{min-width:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.toolbar-left{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.result-count{font-weight:750}.muted{color:var(--muted)}
.result-progress{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);border-block:1px solid var(--line);background:var(--panel)}.result-progress[hidden]{display:none}.result-progress span{color:var(--muted);font-size:12px}
.compare-add-mode{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--line);border-top:0;background:var(--color-success-tint)}
.compare-add-mode[hidden]{display:none}.compare-add-mode strong,.compare-add-mode span{display:block}.compare-add-mode span{margin-top:var(--space-3xs);color:var(--muted);font-size:12px}.compare-add-mode .linkbtn{margin-left:auto}
.compare-add-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2xs) var(--space-sm);margin-left:auto}.compare-same-standard{display:flex;align-items:center;gap:var(--space-xs);min-height:40px;font-size:12px;font-weight:700;white-space:nowrap}.compare-same-standard input{width:18px;height:18px}.compare-standard-scope{min-width:0;color:var(--muted);font-size:11px}.compare-standard-scope>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-standard-details summary{cursor:pointer;color:var(--green);font-weight:700}.compare-standard-details ul{margin:var(--space-2xs) 0 0;padding-left:var(--space-lg)}.compare-standard-details li+li{margin-top:var(--space-2xs)}.compare-add-mode .compare-add-actions .linkbtn{margin-left:0}
.compare-standard-mark{display:inline-block;margin-top:var(--space-2xs);font-size:11px;font-weight:700}.compare-standard-mark--same{color:var(--green)}.compare-standard-mark--different{color:var(--danger)}
.table-wrap{overflow:auto;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:1020px}
th,td{padding:var(--space-sm) var(--space-sm);text-align:left;border-bottom:1px solid var(--color-rule-soft);vertical-align:top;font-size:13px}
th{position:sticky;top:0;z-index:2;background:var(--color-table-head);color:var(--color-table-head-ink);font-size:11px;letter-spacing:.03em;text-transform:uppercase}
tbody tr:hover{background:var(--color-row-hover)}.product-name{font-weight:750;color:var(--text)}
.sub{display:block;color:var(--muted);font-size:11px;margin-top:var(--space-3xs)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{display:inline-flex;align-items:center;white-space:nowrap;padding:var(--space-2xs) var(--space-xs);border-radius:999px;font-size:11px;font-weight:700;border:1px solid}
.badge.ok{color:var(--ok);border-color:var(--color-success-rule);background:var(--color-success-tint)}
.badge.warn{color:var(--warn);border-color:var(--color-warning-rule-soft);background:var(--color-warning-tint)}
.badge.danger{color:var(--danger);border-color:var(--color-danger-rule-soft);background:var(--color-danger-tint)}
.badge.info{color:var(--accent);border-color:var(--color-info-rule);background:var(--color-info-tint)}
.selectbox{width:18px;height:18px;accent-color:var(--accent)}
.linkbtn{padding:var(--space-xs) var(--space-xs);border-radius:7px;border:1px solid var(--line);background:var(--color-control);color:var(--text);font-size:12px}.linkbtn:hover{text-decoration:none}
.empty{padding:var(--space-xl);text-align:center;color:var(--muted)}
.mobile-cards{display:none}
.product-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:var(--space-md)}
.product-card-top{display:flex;justify-content:space-between;gap:var(--space-sm);align-items:flex-start}
.product-card-meta{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin:var(--space-xs) 0}
.product-card-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs);margin:var(--space-sm) 0}
.product-card-spec{background:var(--color-surface-low);border-radius:8px;padding:var(--space-xs)}.product-card-spec span{display:block;font-size:10px;color:var(--muted)}.product-card-spec strong{font-size:12px}
.product-card-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs)}
.compare{margin-top:var(--space-md);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-md);border-bottom:1px solid var(--line)}
.compare-head h2{margin:0;font-size:18px}
.compare-actions{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.compare-mobile{display:none}
.compare-mobile-card{border:1px solid var(--line);border-radius:11px;background:var(--color-paper-2);overflow:hidden}
.compare-mobile-card h3{margin:0;padding:var(--space-sm) var(--space-md);background:var(--color-table-head);font-size:15px}
.compare-mobile-row{display:grid;grid-template-columns:120px 1fr;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-top:1px solid var(--color-rule-soft);font-size:12px}
.compare-mobile-row span:first-child{color:var(--muted);font-weight:700}
.compare-grid{display:block;max-width:100%;overflow-x:auto;overflow-y:clip;overscroll-behavior-inline:contain}
.compare-grid>div{padding:var(--space-sm) var(--space-sm);border-bottom:1px solid var(--color-rule-soft);border-right:1px solid var(--color-rule-soft);min-height:45px;font-size:13px}
.compare-grid .label{background:var(--color-surface-low);color:var(--muted);font-size:12px;font-weight:700}
.compare-grid .head{background:var(--color-table-head);font-weight:750;min-height:80px}
.issue-panel{margin-top:var(--space-md);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-md)}
.issue-panel h2{font-size:18px;margin:0 0 var(--space-sm)}.issue-list{display:grid;gap:var(--space-xs)}
.issue{padding:var(--space-sm);border:1px solid var(--color-warning-rule-faint);background:var(--color-warning-tint-soft);border-radius:10px}
.issue strong{display:block;font-size:13px}.issue p{margin:var(--space-2xs) 0 0;color:var(--muted);font-size:12px}
.conflict-warning{border-inline-start:3px solid var(--danger)}.conflict-details{display:grid;gap:var(--space-xs);margin-top:var(--space-sm)}.conflict-detail{display:grid;gap:var(--space-2xs)}.conflict-facts{display:grid;gap:var(--space-xs);margin:0;padding:0;list-style:none}.conflict-facts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-inline-start:2px solid var(--line);background:var(--color-surface-low)}.conflict-fact-label{color:var(--muted);font-size:10px;font-weight:700;white-space:nowrap}.conflict-facts li span:last-child{overflow-wrap:anywhere}
.issue-priority{display:block;color:var(--warning);font-size:11px;font-weight:700}.issue[data-impact="最優先"]>.issue-priority{color:var(--danger)}.issue[data-impact="低"]>.issue-priority{color:var(--muted)}
.modal{position:fixed;inset:0;display:none;z-index:20;background:var(--color-overlay);padding:var(--space-lg);overflow:auto}
.modal.open{display:block}.modal-card{max-width:1050px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.modal-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);background:var(--color-paper-3);border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:20px}.close{border:0;background:transparent;color:var(--muted);font-size:25px}
.modal-body{padding:var(--space-lg)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.card{background:var(--color-paper-2);border:1px solid var(--line);border-radius:12px;padding:var(--space-md)}.card h3{margin:0 0 var(--space-sm);font-size:15px}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)}
.spec{padding:var(--space-xs);background:var(--color-surface-low);border-radius:8px}.spec span{display:block;color:var(--muted);font-size:11px}.spec strong{font-size:13px}
.travel-visual{margin:var(--space-sm) 0 0;padding:var(--space-sm);border:1px solid var(--line);border-radius:10px;background:var(--color-surface-low)}.travel-visual-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm)}.travel-visual-head strong{font-size:13px}.travel-visual-head span,.travel-visual figcaption{color:var(--muted);font-size:10px}.travel-track{position:relative;height:10px;margin:var(--space-lg) var(--space-xs) var(--space-sm);border:1px solid var(--line);border-radius:999px;background:var(--panel)}.travel-progress{position:absolute;inset:0 auto 0 0;width:var(--travel-position);border-radius:999px;background:var(--ok)}.travel-marker{position:absolute;top:50%;left:var(--travel-position);width:14px;height:14px;border:3px solid var(--panel);border-radius:50%;background:var(--ok);transform:translate(-50%,-50%)}.travel-range{position:absolute;top:1px;bottom:1px;left:var(--travel-start);width:max(3px,calc(var(--travel-end) - var(--travel-start)));border-radius:999px;background:var(--accent)}.travel-bottom{position:absolute;inset:-5px -1px -5px auto;width:2px;background:var(--text)}.travel-labels{display:grid;grid-template-columns:1fr minmax(120px,1.35fr) 1fr;gap:var(--space-xs);color:var(--muted);font-size:10px}.travel-labels span:nth-child(2){text-align:center}.travel-labels span:last-child{text-align:right}.travel-labels strong{display:block;color:var(--text);font-size:11px}.travel-visual figcaption{margin-top:var(--space-xs)}
.compat-list,.evidence-list{display:grid;gap:var(--space-xs)}.compat-item,.evidence-item{border:1px solid var(--color-rule);border-radius:9px;padding:var(--space-sm)}
.compat-item .relation{font-weight:760;font-size:12px}.compat-item p,.evidence-item p{margin:var(--space-2xs) 0;color:var(--muted);font-size:12px}
.evidence-groups{display:grid;gap:var(--space-xs)}.evidence-group{border:1px solid var(--line);border-radius:10px;background:var(--color-surface-low)}.evidence-group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm);cursor:pointer}.evidence-group>summary span:first-child{display:grid;gap:var(--space-3xs)}.evidence-group>summary small{color:var(--muted);font-weight:400}.evidence-count{flex:none;color:var(--muted);font-size:11px}.evidence-group>.evidence-list{padding:0 var(--space-sm) var(--space-sm)}.evidence-group--conflict>summary{color:var(--warn)}
.evidence-source-guide{display:grid;gap:var(--space-xs);margin:var(--space-sm) 0;padding:var(--space-sm);border:1px solid var(--line);background:var(--color-surface-low)}.evidence-source-guide>div{display:grid;grid-template-columns:minmax(110px,.55fr) minmax(0,1.45fr);gap:var(--space-xs);font-size:11px}.evidence-source-guide span{color:var(--muted)}.evidence-meta{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;margin:var(--space-2xs) 0;color:var(--muted);font-size:12px}.evidence-source-badge{display:inline-flex;padding:var(--space-3xs) var(--space-xs);border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:10px;font-weight:700}.evidence-source-badge--exact{border-color:var(--color-success-rule);background:var(--color-success-tint)}.evidence-source-badge--official{border-color:var(--color-info-rule);background:var(--color-info-tint)}.evidence-source-badge--inferred{border-color:var(--color-warning-rule);background:var(--color-warning-tint)}
.listing-table{min-width:720px}.listing-review-note{display:block;margin-top:var(--space-2xs);color:var(--warn);font-size:10px;font-weight:700;line-height:1.4}.source-links{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.purchase-summary{display:grid;gap:var(--space-2xs);justify-items:start}.purchase-state-badge{display:inline-flex;align-items:center;min-height:22px;padding:1px var(--space-xs);border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:700;line-height:1.35}.purchase-state-badge.is-available{color:var(--ok)}.purchase-state-badge.is-acquisition{color:var(--accent)}.purchase-state-badge.is-aging,.purchase-state-badge.is-stale,.purchase-state-badge.is-sold-only{color:var(--warn)}.purchase-state-badge.is-unregistered,.purchase-state-badge.is-not-applicable,.purchase-state-badge.is-unknown{color:var(--muted)}.purchase-status-summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);margin:0 0 var(--space-sm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.form-grid .span2{grid-column:1/-1}
textarea.control{min-height:105px;resize:vertical}
.output{margin-top:var(--space-sm);padding:var(--space-sm);background:var(--color-deep);border:1px solid var(--line);border-radius:9px;white-space:pre-wrap;word-break:break-word;color:var(--color-ink);min-height:90px}
.footer{padding:var(--space-lg) 0 var(--space-sm);color:var(--muted);font-size:12px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-xs)}
.toast{position:fixed;right:18px;bottom:18px;z-index:40;padding:var(--space-sm) var(--space-md);background:var(--color-control);border:1px solid var(--accent);border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.toast.show{opacity:1;transform:translateY(0)}



.runtime-note{margin:var(--space-md) 0;padding:var(--space-md) var(--space-md);border:1px solid var(--color-warning-rule);background:var(--color-warning-tint);border-radius:12px;color:var(--color-warning-ink);font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:1000;inset-block-start:8px;inset-inline-start:8px;padding:var(--space-sm) var(--space-md);background:var(--text);color:var(--bg);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.no-js .filters,.no-js .hero-actions,.no-js .js-only,.no-js .compare,.js-loading .filters,.js-loading .hero-actions,.js-loading .js-only,.js-loading .compare,.app-failed .filters,.app-failed .hero-actions,.app-failed .js-only,.app-failed .compare{display:none!important}
.no-js .layout,.js-loading .layout,.app-failed .layout{grid-template-columns:1fr}
.no-js .toolbar,.js-loading .toolbar,.app-failed .toolbar{border-radius:var(--radius)}
.no-js .toolbar .muted::after,.js-loading .toolbar .muted::after,.app-failed .toolbar .muted::after{content:"（静的一覧）"}
.no-js .app-runtime-status,.app-ready .app-runtime-status{display:none}
.app-runtime-status{display:block}.app-runtime-status p{margin:.35rem 0 0}.app-runtime-status a{display:inline-flex;align-items:center;min-height:44px;margin-top:.5rem}
.app-failed .app-runtime-status{border-color:var(--danger);color:var(--text)}

html,body{overflow-x:clip}
body{font-size:var(--text-base);background:var(--surface-body);color:var(--color-ink);font-family:var(--font-body)}
h1,h2,h3{font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere;min-width:0}
a,button,.btn,.linkbtn,.preview-nav a,.footer-links a{white-space:nowrap}
button,.btn,.linkbtn,.control{min-height:var(--control-height)}
.btn,.linkbtn{display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn:active,.linkbtn:active{transform:translateY(var(--press-shift))}
.btn:disabled,.linkbtn:disabled,.control:disabled{opacity:.55;cursor:not-allowed}.control:disabled{background:var(--color-surface-low);color:var(--color-muted)}
:focus{outline:none}
:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}
.control{border-width:var(--rule-thin);outline:var(--focus-width) solid transparent;outline-offset:var(--focus-offset);padding-inline-end:var(--space-xl)}
.control:focus-visible{outline-color:var(--color-focus);box-shadow:none}
.num,.kpi strong,table{font-variant-numeric:tabular-nums}
.field label,.sub{font-size:var(--text-xs)}
.guide p,.coverage-card p,.issue p,.filter-note,.runtime-note{font-size:var(--text-sm)}
.modal{z-index:var(--z-modal)}.toast{z-index:var(--z-toast)}
.shell{padding:var(--space-sm)}
.hero{grid-template-columns:minmax(0,1fr);padding:var(--space-lg)}
.hero-actions{justify-content:flex-start}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.coverage-grid,.layout,.detail-grid,.form-grid,.two{grid-template-columns:minmax(0,1fr)}
.filters{position:static}
.form-grid .span2{grid-column:auto}
.toolbar{align-items:flex-start;flex-direction:column}
#compareGrid{display:none}.compare-mobile{display:grid;gap:var(--space-sm);padding:var(--space-sm)}
.content>.table-wrap{display:none}.mobile-cards{display:grid;gap:var(--space-sm);margin-top:var(--space-sm)}
.product-card-specs{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-card,.product-card-top,.product-card-top>div:first-child{min-width:0}.product-card-top>div:first-child{overflow-wrap:anywhere}.product-card-top .selectbox{flex:0 0 auto}
.no-js .mobile-cards{display:grid}.no-js .content>.table-wrap{display:none}
@media (hover:hover) and (pointer:fine){.btn:hover,.linkbtn:hover{transform:translateY(var(--hover-shift))}}
@media (min-width:43.75rem){
  .shell{padding:var(--space-lg)}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-grid,.form-grid,.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .span2{grid-column:1/-1}
  .toolbar{align-items:center;flex-direction:row}.compare-grid{display:grid}.compare-mobile{display:none}
  .content>.table-wrap{display:block}.mobile-cards{display:none}.no-js .mobile-cards{display:none}.no-js .content>.table-wrap{display:block}
}
@media (min-width:68.75rem){
  .hero{grid-template-columns:minmax(0,1fr) auto}.hero-actions{justify-content:flex-end}
  .kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.coverage-grid{grid-template-columns:1.15fr 1fr 1fr}
  .layout{grid-template-columns:19.375rem minmax(0,1fr)}.filters{position:sticky}
}
@media (pointer:coarse){button,.btn,.linkbtn,.control{min-height:var(--touch-height)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:var(--dur-reduced)!important;animation-iteration-count:1!important;transition-duration:var(--dur-reduced)!important;scroll-behavior:auto!important}}

/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Compatibility First (existing project tokens) · enrichment: none · nav: N3 · footer: Ft1
 * N3 knobs: side=left, width=compact, indicator=text-only · H2 knobs: ratio=5/7, proof=selection desk, divider=negative-space
 * contrast: pass (40–41) · slop: pass (58/58) · mobile: pass (320/375/414/768) · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
html,
body {
  overflow-x: clip;
}

.design-preview--product-design-integrated {
  --section-tint-soft: color-mix(in oklch, var(--color-input) 72%, var(--color-paper));
  --section-tint: color-mix(in oklch, var(--color-accent) 4%, var(--color-input));
  --section-rule: color-mix(in oklch, var(--color-accent) 42%, var(--color-rule));
  --column-boundary: oklch(64% 0.04 120);
  --control-boundary: oklch(58% 0.03 150);
  --filter-column-bg: color-mix(in oklch, var(--color-paper-2) 76%, var(--color-paper));
  --table-group-head-height: 1.75rem;
  --product-table-min-width: 49rem;
  --product-select-column-width: 2.75rem;
  --product-name-column-width: 11rem;
  --product-standard-column-width: 7.875rem;
  --product-type-column-width: 4.125rem;
  --product-force-column-width: 4.125rem;
  --product-actuation-column-width: 3.75rem;
  --product-travel-column-width: 4.25rem;
  --product-lube-column-width: 2.75rem;
  --product-stock-column-width: 6.75rem;
  --product-status-column-width: 5.25rem;
  --product-detail-column-width: 4.375rem;
}

html.app-ready body.design-preview--product-design-integrated.show-detail-columns {
  --product-table-min-width: 57rem;
}

.design-preview--product-design-integrated .shell {
  max-width: 94rem;
  padding-inline: clamp(var(--space-md), 4vw, var(--space-2xl));
}

.design-preview--product-design-integrated .preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--space-2xl);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .preview-wordmark {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}

.design-preview--product-design-integrated .preview-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.design-preview--product-design-integrated .preview-nav-links a:not(.preview-nav-action) {
  display: none;
}

.design-preview--product-design-integrated .preview-nav a {
  color: var(--color-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.design-preview--product-design-integrated .preview-nav .preview-wordmark,
.design-preview--product-design-integrated .preview-nav .preview-nav-action {
  color: var(--color-ink);
}

.design-preview--product-design-integrated .preview-nav-action {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--space-2xs);
}

.design-preview--product-design-integrated .decision-journey {
  display: grid;
  gap: var(--space-2xl);
  padding-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .journey-intro {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  min-width: 0;
}

.design-preview--product-design-integrated .journey-kicker {
  display: none;
}

.design-preview--product-design-integrated .decision-journey h1 {
  max-width: 9ch;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.design-preview--product-design-integrated .journey-lede {
  max-width: 35rem;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.75;
}

.design-preview--product-design-integrated .journey-help {
  justify-self: start;
  margin-block-start: auto;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--space-2xs);
  white-space: nowrap;
}

.design-preview--product-design-integrated .journey-steps {
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
}

.design-preview--product-design-integrated .journey-step {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  min-width: 0;
}

.design-preview--product-design-integrated .journey-standard {
  padding-block-end: var(--space-xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .journey-step-head {
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .journey-standard .journey-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.design-preview--product-design-integrated .journey-standard-status {
  margin-block-start: var(--space-2xs);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

.design-preview--product-design-integrated .journey-standard-clear {
  flex: 0 0 auto;
  min-height: var(--control-height);
  padding: 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font: 600 var(--text-xs)/1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

.design-preview--product-design-integrated .journey-standard-clear[hidden] {
  display: none;
}

.design-preview--product-design-integrated .standard-family-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
  min-width: 0;
}

.design-preview--product-design-integrated .standard-family {
  min-width: 0;
  border-block: var(--rule-thin) solid var(--color-rule);
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .standard-family[open] {
  grid-column: 1 / -1;
}

.design-preview--product-design-integrated .standard-family summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.design-preview--product-design-integrated .standard-family summary::-webkit-details-marker {
  display: none;
}

.design-preview--product-design-integrated .standard-family summary::after {
  min-width: 1em;
  color: var(--color-accent);
  content: "+";
  font: 700 var(--text-base)/1 var(--font-mono);
  text-align: center;
}

.design-preview--product-design-integrated .standard-family[open] summary::after {
  content: "−";
}

.design-preview--product-design-integrated .standard-family.is-selected {
  border-color: var(--color-accent);
  background: var(--color-focus-tint);
}

.design-preview--product-design-integrated .standard-family.is-unavailable:not(.is-selected) summary {
  color: var(--color-muted);
  opacity: 0.68;
}

.design-preview--product-design-integrated .standard-family-label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  font-weight: 700;
}

.design-preview--product-design-integrated .standard-family-meta {
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.design-preview--product-design-integrated .standard-family-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.design-preview--product-design-integrated .journey-step h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.design-preview--product-design-integrated .journey-step p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.design-preview--product-design-integrated .journey-choices {
  display: grid;
  gap: 0;
  min-width: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .path-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-width: 0;
  min-height: var(--control-height);
  padding: var(--space-sm) var(--space-xs);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font: 600 var(--text-sm)/1.35 var(--font-body);
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.design-preview--product-design-integrated .path-choice-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .path-choice-count {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.design-preview--product-design-integrated .path-choice::after {
  width: var(--space-xs);
  height: var(--space-xs);
  flex: 0 0 auto;
  border: var(--rule-thin) solid var(--color-accent);
  background: transparent;
  content: "";
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.design-preview--product-design-integrated .path-choice:active {
  transform: translateY(var(--press-shift));
}

.design-preview--product-design-integrated .path-choice[aria-pressed="true"] {
  background: var(--color-focus-tint);
  color: var(--color-ink);
}

.design-preview--product-design-integrated .path-choice[aria-pressed="true"]::after {
  background: var(--color-accent);
  transform: rotate(45deg);
}

.design-preview--product-design-integrated .path-choice:disabled,
.design-preview--product-design-integrated .journey-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.design-preview--product-design-integrated .path-choice:focus-visible,
.design-preview--product-design-integrated .standard-family summary:focus-visible,
.design-preview--product-design-integrated .journey-standard-clear:focus-visible,
.design-preview--product-design-integrated .journey-submit:focus-visible,
.design-preview--product-design-integrated .preview-nav a:focus-visible,
.design-preview--product-design-integrated .journey-help:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.design-preview--product-design-integrated .journey-compare {
  padding: var(--space-lg);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  background: var(--section-tint);
  color: var(--color-ink);
}

.design-preview--product-design-integrated .journey-finish {
  display: grid;
  align-items: start;
  gap: var(--space-md);
}

.design-preview--product-design-integrated .journey-result {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.design-preview--product-design-integrated .journey-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  justify-self: stretch;
  min-height: var(--control-height);
  padding: var(--space-sm) 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-accent);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font: 700 var(--text-sm)/1.2 var(--font-body);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.design-preview--product-design-integrated .journey-submit::after {
  content: "→";
  font-family: var(--font-mono);
  font-weight: 500;
}

.design-preview--product-design-integrated .journey-submit:active {
  transform: translateY(var(--press-shift));
}

.design-preview--product-design-integrated .hero {
  margin-top: var(--space-xl);
  padding: var(--space-lg) 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.design-preview--product-design-integrated .hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
}

.design-preview--product-design-integrated .hero p {
  max-width: 54rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .hero .eyebrow {
  display: none;
}

.design-preview--product-design-integrated .hero-actions {
  align-items: center;
  max-width: none;
}

.design-preview--product-design-integrated .hero-tools {
  justify-self: end;
}

.design-preview--product-design-integrated .hero-tools > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-height);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  color: var(--color-accent);
}

.design-preview--product-design-integrated .hero-tools[open] {
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
}

.design-preview--product-design-integrated .public-correction-action {
  display: grid;
  gap: .35rem;
  margin-block-start: .75rem;
  padding-block-end: .75rem;
  border-block-end: 1px solid var(--line);
}

.design-preview--product-design-integrated .public-correction-action .btn {
  justify-self: start;
}

.design-preview--product-design-integrated #dataActionStatus[data-error="true"],
.design-preview--product-design-integrated #corrFormStatus[data-error="true"] {
  color: var(--danger);
}

.design-preview--product-design-integrated .table-view-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem 1rem;
  padding: .45rem 0;
  color: var(--muted);
  font-size: .75rem;
}

html.app-ready body.design-preview--product-design-integrated:not(.show-detail-columns) :is(.content > .table-wrap,.product-table-sticky-shell) .table-group-row,
html.app-ready body.design-preview--product-design-integrated:not(.show-detail-columns) :is(.content > .table-wrap,.product-table-sticky-shell) :is(th,td,col):nth-child(8),
html.app-ready body.design-preview--product-design-integrated:not(.show-detail-columns) :is(.content > .table-wrap,.product-table-sticky-shell) :is(th,td,col):nth-child(10) {
  display: none;
}

@media (max-width: 43.75rem) {
  .design-preview--product-design-integrated .table-view-options {
    display: none;
  }
}

.design-preview--product-design-integrated .hero-action-ledger {
  display: flex;
  align-content: start;
  justify-content: flex-start;
  gap: var(--space-sm) var(--space-lg);
}

.design-preview--product-design-integrated .hero-action-ledger .btn {
  white-space: nowrap;
}

.design-preview--product-design-integrated .hero-action-ledger .hero-action-current {
  border-block-end-color: var(--color-accent);
}

.design-preview--product-design-integrated .hero-action-ledger .hero-action-correction {
  color: var(--color-accent);
}

.design-preview--product-design-integrated .hero-action-ledger .hero-action-all {
  color: var(--color-muted);
}

.design-preview--product-design-integrated .hero .hero-action-note {
  flex: 1 0 100%;
  max-width: 32rem;
  margin: 0;
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-thin) solid var(--color-rule-soft);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.design-preview--product-design-integrated .btn {
  min-height: var(--control-height);
  padding-inline: 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
}

.design-preview--product-design-integrated .btn.primary {
  padding-inline: var(--space-md);
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

.design-preview--product-design-integrated .btn.ghost {
  background: transparent;
}

.design-preview--product-design-integrated .btn.danger {
  border-color: var(--color-danger-rule);
  color: var(--color-danger-ink);
}

.design-preview--product-design-integrated .meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--space-lg);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .pill {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-xs) 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .dot {
  width: var(--space-xs);
  height: var(--space-xs);
  flex: 0 0 auto;
  border-radius: 0;
}

.design-preview--product-design-integrated .kpis {
  gap: 0;
  margin-block: 0 var(--space-2xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .kpi {
  padding: var(--space-md);
  border: 0;
  border-inline-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated .kpi:last-child {
  border-inline-end: 0;
}

.design-preview--product-design-integrated .kpi strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.design-preview--product-design-integrated .section-title {
  align-items: start;
  margin: var(--space-2xl) 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--rule-thin) solid var(--section-rule);
  border-inline-start: var(--focus-width) solid var(--color-accent);
  background: var(--section-tint);
}

.design-preview--product-design-integrated .coverage-grid,
.design-preview--product-design-integrated .guide-grid {
  grid-template-columns: minmax(0, 1fr);
}

.design-preview--product-design-integrated .coverage-card {
  padding: var(--space-lg) var(--space-md);
  border: 0;
  border-block-start: var(--rule-thin) solid var(--section-rule);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .coverage-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: -0.02em;
}

.design-preview--product-design-integrated .coverage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-lg);
  margin-block-start: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .coverage-pill {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-xs) 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .coverage-pill strong {
  color: var(--color-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.design-preview--product-design-integrated .guide {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border: 0;
  border-block-start: var(--rule-thin) solid var(--section-rule);
  border-block-end: var(--rule-thin) solid var(--color-rule-soft);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  border-radius: 0;
  background: var(--section-tint-soft);
  box-shadow: none;
}

.design-preview--product-design-integrated .guide h3,
.design-preview--product-design-integrated .guide p {
  margin: 0;
}

.design-preview--product-design-integrated .guide h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: -0.02em;
}

.design-preview--product-design-integrated .guide h3 a,
.design-preview--product-design-integrated .product-name {
  overflow-wrap: anywhere;
  white-space: normal;
}

.design-preview--product-design-integrated .guide h3 a {
  color: var(--color-ink);
}

.design-preview--product-design-integrated .guide .small {
  order: -1;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.design-preview--product-design-integrated .guide .btn,
.design-preview--product-design-integrated .guide a {
  justify-self: start;
}

.design-preview--product-design-integrated .filters,
.design-preview--product-design-integrated .toolbar,
.design-preview--product-design-integrated .table-wrap,
.design-preview--product-design-integrated .compare,
.design-preview--product-design-integrated .issue-panel {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.design-preview--product-design-integrated .filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-md);
  top: var(--space-sm);
  padding: var(--space-md);
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-ink);
  border-radius: 0;
  background: var(--filter-column-bg);
}

.design-preview--product-design-integrated .filters > h2,
.design-preview--product-design-integrated .filters > .filter-note,
.design-preview--product-design-integrated .filters > .two,
.design-preview--product-design-integrated .filters > .field:has(#standard),
.design-preview--product-design-integrated .filters > .field:has(#q),
.design-preview--product-design-integrated .filters > .field:has(#brand),
.design-preview--product-design-integrated .filters > .field:has(#sort),
.design-preview--product-design-integrated .filters > .advanced-filters,
.design-preview--product-design-integrated .filters > .active-guide,
.design-preview--product-design-integrated .filters > .filter-summary,
.design-preview--product-design-integrated .filters > .filter-actions {
  grid-column: 1 / -1;
}

.design-preview--product-design-integrated .advanced-filters {
  margin-block-start: var(--space-xs);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .advanced-filters > summary {
  min-height: 44px;
  color: var(--color-ink);
}

.design-preview--product-design-integrated .advanced-filter-fields {
  display: grid;
  gap: 0;
  padding-block-end: var(--space-xs);
}

.design-preview--product-design-integrated .result-progress {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}

.design-preview--product-design-integrated .filters > .two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-md);
}

.design-preview--product-design-integrated .filters h2 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: -0.02em;
}

.design-preview--product-design-integrated .filter-note,
.design-preview--product-design-integrated .active-guide {
  padding: var(--space-sm) 0;
  border: 0;
  border-block: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
}

.design-preview--product-design-integrated .filter-summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-xs) 0;
  border-block: var(--rule-thin) solid var(--section-rule);
  background: var(--filter-column-bg);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .filter-summary[hidden] {
  display: flex;
}

.design-preview--product-design-integrated .filter-summary strong {
  flex: 0 0 auto;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: inherit;
}

.design-preview--product-design-integrated .filter-summary-empty {
  min-width: 0;
  color: var(--color-muted);
}

@media (min-width: 40rem) {
  .design-preview--product-design-integrated .filter-summary {
    min-block-size: 3.875rem;
  }
}

.design-preview--product-design-integrated .search-suggestions {
  max-block-size: 16rem;
  margin-block-start: var(--space-2xs);
  overflow-y: auto;
  border: var(--rule-thin) solid var(--section-rule);
  background: var(--color-paper);
}

.design-preview--product-design-integrated .search-suggestions[hidden] {
  display: none;
}

.design-preview--product-design-integrated .search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-xs);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.design-preview--product-design-integrated .search-suggestion:last-child {
  border-block-end: 0;
}

.design-preview--product-design-integrated .search-suggestion:hover,
.design-preview--product-design-integrated .search-suggestion:focus-visible,
.design-preview--product-design-integrated .search-suggestion[aria-selected="true"] {
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .search-suggestion span,
.design-preview--product-design-integrated .search-suggestion strong,
.design-preview--product-design-integrated .search-suggestion small {
  display: block;
  min-width: 0;
}

.design-preview--product-design-integrated .search-suggestion small,
.design-preview--product-design-integrated .search-hint {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .search-suggestion em {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-style: normal;
  white-space: nowrap;
}

.design-preview--product-design-integrated .search-hint {
  margin: var(--space-2xs) 0 0;
  line-height: 1.5;
}

.design-preview--product-design-integrated .search-hint[hidden] {
  display: none;
}

.design-preview--product-design-integrated .search-match-note {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .search-result-target {
  box-shadow: inset var(--rule-medium) 0 0 var(--color-accent);
}

.design-preview--product-design-integrated .filter-summary-chip-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.design-preview--product-design-integrated .filter-summary-chips {
  display: flex;
  gap: var(--space-2xs);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.design-preview--product-design-integrated .filter-summary-chips::-webkit-scrollbar {
  display: none;
}

.design-preview--product-design-integrated .filter-summary-overflow-cue {
  position: absolute;
  inset-block: 0;
  display: grid;
  width: 2.75rem;
  box-sizing: border-box;
  padding: 0 var(--space-2xs);
  border: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  z-index: 1;
}

.design-preview--product-design-integrated .filter-summary-overflow-cue[hidden] {
  display: none;
}

.design-preview--product-design-integrated .filter-summary-overflow-cue--start {
  inset-inline-start: 0;
  place-items: center start;
  background: linear-gradient(90deg, var(--filter-column-bg) 32%, transparent);
}

.design-preview--product-design-integrated .filter-summary-overflow-cue--end {
  inset-inline-end: 0;
  place-items: center end;
  background: linear-gradient(90deg, transparent, var(--filter-column-bg) 68%);
}

.design-preview--product-design-integrated .filter-summary-overflow-cue:hover,
.design-preview--product-design-integrated .filter-summary-overflow-cue:focus-visible {
  color: var(--color-ink);
}

.design-preview--product-design-integrated .filter-summary-chip {
  flex: 0 0 auto;
  min-height: 1.75rem;
  padding-inline: var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: var(--section-tint-soft);
  color: var(--color-accent);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.design-preview--product-design-integrated .filter-summary-chip::after {
  content: " ×";
  color: var(--color-muted);
}

.design-preview--product-design-integrated .filter-summary-chip:hover,
.design-preview--product-design-integrated .filter-summary-chip:focus-visible {
  border-color: var(--color-accent);
}

.design-preview--product-design-integrated .filter-summary-clear {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--color-accent);
  white-space: nowrap;
}

.design-preview--product-design-integrated .empty-recovery {
  margin-block: var(--space-lg);
  padding: var(--space-lg);
  border-block: var(--rule-thin) solid var(--section-rule);
  background: var(--section-tint-soft);
  color: var(--color-ink);
  text-align: start;
}

.design-preview--product-design-integrated .empty-recovery[hidden] {
  display: none;
}

.design-preview--product-design-integrated .empty-recovery > strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.design-preview--product-design-integrated .empty-recovery > p {
  margin: var(--space-xs) 0 var(--space-md);
  color: var(--color-muted);
}

.design-preview--product-design-integrated .empty-recovery-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.design-preview--product-design-integrated .empty-recovery-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--control-height);
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.design-preview--product-design-integrated .empty-recovery-option:hover,
.design-preview--product-design-integrated .empty-recovery-option:focus-visible {
  border-color: var(--color-accent);
}

.design-preview--product-design-integrated .empty-recovery-option strong {
  flex: 0 0 auto;
  color: var(--color-accent);
  white-space: nowrap;
}

.design-preview--product-design-integrated .empty-recovery-reset {
  margin-block-start: var(--space-md);
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .search-suggestion {
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .empty-recovery {
    margin-block: var(--space-md);
    padding: var(--space-md);
  }

  .design-preview--product-design-integrated .empty-recovery-actions {
    grid-template-columns: 1fr;
  }

  .design-preview--product-design-integrated .empty-recovery-option,
  .design-preview--product-design-integrated .empty-recovery-reset {
    min-height: var(--touch-height);
  }
}

@media (max-width: 59.99rem) {
  .design-preview--product-design-integrated .filter-summary-chip,
  .design-preview--product-design-integrated .filter-summary-clear {
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .filter-summary-clear {
    min-inline-size: var(--touch-height);
  }
}

.design-preview--product-design-integrated .field {
  margin: 0;
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .field label {
  margin-block-end: var(--space-xs);
  color: var(--color-muted);
  font-size: max(var(--text-xs), 12px);
}

.design-preview--product-design-integrated .control {
  padding-inline: 0 var(--space-xl);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--control-boundary);
  border-radius: 0;
  background-color: transparent;
}

.design-preview--product-design-integrated .control:focus-visible {
  border-color: var(--color-ink);
  outline-color: var(--color-focus);
}

.design-preview--product-design-integrated .filter-actions {
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.design-preview--product-design-integrated .filter-actions .btn {
  flex: 0 1 auto;
}

.design-preview--product-design-integrated .toolbar {
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-block: var(--rule-thin) solid var(--color-rule);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  border-radius: 0;
  background: var(--section-tint);
}

.design-preview--product-design-integrated .issue-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block-end: var(--space-sm);
}

.design-preview--product-design-integrated .issue-panel-head h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .issue-panel-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .issue-toggle {
  color: var(--color-accent);
  white-space: nowrap;
}

.design-preview--product-design-integrated .result-count {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.design-preview--product-design-integrated .compare-add-mode {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-inline-start: var(--focus-width) solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-paper));
}

.design-preview--product-design-integrated .compare-add-mode[hidden] {
  display: none;
}

.design-preview--product-design-integrated #addCompareCandidate[hidden] {
  display: none;
}

.design-preview--product-design-integrated .compare-add-mode strong,
.design-preview--product-design-integrated .compare-add-mode span {
  display: block;
}

.design-preview--product-design-integrated .compare-add-mode span {
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .compare-add-mode .linkbtn {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--color-accent);
}

.design-preview--product-design-integrated .compare-add-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-inline-start: auto;
}

.design-preview--product-design-integrated .compare-same-standard {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-height);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.design-preview--product-design-integrated .compare-same-standard input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.design-preview--product-design-integrated .compare-standard-scope {
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.design-preview--product-design-integrated .compare-standard-scope > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-preview--product-design-integrated .compare-standard-details summary {
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare-standard-details ul {
  margin: var(--space-2xs) 0 0;
  padding-inline-start: 1.1rem;
}

.design-preview--product-design-integrated .compare-standard-details li + li {
  margin-block-start: var(--space-2xs);
}

.design-preview--product-design-integrated .compare-add-mode .compare-add-actions .linkbtn {
  margin-inline-start: 0;
}

.design-preview--product-design-integrated.compare-add-mode-active .compare-toggle:not(.is-selected),
.design-preview--product-design-integrated.compare-add-mode-active .selectbox[data-select]:not(:checked) {
  outline-color: var(--color-accent);
}

.design-preview--product-design-integrated .compare-standard-mark {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-block-start: var(--space-2xs);
  border-block-end: var(--rule-thin) solid currentColor;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
}

.design-preview--product-design-integrated .compare-standard-mark--same {
  color: var(--color-accent);
}

.design-preview--product-design-integrated .compare-standard-mark--different {
  color: var(--color-danger);
}

.design-preview--product-design-integrated.compare-add-mode-active tr.compare-candidate-same {
  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
}

.design-preview--product-design-integrated.compare-add-mode-active .product-card.compare-candidate-same {
  border-inline-start: var(--focus-width) solid var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
}

.design-preview--product-design-integrated .result-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--section-tint-soft);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .result-context span + span::before {
  content: "/";
  margin-inline-end: var(--space-md);
  color: var(--color-rule);
}

.design-preview--product-design-integrated .result-reset {
  margin-inline-start: auto;
  color: var(--color-accent);
}

.design-preview--product-design-integrated .mobile-results-shortcut {
  display: block;
  width: 100%;
  min-height: var(--touch-height);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: 0;
  background: transparent;
  color: var(--color-accent);
  font-weight: 700;
}

.design-preview--product-design-integrated .mobile-filter-toggle {
  display: none;
}

.design-preview--product-design-integrated .empty {
  padding-block: var(--space-xl);
}

.design-preview--product-design-integrated .empty p {
  max-width: var(--measure-modal);
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
}

.design-preview--product-design-integrated .empty-reset {
  color: var(--color-accent);
}

.design-preview--product-design-integrated .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated table {
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated th {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.design-preview--product-design-integrated .table-group-row th {
  top: 0;
  height: var(--table-group-head-height);
  padding: var(--space-2xs) var(--space-xs);
  border-block-end-color: color-mix(in oklch, var(--color-accent) 52%, var(--color-rule));
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}

.design-preview--product-design-integrated .table-group-row th + th,
.design-preview--product-design-integrated .table-column-row th:nth-child(3),
.design-preview--product-design-integrated .table-column-row th:nth-child(5),
.design-preview--product-design-integrated .table-column-row th:nth-child(9),
.design-preview--product-design-integrated .table-column-row th:nth-child(11),
.design-preview--product-design-integrated .table-wrap td:nth-child(3),
.design-preview--product-design-integrated .table-wrap td:nth-child(5),
.design-preview--product-design-integrated .table-wrap td:nth-child(9),
.design-preview--product-design-integrated .table-wrap td:nth-child(11) {
  border-inline-start: var(--rule-thin) solid var(--section-rule);
}

.design-preview--product-design-integrated .table-column-row th {
  top: var(--table-group-head-height);
  padding: var(--space-xs);
}

.design-preview--product-design-integrated .table-wrap td {
  padding: 0.4375rem var(--space-xs);
  line-height: 1.4;
}

.design-preview--product-design-integrated tbody tr {
  background: var(--color-paper);
}

.design-preview--product-design-integrated tbody tr:nth-child(even) {
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .badge {
  padding: var(--space-2xs) 0;
  border: 0;
  border-block-end: var(--rule-thin) solid currentColor;
  border-radius: 0;
  background: transparent;
  font-size: max(var(--text-xs), 12px);
  font-weight: 500;
}

.design-preview--product-design-integrated .badge.ok,
.design-preview--product-design-integrated .badge.warn,
.design-preview--product-design-integrated .badge.danger,
.design-preview--product-design-integrated .badge.info {
  background: transparent;
}

.design-preview--product-design-integrated .badge.warn {
  color: var(--color-warning-ink);
}

.design-preview--product-design-integrated .linkbtn {
  padding-inline: 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
}

.design-preview--product-design-integrated .mobile-cards {
  gap: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .product-card {
  display: grid;
  padding: var(--space-lg) var(--space-sm);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated .product-card:nth-child(even) {
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .product-card-top {
  order: 0;
  align-items: flex-start;
}

.design-preview--product-design-integrated .product-card > .sub {
  order: 1;
  margin-block-start: var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

.design-preview--product-design-integrated .product-card > .sub::before {
  content: "規格 / ";
  color: var(--color-muted);
  font-weight: 500;
}

.design-preview--product-design-integrated .product-card .product-name {
  font-size: var(--text-base);
  line-height: 1.45;
}

.design-preview--product-design-integrated .keyboard-compatibility-note {
  display: block;
  max-width: 34rem;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.design-preview--product-design-integrated .keyboard-compatibility-note[data-relation="Conditional"] {
  padding-inline-start: var(--space-xs);
  border-inline-start: var(--rule-medium) solid var(--color-warning-rule);
  color: var(--color-warning-ink);
}

.design-preview--product-design-integrated a.product-name {
  text-decoration-color: var(--color-rule);
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--space-2xs);
}

.design-preview--product-design-integrated .product-card .sub {
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .product-card-meta {
  order: 2;
}

.design-preview--product-design-integrated .product-card-specs {
  order: 3;
  gap: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .product-card-spec {
  padding: var(--space-xs) 0;
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated .product-card-spec span {
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .product-card-spec strong {
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .product-card-spec + .product-card-spec {
  padding-inline-start: var(--space-xs);
  border-inline-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.design-preview--product-design-integrated .compare-toggle .selectbox {
  flex: 0 0 auto;
  margin: 0;
}

.design-preview--product-design-integrated .compare-toggle.is-selected {
  color: var(--color-accent);
  font-weight: 700;
}

.design-preview--product-design-integrated .product-card-actions {
  order: 4;
  align-items: center;
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-thin) solid var(--color-rule-soft);
}

.design-preview--product-design-integrated .product-card-actions > div {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.design-preview--product-design-integrated .product-card-stock {
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .product-card-stock::before {
  content: "販売 / ";
  color: var(--color-muted);
  font-weight: 500;
}

.design-preview--product-design-integrated .listing-direct-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  margin-inline-start: var(--space-xs);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: var(--space-2xs);
}

.design-preview--product-design-integrated button.listing-direct-link {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.design-preview--product-design-integrated .purchase-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: var(--space-2xs) var(--space-xs);
}

.design-preview--product-design-integrated .purchase-summary .purchase-state-badge {
  grid-column: 1 / -1;
}

.design-preview--product-design-integrated .product-card-purchase {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  min-width: 0;
}

.design-preview--product-design-integrated .purchase-state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-inline: var(--space-xs);
  border: var(--rule-thin) solid currentColor;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.design-preview--product-design-integrated .purchase-state-badge.is-available {
  border-color: var(--color-success-rule);
  background: color-mix(in srgb, var(--color-success) 7%, var(--color-paper));
  color: var(--color-success);
}

.design-preview--product-design-integrated .purchase-state-badge.is-acquisition {
  color: var(--color-accent);
  border-color: var(--color-info-rule);
  background: var(--color-info-tint-soft);
}

.design-preview--product-design-integrated .purchase-state-badge.is-aging,
.design-preview--product-design-integrated .purchase-state-badge.is-stale,
.design-preview--product-design-integrated .purchase-state-badge.is-sold-only {
  border-color: var(--color-warning-rule);
  background: color-mix(in srgb, var(--color-warning) 7%, var(--color-paper));
  color: var(--color-warning-ink);
}

.design-preview--product-design-integrated .purchase-state-badge.is-unregistered,
.design-preview--product-design-integrated .purchase-state-badge.is-not-applicable,
.design-preview--product-design-integrated .purchase-state-badge.is-unknown {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
}

.design-preview--product-design-integrated .purchase-status-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-block-end: var(--space-md);
  padding: var(--space-sm);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  background: var(--section-tint-soft);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .purchase-decision-text {
  display: block;
  margin-block-start: var(--space-2xs);
}

.design-preview--product-design-integrated .compare-stock-value {
  display: block;
}

.design-preview--product-design-integrated .compare-stock-value + .listing-direct-link {
  margin-block-start: var(--space-2xs);
  margin-inline-start: 0;
}

.design-preview--product-design-integrated .product-page-link {
  color: var(--color-muted);
}

.design-preview--product-design-integrated .product-detail-action {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare {
  margin-block-start: var(--space-2xl);
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-ink);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.design-preview--product-design-integrated .compare-warning {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-warning-rule);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-warning) 4%, var(--color-paper));
}

.design-preview--product-design-integrated .compare-warning-kicker {
  color: var(--color-warning);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare-warning > span:last-child {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .compare-insights {
  padding: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.design-preview--product-design-integrated .compare-insights[hidden] {
  display: none;
}

.design-preview--product-design-integrated .compare-insights-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-block-end: var(--space-sm);
}

.design-preview--product-design-integrated .compare-insights-head h3,
.design-preview--product-design-integrated .compare-insights-head p {
  margin: 0;
}

.design-preview--product-design-integrated .compare-insights-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.design-preview--product-design-integrated .compare-insights-head p {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .compare-insight-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
}

.design-preview--product-design-integrated .compare-insight {
  appearance: none;
  position: relative;
  min-width: 0;
  width: 100%;
  padding: var(--space-sm) 0 0;
  border: 0;
  border-block-start: var(--focus-width) solid var(--section-rule);
  background: transparent;
  color: inherit;
  text-align: start;
  white-space: normal;
  font: inherit;
  cursor: pointer;
}

.design-preview--product-design-integrated .compare-insight[data-tone="warning"] {
  border-block-start-color: var(--color-warning-rule);
}

.design-preview--product-design-integrated .compare-insight[data-tone="success"] {
  border-block-start-color: var(--color-success-rule);
}

.design-preview--product-design-integrated .compare-insight-label {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare-insight-value {
  display: block;
  min-width: 0;
}

.design-preview--product-design-integrated .compare-insight strong {
  margin-block-start: var(--space-2xs);
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .compare-insight strong,
.design-preview--product-design-integrated .compare-insight span {
  display: block;
}

.design-preview--product-design-integrated .compare-insight strong {
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.design-preview--product-design-integrated .compare-insight-detail {
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.design-preview--product-design-integrated .compare-insight:hover {
  border-block-start-color: var(--color-accent);
}

.design-preview--product-design-integrated .compare-insight::after {
  content: "→";
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: 0;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare-insight:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.design-preview--product-design-integrated .compare-grid > .is-insight-target {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-paper));
}

.design-preview--product-design-integrated .compare-grid > .label.is-insight-target {
  box-shadow: inset var(--focus-width) 0 var(--color-accent);
}

@media (max-width: 59.99rem) {
  .design-preview--product-design-integrated .compare-insight-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .compare-actions > .muted {
    display: none;
  }

  .design-preview--product-design-integrated .compare-insights {
    padding: var(--space-sm);
  }

  .design-preview--product-design-integrated .compare-insight-list {
    gap: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 22rem) {
  .design-preview--product-design-integrated .compare-insights-head {
    margin-block-end: var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-insights-head h3 {
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .compare-insights-head p {
    display: none;
  }

  .design-preview--product-design-integrated .compare-insight-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .design-preview--product-design-integrated .compare-insight {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-2xs);
    border-block-start-width: var(--rule-thin);
  }

  .design-preview--product-design-integrated .compare-insight-value {
    margin: 0;
  }

  .design-preview--product-design-integrated .compare-insight strong {
    margin-block-start: 0;
  }
}

.design-preview--product-design-integrated .compare-head {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  background: var(--section-tint);
}

.design-preview--product-design-integrated .compare-action-status {
  margin: 0;
  padding: .55rem .75rem;
  border-inline-start: 3px solid var(--green);
  background: color-mix(in srgb, var(--green) 7%, var(--paper));
  color: var(--ink);
}

.design-preview--product-design-integrated .compare-action-status[data-error="true"] {
  border-inline-start-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--paper));
}

.design-preview--product-design-integrated .compare-actions {
  gap: var(--space-md);
}

.design-preview--product-design-integrated .compare-share-menu {
  position: relative;
}

.design-preview--product-design-integrated .compare-share-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-height);
  padding-inline: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.design-preview--product-design-integrated .compare-share-menu > summary::-webkit-details-marker {
  display: none;
}

.design-preview--product-design-integrated .compare-share-menu > summary::after {
  content: "＋";
  margin-inline-start: var(--space-xs);
}

.design-preview--product-design-integrated .compare-share-menu[open] > summary::after {
  content: "−";
}

.design-preview--product-design-integrated .compare-share-actions {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-start: calc(100% + var(--space-2xs));
  inset-inline-end: 0;
  display: grid;
  min-width: 10rem;
  padding: var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  box-shadow: 0 var(--space-xs) var(--space-lg) color-mix(in srgb, var(--color-deep) 18%, transparent);
}

.design-preview--product-design-integrated .compare-share-actions .linkbtn {
  justify-content: flex-start;
  border: 0;
}

.design-preview--product-design-integrated .compare-head h2,
.design-preview--product-design-integrated .issue-panel h2 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: -0.02em;
}

.design-preview--product-design-integrated .shared-compare-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
}

.design-preview--product-design-integrated .shared-compare-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-inline-start: var(--focus-width) solid var(--color-accent);
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .shared-compare-recovery[hidden] {
  display: none;
}

.design-preview--product-design-integrated .shared-compare-recovery strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .shared-compare-recovery p {
  margin: var(--space-3xs) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.design-preview--product-design-integrated .shared-compare-recovery-actions {
  display: flex;
  gap: var(--space-sm);
}

.design-preview--product-design-integrated .shared-compare-recovery-actions .linkbtn {
  min-height: 2.25rem;
  white-space: nowrap;
}

.design-preview--product-design-integrated .shared-compare-context[hidden] {
  display: none;
}

.design-preview--product-design-integrated .shared-compare-context strong {
  color: var(--color-accent);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .shared-compare-context p {
  margin: var(--space-3xs) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.design-preview--product-design-integrated .shared-compare-context .shared-compare-warning {
  color: var(--color-danger);
  font-weight: 600;
}

.design-preview--product-design-integrated .shared-compare-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.design-preview--product-design-integrated .shared-compare-actions .linkbtn {
  min-height: 2.25rem;
  white-space: nowrap;
}

.design-preview--product-design-integrated .compare-mobile {
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}

.design-preview--product-design-integrated .compare-mobile-card {
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.design-preview--product-design-integrated .compare-mobile-card h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--space-sm) 0;
  background: transparent;
}

.design-preview--product-design-integrated .compare-mobile-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.design-preview--product-design-integrated .compare-product-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.design-preview--product-design-integrated .compare-product-name {
  display: block;
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .compare-product-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: auto;
}

.design-preview--product-design-integrated .compare-product-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-accent);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.design-preview--product-design-integrated .compare-product-remove:hover {
  border-color: var(--color-accent);
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .compare-product-remove:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.design-preview--product-design-integrated .compare-view {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-thin) solid var(--color-rule-soft);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.25;
}

.design-preview--product-design-integrated .compare-view-products {
  min-width: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .compare-view-toggle {
  min-height: 2rem;
  padding-block: 0;
  margin-inline-start: var(--space-md);
  color: var(--color-accent);
}

.design-preview--product-design-integrated .compare-grid > .is-different {
  background: var(--color-paper);
}

.design-preview--product-design-integrated .compare-grid > .label.is-different {
  border-inline-start: var(--focus-width) solid var(--color-accent);
  color: var(--color-ink);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare-grid > .is-shared {
  background: oklch(0.92 0.008 145);
  color: color-mix(in srgb, var(--color-muted) 82%, var(--color-paper));
}

.design-preview--product-design-integrated .compare-grid > .is-shared-start {
  border-block-start: 3px solid var(--color-rule);
}

.design-preview--product-design-integrated .compare-grid > .is-unknown,
.design-preview--product-design-integrated .compare-mobile-row .is-unknown {
  color: var(--color-muted);
  text-decoration: underline dotted var(--color-rule);
  text-underline-offset: var(--space-2xs);
}

.design-preview--product-design-integrated .compare-grid > .is-shared-hidden,
.design-preview--product-design-integrated .compare-grid > .is-slot-empty,
.design-preview--product-design-integrated .compare-mobile-row.is-shared-hidden {
  display: none;
}

.design-preview--product-design-integrated .compare-mobile-row.is-different {
  border-inline-start: var(--focus-width) solid var(--color-accent);
  background: var(--color-paper-2);
}

.design-preview--product-design-integrated .compare-mobile-row.is-different > span:first-child {
  color: var(--color-ink);
  font-weight: 700;
}

.design-preview--product-design-integrated .compare-mobile-row.is-shared {
  background: oklch(0.92 0.008 145);
  color: color-mix(in srgb, var(--color-muted) 82%, var(--color-paper));
}

.design-preview--product-design-integrated .compare-mobile-row.is-shared-start {
  border-block-start: 3px solid var(--color-rule);
}

.design-preview--product-design-integrated .compare-drawer-body .compare-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-xl);
  padding: var(--space-xs) var(--space-md);
}

.design-preview--product-design-integrated .compare-drawer-body .compare-head > h2 {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.design-preview--product-design-integrated .compare-drawer-body .compare-view {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: flex-start;
}

.design-preview--product-design-integrated .compare-drawer-body .compare-actions {
  grid-column: 2;
  grid-row: 1;
}

.design-preview--product-design-integrated .compare-grid .label {
  background: transparent;
}

.design-preview--product-design-integrated .compare-grid > .label.is-shared {
  background: oklch(0.92 0.008 145);
}

.design-preview--product-design-integrated .compare-grid .head {
  background: var(--section-tint);
}

.design-preview--product-design-integrated .compare-table {
  width: 100%;
  min-width: 20.5rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.design-preview--product-design-integrated .compare-table th,
.design-preview--product-design-integrated .compare-table td {
  min-width: 0;
  padding: var(--space-xs);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-inline-end: var(--rule-thin) solid var(--color-rule);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .compare-table thead th {
  font-size: var(--text-xs);
  line-height: 1.25;
}

.design-preview--product-design-integrated .compare-table tbody th,
.design-preview--product-design-integrated .compare-table tbody td {
  line-height: 1.3;
}

.design-preview--product-design-integrated .compare-table .compare-product-head {
  display: table-cell;
}

.design-preview--product-design-integrated .compare-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  background: var(--section-tint);
}

.design-preview--product-design-integrated .compare-table thead th:first-child,
.design-preview--product-design-integrated .compare-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 4;
  background: var(--color-paper);
  box-shadow: var(--rule-thin) 0 0 var(--color-rule);
}

.design-preview--product-design-integrated .compare-table thead th:first-child {
  z-index: 5;
  background: var(--section-tint);
}

.design-preview--product-design-integrated .compare-table tbody th {
  width: 8.5rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: start;
}

.design-preview--product-design-integrated .compare-table tbody tr.is-different > th,
.design-preview--product-design-integrated .compare-table tbody tr.is-different > td {
  background: var(--color-paper);
}

.design-preview--product-design-integrated .compare-table tbody tr.is-different > th {
  border-inline-start: var(--focus-width) solid var(--color-accent);
  color: var(--color-ink);
}

.design-preview--product-design-integrated .compare-table tbody tr.is-shared > th,
.design-preview--product-design-integrated .compare-table tbody tr.is-shared > td {
  background: oklch(0.92 0.008 145);
  color: color-mix(in srgb, var(--color-muted) 82%, var(--color-paper));
}

.design-preview--product-design-integrated .compare-table tbody tr.is-shared-start > th,
.design-preview--product-design-integrated .compare-table tbody tr.is-shared-start > td {
  border-block-start: 3px solid var(--color-rule);
}

.design-preview--product-design-integrated .compare-table tbody tr.is-shared-hidden {
  display: none;
}

.design-preview--product-design-integrated .compare-table .is-unknown {
  color: var(--color-muted);
  text-decoration: underline dotted var(--color-rule);
  text-underline-offset: var(--space-2xs);
}

.design-preview--product-design-integrated .compare-table[data-products="2"] { min-width: 32.5rem; }
.design-preview--product-design-integrated .compare-table[data-products="3"] { min-width: 44.5rem; }
.design-preview--product-design-integrated .compare-table[data-products="4"] { min-width: 56.5rem; }

.design-preview--product-design-integrated .issue-panel {
  margin-block-start: var(--space-2xl);
  padding: var(--space-md) 0 0;
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-ink);
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated .issue-panel-head {
  padding: var(--space-md);
  border-inline-start: var(--focus-width) solid var(--section-rule);
  background: var(--section-tint);
}

.design-preview--product-design-integrated .issue-list {
  gap: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .issue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated .issue:nth-child(even) {
  padding-inline: var(--space-sm);
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .issue[hidden] {
  display: none;
}

.design-preview--product-design-integrated .issue-priority {
  align-self: start;
  min-width: 4.5rem;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.design-preview--product-design-integrated .issue[data-impact="最優先"] > .issue-priority {
  color: var(--color-danger);
}

.design-preview--product-design-integrated .issue[data-impact="低"] > .issue-priority {
  color: var(--color-muted);
}

.design-preview--product-design-integrated .issue > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.45;
}

.design-preview--product-design-integrated .issue-claims,
.design-preview--product-design-integrated .issue-needed {
  grid-column: 2;
}

.design-preview--product-design-integrated .issue-claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--rule-thin) solid var(--color-rule-soft);
}

.design-preview--product-design-integrated .issue-claims span {
  min-width: 0;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.design-preview--product-design-integrated .issue-claims span + span {
  padding-inline: var(--space-sm) 0;
  border-inline-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .issue-needed {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.design-preview--product-design-integrated .modal-card {
  border-radius: 0;
  box-shadow: none;
}

.design-preview--product-design-integrated #detailModal .modal-head,
.design-preview--product-design-integrated #correctionModal .modal-head {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  background: var(--color-paper);
}

.design-preview--product-design-integrated #detailModal .modal-head h2,
.design-preview--product-design-integrated #correctionModal .modal-head h2 {
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .detail-decision {
  padding-block: var(--space-md);
  border-block: var(--rule-thin) solid var(--color-ink);
}

.design-preview--product-design-integrated .detail-decision h3 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.design-preview--product-design-integrated .detail-decision dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule-soft);
  border-inline-start: var(--rule-thin) solid var(--color-rule-soft);
}

.design-preview--product-design-integrated .detail-decision dl > div {
  min-width: 0;
  padding: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule-soft);
  border-inline-end: var(--rule-thin) solid var(--color-rule-soft);
}

.design-preview--product-design-integrated .detail-decision dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .detail-decision dd {
  margin: var(--space-2xs) 0 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.45;
}

.design-preview--product-design-integrated .detail-jump-nav {
  position: sticky;
  z-index: calc(var(--z-raised) - 1);
  inset-block-start: 4.75rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: var(--space-md);
  border-block: var(--rule-thin) solid var(--color-rule);
  background: color-mix(in srgb, var(--color-paper) 96%, transparent);
  backdrop-filter: blur(.5rem);
}

.design-preview--product-design-integrated .detail-jump-nav button,
.design-preview--product-design-integrated .detail-jump-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--touch-height);
  padding: var(--space-xs);
  border: 0;
  border-inline-end: var(--rule-thin) solid var(--color-rule-soft);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.design-preview--product-design-integrated .detail-jump-nav > :last-child {
  border-inline-end: 0;
}

.design-preview--product-design-integrated .detail-jump-nav button:hover,
.design-preview--product-design-integrated .detail-jump-nav button:focus-visible,
.design-preview--product-design-integrated .detail-jump-nav a:hover,
.design-preview--product-design-integrated .detail-jump-nav a:focus-visible {
  background: var(--section-tint);
  color: var(--color-accent);
}

.design-preview--product-design-integrated #detailBody > .card,
.design-preview--product-design-integrated #detailBody > .detail-grid > .card {
  scroll-margin-block-start: 9rem;
}

.design-preview--product-design-integrated .detail-more-specs {
  margin-block-start: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .detail-more-specs > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--touch-height);
  padding-block: var(--space-sm);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.design-preview--product-design-integrated .detail-more-specs > summary span {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.design-preview--product-design-integrated .detail-more-specs[open] > summary {
  border-block-end: var(--rule-thin) solid var(--color-rule-soft);
}

.design-preview--product-design-integrated .travel-visual {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-soft);
  border-radius: 0;
  background: var(--section-tint);
}

.design-preview--product-design-integrated .travel-visual-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.design-preview--product-design-integrated .travel-visual-head strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .travel-visual-head span,
.design-preview--product-design-integrated .travel-visual figcaption {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .travel-track {
  margin-block: var(--space-lg) var(--space-sm);
  background: var(--color-paper);
}

.design-preview--product-design-integrated .travel-progress,
.design-preview--product-design-integrated .travel-marker {
  background: var(--color-success);
}

.design-preview--product-design-integrated .travel-marker {
  border-color: var(--section-tint);
}

.design-preview--product-design-integrated .travel-range {
  background: var(--color-accent);
}

.design-preview--product-design-integrated .travel-bottom {
  background: var(--color-ink);
}

.design-preview--product-design-integrated .travel-labels strong {
  color: var(--color-ink);
}

.design-preview--product-design-integrated .detail-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-block: var(--rule-thin) solid var(--color-ink);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .detail-overview span + span::before {
  content: "/";
  margin-inline-end: var(--space-md);
  color: var(--color-rule);
}

.design-preview--product-design-integrated .detail-grid {
  align-items: start;
}

.design-preview--product-design-integrated .detail-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-sm);
}

.design-preview--product-design-integrated .detail-media-grid figure {
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule-soft);
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .detail-media-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--color-paper);
}

.design-preview--product-design-integrated .detail-media-grid figcaption {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .detail-media-grid figcaption span {
  color: var(--color-muted);
}

.design-preview--product-design-integrated .detail-compatibility {
  border-block-start-color: var(--color-accent);
}

.design-preview--product-design-integrated .detail-evidence {
  margin-block-start: var(--space-lg) !important;
}

.design-preview--product-design-integrated .detail-evidence .evidence-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-lg);
}

.design-preview--product-design-integrated .detail-sources {
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .detail-actions {
  position: fixed;
  z-index: calc(var(--z-modal) + 1);
  inset-block-end: 0;
  inset-inline-start: 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  width: min(calc(100% - (var(--space-lg) * 2)), 65.625rem);
  padding: var(--space-sm) var(--space-lg) max(var(--space-sm), env(safe-area-inset-bottom));
  border-block-start: var(--rule-thin) solid var(--color-accent);
  background: color-mix(in srgb, var(--color-paper) 97%, transparent);
  box-shadow: 0 -.5rem 1.5rem color-mix(in srgb, var(--color-ink) 9%, transparent);
  transform: translateX(-50%);
  backdrop-filter: blur(.75rem);
}

.design-preview--product-design-integrated .detail-actions[hidden] {
  display: none;
}

.design-preview--product-design-integrated .detail-compare-action,
.design-preview--product-design-integrated .detail-page-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-height);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.design-preview--product-design-integrated .detail-compare-action {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.design-preview--product-design-integrated .detail-compare-action[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.design-preview--product-design-integrated .detail-compare-action:disabled {
  border-color: var(--color-rule);
  background: var(--section-tint);
  color: var(--color-muted);
  cursor: not-allowed;
}

.design-preview--product-design-integrated .detail-page-action {
  background: var(--color-paper);
  color: var(--color-accent);
}

.design-preview--product-design-integrated #detailModal .modal-body {
  padding-block-end: calc(var(--space-3xl) + var(--touch-height));
}

@media (max-width: 35rem) {
  .design-preview--product-design-integrated #detailModal {
    padding: 0;
  }

  .design-preview--product-design-integrated #detailModal .modal-card {
    min-height: 100dvh;
    border: 0;
  }

  .design-preview--product-design-integrated #detailModal .modal-body {
    padding: var(--space-md) var(--space-md) calc(var(--space-3xl) + var(--touch-height));
  }

  .design-preview--product-design-integrated .detail-actions {
    width: 100%;
    padding: var(--space-xs) var(--space-md) max(var(--space-xs), env(safe-area-inset-bottom));
  }

  .design-preview--product-design-integrated .detail-compare-action,
  .design-preview--product-design-integrated .detail-page-action {
    padding-inline: var(--space-xs);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .detail-decision dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .detail-decision dl > div:last-child {
    grid-column: 1 / -1;
  }

  .design-preview--product-design-integrated .detail-jump-nav {
    inset-block-start: 4.5rem;
    margin-inline: calc(var(--space-md) * -1);
    padding-inline: var(--space-md);
  }

  .design-preview--product-design-integrated .detail-jump-nav button,
  .design-preview--product-design-integrated .detail-jump-nav a {
    font-size: var(--text-xs);
  }
}

@media (min-width: 35.01rem) and (max-width: 43.74rem) {
  .design-preview--product-design-integrated .detail-decision dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .detail-decision dl > div:last-child {
    grid-column: 1 / -1;
  }
}

.design-preview--product-design-integrated .listing-table-wrap {
  display: none;
}

.design-preview--product-design-integrated .listing-mobile-list {
  display: grid;
  gap: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .listing-record {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .listing-record-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
}

.design-preview--product-design-integrated .listing-record-head a,
.design-preview--product-design-integrated .listing-record-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.design-preview--product-design-integrated .listing-record-state {
  flex: 0 0 auto;
  max-width: 8.5rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.45;
  text-align: end;
}

.design-preview--product-design-integrated .listing-record.is-stale .listing-record-state,
.design-preview--product-design-integrated .listing-record.is-aging .listing-record-state {
  color: var(--color-danger-ink);
}

.design-preview--product-design-integrated .listing-record-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
  margin: 0;
}

.design-preview--product-design-integrated .listing-record-details div {
  min-width: 0;
}

.design-preview--product-design-integrated .listing-record-details dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .listing-record-details dd {
  min-width: 0;
  margin: var(--space-2xs) 0 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.design-preview--product-design-integrated .listing-record-details div:first-child dd {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
}

.design-preview--product-design-integrated #correctionModal .modal-card {
  border: 0;
  border-block-start: var(--focus-width) solid var(--color-accent);
}

.design-preview--product-design-integrated #correctionModal .modal-body {
  display: grid;
  gap: var(--space-lg);
}

.design-preview--product-design-integrated .correction-intro {
  margin: 0;
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  line-height: 1.7;
}

.design-preview--product-design-integrated #correctionModal .form-grid {
  gap: 0 var(--space-lg);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated #correctionModal .form-grid > div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated #correctionModal .form-grid label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.design-preview--product-design-integrated #correctionModal textarea.control {
  min-height: 6rem;
  padding-block: var(--space-sm);
  resize: vertical;
}

.design-preview--product-design-integrated .correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.design-preview--product-design-integrated .correction-actions .btn {
  white-space: nowrap;
}

.design-preview--product-design-integrated .correction-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-thin) solid var(--color-ink);
}

.design-preview--product-design-integrated .correction-output-head strong {
  font-family: var(--font-display);
}

.design-preview--product-design-integrated .correction-output-state {
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.design-preview--product-design-integrated .correction-output-state.is-ready {
  color: var(--color-accent);
  font-weight: 700;
}

.design-preview--product-design-integrated #corrOutput {
  max-height: 18rem;
  margin: 0;
  padding: var(--space-md) 0;
  overflow: auto;
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
}

.design-preview--product-design-integrated .modal-body > .card {
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: var(--section-tint-soft);
}

.design-preview--product-design-integrated .compat-item,
.design-preview--product-design-integrated .evidence-item {
  border-inline: 0;
  border-block-start: 0;
  border-radius: 0;
}

.design-preview--product-design-integrated .spec-grid {
  gap: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .spec {
  padding: var(--space-xs) 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}

.design-preview--product-design-integrated .footer {
  display: grid;
  align-items: end;
  gap: var(--space-lg);
  margin-block-start: var(--space-3xl);
  padding-block: var(--space-xl);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  text-align: start;
}

.design-preview--product-design-integrated .footer-links {
  justify-content: flex-start;
  margin: 0;
}

.design-preview--product-design-integrated .footer a {
  color: var(--color-muted);
}

.design-preview--product-design-integrated .preview-nav a,
.design-preview--product-design-integrated .footer-links a,
.design-preview--product-design-integrated .journey-help {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
}

.no-js .design-preview--product-design-integrated .decision-journey {
  display: none;
}

.no-js .design-preview--product-design-integrated .hero {
  margin-top: var(--space-xl);
}

@media (max-width: 22.5rem) {
  .design-preview--product-design-integrated .issue-claims {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-preview--product-design-integrated .issue-claims span + span {
    padding-inline: 0;
    border-block-start: var(--rule-thin) solid var(--color-rule-soft);
    border-inline-start: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .design-preview--product-design-integrated .path-choice:hover {
    background: var(--color-paper-2);
  }

  .design-preview--product-design-integrated .journey-submit:hover,
  .design-preview--product-design-integrated .preview-nav a:hover,
  .design-preview--product-design-integrated .journey-help:hover {
    color: var(--color-accent);
  }

  .design-preview--product-design-integrated .guide h3 a:hover {
    color: var(--color-accent);
  }

  .design-preview--product-design-integrated a.product-name:hover,
  .design-preview--product-design-integrated .compare-toggle:hover {
    color: var(--color-accent);
  }
}

@media (min-width: 40rem) {
  .design-preview--product-design-integrated .compare-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .design-preview--product-design-integrated .issue-panel-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .design-preview--product-design-integrated .preview-nav-links a:not(.preview-nav-action) {
    display: inline-flex;
  }

  .design-preview--product-design-integrated .meta-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .pill {
    padding-inline: var(--space-sm);
    border-inline-end: var(--rule-thin) solid var(--color-rule);
  }

  .design-preview--product-design-integrated .pill:first-child {
    padding-inline-start: 0;
  }

  .design-preview--product-design-integrated .pill:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .design-preview--product-design-integrated .journey-standard .journey-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }

  .design-preview--product-design-integrated .journey-type .journey-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }

  .design-preview--product-design-integrated .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .guide:first-child {
    grid-column: 1 / -1;
  }

  .design-preview--product-design-integrated .footer {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .design-preview--product-design-integrated .footer-links {
    justify-content: flex-end;
  }
}

@media (min-width: 43.75rem) {
  .design-preview--product-design-integrated #compareGrid {
    display: block;
  }

  .design-preview--product-design-integrated .detail-evidence .evidence-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .listing-table-wrap {
    display: block;
  }

  .design-preview--product-design-integrated .listing-mobile-list {
    display: none;
  }

  .design-preview--product-design-integrated .content > .table-wrap table {
    min-width: var(--product-table-min-width);
    table-layout: fixed;
  }

  .design-preview--product-design-integrated .product-col-select { width: var(--product-select-column-width); }
  .design-preview--product-design-integrated .product-col-name { width: var(--product-name-column-width); }
  .design-preview--product-design-integrated .product-col-standard { width: var(--product-standard-column-width); }
  .design-preview--product-design-integrated .product-col-type { width: var(--product-type-column-width); }
  .design-preview--product-design-integrated .product-col-force { width: var(--product-force-column-width); }
  .design-preview--product-design-integrated .product-col-actuation { width: var(--product-actuation-column-width); }
  .design-preview--product-design-integrated .product-col-travel { width: var(--product-travel-column-width); }
  .design-preview--product-design-integrated .product-col-lube { width: var(--product-lube-column-width); }
  .design-preview--product-design-integrated .product-col-stock { width: var(--product-stock-column-width); }
  .design-preview--product-design-integrated .product-col-status { width: var(--product-status-column-width); }
  .design-preview--product-design-integrated .product-col-detail { width: var(--product-detail-column-width); }

  .design-preview--product-design-integrated .table-column-row th:nth-child(3),
  .design-preview--product-design-integrated .table-wrap td:nth-child(3) {
    inline-size: var(--product-standard-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(4),
  .design-preview--product-design-integrated .table-wrap td:nth-child(4) {
    inline-size: var(--product-type-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(5),
  .design-preview--product-design-integrated .table-wrap td:nth-child(5) {
    inline-size: var(--product-force-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(6),
  .design-preview--product-design-integrated .table-wrap td:nth-child(6) {
    inline-size: var(--product-actuation-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(7),
  .design-preview--product-design-integrated .table-wrap td:nth-child(7) {
    inline-size: var(--product-travel-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(8),
  .design-preview--product-design-integrated .table-wrap td:nth-child(8) {
    inline-size: var(--product-lube-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(9),
  .design-preview--product-design-integrated .table-wrap td:nth-child(9) {
    inline-size: var(--product-stock-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(10),
  .design-preview--product-design-integrated .table-wrap td:nth-child(10) {
    inline-size: var(--product-status-column-width);
  }

  .design-preview--product-design-integrated .table-column-row th:nth-child(11),
  .design-preview--product-design-integrated .table-wrap td:nth-child(11) {
    inline-size: var(--product-detail-column-width);
  }

  .design-preview--product-design-integrated .table-wrap td:nth-child(3),
  .design-preview--product-design-integrated .table-wrap td:nth-child(9),
  .design-preview--product-design-integrated .table-wrap td:nth-child(10) {
    overflow-wrap: anywhere;
  }

  .design-preview--product-design-integrated .table-wrap .table-group-row th:first-child {
    position: sticky;
    z-index: calc(var(--z-raised) + 2);
    inset-inline-start: 0;
    inline-size: calc(var(--product-select-column-actual, var(--product-select-column-width)) + var(--product-name-column-width));
    min-inline-size: calc(var(--product-select-column-actual, var(--product-select-column-width)) + var(--product-name-column-width));
    border-inline-end: var(--rule-thin) solid var(--section-rule);
    background: var(--color-table-head);
    color: var(--color-table-head-ink);
    box-shadow: var(--rule-thin) 0 0 var(--color-rule-soft);
  }

  .design-preview--product-design-integrated .table-wrap .table-column-row th:first-child,
  .design-preview--product-design-integrated .table-wrap td:first-child {
    position: sticky;
    z-index: calc(var(--z-base) + 1);
    inset-inline-start: 0;
    inline-size: var(--product-select-column-width);
    min-inline-size: var(--product-select-column-width);
    max-inline-size: var(--product-select-column-width);
    background: var(--color-paper);
  }

  .design-preview--product-design-integrated .table-wrap .table-column-row th:nth-child(2),
  .design-preview--product-design-integrated .table-wrap td:nth-child(2) {
    position: sticky;
    z-index: calc(var(--z-base) + 1);
    inset-inline-start: var(--product-select-column-actual, var(--product-select-column-width));
    inline-size: var(--product-name-column-width);
    min-inline-size: var(--product-name-column-width);
    max-inline-size: var(--product-name-column-width);
    border-inline-end: var(--rule-thin) solid var(--color-rule-soft);
    background: var(--color-paper);
    box-shadow: var(--rule-thin) 0 0 var(--color-rule-soft);
  }

  .design-preview--product-design-integrated .table-wrap .table-column-row th:first-child,
  .design-preview--product-design-integrated .table-wrap .table-column-row th:nth-child(2),
  .design-preview--product-design-integrated .table-wrap .table-column-row th:last-child {
    z-index: calc(var(--z-raised) + 1);
    background: var(--color-table-head);
    color: var(--color-table-head-ink);
  }

  .design-preview--product-design-integrated .table-wrap .table-group-row th:last-child {
    position: sticky;
    z-index: var(--z-raised);
    inset-inline-end: 0;
    border-inline-start: var(--rule-thin) solid var(--section-rule);
    background: var(--color-table-head);
    color: var(--color-table-head-ink);
  }

  .design-preview--product-design-integrated .table-wrap .table-column-row th:last-child,
  .design-preview--product-design-integrated .table-wrap td:last-child {
    position: sticky;
    z-index: var(--z-base);
    inset-inline-end: 0;
    border-inline-start: var(--rule-thin) solid var(--color-rule-soft);
    background: var(--color-paper);
  }

  .design-preview--product-design-integrated .table-wrap .table-column-row th:last-child {
    z-index: var(--z-raised);
    background: var(--color-table-head);
    color: var(--color-table-head-ink);
  }

  .design-preview--product-design-integrated .table-wrap tbody tr:nth-child(even) td:first-child,
  .design-preview--product-design-integrated .table-wrap tbody tr:nth-child(even) td:nth-child(2),
  .design-preview--product-design-integrated .table-wrap tbody tr:nth-child(even) td:last-child {
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .table-wrap tbody tr:hover td:first-child,
  .design-preview--product-design-integrated .table-wrap tbody tr:hover td:nth-child(2),
  .design-preview--product-design-integrated .table-wrap tbody tr:hover td:last-child {
    background: var(--color-row-hover);
  }
}

@media (min-width: 68.75rem) {
  .design-preview--product-design-integrated .mobile-results-shortcut {
    display: none;
  }
}

@media (min-width: 60rem) {
  .design-preview--product-design-integrated {
    padding-inline-start: var(--space-2xl);
  }

  .design-preview--product-design-integrated .journey-intro {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .design-preview--product-design-integrated .journey-help {
    align-self: end;
  }

  .design-preview--product-design-integrated .preview-nav {
    position: fixed;
    z-index: var(--z-sticky);
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--space-2xl);
    min-height: 0;
    padding: var(--space-sm) var(--space-xs);
    border-block-end: 0;
    border-inline-end: var(--rule-thin) solid var(--color-rule);
    background: var(--color-paper-2);
    writing-mode: vertical-rl;
  }

  .design-preview--product-design-integrated .preview-nav a {
    min-height: 0;
  }

  .design-preview--product-design-integrated .preview-wordmark {
    transform: rotate(180deg);
  }

  .design-preview--product-design-integrated .preview-nav-links {
    flex-direction: row;
    flex: 0 0 auto;
    gap: var(--space-xl);
  }

  .design-preview--product-design-integrated .preview-nav-action {
    text-decoration-thickness: var(--rule-thin);
  }

  .design-preview--product-design-integrated .decision-journey {
    grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-3xl);
    padding-block-start: var(--space-lg);
    padding-block-end: var(--space-xl);
  }

  .design-preview--product-design-integrated .journey-steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    column-gap: var(--space-xl);
    row-gap: var(--space-xl);
  }

  .design-preview--product-design-integrated .journey-standard {
    grid-column: 1 / -1;
    gap: var(--space-xl);
  }

  .design-preview--product-design-integrated .journey-type {
    grid-column: 1 / 8;
  }

  .design-preview--product-design-integrated .journey-compare {
    grid-column: 8 / -1;
  }

  .design-preview--product-design-integrated .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  }

  .design-preview--product-design-integrated .coverage-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-lg);
    row-gap: 0;
  }

  .design-preview--product-design-integrated .coverage-card:nth-child(1) {
    grid-column: span 4;
  }

  .design-preview--product-design-integrated .coverage-card:nth-child(2) {
    grid-column: span 3;
  }

  .design-preview--product-design-integrated .coverage-card:nth-child(3) {
    grid-column: span 5;
  }

  .design-preview--product-design-integrated .coverage-card:nth-child(4) {
    grid-column: span 7;
  }

  .design-preview--product-design-integrated .coverage-card:nth-child(5) {
    grid-column: span 5;
  }

  .design-preview--product-design-integrated .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .layout {
    grid-template-columns: 18rem minmax(0, 1fr);
    column-gap: var(--space-md);
    background:
      linear-gradient(
        to right,
        transparent calc(18rem - var(--rule-thin)),
        var(--column-boundary) calc(18rem - var(--rule-thin)) 18rem,
        transparent 18rem
      ),
      linear-gradient(to right, var(--filter-column-bg) 0 18rem, transparent 18rem);
    background-repeat: no-repeat;
  }

  .design-preview--product-design-integrated .filters {
    display: block;
    max-block-size: calc(100dvh - 2 * var(--space-sm));
    padding: var(--space-sm);
    overflow-y: auto;
    border-inline-end: var(--rule-thin) solid var(--column-boundary);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: var(--column-boundary) transparent;
    scrollbar-width: thin;
  }

  .design-preview--product-design-integrated .filters h2 {
    font-size: var(--text-base);
  }

  .design-preview--product-design-integrated .filters > .two {
    column-gap: var(--space-sm);
  }

  .design-preview--product-design-integrated .filters .filter-note,
  .design-preview--product-design-integrated .filters .active-guide {
    padding-block: var(--space-xs);
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  .design-preview--product-design-integrated .filters .filter-summary {
    position: sticky;
    z-index: var(--z-sticky);
    inset-block-start: 0;
    margin-inline: calc(-1 * var(--space-sm));
    padding: var(--space-xs) var(--space-sm);
    background: var(--filter-column-bg);
  }

  .design-preview--product-design-integrated .filters .field {
    padding-block: var(--space-xs);
  }

  .design-preview--product-design-integrated .filters .field label {
    margin-block-end: var(--space-2xs);
    font-size: 0.6875rem;
  }

  .design-preview--product-design-integrated .filters .control {
    padding-inline-end: var(--space-lg);
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .filters .filter-actions {
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
  }

  .design-preview--product-design-integrated .guide-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .guide {
    grid-column: span 4;
  }

  .design-preview--product-design-integrated .guide:first-child {
    grid-column: span 5;
  }

  .design-preview--product-design-integrated .guide:nth-child(2) {
    grid-column: span 3;
  }
}

@media (min-width: 60rem) and (pointer: fine) {
  .design-preview--product-design-integrated .filters .control,
  .design-preview--product-design-integrated .filters .btn {
    height: 2.25rem;
    min-height: 2.25rem;
  }

  .design-preview--product-design-integrated .filters .control {
    padding-block: 0;
  }

}

/* Keep the results column readable until the full desktop canvas is wide
 * enough for the filter rail and comparison content side by side. */
@media (min-width: 60rem) and (max-width: 68.74rem) {
  .design-preview--product-design-integrated .layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    background: none;
  }

  .design-preview--product-design-integrated .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-block-size: none;
    overflow-y: visible;
    border-inline-end: 0;
    scrollbar-gutter: auto;
  }

  .design-preview--product-design-integrated .filters > h2,
  .design-preview--product-design-integrated .filters > .filter-note,
  .design-preview--product-design-integrated .filters > .two,
  .design-preview--product-design-integrated .filters > .field:has(#standard),
  .design-preview--product-design-integrated .filters > .field:has(#q),
  .design-preview--product-design-integrated .filters > .field:has(#brand),
  .design-preview--product-design-integrated .filters > .field:has(#sort),
  .design-preview--product-design-integrated .filters > .advanced-filters,
  .design-preview--product-design-integrated .filters > .active-guide,
  .design-preview--product-design-integrated .filters > .filter-summary,
  .design-preview--product-design-integrated .filters > .filter-actions {
    grid-column: 1 / -1;
  }

  .design-preview--product-design-integrated .filters .filter-summary {
    position: static;
    margin-inline: 0;
    padding: var(--space-xs) 0;
  }
}

/* A narrow desktop window still has a precise pointer. Keep the controls
 * compact instead of inheriting the phone-sized touch treatment. */
@media (min-width: 40rem) and (max-width: 59.99rem) and (pointer: fine) {
  .design-preview--product-design-integrated .filters {
    column-gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .design-preview--product-design-integrated .filters h2 {
    font-size: var(--text-base);
  }

  .design-preview--product-design-integrated .filters > .two {
    column-gap: var(--space-sm);
  }

  .design-preview--product-design-integrated .filters .filter-note,
  .design-preview--product-design-integrated .filters .active-guide {
    padding-block: var(--space-xs);
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  .design-preview--product-design-integrated .filters .field {
    padding-block: var(--space-xs);
  }

  .design-preview--product-design-integrated .filters .field label {
    margin-block-end: var(--space-2xs);
    font-size: 0.6875rem;
  }

  .design-preview--product-design-integrated .filters .control,
  .design-preview--product-design-integrated .filters .btn,
  .design-preview--product-design-integrated .filters .filter-summary-chip,
  .design-preview--product-design-integrated .filters .filter-summary-clear {
    height: 2.25rem;
    min-height: 2.25rem;
  }

  .design-preview--product-design-integrated .filters .control {
    padding-block: 0;
    padding-inline-end: var(--space-lg);
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .filters .filter-summary-clear {
    min-inline-size: 2.25rem;
  }
}

@media (min-width: 40rem) and (max-width: 68.74rem) {
  .design-preview--product-design-integrated {
    --compare-label-min: 7.5rem;
    --compare-product-min: 10.5rem;
  }

  .design-preview--product-design-integrated .decision-journey {
    align-items: start;
    gap: var(--space-md);
    padding-block-start: var(--space-md);
    padding-block-end: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-intro {
    height: auto;
    gap: var(--space-sm) var(--space-lg);
  }

  .design-preview--product-design-integrated .journey-help {
    align-self: start;
    margin-block-start: 0;
  }

  .design-preview--product-design-integrated .journey-steps {
    row-gap: var(--space-md);
    column-gap: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-standard {
    gap: var(--space-md);
    padding-block-end: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-standard .choice-scroll-shell {
    min-width: 0;
  }

  .design-preview--product-design-integrated .journey-standard .choice-scroll-controls.is-overflowing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    height: 2.25rem;
    min-height: 2.25rem;
    padding-inline: var(--space-xs);
    border-block: var(--rule-thin) solid var(--color-rule);
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .journey-standard .choice-scroll-controls::before {
    content: attr(data-summary);
    margin-inline-end: auto;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .journey-standard .choice-scroll-cue {
    display: grid;
    place-items: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
  }

  .design-preview--product-design-integrated .journey-standard .choice-scroll-cue[hidden] {
    display: none;
  }

  .design-preview--product-design-integrated .journey-standard .journey-choices {
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(2.25rem, auto));
    grid-auto-flow: column;
    grid-auto-columns: clamp(15rem, 42vw, 19rem);
    column-gap: var(--space-md);
    max-width: 100%;
    padding-block-end: var(--space-xs);
    overflow-x: auto;
    scroll-padding-inline: var(--space-xs);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--section-rule) transparent;
    scrollbar-width: thin;
  }

  .design-preview--product-design-integrated .journey-standard .path-choice {
    scroll-snap-align: start;
  }

  .design-preview--product-design-integrated .journey-step {
    gap: var(--space-sm);
  }

  .design-preview--product-design-integrated .journey-compare {
    padding: var(--space-md);
  }

  .design-preview--product-design-integrated .hero {
    margin-top: var(--space-lg);
    padding-block: var(--space-md);
    gap: var(--space-md);
  }

  .design-preview--product-design-integrated .section-title {
    margin: var(--space-xl) 0 var(--space-md);
    padding-block: var(--space-xs);
  }

  .design-preview--product-design-integrated .coverage-grid {
    gap: var(--space-md);
  }

  .design-preview--product-design-integrated .coverage-card {
    padding-block: var(--space-sm);
  }

  .design-preview--product-design-integrated .coverage-card h3 {
    margin-block-end: var(--space-2xs);
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .coverage-card p {
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  .design-preview--product-design-integrated .coverage-list {
    gap: 0 var(--space-md);
    margin-block-start: var(--space-sm);
  }

  .design-preview--product-design-integrated .coverage-pill {
    padding-block: var(--space-2xs);
  }

  .design-preview--product-design-integrated .guide-scroll-shell {
    min-width: 0;
  }

  .design-preview--product-design-integrated .guide-scroll-controls.is-overflowing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0 var(--space-xs);
    border-block: var(--rule-thin) solid var(--color-rule);
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .guide-scroll-controls::before {
    content: attr(data-summary);
    margin-inline-end: auto;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .guide-scroll-cue {
    display: grid;
    place-items: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
  }

  .design-preview--product-design-integrated .guide-scroll-cue--start {
    background: linear-gradient(90deg, var(--section-tint) 30%, transparent);
  }

  .design-preview--product-design-integrated .guide-scroll-cue--end {
    background: linear-gradient(90deg, transparent, var(--section-tint) 70%);
  }

  .design-preview--product-design-integrated .guide-scroll-cue[hidden] {
    display: none;
  }

  .design-preview--product-design-integrated .guide-grid {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    max-width: 100%;
    padding-block-end: var(--space-xs);
    overflow-x: auto;
    scroll-padding-inline: var(--space-xs);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--section-rule) transparent;
    scrollbar-width: thin;
  }

  .design-preview--product-design-integrated .guide,
  .design-preview--product-design-integrated .guide:first-child,
  .design-preview--product-design-integrated .guide:nth-child(2) {
    grid-column: auto;
    flex: 0 0 clamp(17.5rem, 38vw, 20rem);
    min-height: 17.5rem;
    padding-block: var(--space-md);
    scroll-snap-align: start;
  }

  .design-preview--product-design-integrated .compare-head,
  .design-preview--product-design-integrated .issue-panel-head {
    padding: var(--space-sm);
  }

  .design-preview--product-design-integrated .compare-grid > div {
    min-height: 2.25rem;
    padding: var(--space-2xs) var(--space-xs);
    line-height: 1.4;
  }

  .design-preview--product-design-integrated .compare-grid .head {
    min-height: 4.25rem;
  }

  .design-preview--product-design-integrated .issue {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    column-gap: var(--space-sm);
    row-gap: var(--space-xs);
    padding-block: var(--space-xs);
  }

  .design-preview--product-design-integrated .issue-priority {
    min-width: 0;
  }

  .design-preview--product-design-integrated .issue > strong {
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .issue > p {
    grid-column: 2;
    margin: 0;
  }

  .design-preview--product-design-integrated .issue-claims span,
  .design-preview--product-design-integrated .issue-needed {
    font-size: var(--text-xs);
    line-height: 1.55;
  }
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .design-preview--product-design-integrated .journey-intro {
    grid-template-columns: minmax(15.5rem, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "title lede"
      "help lede";
    column-gap: var(--space-lg);
  }

  .design-preview--product-design-integrated .journey-intro h1 {
    grid-area: title;
  }

  .design-preview--product-design-integrated .journey-lede {
    grid-area: lede;
  }

  .design-preview--product-design-integrated .journey-help {
    grid-area: help;
  }

  .design-preview--product-design-integrated .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .journey-standard {
    grid-column: 1 / -1;
  }

  .design-preview--product-design-integrated .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .coverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .coverage-card:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) and (max-width: 68.74rem) {
  .design-preview--product-design-integrated .decision-journey {
    grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr);
    gap: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-intro {
    grid-template-rows: none;
  }

  .design-preview--product-design-integrated .journey-type {
    grid-column: 1 / 7;
  }

  .design-preview--product-design-integrated .journey-compare {
    grid-column: 7 / -1;
  }

  .design-preview--product-design-integrated .coverage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-md);
    row-gap: var(--space-md);
  }

  .design-preview--product-design-integrated .coverage-card:nth-child(n) {
    grid-column: auto;
  }

  .design-preview--product-design-integrated .coverage-card:first-child {
    grid-column: span 2;
  }
}

@media (min-width: 40rem) and (max-width: 43.74rem) and (pointer: fine) {
  .design-preview--product-design-integrated #compareGrid {
    display: block;
  }

  .design-preview--product-design-integrated .compare-mobile {
    display: none;
  }

  .design-preview--product-design-integrated .product-card {
    padding-block: var(--space-sm);
  }

  .design-preview--product-design-integrated .product-card-meta,
  .design-preview--product-design-integrated .product-card-specs {
    margin-block: var(--space-xs);
  }
}

@media (min-width: 43.75rem) and (max-width: 68.74rem) {
  .design-preview--product-design-integrated .table-wrap td {
    padding-block: 0.4375rem;
    line-height: 1.4;
  }

  .design-preview--product-design-integrated .table-column-row th {
    padding-block: var(--space-2xs);
  }
}

@media (pointer: coarse) {
  .design-preview--product-design-integrated .standard-family summary,
  .design-preview--product-design-integrated .path-choice,
  .design-preview--product-design-integrated .journey-submit,
  .design-preview--product-design-integrated .issue-toggle,
  .design-preview--product-design-integrated .correction-actions .btn {
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .filter-summary-chip,
  .design-preview--product-design-integrated .filter-summary-clear {
    min-height: var(--touch-height);
  }

}

.design-preview--product-design-integrated .journey-keyboard {
  grid-column: 1 / -1;
  padding-block-end: var(--space-xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.design-preview--product-design-integrated .keyboard-search-field {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure-modal);
}

.design-preview--product-design-integrated .keyboard-search-field label {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.design-preview--product-design-integrated .keyboard-search-field .control {
  width: 100%;
  min-height: var(--control-height);
  background: var(--color-input);
}

.design-preview--product-design-integrated .keyboard-search-note {
  min-height: 1lh;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .keyboard-search-recovery {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.design-preview--product-design-integrated .keyboard-search-recovery[hidden] {
  display: none;
}

.design-preview--product-design-integrated .keyboard-suggestions {
  position: absolute;
  z-index: var(--z-dropdown);
  inset-block-start: calc(var(--control-height) + var(--space-lg));
  inset-inline: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  box-shadow: var(--shadow);
}

.design-preview--product-design-integrated .keyboard-suggestions[hidden] {
  display: none;
}

.design-preview--product-design-integrated .keyboard-suggestion {
  display: grid;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-sm);
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule-soft);
  background: transparent;
  color: var(--color-ink);
  gap: var(--space-2xs);
  font: 400 var(--text-sm)/1.35 var(--font-body);
  text-align: start;
  cursor: pointer;
}

.design-preview--product-design-integrated .keyboard-suggestion strong {
  overflow-wrap: anywhere;
}

.design-preview--product-design-integrated .keyboard-suggestion small {
  display: grid;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.design-preview--product-design-integrated .keyboard-suggestion small span:first-child {
  color: var(--color-accent);
  font-weight: 700;
}

.design-preview--product-design-integrated .keyboard-suggestion:hover,
.design-preview--product-design-integrated .keyboard-suggestion[aria-selected="true"] {
  background: var(--color-focus-tint);
}

.design-preview--product-design-integrated .keyboard-suggestion:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: calc(-1 * var(--focus-width));
}

.design-preview--product-design-integrated .keyboard-result {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-info-rule);
  background: var(--color-info-tint-soft);
}

.design-preview--product-design-integrated .keyboard-result[hidden] {
  display: none;
}

.design-preview--product-design-integrated .keyboard-result h3,
.design-preview--product-design-integrated .keyboard-result p {
  margin: 0;
}

.design-preview--product-design-integrated .keyboard-result-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
}

.design-preview--product-design-integrated .keyboard-result-kind {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .keyboard-result-context {
  max-width: 60rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .keyboard-result-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: var(--rule-thin) solid var(--color-rule-soft);
}

.design-preview--product-design-integrated .keyboard-result-status div {
  padding: var(--space-sm);
  border-inline-start: var(--rule-medium) solid var(--color-rule);
}

.design-preview--product-design-integrated .keyboard-result-status [data-relation="compatible"] { border-color: var(--color-success-rule); }
.design-preview--product-design-integrated .keyboard-result-status [data-relation="conditional"] { border-color: var(--color-warning-rule); }
.design-preview--product-design-integrated .keyboard-result-status [data-relation="incompatible"] { border-color: var(--color-danger-rule); }
.design-preview--product-design-integrated .keyboard-result-status [data-relation="unknown"] { border-color: var(--color-rule); }

.design-preview--product-design-integrated .keyboard-result-status dt,
.design-preview--product-design-integrated .keyboard-result-status dd {
  margin: 0;
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .keyboard-result-status dd {
  color: var(--color-ink);
  font-weight: 700;
}

.design-preview--product-design-integrated .keyboard-result-standards {
  display: grid;
  gap: var(--space-2xs);
}

.design-preview--product-design-integrated .keyboard-result-warning {
  padding: var(--space-sm);
  border-inline-start: var(--rule-medium) solid var(--color-warning-rule);
  background: var(--color-warning-tint);
}

.design-preview--product-design-integrated .keyboard-result-warning h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
}

.design-preview--product-design-integrated .keyboard-result-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .keyboard-result-conditions {
  margin: 0;
  padding-inline-start: var(--space-lg);
  color: var(--color-ink);
  font-size: var(--text-xs);
}

.design-preview--product-design-integrated .keyboard-result-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.design-preview--product-design-integrated .keyboard-result-actions button,
.design-preview--product-design-integrated .keyboard-result-actions a {
  min-height: var(--control-height);
  white-space: nowrap;
}

@media (max-width: 36rem) {
  .design-preview--product-design-integrated .keyboard-result-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-preview--product-design-integrated .keyboard-result-heading {
    display: grid;
  }
}

.design-preview--product-design-integrated .compare-dock {
  position: fixed;
  z-index: calc(var(--z-sticky) + 8);
  inset-inline: max(var(--space-sm), env(safe-area-inset-left)) max(var(--space-sm), env(safe-area-inset-right));
  inset-block-end: max(var(--space-sm), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-table-head);
  background: var(--color-table-head);
  color: var(--color-table-head-ink);
  box-shadow: 0 .75rem 2.5rem color-mix(in srgb, var(--color-deep) 28%, transparent);
}

.design-preview--product-design-integrated .product-table-scroll-controls {
  display: none;
}

.design-preview--product-design-integrated .product-table-sticky-shell {
  display: none;
}

.design-preview--product-design-integrated .product-table-sticky-shell[hidden] {
  display: none !important;
}

/* The cloned header is visual context only. Let pointer input reach the live
 * table beneath it; the separate horizontal-scroll controls stay clickable. */
.design-preview--product-design-integrated .product-table-sticky-header-stage {
  pointer-events: none;
}

/* Vertical tracking is owned by the cloned fixed header. Keeping the source
 * thead vertically sticky as well can cover the first visible result and
 * intercept its checkbox after a filter or reset scroll. Horizontal frozen
 * columns remain sticky through their inline inset rules below. */
.design-preview--product-design-integrated .content > .table-wrap :is(.table-group-row, .table-column-row) th {
  inset-block-start: auto;
}

.design-preview--product-design-integrated .compare-scroll-controls {
  display: none;
}

.design-preview--product-design-integrated .guide-scroll-controls,
.design-preview--product-design-integrated .coverage-scroll-controls,
.design-preview--product-design-integrated .choice-scroll-controls {
  display: none;
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .filter-summary.is-empty {
    display: none;
  }

  .design-preview--product-design-integrated .compare-drawer-body .compare-head {
    column-gap: var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-drawer-body .compare-view {
    gap: var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-drawer-body .compare-view-summary {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .design-preview--product-design-integrated .compare-drawer-body .compare-view-toggle {
    margin-inline-start: 0;
    padding-inline: var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-drawer-body .compare-view-products {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .design-preview--product-design-integrated .compare-drawer-body .compare-actions {
    gap: var(--space-xs);
  }

  .design-preview--product-design-integrated .shared-compare-recovery {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .design-preview--product-design-integrated .shared-compare-recovery-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .design-preview--product-design-integrated .shared-compare-recovery-actions .linkbtn {
    justify-content: center;
    min-height: var(--touch-height);
    padding-inline: var(--space-xs);
  }

  .design-preview--product-design-integrated .shared-compare-recovery-actions .linkbtn[hidden] {
    display: none;
  }

  .design-preview--product-design-integrated .shared-compare-context {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .design-preview--product-design-integrated .shared-compare-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .design-preview--product-design-integrated .shared-compare-actions .linkbtn {
    justify-content: center;
    min-height: var(--touch-height);
    padding-inline: var(--space-xs);
  }

  .design-preview--product-design-integrated #compareGrid {
    display: block;
    min-width: 0;
  }

  .design-preview--product-design-integrated .compare-mobile {
    display: none;
  }

  .design-preview--product-design-integrated .compare-grid {
    --compare-label-min: 6.25rem;
    --compare-product-min: 8.75rem;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    overscroll-behavior-inline: contain;
    scroll-padding-inline-start: var(--compare-label-min);
    scrollbar-color: var(--section-rule) transparent;
    scrollbar-width: thin;
  }

  .design-preview--product-design-integrated .compare-grid > div {
    min-height: 3rem;
    padding: var(--space-sm);
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  .design-preview--product-design-integrated .compare-grid .head {
    min-height: 5.5rem;
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .compare-product-remove {
    min-height: 2.25rem;
    padding-inline: var(--space-2xs);
    font-size: 0.6875rem;
  }

  .design-preview--product-design-integrated .compare-grid > .label {
    position: sticky;
    z-index: 2;
    inset-inline-start: 0;
    background: var(--color-paper);
    box-shadow: var(--rule-thin) 0 0 var(--color-rule);
  }

  .design-preview--product-design-integrated .compare-grid > .label.is-different,
  .design-preview--product-design-integrated .compare-grid > .label.head {
    background: var(--section-tint);
  }

  .design-preview--product-design-integrated .compare-grid > .label.head {
    z-index: 3;
  }

  .design-preview--product-design-integrated .compare-scroll-controls.is-overflowing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    min-height: var(--touch-height);
    padding-inline-start: var(--space-sm);
    border-block: var(--rule-thin) solid var(--color-rule);
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .compare-scroll-controls::before {
    content: attr(data-summary);
    margin-inline-end: auto;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .compare-scroll-cue {
    display: grid;
    place-items: center;
    width: var(--touch-height);
    min-width: var(--touch-height);
    height: var(--touch-height);
    min-height: var(--touch-height);
    padding: 0;
    border: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
  }

  .design-preview--product-design-integrated .compare-scroll-cue--start {
    background: linear-gradient(90deg, var(--section-tint) 30%, transparent);
  }

  .design-preview--product-design-integrated .compare-scroll-cue--end {
    background: linear-gradient(90deg, transparent, var(--section-tint) 70%);
  }

  .design-preview--product-design-integrated .compare-scroll-cue[hidden] {
    display: none;
  }

  .design-preview--product-design-integrated .decision-journey {
    gap: var(--space-xl);
    padding-block-start: var(--space-lg);
    padding-block-end: var(--space-xl);
  }

  .design-preview--product-design-integrated .journey-intro {
    gap: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-lede {
    line-height: 1.65;
  }

  .design-preview--product-design-integrated .journey-steps {
    gap: var(--space-lg);
  }

  .design-preview--product-design-integrated .journey-step {
    gap: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-standard {
    padding-block-end: var(--space-lg);
  }

  .design-preview--product-design-integrated .journey-compare {
    padding: var(--space-md);
  }

  .design-preview--product-design-integrated .journey-finish {
    gap: var(--space-sm);
  }

  .design-preview--product-design-integrated .choice-scroll-shell,
  .design-preview--product-design-integrated .coverage-scroll-shell,
  .design-preview--product-design-integrated .guide-scroll-shell {
    min-width: 0;
  }

  .design-preview--product-design-integrated .choice-scroll-controls.is-overflowing,
  .design-preview--product-design-integrated .coverage-scroll-controls.is-overflowing,
  .design-preview--product-design-integrated .guide-scroll-controls.is-overflowing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    height: var(--touch-height);
    min-height: var(--touch-height);
    padding: 0 var(--space-xs);
    border-block: var(--rule-thin) solid var(--color-rule);
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .choice-scroll-controls::before,
  .design-preview--product-design-integrated .coverage-scroll-controls::before,
  .design-preview--product-design-integrated .guide-scroll-controls::before {
    content: attr(data-summary);
    margin-inline-end: auto;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .choice-scroll-cue,
  .design-preview--product-design-integrated .coverage-scroll-cue,
  .design-preview--product-design-integrated .guide-scroll-cue {
    display: grid;
    place-items: center;
    width: var(--touch-height);
    min-width: var(--touch-height);
    height: var(--touch-height);
    min-height: var(--touch-height);
    padding: 0;
    border: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
  }

  .design-preview--product-design-integrated .choice-scroll-cue--start,
  .design-preview--product-design-integrated .coverage-scroll-cue--start,
  .design-preview--product-design-integrated .guide-scroll-cue--start {
    background: linear-gradient(90deg, var(--section-tint) 30%, transparent);
  }

  .design-preview--product-design-integrated .choice-scroll-cue--end,
  .design-preview--product-design-integrated .coverage-scroll-cue--end,
  .design-preview--product-design-integrated .guide-scroll-cue--end {
    background: linear-gradient(90deg, transparent, var(--section-tint) 70%);
  }

  .design-preview--product-design-integrated .choice-scroll-cue[hidden],
  .design-preview--product-design-integrated .coverage-scroll-cue[hidden],
  .design-preview--product-design-integrated .guide-scroll-cue[hidden] {
    display: none;
  }

  .design-preview--product-design-integrated .journey-choices {
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(var(--touch-height), auto));
    grid-auto-flow: column;
    grid-auto-columns: clamp(14rem, 82vw, 17rem);
    column-gap: var(--space-md);
    max-width: 100%;
    padding-block-end: var(--space-xs);
    overflow-x: auto;
    scroll-padding-inline: var(--space-xs);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--section-rule) transparent;
    scrollbar-width: thin;
  }

  .design-preview--product-design-integrated .path-choice {
    scroll-snap-align: start;
  }

  .design-preview--product-design-integrated .hero {
    margin-top: var(--space-lg);
    padding-block: var(--space-md);
    gap: var(--space-md);
  }

  .design-preview--product-design-integrated .hero-action-ledger {
    gap: var(--space-xs) var(--space-md);
  }

  .design-preview--product-design-integrated .meta-row {
    margin-block-start: var(--space-md);
  }

  .design-preview--product-design-integrated .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-end: var(--space-xl);
  }

  .design-preview--product-design-integrated .kpi {
    padding: var(--space-sm) var(--space-xs);
  }

  .design-preview--product-design-integrated .section-title {
    margin: var(--space-xl) 0 var(--space-md);
    padding: var(--space-xs) var(--space-sm);
  }

  .design-preview--product-design-integrated .coverage-grid,
  .design-preview--product-design-integrated .guide-grid {
    display: flex;
    gap: var(--space-md);
    max-width: 100%;
    padding-block-end: var(--space-xs);
    overflow-x: auto;
    scroll-padding-inline: var(--space-xs);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--section-rule) transparent;
    scrollbar-width: thin;
  }

  .design-preview--product-design-integrated .coverage-grid {
    align-items: flex-start;
  }

  .design-preview--product-design-integrated .guide-grid {
    align-items: stretch;
  }

  .design-preview--product-design-integrated .coverage-card {
    flex: 0 0 clamp(17rem, 88vw, 22rem);
    padding-block: var(--space-sm);
    scroll-snap-align: start;
  }

  .design-preview--product-design-integrated .coverage-card h3 {
    margin-block-end: var(--space-2xs);
    font-size: var(--text-sm);
  }

  .design-preview--product-design-integrated .coverage-card p {
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  .design-preview--product-design-integrated .coverage-list {
    gap: 0 var(--space-md);
    margin-block-start: var(--space-sm);
  }

  .design-preview--product-design-integrated .coverage-pill {
    padding-block: 0;
    line-height: 1.4;
  }

  .design-preview--product-design-integrated .guide,
  .design-preview--product-design-integrated .guide:first-child,
  .design-preview--product-design-integrated .guide:nth-child(2) {
    grid-column: auto;
    flex: 0 0 clamp(17rem, 86vw, 20rem);
    min-height: 17rem;
    padding-block: var(--space-md);
    scroll-snap-align: start;
  }
}

@media (min-width: 40rem) {
  .design-preview--product-design-integrated .product-table-sticky-shell {
    position: fixed;
    inset-block-start: 0;
    z-index: calc(var(--z-sticky) + 6);
    display: grid;
    overflow: hidden;
    border-block: var(--rule-thin) solid var(--section-rule);
    background: var(--color-table-head);
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--color-deep) 18%, transparent);
  }

  .design-preview--product-design-integrated .product-table-sticky-header-stage {
    position: relative;
    overflow: hidden;
  }

  .design-preview--product-design-integrated .product-table-sticky-viewport {
    overflow: hidden;
  }

  .design-preview--product-design-integrated .product-table-sticky-context-groups {
    position: absolute;
    z-index: calc(var(--z-raised) + 2);
    inset-block-start: 0;
    inset-inline: 0;
    height: var(--table-group-head-height);
    overflow: hidden;
    pointer-events: none;
  }

  .design-preview--product-design-integrated .product-table-sticky-context-group {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-inline-size: 0;
    padding: var(--space-2xs) var(--space-xs);
    overflow: hidden;
    border-inline-start: var(--rule-thin) solid var(--section-rule);
    border-block-end: var(--rule-thin) solid color-mix(in oklch, var(--color-accent) 52%, var(--color-rule));
    background: var(--color-table-head);
    color: var(--color-table-head-ink);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
  }

  .design-preview--product-design-integrated .product-table-sticky-frozen-viewport {
    position: absolute;
    z-index: calc(var(--z-raised) + 3);
    inset-block: 0;
    inset-inline-start: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--color-table-head);
    box-shadow: var(--rule-thin) 0 0 var(--color-rule-soft);
  }

  .design-preview--product-design-integrated .product-table-sticky-end-viewport {
    position: absolute;
    z-index: calc(var(--z-raised) + 3);
    inset-block: 0;
    inset-inline-end: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--color-table-head);
    box-shadow: -1px 0 0 var(--color-rule-soft);
  }

  .design-preview--product-design-integrated .product-table-sticky-table {
    margin: 0;
    border: 0;
    table-layout: fixed;
  }

  .design-preview--product-design-integrated .product-table-sticky-table th {
    position: static;
    height: auto;
  }

  .design-preview--product-design-integrated .product-table-sticky-frozen-table {
    position: absolute;
    inset: 0 auto auto 0;
    min-inline-size: 0;
    background: var(--color-table-head);
  }

  .design-preview--product-design-integrated .product-table-sticky-end-table {
    position: absolute;
    inset: 0 0 auto auto;
    min-inline-size: 0;
    background: var(--color-table-head);
  }

  .design-preview--product-design-integrated .product-table-sticky-table .table-group-row th {
    height: var(--table-group-head-height);
  }

  html.app-ready body.design-preview--product-design-integrated:not(.show-detail-columns) .product-table-sticky-shell .product-table-sticky-table .table-group-row {
    display: table-row;
  }

  .design-preview--product-design-integrated .product-table-scroll-controls.is-overflowing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    min-height: 2.25rem;
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: var(--rule-thin) solid var(--color-rule);
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .product-table-scroll-controls--sticky.is-overflowing {
    min-height: 2.75rem;
    gap: var(--space-2xs);
    padding: 0 var(--space-xs);
    border-block-end-color: var(--color-rule);
    background: var(--section-tint-soft);
    color: var(--color-accent);
  }

  .design-preview--product-design-integrated .compare-scroll-controls.is-overflowing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    min-height: 2.25rem;
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: var(--rule-thin) solid var(--color-rule);
    background: var(--section-tint-soft);
  }

  .design-preview--product-design-integrated .product-table-scroll-controls::before {
    content: "列名を確認しながら横に送れます";
    margin-inline-end: auto;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .product-table-scroll-controls--sticky::before {
    content: none;
  }

  .design-preview--product-design-integrated .compare-scroll-controls::before {
    content: "比較表の隠れた列";
    margin-inline-end: auto;
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .product-table-scroll-cue {
    display: grid;
    place-items: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
  }

  .design-preview--product-design-integrated .compare-scroll-cue {
    display: grid;
    place-items: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
  }

  .design-preview--product-design-integrated .product-table-scroll-cue--start {
    background: linear-gradient(90deg, var(--section-tint) 30%, transparent);
  }

  .design-preview--product-design-integrated .product-table-scroll-cue--end {
    background: linear-gradient(90deg, transparent, var(--section-tint) 70%);
  }

  .design-preview--product-design-integrated .product-table-scroll-cue--sticky {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    border-inline-start: 0;
    background: transparent;
    color: var(--color-accent);
    font-size: var(--text-base);
  }

  .design-preview--product-design-integrated .product-table-scroll-cue--sticky:hover:not(:disabled),
  .design-preview--product-design-integrated .product-table-scroll-cue--sticky:focus-visible {
    background: var(--section-tint);
    color: var(--color-accent);
  }

  .design-preview--product-design-integrated .product-table-scroll-cue--sticky:disabled {
    opacity: .35;
    cursor: default;
  }

  .design-preview--product-design-integrated .compare-scroll-cue--start {
    background: linear-gradient(90deg, var(--section-tint) 30%, transparent);
  }

  .design-preview--product-design-integrated .compare-scroll-cue--end {
    background: linear-gradient(90deg, transparent, var(--section-tint) 70%);
  }

  .design-preview--product-design-integrated .product-table-scroll-cue[hidden] {
    display: none;
  }

  .design-preview--product-design-integrated .compare-scroll-cue[hidden] {
    display: none;
  }
}

@media (max-width: 59.99rem) {
  .design-preview--product-design-integrated .compare-warning {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .design-preview--product-design-integrated .compare-warning-kicker {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .design-preview--product-design-integrated .compare-warning > strong,
  .design-preview--product-design-integrated .compare-warning > span:last-child {
    grid-column: 2;
    grid-row: auto;
  }
}

@media (pointer: coarse) {
  .design-preview--product-design-integrated .compare-scroll-cue {
    width: var(--touch-height);
    min-width: var(--touch-height);
    height: var(--touch-height);
    min-height: var(--touch-height);
  }
}

.design-preview--product-design-integrated .compare-dock[hidden],
.design-preview--product-design-integrated .compare-drawer[hidden] {
  display: none;
}

.design-preview--product-design-integrated .compare-dock strong {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  letter-spacing: .02em;
}

.design-preview--product-design-integrated .compare-dock button,
.design-preview--product-design-integrated .compare-drawer-close {
  min-height: var(--touch-height);
  padding-inline: var(--space-sm);
  border: var(--rule-thin) solid currentColor;
  border-radius: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.design-preview--product-design-integrated .compare-dock-open {
  background: var(--color-paper);
  color: var(--color-ink);
}

.design-preview--product-design-integrated .compare-dock-open:disabled {
  cursor: default;
  opacity: .56;
}

.design-preview--product-design-integrated .compare-dock-clear,
.design-preview--product-design-integrated .compare-drawer-close {
  background: transparent;
  color: inherit;
}

.design-preview--product-design-integrated .compare-drawer {
  position: fixed;
  z-index: calc(var(--z-modal) - 1);
  inset: 0;
  overflow: auto;
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--color-deep) 72%, transparent);
}

.design-preview--product-design-integrated .compare-drawer-panel {
  width: min(78rem, 100%);
  min-height: calc(100dvh - (var(--space-sm) * 2));
  margin-inline: auto;
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.design-preview--product-design-integrated .compare-drawer-head {
  position: sticky;
  z-index: var(--z-raised);
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
}

.design-preview--product-design-integrated .compare-drawer-head p,
.design-preview--product-design-integrated .compare-drawer-head h2 {
  margin: 0;
}

.design-preview--product-design-integrated .compare-drawer-head p {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  text-transform: uppercase;
}

.design-preview--product-design-integrated .compare-drawer-close {
  color: var(--color-ink);
}

.design-preview--product-design-integrated .compare-drawer-body {
  padding: var(--space-lg);
}

.design-preview--product-design-integrated .compare-drawer-body .compare {
  margin: 0;
}

.compare-drawer-open {
  overflow: hidden;
}

@media (max-width: 35rem) {
  .design-preview--product-design-integrated .compare-dock {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-dock-clear {
    grid-column: auto;
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .compare-drawer,
  .design-preview--product-design-integrated .compare-drawer-body {
    padding: 0;
  }

  .design-preview--product-design-integrated .compare-drawer-panel {
    min-height: 100dvh;
    border: 0;
  }
}

@media (min-width: 60rem) and (pointer: fine) {
  .design-preview--product-design-integrated .compare-dock {
    max-width: 29rem;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-dock strong {
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .compare-dock button {
    min-height: 2.25rem;
    padding-inline: var(--space-xs);
    font-size: var(--text-sm);
  }
}

@media (min-width: 40rem) and (max-width: 59.99rem) and (pointer: fine) {
  .design-preview--product-design-integrated .compare-dock {
    max-width: 29rem;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
  }

  .design-preview--product-design-integrated .compare-dock strong {
    font-size: var(--text-xs);
  }

  .design-preview--product-design-integrated .compare-dock button {
    min-height: 2.25rem;
    padding-inline: var(--space-xs);
    font-size: var(--text-sm);
  }
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .journey-standard .journey-step-head {
    display: grid;
  }

  .design-preview--product-design-integrated .journey-standard-clear {
    justify-self: start;
  }

  .design-preview--product-design-integrated .standard-family summary {
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .standard-family-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-preview--product-design-integrated .standard-family-options .path-choice {
    min-height: var(--touch-height);
  }
}

@media (max-width: 31.25rem) {
  .design-preview--product-design-integrated .standard-family-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-preview--product-design-integrated .path-choice,
  .design-preview--product-design-integrated .path-choice::after,
  .design-preview--product-design-integrated .journey-submit {
    transition-duration: var(--dur-reduced);
  }
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .issue {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .design-preview--product-design-integrated .issue > p {
    grid-column: 2;
  }

  .design-preview--product-design-integrated .issue-priority {
    white-space: normal;
  }
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .filters.is-mobile-collapsible {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .design-preview--product-design-integrated .filters.is-mobile-collapsible > h2 {
    grid-column: 1;
    align-self: center;
    margin: 0;
  }

  .design-preview--product-design-integrated .mobile-filter-toggle {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    min-height: var(--touch-height);
    padding-inline: var(--space-sm);
    border: var(--rule-thin) solid var(--color-accent);
    background: transparent;
    color: var(--color-accent);
    font: 700 var(--text-sm)/1 var(--font-body);
  }

  .design-preview--product-design-integrated .filters.is-mobile-collapsed > :not(h2):not(.mobile-filter-toggle):not(.filter-summary) {
    display: none !important;
  }

  .design-preview--product-design-integrated .filters.is-mobile-collapsed > .filter-summary {
    grid-column: 1 / -1;
    margin-block-start: var(--space-xs);
  }

  .design-preview--product-design-integrated .toolbar {
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .design-preview--product-design-integrated .toolbar > .muted {
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  .design-preview--product-design-integrated .compare-add-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    padding: var(--space-xs) var(--space-sm);
  }

  .design-preview--product-design-integrated .compare-add-mode span {
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  .design-preview--product-design-integrated .compare-add-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    margin-inline-start: 0;
    padding-block-start: var(--space-2xs);
    border-block-start: var(--rule-thin) solid var(--color-rule);
  }

  .design-preview--product-design-integrated .compare-standard-scope {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .design-preview--product-design-integrated .compare-standard-scope > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .design-preview--product-design-integrated .compare-standard-details summary {
    display: flex;
    align-items: center;
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .compare-add-actions .linkbtn {
    grid-column: 2;
    grid-row: 1;
    min-height: var(--touch-height);
    margin-inline-start: auto;
  }

  .design-preview--product-design-integrated #selectionInfo {
    display: none;
  }

  .design-preview--product-design-integrated .result-context {
    min-height: var(--touch-height);
    padding-block: 0;
  }

  .design-preview--product-design-integrated .result-reset {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .product-card {
    padding-block: var(--space-sm);
  }

  .design-preview--product-design-integrated .product-card-top,
  .design-preview--product-design-integrated .compare-toggle,
  .design-preview--product-design-integrated .product-card-actions {
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .product-card > .sub {
    margin-block-start: 0;
  }

  .design-preview--product-design-integrated .product-card-meta {
    margin: var(--space-2xs) 0 var(--space-xs);
  }

  .design-preview--product-design-integrated .product-card-specs {
    margin: var(--space-xs) 0;
  }

  .design-preview--product-design-integrated .product-card-actions {
    padding-block-start: 0;
  }

  .design-preview--product-design-integrated .product-card-actions .linkbtn {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .compare-dock {
    inset-inline: max(var(--space-2xs), env(safe-area-inset-left)) max(var(--space-2xs), env(safe-area-inset-right));
    gap: 0;
    width: auto;
    max-width: 30rem;
    min-height: calc(var(--touch-height) + (2 * var(--rule-thin)));
    padding: 0;
  }

  .design-preview--product-design-integrated .compare-dock strong {
    padding-inline: var(--space-sm);
    white-space: nowrap;
  }

  .design-preview--product-design-integrated .compare-dock button {
    padding-inline: var(--space-sm);
  }
}

/* Text zoom can make rem-based carousel minimums wider than the viewport.
 * Bound those minimums to the viewport and let labels wrap instead of
 * clipping content behind the document edge. */
.design-preview--product-design-integrated .filters .field label {
  font-size: max(var(--text-xs), 12px);
}

@media (max-width: 39.99rem) {
  .design-preview--product-design-integrated .preview-nav {
    flex-wrap: wrap;
  }

  .design-preview--product-design-integrated .preview-nav-links {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .design-preview--product-design-integrated .preview-nav a,
  .design-preview--product-design-integrated .journey-help {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .design-preview--product-design-integrated .journey-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-preview--product-design-integrated .journey-choices {
    grid-auto-columns: min(17rem, 82vw);
  }

  .design-preview--product-design-integrated .coverage-card {
    min-width: 0;
    flex-basis: min(22rem, 88vw);
  }

  .design-preview--product-design-integrated .guide,
  .design-preview--product-design-integrated .guide:first-child,
  .design-preview--product-design-integrated .guide:nth-child(2) {
    min-width: 0;
    flex-basis: min(20rem, 86vw);
  }

  .design-preview--product-design-integrated .hero,
  .design-preview--product-design-integrated .hero-actions,
  .design-preview--product-design-integrated .hero-tools,
  .design-preview--product-design-integrated .hero-action-ledger,
  .design-preview--product-design-integrated .public-correction-action {
    min-width: 0;
    max-width: 100%;
  }

  .design-preview--product-design-integrated .hero-tools .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 37.5rem) and (max-width: 39.99rem) {
  .design-preview--product-design-integrated .mobile-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-md);
  }

  .design-preview--product-design-integrated .product-card {
    border-inline-start: var(--rule-thin) solid var(--color-rule-soft);
  }
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .design-preview--product-design-integrated .compare-table[data-products="1"] { min-width: 15rem; }
  .design-preview--product-design-integrated .compare-table[data-products="2"] { min-width: 23.75rem; }
  .design-preview--product-design-integrated .compare-table[data-products="3"] { min-width: 38rem; }
  .design-preview--product-design-integrated .compare-table[data-products="4"] { min-width: 48rem; }

  .design-preview--product-design-integrated .compare-table th,
  .design-preview--product-design-integrated .compare-table td {
    padding: var(--space-xs);
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  .design-preview--product-design-integrated .compare-table thead th {
    padding-block: 7px;
    padding-inline: var(--space-xs);
    font-size: var(--text-xs);
    line-height: 1.25;
  }

  .design-preview--product-design-integrated .compare-table tbody th,
  .design-preview--product-design-integrated .compare-table tbody td {
    line-height: 1.3;
  }

  .design-preview--product-design-integrated .compare-view-products {
    flex: 1 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 60rem) {
  .design-preview--product-design-integrated {
    padding-inline-start: var(--space-2xl);
  }

  .design-preview--product-design-integrated .preview-nav {
    position: static;
    inset: auto;
    width: auto;
    min-height: var(--space-2xl);
    padding: var(--space-sm) 0;
    border-block-end: var(--rule-thin) solid var(--color-rule);
    border-inline-end: 0;
    background: transparent;
    writing-mode: horizontal-tb;
  }

  .design-preview--product-design-integrated .preview-nav a {
    min-height: var(--touch-height);
  }

  .design-preview--product-design-integrated .preview-wordmark {
    transform: none;
  }
}