/* ============================================================
   Patanto デザイントークン v3

   v2までの「AI臭」を、外部記事が挙げる典型例に照らして潰した版。
   踏んでいた典型例と、その対処：

   1) 角丸が全要素で一律       → 角丸をほぼ全廃（日本の実用サイトは角がシャープ＝信頼感）
   2) カードに乗せる構図        → カード廃止。罫線の箱で区切る
   3) ピル型のタブ・バッジ      → 四角いタブ、下線でアクティブ表示
   4) ソフトシャドウ            → 影を全廃
   5) 均等な余白・均等な文字    → 主役（結論・総合判定）だけ強く、脇役は徹底的に地味に
   6) 低い情報密度              → 行間・余白を詰める。日本のユーザーは詳細を求める
   7) 単一トーンの配色          → 色は「意味」に割り当てる（可＝緑／不可＝赤／見出し＝ブランド色）

   参考：AI slop design tells（925studios）、なぜAIのデザインは「それっぽいのにダサい」のか（note）、
        日本と海外のWebデザイン事情（クーシー）
   ============================================================ */

:root{
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --fill:#F4F3F0;
  --fill-2:#EAE8E3;
  --stripe:#FAFAF8;
  --ink:#1B1917;
  --ink-2:#4D4842;
  --ink-3:#7C766D;
  --rule:#D6D2CA;
  --rule-2:#B3ADA2;
  --rule-3:#1B1917;
  --accent:#A8431B;
  --accent-2:#7E3113;
  --accent-fill:#FBEFE8;
  --ok:#0B6E3C;
  --ok-fill:#E4F1E9;
  --ng:#BE2B18;
  --ng-fill:#FBE7E3;
  --cond:#8A6100;
  --cond-fill:#F7EED6;
  --unk:#6F6A61;
  --unk-fill:#EFEDE8;
  --on-solid:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141311;
    --surface:#1A1917;
    --fill:#232120;
    --fill-2:#2C2A27;
    --stripe:#1E1D1B;
    --ink:#EFECE6;
    --ink-2:#B6B0A6;
    --ink-3:#8B857A;
    --rule:#38342E;
    --rule-2:#4E483F;
    --rule-3:#7A7368;
    --accent:#E8804C;
    --accent-2:#FFA579;
    --accent-fill:#33200F;
    --ok:#5FC58C;
    --ok-fill:#13291E;
    --ng:#F58C74;
    --ng-fill:#301A15;
    --cond:#DDB65D;
    --cond-fill:#2C2413;
    --unk:#A29B8F;
    --unk-fill:#26241F;
    --on-solid:#141311;
  }
}
:root[data-theme="dark"]{
  --ground:#141311; --surface:#1A1917; --fill:#232120; --fill-2:#2C2A27; --stripe:#1E1D1B;
  --ink:#EFECE6; --ink-2:#B6B0A6; --ink-3:#8B857A;
  --rule:#38342E; --rule-2:#4E483F; --rule-3:#7A7368;
  --accent:#E8804C; --accent-2:#FFA579; --accent-fill:#33200F;
  --ok:#5FC58C; --ok-fill:#13291E;
  --ng:#F58C74; --ng-fill:#301A15;
  --cond:#DDB65D; --cond-fill:#2C2413;
  --unk:#A29B8F; --unk-fill:#26241F;
  --on-solid:#141311;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",
              "Yu Gothic Medium","Meiryo",sans-serif;
  font-size:14.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2);text-underline-offset:2px}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:920px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:10;background:var(--accent);color:var(--on-solid);padding:8px 14px}

/* ---------------- ヘッダー：色帯は最上部の細い線だけ ---------------- */
.site{background:var(--surface);border-bottom:1px solid var(--rule-2);border-top:4px solid var(--accent)}
.site .wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:inherit;min-width:0}
.logo b{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
  font-size:23px;color:var(--accent);letter-spacing:.01em;
}
.logo span{font-size:11.5px;color:var(--ink-3)}
.search{margin-left:auto;position:relative;flex:0 1 260px;min-width:0}
.search input{
  width:100%;padding:6px 10px 6px 28px;font:inherit;font-size:13px;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-2);border-radius:0;
}
.search input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.search svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);opacity:.5}

/* ---------------- パンくず・見出し ---------------- */
.crumb{padding:10px 0 0;font-size:12px;color:var(--ink-3);line-height:1.6}
.crumb a{color:var(--ink-2)}
.crumb .sep{margin:0 5px}

