:root {
  color-scheme:dark;
  --bg:#0c1017;
  --paper:#121923;
  --ink:#edf2f7;
  --ink-soft:#96a4b7;
  --line:#263140;
  --accent:#9de6bd;
  --spark:#e9bc72;
  --you:#9de6bd;
  --mono:"IBM Plex Mono",monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
}

button,input,select {
  font:inherit;
}

button,a,input,summary,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 16px;
  background:#192330;
  color:var(--ink);
  cursor:pointer;
  font-weight:500;
  transition:background .16s,border-color .16s,transform .16s;
}

button:hover {
  background:#243343;
  border-color:#53657b;
}

button:active {
  transform:translateY(1px);
}

button:disabled {
  opacity:.3;
  cursor:default;
}

button.primary,.custom button.add {
  background:var(--accent);
  color:#10261c;
  border-color:var(--accent);
  font-weight:600;
}

button.primary:hover,.custom button.add:hover {
  background:#bbf5d3;
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

input,select {
  color:var(--ink);
  background:#0d141e;
  border:1px solid var(--line);
  border-radius:9px;
  min-height:46px;
  padding:11px 12px;
  min-width:0;
}

input::placeholder {
  color:#8290a3;
}

input[type=checkbox] {
  min-height:0;
  accent-color:var(--accent);
  width:16px;
  height:16px;
  cursor:pointer;
}

.site-header {
  height:80px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border-bottom:1px solid var(--line);
  background:#0e141d;
}

.wordmark {
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  font-size:23px;
  font-weight:600;
  letter-spacing:-1px;
}

.wordmark>span:not(.brand-icon):not(.beta) {
  color:var(--accent);
}

.brand-icon {
  display:grid;
  place-items:center;
  background:#9de6bd14;
  border:1px solid #9de6bd40;
  border-radius:10px;
  width:36px;
  height:36px;
  margin-right:12px;
  color:var(--accent);
  font-size:26px;
}

.beta {
  font:10px var(--mono);
  letter-spacing:1.5px;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:5px;
  padding:5px 7px;
  margin-left:16px;
}

.header-note {
  color:#79899e;
  font-size:13px;
}

#catalog-toggle {
  display:none;
}

.app {
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  max-width:1920px;
  margin:auto;
}

.sidebar {
  border-right:1px solid var(--line);
  padding:28px 20px;
  height:calc(100dvh - 80px);
  position:sticky;
  top:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#344359 transparent;
  background:#101620;
}

.eyebrow {
  font:10px var(--mono);
  letter-spacing:1.8px;
  color:var(--accent);
  margin-bottom:12px;
}

.brand h1 {
  font-size:23px;
  letter-spacing:-.6px;
  margin:0 0 8px;
  font-weight:500;
}

.brand p {
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.6;
  margin:0 0 22px;
}

.search {
  width:100%;
  background:#171f2b;
}

.section-label {
  display:flex;
  justify-content:space-between;
  margin:24px 2px 12px;
  color:#8695aa;
  text-transform:uppercase;
  font:10px var(--mono);
  letter-spacing:1.4px;
}

