:root{color-scheme:light dark;--bg:#f6f4ef;--card:#fff;--text:#1d1d22;--muted:#6c6c78;--line:#e7e4dc;--accent:#d6300c;--accent-soft:#fdece7;--gold:#c98a00;--good:#0b8a4c;--bad:#d1342b;--shadow:0 1px 2px rgba(30,25,10,.05),0 6px 18px rgba(30,25,10,.05);
  --t-top:#0b8a4c;--t-acc:#2563eb;--t-watch:#c98a00;--t-avoid:#b4b4bc}
@media(prefers-color-scheme:dark){:root{--bg:#121216;--card:#1b1b21;--text:#ecebf1;--muted:#9c9ba8;--line:#2b2b33;--accent:#ff6a45;--accent-soft:#3a1c15;--gold:#f0b429;--good:#3ccf86;--bad:#ff6b63;--shadow:0 1px 2px rgba(0,0,0,.4);
  --t-top:#3ccf86;--t-acc:#6b9bff;--t-watch:#f0b429;--t-avoid:#5d5d68}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
a{color:var(--accent);text-decoration:none}
@media(hover:hover){a:hover{text-decoration:underline}}
img{max-width:100%;height:auto}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;padding:10px max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));background:var(--card);border-bottom:1px solid var(--line)}
.brand{margin-right:auto;display:flex;align-items:center;gap:9px;color:var(--text);font-size:20px;font-weight:700;letter-spacing:-.02em}
.brand b{color:var(--accent)}
@media(hover:hover){.brand:hover{text-decoration:none}}
.mark{width:32px;height:32px}
.mk-bg{fill:#fff;stroke:var(--text);stroke-width:2}.mk-top{fill:var(--accent);stroke:var(--text);stroke-width:2}.mk-line{stroke:var(--text);stroke-width:2}
.mk-btn{fill:#fff;stroke:var(--text);stroke-width:2}.mk-up{fill:none;stroke:var(--good);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tabs{display:flex;gap:4px}
.tabs a{color:var(--muted);padding:7px 12px;border-radius:8px;font-weight:500}
.tabs a.on{background:var(--accent-soft);color:var(--accent)}
@media(hover:hover){.tabs a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}}

main{max-width:1120px;margin:0 auto;padding:28px max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left))}
.foot{max-width:1120px;margin:0 auto;padding:18px 20px 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
h1{font-size:28px;margin:0 0 10px;letter-spacing:-.02em;line-height:1.2}
h2{font-size:13px;margin:0 0 14px;color:var(--muted);font-weight:650;text-transform:uppercase;letter-spacing:.05em}
h3{font-size:15px;margin:16px 0 6px}
.lede{font-size:17px;color:var(--muted);max-width:760px;margin:0 0 24px}
.muted{color:var(--muted)}.small{font-size:13px}.good{color:var(--good)}.bad{color:var(--bad)}
section{margin:30px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid>.card{margin-bottom:0}
.hero h1{font-size:34px;max-width:720px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 16px}.stats.four{grid-template-columns:repeat(4,1fr)}
.stat small{color:var(--muted);display:block;font-weight:500;font-size:12.5px}.stat span{font-size:24px;font-weight:700;letter-spacing:-.02em}
.era-headline{font-size:16px;font-weight:600;margin:-4px 0 12px}
.era-card{border-top:4px solid var(--accent)}.era-modern{border-top-color:var(--t-acc)}
.more{display:inline-block;margin-top:12px;font-weight:600}

/* tier bar */
.tierbar{display:flex;height:26px;border-radius:8px;overflow:hidden;gap:2px;font-size:12px;font-weight:700;color:#fff}
.tierbar span{display:flex;align-items:center;justify-content:center;min-width:24px}
.w0{flex:0 0 24px}.w1{flex:1}.w2{flex:2}.w3{flex:3}.w4{flex:4}.w5{flex:5}.w6{flex:6}.w7{flex:7}.w8{flex:8}.w9{flex:9}.w10{flex:10}.w11{flex:11}.w12{flex:12}.w13{flex:13}.w14{flex:14}.w15{flex:15}.w16{flex:16}.w17{flex:17}.w18{flex:18}.w19{flex:19}.w20{flex:20}
.tierbar .t-top-pick{background:var(--t-top)}.tierbar .t-accumulate{background:var(--t-acc)}.tierbar .t-watch{background:var(--t-watch)}.tierbar .t-avoid{background:var(--t-avoid)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend .t-top-pick{background:var(--t-top)}.legend .t-accumulate{background:var(--t-acc)}.legend .t-watch{background:var(--t-watch)}.legend .t-avoid{background:var(--t-avoid)}

/* score + tier */
.score{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 7px;border-radius:8px;font-weight:700;font-size:14px;color:#fff;background:var(--t-avoid)}
.score.big{min-width:64px;height:56px;font-size:28px;border-radius:14px}
.s-top-pick{background:var(--t-top)}.s-accumulate{background:var(--t-acc)}.s-watch{background:var(--t-watch)}
.tier{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;border:1.5px solid currentColor}
.tier.t-top-pick,.tier-txt.t-top-pick{color:var(--t-top)}.tier.t-accumulate,.tier-txt.t-accumulate{color:var(--t-acc)}.tier.t-watch,.tier-txt.t-watch{color:var(--t-watch)}.tier.t-avoid,.tier-txt.t-avoid{color:var(--muted)}
.tier-txt{display:block;font-size:11px;font-weight:600}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--text);box-shadow:var(--shadow);transition:transform .15s}
@media(hover:hover){.tile:hover{transform:translateY(-3px);text-decoration:none}}
.tile img{width:100%;aspect-ratio:63/88;object-fit:contain;background:linear-gradient(160deg,var(--accent-soft),var(--bg));padding:10px}
.tile-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.tile-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.tile-head strong{line-height:1.25}
.tile small{font-size:12px;line-height:1.35}
.tile-price{display:flex;justify-content:space-between;font-weight:700;margin:4px 0}
.tile .tier{align-self:flex-start}
.tile-note{font-size:13px;margin:6px 0 0;color:var(--muted)}

/* tables */
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}th{color:var(--muted);font-size:12.5px;font-weight:600}
td.num,th.num{text-align:right;white-space:nowrap}
td small{display:block}
table.cards td.thumb{width:52px;padding-right:0}.thumb img{width:44px;border-radius:4px;display:block}
table.cards td.nm small{font-size:12.5px}
.factors td small{font-size:13px;margin-top:2px}.factors tr.total td{font-weight:700;border-top:2px solid var(--line)}
.board td small{font-size:12px}.board tr.sep td{padding:4px;border-bottom:2px solid var(--line)}

/* filters */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:600}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media(hover:hover){.chip:hover{text-decoration:none;border-color:var(--accent)}}
select,button{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text)}
.sort{color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center}

