/* 主義タイプ診断 — 4つのグループ色(琥珀・青緑・藍・紫)が全体の軸。
   明朝(主義名・見出し)×ゴシック(本文)。端末内の書体のみ使用(外部通信なし)。 */
:root {
  --bg:#f3f5f9; --paper:#ffffff; --ink:#16203a; --sub:#566077; --line:#dde2ec; --btn:#16203a; --btn-ink:#ffffff;
  --mi:#b8700f; --mi-t:#fbefd8; --mc:#157a74; --mc-t:#dcf0ed; --gi:#33509e; --gi-t:#e2e8f7; --gc:#7b3b72; --gc-t:#f0e1ed;
  --g:var(--ink); --gt:var(--line);
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Source Han Serif",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1320; --paper:#161d2f; --ink:#e9edf7; --sub:#97a2ba; --line:#28314b; --btn:#e9edf7; --btn-ink:#0e1320;
    --mi:#eaa54c; --mi-t:#33271a; --mc:#52c4ba; --mc-t:#14302f; --gi:#8aa4ec; --gi-t:#1b2545; --gc:#cf86c3; --gc-t:#3a1f37;
  }
}
[data-g="MI"] { --g:var(--mi); --gt:var(--mi-t); }
[data-g="MC"] { --g:var(--mc); --gt:var(--mc-t); }
[data-g="GI"] { --g:var(--gi); --gt:var(--gi-t); }
[data-g="GC"] { --g:var(--gc); --gt:var(--gc-t); }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.85; }
a { color:inherit; }
main { max-width:560px; margin:0 auto; padding:28px 18px 56px; }
main.wide { max-width:720px; }
h1, h2, h3 { font-family:var(--serif); }
h1 { font-size:1.7rem; line-height:1.35; margin:0 0 10px; }
h2 { font-size:1.3rem; line-height:1.4; margin:0 0 10px; }
h3 { font-size:1rem; margin:18px 0 0; }
p { margin:10px 0; }
ul, ol { margin:8px 0 14px; padding-left:1.3em; }
li { margin:4px 0; }
.sub { color:var(--sub); margin:0 0 24px; }
.note { color:var(--sub); font-size:.82rem; margin-top:20px; }
.note.ok { color:var(--g); font-weight:700; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--g); outline-offset:2px; }

/* ナビ・フッター */
header.site { background:var(--paper); border-bottom:1px solid var(--line); }
header.site nav { max-width:720px; margin:0 auto; padding:10px 18px 0; display:flex; flex-wrap:wrap; align-items:center; column-gap:24px; }
header.site a { text-decoration:none; color:var(--ink); }
header.site a.brand { font-family:var(--serif); font-weight:700; font-size:1.05rem; padding:6px 0; margin-right:auto; }
header.site a.brand .logo { vertical-align:-5px; margin-right:9px; border-radius:5px; }
header.site .tabs { display:flex; gap:2px; overflow-x:auto; max-width:100%; }
header.site .tabs a { padding:10px 11px; font-size:.88rem; white-space:nowrap; color:var(--sub); border-bottom:3px solid transparent; }
header.site .tabs a:hover { color:var(--ink); }
header.site .tabs a[aria-current="page"] { color:var(--ink); font-weight:700; border-bottom-color:var(--ink); }
@media (max-width:440px) { header.site .tabs a { padding:10px 6px; font-size:.82rem; } }
@media (max-width:620px) { header.site a.brand { width:100%; } header.site .tabs { margin:0 -18px; padding:0 12px; width:calc(100% + 36px); max-width:none; } }
footer.site { max-width:720px; margin:0 auto; padding:24px 18px 48px; color:var(--sub); font-size:.8rem; border-top:1px solid var(--line); }
footer.site p { margin:6px 0; }

