@layer tokens, base, layout, components, utilities, responsive, print;

@layer tokens {
  :root {
    color-scheme: light;
    --ink: #161711;
    --ink-soft: #51534a;
    --paper: #f7f5ee;
    --paper-strong: #fffdf7;
    --tint: #eeeee5;
    --line: #d7d7ca;
    --line-dark: #a5a69a;
    --acid: #b9f343;
    --acid-strong: #87c310;
    --orange: #ef6f36;
    --blue: #2359db;
    --night: #171c27;
    --night-soft: #232b3b;
    --danger: #b72e23;
    --good: #397a35;
    --watch: #b06718;
    --shadow: 0 18px 55px rgb(26 30 18 / 0.09);
    --shadow-small: 0 8px 24px rgb(26 30 18 / 0.08);
    --radius: 1.25rem;
    --radius-small: 0.72rem;
    --content: 78rem;
    --reading: 48rem;
  }
}

@layer base {
  * { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    background: var(--paper);
  }

  body {
    margin: 0;
    color: var(--ink);
    background:
      radial-gradient(circle at 8% 0%, rgb(185 243 67 / 0.13), transparent 30rem),
      var(--paper);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
    font-size: clamp(0.98rem, 0.25vw + 0.92rem, 1.075rem);
    line-height: 1.68;
    text-rendering: optimizeLegibility;
    overflow-wrap: anywhere;
  }

  h1, h2, h3, h4, p, ul, ol, dl { margin-top: 0; }

  h1, h2, h3, h4 {
    line-height: 1.18;
    letter-spacing: -0.035em;
  }

  h2 { font-size: clamp(2rem, 5vw, 4.3rem); }
  h3 { font-size: clamp(1.16rem, 1.8vw, 1.55rem); }

  a { color: inherit; text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 0.14em; }

  img {
    display: block;
    max-width: 100%;
  }

  button, input, select { font: inherit; }

  button, select, input[type="search"], input[type="range"] { min-height: 2.75rem; }

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

  :focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }

  ::selection { color: #10140a; background: var(--acid); }
}