.device-list {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.device {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:12px 10px;
  border:1px solid transparent;
  border-radius:12px;
  background:#151d28;
}

.device:hover {
  border-color:#354458;
}

.device.has {
  background:#162c27;
  border-color:#3d6e57;
}

.device .name {
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.device .spec {
  font:10px var(--mono);
  color:var(--ink-soft);
  margin-top:5px;
  line-height:1.6;
}

.qty {
  display:flex;
  align-items:center;
  gap:4px;
}

.qty button {
  padding:0;
  width:34px;
  min-height:40px;
  font-size:20px;
  background:#202b39;
  border-color:transparent;
  border-radius:8px;
}

.qty button[data-act=inc] {
  color:var(--accent);
}

.qty .n {
  font:12px var(--mono);
  min-width:18px;
  text-align:center;
}

.custom {
  margin-top:18px;
  border:1px dashed #3c4a5d;
  border-radius:12px;
}

.custom summary {
  cursor:pointer;
  padding:16px;
  color:var(--ink-soft);
  font-size:13px;
  list-style:none;
}

.custom-fields {
  padding:0 12px 12px;
  display:grid;
  gap:10px;
}

.custom input,.custom select,.custom button {
  width:100%;
}

.row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.main {
  min-width:0;
  padding:34px 32px;
  background:radial-gradient(ellipse at 70% 0,#17332a25,transparent 50%);
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.totals {
  min-width:0;
}

.totals h2 {
  font-size:clamp(25px,2.5vw,38px);
  font-weight:500;
  letter-spacing:-1.2px;
  margin:0;
}

.totals .sub {
  color:var(--ink-soft);
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
}

.controls {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:290px;
}

.controls button {
  font-size:12px;
}

.controls #reset {
  background:transparent;
  color:var(--ink-soft);
}

.chart-card {
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg,#131c27,#101720);
  box-shadow:0 20px 60px #0002;
}

.chart-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}

.chart-toolbar>div {
  display:flex;
  align-items:center;
  gap:10px;
}

.chart-toolbar strong {
  font-size:13px;
  font-weight:500;
}

.live-dot {
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 12px #9de6bd60;
}

.scale-note {
  font:9px var(--mono);
  color:#8290a3;
  letter-spacing:1px;
  margin-left:6px;
}

.chk {
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  font-size:12px;
  color:var(--ink-soft);
  min-height:32px;
}

.chart-wrap {
  height:clamp(370px,52vh,640px);
  padding:12px 10px 0;
}

.chart-wrap svg {
  width:100%;
  height:100%;
  display:block;
}

.axis-title {
  font:10px var(--sans);
  fill:#93a4b9;
}

.tick text {
  font:10px var(--mono);
  fill:#8192a9;
}

.grid line {
  stroke:#263140;
  stroke-opacity:.55;
}

.grid line.major {
  stroke:#2c3949;
  stroke-opacity:.7;
}

.ref-dot {
  fill:#8395ac;
  opacity:.8;
}

.ref-dot.spark {
  fill:var(--spark);
}

.ref-label {
  font:10px var(--sans);
  fill:#a3b1c3;
}

.you-dot {
  fill:var(--you);
  stroke:#dbffe9;
  stroke-width:2;
}

.you-halo {
  fill:none;
  stroke:var(--you);
  stroke-opacity:.14;
  stroke-width:12;
}

.ghost-part {
  fill:#7fafff;
  opacity:.8;
}

.chart-legend {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  padding:16px 22px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--ink-soft);
}

.chart-legend span {
  display:flex;
  align-items:center;
  gap:7px;
}

.chart-legend i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8395ac;
}

.chart-legend .legend-you {
  background:var(--you);
}

.chart-legend .legend-spark {
  background:var(--spark);
}

.legend-note {
  margin-left:auto;
  color:#798a9f;
}

.footer {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:18px;
  margin-top:22px;
}

.build-table,.caveats {
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  background:#111822;
  min-width:0;
}

h3 {
  font-size:14px;
  font-weight:500;
  margin:0 0 18px;
}

.small-label {
  float:right;
  font:9px var(--mono);
  color:#8192a9;
  margin-top:4px;
  letter-spacing:1px;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

th,td {
  padding:11px 4px;
  border-bottom:1px solid #263140;
  text-align:left;
}

th {
  font-size:10px;
  font-weight:400;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.8px;
}

td.num,th.num {
  text-align:right;
  font-family:var(--mono);
  white-space:nowrap;
}

tbody tr:last-child td {
  border-bottom:0;
}

.caveats p {
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.8;
  margin:0 0 10px;
}

.caveats p:last-child {
  margin:0;
}

.caveats strong {
  font-weight:500;
  color:#c9d5e3;
}

.empty {
  color:var(--ink-soft);
  padding:24px 0;
}

.tooltip {
  position:fixed;
  pointer-events:none;
  background:#223144;
  color:var(--ink);
  padding:10px 12px;
  border:1px solid #455871;
  border-radius:8px;
  font-size:12px;
  z-index:60;
  max-width:240px;
  display:none;
  box-shadow:0 8px 30px #0006;
}

.modal {
  position:fixed;
  inset:0;
  background:#050911cc;
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  z-index:80;
  padding:20px;
}

.modal[hidden] {
  display:none;
}

.modal-card {
  width:min(760px,100%);
  max-height:90dvh;
  overflow:auto;
  background:var(--paper);
  border:1px solid #344459;
  border-radius:20px;
  padding:24px;
  box-shadow:0 24px 100px #0008;
}

.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.modal-head h2 {
  font-weight:500;
  font-size:24px;
  letter-spacing:-.6px;
  margin:0;
}

.icon-x {
  font-size:24px;
  padding:0;
  width:44px;
  background:transparent;
}

.modal-note {
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.7;
  margin:16px 0;
}

#share-preview {
  width:100%;
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
}