/* ボタン */
button { font:inherit; cursor:pointer; }
.btn { display:block; width:100%; padding:15px 18px; border:2px solid var(--btn); border-radius:10px; background:var(--btn); color:var(--btn-ink); font-weight:700; font-size:1rem; text-align:center; text-decoration:none; margin-top:12px; }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); font-weight:600; }
.btn.ghost:hover { border-color:var(--ink); }
.btn:disabled { opacity:.4; cursor:default; }
.btn.g { background:var(--g); border-color:var(--g); color:#fff; }
@media (prefers-color-scheme: dark) { .btn.g { color:#0e1320; } }

/* ホーム */
.home-hero { display:grid; grid-template-columns:1fr; gap:28px; padding:8px 0 36px; }
.home-hero h1 { font-size:2.35rem; line-height:1.3; letter-spacing:.01em; margin:0 0 14px; text-wrap:balance; word-break:keep-all; overflow-wrap:anywhere; }
.home-hero .lead { font-size:1.05rem; margin:0 0 22px; }
.wall { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.wall a { display:block; aspect-ratio:1/1; background:var(--gt); border-radius:6px; overflow:hidden; border-bottom:4px solid var(--g); }
.wall img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.wall a { transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.wall a:hover, .wall a:focus-visible { transform:translateY(-5px) scale(1.04); box-shadow:0 10px 22px color-mix(in srgb, var(--g) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--g) 40%, transparent); position:relative; z-index:2; outline:none; }
.wall a:active { transform:scale(.97); }
@media (hover:hover) { .wall:hover a:not(:hover):not(:focus-visible) { opacity:.45; } }
.wall-cap { color:var(--sub); font-size:.8rem; margin:8px 0 0; }
@media (min-width:760px) { .home-hero { grid-template-columns:1.05fr 1fr; align-items:center; gap:40px; } .home-hero h1 { font-size:2.5rem; } }
.section { padding:30px 0; border-top:1px solid var(--line); }
.section > h2 { margin-bottom:14px; }
.steps { list-style:none; padding:0; counter-reset:s; }
.steps li { counter-increment:s; position:relative; padding:2px 0 14px 46px; margin:0; }
.steps li::before { content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--bg); font-family:var(--serif); font-weight:700; display:grid; place-items:center; }
.axmap { display:grid; gap:0; }
.axmap .ax { padding:14px 0; border-bottom:1px solid var(--line); }
.axmap .ax:last-child { border-bottom:0; }
.axmap .ends { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--serif); font-weight:700; font-size:1.05rem; }
.axmap .ends span:last-child { text-align:right; }
.axmap .line { height:3px; background:linear-gradient(90deg,var(--mi),var(--gi)); border-radius:2px; margin:6px 0 8px; opacity:.55; }
.axmap p { margin:0; color:var(--sub); font-size:.92rem; }
.axmap .ax-name { font-size:.8rem; color:var(--sub); margin:0 0 2px; }
.modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .modes { grid-template-columns:1fr; } }
.mode { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.mode h3 { margin:0 0 4px; font-size:1.1rem; }
.mode p { margin:4px 0 0; color:var(--sub); font-size:.92rem; }

/* 診断 */
.quiz-wrap { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 18px 24px; }
.bar { position:sticky; top:0; z-index:2; height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:16px; }
.bar > i { display:block; height:100%; background:var(--ink); transition:width .25s; }
.step { color:var(--sub); font-size:.85rem; margin:0 0 4px; }
.hint { color:var(--sub); font-size:.88rem; margin:0 0 14px; }
.qblock { margin:0 0 6px; padding:20px 0 22px; border-bottom:1px solid var(--line); }
.q { font-family:var(--serif); font-size:1.12rem; font-weight:700; line-height:1.6; margin:0 0 8px; }
.scale-ends { display:flex; justify-content:space-between; color:var(--sub); font-size:.78rem; margin-top:14px; }
.scale { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.dot { border-radius:50%; border:2px solid var(--line); background:var(--paper); padding:0; transition:background .12s, border-color .12s; }
.dot.agree { border-color:var(--mc); }
.dot.disagree { border-color:var(--gc); }
.dot.mid { border-color:var(--sub); }
.dot:hover { background:var(--gt); }
.dot.on { background:var(--mc); }
.dot.disagree.on { background:var(--gc); }
.dot.mid.on { background:var(--sub); }
.result-card { text-align:center; padding:8px 0; }
.result-card .head { color:var(--sub); margin:0 0 10px; }
.result-card .rimg { display:block; width:min(300px,80%); margin:0 auto 14px; border-radius:12px; border-bottom:6px solid var(--g); background:var(--gt); }
.shugi.big { font-size:2.5rem; line-height:1.25; margin:6px 0 2px; }
.en { color:var(--sub); margin:0 0 6px; }
.code { font-family:ui-monospace,Menlo,monospace; letter-spacing:.3em; color:var(--g); font-weight:700; margin:6px 0; }
.teaser { font-family:var(--serif); font-size:1.15rem; font-weight:700; margin:18px 0 6px; }

/* 一覧 */
.group { margin:34px 0 8px; }
.group h2 { margin:0; padding-left:12px; border-left:6px solid var(--g); }
.group .gsub { color:var(--sub); margin:2px 0 14px 18px; font-size:.9rem; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .grid { gap:10px; } }
a.tcard { display:block; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-top:5px solid var(--g); border-radius:10px; padding:10px 10px 14px; }
a.tcard { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; }
a.tcard:hover, a.tcard:focus-visible { transform:translateY(-6px); border-color:var(--g); box-shadow:0 12px 26px color-mix(in srgb, var(--g) 40%, transparent), 0 0 0 3px color-mix(in srgb, var(--g) 35%, transparent); outline:none; }
a.tcard:hover .tname, a.tcard:focus-visible .tname { color:var(--g); }
a.tcard:active { transform:translateY(-1px) scale(.98); }
@media (hover:hover) { .grid:hover a.tcard:not(:hover):not(:focus-visible) { opacity:.5; } }
a.tcard .thumb { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; margin-bottom:8px; background:var(--gt); }
a.tcard .code { font-size:.72rem; margin:0; letter-spacing:.25em; }
a.tcard .tname { font-family:var(--serif); font-size:1.08rem; font-weight:700; margin:2px 0 0; line-height:1.4; }
a.tcard .tchara { color:var(--sub); font-size:.82rem; }
a.tcard .tq { font-size:.82rem; color:var(--sub); margin-top:6px; line-height:1.6; }

/* タイプ別ページ */
.chips { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:10px 0 0; }
.chip { margin:0; padding:3px 12px; border-radius:999px; background:var(--paper); border:1px solid var(--g); color:var(--g); font-size:.82rem; font-weight:700; }
.more { margin-top:44px; }
.more h2 { padding-left:12px; border-left:6px solid var(--ink); }
.minis { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:10px 0 6px; }
a.mini { display:flex; gap:12px; align-items:center; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--g); border-radius:10px; padding:8px 12px 8px 8px; }
a.mini { transition:transform .18s, box-shadow .18s, border-color .18s; }
a.mini:hover, a.mini:focus-visible { transform:translateY(-3px); border-color:var(--g); box-shadow:0 8px 18px color-mix(in srgb, var(--g) 35%, transparent); outline:none; }
a.mini img { width:56px; height:56px; object-fit:cover; border-radius:6px; background:var(--gt); }
a.mini strong { display:block; font-family:var(--serif); line-height:1.35; }
a.mini .mchara { color:var(--sub); font-size:.82rem; }
#page { --pg:var(--g); }
.hero { display:grid; gap:18px; align-items:center; margin:0 0 26px; padding:18px; background:var(--gt); border-radius:14px; border-bottom:6px solid var(--g); }
.hero .chara-img { display:block; width:100%; max-width:340px; margin:0 auto; border-radius:10px; }
.hero .code { margin:0; font-size:.85rem; }
.hero .shugi { font-size:2rem; line-height:1.3; margin:2px 0; }
.hero .en { margin:0; }
@media (min-width:640px) { .hero { grid-template-columns:260px 1fr; padding:20px 24px; } .hero .chara-img { max-width:260px; } .hero .shugi { font-size:2.3rem; } }
.mine { margin:0 0 26px; padding:18px 18px 20px; background:var(--paper); border:1px solid var(--line); border-top:5px solid var(--g); border-radius:10px; }
.mine h3 { margin:0 0 6px; font-size:1.1rem; }
.quote { margin:0 0 26px; padding:4px 0 4px 18px; border-left:5px solid var(--g); }
.quote p { margin:0; font-family:var(--serif); font-size:1.15rem; line-height:1.75; }
.quote cite { display:block; margin-top:8px; color:var(--sub); font-size:.84rem; font-style:normal; }
.box { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:0 0 18px; }
.box h3 { margin:0 0 6px; }
.box.easy { background:var(--gt); border-color:transparent; }
.article { margin-top:6px; }
.article h2 { margin:38px 0 8px; padding-left:12px; border-left:6px solid var(--g); }
.article p { margin:12px 0; }
.article ul { padding-left:1.2em; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
@media (max-width:560px) { .two { grid-template-columns:1fr; } }
.two .box { margin:0; }
.person { margin:18px 0 0; padding:10px 14px; background:var(--gt); border-radius:8px; font-size:.92rem; }
.likes { list-style:none; padding:0; margin:12px 0; }
.likes li { margin:0; padding:12px 0; border-bottom:1px solid var(--line); }
.likes li:last-child { border-bottom:0; }
.likes strong { display:block; font-family:var(--serif); font-size:1.08rem; }
.likes span { color:var(--sub); font-size:.92rem; }
.axes { margin:10px 0 14px; }
.axis-row { margin-bottom:16px; }
.axis-name { font-weight:700; font-size:.95rem; }
.axis-val { color:var(--sub); font-size:.82rem; line-height:1.6; }
.track { height:10px; background:var(--line); border-radius:5px; overflow:hidden; margin:6px 0 4px; }
.track > i { display:block; height:100%; background:var(--g); border-radius:5px; }
.opp { margin:30px 0 0; padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.opp h3 { margin:0 0 4px; }
.cta { margin-top:26px; padding:20px 18px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.cta h3 { margin:0 0 4px; font-size:1.15rem; }
.cta.locked { border:2px dashed var(--g); }
.locked-list { margin:8px 0 14px; }
.disclaimer { color:var(--sub); font-size:.8rem; margin-top:32px; }

/* タイプマップ(4×4の早見表) */
.mapctl { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px 12px; margin:0 0 18px; }
.mapctl .row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 8px; }
.mapctl h3 { margin:0 0 8px; font-size:.95rem; }
.pole { padding:10px 8px; border:2px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-weight:700; line-height:1.35; }
.pole .pn { display:block; font-size:1rem; }
.pole small { display:block; font-weight:400; color:var(--sub); font-size:.72rem; }
.pole:hover { border-color:var(--ink); }
.pole[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.pole[aria-pressed="true"] small { color:inherit; opacity:.8; }
.mapstat { color:var(--sub); font-size:.88rem; margin:6px 0 0; min-height:1.7em; }
.mapstat button { margin-left:8px; padding:2px 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-size:.8rem; }
.maphead, .maprow { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.maphead { margin:0 0 4px; }
.maphead div { text-align:center; font-size:.74rem; line-height:1.35; color:var(--sub); padding:2px 0; }
.maphead b { display:block; color:var(--ink); font-size:.8rem; }
.mapgroup { margin:14px 0 0; }
.mapgroup h2 { font-size:1rem; margin:0 0 5px; padding-left:10px; border-left:6px solid var(--g); }
.mapgroup h2 small { font-family:var(--sans); font-weight:400; color:var(--sub); font-size:.78rem; margin-left:6px; }
a.cell { display:block; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--g); border-radius:8px; padding:4px 4px 7px; text-align:center; transition:transform .18s, box-shadow .18s, opacity .2s, filter .2s; }
a.cell img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:5px; background:var(--gt); }
a.cell .cn { font-family:var(--serif); font-weight:700; font-size:.76rem; line-height:1.3; margin:5px 0 1px; }
a.cell .cc { font-size:.7rem; color:var(--sub); letter-spacing:.06em; }
a.cell .cc b { color:var(--g); font-weight:700; }
a.cell:hover, a.cell:focus-visible { transform:translateY(-4px); box-shadow:0 10px 20px color-mix(in srgb, var(--g) 40%, transparent), 0 0 0 3px color-mix(in srgb, var(--g) 35%, transparent); outline:none; }
.mapgrid.filtering a.cell { opacity:.22; filter:grayscale(.85); }
.mapgrid.filtering a.cell.on { opacity:1; filter:none; box-shadow:0 0 0 3px var(--g); }
a.cell.here { box-shadow:0 0 0 3px var(--g), 0 8px 18px color-mix(in srgb, var(--g) 45%, transparent); animation:pulse 1.6s ease-in-out 3; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--g) 35%, transparent); } }
@media (min-width:640px) { a.cell .cn { font-size:.9rem; } a.cell .cc { font-size:.8rem; } .maphead div { font-size:.85rem; } .maprow, .maphead { gap:10px; } }
.maplegend { margin:22px 0 0; padding:14px 18px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
.maplegend h3 { margin:0 0 6px; }
.maplegend p { margin:6px 0; font-size:.92rem; }
/* 分布図(座標)。横: 市場↔政府、縦: 個人↔共同体。各象限の中は、左右=挑戦↔安定、上下=革新↔伝統 */
.chart { display:grid; grid-template-columns:24px 30px 1fr; grid-template-rows:auto auto auto; column-gap:4px; margin:6px 0 10px; }
.ctop { grid-column:3; display:flex; justify-content:space-between; font-weight:700; font-size:.82rem; padding:0 2px 2px; }
.subtop { grid-column:3; grid-row:2; position:relative; height:16px; }
.subtop span, .subleft span { position:absolute; font-size:.66rem; color:var(--sub); white-space:nowrap; transform:translateX(-50%); }
.subleft { grid-column:2; grid-row:3; position:relative; }
.subleft span { right:2px; transform:translateY(-50%); }
.cvert { grid-column:1; grid-row:3; display:flex; flex-direction:column; justify-content:space-around; align-items:center; font-weight:700; font-size:.8rem; }
.cvert span { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cvert i { font-style:normal; }
.cvert b { writing-mode:vertical-rl; letter-spacing:.08em; }
.plot { grid-column:3; grid-row:3; position:relative; aspect-ratio:1/1; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }
.quad { position:absolute; width:50%; height:50%; background:var(--gt); opacity:.9; }
.quad .qlab { position:absolute; left:0; right:0; text-align:center; transform:translateY(-50%); pointer-events:none; line-height:1.2; }
.quad .qlab { white-space:nowrap; }
.quad .qlab b { font-family:var(--serif); font-size:.92rem; color:var(--g); }
.quad .qlab small { color:var(--sub); font-size:.64rem; }
.axis { position:absolute; background:var(--ink); opacity:.35; pointer-events:none; }
.axis.h { left:0; right:0; top:50%; height:2px; transform:translateY(-1px); }
.axis.v { top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px); }
.pt { position:absolute; width:12%; transform:translate(-50%,-50%); aspect-ratio:1/1; padding:0; border:3px solid var(--g); border-radius:50%; background:var(--paper); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease; z-index:2; }
.pt img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; pointer-events:none; }
.pt em { position:absolute; left:50%; top:100%; transform:translate(-50%,3px); font-style:normal; font-family:var(--serif); font-weight:700; font-size:.62rem; line-height:1.2; white-space:nowrap; color:var(--ink); background:color-mix(in srgb, var(--paper) 88%, transparent); border-radius:4px; padding:0 3px; opacity:0; pointer-events:none; }
.pt:hover, .pt:focus-visible, .pt.picked { transform:translate(-50%,-50%) scale(1.25); z-index:5; box-shadow:0 8px 18px color-mix(in srgb, var(--g) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--g) 35%, transparent); outline:none; }
.pt:hover em, .pt:focus-visible em, .pt.picked em { opacity:1; }
.pt.dim { opacity:.35; }
.pt.picked.dim { opacity:1; }
@media (min-width:640px) { .pt em { opacity:1; font-size:.72rem; } .pt.dim em { opacity:.4; } .quad .qlab b { font-size:1.1rem; } .quad .qlab small { font-size:.78rem; } .ctop { font-size:.95rem; } .cvert { font-size:.9rem; } .subtop span, .subleft span { font-size:.78rem; } .chart { grid-template-columns:30px 40px 1fr; } }
.me { position:absolute; transform:translate(-50%,-50%); z-index:6; text-align:center; pointer-events:none; }
.me b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:.95rem; box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 28%, transparent); animation:pulse 1.6s ease-in-out 3; }
.me em { position:absolute; left:50%; top:100%; transform:translate(-50%,3px); font-style:normal; font-weight:700; font-size:.72rem; background:var(--ink); color:var(--bg); border-radius:4px; padding:0 5px; white-space:nowrap; }
/* 小さい版(タイプページ): 点だけ。このタイプだけキャラの絵 */
.chart.mini { max-width:360px; }
.chart.mini .pt { width:5%; border-width:2px; cursor:default; background:var(--g); opacity:.45; box-shadow:none; transform:translate(-50%,-50%); }
.chart.mini .pt.here { width:15%; opacity:1; z-index:4; box-shadow:0 0 0 3px var(--ink); animation:pulse 1.6s ease-in-out 3; }
.chart.mini .pt.here em { display:none; }
.chart.mini .quad .qlab b { font-size:.74rem; } .chart.mini .quad .qlab small { display:none; }
.chart.mini .ctop, .chart.mini .cvert { font-size:.68rem; } .chart.mini .subtop span, .chart.mini .subleft span { font-size:.58rem; }
.chart.mini .chart-note { display:none; }
.chart.mini .me b { width:20px; height:20px; font-size:.7rem; box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent); }
.chart.mini .me em { font-size:.62rem; padding:0 4px; }
.mynote { margin:0 0 10px; padding:10px 14px; background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:.92rem; }
.mynote .btn { margin-top:8px; }
.picked-card { display:flex; gap:14px; align-items:center; margin:8px 0 0; padding:12px 14px; background:var(--gt); border-left:6px solid var(--g); border-radius:10px; min-height:96px; }
.picked-card img { width:80px; height:80px; border-radius:8px; object-fit:cover; flex:none; background:var(--paper); }
.picked-card h2 { font-size:1.15rem; margin:0; } .picked-card p { margin:2px 0; font-size:.88rem; }
.picked-card .abbr { font-family:var(--serif); font-weight:700; letter-spacing:.14em; }
.picked-empty { color:var(--sub); padding:14px; border:1px dashed var(--line); border-radius:10px; margin-top:8px; font-size:.92rem; }
.howto { margin:18px 0 0; padding:14px 18px; background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:.92rem; }
.howto h3 { margin:0 0 4px; } .howto ul { margin:6px 0; padding-left:1.2em; }
.minimap { margin:0 0 22px; padding:14px 18px 16px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
.minimap h3 { margin:0 0 4px; font-size:1rem; }
.minimap p { margin:4px 0; font-size:.9rem; }
.minimap .abbr { font-family:var(--serif); font-weight:700; font-size:1.05rem; letter-spacing:.12em; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
pre { white-space:pre-wrap; word-break:break-all; font-size:.75rem; background:var(--paper); padding:12px; border-radius:8px; }