:root { --surface:#fff; --soft:#eceee6; --control-border:#cbd2c5; --feature:#eaf0df; --feature-border:#d2dec3; --tag-bg:#f2f3ee; --tag-ink:#62685f; --more-bg:#f1e5cf; --more-border:#e2d3b5; --more-ink:#775321; --cover-sheen:#fff9; --danger:#963a42; --save-bg:#fff1f3; --save-ink:#a43e4b; --focus:#bf652c; color-scheme: light; --paper:#f7f7f2; --ink:#202822; --muted:#69706a; --line:#dce0d7; --accent:#315d40; --accent-2:#a25127; --tint:#edf2e8; }
* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
html:has(dialog[open]) { overflow:hidden; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.5 'DM Sans',sans-serif; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button { background:transparent; border:1px solid var(--line); border-radius:6px; padding:8px 12px; }
button:hover,a:hover { color:var(--accent); }
button:hover { border-color:var(--accent); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
[hidden] { display:none!important; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
small { font-size:11px; }
.wrap { max-width:1520px; margin:auto; padding:0 40px; }
.masthead { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.5px; font-size:19px; white-space:nowrap; }
.brand-mark { background:#202822; color:#edfabd; display:grid; place-content:center; height:36px; width:36px; border-radius:50%; font:19px 'Instrument Serif',Georgia,serif; transform:rotate(-12deg); }
.masthead-actions { display:flex; gap:6px; }
.masthead-actions { margin-left:auto; }
.language-switch { display:flex; flex:none; padding:3px; border:1px solid var(--line); border-radius:7px; gap:2px; }
.language-switch button { border:0; font-size:11px; padding:6px 8px; }
.language-switch [aria-pressed="true"] { color:var(--paper); background:var(--ink); }
@media(max-width:760px) { .language-switch { margin-left:auto; } .masthead-actions { order:3; margin-left:0; } }
.code-lab-button { border:0; padding:10px 17px; font-size:13px; }
.code-lab-button.active { background:var(--ink); color:var(--paper); }
.code-lab-button small { padding-left:5px; opacity:.65; }
.hero { padding:28px 0 0; display:grid; grid-template-columns:1fr 300px; column-gap:50px; row-gap:19px; }
.eyebrow,.aside-label,.dialog-kicker,.code-lab-kicker { display:block; text-transform:uppercase; font-size:10px; letter-spacing:1.6px; font-weight:600; color:var(--muted); }
.live-dot { display:inline-block; background:#7b9349; width:6px; height:6px; margin-right:7px; border-radius:50%; }
h1 { font:48px/1.02 'Instrument Serif',Georgia,serif; letter-spacing:-.4px; margin:12px 0; }
h1 br { display:none; }
h1 em { font-weight:400; color:var(--accent); }
.lede { color:var(--muted); font-size:13px; }
.hero-aside { align-self:center; border-left:1px solid var(--line); padding-left:25px; }
.aside-label { font-size:9px; letter-spacing:.7px; }
.starter-links { margin-top:7px; }
.starter-links button { border:0; border-bottom:1px solid var(--line); border-radius:0; width:100%; padding:6px 0; display:flex; justify-content:space-between; text-align:left; font-size:12px; }
.starter-links span { font:10px monospace; color:var(--muted); }
.topbar { grid-column:1/-1; display:grid; grid-template-columns:1fr 180px 170px; gap:10px; }
.search,.select { background:var(--surface); border:1px solid var(--control-border); border-radius:7px; min-height:46px; padding:10px 14px; min-width:0; }
.search { padding-left:18px; box-shadow:0 3px 7px #263a2510; }
.utility-bar { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.utility-bar>span { font-size:12px; font-weight:600; }
.utility-bar>span small { margin-left:9px; color:var(--muted); font-weight:400; }
.utility-actions,.toolbar-group,.view-switch { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.view-switch { flex-shrink:0; flex-wrap:nowrap; align-self:flex-start; }
.utility-button { font-size:12px; padding:6px 10px; background:var(--surface); }
.utility-button span { margin-left:5px; color:var(--muted); font-size:10px; }
.utility-button.active,.view-button.active,.chip.active,.card-secondary.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.feature-button { background:var(--feature); border-color:var(--feature-border); }
.stats { display:none; }
.chip-shell { display:flex; align-items:flex-start; grid-column:1/-1; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line); min-width:0; }
.chipbar { display:flex; flex:1; overflow:auto; gap:6px; scrollbar-width:thin; padding-bottom:3px; }
.chip { flex:none; white-space:nowrap; border:1px solid transparent; background:var(--soft); padding:5px 10px; font-size:11px; border-radius:30px; }
.tags-toggle { background:var(--more-bg); border-color:var(--more-border); color:var(--more-ink); white-space:nowrap; font-size:11px; padding:5px 10px; }
.chip-shell.expanded .chipbar { flex-wrap:wrap; max-height:180px; overflow-y:auto; }
.content-intro { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.content-intro h2 { font:28px 'Instrument Serif',Georgia,serif; }
.content-intro p { font-size:12px; color:var(--muted); }
#library { padding-top:20px; }
.results-toolbar { display:flex; justify-content:space-between; gap:12px; margin:12px 0 20px; }
.toolbar-button,.view-button,.card-secondary { font-size:11px; padding:6px 10px; }
#grid { display:block; }
.category-section { --accent:#426553; --tint:#e7ede5; padding:0 0 26px; }
.category-awards { --accent:#926820; --tint:#f5ebd4; }
.category-gallery { --accent:#345c95; --tint:#e6edf7; }
.category-search { --accent:#864c73; --tint:#f3e8ef; }
.category-landing-pages { --accent:#9a502d; --tint:#f7e9df; }
.category-ux { --accent:#296c70; --tint:#dceeee; }
.category-ecommerce { --accent:#6d7231; --tint:#eff0dc; }
.category-portfolio { --accent:#705639; --tint:#efe8de; }
.category-experimental { --accent:#ae4853; --tint:#f9e5e7; }
.category-templates { --accent:#3d7559; --tint:#e3f0e7; }
.category-section>h2 { font-size:12px; letter-spacing:.5px; border-top:2px solid var(--accent); padding:10px 12px; background:var(--tint); margin-bottom:13px; color:var(--accent); }
.category-section>.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:9px; overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:box-shadow .18s,transform .18s; }
.card:hover { box-shadow:0 9px 20px #23302310; transform:translateY(-2px); }
.card-preview { position:relative; aspect-ratio:16/9; overflow:hidden; background:repeating-linear-gradient(135deg,transparent,transparent 12px,#ffffff40 12px,#ffffff40 13px),var(--tint); border-bottom:1px solid var(--line); }
.preview-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; }
.has-screenshot .preview-shot { opacity:1; }
.cover-fallback { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:18px 20px 46px; overflow:hidden; color:var(--accent); background:linear-gradient(125deg,var(--cover-sheen),transparent 65%),var(--tint); }
.cover-category { position:relative; z-index:1; font:8px monospace; text-transform:uppercase; letter-spacing:1px; opacity:.8; }
.cover-title { position:relative; z-index:1; max-width:88%; margin:7px 0 4px; font:clamp(20px,2.2vw,32px)/1.03 'Instrument Serif',Georgia,serif; overflow-wrap:anywhere; }
.cover-domain { position:relative; z-index:1; font-size:9px; opacity:.8; overflow-wrap:anywhere; }
.cover-orbit { position:absolute; width:150px; height:150px; right:-50px; top:5px; border:1px solid currentColor; border-radius:50%; opacity:.17; box-shadow:0 0 0 16px var(--tint),0 0 0 17px currentColor,0 0 0 34px var(--tint),0 0 0 35px currentColor; }
.has-screenshot .cover-fallback { visibility:hidden; }
.detail-hero>.card-preview { border-radius:6px; }
.compare-column>.card-preview { margin-bottom:12px; }
.list-view .cover-fallback { padding:6px; }
.list-view .cover-category,.list-view .cover-domain,.list-view .preview-label { display:none; }
.list-view .cover-title { font-size:15px; }
.list-view .preview-overlay { left:4px; bottom:4px; }
.failed { visibility:hidden; }
.preview-overlay { position:absolute; left:12px; right:12px; bottom:10px; display:flex; gap:8px; align-items:center; pointer-events:none; }
.site-icon { position:relative; width:30px; height:30px; border-radius:6px; display:grid; place-items:center; background:var(--surface); border:1px solid #ddd; padding:5px; box-shadow:0 2px 6px #0001; font-size:9px; font-weight:700; }
.site-icon img { position:absolute; width:20px; height:20px; object-fit:contain; background:var(--surface); opacity:0; }
.site-icon img.loaded { opacity:1; }
.preview-label { font-size:8px; letter-spacing:.4px; background:#ffffffeb; padding:3px 6px; border-radius:3px; color:#535c53; }
.save-button { position:absolute; top:9px; right:9px; z-index:1; width:32px; height:32px; padding:0; border-radius:50%; background:var(--surface); color:var(--ink); font-size:21px; box-shadow:0 2px 8px #0001; }
.save-button.saved { color:var(--save-ink); background:var(--save-bg); }
.meta { display:flex; gap:7px; margin:13px 14px 6px; }
.badge { color:var(--accent); font-size:9px; text-transform:uppercase; letter-spacing:.6px; }
.meta .badge:nth-child(2) { display:none; }
.name { margin:0 14px; font-size:16px; line-height:1.3; letter-spacing:-.35px; overflow-wrap:anywhere; }
.desc { margin:7px 14px 10px; color:var(--muted); font-size:12px; line-height:1.55; flex:1; }
.tags { display:flex; flex-wrap:wrap; gap:4px; }
.card>.tags { margin:0 14px 13px; }
.tag { background:var(--tag-bg); font-size:9px; padding:3px 6px; border-radius:3px; color:var(--tag-ink); }
.card-actions { display:flex; align-items:center; gap:5px; margin:0 14px; padding:11px 0; border-top:1px solid var(--line); }
.card-actions { flex-wrap:wrap; }
.link { font-size:11px; font-weight:600; margin-right:auto; color:var(--accent); }
.link::after { content:' \2197'; }
.card-secondary { border:0; padding:4px; border-radius:3px; font-size:10px; }
.list-view .category-section>.grid { grid-template-columns:1fr; gap:8px; }
.list-view .card { display:grid; grid-template-columns:110px 160px 1fr 210px; gap:0 15px; align-items:center; padding:8px; overflow:visible; }
.list-view .card-preview { grid-row:1/3; border:0; border-radius:5px; }
.list-view .meta { grid-column:2; margin:0; }
.list-view .name { grid-column:2; margin:0; font-size:14px; }
.list-view .desc { grid-column:3; grid-row:1/3; margin:0; }
.list-view .tags { display:none; }
.list-view .card-actions { grid-column:4; grid-row:1/3; border:0; margin:0 34px 0 0; }
.list-view .save-button { top:calc(50% - 16px); right:10px; }
.empty-state { text-align:center; padding:60px 20px; display:grid; justify-items:center; gap:12px; border:1px dashed var(--line); }
.code-lab,.people-section,.social-section { padding:30px 0; }
.code-lab-head { display:flex; gap:30px; justify-content:space-between; align-items:end; margin-bottom:26px; }
.code-lab-head h2 { font:48px 'Instrument Serif',Georgia,serif; }
.code-lab-head p { max-width:480px; font-size:13px; color:var(--muted); }
.code-grid,.people-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.code-card,.profile-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:20px; gap:8px; }
.code-card:hover { border-color:var(--accent); }
.code-number { font:12px monospace; color:#819277; }
.code-card strong { font-size:18px; }
.code-card small { color:var(--muted); font-size:12px; flex:1; }
.code-card em { font:10px monospace; color:var(--accent); margin-top:12px; }
.code-card-hot { background:var(--feature); }
.people-grid,.social-grid { margin-top:20px; }
.profile-top { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.profile-card h3 { font:27px 'Instrument Serif',Georgia,serif; }
.profile-card p { font-size:12px; color:var(--muted); flex:1; }
.account-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.artist-profile { border-top:3px solid #b4766b; }
.maker-profile { border-top:3px solid #8c963a; }
.web-profile { border-top:3px solid #648895; }
.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.social-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.social-heading small,.social-card small { display:block; color:var(--muted); }
.social-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font:bold 23px Georgia,serif; background:#e2eafa; color:#315a9b; }
.pinterest-mark { background:#fae7e4; color:#a7353c; }
.social-card { display:flex; justify-content:space-between; padding:13px 0; border-top:1px solid var(--line); }
.social-note { margin-top:16px; color:var(--muted); font-size:12px; }
.site-footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding:24px 0 90px; color:var(--muted); font-size:11px; }
.footer-links { display:flex; gap:12px; align-items:center; }
.footer-links button { border:0; padding:0; font-size:11px; text-decoration:underline; }
.product-dialog { padding:0; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); width:min(560px,calc(100% - 28px)); max-height:90dvh; overscroll-behavior:contain; box-shadow:0 30px 100px #17221d40; }
.product-dialog-wide { width:min(960px,calc(100% - 28px)); }
dialog::backdrop { background:#17221d88; backdrop-filter:blur(3px); }
.dialog-card { padding:26px; }
.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.dialog-head h2 { font:34px/1.15 'Instrument Serif',Georgia,serif; margin-top:5px; }
.dialog-close { border:0; padding:0; font-size:25px; width:32px; min-width:32px; height:32px; background:var(--soft); }
.dialog-card>p { color:var(--muted); margin:12px 0 20px; font-size:13px; }
.dialog-primary { background:var(--ink); color:var(--paper); border-color:var(--ink); font-size:12px; }
.dialog-primary:hover { opacity:.85; color:var(--paper); }
.dialog-actions,.detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.dialog-actions { justify-content:flex-end; }
.mixer-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
label { display:grid; gap:6px; font-size:12px; }
label select,.board-create input,.detail-actions select { padding:9px; background:var(--surface); border:1px solid var(--line); border-radius:5px; min-width:0; }
.mixer-results,.related-grid,.compare-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.mixer-placeholder { grid-column:1/-1; padding:25px; color:var(--muted); background:var(--soft); text-align:center; }
.mini-reference { display:flex; flex-direction:column; gap:8px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; padding:12px; }
.mini-reference img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; background:var(--tint); }
.mini-reference small,.mini-reference span { font-size:11px; color:var(--muted); }
.board-create { display:flex; gap:10px; margin-bottom:20px; }
.board-create input { flex:1; }
.board-list { display:grid; gap:10px; }
.board-row { display:flex; justify-content:space-between; gap:16px; align-items:center; border:1px solid var(--line); padding:15px; border-radius:6px; background:var(--surface); }
.board-row p,.board-row small { font-size:11px; color:var(--muted); }
.board-row-actions { display:flex; gap:5px; flex-shrink:0; }
.detail-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:22px; }
.detail-shot { width:100%; aspect-ratio:16/10; background:var(--tint); object-fit:cover; object-position:top; border-radius:6px; }
.detail-copy h2 { font:26px 'Instrument Serif',Georgia,serif; margin-top:16px; }
.detail-actions a { border-radius:6px; padding:8px 12px; }
.mini-reference strong { display:block; font-size:15px; margin:5px 0; }
.mini-reference p { color:var(--muted); font-size:12px; }
.mini-reference button { margin-top:auto; font-size:11px; }
.board-row small { display:block; margin-top:4px; }
.board-remove { margin:0 14px 8px; padding:5px; font-size:10px; text-align:left; border:0; color:var(--danger); }
.list-view .board-remove { grid-column:2; grid-row:4; margin:4px 0; }
.backup-tools { justify-content:flex-start; border-top:1px solid var(--line); padding-top:15px; }
.backup-tools small { width:100%; color:var(--muted); }
.detail-copy h3 { font-size:12px; margin-top:16px; }
.detail-copy p { font-size:13px; color:var(--muted); margin:8px 0 15px; }
.detail-related { margin-top:25px; border-top:1px solid var(--line); padding-top:20px; }
.detail-related>h3 { font:25px 'Instrument Serif',Georgia,serif; }
.compare-column { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:12px; }
.compare-column>img { aspect-ratio:16/9; object-fit:cover; object-position:top; width:100%; background:var(--tint); margin-bottom:12px; }
.compare-column p { color:var(--muted); font-size:12px; margin:10px 0; }
.compare-tray { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:5; background:var(--surface); border:1px solid var(--line); padding:12px 16px; border-radius:10px; box-shadow:0 6px 30px #0002; display:flex; align-items:center; gap:30px; white-space:nowrap; font-size:12px; }
.compare-tray>div { display:flex; gap:8px; }
.toast { position:fixed; bottom:90px; left:50%; transform:translate(-50%,10px); opacity:0; pointer-events:none; transition:.2s; z-index:20; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:8px; width:max-content; max-width:90%; font-size:13px; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.skip-link { position:fixed; top:-100px; left:20px; z-index:30; padding:12px; background:var(--surface); }
.skip-link:focus { top:10px; }
@media(min-width:1500px) { .category-section>.grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1100px) { .category-section>.grid,.code-grid,.people-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .hero { grid-template-columns:1fr 260px; gap:18px; } h1 { font-size:42px; } h1 br { display:block; } .utility-bar>span small { display:none; } .list-view .card { grid-template-columns:90px 140px 1fr; } .list-view .card-actions { grid-column:3; grid-row:2; margin:0 30px 0 0; padding:3px 0; } .list-view .desc { grid-row:1; font-size:11px; padding-right:30px; } }
@media(max-width:760px) { .wrap { padding:0 18px; } .masthead { flex-wrap:wrap; gap:10px; padding:17px 0 12px; } .brand { font-size:17px; } .masthead-actions { width:100%; } .code-lab-button { flex:1; padding:8px; font-size:11px; } .hero { grid-template-columns:1fr; padding-top:23px; gap:16px; } h1 { font-size:42px; } h1 br { display:none; } .hero-aside { display:none; } .topbar { grid-template-columns:1fr 1fr; gap:8px; } .search { grid-column:1/-1; } .select { font-size:12px; min-height:38px; } .utility-bar>span { display:none; } .utility-actions { width:100%; gap:5px; } .utility-button { flex:1; padding:7px 5px; white-space:nowrap; font-size:10px; } .category-section>.grid,.code-grid,.people-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .content-intro { display:block; } .content-intro p { margin-top:4px; } .results-toolbar { align-items:start; gap:5px; } .toolbar-group { gap:3px; } .toolbar-button,.view-button { padding:5px 7px; font-size:10px; } .social-grid { grid-template-columns:1fr; } .code-lab-head { display:block; } .code-lab-head p { margin-top:10px; } .list-view .card { grid-template-columns:70px 1fr; } .list-view .desc { display:none; } .list-view .card-actions { grid-column:2; grid-row:3; } .list-view .card-preview { grid-row:1/4; } .list-view .name { padding-right:30px; } .detail-hero { grid-template-columns:1fr; } .mixer-fields { grid-template-columns:1fr; } .mixer-results,.related-grid,.compare-grid { grid-template-columns:1fr; } .mini-reference img { max-height:200px; } .dialog-card { padding:18px; } .board-row { align-items:start; flex-direction:column; } .compare-tray { gap:10px; max-width:calc(100% - 20px); font-size:10px; } .site-footer { align-items:start; flex-direction:column; } }
@media(max-width:480px) { .category-section>.grid,.code-grid,.people-grid { grid-template-columns:1fr; } .card-preview { aspect-ratio:1.9; } .name { font-size:18px; } .card-secondary,.link { font-size:12px; padding:7px; } .card-actions { gap:12px; } .lede { max-width:310px; } .dialog-head h2 { font-size:28px; } .board-create { flex-wrap:wrap; } .board-create input { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
/* Theme tokens keep native form controls and category accents in the same palette. */
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#141916; --surface:#1e2520; --ink:#e8eee7; --muted:#a4afa6;
  --line:#38443b; --control-border:#4e5f51; --accent:#a4d3b2; --accent-2:#edb48a;
  --tint:#26392c; --soft:#2a342d; --feature:#293b2d; --feature-border:#455d46;
  --tag-bg:#2a342d; --tag-ink:#b9c8bc; --more-bg:#3b3324; --more-border:#665637; --more-ink:#ebcc90;
  --cover-sheen:#ffffff06; --danger:#ffa7ae; --save-bg:#482a32; --save-ink:#ffb2bd; --focus:#efb477;
}
[data-theme="dark"] .category-section { --accent:#a4d3b2; --tint:#26392c; }
[data-theme="dark"] .category-awards { --accent:#ebc579; --tint:#38311f; }
[data-theme="dark"] .category-gallery { --accent:#a5c7f4; --tint:#223248; }
[data-theme="dark"] .category-search { --accent:#d9aed0; --tint:#362b38; }
[data-theme="dark"] .category-landing-pages { --accent:#f0b28b; --tint:#3a2c25; }
[data-theme="dark"] .category-ux { --accent:#94d8d9; --tint:#203839; }
[data-theme="dark"] .category-ecommerce { --accent:#ced48b; --tint:#333822; }
[data-theme="dark"] .category-portfolio { --accent:#d9bea0; --tint:#382f26; }
[data-theme="dark"] .category-experimental { --accent:#f5a4ae; --tint:#3e2931; }
[data-theme="dark"] .category-templates { --accent:#a3d6b9; --tint:#253b2f; }
[data-theme="dark"] .social-mark { background:#253951; color:#afcff8; }
[data-theme="dark"] .pinterest-mark { background:#422b30; color:#ffb4b9; }
.site-icon { background:#fff; color:#202822; }
.site-icon img { background:#fff; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
.theme-toggle { flex:none; width:44px; height:44px; display:grid; place-items:center; background:var(--surface); padding:0; border-radius:50%; }
.theme-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .sun-icon { display:none; }
[data-theme="dark"] .theme-toggle .sun-icon { display:block; }
[data-theme="dark"] .theme-toggle .moon-icon { display:none; }
.masthead { gap:14px; }
.board-row>div,.detail-copy,.compare-column,.profile-card { min-width:0; overflow-wrap:anywhere; }
.detail-actions select { max-width:100%; }
@media(max-width:1000px) and (min-width:761px) {
  .masthead { flex-wrap:wrap; padding:16px 0; }
  .masthead-actions { order:4; width:100%; justify-content:center; margin-left:0; }
  .language-switch { margin-left:auto; }
}
@media(max-width:760px) {
  .masthead { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
  .masthead-actions { grid-column:1/-1; order:3; }
  .language-switch { margin:0; }
  .language-switch button { min-width:34px; min-height:38px; padding:4px; }
  .brand { font-size:14px; gap:7px; letter-spacing:-.4px; }
  .brand-mark { width:28px; height:28px; font-size:16px; flex:none; }
  .theme-toggle { width:40px; height:44px; }
  .hero { padding-top:18px; row-gap:12px; }
  h1 { font-size:36px; margin:8px 0; }
  .select { padding-left:6px; padding-right:0; }
  .code-lab-button { min-height:44px; }
  .code-lab-button small { display:none; }
  .search,.select,label select,.board-create input,.detail-actions select { font-size:16px; min-height:44px; }
  .utility-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .utility-button { min-height:44px; font-size:12px; white-space:normal; }
  .chip,.tags-toggle { min-height:40px; }
  .tags-toggle { max-width:46%; white-space:normal; }
  .toolbar-button,.view-button { min-height:40px; }
  .results-toolbar { flex-wrap:wrap; row-gap:8px; }
  .toolbar-group { flex:1; flex-wrap:wrap; }
  .save-button { width:44px; height:44px; }
  .card-secondary,.card-actions .link { min-height:44px; display:inline-flex; align-items:center; }
  .card-actions { flex-wrap:wrap; gap:6px; }
  .dialog-close { width:44px; min-width:44px; height:44px; }
  .dialog-primary,.mini-reference button,.account-links a,.footer-links button,.footer-links a { min-height:44px; display:inline-flex; align-items:center; }
  .account-links { align-items:center; }
  .compare-tray { width:calc(100% - 24px); white-space:normal; flex-wrap:wrap; justify-content:space-between; bottom:max(12px,env(safe-area-inset-bottom)); }
  .compare-tray>div { flex-wrap:wrap; }
  .toast { bottom:130px; }
  .list-view .card { grid-template-columns:64px minmax(0,1fr); gap:0 10px; }
  .list-view .save-button { top:8px; right:8px; }
  .list-view .name { padding-right:42px; }
  .list-view .card-actions { margin:0; }
}
@media(max-width:360px) {
  .topbar .select { grid-column:1/-1; padding:10px 12px; }
}
@media(min-width:761px) and (max-width:900px) {
  .category-section>.grid,.code-grid,.people-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero { grid-template-columns:1fr; }
  .hero-aside { display:none; }
  .utility-bar>span { display:none; }
  .utility-actions { width:100%; justify-content:flex-end; }
  .utility-button,.toolbar-button,.view-button,.card-secondary,.card-actions .link { min-height:40px; }
}

/* Consent shares the product palette and keeps both choices equally accessible. */
.consent-dialog { width:min(880px,calc(100% - 28px)); border-radius:18px; }
.consent-layout { display:grid; grid-template-columns:0.85fr 1.15fr; }
.consent-intro { padding:36px; background:var(--tint); }
.consent-mark { display:grid; place-items:center; width:52px; height:52px; margin-bottom:28px; border:1px solid var(--accent); border-radius:12px; color:var(--accent); font:30px Georgia,serif; }
.consent-intro h2 { margin:12px 0; font:38px/1.1 'Instrument Serif',Georgia,serif; }
.consent-intro p,.consent-controls p { color:var(--muted); }
.consent-controls { padding:36px; }
.consent-options { display:grid; gap:14px; margin:20px 0; }
.consent-option { display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:14px 0; border-top:1px solid var(--line); }
.consent-option small { grid-column:1; color:var(--muted); }
.consent-option input { grid-column:2; grid-row:1 / span 2; width:20px; height:20px; accent-color:var(--accent); align-self:center; }
.consent-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 14px; }
.consent-actions button { flex:1; min-height:44px; }
.consent-meta { font-size:12px; color:var(--muted); }
@media(max-width:640px) { .consent-layout { grid-template-columns:1fr; } .consent-intro,.consent-controls { padding:22px; } .consent-mark { margin-bottom:16px; } .consent-intro h2 { font-size:32px; } }