h1{
  font-size:clamp(20px,3vw,26px);font-weight:700;line-height:1.5;
  margin:10px 0 8px;letter-spacing:.01em;
  padding-bottom:10px;border-bottom:2px solid var(--rule-3);
  word-break:auto-phrase;line-break:strict;
}
h1 .mono{font-size:.95em;color:var(--accent);white-space:nowrap;font-weight:700}
.lede{
  color:var(--ink-2);font-size:13.5px;margin:0 0 18px;line-height:1.85;
  background:var(--fill);border-left:5px solid var(--rule-2);padding:11px 14px;
}

/* セクション見出し：左の太い縦罫（日本の実用サイト／主婦向けメディアの定番） */
.sec{margin:26px 0}
.sec h2{
  font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);letter-spacing:.01em;
  margin:0 0 10px;padding:1px 0 1px 11px;border:0;border-left:5px solid var(--accent);
}

/* ---------------- 絞り込み：四角いタブ、下線でアクティブ ---------------- */
.chips{display:flex;gap:0;flex-wrap:wrap;margin:0 0 -1px;align-items:flex-end;
  border-bottom:1px solid var(--rule-2)}
.chip{
  font:inherit;font-size:13px;font-weight:700;padding:7px 16px;border-radius:0;
  text-decoration:none;background:var(--fill);color:var(--ink-2);
  border:1px solid var(--rule-2);border-bottom:0;margin-right:3px;
}
.chip[aria-pressed="true"]{
  background:var(--surface);color:var(--accent-2);
  border-top:3px solid var(--accent);padding-top:5px;
  position:relative;top:1px;
}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------------- 判定テーブル：カードに乗せず、罫線の格子で組む ---------------- */
.card{background:var(--surface);border:0;border-radius:0}
.tw{overflow-x:auto;max-width:100%;border:1px solid var(--rule-2)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:13.5px}
th,td{padding:8px 11px;text-align:left;vertical-align:middle;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
th:last-child,td:last-child{border-right:0}
tr:last-child td{border-bottom:0}
th{
  font-size:12px;font-weight:700;color:var(--ink-2);
  background:var(--fill);border-bottom:1px solid var(--rule-2);white-space:nowrap;
}
th.c,td.c{text-align:center;width:1%;white-space:nowrap}
tbody tr:nth-child(even){background:var(--stripe)}
tbody tr:hover{background:var(--accent-fill)}
td.pcell{padding:0}
td.pcell a{display:block;padding:8px 11px;text-decoration:none;color:inherit}
td.pcell a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
td.pcell .pname{color:var(--accent-2);text-decoration:underline}
.pname{font-weight:700;line-height:1.45;display:block;font-size:14.5px;letter-spacing:.02em}
.pmeta{font-size:11.5px;color:var(--ink-3);display:block;font-weight:400}
td.tot{background:var(--fill-2)}
tbody tr:nth-child(even) td.tot{background:var(--fill-2)}

/* 脇役：パーツ別の判定は小さく、地味に。記号を主にする */
.jm{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap;font-weight:700}
.jm i{font-style:normal;font-size:16px;line-height:1}
.jm b{font-size:11.5px;font-weight:700}
.jm.ok{color:var(--ok)}
.jm.ng{color:var(--ng)}
.jm.cond{color:var(--cond)}
.jm.unk{color:var(--ink-3);font-weight:400}
.jm.unk b{font-weight:400}

/* 主役：総合判定はベタ塗り。ここだけ強い */
.jt{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:0;
  background:var(--ok);color:var(--on-solid);
}
.jt i{font-style:normal;font-size:14px;line-height:1}
.jt.ng{background:var(--ng)}
.jt.cond{background:var(--cond)}
.jt.unk{background:var(--fill-2);color:var(--ink-3);font-weight:400}

.note{font-size:12px;color:var(--ink-2);margin:10px 0 0;line-height:1.75}
.note .jt{font-size:11px;padding:2px 8px;vertical-align:middle}


/* ---------------- パーツ図解：判定を絵で見せる ---------------- */
.diagram{margin:0 0 14px;border:1px solid var(--rule-2);background:var(--surface)}
.diagram svg{display:block;width:100%;max-width:420px;height:auto;margin:14px auto 4px}
.diagram .zn{stroke-width:2}
.diagram .zn.ok{fill:var(--ok-fill);stroke:var(--ok)}
.diagram .zn.ng{fill:var(--ng-fill);stroke:var(--ng)}
.diagram .zn.cond{fill:var(--cond-fill);stroke:var(--cond)}
.diagram .zn.unk,.diagram .zn.na{fill:var(--unk-fill);stroke:var(--rule-2)}
.diagram .lead{fill:none;stroke:var(--rule-2);stroke-width:1.4}
.diagram text{font-family:inherit}
.diagram .lb-name{font-size:13px;font-weight:700;fill:var(--ink)}
.diagram .lb-mark{font-size:13px;font-weight:700}
.diagram .lb-mark.ok{fill:var(--ok)}
.diagram .lb-mark.ng{fill:var(--ng)}
.diagram .lb-mark.cond{fill:var(--cond)}
.diagram .lb-mark.unk,.diagram .lb-mark.na{fill:var(--ink-3)}
.diagram figcaption{
  font-size:12px;color:var(--ink-2);padding:9px 13px;line-height:1.7;
  background:var(--fill);border-top:1px solid var(--rule);
}
.diagram .lg{font-weight:700;white-space:nowrap;margin-right:6px}
.diagram .lg.ok{color:var(--ok)}
.diagram .lg.ng{color:var(--ng)}
.diagram .lg.unk{color:var(--ink-3)}

/* ---------------- 一覧の絞り込み検索 ---------------- */
.lsearch{margin:0 0 16px;border:2px solid var(--accent);background:var(--accent-fill);padding:12px 14px}
.lsearch label{display:block;font-size:13px;font-weight:700;color:var(--accent-2);margin-bottom:7px}
.lsearch-row{display:flex;align-items:stretch;gap:0;position:relative;background:var(--surface);
  border:1px solid var(--rule-2)}
.lsearch-row svg{width:17px;height:17px;flex:none;align-self:center;margin:0 6px 0 10px;color:var(--ink-3)}
.lsearch input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:15px;padding:9px 8px 9px 0;
}
.lsearch input:focus{outline:none}
.lsearch-row:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.lsearch button{
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;flex:none;
  background:var(--fill);color:var(--ink-2);border:0;border-left:1px solid var(--rule-2);padding:0 14px;
}
.lsearch button:hover{background:var(--fill-2);color:var(--accent-2)}
.note.empty{
  background:var(--cond-fill);border-left:4px solid var(--cond);
  padding:10px 13px;color:var(--ink);
}

