:root{
    color-scheme:light dark;
    --bg:#F5F7FA; --card:#FFFFFF; --ink:#1B1F2B; --ink-soft:#5B6272;
    --line:#DDE3EC; --accent:#2D5F8A; --accent-soft:#E7EFF6; --gold:#C9A227;

    /* Han unification gives the same codepoint different glyph forms per
       region, so the locale's own font has to come first. A TC-first stack
       rendered Japanese kanji in Traditional Chinese forms - 直, 骨, 海, 器 all
       differ visibly - and Noto Sans JP was never even downloaded, because TC
       satisfied every character before the browser reached it. Each locale
       keeps the full chain as fallback; only the priority changes.
       en is left on the original order so Latin pages are unaffected. */
    --font-sans:'Noto Sans TC','Noto Sans SC','Noto Sans KR','Noto Sans JP',sans-serif;
  }
  :root:lang(ja){--font-sans:'Noto Sans JP','Noto Sans TC','Noto Sans SC','Noto Sans KR',sans-serif;}
  :root:lang(ko){--font-sans:'Noto Sans KR','Noto Sans TC','Noto Sans SC','Noto Sans JP',sans-serif;}
  :root:lang(zh-Hans){--font-sans:'Noto Sans SC','Noto Sans TC','Noto Sans KR','Noto Sans JP',sans-serif;}
  :root:lang(zh-Hant){--font-sans:'Noto Sans TC','Noto Sans SC','Noto Sans KR','Noto Sans JP',sans-serif;}
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
  /* 未加樣式嘅 <a> 會用瀏覽器預設藍色/已訪問紫色,喺深色卡片背景上對比度淨得返 1.7:1(WCAG AA 要求 4.5:1),幾乎睇唔到。 */
  a{color:var(--accent);}
  .page{max-width:920px;margin:0 auto;padding:40px 24px 80px;}
  header{margin-bottom:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;}
  .header-text{flex:1;min-width:260px;}
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;font-weight:500;}
  h1{font-size:clamp(26px,4.2vw,38px);font-weight:900;line-height:1.25;margin:0 0 10px;letter-spacing:-.01em;}
  .sub{font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0;max-width:600px;}
  .lang-switch{display:flex;flex-direction:column;gap:6px;}
  .lang-switch label{font-size:11.5px;color:var(--ink-soft);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
  .lang-switch select{font-family:var(--font-sans);font-size:13.5px;padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer;}

  /* AdSense嘅auto-format喺廣告素材送到之前已經用inline style預留高度(常見280px),
     未填滿(或者離線/被擋)嗰陣淨係得返一個好大嘅空白+細細個「廣告」字,睇落好似page壞咗。
     幫個容器加返卡片感嘅底同框,即使未填滿都睇落係刻意留白,唔係render失敗。 */
  .ad-slot{margin:20px 0;min-height:90px;display:flex;align-items:center;justify-content:center;}
  .ad-slot .ad-label{position:relative;width:100%;background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:10px 12px 6px;box-sizing:border-box;}
  .ad-slot .ad-label::before{content:attr(data-ad-caption);display:block;font-size:10px;color:var(--ink-soft);text-align:center;margin-bottom:4px;font-family:'JetBrains Mono',monospace;letter-spacing:.1em;}

  /* Desktop:兩大部分上下疊,每部分自己一行label+tab列;手機版成個.tabs-groups收埋,改用落拉選單(見下面mobile media query) */
  .tabs-groups{display:flex;flex-direction:column;gap:14px;margin:24px 0 20px;}
  .tabs-group-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;display:block;}
  .tabs{display:flex;gap:8px;margin:0;border-bottom:2px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  /* 雙語標籤令個tab列喺desktop都可能撐爆容器闊度;.tabs-scroll-wrap包住條nav,兩邊疊加隱藏/顯示嘅箭嘴掣,JS按實際overflow情況顯示/隱藏同disable */
  .tabs-scroll-wrap{position:relative;}
  .tabs-scroll-btn{position:absolute;top:0;bottom:2px;width:30px;display:none;align-items:center;justify-content:center;border:none;background:none;color:var(--ink-soft);font-size:20px;line-height:1;cursor:pointer;z-index:2;padding:0;}
  .tabs-scroll-btn.visible{display:flex;}
  .tabs-scroll-left{left:-4px;background:linear-gradient(to right,var(--bg) 55%,transparent);justify-content:flex-start;padding-left:2px;}
  .tabs-scroll-right{right:-4px;background:linear-gradient(to left,var(--bg) 55%,transparent);justify-content:flex-end;padding-right:2px;}
  .tabs-scroll-btn:hover{color:var(--accent);}
  .tab-btn{font-family:var(--font-sans);font-weight:700;font-size:15px;background:none;border:none;padding:10px 4px;margin-right:20px;color:var(--ink-soft);cursor:pointer;border-bottom:3px solid transparent;transform:translateY(2px);white-space:nowrap;flex-shrink:0;}
  .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}
  /* 手機版9個分頁橫向掃太遠先撳到後面嘅topic;窄屏改用分組落拉選單(optgroup分「學術對比工具」「大學預測」兩大部分),desktop個tab列冇呢個問題,原樣保留 */
  .tab-group-select-label,.tab-group-select{display:none;}

  .mode-toggle{display:flex;gap:8px;margin-bottom:14px;}
  .mode-btn,.substat-btn{font-family:var(--font-sans);font-size:13.5px;font-weight:500;padding:11px 16px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-soft);cursor:pointer;}
  .mode-btn.active,.substat-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:700;}
  .mode-panel{display:none;}
  .mode-panel.active{display:block;}
  .textarea-block{margin-bottom:22px;}
  .textarea-block label{display:block;font-size:13px;color:var(--ink-soft);font-weight:700;margin-bottom:8px;}
  textarea{font-family:'JetBrains Mono',monospace;font-size:14px;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);outline:none;resize:vertical;width:100%;line-height:1.5;box-sizing:border-box;}
  textarea:focus{border-color:var(--accent);}
  .hist-bar{fill:var(--accent);}
  .hist-axis-label{font-size:11px;fill:var(--ink-soft);font-family:'JetBrains Mono',monospace;}
  .hist-count-label{font-size:11px;fill:var(--ink);font-family:'JetBrains Mono',monospace;font-weight:700;}
  .box-whisker{stroke:var(--ink-soft);stroke-width:1.5;}
  .box-rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2;}
  .box-median{stroke:var(--gold);stroke-width:2.5;}
  .box-outlier{fill:var(--card);stroke:var(--accent);stroke-width:1.5;}

  .input-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap;}
  .input-panel label{font-size:13px;color:var(--ink-soft);font-weight:500;}
  .input-pair{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;}
  @media (max-width:480px){.input-pair{width:100%;}.input-pair select,.input-pair input{flex:1;min-width:0;}}
  select,input[type="number"]{font-family:'JetBrains Mono',monospace;font-size:16px;padding:9px 13px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);outline:none;}
  /* select天生較高(原生下拉箭嘴撐大咗line box)已經達標,但number input淨得41px,差3px先夠WCAG嘅44px觸控目標下限 */
  input[type="number"]{padding:11px 13px;}
  select{font-family:var(--font-sans);font-weight:500;cursor:pointer;}
  select:focus,input[type="number"]:focus{border-color:var(--accent);}
  input[type="number"]{width:130px;font-weight:700;}

  .hw-inputs{display:flex;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
  .hw-inputs label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-soft);font-weight:600;}
  .steps{background:#FCFBF6;border:1.5px dashed var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:22px;font-family:'JetBrains Mono',monospace;font-size:14.5px;line-height:2;color:var(--ink);}
  .steps .step-label{color:var(--ink-soft);font-family:var(--font-sans);font-size:12.5px;font-weight:700;margin-right:8px;}

  details.adv-settings{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 20px;margin-bottom:22px;}
  details.adv-settings summary{font-size:13.5px;font-weight:700;color:var(--accent);cursor:pointer;padding:12px 0;margin:-12px 0;}
  .adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
  @media (max-width:720px){.adv-grid{grid-template-columns:repeat(2,1fr);}}
  .adv-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-soft);font-weight:600;}
  .adv-grid input{width:100%;font-size:14px;padding:7px 10px;}

  .curve-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 20px 8px;margin-bottom:22px;transition:opacity .15s ease;}
  .curve-wrap.stale{opacity:.35;}
  svg{width:100%;height:auto;display:block;}
  .curve-shade{fill:var(--accent);}
  .curve-line{stroke:#94A0B8;}
  .curve-marker{stroke:var(--gold);}
  .curve-baseline{stroke:var(--line);}
  .curve-caption{font-size:14px;color:var(--ink-soft);text-align:center;margin:6px 0 14px;line-height:1.6;}
  .curve-caption b{color:var(--ink);font-weight:700;}

  /* 效應量量表:顏色深淺代表|d|級別(微小/小/中/大),金色marker標示目前數值所在位置——
     呼應常態分佈頁嘅曲線圖,令效應量頁唔會淨係得三個卡冇任何視覺化。 */
  .es-scale-track{fill:var(--line);}
  .es-scale-zone{fill:var(--accent);}
  .es-scale-zone.es-scale-small{opacity:.35;}
  .es-scale-zone.es-scale-medium{opacity:.62;}
  .es-scale-zone.es-scale-negligible{fill:var(--line);}
  .es-scale-ticks text{font-size:11px;fill:var(--ink-soft);font-family:'JetBrains Mono',monospace;text-anchor:middle;}
  .es-scale-ticks text.es-scale-tick-zero{fill:var(--ink);font-weight:700;}
  #esScaleMarker{stroke-width:3;transition:x1 .15s ease,x2 .15s ease;}

  .cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
  .cards-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  @media (max-width:720px){.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .card{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:16px 16px 14px;transition:border-color .2s ease,background .2s ease;min-width:0;}
  .card.active{border-color:var(--gold);background:#FFFBF0;}
  .card .label{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-bottom:6px;}
  /* minmax(0,1fr) 令grid track可以縮到細過內容,但未足夠——一個好長/超出常理嘅數值(輸入框冇設max)仍然係一個唔斷開嘅"word",要靠break-word先可以喺卡片入面換行,唔會谷開成頁橫向overflow。 */
  .card .value{display:block;font-family:'JetBrains Mono',monospace;font-size:23px;font-weight:700;color:var(--accent);line-height:1.2;margin-bottom:6px;overflow-wrap:break-word;}
  .card.active .value{color:#8A6D00;}
  .card .hint{display:block;font-size:12px;color:var(--ink-soft);line-height:1.5;}

  .apps{margin-top:22px;}
  .apps-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
  .apps ul{margin:0;padding-left:20px;font-size:13px;color:var(--ink-soft);line-height:1.7;}
  .apps li{margin-bottom:4px;}
  .apps li:last-child{margin-bottom:0;}
  .disclaimer{background:#FFF6F0;border:1.5px solid #F0D5B8;border-radius:10px;padding:12px 16px;font-size:12.5px;color:#8A5A2B;line-height:1.6;margin-bottom:18px;}
  .noscript-notice{background:#FFF6F0;border:1.5px solid #F0D5B8;border-radius:10px;padding:16px 20px;font-family:sans-serif;font-size:14px;line-height:1.7;color:#8A5A2B;}

  .band-summary{background:linear-gradient(135deg,#FFFBF0,#FFF3D9);border:2px solid var(--gold);border-radius:14px;padding:18px 22px;margin:0 0 22px;font-size:16px;line-height:1.7;color:var(--ink);}
  .band-summary:empty{display:none;}
  .band-summary b{color:#8A6D00;font-weight:800;}
  .band-summary.example-mode{background:linear-gradient(135deg,#F5F7FA,#EAEEF3);border-color:var(--line);}
  .band-summary.example-mode b{color:var(--ink-soft);}
  @media (max-width:720px){.band-summary{padding:14px 16px;font-size:14.5px;}}

  .table-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px 14px;margin-top:22px;}
  .table-wrap h2{font-size:17px;font-weight:700;margin:0 0 4px;}
  .table-h2-second{margin-top:26px !important;}
  .table-sub{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
  table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:13.5px;margin-bottom:8px;}
  th{text-align:left;font-family:var(--font-sans);font-weight:700;font-size:12.5px;color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--line);}
  td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink);}
  .data-table tbody tr{cursor:pointer;transition:background .15s ease;}
  .data-table tbody td{padding-top:12px;padding-bottom:12px;}
  .data-table tbody tr:hover{background:var(--accent-soft);}
  .data-table tbody tr.row-active{background:#FFFBF0;}
  .data-table tbody tr td:first-child{font-weight:700;color:var(--accent);}
  #critTable td:first-child{font-family:var(--font-sans);font-weight:500;color:var(--ink);cursor:default;}
  #critTable tbody tr:hover{background:none;}
  .official-links{list-style:none;margin:0;padding:0;}
  .official-links li{padding:10px 0;border-bottom:1px solid var(--line);}
  .official-links li:last-child{border-bottom:none;}
  .official-links a{color:var(--accent);font-weight:600;text-decoration:none;font-size:14px;}
  .official-links a:hover{text-decoration:underline;}

  .ai-analysis-wrap{margin-bottom:22px;}
  .ai-btn{width:100%;padding:14px;font-family:var(--font-sans);font-size:15px;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:12px;cursor:pointer;}
  .ai-btn:hover{opacity:.9;}
  .ai-btn:disabled{opacity:.5;cursor:wait;}
  .ai-btn.unavailable:disabled{cursor:not-allowed;}
  .ai-result.unavailable-note{border-color:var(--line);}
  .ai-result{margin-top:14px;background:var(--card);border:1.5px solid var(--gold);border-radius:12px;padding:18px 20px;font-size:14px;line-height:1.8;color:var(--ink);white-space:pre-wrap;}

  footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);}
  /* Footer原本係一大段冇分隔嘅文字,擠住幾件唔相關嘅事實(公式、資料可信度、審查流程等);拆做標籤+內容對,易睇好多 */
  .footer-facts{margin:0;}
  .footer-facts dt{font-weight:700;color:var(--ink);margin-top:12px;}
  .footer-facts dt:first-child{margin-top:0;}
  .footer-facts dd{margin:2px 0 0;}
  .footer-links{margin:18px 0 0;}
  .footer-links a{color:var(--accent);font-weight:600;text-decoration:none;padding:6px 0;display:inline-block;}
  .footer-links a:hover,.footer-links a:focus{text-decoration:underline;}

  @media (max-width:720px){
    .page{padding:24px 16px 60px;}
    /* 9個分頁窄屏度橫向掃要掃好遠先撳到最尾嘅topic;改用分組落拉選單取代成排tab掣,一步跳到想去嘅分頁 */
    .tabs-groups{display:none;}
    .tab-group-select-label{display:block;font-size:11.5px;color:var(--ink-soft);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:24px 0 6px;}
    .tab-group-select{display:block;width:100%;margin-bottom:20px;}
    .tab-btn{margin-right:12px;font-size:14px;}
    /* 六欄嘅GSAT五標表窄屏度會谷過個wrap(例如353px vs 341px),table-wrap有overflow-x:auto但冇任何提示,跟返.tabs個做法加邊緣淡出 */
    .table-wrap{overflow-x:auto;padding:18px 16px 10px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent 100%);}
    th,td{padding:7px 7px;font-size:12.5px;}
    table{font-size:12.5px;}
    .input-panel{padding:16px;}
    input[type="number"]{width:110px;}
    .card .value{font-size:20px;}
    /* 長文字(學系全名)+ 5欄嘅表格喺窄畫面用返表格格式會逼到換晒好多行、右邊仲會畀切;
       改做逐行卡片,label 喺上、值喺下,唔使橫向 scroll 都睇晒晒。 */
    #dseExamplesTable{overflow-x:visible;}
    #dseExamplesTable thead{display:none;}
    #dseExamplesTable,#dseExamplesTable tbody,#dseExamplesTable tr,#dseExamplesTable td{display:block;width:100%;}
    #dseExamplesTable tr{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
    #dseExamplesTable tr:last-child{margin-bottom:0;}
    #dseExamplesTable td{border-bottom:none;padding:5px 0;}
    #dseExamplesTable td::before{content:attr(data-label);display:block;font-weight:700;color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}
    #dseExamplesTable td:first-child{font-size:15px;font-weight:700;color:var(--accent);padding-top:0;}
    /* 出處連結原本淨係文字行高(~17px),遠低過 WCAG 建議嘅 44px 觸控目標;加返直向 padding 撐大可撳範圍。 */
    #dseExamplesTable td:last-child a{display:inline-block;padding:14px 0;}
  }

  /* ===================================================================
     Multi-page structure. Added when the twelve hash-tabs were split into
     real URLs: the panel is now the page rather than one of twelve toggled
     siblings, and each page carries breadcrumbs plus a long-form article.
     =================================================================== */
  .tool-panel{display:block;}

  .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100;font-weight:700;font-size:14px;}
  .skip-link:focus{left:0;}

  /* The desktop nav strip is now links, not buttons - same look, real hrefs. */
  a.tab-btn{display:inline-block;text-decoration:none;}
  a.tab-btn:hover{color:var(--accent);}
  a.tab-btn[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);}

  .breadcrumb{font-size:12.5px;color:var(--ink-soft);margin:0 0 18px;}
  .breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
  .breadcrumb li:not(:last-child)::after{content:'/';margin-left:6px;color:var(--line);}
  .breadcrumb a{text-decoration:none;font-weight:600;}
  .breadcrumb a:hover{text-decoration:underline;}
  .breadcrumb [aria-current="page"]{color:var(--ink);}

  /* Long-form explanatory content below each calculator. */
  .article{margin-top:48px;padding-top:8px;line-height:1.75;font-size:15.5px;}
  .article h2{font-size:21px;font-weight:800;margin:38px 0 12px;padding-top:26px;border-top:1px solid var(--line);letter-spacing:-.01em;}
  .article h2:first-child{margin-top:0;padding-top:0;border-top:none;}
  .article h3{font-size:16.5px;font-weight:700;margin:26px 0 8px;}
  .article p{margin:0 0 14px;}
  .article ul,.article ol{margin:0 0 16px;padding-left:24px;}
  .article li{margin-bottom:7px;}
  .article a{font-weight:600;}
  .article code{font-family:'JetBrains Mono',monospace;font-size:.92em;background:var(--accent-soft);padding:2px 5px;border-radius:4px;}
  .article .formula{font-family:'JetBrains Mono',monospace;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:14px 16px;margin:0 0 16px;font-size:14px;overflow-x:auto;}
  .article .worked-example{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 18px;}
  .article .worked-example h3{margin-top:0;}
  .article .callout{background:var(--accent-soft);border-radius:10px;padding:14px 18px;margin:0 0 18px;font-size:14.5px;}
  .article .callout p:last-child{margin-bottom:0;}
  .article table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;}
  .article th,.article td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);}
  .article th{font-weight:700;color:var(--ink-soft);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
  .article .sources{font-size:13.5px;color:var(--ink-soft);}
  .article .sources li{margin-bottom:9px;}

  /* Hub page: the directory of every tool. */
  .hub-intro{font-size:16.5px;line-height:1.75;max-width:680px;}
  .hub-section-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:38px 0 14px;}
  .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:8px;}
  .tool-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;color:inherit;display:block;transition:border-color .15s,transform .15s;}
  .tool-card:hover{border-color:var(--accent);transform:translateY(-2px);}
  .tool-card h3{margin:0 0 7px;font-size:16px;font-weight:800;color:var(--accent);}
  .tool-card p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);}

  .footer-nav{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;}
  .footer-nav a{color:var(--accent);font-weight:600;text-decoration:none;padding:6px 0;display:inline-block;}
  .footer-nav a:hover,.footer-nav a:focus{text-decoration:underline;}
  .footer-note{margin:14px 0 0;line-height:1.65;}

  @media (max-width:720px){
    .article{margin-top:36px;font-size:15px;}
    .article h2{font-size:19px;}
    .tool-grid{grid-template-columns:1fr;}
  }

  @media (prefers-color-scheme:dark){
    :root{
      --bg:#14171F; --card:#1D212C; --ink:#E8EAF0; --ink-soft:#9AA1B4;
      --line:#2B3040; --accent:#7BB3E3; --accent-soft:#1E2A38; --gold:#DFC167;
    }
    .article code{background:#232838;}
    .skip-link{color:#0B0D12;}
    .disclaimer,.noscript-notice{background:#2A2013;border-color:#4A3820;color:#E3C084;}
    .steps{background:#211F17;}
    .card.active{background:#2A2410;}
    .card.active .value{color:#E0C060;}
    .band-summary{background:linear-gradient(135deg,#241F0E,#2C2410);}
    .band-summary b{color:#E0C060;}
    .band-summary.example-mode{background:linear-gradient(135deg,#1D212C,#242938);}
    .data-table tbody tr.row-active{background:#2A2410;}
    .ai-btn{color:#0B0D12;}
    .curve-line{stroke:#6B7385;}
  }