@layer layout {
  .site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgb(22 23 17 / 0.12);
    background: rgb(247 245 238 / 0.9);
    backdrop-filter: blur(18px) saturate(140%);
  }

  .header-inner,
  .hero,
  .notice,
  .section,
  .site-footer {
    width: min(100% - 2rem, var(--content));
    margin-inline: auto;
  }

  .header-inner {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.7rem, 2vw, 1.6rem);
    font-size: 0.84rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .primary-nav a { text-decoration: none; }
  .primary-nav a:hover { color: var(--blue); }

  .guide-switch {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    margin-left: auto;
    padding-inline: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
  }

  .guide-switch:hover { border-color: var(--blue); color: var(--blue); }

  .hero {
    display: grid;
    min-height: min(52rem, calc(100svh - 4.75rem));
    grid-template-columns: minmax(0, 1.18fr) minmax(20rem, 0.82fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6.5rem);
    padding-block: clamp(4rem, 9vw, 8rem);
  }

  .section {
    padding-block: clamp(5rem, 9vw, 9rem);
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
  }

  .section-tinted,
  .section-dark {
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100% - var(--content)) / 2));
  }

  .section-tinted {
    border-block: 1px solid var(--line);
    background: var(--tint);
  }

  .section-dark {
    color: #f8f7f1;
    background:
      radial-gradient(circle at 85% 16%, rgb(35 89 219 / 0.34), transparent 34rem),
      var(--night);
  }

  .section-heading {
    max-width: 57rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
  }

  .section-heading h2 { margin-bottom: 1.15rem; }
  .section-heading > p:last-child { color: var(--ink-soft); font-size: 1.06em; }
  .section-dark .section-heading > p:last-child { color: #c8cede; }

  .split-heading {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
  }

  .site-footer {
    display: flex;
    min-height: 12rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-top: 1px solid var(--line);
  }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.7rem 1rem;
    transform: translateY(-150%);
    border-radius: 0.4rem;
    color: white;
    background: var(--blue);
  }

  .skip-link:focus { transform: translateY(0); }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    text-decoration: none;
  }

  .brand-mark {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    color: #11170a;
    background: var(--acid);
    font-size: 0.9rem;
  }

  .eyebrow {
    margin-bottom: 0.7rem;
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .section-dark .eyebrow { color: var(--acid); }

  .hero h1 {
    max-width: 15ch;
    margin-bottom: 1.4rem;
    font-size: clamp(3rem, 7.2vw, 6.8rem);
    line-height: 0.98;
  }

  .hero h1 span { color: var(--blue); }

  .hero-lead {
    max-width: 47rem;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 2rem;
  }

  .button {
    display: inline-flex;
    min-height: 2.85rem;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.15rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 780;
    line-height: 1.1;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
  }

  .button:hover { transform: translateY(-2px); }
  .button-primary { color: #10140a; background: var(--acid); }
  .button-primary:hover { background: #c9ff5c; }
  .button-secondary { background: var(--paper-strong); }
  .button-quiet { border-color: var(--line-dark); background: transparent; }

  .hero-metrics {
    display: grid;
    max-width: 44rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 2.6rem 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--line);
    list-style: none;
    overflow: hidden;
  }

  .hero-metrics li {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    background: var(--paper-strong);
  }

  .hero-metrics strong { font-size: 1.15rem; letter-spacing: -0.03em; }
  .hero-metrics span { color: var(--ink-soft); font-size: 0.72rem; }

  .hero-visual {
    display: grid;
    justify-items: center;
    gap: 2rem;
    text-align: center;
  }

  .signal-orbit {
    position: relative;
    width: min(100%, 29rem);
    aspect-ratio: 1;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    background:
      repeating-radial-gradient(circle, transparent 0 2.7rem, rgb(22 23 17 / 0.04) 2.75rem 2.82rem),
      var(--paper-strong);
    box-shadow: var(--shadow);
  }

  .orbit-node {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 6.2rem;
    min-height: 5.2rem;
    place-content: center;
    border: 1px solid var(--ink);
    border-radius: 1rem;
    background: var(--paper-strong);
    box-shadow: var(--shadow-small);
  }

  .orbit-node span { color: var(--blue); font-size: 1.4rem; }
  .guitar-node { top: 10%; left: -4%; transform: rotate(-5deg); }
  .interface-node { top: 40%; left: 14%; }
  .mac-node { top: 22%; right: 6%; color: #11170a; background: var(--acid); transform: rotate(4deg); }
  .monitor-node { right: 14%; bottom: 9%; }

  .orbit-line {
    position: absolute;
    height: 2px;
    transform-origin: left;
    background: var(--blue);
  }

  .line-one { top: 30%; left: 16%; width: 6.5rem; transform: rotate(53deg); }
  .line-two { top: 52%; left: 36%; width: 11.5rem; transform: rotate(-48deg); }
  .line-three { top: 42%; right: 18%; width: 9rem; transform: rotate(70deg); }

  .pulse {
    position: absolute;
    inset: 28%;
    border: 2px solid var(--acid-strong);
    border-radius: 50%;
    animation: pulse 2.8s ease-out infinite;
  }

  @keyframes pulse {
    0% { opacity: 0.9; transform: scale(0.72); }
    85%, 100% { opacity: 0; transform: scale(1.65); }
  }

  .notice {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 1.5rem 1.7rem;
    border: 1px solid #d5bf4e;
    border-radius: var(--radius);
    background: #fff7c8;
  }

  .notice h2 { margin-bottom: 0.4rem; font-size: 1.1rem; }
  .notice p { margin-bottom: 0; }
  .notice-date { min-width: 10rem; padding-left: 1.3rem; border-left: 1px solid #d5bf4e; }

  .priority-roadmap {
    display: grid;
    margin: 0 0 3rem;
    padding: 0;
    border-top: 1px solid var(--ink);
    list-style: none;
  }

  .priority-roadmap li {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
  }

  .priority-roadmap h3 { margin-bottom: 0.35rem; }
  .priority-roadmap p { max-width: 51rem; margin-bottom: 0; color: var(--ink-soft); }
  .priority-roadmap > li > strong { color: var(--blue); text-align: right; }
  .step-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); }

  .verdict-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 1rem;
  }

  .verdict-card {
    display: flex;
    min-height: 22rem;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-strong);
    box-shadow: var(--shadow-small);
  }

  .verdict-card.featured { color: white; background: var(--blue); }
  .verdict-card h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
  .verdict-card > a { margin-top: auto; font-weight: 800; }
  .card-kicker { color: var(--orange); font-size: 0.76rem; font-weight: 850; text-transform: uppercase; }
  .featured .card-kicker { color: var(--acid); }

  .verdict-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-block: 1rem;
    background: rgb(255 255 255 / 0.28);
  }

  .verdict-card dl div { padding: 0.7rem; background: rgb(255 255 255 / 0.1); }
  .verdict-card dt { font-size: 0.73rem; opacity: 0.75; }
  .verdict-card dd { margin: 0; font-weight: 800; }

  .builder {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: stretch;
    gap: 1rem;
  }

  .builder fieldset {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper-strong);
  }

  .builder legend { padding-inline: 0.35rem; font-weight: 850; }

  .builder label {
    display: flex;
    min-height: 2.4rem;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
  }

  .builder input { accent-color: var(--blue); }
  .builder > button { align-self: end; }

  .builder-result {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem 1.4rem;
    margin-top: 1rem;
    padding: 1.3rem 1.5rem;
    border: 2px solid var(--blue);
    border-radius: var(--radius);
    background: var(--paper-strong);
  }

  .builder-result .result-label { grid-row: span 2; align-self: stretch; padding-right: 1.3rem; border-right: 1px solid var(--line); color: var(--blue); font-weight: 850; }
  .builder-result h3, .builder-result p { margin-bottom: 0; }
  .builder-result h3 { grid-column: 2; }
  .builder-result > p:not(.result-label) { grid-column: 2; color: var(--ink-soft); }
  .builder-result .button { grid-column: 3; grid-row: 1 / span 2; }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
  .dot-best { background: var(--good); }
  .dot-good { background: var(--blue); }
  .dot-watch { background: var(--watch); }

  .product-search {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 1fr auto auto;
    align-items: end;
    gap: 0.85rem;
    margin-bottom: 1.2rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-strong);
    box-shadow: var(--shadow-small);
  }

  .search-field, .filter-field { display: grid; gap: 0.35rem; }
  .product-search label { color: var(--ink-soft); font-size: 0.76rem; font-weight: 800; }
  .product-search input[type="search"], .product-search select {
    width: 100%;
    padding-inline: 0.8rem;
    border: 1px solid var(--line-dark);
    border-radius: 0.55rem;
    color: var(--ink);
    background: white;
  }

  .range-field output { float: right; color: var(--blue); }
  .stock-filter { display: flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; padding-inline: 0.75rem; border: 1px solid var(--line); border-radius: 0.55rem; cursor: pointer; }
  .stock-filter input { accent-color: var(--blue); }
  .result-count { color: var(--ink-soft); font-size: 0.85rem; }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .product-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-strong);
    box-shadow: var(--shadow-small);
    overflow: clip;
  }

  .product-image {
    position: relative;
    display: grid;
    min-height: 16rem;
    place-items: center;
    padding: 1.1rem;
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(135deg, rgb(255 255 255 / 0.8), transparent),
      #e9e9e3;
  }

  .product-image img { width: 100%; height: 15rem; object-fit: contain; mix-blend-mode: multiply; }

  .product-badges {
    position: absolute;
    z-index: 2;
    top: 0.8rem;
    left: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 999px;
    color: #fff;
    background: var(--blue);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.01em;
  }

  .badge-best { background: var(--good); }
  .badge-watch { background: var(--watch); }
  .badge-stock { color: var(--ink); background: var(--acid); }
  .badge-restock { background: var(--danger); }

  .product-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
  .product-category { margin-bottom: 0.35rem; color: var(--blue); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
  .product-card h3 { margin-bottom: 0.3rem; font-size: 1.38rem; }
  .product-maker { margin-bottom: 1rem; color: var(--ink-soft); font-size: 0.78rem; }
  .product-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
  .product-price { color: var(--blue); font-size: 1.38rem; font-weight: 900; letter-spacing: -0.04em; }
  .product-unit { color: var(--ink-soft); font-size: 0.72rem; text-align: right; }
  .product-summary { margin-bottom: 1rem; color: var(--ink-soft); font-size: 0.9rem; }

  .spec-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 0 0 1rem;
    background: var(--line);
  }

  .spec-strip div { min-width: 0; padding: 0.62rem; background: var(--tint); }
  .spec-strip dt { color: var(--ink-soft); font-size: 0.62rem; }
  .spec-strip dd { margin: 0; font-size: 0.76rem; font-weight: 800; }

  .product-details { margin-top: auto; border-top: 1px solid var(--line); }
  .product-details summary { min-height: 2.8rem; padding-block: 0.7rem; cursor: pointer; color: var(--blue); font-size: 0.82rem; font-weight: 850; }
  .product-details h4 { margin-block: 0.9rem 0.35rem; font-size: 0.9rem; }
  .product-details ul { margin-bottom: 0.7rem; padding-left: 1.15rem; color: var(--ink-soft); font-size: 0.82rem; }
  .product-details li + li { margin-top: 0.28rem; }

  .full-specs { margin: 0.25rem 0 1rem; }
  .full-specs > div { display: grid; grid-template-columns: minmax(6.5rem, 0.32fr) minmax(0, 1fr); gap: 0.8rem; padding-block: 0.62rem; border-top: 1px solid var(--line); }
  .full-specs dt { color: var(--ink-soft); font-size: 0.72rem; font-weight: 800; }
  .full-specs dd { display: grid; gap: 0.18rem; margin: 0; font-size: 0.8rem; }
  .full-specs dd strong { color: var(--ink); }
  .full-specs dd span { color: var(--ink-soft); }
  .fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .fit-columns > div { padding: 0.75rem; border-radius: 0.55rem; background: var(--tint); }
  .seller-line { margin: 0.8rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.77rem; }

  .source-links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
  .source-links a { display: inline-flex; min-height: 2.45rem; align-items: center; padding-inline: 0.75rem; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 0.73rem; font-weight: 800; text-decoration: none; }
  .source-links a:first-child { color: white; border-color: var(--blue); background: var(--blue); }

  .empty-state { grid-column: 1 / -1; padding: 4rem 1rem; border: 1px dashed var(--line-dark); border-radius: var(--radius); text-align: center; }

  .rig-list { display: grid; gap: 1.2rem; }
  .rig-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); box-shadow: var(--shadow-small); overflow: clip; scroll-margin-top: 6rem; }
  .rig-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.5rem; border-bottom: 1px solid var(--line); }
  .rig-rank { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 900; }
  .rig-card[data-tier="best"] .rig-rank { color: var(--ink); background: var(--acid); }
  .rig-header h3 { margin-bottom: 0.3rem; }
  .rig-header p { margin-bottom: 0; color: var(--ink-soft); }
  .rig-total { text-align: right; }
  .rig-total span { display: block; color: var(--ink-soft); font-size: 0.7rem; }
  .rig-total strong { color: var(--blue); font-size: 1.6rem; }
  .rig-content { display: grid; grid-template-columns: 1.25fr 0.75fr; }
  .rig-table-wrap { padding: 1.2rem; overflow-x: auto; }
  .rig-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
  .rig-table th, .rig-table td { padding: 0.75rem 0.55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .rig-table th { color: var(--ink-soft); font-size: 0.7rem; }
  .rig-table th:nth-child(3), .rig-table th:nth-child(4), .rig-table td:nth-child(3), .rig-table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .rig-table tfoot td { border-bottom: 0; font-weight: 900; }
  .rig-connection { display: grid; gap: 0.25rem; margin: 1rem 0 0; padding: 0.85rem; border-left: 4px solid var(--blue); background: #edf1ff; font-size: 0.78rem; }
  .rig-connection span { color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .rig-analysis { padding: 1.5rem; border-left: 1px solid var(--line); background: #f3f3ec; }
  .rig-analysis h4 { margin-bottom: 0.5rem; font-size: 0.92rem; }
  .rig-analysis ul { padding-left: 1.15rem; color: var(--ink-soft); font-size: 0.84rem; }
  .rig-analysis .button { width: 100%; margin-top: 0.5rem; }
  .rig-note { margin: 0; padding: 0.9rem 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); background: #fff8d9; font-size: 0.78rem; }

  .scenario-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; scrollbar-width: thin; }
  .scenario-tabs button { flex: 1 0 auto; padding: 0.65rem 0.9rem; border: 0; border-radius: 999px; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: 0.78rem; font-weight: 800; }
  .scenario-tabs button[aria-selected="true"] { color: white; background: var(--blue); }
  .scenario-panel { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); box-shadow: var(--shadow-small); }
  .scenario-head span { color: var(--orange); font-size: 0.76rem; font-weight: 850; }
  .scenario-head h3 { margin-top: 0.35rem; font-size: clamp(1.4rem, 3vw, 2.3rem); }
  .signal-chain { display: flex; align-items: center; gap: 0; margin: 2rem 0; padding: 0; list-style: none; overflow-x: auto; }
  .signal-chain li { display: flex; flex: 1 0 12rem; align-items: center; }
  .signal-chain li:last-child { flex-grow: 0; }
  .chain-node { display: grid; min-width: 10rem; min-height: 6.5rem; place-content: center; padding: 0.8rem; border: 1px solid var(--ink); border-radius: 0.75rem; background: white; text-align: center; }
  .chain-node.accent { color: #0c1502; background: var(--acid); }
  .chain-node.danger { color: white; background: var(--danger); }
  .chain-node small { display: block; max-width: 16rem; margin-top: 0.25rem; color: inherit; opacity: 0.7; }
  .chain-wire { position: relative; display: grid; min-width: 8.5rem; min-height: 4.8rem; place-items: start center; padding: 0.35rem; color: var(--ink-soft); font-size: 0.67rem; text-align: center; }
  .chain-wire::after { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: var(--blue); content: ""; }
  .chain-wire::before { position: absolute; z-index: 1; top: calc(50% - 4px); right: 0; width: 0; height: 0; border-block: 5px solid transparent; border-left: 8px solid var(--blue); content: ""; }
  .instruction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .instruction-grid > div, .two-column-copy > div { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); }
  .instruction-grid h4 { margin-bottom: 0.45rem; }
  .instruction-grid ol { margin-bottom: 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: 0.86rem; }
  .two-column-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .check-list, .cross-list { padding-left: 1.15rem; }
  .check-list li::marker { color: var(--good); content: "✓  "; font-weight: 900; }
  .cross-list li::marker { color: var(--danger); content: "×  "; font-weight: 900; }
  .callout, .warning { margin: 1rem 0 0; padding: 1rem 1.2rem; border-left: 5px solid var(--blue); background: #ecf1ff; }
  .warning { border-color: var(--watch); background: #fff1d5; }
  .warning.critical { border-color: var(--danger); color: #63180f; background: #ffe6e3; }

  .latency-layout { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 1rem; }
  .latency-calculator { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; padding: 1.2rem; border: 1px solid #3c465b; border-radius: var(--radius); background: var(--night-soft); }
  .latency-calculator > div:not(.latency-result) { display: grid; align-content: start; gap: 0.4rem; }
  .latency-calculator label { color: #c8cede; font-size: 0.75rem; font-weight: 800; }
  .latency-calculator select { padding-inline: 0.75rem; border: 1px solid #515d75; border-radius: 0.55rem; color: white; background: #151a24; }
  .latency-result { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.4rem; }
  .latency-result span { grid-row: 1; color: #acb5c8; font-size: 0.68rem; }
  .latency-result strong { grid-row: 2; color: var(--acid); font-size: clamp(1.4rem, 3vw, 2.3rem); }
  .latency-guide { padding: 1.4rem; border: 1px solid #3c465b; border-radius: var(--radius); background: var(--night-soft); }
  .latency-guide dl div { display: grid; grid-template-columns: 5rem 1fr; gap: 0.7rem; padding-block: 0.65rem; border-top: 1px solid #3c465b; }
  .latency-guide dt { color: var(--acid); font-weight: 900; }
  .latency-guide dd { margin: 0; color: #c8cede; }
  .latency-guide p { margin-bottom: 0; color: #a9b1c1; font-size: 0.8rem; }
  .logic-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
  .logic-settings article { padding: 1.2rem; border: 1px solid #3c465b; border-radius: var(--radius-small); }
  .logic-settings ul { margin-bottom: 0; padding-left: 1.15rem; color: #c8cede; }
  .source-note { margin-top: 1.2rem; color: #a9b1c1; font-size: 0.78rem; }

  .glossary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .glossary-grid details { border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--paper-strong); }
  .glossary-grid summary { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; cursor: pointer; font-weight: 850; list-style: none; }
  .glossary-grid summary::-webkit-details-marker { display: none; }
  .glossary-grid summary::after { color: var(--blue); content: "+"; font-size: 1.3rem; }
  .glossary-grid details[open] summary::after { content: "−"; }
  .glossary-grid details[open] summary { border-bottom: 1px solid var(--line); }
  .glossary-grid details p { margin: 0; padding: 1rem; color: var(--ink-soft); font-size: 0.88rem; }
  code { padding: 0.12rem 0.3rem; border-radius: 0.25rem; background: #e8e9e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

  .room-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
  .placement-diagram { position: relative; min-height: 30rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-strong); box-shadow: inset 0 0 0 4rem rgb(22 23 17 / 0.02); }
  .speaker, .listener { position: absolute; display: grid; width: 7rem; min-height: 5rem; place-content: center; border: 1px solid var(--ink); border-radius: 0.75rem; text-align: center; }
  .speaker { top: 13%; color: #10140a; background: var(--acid); font-size: 1.5rem; font-weight: 900; }
  .speaker-left { left: 12%; transform: rotate(28deg); }
  .speaker-right { right: 12%; transform: rotate(-28deg); }
  .listener { bottom: 12%; left: calc(50% - 3.5rem); color: white; background: var(--blue); font-weight: 900; }
  .speaker small, .listener small { display: block; font-size: 0.58rem; font-weight: 600; }
  .measure { position: absolute; color: var(--ink-soft); font-size: 0.72rem; }
  .measure-top { top: 9%; left: 43%; }
  .measure-left { bottom: 38%; left: 17%; transform: rotate(57deg); }
  .measure-right { right: 17%; bottom: 38%; transform: rotate(-57deg); }
  .room-copy ol { padding-left: 1.3rem; }
  .room-copy li + li { margin-top: 0.75rem; }
  .safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
  .safety-grid article { padding: 1.2rem; border-top: 3px solid var(--orange); background: var(--paper-strong); }
  .safety-grid p { margin-bottom: 0; color: var(--ink-soft); }

  .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .method-grid article { padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-small); }
  .method-grid p, .method-grid li { color: var(--ink-soft); }
  .primary-sources { margin-top: 2rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); }
  .primary-sources ul { columns: 3; column-gap: 2rem; padding-left: 1.2rem; }
  .primary-sources li { break-inside: avoid; margin-bottom: 0.5rem; }
  .image-credit { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.75rem; }

  .site-footer p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; }
  .site-footer > div:last-child { display: flex; align-items: center; gap: 1rem; }
  .site-footer button { border: 0; color: var(--blue); background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
}

@layer utilities {
  [hidden] { display: none !important; }
  .noscript { padding: 1rem; border: 1px solid var(--danger); color: var(--danger); }
}

@layer responsive {
  @media (max-width: 70rem) {
    .primary-nav { max-width: 65vw; overflow-x: auto; }
    .hero { grid-template-columns: 1fr 0.65fr; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .builder { grid-template-columns: repeat(3, 1fr); }
    .builder > button { grid-column: 1 / -1; }
    .product-search { grid-template-columns: 1.5fr 1fr 1fr; }
    .stock-filter, .product-search > button { align-self: stretch; }
  }

  @media (max-width: 52rem) {
    html { scroll-padding-top: 8rem; }
    .header-inner { min-height: 7.4rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.6rem; }
    .primary-nav { width: 100%; max-width: none; padding-bottom: 0.25rem; }
    .guide-switch { position: absolute; top: 0.9rem; right: 1rem; }
    .hero { min-height: 0; grid-template-columns: 1fr; }
    .hero-copy { order: 1; }
    .hero-visual { order: 2; }
    .signal-orbit { width: min(86vw, 25rem); }
    .notice, .split-heading, .builder-result, .rig-header, .latency-layout, .room-layout { grid-template-columns: 1fr; }
    .notice-date { padding: 1rem 0 0; border-top: 1px solid #d5bf4e; border-left: 0; }
    .priority-roadmap li { grid-template-columns: 3rem 1fr; }
    .priority-roadmap > li > strong { grid-column: 2; text-align: left; }
    .verdict-grid { grid-template-columns: 1fr; }
    .verdict-card { min-height: 0; }
    .builder { grid-template-columns: 1fr; }
    .builder > button { grid-column: auto; }
    .builder-result .result-label, .builder-result h3, .builder-result > p:not(.result-label), .builder-result .button { grid-column: 1; grid-row: auto; }
    .builder-result .result-label { padding: 0 0 0.6rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .product-search { grid-template-columns: 1fr 1fr; }
    .search-field, .range-field { grid-column: 1 / -1; }
    .rig-total { text-align: left; }
    .rig-content { grid-template-columns: 1fr; }
    .rig-analysis { border-top: 1px solid var(--line); border-left: 0; }
    .instruction-grid, .logic-settings, .safety-grid { grid-template-columns: 1fr; }
    .fit-columns { grid-template-columns: 1fr; }
    .latency-result { grid-template-columns: 1fr; }
    .latency-result span, .latency-result strong { grid-row: auto; }
    .glossary-grid, .method-grid { grid-template-columns: 1fr; }
    .primary-sources ul { columns: 2; }
  }

  @media (max-width: 38rem) {
    .header-inner, .hero, .notice, .section, .site-footer { width: min(100% - 1.2rem, var(--content)); }
    .section-tinted, .section-dark { width: 100%; padding-inline: 0.6rem; }
    .hero h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .hero-metrics { grid-template-columns: 1fr 1fr; }
    .product-grid { grid-template-columns: 1fr; }
    .product-search { grid-template-columns: 1fr; }
    .search-field, .range-field { grid-column: auto; }
    .product-image { min-height: 13rem; }
    .product-image img { height: 12rem; }
    .full-specs > div { grid-template-columns: 1fr; gap: 0.2rem; }
    .two-column-copy { grid-template-columns: 1fr; }
    .latency-calculator { grid-template-columns: 1fr; }
    .latency-result { grid-column: auto; }
    .placement-diagram { min-height: 23rem; }
    .speaker, .listener { width: 5.5rem; min-height: 4.3rem; }
    .speaker-left { left: 7%; }
    .speaker-right { right: 7%; }
    .listener { left: calc(50% - 2.75rem); }
    .primary-sources ul { columns: 1; }
    .site-footer { flex-direction: column; align-items: flex-start; justify-content: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pulse { animation: none; }
    .button { transition: none; }
  }
}

@layer print {
  @media print {
    @page { margin: 14mm; }
    body { color: black; background: white; font-size: 9.5pt; }
    .site-header, .hero-visual, .hero-actions, .builder, .product-search, .scenario-tabs, .site-footer, .button, #print-guide { display: none !important; }
    .hero, .notice, .section { width: 100%; min-height: 0; padding-block: 1.2rem; }
    .hero { display: block; }
    .hero h1 { font-size: 34pt; }
    .section-tinted, .section-dark { padding-inline: 0; color: black; background: white; }
    .section-dark .section-heading > p:last-child, .source-note { color: #333; }
    .product-grid { grid-template-columns: 1fr 1fr; }
    .product-card, .rig-card, details, .scenario-panel { break-inside: avoid; box-shadow: none; }
    .product-image { min-height: 8rem; }
    .product-image img { height: 7rem; }
    .source-links a { color: black !important; background: white !important; }
    .scenario-panel[hidden] { display: block !important; margin-top: 0.8rem; }
    .glossary-grid details:not([open]) > *:not(summary) { display: block; }
  }
}