/* ---------------- 結論：帯見出し付きの四角い枠（主役） ---------------- */
.verdict{margin:18px 0 26px;padding:0;border:2px solid var(--ok);border-radius:0;background:var(--surface)}
.verdict.ng{border-color:var(--ng)}
.verdict.cond{border-color:var(--cond)}
.verdict.unk{border-color:var(--rule-2)}
.verdict .vlabel{
  display:block;background:var(--ok);color:var(--on-solid);
  font-size:12.5px;font-weight:700;letter-spacing:.12em;padding:4px 13px;
}
.verdict.ng .vlabel{background:var(--ng)}
.verdict.cond .vlabel{background:var(--cond)}
.verdict.unk .vlabel{background:var(--ink-3)}
.verdict .vtext{
  font-size:clamp(18px,2.7vw,23px);font-weight:700;line-height:1.6;
  margin:0;padding:15px 15px 0;color:var(--ink);
  word-break:auto-phrase;line-break:strict;
}
.verdict .vsub{font-size:13px;color:var(--ink-2);margin:0;padding:9px 15px 15px;line-height:1.8}

/* ---------------- 基本情報：罫線の表 ---------------- */
.spec{display:grid;grid-template-columns:minmax(130px,max-content) 1fr;gap:0;margin:0;
  border:1px solid var(--rule-2);background:var(--surface)}
.spec dt,.spec dd{padding:8px 11px;margin:0;font-size:13.5px;border-bottom:1px solid var(--rule)}
.spec dt{color:var(--ink-2);font-weight:700;background:var(--fill);
  white-space:nowrap;border-right:1px solid var(--rule)}
.spec dd{font-weight:400}
.spec dt:nth-last-of-type(1),.spec dd:nth-last-of-type(1){border-bottom:0}

/* ---------------- 出典・FAQ・関連 ---------------- */
.src{font-size:13px;line-height:1.8;padding-left:1.3em;margin:0}
.src li{margin-bottom:4px}
.upd{font-size:12px;color:var(--ink-2);margin-top:10px}
.upd .mono{font-weight:700}

