:root{
    --chrome-bg: #0b0d10;
    --chrome-bg-2: #14171c;
    --chrome-line: #24282f;
    --text-hi: #f4f5f7;
    --text-lo: #9aa0aa;
    --accent: #ffb84d;
    --accent-dim: #ffb84d33;
    --radius: 10px;
    --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--chrome-bg);
    color: var(--text-hi);
    font-family: var(--sans);
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  a{ color:inherit; }

  /* ---------- layout shell: rails + main column ---------- */
  .shell{
    display:grid;
    grid-template-columns: 160px minmax(0,1fr) 160px;
    gap:16px;
    max-width:1400px;
    margin:0 auto;
    width:100%;
    flex:1;
    padding:16px;
  }
  @media (max-width: 980px){
    .shell{ grid-template-columns: 1fr; }
    .rail{ display:none; }
  }

  .rail{
    position:sticky;
    top:16px;
    height:600px;
    align-self:start;
  }
  .ad-slot{
    width:100%;
    height:100%;
    border:1px dashed var(--chrome-line);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--text-lo);
    font-family:var(--mono);
    font-size:11px;
    line-height:1.5;
    padding:12px;
  }

  .ad-slot-bottom{
    display:none;
    width:100%;
    max-width:400px;
    height:100px;
    margin:24px auto 0;
    border:1px dashed var(--chrome-line);
    border-radius:var(--radius);
    align-items:center;
    justify-content:center;
    color:var(--text-lo);
    font-family:var(--mono);
    font-size:11px;
    text-align:center;
    padding:8px;
  }
  @media (max-width: 980px){
    .ad-slot-bottom{ display:flex; }
  }

  /* ---------- header ---------- */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 4px 8px;
  }
  .wordmark{
    font-family:var(--mono);
    font-weight:700;
    font-size:18px;
    letter-spacing:-0.02em;
  }
  .wordmark span{ color:var(--accent); }
  .tagline{
    color:var(--text-lo);
    font-size:13px;
  }

  main{ padding:8px 4px 40px; }

  h1{
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-lo);
    font-weight:600;
    margin:28px 0 14px;
  }

  /* ---------- swatch grid ---------- */
  .swatches{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
    gap:10px;
  }
  .swatch{
    aspect-ratio: 1.4/1;
    border-radius:var(--radius);
    border:1px solid var(--chrome-line);
    cursor:pointer;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:8px 10px;
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .swatch:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .swatch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .swatch.light-label{ color:#1a1a1a; text-shadow:none; }
  .swatch.dark-label{ color:#f4f5f7; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

  /* ---------- custom picker + brightness ---------- */
  .controls{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    align-items:center;
    background:var(--chrome-bg-2);
    border:1px solid var(--chrome-line);
    border-radius:var(--radius);
    padding:16px;
    margin-top:8px;
  }
  .control-group{ display:flex; align-items:center; gap:10px; }
  label{ font-size:12px; color:var(--text-lo); font-family:var(--mono); }

  input[type="color"]{
    width:44px; height:44px; border:none; border-radius:8px; background:none; cursor:pointer; padding:0;
  }
  input[type="text"]#hexInput{
    background:var(--chrome-bg); border:1px solid var(--chrome-line); color:var(--text-hi);
    font-family:var(--mono); font-size:13px; padding:8px 10px; border-radius:6px; width:100px;
  }
  input[type="range"]{ accent-color: var(--accent); width:160px; }

  button.go-btn{
    background:var(--accent); color:#1a1200; border:none; font-weight:700;
    font-family:var(--mono); font-size:12px; padding:10px 16px; border-radius:8px; cursor:pointer;
  }
  button.go-btn:hover{ filter:brightness(1.08); }

  /* ---------- content section ---------- */
  .why{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap:16px;
    margin-top:8px;
  }
  .why-card{
    background:var(--chrome-bg-2);
    border:1px solid var(--chrome-line);
    border-radius:var(--radius);
    padding:16px;
  }
  .why-card h3{ font-size:13px; margin:0 0 6px; color:var(--text-hi); }
  .why-card p{ font-size:13px; color:var(--text-lo); line-height:1.5; margin:0; }

  footer{
    border-top:1px solid var(--chrome-line);
    padding:18px 4px 24px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px;
    color:var(--text-lo);
    font-size:12px;
  }
  footer a{ text-decoration:none; }
  footer a:hover{ color:var(--text-hi); }

  /* ---------- fullscreen colour overlay ---------- */
  #colorStage{
    position:fixed; inset:0; z-index:999;
    display:none;
    align-items:flex-end;
    justify-content:center;
  }
  #colorStage.active{ display:flex; }
  #exitHint{
    position:absolute;
    bottom:18px;
    font-family:var(--mono);
    font-size:12px;
    padding:8px 14px;
    border-radius:20px;
    background:rgba(0,0,0,0.35);
    color:#fff;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }
  #colorStage.active #exitHint{ opacity:1; }

  @media (prefers-reduced-motion: reduce){
    .swatch, button.go-btn, #exitHint{ transition:none; }
  }

  /* ---------- shared site nav ---------- */
  .site-nav{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:12px;
  }
  .site-nav a{
    color:var(--text-lo);
    text-decoration:none;
    padding:6px 0;
    border-bottom:1px solid transparent;
  }
  .site-nav a:hover, .site-nav a.current{
    color:var(--text-hi);
    border-bottom:1px solid var(--accent);
  }

  /* ---------- article / guide page content ---------- */
  .page-main{
    max-width:760px;
    margin:0 auto;
    padding:8px 4px 40px;
  }
  .page-main p{ color:var(--text-lo); font-size:14px; line-height:1.7; }
  .page-main h2{
    font-size:15px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--text-lo); font-weight:600; margin:30px 0 12px;
  }
  .page-main h1.page-title{
    font-family:var(--mono); font-size:24px; color:var(--text-hi);
    margin:20px 0 8px; letter-spacing:-0.02em;
  }
  .lede{ color:var(--text-hi) !important; font-size:15px !important; }

  .test-btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 8px; }
  .test-btn{
    background:var(--chrome-bg-2); border:1px solid var(--chrome-line); color:var(--text-hi);
    font-family:var(--mono); font-size:12px; padding:10px 14px; border-radius:8px; cursor:pointer;
  }
  .test-btn:hover{ border-color:var(--accent); }
  .test-btn.primary{ background:var(--accent); color:#1a1200; border:none; font-weight:700; }

  .faq-item{ margin-bottom:16px; }
  .faq-item h3{ font-size:13px; color:var(--text-hi); margin:0 0 4px; }
  .faq-item p{ margin:0; }

  /* ---------- fullscreen test-pattern stage ---------- */
  #patternStage{
    position:fixed; inset:0; z-index:999; display:none;
    align-items:flex-end; justify-content:center;
    background:#000;
  }
  #patternStage.active{ display:flex; }
  #patternExitHint{
    position:absolute; bottom:18px; font-family:var(--mono); font-size:12px;
    padding:8px 14px; border-radius:20px; background:rgba(0,0,0,0.4); color:#fff;
  }
  .pattern-gradient{
    position:absolute; inset:0;
    background:linear-gradient(to right, #000 0%, #fff 100%);
  }
  .pattern-checker{
    position:absolute; inset:0;
    background-image:
      linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
      linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    background-color:#fff;
  }
  .pattern-bars{
    position:absolute; inset:0;
    display:flex;
  }
  .pattern-bars span{ flex:1; }