/* thesis */
.thesis p{margin-top:0}
.conclusions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 22px;margin-top:14px}
.conclusions strong{display:block}.conclusions p{margin:4px 0 0;color:var(--muted);font-size:14px}
.callout{background:var(--accent-soft);border-radius:12px;padding:12px 14px;margin:14px 0 0}

/* card detail */
.crumbs{margin:0 0 14px}
.card-detail{display:grid;grid-template-columns:300px 1fr;gap:28px;margin-bottom:20px;align-items:start}
.art img{width:100%;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);display:block;margin-bottom:6px}
.verdict{display:flex;gap:14px;align-items:center;margin:16px 0}.verdict small{display:block;margin-top:4px}
.chart{width:100%;height:auto;display:block}
.chart .grid-l{stroke:var(--line);stroke-width:1}.chart .ax{fill:var(--muted);font-size:11px}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--accent);opacity:.08}.chart .vol{fill:var(--muted);opacity:.28}.chart .dotend{fill:var(--accent);stroke:var(--card);stroke-width:2}
.prose{max-width:860px}.prose h2{margin-top:22px}.prose h2:first-child{margin-top:0}

/* movers */
.case{display:grid;grid-template-columns:220px 1fr;gap:24px;scroll-margin-top:80px}
.case-art img{width:100%;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.case-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.case-title{font-size:21px;text-transform:none;letter-spacing:-.01em;color:var(--text);margin:8px 0 2px}
.case ul{padding-left:20px;margin:6px 0}.case li{margin-bottom:4px}
.dir{font-weight:700}.era-pill{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.small-chart{max-width:520px;margin-top:12px}
.sources a{color:var(--muted);text-decoration:underline}
.case-mini{color:var(--text);display:block}.case-mini strong{display:block;margin:4px 0}.case-mini p{margin:0;font-size:14px}
@media(hover:hover){.case-mini:hover{text-decoration:none;border-color:var(--accent)}}
.board-title{margin-top:34px}

/* phones */
@media(max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .hide-s{display:none}
  .top{padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;gap:0;background:var(--card);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  .tabs a{flex:1;text-align:center;padding:9px 2px;font-size:12px;min-height:44px;display:flex;align-items:center;justify-content:center}
  main{padding:18px 16px 24px}
  h1,.hero h1{font-size:25px}
  .lede{font-size:15.5px}
  .card{padding:16px}
  .stats,.stats.four{grid-template-columns:1fr 1fr}.stat span{font-size:21px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-detail,.case{grid-template-columns:1fr}
  .art{max-width:260px;margin:0 auto}.case-art{max-width:200px}
  th,td{padding:9px 5px}
  select{min-height:44px;font-size:16px}
}

/* markets */
.flag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:5px;background:var(--accent-soft);color:var(--accent);vertical-align:1px;margin-right:2px}
.flag.eu{background:#e8eefc;color:#1d4ed8}
@media(prefers-color-scheme:dark){.flag.eu{background:#1b2547;color:#8fb0ff}}
.card.eu{border-left:4px solid #1d4ed8}
.chart .eu-line{stroke:#2f63e0}.chart .eu-area{fill:#2f63e0}
.markets{margin:-4px 0 14px;color:var(--muted);line-height:1.9}
.stat small.muted{display:block;font-size:12px;margin-top:2px}