main { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 8px; }
.scroller svg { display: block; min-width: 760px; width: 100%; height: auto; }
.switch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.seg, .chipbtn { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 15px var(--sans); cursor: pointer; }
.seg.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chipbtn[aria-pressed="true"] { border-color: var(--brand); background: var(--tint); }
.picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.picks .chipbtn { min-height: 44px; padding: 0 14px; font-size: 14px; }
@media (max-width: 520px) { .picks li { flex: 1 1 calc(50% - 8px); } .picks .chipbtn { width: 100%; padding: 0 10px; } }
.detail { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.detail + .detail { margin-top: 0; }
.detail h3 { font-size: 24px; }
.detail p, .detail dd { margin: 0; }
.detail dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.detail dt { font-weight: 700; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.metric { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
@media (max-width: 520px) { .detail dl { grid-template-columns: 1fr; } }
.js .detail { display: none; }
.js .detail.on { display: flex; }

blockquote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--brand); background: var(--bg); border-radius: 8px; font-size: 18px; }
blockquote small { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.detail ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.detail dd { margin: 0 0 6px; }
.detail dl { grid-template-columns: max-content 1fr; }
[role="tab"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pkg { border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pkg h3 { font-size: 20px; }
.pkg p { margin: 0; }
.pkg dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.pkg dd { margin: 0; }
@media (max-width: 520px) { .pkg dl { grid-template-columns: 1fr; } }
.bars { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 16px; align-items: center; }
.bars .lab { font-weight: 600; }
.bars .track { height: 22px; border-radius: 11px; background: var(--tint); overflow: hidden; }
.bars .fill { display: block; height: 100%; background: var(--brand); border-radius: 11px; min-width: 2px; }
.bars .val { grid-column: 2; font-size: 15px; color: var(--muted); }
.bars .val strong { color: var(--ink); font-size: 17px; }
.series { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.series h2 { font-size: 26px; }
.series p { margin: 0; }
.js .series { display: none; }
.js .series.on { display: flex; }
@media (max-width: 520px) { .bars li { grid-template-columns: 1fr; } .bars .val { grid-column: 1; } }
.pick-hint { display: none; }
.js .pick-hint { display: block; }
.js .pick-hint.off { display: none; }