/* Dashboard and article page-specific styles extracted from HTML */

/* ==========================================================================
   AI Model Benchmark Dashboard (ai-model-benchmark-dashboard.html)
   ========================================================================== */

body.page-model-benchmark{
      --hero-desc-max-width: 520px;
    }

    body.page-model-benchmark .nav-home{
      text-decoration: none;
    }

    body.page-model-benchmark .disclaimer-conf-legend{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
    }

    body.page-model-benchmark .disclaimer-conf-dot{
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      vertical-align: middle;
    }

    body.page-model-benchmark .disclaimer-conf-dot-confirmed{
      background: var(--accent3);
    }

    body.page-model-benchmark .disclaimer-conf-dot-estimated{
      background: var(--accent6);
    }

    body.page-model-benchmark .disclaimer-conf-dot-limited{
      background: var(--ink3);
    }

    /* INSIGHT GRID */
    body.page-model-benchmark .insight-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 28px
    }

    body.page-model-benchmark .insight-grid.insight-grid-tight{
      margin-top: 24px;
    }

    body.page-model-benchmark .insight-card{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      padding: 16px 18px;
      transition: transform .2s, box-shadow .2s;
      position: relative;
      overflow: hidden
    }

    body.page-model-benchmark .insight-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow2)
    }

    body.page-model-benchmark .insight-card::before{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--accent)
    }

    body.page-model-benchmark .insight-card.c2::before{
      background: var(--accent2)
    }

    body.page-model-benchmark .insight-card.c3::before{
      background: var(--accent3)
    }

    body.page-model-benchmark .insight-card.c4::before{
      background: var(--accent4)
    }

    body.page-model-benchmark .insight-card.c5::before{
      background: var(--accent6)
    }

    body.page-model-benchmark .insight-card.c6::before{
      background: #2f8a8a
    }

    body.page-model-benchmark .ic-emoji{
      font-size: 18px;
      margin-bottom: 8px
    }

    body.page-model-benchmark .ic-label{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      letter-spacing: .05em;
      margin-bottom: 4px
    }

    body.page-model-benchmark .ic-model{
      font-family: 'Fraunces', serif;
      font-size: 15px;
      font-weight: 600
    }

    body.page-model-benchmark .ic-note{
      font-size: 11px;
      color: var(--ink2);
      margin-top: 3px;
      font-weight: 300;
      line-height: 1.4
    }

    body.page-model-benchmark .key-observations{
      margin-top: 36px;
    }

    body.page-model-benchmark .key-observations-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    body.page-model-benchmark .obs-card{
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: var(--r);
      border-left: 3px solid var(--accent);
    }

    body.page-model-benchmark .obs-card.obs-card-accent1{
      border-left-color: var(--accent);
    }

    body.page-model-benchmark .obs-card.obs-card-accent2{
      border-left-color: var(--accent2);
    }

    body.page-model-benchmark .obs-card.obs-card-accent3{
      border-left-color: var(--accent3);
    }

    body.page-model-benchmark .obs-card.obs-card-accent4{
      border-left-color: var(--accent4);
    }

    body.page-model-benchmark .obs-card-title{
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    body.page-model-benchmark .obs-card-body{
      font-size: 11px;
      color: var(--ink2);
      font-weight: 300;
    }

    /* CHARTS */
    body.page-model-benchmark .chart-tabs{
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    body.page-model-benchmark .chart-tabs.chart-tabs-top{
      margin-top: 24px;
    }

    body.page-model-benchmark .ctab{
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      padding: 6px 14px;
      border: 1px solid var(--border2);
      border-radius: 20px;
      background: transparent;
      color: var(--ink3);
      cursor: pointer;
      transition: all .15s
    }

    body.page-model-benchmark .ctab:hover{
      color: var(--ink);
      border-color: var(--ink)
    }

    body.page-model-benchmark .ctab.active{
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink)
    }

    body.page-model-benchmark .chart-card{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      padding: 22px;
      position: relative;
      overflow: hidden
    }

    body.page-model-benchmark .chart-card::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3))
    }

    body.page-model-benchmark .chart-title{
      font-family: 'Fraunces', serif;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 3px
    }

    body.page-model-benchmark .chart-hint{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      margin-bottom: 18px
    }

    body.page-model-benchmark .chart-wrap{
      position: relative
    }

    body.page-model-benchmark .chart-wrap.chart-wrap-main{
      height: 320px;
    }

    body.page-model-benchmark .chart-note{
      font-size: 11px;
      color: var(--ink3);
      margin-top: 10px;
      font-style: italic
    }

    /* FILTER BAR */
    body.page-model-benchmark .filter-bar{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px
    }

    body.page-model-benchmark .filter-label{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3)
    }

    body.page-model-benchmark .filter-btn{
      font-size: 11px;
      padding: 4px 12px;
      border: 1px solid var(--border2);
      border-radius: 16px;
      background: transparent;
      color: var(--ink2);
      cursor: pointer;
      transition: all .15s;
      font-family: 'DM Mono', monospace
    }

    body.page-model-benchmark .filter-btn:hover{
      border-color: var(--ink);
      color: var(--ink)
    }

    body.page-model-benchmark .filter-btn.active{
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink)
    }

    body.page-model-benchmark .search-wrap{
      margin-left: auto
    }

    body.page-model-benchmark .search-input{
      font-size: 12px;
      padding: 5px 14px;
      border: 1px solid var(--border2);
      border-radius: 16px;
      background: var(--paper2);
      color: var(--ink);
      outline: none;
      width: 200px;
      transition: border-color .15s;
      font-family: 'Sarabun', sans-serif
    }

    body.page-model-benchmark .search-input:focus{
      border-color: var(--accent2)
    }

    body.page-model-benchmark .search-input::placeholder{
      color: var(--ink3)
    }

    /* TABLE */
    body.page-model-benchmark .table-wrap{
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r2)
    }

    body.page-model-benchmark table{
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      min-width: 1100px
    }

    body.page-model-benchmark thead th{
      background: var(--paper3);
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      color: var(--ink3);
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 11px 13px;
      text-align: left;
      border-bottom: 1px solid var(--border2);
      white-space: nowrap;
      cursor: pointer;
      user-select: none
    }

    body.page-model-benchmark thead th:hover{
      color: var(--ink)
    }

    body.page-model-benchmark tbody td{
      padding: 11px 13px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      transition: background .1s
    }

    body.page-model-benchmark .cell-mono-sm{
      font-size: 11px;
    }

    body.page-model-benchmark .cell-center{
      text-align: center;
    }

    body.page-model-benchmark .cell-modalities{
      font-size: 10px;
      color: var(--ink2);
    }

    body.page-model-benchmark .cell-bestfor{
      font-size: 11px;
      color: var(--ink2);
      max-width: 160px;
      white-space: normal;
      line-height: 1.4;
    }

    body.page-model-benchmark tbody tr:hover td{
      background: var(--paper2)
    }

    body.page-model-benchmark tbody tr:last-child td{
      border-bottom: none
    }

    body.page-model-benchmark .tc-model{
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap
    }

    body.page-model-benchmark .tc-dot{
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0
    }

    body.page-model-benchmark .tc-dot.model-minimax{ background: #e8512f; }
    body.page-model-benchmark .tc-dot.model-gemini3flash{ background: #1a73e8; }
    body.page-model-benchmark .tc-dot.model-sonnet46{ background: #cc5500; }
    body.page-model-benchmark .tc-dot.model-deepseek32{ background: #1D9E75; }
    body.page-model-benchmark .tc-dot.model-glm5{ background: #D4537E; }
    body.page-model-benchmark .tc-dot.model-gptoss20b{ background: #185FA5; }
    body.page-model-benchmark .tc-dot.model-qwen3{ background: #639922; }
    body.page-model-benchmark .tc-dot.model-gpt54{ background: #412991; }
    body.page-model-benchmark .tc-dot.model-codex53{ background: #7c6aff; }
    body.page-model-benchmark .tc-dot.model-gemini31pro{ background: #0f6bb5; }
    body.page-model-benchmark .tc-dot.model-opus46{ background: #933; }
    body.page-model-benchmark .tc-dot.model-grok420{ background: #2a2a2a; }

    body.page-model-benchmark .tc-name{
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 13px
    }

    body.page-model-benchmark .tc-vendor{
      font-size: 10px;
      color: var(--ink3);
      font-family: 'DM Mono', monospace
    }

    body.page-model-benchmark .tc-canonical{
      font-size: 9px;
      color: var(--ink3);
      font-family: 'DM Mono', monospace;
      margin-top: 1px
    }

    body.page-model-benchmark .badge{
      display: inline-block;
      font-size: 9px;
      padding: 2px 7px;
      border-radius: 4px;
      font-family: 'DM Mono', monospace;
      white-space: nowrap;
      line-height: 1.5
    }

    body.page-model-benchmark .b-free{
      background: color-mix(in srgb, var(--accent3) 12%, transparent);
      color: #1a7040;
      border: 1px solid color-mix(in srgb, var(--accent3) 25%, transparent)
    }

    body.page-model-benchmark .b-open{
      background: color-mix(in srgb, var(--accent2) 10%, transparent);
      color: #1a5fb0;
      border: 1px solid color-mix(in srgb, var(--accent2) 20%, transparent)
    }

    body.page-model-benchmark .b-closed{
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: #a83420;
      border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent)
    }

    body.page-model-benchmark .b-fast{
      background: color-mix(in srgb, var(--accent5) 12%, transparent);
      color: #1a6868;
      border: 1px solid color-mix(in srgb, var(--accent5) 25%, transparent)
    }

    body.page-model-benchmark .b-ctx{
      background: color-mix(in srgb, var(--accent6) 12%, transparent);
      color: #a05a10;
      border: 1px solid color-mix(in srgb, var(--accent6) 25%, transparent)
    }

    body.page-model-benchmark .b-intel{
      background: color-mix(in srgb, var(--accent4) 12%, transparent);
      color: #6a28a8;
      border: 1px solid color-mix(in srgb, var(--accent4) 25%, transparent)
    }

    body.page-model-benchmark .b-na{
      background: color-mix(in srgb, var(--ink3) 10%, transparent);
      color: var(--ink3);
      border: 1px solid color-mix(in srgb, var(--ink3) 20%, transparent)
    }

    body.page-model-benchmark .check{
      color: var(--accent3);
      font-size: 13px
    }

    body.page-model-benchmark .cross{
      color: #b8b0a0;
      font-size: 13px
    }

    body.page-model-benchmark .mono{
      font-family: 'DM Mono', monospace
    }

    body.page-model-benchmark .na-text{
      color: var(--ink3);
      font-size: 10px;
      font-family: 'DM Mono', monospace
    }

    body.page-model-benchmark .conf-dot{
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-left: 3px;
      vertical-align: middle
    }

    body.page-model-benchmark .conf-C{
      background: var(--accent3)
    }

    body.page-model-benchmark .conf-E{
      background: var(--accent6)
    }

    body.page-model-benchmark .conf-L{
      background: var(--ink3)
    }

    /* MODEL CARDS */
    body.page-model-benchmark .model-cards-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
      margin-top: 28px
    }

    body.page-model-benchmark .mc{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      overflow: hidden;
      transition: box-shadow .2s, transform .2s
    }

    body.page-model-benchmark .mc:hover{
      box-shadow: var(--shadow2);
      transform: translateY(-2px)
    }

    body.page-model-benchmark .mc-header{
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--border);
      position: relative
    }

    body.page-model-benchmark .mc-color{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px
    }

    body.page-model-benchmark .mc-color.model-minimax{ background: linear-gradient(90deg, #e8512f, #e8512f88); }
    body.page-model-benchmark .mc-color.model-gemini3flash{ background: linear-gradient(90deg, #1a73e8, #1a73e888); }
    body.page-model-benchmark .mc-color.model-sonnet46{ background: linear-gradient(90deg, #cc5500, #cc550088); }
    body.page-model-benchmark .mc-color.model-deepseek32{ background: linear-gradient(90deg, #1D9E75, #1D9E7588); }
    body.page-model-benchmark .mc-color.model-glm5{ background: linear-gradient(90deg, #D4537E, #D4537E88); }
    body.page-model-benchmark .mc-color.model-gptoss20b{ background: linear-gradient(90deg, #185FA5, #185FA588); }
    body.page-model-benchmark .mc-color.model-qwen3{ background: linear-gradient(90deg, #639922, #63992288); }
    body.page-model-benchmark .mc-color.model-gpt54{ background: linear-gradient(90deg, #412991, #41299188); }
    body.page-model-benchmark .mc-color.model-codex53{ background: linear-gradient(90deg, #7c6aff, #7c6aff88); }
    body.page-model-benchmark .mc-color.model-gemini31pro{ background: linear-gradient(90deg, #0f6bb5, #0f6bb588); }
    body.page-model-benchmark .mc-color.model-opus46{ background: linear-gradient(90deg, #933, #99333388); }
    body.page-model-benchmark .mc-color.model-grok420{ background: linear-gradient(90deg, #2a2a2a, #2a2a2a88); }

    body.page-model-benchmark .mc-top{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px
    }

    body.page-model-benchmark .mc-name{
      font-family: 'Fraunces', serif;
      font-size: 16px;
      font-weight: 700
    }

    body.page-model-benchmark .mc-vendor{
      font-size: 10px;
      color: var(--ink3);
      font-family: 'DM Mono', monospace;
      margin-top: 1px
    }

    body.page-model-benchmark .mc-badges{
      display: flex;
      gap: 4px;
      flex-wrap: wrap
    }

    body.page-model-benchmark .mc-body{
      padding: 14px 18px
    }

    body.page-model-benchmark .mc-summary{
      font-size: 12px;
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.5;
      margin-bottom: 10px
    }

    body.page-model-benchmark .mc-stats{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-bottom: 10px
    }

    body.page-model-benchmark .mc-stat{
      background: var(--paper3);
      border-radius: 6px;
      padding: 7px 10px
    }

    body.page-model-benchmark .mcs-label{
      font-size: 9px;
      color: var(--ink3);
      font-family: 'DM Mono', monospace;
      letter-spacing: .04em;
      margin-bottom: 2px
    }

    body.page-model-benchmark .mcs-val{
      font-size: 12px;
      font-weight: 500;
      font-family: 'DM Mono', monospace
    }

    body.page-model-benchmark .mc-usecase{
      font-size: 11px;
      color: var(--ink2);
      border-top: 1px solid var(--border);
      padding-top: 10px
    }

    body.page-model-benchmark .mc-usecase strong{
      color: var(--ink)
    }

    body.page-model-benchmark .mc-caveat{
      font-size: 10px;
      color: var(--accent);
      margin-top: 4px
    }

    body.page-model-benchmark .mc-features{
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 8px
    }

    body.page-model-benchmark .mf-badge{
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 3px;
      font-family: 'DM Mono', monospace;
      background: var(--paper3);
      color: var(--ink3);
      border: 1px solid var(--border)
    }

    body.page-model-benchmark .mf-badge.on{
      background: color-mix(in srgb, var(--accent3) 10%, transparent);
      color: #1a7040;
      border-color: color-mix(in srgb, var(--accent3) 20%, transparent)
    }

    body.page-model-benchmark .mf-badge.off{
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      color: #9a3820;
      border-color: color-mix(in srgb, var(--accent) 15%, transparent)
    }

    body.page-model-benchmark .mc-sources{
      font-size: 10px;
      color: var(--ink3);
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border)
    }

    body.page-model-benchmark .mc-sources a{
      color: var(--accent2);
      text-decoration: none
    }

    /* DECISION CARDS */
    body.page-model-benchmark .decision-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
      margin-top: 28px
    }

    body.page-model-benchmark .dc{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      overflow: hidden;
      transition: box-shadow .2s
    }

    body.page-model-benchmark .dc:hover{
      box-shadow: var(--shadow2)
    }

    body.page-model-benchmark .dc-head{
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border)
    }

    body.page-model-benchmark .dc-emoji{
      font-size: 20px;
      margin-bottom: 8px
    }

    body.page-model-benchmark .dc-usecase{
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      color: var(--ink3);
      letter-spacing: .06em;
      margin-bottom: 5px
    }

    body.page-model-benchmark .dc-title{
      font-family: 'Fraunces', serif;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.2
    }

    body.page-model-benchmark .dc-body{
      padding: 16px 20px
    }

    body.page-model-benchmark .dc-wl{
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      color: var(--ink3);
      margin-bottom: 3px
    }

    body.page-model-benchmark .dc-winner{
      font-family: 'Fraunces', serif;
      font-size: 19px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 3px
    }

    body.page-model-benchmark .dc-runner{
      font-size: 11px;
      color: var(--ink3);
      margin-bottom: 10px
    }

    body.page-model-benchmark .dc-runner span{
      color: var(--ink2);
      font-weight: 500
    }

    body.page-model-benchmark .dc-reason{
      font-size: 12px;
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.55;
      margin-bottom: 10px
    }

    body.page-model-benchmark .dc-toggle{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--accent2);
      cursor: pointer;
      border: none;
      background: none;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 3px
    }

    body.page-model-benchmark .dc-detail{
      display: none;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border)
    }

    body.page-model-benchmark .dc-detail.open{
      display: block
    }

    body.page-model-benchmark .pc-row{
      display: flex;
      gap: 5px;
      margin-bottom: 5px;
      font-size: 11px;
      align-items: flex-start
    }

    body.page-model-benchmark .pc-icon{
      flex-shrink: 0;
      margin-top: 1px;
      font-size: 11px
    }

    body.page-model-benchmark .pc-icon.pc-icon-pro{
      color: var(--accent3);
    }

    body.page-model-benchmark .pc-icon.pc-icon-con{
      color: var(--accent);
    }

    body.page-model-benchmark .pc-text{
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.45
    }

    /* METHOD */
    body.page-model-benchmark .method-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 20px
    }

    body.page-model-benchmark .method-card{
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px
    }

    body.page-model-benchmark .method-label{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      letter-spacing: .05em;
      margin-bottom: 7px
    }

    body.page-model-benchmark .method-body{
      font-size: 12px;
      color: var(--ink2);
      font-weight: 300;
      line-height: 1.6
    }

    /* SOURCES */
    body.page-model-benchmark .sources-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 10px;
      margin-top: 18px
    }

    body.page-model-benchmark .source-item{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px
    }

    body.page-model-benchmark .src-model{
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      color: var(--ink3);
      margin-bottom: 5px;
      letter-spacing: .05em
    }

    body.page-model-benchmark .src-line{
      font-size: 11px;
      color: var(--ink2);
      margin-bottom: 2px
    }

    body.page-model-benchmark .src-line a{
      color: var(--accent2);
      text-decoration: none;
      word-break: break-word
    }

    body.page-model-benchmark .src-conf{
      font-size: 10px;
      font-family: 'DM Mono', monospace
    }

    body.page-model-benchmark .src-conf.C{
      color: var(--accent3)
    }

    body.page-model-benchmark .src-conf.E{
      color: var(--accent6)
    }

    body.page-model-benchmark .src-conf.L{
      color: var(--ink3)
    }

    /* CONF LEGEND */
    body.page-model-benchmark .conf-legend{
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 16px;
      font-size: 11px;
      color: var(--ink2)
    }

    body.page-model-benchmark .conf-legend.conf-legend-top{
      margin-top: 16px;
    }

    body.page-model-benchmark .cl-item{
      display: flex;
      align-items: center;
      gap: 5px
    }

    body.page-model-benchmark .cl-dot{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    body.page-model-benchmark .cl-dot.cl-dot-confirmed{
      background: var(--accent3);
    }

    body.page-model-benchmark .cl-dot.cl-dot-estimated{
      background: var(--accent6);
    }

    body.page-model-benchmark .cl-dot.cl-dot-limited{
      background: var(--ink3);
    }

    body.page-model-benchmark .table-footnote{
      font-size: 10px;
      color: var(--ink3);
      margin-top: 8px;
      font-family: 'DM Mono', monospace;
    }

    /* ANIMATIONS */
    body.page-model-benchmark .fade-up{
      animation-duration: .45s
    }

    body.page-model-benchmark .fade-up:nth-child(1){
      animation-delay: .04s
    }

    body.page-model-benchmark .fade-up:nth-child(2){
      animation-delay: .08s
    }

    body.page-model-benchmark .fade-up:nth-child(3){
      animation-delay: .12s
    }

    body.page-model-benchmark .fade-up:nth-child(4){
      animation-delay: .16s
    }

    body.page-model-benchmark .fade-up:nth-child(5){
      animation-delay: .20s
    }

    body.page-model-benchmark .fade-up:nth-child(6){
      animation-delay: .24s
    }

    body.page-model-benchmark .fade-up:nth-child(7){
      animation-delay: .28s
    }

    body.page-model-benchmark .fade-up:nth-child(8){
      animation-delay: .32s
    }

    body.page-model-benchmark .fade-up:nth-child(9){
      animation-delay: .36s
    }

    body.page-model-benchmark .fade-up:nth-child(10){
      animation-delay: .40s
    }

    /* SCORE BAR */
    body.page-model-benchmark .sbar{
      display: flex;
      align-items: center;
      gap: 7px
    }

    body.page-model-benchmark .sbar-bg{
      flex: 1;
      height: 4px;
      background: var(--paper3);
      border-radius: 2px;
      overflow: hidden;
      min-width: 50px
    }

    body.page-model-benchmark .sbar-fill{
      height: 100%;
      border-radius: 2px
    }

    body.page-model-benchmark .sbar-num{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      width: 22px;
      text-align: right
    }

    body.page-model-benchmark .mc-signal-badges {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    body.page-model-benchmark .mf-badge.route-preview {
      background: color-mix(in srgb, var(--accent6) 12%, transparent);
      color: #8a4a10;
      border-color: color-mix(in srgb, var(--accent6) 25%, transparent);
    }

    body.page-model-benchmark .mf-badge.route-beta {
      background: color-mix(in srgb, var(--accent4) 10%, transparent);
      color: #5a1a8a;
      border-color: color-mix(in srgb, var(--accent4) 22%, transparent);
    }

    body.page-model-benchmark .mf-badge.route-limited {
      background: color-mix(in srgb, var(--ink3) 10%, transparent);
      color: var(--ink3);
      border-color: color-mix(in srgb, var(--ink3) 20%, transparent);
    }

    body.page-model-benchmark .mf-badge.caveat-flag {
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: #8a2010;
      border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    }

    @media(max-width:640px) {
      body.page-model-benchmark .nav-links{
        display: none
      }

      body.page-model-benchmark .search-wrap{
        margin-left: 0;
        width: 100%
      }

      body.page-model-benchmark .search-input{
        width: 100%
      }

      body.page-model-benchmark .filter-bar{
        flex-direction: column;
        align-items: flex-start
      }
    }

    @media print {

      body.page-model-benchmark nav, body.page-model-benchmark footer, body.page-model-benchmark .filter-bar, body.page-model-benchmark .theme-btn, body.page-model-benchmark .dc-toggle{
        display: none
      }

      body.page-model-benchmark .section{
        page-break-inside: avoid
      }
    }


/* ==========================================================================
   AI Coding Tools Dashboard (ai-coding-tools-dashboard.html)
   ========================================================================== */

body.page-coding-tools{
      --good: var(--accent3);
      --warn: var(--accent6);
      --claim: var(--accent4);
      --score-bg: var(--paper3);
      --card-pad: 22px;
    }

    body.page-coding-tools .nav-right{
      display: flex;
      gap: 8px;
      flex-shrink: 0;
      align-items: center;
    }

    body.page-coding-tools .home-link{
      text-decoration: none;
    }

    body.page-coding-tools .legend-row.legend-row-spaced{
      margin-top: 10px;
    }

    body.page-coding-tools .summary-grid, body.page-coding-tools .family-grid, body.page-coding-tools .concept-grid, body.page-coding-tools .framework-grid, body.page-coding-tools .choose-grid, body.page-coding-tools .stack-grid, body.page-coding-tools .caution-grid, body.page-coding-tools .prompt-grid, body.page-coding-tools .source-grid, body.page-coding-tools .tool-grid{
      display: grid;
      gap: 16px;
    }

    body.page-coding-tools .summary-grid{
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      margin-top: 28px;
    }

    body.page-coding-tools .family-grid{
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      margin-top: 24px;
    }

    body.page-coding-tools .concept-grid, body.page-coding-tools .framework-grid, body.page-coding-tools .choose-grid, body.page-coding-tools .source-grid{
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      margin-top: 24px;
    }

    body.page-coding-tools .stack-grid{
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      margin-top: 24px;
    }

    body.page-coding-tools .caution-grid, body.page-coding-tools .prompt-grid{
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      margin-top: 24px;
    }

    body.page-coding-tools .tool-grid{
      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      margin-top: 20px;
    }

    body.page-coding-tools .panel, body.page-coding-tools .summary-card, body.page-coding-tools .family-card, body.page-coding-tools .concept-card, body.page-coding-tools .framework-card, body.page-coding-tools .tool-card, body.page-coding-tools .choose-card, body.page-coding-tools .stack-card, body.page-coding-tools .caution-card, body.page-coding-tools .prompt-card, body.page-coding-tools .source-card{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      box-shadow: var(--shadow);
    }

    body.page-coding-tools .summary-card, body.page-coding-tools .family-card, body.page-coding-tools .concept-card, body.page-coding-tools .framework-card, body.page-coding-tools .tool-card, body.page-coding-tools .choose-card, body.page-coding-tools .stack-card, body.page-coding-tools .caution-card, body.page-coding-tools .prompt-card, body.page-coding-tools .source-card{
      padding: var(--card-pad);
    }

    body.page-coding-tools .summary-icon{
      font-size: 22px;
      margin-bottom: 10px;
    }

    body.page-coding-tools .conf-dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    body.page-coding-tools .conf-dot.confirmed{ background: var(--good); }
    body.page-coding-tools .conf-dot.estimated{ background: var(--warn); }
    body.page-coding-tools .conf-dot.claim{ background: var(--claim); }

    body.page-coding-tools .kicker{
      font-size: 11px;
      color: var(--ink3);
      font-family: 'DM Mono', monospace;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    body.page-coding-tools .summary-card h3, body.page-coding-tools .family-card h3, body.page-coding-tools .concept-card h3, body.page-coding-tools .framework-card h3, body.page-coding-tools .tool-card h3, body.page-coding-tools .choose-card h3, body.page-coding-tools .stack-card h3, body.page-coding-tools .caution-card h3, body.page-coding-tools .prompt-card h3, body.page-coding-tools .source-card h3{
      font-family: 'Fraunces', serif;
      font-size: 20px;
      margin-bottom: 8px;
      line-height: 1.15;
    }

    body.page-coding-tools .summary-card p, body.page-coding-tools .family-card p, body.page-coding-tools .concept-card p, body.page-coding-tools .framework-card p, body.page-coding-tools .tool-card p, body.page-coding-tools .choose-card p, body.page-coding-tools .stack-card p, body.page-coding-tools .caution-card p, body.page-coding-tools .prompt-card p, body.page-coding-tools .source-card p, body.page-coding-tools .micro-note, body.page-coding-tools .tool-meta, body.page-coding-tools .legend-copy{
      color: var(--ink2);
      font-size: 13px;
      font-weight: 300;
    }

    body.page-coding-tools .chips, body.page-coding-tools .legend-row, body.page-coding-tools .filter-row, body.page-coding-tools .toolbar-row, body.page-coding-tools .tool-card-footer, body.page-coding-tools .stack-flow, body.page-coding-tools .quick-picks, body.page-coding-tools .metrics-row{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    body.page-coding-tools .chip, body.page-coding-tools .legend-pill, body.page-coding-tools .metric-pill, body.page-coding-tools .filter-btn, body.page-coding-tools .quick-btn, body.page-coding-tools .toggle-btn, body.page-coding-tools .tool-badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      line-height: 1;
      border: 1px solid var(--border2);
      background: var(--paper);
      color: var(--ink2);
      padding: 7px 11px;
      transition: all .15s ease;
    }

    body.page-coding-tools .tool-badge.family-ide, body.page-coding-tools .metric-fill.family-ide{
      background: color-mix(in srgb, var(--accent2) 10%, transparent);
      color: var(--accent2);
      border-color: color-mix(in srgb, var(--accent2) 022%, transparent);
    }

    body.page-coding-tools .tool-badge.family-cli, body.page-coding-tools .metric-fill.family-cli{
      background: color-mix(in srgb, var(--accent3) 10%, transparent);
      color: var(--accent3);
      border-color: color-mix(in srgb, var(--accent3) 022%, transparent);
    }

    body.page-coding-tools .tool-badge.family-cloud, body.page-coding-tools .metric-fill.family-cloud{
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 022%, transparent);
    }

    body.page-coding-tools .tool-badge.family-browser, body.page-coding-tools .metric-fill.family-browser{
      background: color-mix(in srgb, var(--accent4) 10%, transparent);
      color: var(--accent4);
      border-color: color-mix(in srgb, var(--accent4) 022%, transparent);
    }

    body.page-coding-tools .filter-btn, body.page-coding-tools .quick-btn, body.page-coding-tools .toggle-btn{
      cursor: pointer;
    }

    body.page-coding-tools .filter-btn:hover, body.page-coding-tools .quick-btn:hover, body.page-coding-tools .toggle-btn:hover, body.page-coding-tools .theme-btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    body.page-coding-tools .filter-btn.active, body.page-coding-tools .quick-btn.active, body.page-coding-tools .toggle-btn.active{
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }

    body.page-coding-tools .panel{
      padding: 18px;
      margin-top: 28px;
    }

    body.page-coding-tools .panel-head{
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    body.page-coding-tools .panel-title{
      font-family: 'Fraunces', serif;
      font-size: 20px;
      margin-bottom: 4px;
    }

    body.page-coding-tools .search-box{
      min-width: 240px;
      flex: 1 1 280px;
      max-width: 360px;
    }

    body.page-coding-tools .search-input, body.page-coding-tools .filter-select{
      width: 100%;
      border: 1px solid var(--border2);
      background: var(--paper);
      color: var(--ink);
      padding: 10px 12px;
      border-radius: 10px;
      font-family: 'Sarabun', sans-serif;
      font-size: 14px;
    }

    body.page-coding-tools .filter-strip{
      display: grid;
      grid-template-columns: 1.2fr repeat(3, minmax(150px, 1fr));
      gap: 10px;
      align-items: end;
    }

    body.page-coding-tools .filter-group-title{
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--ink3);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    body.page-coding-tools .legend-bar{
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px dashed var(--border);
    }

    body.page-coding-tools .tool-card{
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      transition: transform .16s ease, box-shadow .16s ease;
    }

    body.page-coding-tools .tool-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow2);
    }

    body.page-coding-tools .tool-card[hidden], body.page-coding-tools tr[hidden]{
      display: none !important;
    }

    body.page-coding-tools .tool-head{
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: flex-start;
    }

    body.page-coding-tools .tool-meta{
      margin-top: -2px;
    }

    body.page-coding-tools .tool-card ul, body.page-coding-tools .stack-card ul, body.page-coding-tools .source-card ul, body.page-coding-tools .choose-card ul, body.page-coding-tools .caution-card ul, body.page-coding-tools .family-card ul{
      padding-left: 18px;
      color: var(--ink);
      font-size: 14px;
    }

    body.page-coding-tools .tool-card li, body.page-coding-tools .stack-card li, body.page-coding-tools .source-card li, body.page-coding-tools .choose-card li, body.page-coding-tools .caution-card li, body.page-coding-tools .family-card li{
      margin-bottom: 5px;
    }

    body.page-coding-tools .metrics{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 4px;
    }

    body.page-coding-tools .metric{
      display: grid;
      grid-template-columns: 94px 1fr 30px;
      align-items: center;
      gap: 10px;
    }

    body.page-coding-tools .metric-label, body.page-coding-tools .metric-value{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink3);
    }

    body.page-coding-tools .metric-track{
      height: 10px;
      background: var(--score-bg);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    body.page-coding-tools .metric-fill{
      height: 100%;
      width: var(--w, 0%);
      background: var(--ink);
      border-radius: inherit;
    }

    body.page-coding-tools .tool-card-footer{
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
      justify-content: space-between;
      align-items: center;
    }

    body.page-coding-tools .tool-score{
      font-family: 'Fraunces', serif;
      font-size: 28px;
      line-height: 1;
    }

    body.page-coding-tools .tool-score small{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      letter-spacing: .05em;
      margin-left: 4px;
    }

    body.page-coding-tools .rank-strip{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-top: 20px;
    }

    body.page-coding-tools .rank-card{
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: var(--paper);
    }

    body.page-coding-tools .rank-card strong{
      display: block;
      font-family: 'Fraunces', serif;
      font-size: 18px;
      margin: 6px 0 4px;
    }

    body.page-coding-tools .rank-winner-line{
      font-size: 14px;
      margin-bottom: 6px;
    }

    body.page-coding-tools .comparison-wrap{
      overflow-x: auto;
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      box-shadow: var(--shadow);
      margin-top: 24px;
    }

    body.page-coding-tools table{
      width: 100%;
      min-width: 1160px;
      border-collapse: collapse;
    }

    body.page-coding-tools th, body.page-coding-tools td{
      text-align: left;
      padding: 14px 14px;
      vertical-align: top;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
    }

    body.page-coding-tools th{
      position: sticky;
      top: 0;
      background: var(--paper);
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--ink2);
      text-transform: uppercase;
      letter-spacing: .05em;
      cursor: pointer;
      z-index: 1;
    }

    body.page-coding-tools tbody tr:hover{
      background: color-mix(in srgb, #000 1.8%, transparent);
    }

    body.page-coding-tools .stack-flow{
      margin-top: 14px;
    }

    body.page-coding-tools .stack-node{
      flex: 1 1 150px;
      min-width: 150px;
      padding: 12px;
      border-radius: var(--r);
      background: var(--paper);
      border: 1px solid var(--border);
    }

    body.page-coding-tools .stack-node strong{
      display: block;
      font-size: 14px;
      margin-bottom: 4px;
    }

    body.page-coding-tools .stack-why{
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
      font-size: 13px;
      color: var(--ink2);
    }

    body.page-coding-tools details{
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 0 14px;
    }

    body.page-coding-tools details+details{
      margin-top: 10px;
    }

    body.page-coding-tools summary{
      list-style: none;
      cursor: pointer;
      padding: 14px 0;
      font-family: 'Fraunces', serif;
      font-size: 18px;
    }

    body.page-coding-tools summary::-webkit-details-marker{
      display: none;
    }

    body.page-coding-tools details p{
      margin-bottom: 14px;
    }

    body.page-coding-tools pre{
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: anywhere;
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      font-size: 12px;
      line-height: 1.55;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      margin: 12px 0 14px;
    }

    body.page-coding-tools .count-pill{
      border-color: color-mix(in srgb, var(--accent3) 022%, transparent);
      color: var(--accent3);
      background: color-mix(in srgb, var(--accent3) 08%, transparent);
    }

    body.page-coding-tools .muted-link{
      color: var(--ink3);
    }

    body.page-coding-tools .micro-note.micro-note-spaced{
      margin-top: 10px;
    }

    @media (max-width: 980px) {
      body.page-coding-tools .filter-strip{
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 720px) {
      body.page-coding-tools .rank-strip{
        grid-template-columns: 1fr 1fr;
      }

      body.page-coding-tools .metric{
        grid-template-columns: 84px 1fr 28px;
      }

      body.page-coding-tools .filter-strip{
        grid-template-columns: 1fr;
      }
    }

    /* ── Radar chart wrap ── */
    body.page-coding-tools .radar-wrap{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0 6px;
    }

    /* ── Decision Tree Quiz ── */
    body.page-coding-tools .quiz-wrap{ width: 100%; }
    body.page-coding-tools .quiz-question{ margin-bottom: 24px; }
    body.page-coding-tools .quiz-q-label{
      font-family: 'DM Mono', monospace; font-size: 10px;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--ink3); margin-bottom: 6px;
    }
    body.page-coding-tools .quiz-q-text{
      font-size: 16px; font-weight: 600; color: var(--ink);
      margin-bottom: 12px; line-height: 1.4;
    }
    body.page-coding-tools .quiz-options{ display: flex; flex-wrap: wrap; gap: 8px; }
    body.page-coding-tools .quiz-opt-btn{
      padding: 9px 16px; border: 1.5px solid var(--border);
      border-radius: var(--r); background: var(--paper2);
      color: var(--ink2); font-family: 'Sarabun', sans-serif;
      font-size: 13px; cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }
    body.page-coding-tools .quiz-opt-btn:hover{
      border-color: var(--accent); background: var(--paper); color: var(--ink);
    }
    body.page-coding-tools .quiz-opt-btn.selected{
      border-color: var(--accent); background: var(--accent); color: var(--on-accent);
    }
    body.page-coding-tools .quiz-submit-btn{
      margin-top: 8px; padding: 11px 28px; border: none;
      border-radius: var(--r); background: var(--accent); color: var(--on-accent);
      font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500;
      cursor: pointer; transition: opacity .15s;
    }
    body.page-coding-tools .quiz-submit-btn:disabled{ opacity: .4; cursor: default; }
    body.page-coding-tools .quiz-result{
      margin-top: 24px; padding: 20px 24px;
      border: 1.5px solid var(--accent); border-radius: var(--r);
      background: var(--paper2);
    }
    body.page-coding-tools .quiz-result-label{
      font-family: 'DM Mono', monospace; font-size: 10px;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--accent); margin-bottom: 8px;
    }
    body.page-coding-tools .quiz-result-playbook{
      font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
    }
    body.page-coding-tools .quiz-result-why{
      font-size: 13px; color: var(--ink2); margin-bottom: 14px; line-height: 1.6;
    }
    body.page-coding-tools .quiz-result-tools{
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    }
    body.page-coding-tools .quiz-tool-chip{
      padding: 6px 14px; background: var(--accent); color: var(--on-accent);
      border-radius: 999px; font-family: 'DM Mono', monospace;
      font-size: 11px; font-weight: 500;
    }
    body.page-coding-tools .quiz-reset-btn{
      padding: 7px 16px; border: 1.5px solid var(--border);
      border-radius: var(--r); background: transparent;
      color: var(--ink3); font-family: 'DM Mono', monospace;
      font-size: 11px; cursor: pointer;
    }
    body.page-coding-tools .quiz-reset-btn:hover{ border-color: var(--ink2); color: var(--ink2); }

    @media print {
      body.page-coding-tools nav, body.page-coding-tools footer, body.page-coding-tools .theme-btn, body.page-coding-tools .toggle-btn, body.page-coding-tools .filter-btn, body.page-coding-tools .quick-btn, body.page-coding-tools .search-box, body.page-coding-tools .filter-select{
        display: none !important;
      }

      body.page-coding-tools .section{
        page-break-inside: avoid;
      }
    }


/* ==========================================================================
   10 LLM Families Article (10-llm-families-2026.html)
   ========================================================================== */

/* ================================================
       PAGE-SPECIFIC STYLES — article layout only
       Design tokens & base components come from shared.css
       ================================================ */

    /* Article reading width */
    body.page-llm-families .article-wrap{
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 var(--container-padding);
    }

    body.page-llm-families .article-wide{
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 var(--container-padding);
    }

    body.page-llm-families .rankings-content{
      margin-top: 40px;
    }

    body.page-llm-families .takeaways-content{
      margin-top: 0;
    }

    /* ── TOC (Table of Contents) ── */
    body.page-llm-families .toc-section{
      padding: 32px 0 40px;
      border-bottom: 1px solid var(--border);
    }

    body.page-llm-families .toc-grid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 6px;
      margin-top: 16px;
    }

    body.page-llm-families .toc-item{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--r);
      border: 1px solid var(--border);
      background: var(--paper2);
      text-decoration: none;
      color: var(--ink2);
      font-size: 12px;
      font-family: 'DM Mono', monospace;
      transition: all .15s;
      cursor: pointer;
    }

    body.page-llm-families .toc-item:hover{
      background: var(--paper3);
      color: var(--ink);
      border-color: var(--border2);
    }

    body.page-llm-families .toc-num{
      font-size: 10px;
      color: var(--ink3);
      min-width: 18px;
    }

    /* ── Methodology Card ── */
    body.page-llm-families .methodology-section{
      padding: 48px 0;
      border-top: none;
      border-bottom: none;
    }

    body.page-llm-families .method-card{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      padding: 28px 32px;
      margin-top: 20px;
    }

    body.page-llm-families .method-list{
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
    }

    body.page-llm-families .method-list li{
      display: flex;
      gap: 14px;
      align-items: flex-start;
      font-size: 14px;
      color: var(--ink2);
      line-height: 1.6;
    }

    body.page-llm-families .method-icon{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      background: var(--paper3);
      border: 1px solid var(--border2);
      border-radius: 4px;
      padding: 2px 7px;
      white-space: nowrap;
      margin-top: 2px;
    }

    body.page-llm-families .method-note{
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--ink3);
      font-family: 'DM Mono', monospace;
    }

    /* ── Ranking Sections ── */
    body.page-llm-families .rankings-section{
      padding: 48px 0;
      border-top: none;
    }

    body.page-llm-families .rank-entry{
      padding: 48px 0;
      border-bottom: 1px solid var(--border);
      scroll-margin-top: 70px;
    }

    body.page-llm-families .rank-entry:last-child{
      border-bottom: none;
    }

    body.page-llm-families .rank-header{
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 24px;
    }

    body.page-llm-families .rank-badge{
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      background: var(--ink);
      color: var(--paper);
      border-radius: var(--r);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Fraunces', serif;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
    }

    /* accent for top 3 */
    body.page-llm-families .rank-entry:nth-child(1) .rank-badge{ background: var(--accent); }
    body.page-llm-families .rank-entry:nth-child(2) .rank-badge{ background: var(--accent2); }
    body.page-llm-families .rank-entry:nth-child(3) .rank-badge{ background: var(--accent3); }

    body.page-llm-families .rank-meta{
      flex: 1;
    }

    body.page-llm-families .rank-family{
      font-family: 'Fraunces', serif;
      font-size: clamp(22px, 3.5vw, 30px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
    }

    body.page-llm-families .rank-vendor{
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--ink3);
      letter-spacing: 0.04em;
    }

    body.page-llm-families .rank-summary{
      display: inline-block;
      margin-top: 8px;
      font-size: 12px;
      color: var(--ink2);
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 4px 14px;
      font-style: italic;
    }

    body.page-llm-families .rank-body{
      font-size: 15px;
      line-height: 1.75;
      color: var(--ink2);
    }

    body.page-llm-families .rank-body p{
      margin-bottom: 16px;
    }

    body.page-llm-families .rank-body p:last-child{
      margin-bottom: 0;
    }

    /* strengths / fit / verdict block */
    body.page-llm-families .rank-cards{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin-top: 24px;
    }

    body.page-llm-families .rank-card{
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px 16px;
    }

    body.page-llm-families .rank-card-label{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--ink3);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    body.page-llm-families .rank-card-text{
      font-size: 13px;
      color: var(--ink2);
      line-height: 1.55;
    }

    body.page-llm-families .rank-verdict{
      margin-top: 24px;
      padding: 14px 18px;
      border-left: 3px solid var(--accent);
      background: var(--paper2);
      border-radius: 0 var(--r) var(--r) 0;
      font-size: 14px;
      color: var(--ink);
      font-weight: 500;
      line-height: 1.6;
    }

    body.page-llm-families .rank-caveat{
      margin-top: 12px;
      padding: 12px 16px;
      border-left: 3px solid var(--accent6);
      background: color-mix(in srgb, var(--accent6) 8%, var(--paper));
      border-radius: 0 var(--r) var(--r) 0;
      font-size: 13px;
      color: var(--ink2);
      line-height: 1.65;
    }
    body.page-llm-families .rank-caveat a{
      color: var(--accent);
      text-decoration: underline;
    }

    body.page-llm-families .rank-entry:nth-child(2) .rank-verdict{ border-left-color: var(--accent2); }
    body.page-llm-families .rank-entry:nth-child(3) .rank-verdict{ border-left-color: var(--accent3); }
    body.page-llm-families .rank-entry:nth-child(4) .rank-verdict{ border-left-color: var(--accent4); }

    /* ── Intro Section ── */
    body.page-llm-families .intro-section{
      padding: 48px 0;
      border-bottom: none;
    }

    body.page-llm-families .intro-section.section + .methodology-section.section{
      border-top: none;
    }

    body.page-llm-families .methodology-section.section + .rankings-section.section{
      border-top: none;
    }

    body.page-llm-families .intro-section p{
      font-size: 16px;
      line-height: 1.8;
      color: var(--ink2);
      margin-bottom: 20px;
      font-weight: 300;
    }

    body.page-llm-families .intro-section p:last-child{ margin-bottom: 0; }

    body.page-llm-families .intro-lead{
      font-size: 18px !important;
      color: var(--ink) !important;
      font-weight: 400 !important;
    }

    /* ── Takeaways ── */
    body.page-llm-families .takeaways-section{
      padding: 48px 0;
      border-top: 1px solid var(--border);
    }

    body.page-llm-families .takeaway-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 14px;
      margin-top: 24px;
    }

    body.page-llm-families .takeaway-card{
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      padding: 20px 20px 22px;
      box-shadow: var(--shadow);
    }

    body.page-llm-families .takeaway-label{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink3);
      margin-bottom: 8px;
    }

    body.page-llm-families .takeaway-title{
      font-family: 'Fraunces', serif;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.25;
    }

    body.page-llm-families .takeaway-members{
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }

    body.page-llm-families .takeaway-chip{
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      padding: 3px 9px;
      border-radius: 12px;
      background: var(--paper3);
      color: var(--ink2);
      border: 1px solid var(--border);
    }

    body.page-llm-families .takeaway-desc{
      font-size: 13px;
      color: var(--ink2);
      line-height: 1.6;
    }

    body.page-llm-families .takeaway-card:nth-child(1) .takeaway-title{ color: var(--accent); }
    body.page-llm-families .takeaway-card:nth-child(2) .takeaway-title{ color: var(--accent3); }
    body.page-llm-families .takeaway-card:nth-child(3) .takeaway-title{ color: var(--accent2); }
    body.page-llm-families .takeaway-card:nth-child(4) .takeaway-title{ color: var(--accent4); }

    body.page-llm-families .closing-note{
      margin-top: 32px;
      padding: 20px 24px;
      background: var(--paper2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      font-size: 15px;
      color: var(--ink);
      line-height: 1.75;
    }

    /* ── Divider ── */
    body.page-llm-families .content-divider{
      text-align: center;
      padding: 16px 0;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--ink3);
      letter-spacing: 0.2em;
    }

    /* Context Engineering article additions */
    body.page-llm-families{
      overflow-x: hidden;
    }

    body.page-llm-families .article-hero-visual{
      margin: 32px auto 0;
      border: 1px solid var(--border);
      border-radius: var(--r2);
      overflow: hidden;
      background: var(--paper2);
      box-shadow: var(--shadow2);
    }

    body.page-llm-families .article-hero-visual img,
    body.page-llm-families .article-figure img{
      display: block;
      width: 100%;
      height: auto;
    }

    body.page-llm-families .article-hero-visual figcaption,
    body.page-llm-families .article-figure figcaption{
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      color: var(--ink3);
      font-size: 12px;
      line-height: 1.6;
      font-family: 'DM Mono', monospace;
      background: var(--paper2);
    }

    body.page-llm-families .article-section{
      padding: 48px 0;
      border-top: none;
      scroll-margin-top: 72px;
    }

    body.page-llm-families .article-section + .article-section{
      border-top: 1px solid var(--border);
    }

    body.page-llm-families .article-body h3{
      margin: 28px 0 12px;
      color: var(--ink);
      font-family: 'Fraunces', serif;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.25;
    }

    body.page-llm-families .article-body ul,
    body.page-llm-families .article-body ol{
      margin: 14px 0 20px;
      padding-left: 22px;
      color: var(--ink2);
    }

    body.page-llm-families .article-body li{
      margin-bottom: 8px;
      line-height: 1.75;
    }

    body.page-llm-families .article-body p,
    body.page-llm-families .article-body li,
    body.page-llm-families .section-title,
    body.page-llm-families .hero-desc{
      overflow-wrap: anywhere;
    }

    body.page-llm-families .article-body code,
    body.page-llm-families .references-list code{
      padding: 1px 5px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--paper3);
      color: var(--ink);
      font-family: 'DM Mono', monospace;
      font-size: 0.92em;
    }

    body.page-llm-families .article-body pre{
      margin: 18px 0 22px;
      padding: 18px 20px;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r2);
      background: var(--paper2);
      color: var(--ink2);
      font-size: 13px;
      line-height: 1.65;
      box-shadow: var(--shadow);
    }

    body.page-llm-families .article-body pre code{
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      font-size: inherit;
      white-space: pre;
    }

    body.page-llm-families .article-table-wrap{
      margin: 22px 0 26px;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r2);
      background: var(--paper2);
      box-shadow: var(--shadow);
    }

    body.page-llm-families .article-table-wrap table{
      width: 100%;
      min-width: 680px;
      border-collapse: collapse;
      font-size: 13px;
    }

    body.page-llm-families .article-table-wrap th,
    body.page-llm-families .article-table-wrap td{
      padding: 12px 14px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--border);
      color: var(--ink2);
      line-height: 1.55;
    }

    body.page-llm-families .article-table-wrap th{
      background: var(--paper3);
      color: var(--ink);
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    body.page-llm-families .article-table-wrap tr:last-child td{
      border-bottom: none;
    }

    body.page-llm-families .article-callout p{
      margin-bottom: 8px;
    }

    body.page-llm-families .article-callout p:last-child{
      margin-bottom: 0;
    }

    body.page-llm-families .article-figure{
      margin: 26px auto;
      border: 1px solid var(--border);
      border-radius: var(--r2);
      overflow: hidden;
      background: var(--paper2);
      box-shadow: var(--shadow2);
    }

    body.page-llm-families .references-section{
      padding: 48px 0;
      border-top: 1px solid var(--border);
      scroll-margin-top: 72px;
    }

    body.page-llm-families .references-list{
      margin-top: 20px;
      padding-left: 24px;
      color: var(--ink2);
      font-size: 13px;
      line-height: 1.7;
    }

    body.page-llm-families .references-list li{
      margin-bottom: 12px;
      padding-left: 4px;
    }

    body.page-llm-families .references-list a{
      overflow-wrap: anywhere;
    }

    body.page-llm-families .ref-back{
      margin-left: 6px;
      color: var(--ink3);
      text-decoration: none;
    }

    @media (max-width: 720px) {
      body.page-llm-families .container,
      body.page-llm-families .article-wrap,
      body.page-llm-families .article-wide{
        width: 100%;
        max-width: 100%;
      }

      body.page-llm-families .nav-inner{
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        flex-wrap: wrap;
        align-items: flex-start;
      }

      body.page-llm-families .nav-brand{
        order: 1;
        width: 100%;
      }

      body.page-llm-families .nav-links{
        order: 2;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
      }

      body.page-llm-families .theme-btn{
        order: 3;
        margin-top: 8px;
        margin-left: 0;
      }

      body.page-llm-families .hero-title{
        max-width: 100%;
        font-size: 22px;
        line-height: 1.08;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        word-break: break-all;
        line-break: anywhere;
      }

      body.page-llm-families .hero-desc{
        font-size: 14px;
      }
    }

    /* ── Mobile ── */
    @media (max-width: 600px) {
      body.page-llm-families .rank-header{ flex-direction: row; gap: 14px; }
      body.page-llm-families .rank-badge{ width: 42px; height: 42px; font-size: 18px; }
      body.page-llm-families .rank-cards{ grid-template-columns: 1fr; }
      body.page-llm-families .takeaway-grid{ grid-template-columns: 1fr; }
      body.page-llm-families .toc-grid{ grid-template-columns: 1fr; }
      body.page-llm-families .method-card{ padding: 20px; }
      body.page-llm-families .article-hero-visual{ margin-top: 24px; border-radius: var(--r); }
      body.page-llm-families .article-table-wrap table{ min-width: 560px; }
      body.page-llm-families .article-body pre{ padding: 14px; font-size: 12px; }
      body.page-llm-families .section-title,
      body.page-llm-families .article-body p,
      body.page-llm-families .article-body li{
        word-break: break-all;
        line-break: anywhere;
      }

      body.page-llm-families .section-title{
        font-size: 20px;
        letter-spacing: 0;
      }
    }

    @media (max-width: 400px) {
      body.page-llm-families .toc-grid{ grid-template-columns: 1fr; }
    }

/* ==========================================================================
   MBTI Dashboard (mbti-dashboard.html)
   ========================================================================== */

body.page-mbti-dashboard{
}