.share-caption {
  font:11px/1.7 var(--mono);
  color:var(--ink-soft);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.modal-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.modal-actions button {
  font-size:12px;
}

@media(min-width:1600px) {
  .main {
    padding:40px 48px;
  }
  .topbar {
    margin-bottom:34px;
  }
  .controls {
    max-width:none;
  }
}

@media(max-width:1150px) {
  .app {
    grid-template-columns:310px minmax(0,1fr);
  }
  .sidebar {
    padding:24px 14px;
  }
  .main {
    padding:26px 20px;
  }
  .topbar {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  .controls {
    max-width:none;
    justify-content:flex-start;
  }
  .chart-toolbar {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .footer {
    grid-template-columns:1fr;
  }
  .legend-note {
    display:none;
  }
}

@media(max-width:760px) {
  .site-header {
    height:70px;
    padding:0 16px;
    position:sticky;
    top:0;
    z-index:30;
  }
  .wordmark {
    font-size:20px;
  }
  .brand-icon {
    width:30px;
    height:30px;
    font-size:22px;
    margin-right:8px;
  }
  .beta,.header-note {
    display:none;
  }
  #catalog-toggle {
    display:block;
    font-size:12px;
    background:var(--accent);
    color:#10261c;
    border:0;
    padding:10px 12px;
  }
  .app {
    display:block;
  }
  .sidebar {
    display:none;
    position:relative;
    top:auto;
    height:auto;
    max-height:65dvh;
    border-right:0;
    border-bottom:1px solid #456350;
    padding:22px 16px;
  }
  .sidebar.is-open {
    display:block;
  }
  .brand p {
    margin-bottom:16px;
  }
  .device .name {
    font-size:14px;
  }
  .device .spec {
    font-size:11px;
  }
  .qty button {
    width:44px;
    min-height:44px;
  }
  .qty .n {
    min-width:24px;
  }
  .main {
    padding:26px 14px;
  }
  .totals h2 {
    font-size:30px;
  }
  .topbar {
    gap:20px;
    margin-bottom:22px;
  }
  .controls {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr auto;
  }
  .controls #example-hybrid {
    grid-column:1/-1;
    order:4;
    background:transparent;
    border-style:dashed;
    color:var(--ink-soft);
  }
  .controls button {
    padding:10px 12px;
  }
  .chart-toolbar {
    padding:14px 16px;
  }
  .chart-toolbar strong {
    font-size:12px;
  }
  .scale-note {
    font-size:8px;
  }
  .chart-toggles {
    gap:18px!important;
  }
  .chart-wrap {
    height:360px;
    padding:4px 2px 0;
  }
  .chart-legend {
    gap:12px;
    padding:14px 12px;
    font-size:10px;
  }
  .footer {
    gap:14px;
    margin-top:16px;
  }
  .build-table,.caveats {
    padding:18px 14px;
  }
  .small-label {
    font-size:8px;
  }
  td,th {
    padding:10px 3px;
  }
  td:first-child {
    max-width:125px;
    overflow-wrap:anywhere;
  }
  input,select {
    font-size:16px;
  }
  .modal {
    padding:10px;
  }
  .modal-card {
    padding:18px;
    border-radius:16px;
  }
  .modal-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .modal-actions .primary {
    grid-column:1/-1;
  }
  .ref-label {
    font-size:9px;
  }
  .axis-title {
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

.main>.build-table {
  margin-bottom:22px;
  background:linear-gradient(110deg,#182920,#141e28 65%);
  border-color:#365344;
  box-shadow:0 8px 30px #0002;
}

.build-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.build-heading h3 {
  font-size:21px;
  margin:0;
  letter-spacing:-.4px;
}

.build-heading .eyebrow {
  font-size:9px;
  margin-bottom:8px;
}

.build-heading>button {
  color:var(--accent);
  background:#9de6bd0c;
  border-color:#41604e;
  font-size:12px;
}

.build-count {
  font:11px var(--mono);
  color:var(--ink-soft);
  margin-left:12px;
  letter-spacing:0;
}

.build-qty {
  justify-content:flex-end;
}

.build-table-scroll {
  overflow-x:auto;
}

.presets {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:8px;
}

.presets>span {
  font:9px var(--mono);
  color:var(--ink-soft);
  letter-spacing:1px;
  margin-right:6px;
}

.presets button {
  font-size:11px;
  min-height:38px;
  padding:8px 12px;
  background:#16202a;
}

.presets small {
  color:#90a397;
  margin-left:8px;
  font:10px var(--mono);
}

.footer {
  grid-template-columns:1fr;
}

.caveats {
  background:transparent;
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:#d0f5df;
  color:#173423;
  box-shadow:0 8px 40px #0005;
  padding:14px 20px;
  border-radius:12px;
  font-size:13px;
  max-width:calc(100% - 28px);
  width:max-content;
}

.toast[hidden] {
  display:none;
}

.sidebar {
  scroll-margin-top:70px;
}

@media(max-width:760px) {
  .build-heading {
    align-items:flex-start;
  }
  .build-heading .eyebrow {
    display:none;
  }
  .build-heading h3 {
    font-size:20px;
  }
  .build-count {
    display:block;
    margin:6px 0 0;
    font-size:10px;
  }
  .build-qty {
    gap:2px;
  }
  .build-qty button {
    width:44px;
    min-height:44px;
  }
  .build-qty .n {
    min-width:18px;
  }
  .build-table table {
    font-size:11px;
  }
  .build-table th {
    font-size:9px;
  }
  .presets {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .presets>span {
    grid-column:1/-1;
    margin-bottom:2px;
  }
  .presets button {
    padding:10px 4px;
    font-size:10px;
  }
  .presets small {
    display:block;
    margin:5px 0 0;
    font-size:9px;
  }
  .toast {
    bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .build-table td:first-child {
    max-width:100px;
  }
  .main>.build-table {
    padding:16px 10px;
  }
}

@media (max-width: 480px) {
  .build-table thead { display: none; }
  .build-table table, .build-table tbody { display: block; }
  .build-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .build-table td { padding: 0; border: 0; }
  .build-table td:first-child { max-width: none; font-size: 13px; }
  .build-table td[data-label] { text-align: left; font-size: 11px; }
  .build-table td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--ink-soft);
    font: 10px var(--sans);
    margin-right: 6px;
  }
  .build-table td[data-label="FP32"] { text-align: right; }
  .build-table td.empty { grid-column: 1 / -1; line-height: 1.7; }
  .build-table tbody tr:last-child { border-bottom: 0; }
  .main > .build-table { padding: 16px 14px; }
}

/* Owned hardware stays visually distinct from the reference fleet. */
.ref-dot { opacity: .48; }
.ref-label { fill: #8190a4; }
.you-dot { fill: #b4ffd3; stroke: #effff5; stroke-width: 3; }
.you-halo { stroke-width: 12; stroke-opacity: .16; }
.you-ring { fill: none; stroke: #9de6bd; stroke-width: 2; }
.part-halo { fill: #85b7ff; fill-opacity: .12; pointer-events: none; }
.owned-part { fill: #85b7ff; stroke: #e0edff; stroke-width: 2; }
.owned-label path { fill: none; stroke: #85b7ff; stroke-width: 1.2; stroke-opacity: .75; }
.owned-label rect { fill: #172b45; stroke: #719bd0; stroke-width: 1; }
.owned-label text { fill: #dceaff; font: 600 10px var(--mono); }
.build-label path { stroke: #9de6bd; }
.build-label rect { fill: #b4ffd3; stroke: #e1ffec; }
.build-label text { fill: #10261c; }
.chart-legend .legend-part { background: #85b7ff; border-radius: 1px; transform: rotate(45deg); }
.chart-legend .legend-you { box-shadow: 0 0 0 3px #9de6bd30; }

/* Comfortable reading sizes and a roomier chart. */
body { font-size: 16px; }
.header-note, .brand p, .totals .sub { font-size: 15px; }
.eyebrow { font-size: 11px; }
.device .name { font-size: 15px; }
.device .spec { font-size: 12px; }
.qty .n { font-size: 14px; }
.qty button { width: 38px; min-height: 44px; }
.section-label { font-size: 11px; }
.controls button, .build-heading > button, .custom summary { font-size: 14px; }
.build-count { font-size: 13px; }
.build-heading .eyebrow { font-size: 11px; }
.build-table table { font-size: 14px; }
.build-table th { font-size: 12px; }
.presets > span { font-size: 10px; }
.presets button { font-size: 13px; min-height: 44px; }
.presets small { font-size: 11px; }
.chart-wrap { height: clamp(480px, 61vh, 760px); }
.chart-toolbar strong { font-size: 16px; }
.scale-note { font-size: 10px; }
.chk { font-size: 14px; min-height: 44px; }
.chart-legend { font-size: 13px; }
.tick text { font-size: 12px; fill: #adbbcd; }
.axis-title { font-size: 12px; fill: #bac8da; }
.ref-label { font-size: 12px; fill: #b2c0d2; paint-order: stroke; stroke: #111923; stroke-width: 4px; stroke-linejoin: round; }
.reference-caption path { fill: none; stroke: #63758d; stroke-opacity: .5; stroke-width: 1; }
.owned-label text { font-size: 12px; }
.grid line { stroke: #304054; stroke-opacity: .5; }
.grid line.major { stroke: #35475e; stroke-opacity: .65; }
.caveats h3 { font-size: 17px; }
.caveats p, .modal-note { font-size: 14px; }
.share-caption { font-size: 13px; }
.modal-actions button { font-size: 14px; }
@media (min-width: 1151px) {
  .app { grid-template-columns: 370px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .chart-wrap { height: 460px; }
  .chart-toolbar strong { font-size: 15px; }
  .chart-legend { font-size: 12px; gap: 14px; }
  .device .name { font-size: 15px; }
  .device .spec { font-size: 12px; }
  .qty button { width: 44px; }
  .controls button { font-size: 13px; }
  .build-heading > button { font-size: 13px; }
  .presets button { font-size: 12px; }
  .presets small { font-size: 10px; }
  .owned-label text { font-size: 11px; }
  .ref-label { font-size: 11px; }
  .tick text, .axis-title { font-size: 11px; }
}
@media (max-width: 480px) {
  .build-table td:first-child { font-size: 15px; }
  .build-table td[data-label] { font-size: 13px; }
  .build-table td[data-label]::before { font-size: 12px; }
  .build-count { font-size: 12px; }
  .presets { grid-template-columns: 1fr; }
  .presets button { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 13px; }
  .presets small { margin: 0; font-size: 11px; }
}

.catalog-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.catalog-filters select { width: 100%; font-size: 13px; padding: 10px 8px; }
.device .device-info { text-align: left; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); }
.device-info span { color: var(--ink-soft); font-size: 12px; }
.device-info:hover { color: var(--accent); }
.device .spec { line-height: 1.7; }
.presets { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }
.presets > span { grid-column: 1 / -1; }
.presets button { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.presets small { margin: 0; }
.ref-dot[role=button] { cursor: pointer; pointer-events: all; stroke: transparent; stroke-width: 16px; }
.ref-dot[role=button]:hover, .ref-dot[role=button]:focus { opacity: 1; stroke: #9de6bd55; stroke-width: 8px; outline: none; }
.hardware-card { max-width: 600px; }
.hardware-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 16px; }
.hardware-stats > div { padding: 18px; background: #0c131d; border: 1px solid var(--line); border-radius: 12px; }
.hardware-stats span { display: block; font: 11px var(--mono); color: var(--ink-soft); margin-bottom: 10px; }
.hardware-stats strong { font-size: clamp(24px,5vw,34px); color: var(--accent); font-weight: 500; }
.data-basis { font-size: 13px; color: var(--spark); }
.hardware-note { font-size: 15px; line-height: 1.8; color: #c1cddd; }
.hardware-footnote { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin: 22px 0; }
.source-links { display: flex; flex-direction: column; gap: 10px; }
.source-links a { color: var(--accent); font-size: 14px; text-underline-offset: 4px; padding: 5px 0; }
.brand-icon { background: none; border: 0; }
@media (max-width: 480px) { .presets { grid-template-columns: 1fr 1fr; } .presets button { font-size: 12px; padding: 12px 8px; } .presets small { font-size: 10px; } .hardware-stats > div { padding: 14px; } }

/* A quiet, readable hardware workbench. */
:root { --bg:#171a1e; --paper:#202429; --ink:#edece7; --ink-soft:#aeb2b7; --line:#3a4047; --accent:#b5c8bf; --you:#b5dec8; --mono:var(--sans); }
body { font-size:16px; }
.main { background:none; }
.site-header { background:#1c2024; border-bottom:1px solid var(--line); }
.wordmark { flex-shrink:0; white-space:nowrap; font-family:"Fraunces",Georgia,serif; letter-spacing:-1px; }
.wordmark span { color:var(--ink-soft); }
.brand-icon { display:none; }
.header-note { font-size:15px; }
.eyebrow { font-size:12px; letter-spacing:.07em; color:var(--ink-soft); }
.sidebar { background:#1b1f23; }
.brand h1 { font-family:"Fraunces",Georgia,serif; font-size:30px; }
.brand p { font-size:15px; }
.main>.build-table,.chart-card,.caveats { background:var(--paper); border:1px solid var(--line); box-shadow:none; border-radius:8px; }
button { background:#2a3036; border-color:#474f56; border-radius:5px; }
button:hover { background:#343d44; border-color:#7a898a; }
button.primary,.custom button.add { background:var(--accent); border-color:var(--accent); color:#192a23; }
input,select { background:#191d21; border-color:#495159; border-radius:5px; }
.live-dot { display:none; }
.chart-toolbar { border-bottom:1px solid var(--line); }
.scale-note { letter-spacing:.04em; }
.build-heading h3 { font-family:"Fraunces",Georgia,serif; font-size:27px; overflow-wrap:anywhere; }
.build-count { font-family:var(--sans); font-size:13px; background:transparent; color:var(--ink-soft); border:0; }
.build-library { padding:16px 0; margin:8px 0 12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.library-switch { display:flex; align-items:center; gap:12px; }
.library-switch label { color:var(--ink-soft); white-space:nowrap; }
.library-switch select { flex:1; min-width:0; width:auto; font-size:16px; }
.library-switch button { white-space:nowrap; }
.library-actions button { font-size:13px; }
.library-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
#library-status { margin:10px 0 0; color:var(--ink-soft); font-size:14px; min-height:21px; }
#rename-build { border-color:transparent; background:transparent; color:var(--ink-soft); }
.example-builds { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
.example-builds summary { cursor:pointer; color:var(--ink-soft); font-size:15px; min-height:30px; }
.presets { border:0; padding-top:12px; }
.presets button { background:#272d32; border:1px solid var(--line); }
.naming-card { max-width:480px; border-radius:8px; background:var(--paper); }
.naming-card h2 { font-family:"Fraunces",Georgia,serif; margin:0; }
.naming-card p { color:var(--ink-soft); line-height:1.6; }
.naming-card label { display:block; margin:24px 0 8px; }
.naming-card input { width:100%; font-size:17px; }
#naming-error { color:#edb5a7; min-height:24px; font-size:14px; }
.naming-card .modal-actions { display:flex; justify-content:flex-end; }
[hidden] { display:none!important; }
@media(max-width:600px) {
  .library-switch { flex-wrap:wrap; gap:8px; }
  .library-switch label { flex-basis:100%; font-size:14px; }
  .library-switch select { width:0; }
  .library-actions button { padding:10px 12px; }
  .build-heading h3 { font-size:24px; }
  .header-note { display:none; }
}

.search-field { position:relative; }
.search-field .search { padding-right:68px; }
.search-field .search::-webkit-search-cancel-button { -webkit-appearance:none; }
#clear-search { position:absolute; right:3px; top:50%; transform:translateY(-50%); min-height:40px; padding:6px 12px; border:0; background:transparent; color:var(--ink-soft); font-size:14px; }
#clear-search:hover { color:var(--ink); background:#343d44; }

.example-builds > summary > span { display:block; font-size:13px; margin:5px 0 0 16px; color:var(--ink-soft); }
.ladder-intro { padding:20px 0; max-width:680px; }
.ladder-intro h3 { font-family:"Fraunces",Georgia,serif; font-size:24px; margin:0 0 10px; }
.ladder-intro p,.ladder-footnote { color:var(--ink-soft); font-size:14px; line-height:1.65; }
.ladder-intro label { display:block; font-size:14px; margin:18px 0 8px; }
.ladder-intro select { width:100%; max-width:340px; }
.ladder-tier { display:flex; flex-direction:row-reverse; align-items:center; gap:24px; padding:26px 0; border-top:1px solid var(--line); }
.tier-caption { width:200px; flex-shrink:0; }
.tier-caption h4 { font-family:"Fraunces",Georgia,serif; font-size:21px; font-weight:500; margin:0 0 8px; }
.tier-caption p { font-size:14px; line-height:1.5; color:var(--ink-soft); margin:0; }
.tier-builds { flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ladder-build { display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 8px; background:transparent; border-color:transparent; min-width:0; }
.ladder-build svg { width:100px; height:70px; fill:#303840; stroke:#abbab7; stroke-width:1.5; }
.ladder-build strong { font-weight:500; font-size:14px; line-height:1.45; }
.ladder-build span { color:var(--ink-soft); font-size:12px; margin-top:5px; }
.ladder-build:hover,.ladder-build:focus-visible { background:#2a3036; border-color:#687b77; }
.ladder-tier[data-tier="racks"] .tier-builds { max-width:560px; margin:auto; }
.ladder-tier[data-tier="racks"] .ladder-build:first-child { grid-column:1/-1; }
.ladder-tier[data-tier="racks"] .tier-builds { grid-template-columns:repeat(2,minmax(0,1fr)); }
.preset-recipe { padding-left:22px; }
.preset-recipe li { margin:16px 0; line-height:1.5; }
.preset-recipe small { display:block; color:var(--ink-soft); font-size:14px; margin-top:6px; }
#preset-save-note { font-size:14px; line-height:1.6; color:var(--ink-soft); }
#preset-error { color:#edb5a7; }
#preset-action { border-top:1px solid var(--line); margin:18px 0; }
.creator-credit { margin:20px 0 0; color:var(--ink-soft); font-size:13px; text-align:right; }
.creator-credit a { color:inherit; text-underline-offset:3px; }
.creator-credit a:hover { color:var(--ink); }
@media(max-width:1100px) { .ladder-tier { flex-direction:column; align-items:stretch; gap:14px; } .tier-caption { width:auto; } .ladder-tier[data-tier="racks"] .tier-builds { width:100%; } }
@media(max-width:600px) { .tier-builds { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } .ladder-build { padding:10px 4px; } .ladder-build strong { font-size:13px; } }

.inspiration-credit { font-size:14px; color:var(--ink-soft); line-height:1.6; margin-top:24px; }
.inspiration-credit a { color:var(--ink); text-underline-offset:3px; }

.plot-status { margin:0; padding:14px 20px; background:#2b302c; color:#d1dacd; font-size:14px; line-height:1.6; border-bottom:1px solid var(--line); }

.preset-source { display:block; font-size:13px; color:var(--accent); margin-top:8px; text-underline-offset:3px; }

.projection-label { display:block; color:var(--spark); font-size:12px; margin-top:3px; }

.site-credits { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-top:20px; }
.site-credits p { margin:0; font-size:13px; line-height:1.7; }
.site-credits a { color:inherit; text-underline-offset:3px; }
.site-credits a:hover { color:var(--ink); }
.view-nav { display:flex; gap:6px; margin-right:auto; }
.view-nav a { color:var(--ink-soft); padding:10px 14px; min-height:44px; border-radius:5px; text-decoration:none; font-size:15px; white-space:nowrap; }
.view-nav a:hover { background:#2a3036; color:var(--ink); }
.view-nav a[aria-current="page"] { background:#303933; color:#e0ece4; }
.app.is-browsing { grid-template-columns:minmax(0,1fr); }
.app.is-browsing .sidebar { display:none; }
.app.is-browsing .main { width:100%; max-width:1240px; margin:0 auto; }
#ladder-view .ladder-intro { padding-top:0; }
#ladder-heading { font-family:"Fraunces",Georgia,serif; font-size:38px; font-weight:500; margin:0 0 12px; }
.ladder-deck { font-size:18px!important; color:var(--ink)!important; }
#reset-all { margin-left:auto; background:transparent; border-color:transparent; color:var(--ink-soft); }
#reset-all:hover { color:#efb5a7; }
button.danger { background:#a64c40; border-color:#ba6558; color:#fff; }
button.danger:hover { background:#b7584b; }
#reset-error { color:#efb5a7; font-size:14px; }
@media(max-width:700px) {
  .site-header { flex-wrap:wrap; gap:10px; height:auto; min-height:70px; padding:12px 16px; }
  .view-nav { order:3; width:100%; margin:0; border-top:1px solid var(--line); padding-top:8px; }
  .view-nav a { flex:1; text-align:center; }
  #catalog-toggle { margin-left:auto; }
  .controls { grid-template-columns:1fr 1fr; }
  .controls #reset { grid-column:1/-1; }
}
@media(max-width:600px) { .site-credits { flex-direction:column; align-items:flex-start; } }

.chart-card { scroll-margin-top:90px; }
.map-preview-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line); background:#2b3730; }
.map-preview-bar > div { flex:1; min-width:180px; }
.map-preview-bar strong,.map-preview-bar span { display:block; }
.map-preview-bar span { font-size:13px; color:var(--ink-soft); margin-top:4px; }
.modal.map-preview-modal { backdrop-filter:none; background:#05091133; place-items:center end; }
.map-preview-modal .hardware-card { width:min(420px,100%); max-height:80dvh; border-radius:10px; }
@media(max-width:700px) {
  .chart-card { scroll-margin-top:130px; }
  .modal.map-preview-modal { place-items:end center; padding:10px; }
  .map-preview-modal .hardware-card { max-height:58dvh; }
  .map-preview-bar { padding:12px; }
}

.build-picker-wrap { position:relative; flex:1; min-width:0; }
#build-picker { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; background:#191d21; font-size:16px; }
#build-picker-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#build-picker[aria-expanded="true"] { border-color:#9aafa3; }
.build-menu { position:absolute; top:calc(100% + 8px); left:0; width:100%; min-width:300px; z-index:35; background:#242a2e; border:1px solid #55635c; border-radius:10px; box-shadow:0 18px 45px #0007; overflow:hidden; }
.picker-heading { display:flex; justify-content:space-between; padding:14px 16px; font-size:13px; color:var(--ink-soft); border-bottom:1px solid var(--line); }
#build-picker-list { max-height:320px; overflow:auto; padding:6px; }
.picker-row { display:flex; align-items:center; gap:2px; border-radius:6px; padding:3px; }
.picker-row.is-selected { background:#344038; }
.picker-row:hover { background:#30383c; }
.picker-row button { border:0; background:transparent; }
.picker-select { flex:1; min-width:0; display:flex; gap:10px; align-items:center; text-align:left; padding:9px 5px; }
.picker-select strong { display:block; font-weight:500; font-size:15px; overflow-wrap:anywhere; }
.picker-select small { display:block; color:var(--ink-soft); font-size:12px; margin-top:3px; }
.picker-check { width:16px; flex-shrink:0; color:var(--accent); }
.picker-icon { flex-shrink:0; width:42px; min-height:44px; padding:11px; color:var(--ink-soft); }
.picker-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.picker-row .picker-icon:hover { color:var(--ink); background:#454f54; }
.picker-row .picker-delete:hover { color:#f2b0a4; background:#593c39; }
.picker-rename input { flex:1; min-width:0; width:0; font-size:16px; padding:10px; }
.picker-rename button { padding:10px; min-width:40px; }
.picker-footer { padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); }
.picker-footer span { font-size:12px; color:var(--ink-soft); }
.picker-footer button { font-size:13px; padding:8px 10px; white-space:nowrap; }
#picker-error { margin:0; padding:0 14px; color:#efb5a7; font-size:13px; }
#picker-error:not(:empty) { padding:10px 14px; }
@media(max-width:600px) {
  #build-picker-label { flex-basis:100%; font-size:14px; color:var(--ink-soft); }
  .build-menu { min-width:0; width:calc(100% + 112px); max-width:calc(100vw - 60px); }
}

.saved-build-dot { fill:#8393a5; stroke:#c2cbd5; stroke-width:1.5; cursor:pointer; }
.owned-label.saved-label { cursor:pointer; }
.owned-label.saved-label rect { fill:#29313b; stroke:#718096; }
.owned-label.saved-label text { fill:#c6d0dc; font-weight:500; }
.owned-label.saved-label path { stroke:#718096; }
.owned-label.saved-label:hover rect,.owned-label.saved-label:focus rect { fill:#3b4b58; stroke:#d0e1e9; stroke-width:2; }
.chart-legend .legend-saved { background:#8393a5; }
.unplotted-builds { padding:12px 18px; border-top:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.unplotted-builds > span { color:var(--ink-soft); font-size:13px; }
.unplotted-builds button { font-size:13px; padding:8px 12px; }
.unplotted-builds small { color:var(--ink-soft); margin-left:6px; }

/* Sharing is the main invitation; utility actions stay quieter underneath. */
.catalog-device-heading { display:flex; align-items:center; gap:10px; }
.catalog-device-art { flex:0 0 44px; display:flex; align-items:center; color:#a6b9ad; }
.catalog-device-art svg { width:44px; height:36px; fill:#202d29; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.device.has .catalog-device-art { color:#c8e1d1; }
.device.has .catalog-device-art svg { fill:#294438; }
.catalog-device-heading .name { min-width:0; flex:1; }
.shared-welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; padding:24px 28px; border:1px solid #52685a; border-radius:12px; background:#25312b; }
.shared-welcome .eyebrow { color:#b3c9bc; margin-bottom:8px; }
.shared-welcome h2 { margin:0; font-family:"Fraunces",Georgia,serif; font-size:30px; font-weight:500; }
.shared-welcome p { margin:8px 0 0; color:#c4d0c8; font-size:16px; line-height:1.5; }
.shared-welcome button { flex-shrink:0; min-height:54px; padding:14px 24px; font-size:18px; font-weight:600; }
#new-build { border-color:#71877a; color:#d8e8de; }
@media(max-width:700px) {
  .shared-welcome { flex-direction:column; align-items:stretch; gap:18px; padding:20px; }
  .shared-welcome h2 { font-size:27px; }
  .shared-welcome button { width:100%; }
}
.share-cta { width:100%; grid-column:1/-1; display:grid; gap:8px; }
.controls .share-on-x { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; padding:14px 22px; font-size:18px; font-weight:600; background:#d5e8da; color:#18251d; border:1px solid #d5e8da; border-radius:8px; box-shadow:0 3px 0 #07130c; }
.controls .share-on-x:hover { background:#e6f4ea; border-color:#e6f4ea; transform:translateY(-1px); }
.share-on-x > span:first-child { font-size:23px; line-height:1; }
.share-cta > span { color:var(--ink-soft); text-align:center; font-size:13px; line-height:1.4; }
.controls #build-card,.controls #copy-link,.controls #reset { padding:8px 10px; font-size:13px; min-height:44px; }
@media(max-width:700px) {
  .controls { max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .controls #reset { grid-column:auto; }
}

/* Reordering is confined to the handle so touch scrolling and quantity buttons stay natural. */
.hardware-name { display:flex; align-items:center; gap:10px; }
.hardware-grip { flex:0 0 36px; width:36px; min-height:44px; padding:8px; border:1px solid transparent; background:transparent; color:var(--ink-soft); cursor:grab; touch-action:none; border-radius:6px; }
.hardware-grip svg { display:block; width:16px; height:24px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.hardware-grip:hover,.hardware-grip:focus-visible { color:var(--ink); background:var(--paper); border-color:var(--line); }
.hardware-grip:disabled { opacity:.25; cursor:default; }
.hardware-dragging { background:rgba(180,207,192,.14); outline:2px solid #a8c5b7; outline-offset:-2px; }
.hardware-reordering,.hardware-reordering * { cursor:grabbing !important; user-select:none !important; }
.hardware-dragging { opacity:.24; outline:2px dashed #a8c5b7; }
.hardware-drag-ghost { position:fixed; z-index:10000; pointer-events:none; margin:0; padding:0; background:var(--paper); border-radius:8px; outline:1px solid #a8c5b7; box-shadow:0 14px 36px #0007,0 3px 8px #0004; overflow:hidden; will-change:transform; }
.hardware-drag-ghost table { width:100%; margin:0; }
.hardware-drag-ghost tr { background:rgba(180,207,192,.08); }
.hardware-drag-ghost .hardware-grip { color:var(--accent); }