:root{color-scheme:dark;--bg:#101314;--panel:#171d1f;--panel2:#202729;--line:#334044;--text:#edf4ef;--muted:#a9b8b3;--faint:#74837f;--good:#4ed18a;--warn:#f0c35a;--bad:#ff6f73;--accent:#7ac7d8;--goodbg:rgba(78,209,138,.14);--warnbg:rgba(240,195,90,.16);--badbg:rgba(255,111,115,.16);font-family:"Segoe UI","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-width:0}body{background:radial-gradient(circle at 90% 0,rgba(122,199,216,.13),transparent 30%),linear-gradient(135deg,rgba(78,209,138,.06),transparent 36%),var(--bg);color:var(--text);overflow-x:hidden}button{font:inherit}.shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 38px}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,360px);gap:22px;align-items:center;padding:24px;border:1px solid var(--line);background:rgba(23,29,31,.9);box-shadow:0 18px 48px rgba(0,0,0,.36)}.kicker{margin:0 0 8px;color:var(--accent);font-size:.76rem;line-height:1.4;letter-spacing:0;text-transform:uppercase}h1,h2,h3,p{overflow-wrap:anywhere}h1{margin:0;font-size:clamp(2rem,6vw,4.8rem);line-height:1.06;letter-spacing:0}.lead{margin:14px 0 0;color:var(--muted);font-size:clamp(1rem,2vw,1.22rem);line-height:1.65}.device{width:100%;aspect-ratio:2/1;min-height:150px;border:1px solid var(--line);background:#0c1011}.desk{fill:#242d2f}.board{fill:#213437;stroke:var(--accent);stroke-width:2}.socket{fill:#1a2022;stroke:var(--warn);stroke-width:2}.pins circle{fill:var(--warn)}.slot{fill:#415156}.m2{fill:var(--good)}.psu{fill:#3b2d31;stroke:var(--bad);stroke-width:2}.cpu{fill:var(--accent)}.line{stroke:#a8b8b3;stroke-width:3;stroke-linecap:round}.notice,.panel,.shelf,.foot{border:1px solid var(--line);background:rgba(23,29,31,.9)}.notice{margin-top:16px;padding:14px 16px;color:var(--muted);line-height:1.75;border-left:4px solid var(--warn)}.topgrid{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:16px;margin-top:16px}.panel,.foot{padding:18px}.panel h2,.shelf h2{margin:0 0 14px;font-size:1.08rem;line-height:1.3}.split{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.split h2{margin-bottom:0}#reset{min-height:38px;padding:0 14px;border:1px solid var(--line);background:#111719;color:var(--text);cursor:pointer}#reset:hover{border-color:var(--accent)}.choices{display:grid;gap:8px}.choices.cpu{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}.choice{display:block;width:100%;min-height:78px;padding:11px;border:1px solid var(--line);background:#12181a;color:var(--text);text-align:left;cursor:pointer}.choice:hover{border-color:var(--accent);background:#182225}.choice.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.choice.good{border-left:4px solid var(--good)}.choice.warn{border-left:4px solid var(--warn)}.choice.bad{border-left:4px solid var(--bad)}.name{display:block;font-weight:700;line-height:1.35}.meta,.why{display:block;margin-top:6px;color:var(--muted);font-size:.84rem;line-height:1.45}.tag{display:inline-flex;min-height:24px;align-items:center;margin-top:8px;padding:2px 8px;border:1px solid var(--line);color:var(--muted);font-size:.78rem}.tag.good{color:var(--good);border-color:var(--good);background:var(--goodbg)}.tag.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}.tag.bad{color:var(--bad);border-color:var(--bad);background:var(--badbg)}.summary{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;margin:0}.summary dt{color:var(--faint);font-size:.82rem}.summary dd{margin:0;min-width:0;line-height:1.4}.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.meter{padding:10px;border:1px solid var(--line);background:#111719}.meter strong{display:block;font-size:1.34rem;line-height:1.1}.meter span{color:var(--muted);font-size:.76rem}.shelf{margin-top:16px}.shelfhead{padding:18px 18px 0;align-items:end}.candidate{max-width:520px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.55;text-align:right}.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}.parts section{min-width:0;padding:14px;border:1px solid var(--line);background:rgba(17,23,25,.8)}.parts h3{margin:0 0 12px;font-size:1.02rem}.results{margin-top:16px}.overall{margin:0;min-height:32px;padding:6px 10px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}.overall.good{color:var(--good);border-color:var(--good);background:var(--goodbg)}.overall.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}.overall.bad{color:var(--bad);border-color:var(--bad);background:var(--badbg)}.checks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}.check{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--line);background:#111719}.check.good{border-left:4px solid var(--good);background:var(--goodbg)}.check.warn{border-left:4px solid var(--warn);background:var(--warnbg)}.check.bad{border-left:4px solid var(--bad);background:var(--badbg)}.check b{line-height:1.35}.check span{color:var(--muted);line-height:1.55}.log{margin-top:14px;padding:14px;border:1px dashed var(--line);background:rgba(10,13,14,.55);color:var(--muted);line-height:1.65}.foot{margin-top:16px;color:var(--muted);line-height:1.65}.foot p{margin:4px 0}@media(max-width:940px){.hero,.topgrid,.parts{grid-template-columns:1fr}.device{max-width:520px;justify-self:center}.shelfhead{align-items:start;flex-direction:column}.candidate{text-align:left}}@media(max-width:520px){.shell{width:min(100% - 20px,1180px);padding-top:14px}.hero,.panel,.foot{padding:14px}.notice{padding:12px 14px}h1{font-size:clamp(1.9rem,10.6vw,2.7rem)}.device{min-height:128px}.choices.cpu,.meters{grid-template-columns:1fr}.summary,.check{grid-template-columns:1fr}.parts{padding:12px}.split{flex-direction:column}.overall{white-space:normal}}
.data-status{margin:18px 0 0;padding:10px 12px;border:1px solid rgba(148,163,184,.3);border-radius:10px;background:rgba(15,23,42,.72);color:#cbd5e1;font-size:.92rem;line-height:1.55}.data-status.ok{border-color:rgba(34,197,94,.45);color:#bbf7d0}.data-status.error{border-color:rgba(248,113,113,.55);color:#fecaca}.data-status.loading{border-color:rgba(250,204,21,.35);color:#fde68a}

/* Visual build bench */
.workbench-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}.control-stack{min-width:0}.control-stack .topgrid{margin-top:0}.visual-bench{position:sticky;top:14px;padding:16px;overflow:hidden}.visual-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.visual-head h2{margin:0;font-size:1.08rem;line-height:1.3}.visual-overall{margin:0;min-height:30px;padding:5px 9px;border:1px solid var(--line);color:var(--muted);font-size:.82rem;line-height:1.35;white-space:nowrap}.visual-overall.good{color:var(--good);border-color:var(--good);background:var(--goodbg)}.visual-overall.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}.visual-overall.bad{color:var(--bad);border-color:var(--bad);background:var(--badbg)}.visual-svg-wrap{border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,16,17,.9),rgba(8,11,12,.92));padding:10px}.visual-svg{display:block;width:100%;height:auto;min-height:286px}.bench-bg{fill:#0b0f10;stroke:#263336;stroke-width:1}.visual-shape{fill:#182123;stroke:var(--line);stroke-width:2;transition:fill .2s ease,stroke .2s ease,stroke-width .15s ease,opacity .2s ease}.case-shell{fill:rgba(22,29,31,.62)}.board-plate{fill:#182d30}.cpu-socket{fill:#161d1f}.cooler-block{fill:#20292c}.mem-slot{fill:#233033}.m2-stick{fill:#203033}.pcie-slot{fill:#333f43}.gpu-card{fill:#271f28}.psu-box{fill:#2a2224}.visual-dot{fill:var(--muted)}.visual-label{fill:var(--muted);font-size:10px;font-weight:700;letter-spacing:0}.visual-cable,.flow-arrow{fill:none;stroke:#657470;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 7}.visual-cable{pointer-events:none}.flow-arrow{stroke-width:2;opacity:.45}.visual-reject{opacity:0;fill:none;stroke:var(--bad);stroke-width:4;stroke-linecap:round;pointer-events:none}.visual-part.good .visual-shape{fill:var(--goodbg);stroke:var(--good)}.visual-part.good .visual-label{fill:var(--good)}.visual-part.warn .visual-shape{fill:var(--warnbg);stroke:var(--warn);stroke-dasharray:6 4}.visual-part.warn .visual-label{fill:var(--warn)}.visual-part.bad .visual-shape{fill:var(--badbg);stroke:var(--bad)}.visual-part.bad .visual-label{fill:var(--bad)}.visual-part.bad .visual-reject{opacity:.9}.visual-part.warn .visual-cable{stroke:var(--warn)}.visual-part.good .visual-cable{stroke:var(--good);stroke-dasharray:none}.visual-part.bad .visual-cable{stroke:var(--bad);stroke-dasharray:4 6}.visual-jump{cursor:pointer}.visual-jump:hover .visual-shape,.visual-jump:focus-visible .visual-shape{stroke-width:3}.visual-jump:hover .visual-label,.visual-jump:focus-visible .visual-label{text-decoration:underline;text-decoration-thickness:1px}.visual-jump:focus{outline:none}.visual-jump:focus-visible .visual-label{paint-order:stroke;stroke:#0b0f10;stroke-width:2px}.visual-nav-note{margin:8px 0 0;color:var(--accent);font-size:.78rem;line-height:1.55}.visual-readout{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 10px;margin:12px 0 0;padding:10px;border:1px solid var(--line);background:#111719}.visual-readout dt{color:var(--faint);font-size:.76rem}.visual-readout dd{margin:0;color:var(--text);font-size:.82rem;line-height:1.35;min-width:0;overflow-wrap:anywhere}.visual-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px;color:var(--muted);font-size:.78rem}.visual-legend span{display:inline-flex;align-items:center;gap:6px}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid currentColor}.legend-dot.good{color:var(--good);background:var(--goodbg)}.legend-dot.warn{color:var(--warn);background:var(--warnbg)}.legend-dot.bad{color:var(--bad);background:var(--badbg)}.visual-note{margin:10px 0 0;color:var(--faint);font-size:.78rem;line-height:1.55}@media(max-width:1120px){.workbench-grid{grid-template-columns:1fr}.visual-bench{position:relative;top:auto}.visual-svg-wrap{max-width:560px;margin:0 auto}.control-stack .topgrid{margin-top:16px}}@media(max-width:520px){.workbench-grid{margin-top:12px}.visual-bench{padding:14px}.visual-head{flex-direction:column}.visual-overall{white-space:normal}.visual-svg{min-height:238px}.visual-svg-wrap{padding:8px}.visual-readout{grid-template-columns:68px minmax(0,1fr);gap:5px 8px}.visual-label{font-size:9px}.control-stack .topgrid{margin-top:12px}}

/* Horizontal card-row prototype: 2026-07-07 */
.panel,.topgrid{min-width:0}
.choices{
  display:grid;
  width:100%;
  max-width:100%;
  min-width:0;
  grid-auto-flow:column;
  grid-auto-columns:clamp(220px,28vw,280px);
  grid-template-columns:none;
  align-items:stretch;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 12px;
  margin-inline:-2px;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(122,199,216,.45) transparent;
}
.choices.cpu{
  grid-template-columns:none;
  grid-auto-columns:clamp(230px,32vw,292px);
}
.choices::-webkit-scrollbar{height:8px}
.choices::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.choices::-webkit-scrollbar-thumb{background:rgba(122,199,216,.45);border-radius:999px}
.choices::-webkit-scrollbar-thumb:hover{background:rgba(122,199,216,.7)}
.choice{
  min-width:0;
  min-height:118px;
  height:100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
}
.choice .tag{align-self:flex-start}
.choice .why{margin-top:auto;padding-top:6px}
.choice.selected{
  border-color:var(--accent);
  background:linear-gradient(180deg,rgba(122,199,216,.13),rgba(18,24,26,.96));
  box-shadow:inset 0 0 0 1px var(--accent),0 0 0 1px rgba(122,199,216,.16);
}
.choice:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.parts{grid-template-columns:repeat(2,minmax(0,1fr))}
.parts section{overflow:hidden}
@media(max-width:940px){
 .parts{grid-template-columns:1fr}
 .choices,.choices.cpu{grid-auto-columns:clamp(220px,42vw,286px)}
}
@media(max-width:520px){
 .choices,.choices.cpu{
 grid-auto-columns:minmax(78vw,84vw);
 gap:9px;
 padding-bottom:11px;
 }
 .choice{min-height:112px}
}

/* Mobile entry to the first build step: 2026-07-13 */
.hero-actions{display:flex;margin-top:18px}
.bench-entry{display:inline-flex;align-items:center;gap:12px;min-height:42px;padding:8px 12px;border:1px solid var(--accent);background:rgba(122,199,216,.08);color:var(--text);font-weight:700;line-height:1.35;text-decoration:none}
.bench-entry small{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:0}
.bench-entry::after{content:"↓";color:var(--accent);font-size:1rem}
.bench-entry:hover{background:rgba(122,199,216,.15)}
.bench-entry:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#cpu-start,.parts-target{scroll-margin-top:24px}
@media(max-width:520px){
 .hero-actions{margin-top:16px}
 .bench-entry{width:100%;justify-content:space-between}
 #cpu-start,.parts-target{scroll-margin-top:32px}
}

/* Static supported-scope note: 2026-07-13 */
.scope-note{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:16px 24px;margin-top:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scope-intro h2{margin:0 0 8px;font-size:1rem;line-height:1.35}
.scope-intro>p:last-child{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.scope-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;list-style:none;margin:0;padding:0}
.scope-list li{min-width:0;padding-bottom:7px;border-bottom:1px solid rgba(51,64,68,.72);font-size:.84rem;line-height:1.5}
.scope-list strong,.scope-list span{display:block}
.scope-list strong{color:var(--text)}
.scope-list span{margin-top:2px;color:var(--muted)}
@media(max-width:720px){
 .scope-note{grid-template-columns:1fr;gap:12px;padding:14px 0}
}
@media(max-width:420px){
 .scope-list{grid-template-columns:1fr;gap:6px}
 .scope-list li{padding-bottom:6px}
}

/* Selected-part state clarity: 2026-07-15 */
.choice.selected{
  box-shadow:inset 0 0 0 2px rgba(122,199,216,.72),0 0 0 1px rgba(122,199,216,.2);
}
.choice.selected.good{border-left-width:4px;border-left-color:var(--good)}
.choice.selected.warn{border-left-width:4px;border-left-color:var(--warn)}
.choice.selected.bad{border-left-width:4px;border-left-color:var(--bad)}
.choice-state{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:24px;margin-top:8px}
.selected-flag,.choice-verdict{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border:1px solid var(--line);font-size:.76rem;font-weight:700;line-height:1.2;white-space:nowrap}
.selected-flag{color:var(--text);border-color:var(--accent);background:rgba(122,199,216,.13)}
.choice-verdict{gap:4px}
.choice-verdict.good{color:var(--good);border-color:var(--good);background:var(--goodbg)}
.choice-verdict.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}
.choice-verdict.bad{color:var(--bad);border-color:var(--bad);background:var(--badbg)}