.faqq{font-size:14.5px;font-weight:700;margin:16px 0 4px;color:var(--ink);
  padding-left:1.5em;text-indent:-1.5em}
.faqq::before{content:"Q";color:var(--on-solid);background:var(--accent);
  font-size:11px;padding:1px 5px;margin-right:.5em;vertical-align:2px}
.faqa{color:var(--ink-2);font-size:13.5px;margin:0;padding-left:1.5em;line-height:1.8}
.plain{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.85}

.rel{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.rel a{
  font-size:13px;padding:7px 0;text-decoration:none;color:var(--accent-2);
  border-bottom:1px solid var(--rule);width:100%;
}
.rel a:hover{background:var(--accent-fill)}
.rel a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rel a .mono{color:var(--ink-2)}

/* 関連品番は「品番の羅列」にしない。判定・容量・構造をその場で比べられるようにする */
.rel a{display:grid;grid-template-columns:74px 1fr;gap:0 10px;align-items:baseline;padding:9px 0}
.rel-jt{font-size:12px;font-weight:700;white-space:nowrap}
.rel-jt i{font-style:normal;margin-right:3px}
.rel-jt.ok{color:var(--ok)}
.rel-jt.ng{color:var(--ng)}
.rel-jt.cond{color:var(--cond)}
.rel-jt.unk{color:var(--ink-3)}
.rel-name{color:var(--accent-2)}
.rel-facts{grid-column:2;font-size:12px;color:var(--ink-3)}


/* ---------------- グローバルナビ（大手サービスサイトの構え） ---------------- */
.gnav{background:var(--fill);border-top:1px solid var(--rule)}
.gnav .wrap{display:flex;gap:0;flex-wrap:wrap;padding-left:16px;padding-right:16px}
.gnav a{
  font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none;
  padding:9px 16px;border-right:1px solid var(--rule);
}
.gnav a:first-child{border-left:1px solid var(--rule)}
.gnav a:hover{background:var(--surface);color:var(--accent-2)}
.gnav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------------- 注意帯：まちがえやすい点 ---------------- */
.alert{margin:0 0 26px;border:2px solid var(--cond);background:var(--surface)}
.alert-hd{
  display:flex;align-items:center;gap:7px;
  background:var(--cond);color:var(--on-solid);
  font-size:13px;font-weight:700;letter-spacing:.06em;padding:5px 13px;
}
.alert-hd .ic{width:17px;height:17px;flex:none}
.alert-body{margin:0;padding:13px 15px;font-size:14px;line-height:1.85;color:var(--ink)}

/* ---------------- 型番の調べ方 ---------------- */
.help{border:1px solid var(--rule-2);background:var(--fill);margin:0 0 20px}
.help summary{
  display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--accent-2);padding:10px 14px;
}
.help summary::-webkit-details-marker{display:none}
.help summary::after{content:"開く";margin-left:auto;font-size:12px;font-weight:400;color:var(--ink-3)}
.help[open] summary::after{content:"閉じる"}
.help summary:hover{background:var(--fill-2)}
.help summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.help summary .ic{width:18px;height:18px;flex:none}
.help-body{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding:14px;background:var(--surface);border-top:1px solid var(--rule-2);
}
.help-fig{flex:0 0 190px;color:var(--ink-2)}
.help-fig svg{width:100%;height:auto;display:block}
.help-steps{flex:1 1 300px;margin:0;padding-left:1.5em;font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.help-steps li{margin-bottom:7px}
.help-steps li::marker{color:var(--accent);font-weight:700}
.help-note{
  flex:1 1 100%;margin:2px 0 0;padding:8px 11px;font-size:12.5px;line-height:1.75;
  background:var(--accent-fill);color:var(--ink-2);border-left:4px solid var(--accent);
}

/* ---------------- 次にすること ---------------- */
.next .steps{
  margin:0;padding:0;list-style:none;counter-reset:step;
  border:1px solid var(--rule-2);background:var(--surface);
}
.next .steps li{
  counter-increment:step;position:relative;
  padding:11px 14px 11px 46px;border-bottom:1px solid var(--rule);
  font-size:13.5px;line-height:1.8;color:var(--ink-2);
}
.next .steps li:last-child{border-bottom:0}
.next .steps li:nth-child(even){background:var(--stripe)}
.next .steps li::before{
  content:counter(step);position:absolute;left:12px;top:12px;
  width:22px;height:22px;line-height:22px;text-align:center;
  background:var(--accent);color:var(--on-solid);font-size:12px;font-weight:700;
}

/* ---------------- 収益ブロック ---------------- */
.pr{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  background:var(--ink-3);color:var(--on-solid);border-radius:0;
  padding:1px 6px;vertical-align:1px;margin-left:8px;
}
.buy{border:1px solid var(--rule-2);border-radius:0;background:var(--surface)}
.buy-hd{
  padding:8px 12px;background:var(--fill);border-bottom:1px solid var(--rule-2);
  font-size:13.5px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;
}
.buy-item{display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.buy-item:last-child{border-bottom:0}
.buy-item .bi{flex:1 1 200px;min-width:0}
.buy-item .bn{font-weight:700;font-size:13.5px;line-height:1.45}
.buy-item .bw{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.buy-item a.btn{
  font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;
  padding:7px 16px;border-radius:0;background:var(--accent);color:var(--on-solid);
}
.buy-item a.btn:hover{background:var(--accent-2)}
.buy-item a.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.buy-foot{padding:8px 12px;font-size:11.5px;color:var(--ink-2);line-height:1.7;
  background:var(--fill);border-top:1px solid var(--rule)}

.cta{margin:26px 0;border:2px solid var(--accent);border-radius:0;background:var(--surface)}
.cta h3{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em;
  background:var(--accent);color:var(--on-solid);padding:5px 13px}
.cta p{margin:0;padding:13px 13px 11px;font-size:13.5px;color:var(--ink-2);line-height:1.8}
.cta a{
  display:inline-block;margin:0 13px 15px;text-decoration:none;font-size:13.5px;font-weight:700;
  padding:9px 22px;border-radius:0;background:var(--accent);color:var(--on-solid);
}
.cta a:hover{background:var(--accent-2)}
.cta a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}


/* 現れる：スクロールで各セクションが静かに立ち上がる */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* パーツ図解：色が順に入る */
@media (prefers-reduced-motion:no-preference){
  .js .diagram .zn{opacity:0;animation:zone-in .5s ease both}
  .js [data-reveal].in .diagram .zn:nth-child(1){animation-delay:.15s}
  .js [data-reveal].in .diagram .zn:nth-child(2){animation-delay:.32s}
  .js [data-reveal].in .diagram .zn:nth-child(3){animation-delay:.49s}
  .js [data-reveal]:not(.in) .diagram .zn{animation-play-state:paused}
}
@keyframes zone-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 触ると応える */
a,.chip,.cats a,.rel a,.pill{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
tbody tr{transition:background-color .15s ease}

}

/* ---------------- 法的ページ ---------------- */
.prose h2{
  font-size:15px;font-weight:700;margin:26px 0 8px;color:var(--ink);letter-spacing:.01em;
  border:0;border-left:5px solid var(--accent);padding:1px 0 1px 11px;
}
.prose p,.prose li{font-size:13.5px;color:var(--ink-2);line-height:1.85}
.prose dl{margin:12px 0;border-top:1px solid var(--rule)}
.prose dt{font-weight:700;color:var(--ink);padding:8px 0 0}
.prose dd{margin:0 0 8px;color:var(--ink-2);font-size:13.5px;border-bottom:1px solid var(--rule);padding-bottom:8px}

/* ---------------- フッター ---------------- */
footer{border-top:1px solid var(--rule-2);margin-top:40px;padding:16px 0 56px;
  font-size:12px;color:var(--ink-3)}
footer p{margin:0 0 8px;line-height:1.85}
footer a{color:var(--ink-2)}
.pill{display:inline-block;border-radius:0;padding:0;margin:0 14px 4px 0;
  text-decoration:underline;font-size:12px;color:var(--ink-2)}
.pill:hover{color:var(--accent-2)}

[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:560px){
  body{font-size:14px}
  .site .wrap{gap:8px}
  .search{flex:1 1 100%;margin-left:0}
  .spec{grid-template-columns:1fr}
  .spec dt{border-bottom:0;border-right:0;padding-bottom:2px}
  .spec dd{padding-top:0;padding-bottom:9px}
  .chip{padding:6px 12px;font-size:12.5px}
  .chip[aria-pressed="true"]{padding-top:4px}
}