/* BrockLegoland — design tokens, layout, components. Light/dark via tokens. */
:root{
--bg:#f5f6fa;--surface:#ffffff;--surface-2:#eef0f6;--surface-3:#e4e7ef;--text:#111827;--muted:#6b7280;--line:#e3e6ee;
--accent:#e3000b;--accent-ink:#ffffff;--accent-soft:#fde7e8;--ok:#16a34a;--ok-soft:#dcfce7;--ok-ink:#166534;--warn:#d97706;--warn-soft:#fef3c7;--warn-ink:#92400e;--bad:#dc2626;--bad-soft:#fee2e2;--bad-ink:#991b1b;
--radius:14px;--radius-sm:9px;--shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px -14px rgba(16,24,40,.22);--shadow-hover:0 2px 4px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.3);
--font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--maxw:1360px;--gutter:16px;--topbar-h:60px;--well:#ffffff
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0f17;--surface:#121826;--surface-2:#1a2233;--surface-3:#223047;--text:#e6e8ee;--muted:#98a2b3;--line:#243041;--accent-soft:#3a1216;--ok-soft:#113b26;--ok-ink:#86efac;--warn-soft:#3b2a0a;--warn-ink:#fcd34d;--bad-soft:#3f1414;--bad-ink:#fca5a5;--shadow:0 1px 2px rgba(0,0,0,.45),0 14px 36px -14px rgba(0,0,0,.7);--shadow-hover:0 2px 4px rgba(0,0,0,.5),0 22px 44px -16px rgba(0,0,0,.8);--well:#f8f9fb}}
:root[data-theme="dark"]{--bg:#0b0f17;--surface:#121826;--surface-2:#1a2233;--surface-3:#223047;--text:#e6e8ee;--muted:#98a2b3;--line:#243041;--accent-soft:#3a1216;--ok-soft:#113b26;--ok-ink:#86efac;--warn-soft:#3b2a0a;--warn-ink:#fcd34d;--bad-soft:#3f1414;--bad-ink:#fca5a5;--shadow:0 1px 2px rgba(0,0,0,.45),0 14px 36px -14px rgba(0,0,0,.7);--shadow-hover:0 2px 4px rgba(0,0,0,.5),0 22px 44px -16px rgba(0,0,0,.8);--well:#f8f9fb}
html{color-scheme:light dark;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}a:hover{text-decoration:none}
img{display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(26px,3.2vw,38px);font-weight:800}h2{font-size:clamp(18px,2vw,22px);font-weight:700}h3{font-size:15px;font-weight:600}
.muted{color:var(--muted)}.mono{font-family:var(--mono);font-size:.92em}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:100;box-shadow:var(--shadow)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Top bar */
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar-h);display:flex;gap:14px;align-items:center;padding:0 var(--gutter);background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:28px;height:28px}
.nav{display:flex;gap:2px;margin-left:6px}
.nav a{padding:8px 11px;border-radius:999px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.active{background:var(--text);color:var(--bg)}
.nav-private{display:inline-flex;gap:2px}.nav-private[hidden]{display:none}
.search{position:relative;margin-left:auto;flex:0 1 380px;min-width:140px}
.search input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);outline:none;transition:border-color .15s,background .15s}
.search input:focus{border-color:var(--accent);background:var(--surface)}
.search::before{content:"";position:absolute;left:13px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:currentColor;opacity:.5;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;pointer-events:none}
.search-results{position:absolute;top:calc(100% + 8px);right:0;left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-hover);padding:6px;max-height:70vh;overflow:auto;z-index:40}
.search-results[hidden]{display:none}
.search-results .sr-group{padding:6px 10px 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.search-results a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:8px}
.search-results a:hover,.search-results a.focus{background:var(--surface-2)}
.search-results img{width:34px;height:34px;object-fit:contain;background:var(--well);border-radius:6px;padding:2px;flex:none}
.search-results .sr-title{font-weight:600;font-size:14px}.search-results .sr-sub{font-size:12px;color:var(--muted)}
.theme-toggle{border:1px solid var(--line);background:var(--surface-2);width:36px;height:36px;border-radius:999px;cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1}
.theme-toggle:hover{background:var(--surface-3)}
/* Layout */
.main{max-width:var(--maxw);margin:0 auto;padding:22px var(--gutter) 60px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:6px 0 18px}
.page-head p{margin:4px 0 0}
.section{margin:34px 0 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.section-head a{color:var(--muted);font-weight:600;font-size:14px}.section-head a:hover{color:var(--text)}
.loading,.empty{padding:50px 20px;text-align:center;color:var(--muted)}
.footer{max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter) 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.footer a{text-decoration:underline;text-underline-offset:3px}
/* Hero */
.hero{display:grid;gap:22px;grid-template-columns:1fr;align-items:center;padding:28px 0 8px}
@media (min-width:900px){.hero{grid-template-columns:1.2fr 1fr;padding:40px 0 10px}}
.hero h1{font-size:clamp(32px,5vw,56px);letter-spacing:-.03em;line-height:1.02}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),#ff7a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:17px;color:var(--muted);max-width:56ch;margin:14px 0 20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:600px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .num{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.stat .lbl{color:var(--muted);font-size:13px;margin-top:4px;font-weight:500}
.stat .sub{color:var(--muted);font-size:12px;margin-top:6px}
/* Buttons & chips */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;cursor:pointer;transition:background .15s,transform .1s,border-color .15s}
.btn:hover{background:var(--surface-2)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn.primary:hover{opacity:.92}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:13px}
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px;transition:background .15s,border-color .15s}
.link-btn:hover{background:var(--surface-2);border-color:var(--surface-3)}
.link-btn .ext{opacity:.5;font-size:12px}
.link-btn.bl{border-color:#2b5bd7;color:#2b5bd7}:root[data-theme="dark"] .link-btn.bl,:root:not([data-theme="light"]) .link-btn.bl{color:#8db0ff;border-color:#3a5fb0}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .link-btn.bl{color:#2b5bd7;border-color:#2b5bd7}}
.link-btn.lego{border-color:var(--accent);color:var(--accent)}
.link-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted)}
.chip:hover{background:var(--surface-2);color:var(--text)}.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--chip-accent,var(--muted))}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok-ink)}.badge.warn{background:var(--warn-soft);color:var(--warn-ink)}.badge.bad{background:var(--bad-soft);color:var(--bad-ink)}
.badge.accent{background:var(--accent);color:var(--accent-ink)}.badge.ink{background:var(--text);color:var(--bg)}
.badge.soft{background:var(--accent-soft);color:var(--accent)}
/* Toolbar */
.toolbar{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;margin:0 0 18px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.toolbar input[type=search],.toolbar select{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.toolbar input[type=search]{flex:1 1 200px}
.toolbar select{flex:0 1 auto;max-width:220px}
.toolbar .check{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px;cursor:pointer;user-select:none}
.toolbar .check input{accent-color:var(--accent)}
.toolbar .spacer{flex:1}
.toolbar .count{color:var(--muted);font-size:13px;white-space:nowrap;padding:0 4px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 11px;cursor:pointer;color:var(--muted);font-weight:600}
.seg button.active{background:var(--text);color:var(--bg)}
/* Grid & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
@media (min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media (min-width:1200px){.grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}}
.grid.figs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media (min-width:700px){.grid.figs{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--surface-3)}
.img-well{position:relative;background:var(--well);aspect-ratio:1/1;display:grid;place-items:center;padding:12px;border-bottom:1px solid var(--line)}
.img-well img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .25s}
.card:hover .img-well img{transform:scale(1.04)}
.img-well .corner{position:absolute;top:8px;left:8px;display:flex;gap:4px}
.img-well .corner-r{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-kicker{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:6px;align-items:center;min-width:0}
.card-kicker .theme-dot{width:8px;height:8px;border-radius:50%;background:var(--card-accent,var(--muted));flex:none}
.card-kicker span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-title{font-size:14.5px;font-weight:650;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:12.5px;color:var(--muted)}
.card-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px}
.card.fig .card-title{font-size:13.5px}
.card.fig .img-well{padding:14px}
/* List view */
.list{display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.row:hover{background:var(--surface-2)}
.row img{width:56px;height:56px;object-fit:contain;background:var(--well);border-radius:8px;padding:4px}
.row .r-title{font-weight:600}.row .r-sub{font-size:12.5px;color:var(--muted)}
.row .r-right{text-align:right;font-size:13px;color:var(--muted);white-space:nowrap}
/* Detail pages */
.crumbs{font-size:13px;color:var(--muted);margin:0 0 14px;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}
.detail{display:grid;gap:26px;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.detail{grid-template-columns:minmax(300px,460px) 1fr}}
.detail-img{position:sticky;top:calc(var(--topbar-h) + 16px)}
.detail-img .img-well{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.detail-img .caption{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:center}
.detail h1{margin:4px 0 8px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.facts dt{color:var(--muted);font-size:13.5px}.facts dd{margin:0;font-weight:550}
@media (max-width:480px){.facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:8px}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.panel + .panel{margin-top:14px}
.panel h2{margin-bottom:10px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.strip > *{scroll-snap-align:start}
.cands{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cand{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cand img{width:54px;height:54px;object-fit:contain;background:var(--well);border-radius:8px;padding:3px}
.cand .c-id{font-family:var(--mono);font-size:12.5px;color:var(--muted)}.cand .c-name{font-size:13.5px;font-weight:600;line-height:1.3}
/* Theme tiles */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.tile::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--tile-accent,var(--muted))}
.tile h3{font-size:17px;font-weight:700}
.tile .montage{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tile .montage img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--well);border-radius:8px;padding:4px;border:1px solid var(--line)}
.tile .counts{color:var(--muted);font-size:13px}
.theme-banner{padding:28px 22px;border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--tile-accent,#888) 22%,var(--surface)),var(--surface));border:1px solid var(--line);margin-bottom:22px}
/* Bars (spend) */
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(120px,200px) 1fr auto;gap:10px;align-items:center;font-size:14px}
.bar .track{height:12px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--accent),#ff7a00);border-radius:999px}
.bar .val{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
/* Utilities */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}
.fade-in{animation:fade .22s ease-out both}@keyframes fade{from{transform:translateY(5px)}to{transform:none}}
.sentinel{height:1px;grid-column:1/-1}
.kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface-2)}
.notice{padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn-ink);font-size:14px}
.two-col{display:grid;gap:14px;grid-template-columns:1fr}@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.prose p{margin:0 0 10px;max-width:70ch}
@media (max-width:640px){.topbar{gap:8px;height:auto;min-height:var(--topbar-h);flex-wrap:wrap;padding:8px var(--gutter)}.nav{order:3;width:100%;overflow-x:auto;margin:0;padding-bottom:2px}.nav a{padding:7px 10px;font-size:14px;white-space:nowrap}.search{flex:1 1 auto;margin-left:0}.toolbar{position:static}.detail-img{position:static}.hero{padding-top:12px}}