/* Onym product UI. Loaded after site.css on logged-in and shared app pages only.
   One sans face at product density, tabular figures, hairline edges with a soft layered shadow,
   colour only where data needs it. "You" is always --s0. */
:root {
  --bg:#F7F6F3; --surface:#FFFFFF; --surface-2:#F2F1ED; --hover:#F6F5F2;
  --ink:#17181A; --ink-2:#4A4B50; --muted:#7A7B82; --faint:#A6A7AD;
  --line:#E7E6E1; --line-strong:#D9D8D2;
  --accent:#B4532F; --accent-soft:#F7E9E3;
  --up:#1F8A4C; --up-soft:#E4F4EA; --down:#C23A3A; --down-soft:#FBE8E8;
  --s0:#B4532F; --s1:#3B6FB6; --s2:#7B57B3; --s3:#1E9A86; --s4:#C48A17; --s5:#C9607E; --s6:#6E8A22;
  --serif:var(--sans);
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --ring:0 0 0 1px var(--line);
  --sh:0 0 0 1px var(--line), 0 1px 2px rgba(23,24,26,.04), 0 8px 24px -18px rgba(23,24,26,.22);
  --sh-pop:0 0 0 1px var(--line-strong), 0 1px 2px rgba(23,24,26,.06), 0 14px 36px -10px rgba(23,24,26,.22);
  --float:var(--sh-pop);
  --hl:inset 0 1px 0 rgba(255,255,255,.7);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#121315; --surface:#19191C; --surface-2:#212226; --hover:#1F2023;
  --ink:#EDECE8; --ink-2:#BDBCB7; --muted:#8B8A86; --faint:#5E5D5A;
  --line:#26272B; --line-strong:#34353A; --accent:#D7764F; --accent-soft:#3A2A23;
  --up:#4FB577; --up-soft:#1C2E23; --down:#E06A6A; --down-soft:#3A2222;
  --s0:#D7764F; --s1:#6B93D0; --s2:#A086D0; --s3:#3FB8A3; --s4:#D7A53C; --s5:#D8809A; --s6:#93AE3F;
  --sh:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -18px rgba(0,0,0,.7);
  --sh-pop:0 0 0 1px var(--line-strong), 0 14px 36px -10px rgba(0,0,0,.7); --hl:inset 0 1px 0 rgba(255,255,255,.03);
} }
:root[data-theme="dark"] {
  --bg:#121315; --surface:#19191C; --surface-2:#212226; --hover:#1F2023;
  --ink:#EDECE8; --ink-2:#BDBCB7; --muted:#8B8A86; --faint:#5E5D5A;
  --line:#26272B; --line-strong:#34353A; --accent:#D7764F; --accent-soft:#3A2A23;
  --up:#4FB577; --up-soft:#1C2E23; --down:#E06A6A; --down-soft:#3A2222;
  --s0:#D7764F; --s1:#6B93D0; --s2:#A086D0; --s3:#3FB8A3; --s4:#D7A53C; --s5:#D8809A; --s6:#93AE3F;
  --sh:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -18px rgba(0,0,0,.7);
  --sh-pop:0 0 0 1px var(--line-strong), 0 14px 36px -10px rgba(0,0,0,.7); --hl:inset 0 1px 0 rgba(255,255,255,.03);
}

body.product { font:400 13.5px/1.45 var(--sans); color:var(--ink); background:var(--bg); font-feature-settings:"ss01","cv11"; }
body.product main { min-height:0; }
body.product :focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.num, .mono { font-variant-numeric:tabular-nums; }

/* ---------- shell ---------- */
.app { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; }
.side { position:sticky; top:0; height:100vh; overflow-y:auto; padding:14px 12px; border-right:1px solid var(--line); background:var(--bg); display:flex; flex-direction:column; gap:2px; }
.side .brandmark { display:flex; align-items:center; gap:9px; padding:4px 8px 14px; font-weight:600; font-size:15px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.side .brandmark svg { width:20px; height:20px; }
.side .brandmark img { height:22px; width:auto; max-width:150px; object-fit:contain; }
.ws { display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px; background:var(--surface); box-shadow:var(--sh); margin-bottom:6px; position:relative; }
.ws .mk { width:26px; height:26px; border-radius:7px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:600; font-size:12px; flex:none; }
.ws b { display:block; font-weight:600; font-size:13.5px; line-height:1.2; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws small { display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws > div { min-width:0; flex:1; }
.ws .chev { color:var(--faint); width:14px; height:14px; flex:none; }
.ws select { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.side .grp { font:500 11px/1 var(--sans); color:var(--faint); letter-spacing:.05em; text-transform:uppercase; padding:14px 10px 6px; }
.side nav { display:grid; gap:1px; }
.side nav a { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; color:var(--ink-2); font-weight:500; font-size:13.5px; text-decoration:none; transition:background .12s, color .12s; }
.side nav a svg { width:15px; height:15px; color:var(--muted); flex:none; opacity:1; }
.side nav a:hover { background:var(--surface-2); color:var(--ink); }
.side nav a[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--sh); }
.side nav a[aria-current] svg { color:var(--ink); }
.side nav a .ct { margin-left:auto; font-size:11.5px; color:var(--faint); font-weight:400; font-variant-numeric:tabular-nums; }
.side .foot { margin-top:auto; padding:12px 8px 2px; border-top:1px solid var(--line); display:grid; gap:8px; font-size:12px; color:var(--muted); }
.side .foot .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side .foot a { color:var(--muted); text-decoration:none; } .side .foot a:hover { color:var(--ink); }
.side .foot .me { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.side .foot form { margin:0; }
.icobtn, .side .theme-toggle { all:unset; box-sizing:border-box; cursor:pointer; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--muted); background:var(--surface); box-shadow:var(--sh); flex:none; }
.icobtn:hover, .side .theme-toggle:hover { color:var(--ink); }
.icobtn svg, .side .theme-toggle svg { width:14px; height:14px; }
.linkbtn { all:unset; cursor:pointer; color:var(--muted); font-size:12px; } .linkbtn:hover { color:var(--ink); }
.content { min-width:0; padding:22px 28px 64px; max-width:1360px; }
.demo-band { background:var(--ink); color:var(--bg); font-size:12.5px; padding:7px 16px; text-align:center; border:0; }
.demo-band a { color:inherit; font-weight:600; }
.mhead { display:none; }
.sidescrim { display:none; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 auto 0 0; width:min(300px, 86vw); height:100%; z-index:60; transform:translateX(-104%); transition:transform .3s cubic-bezier(.2,.7,.2,1); background:var(--surface); box-shadow:var(--sh-pop); padding-top:max(14px, env(safe-area-inset-top)); }
  .side.open { transform:none; }
  .sidescrim { display:block; position:fixed; inset:0; z-index:59; background:rgba(23,24,26,.24); opacity:0; pointer-events:none; transition:opacity .25s; }
  .sidescrim.on { opacity:1; pointer-events:auto; }
  .mhead { display:flex; align-items:center; gap:10px; height:50px; padding:0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .mhead .mk { width:24px; height:24px; border-radius:6px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:600; font-size:11px; }
  .mhead b { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mhead .icobtn { margin-left:auto; width:34px; height:34px; } .mhead .icobtn svg { width:16px; height:16px; }
  .content { padding:16px max(14px, env(safe-area-inset-right)) 48px max(14px, env(safe-area-inset-left)); }
}

/* ---------- type ---------- */
body.product h1, body.product h2, body.product h3, body.product h4 { font-family:var(--sans); color:var(--ink); }
.content h1 { font:600 22px/1.2 var(--sans); letter-spacing:-.02em; margin:0; }
.content h2 { font:600 15px/1.3 var(--sans); letter-spacing:-.01em; margin:28px 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.content h3 { font:600 14px/1.3 var(--sans); letter-spacing:-.005em; margin:0 0 4px; }
.content .sub { color:var(--muted); font-size:13px; margin-top:4px; }
.content .lede { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.content .lede .sub { max-width:640px; }
.content p { color:var(--ink-2); }
body.product .small { font-size:12.5px; }
body.product .muted { color:var(--muted); } body.product .faint { color:var(--faint); }
body.product .count { font:500 11px/1 var(--sans); letter-spacing:.04em; color:var(--faint); text-transform:uppercase; }
body.product .link { color:var(--ink-2); text-decoration:none; } body.product .link:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
body.product .mono { font-family:var(--mono); font-size:.92em; }

/* ---------- controls ---------- */
body.product .btn, body.product :is(.content, .side, .page, .nav, .mhead) button:not(.icobtn):not(.linkbtn):not(.theme-toggle) { height:32px; padding:0 12px; border-radius:7px; font:500 13px/1 var(--sans); background:linear-gradient(to bottom, color-mix(in srgb, var(--ink) 88%, #fff), var(--ink)); color:var(--bg); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(23,24,26,.2); }
body.product .btn.sm, body.product :is(.content, .side, .page, .nav) button.sm { height:28px; padding:0 10px; font-size:12.5px; }
body.product .btn.ghost, body.product :is(.content, .side, .page, .nav) button.ghost { background:var(--surface); color:var(--ink-2); box-shadow:var(--sh); }
body.product .btn.ghost:hover, body.product :is(.content, .side, .page, .nav) button.ghost:hover { color:var(--ink); background:var(--hover); opacity:1; }
body.product input:not([type=checkbox]):not([type=radio]):not([type=color]), body.product select, body.product textarea { border-radius:7px; background-color:var(--surface); box-shadow:var(--sh); font-size:13.5px; }
body.product input:focus, body.product select:focus, body.product textarea:focus { box-shadow:0 0 0 1px var(--ink); }
body.product label { font-size:12.5px; }

/* filters become the page toolbar */
.filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:10px 0; margin:0 0 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; }
.filters .seg { display:inline-flex; padding:2px; border-radius:8px; background:var(--surface-2); box-shadow:none; }
.filters .seg a { font-size:12.5px; font-weight:500; padding:0 10px; height:26px; display:inline-flex; align-items:center; border-radius:6px; text-decoration:none; color:var(--muted); white-space:nowrap; }
.filters .seg a[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--sh); }
.filters select { height:30px; width:auto; padding:0 28px 0 10px; font-size:13px; font-weight:500; color:var(--ink-2); border-radius:7px; background-color:var(--surface); box-shadow:var(--sh); }
.filters .meta { margin-left:auto; font:400 12px/1 var(--sans); color:var(--faint); }
@media (max-width:900px) { .filters { position:static; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; } .filters::-webkit-scrollbar { display:none; } .filters .meta { display:none; } }

/* ---------- surfaces ---------- */
body.product .card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh), var(--hl); padding:16px; min-width:0; }
body.product .card.flat { box-shadow:var(--sh), var(--hl); }
body.product .card.soft { background:var(--surface-2); box-shadow:none; }
body.product .card.pad-sm { padding:12px 14px; }
body.product .notice { border-radius:10px; background:var(--surface); box-shadow:var(--sh); padding:10px 14px; font-size:13px; color:var(--ink-2); margin-bottom:14px; display:flex; gap:10px; }
body.product .tag { height:20px; padding:0 7px; border-radius:5px; font:500 11.5px/20px var(--sans); background:var(--surface-2); color:var(--ink-2); letter-spacing:0; }
body.product .tag.accent { background:var(--accent-soft); color:var(--accent); }
body.product .tag.good { background:var(--up-soft); color:var(--up); } body.product .tag.bad { background:var(--down-soft); color:var(--down); }
body.product .tag.chat { background:color-mix(in srgb, var(--s1) 14%, transparent); color:var(--s1); }
body.product .tag.code { background:color-mix(in srgb, var(--s3) 14%, transparent); color:var(--s3); }
body.product .chip { height:24px; padding:0 9px; border-radius:6px; background:var(--surface); box-shadow:var(--sh); font-size:12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; }
.status { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:0 0 14px; }
.status b { color:var(--ink); font-weight:500; }
.status .r { margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; }
.status .r span { display:inline-flex; align-items:center; gap:5px; }
@media (max-width:900px) { .status .r { margin-left:0; } }

/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; border:0; }
@media (max-width:1100px) { .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.kpi, .kpi + .kpi { padding:14px 16px 10px; border:0; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh), var(--hl); display:grid; gap:6px; align-content:start; min-width:0; }
@media (max-width:1100px) { .kpi:nth-child(n) { padding-left:16px; border:0; } }
.kpi .k { font:500 12.5px/1 var(--sans); letter-spacing:0; text-transform:none; color:var(--muted); }
.kpi .v { font:600 26px/1.1 var(--sans); letter-spacing:-.02em; color:var(--ink); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.kpi .n { font-size:12px; color:var(--faint); }
.kpi .spark { width:100%; height:28px; margin-top:2px; }
.kpi .ci { margin:2px 0 0; }
.ci { height:4px; background:var(--surface-2); }
.ci i { background:color-mix(in srgb, var(--cc) 30%, transparent); }
@media (max-width:620px) { .kpis { gap:8px; } .kpi, .kpi + .kpi { padding:12px; } .kpi .v { font-size:22px; } .kpi .n { display:none; } }

/* deltas */
.delta { font:500 12px/1 var(--sans); font-variant-numeric:tabular-nums; gap:3px; }
.delta.up { color:var(--up); } .delta.down { color:var(--down); } .delta.flat, .delta.none { color:var(--faint); }

/* charts */
.chart-card { padding:14px 16px 12px; }
.chart-head { margin-bottom:6px; }
.legend { gap:4px 6px; font-size:12.5px; color:var(--ink-2); }
.legend span { padding:3px 8px 3px 6px; border-radius:6px; font-weight:500; }
.legend i { width:8px; height:8px; border-radius:2px; }
.chart .grid line { stroke:var(--line); }
.chart .axis text { font:400 11px var(--sans); fill:var(--faint); }
.chart .band { opacity:.09; }
.chart .ln { stroke-width:1.75; opacity:1; }
.chart .ln.you { stroke-width:2.25; }
.chart .endlabel { font:500 12px var(--sans); fill:var(--ink-2); }
.chart .xhair { stroke:var(--line-strong); }
.tip { border-radius:9px; background:var(--surface); box-shadow:var(--sh-pop); padding:8px 10px; min-width:200px; font-size:12.5px; }
.tip .t { font:500 12px/1 var(--sans); color:var(--muted); letter-spacing:0; margin-bottom:6px; text-transform:none; }
.tip .r { color:var(--ink-2); } .tip .r b { font:500 12.5px var(--sans); font-variant-numeric:tabular-nums; }
.spark { width:72px; height:20px; }
.spark path { stroke-width:1.5; }

/* brand rows */
.mk { width:20px; height:20px; border-radius:5px; display:inline-grid; place-items:center; font:600 10.5px/1 var(--sans); color:#fff; flex:none; background:var(--muted); }
.mk.fav { background:var(--surface-2); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); font-size:10px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:500; color:var(--ink); min-width:0; }
.barcell { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.barcell i { height:6px; border-radius:3px; display:block; background:var(--c, var(--ink-2)); max-width:96px; }
.barcell b { font-weight:500; font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }

/* heatmap */
.heat { border-spacing:4px; }
.heat th { font:500 12px/1.3 var(--sans); color:var(--muted); }
.heat th.row { color:var(--ink); font:500 13px/1.3 var(--sans); }
.heat .cell { height:32px; min-width:58px; border-radius:6px; font:500 12px var(--sans); font-variant-numeric:tabular-nums; }
.heat .cell:hover { outline:2px solid var(--ink); outline-offset:1px; }

/* tables */
body.product table { border-collapse:collapse; }
body.product th { font:500 12px/1.3 var(--sans); color:var(--muted); letter-spacing:0; text-transform:none; }
.dt { font-size:13px; }
.dt th { background:transparent; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dt td { padding:9px 12px; border-bottom:1px solid var(--line); }
.dt tr:last-child td { border-bottom:0; }
.dt tr.row-link:hover td, .dt tbody tr:hover td { background:var(--hover); }
.dt td.t { color:var(--ink); font-weight:500; }
.dt tr.you td, .dt tr.self td { background:var(--accent-soft); }
body.product .table-wrap { overflow-x:auto; margin:0; }
body.product .card.table-wrap { padding:4px 4px; }
.swatch { border-radius:2px; width:8px; height:8px; }
.pill-tabs a { border-radius:7px; font-weight:500; box-shadow:var(--sh); background:var(--surface); }
.pill-tabs a[aria-current] { background:var(--ink); color:var(--bg); box-shadow:none; }

/* list rows */
.prow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:13px; color:var(--ink); text-decoration:none; }
.prow:first-of-type { border-top:0; }
a.prow:hover { color:var(--ink); background:linear-gradient(to right, transparent, var(--hover) 10%, var(--hover) 90%, transparent); }
.prow .t { font-weight:500; min-width:0; }
.bars { display:grid; gap:2px; }
.bar-row { display:grid; grid-template-columns:minmax(0,1fr) 96px 40px; gap:10px; align-items:center; padding:7px 6px; border-radius:7px; font-size:13px; color:var(--ink); font-weight:500; }
.bar-row:hover { background:var(--hover); }
.bar-row.self { background:var(--accent-soft); }
.bar-row .bar { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.bar-row .bar i { display:block; height:100%; border-radius:3px; }
.bar-row .pct { font-variant-numeric:tabular-nums; text-align:right; color:var(--ink); }

/* answers list (overview) */
.ans { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:11px 2px; border-top:1px solid var(--line); text-decoration:none; color:inherit; }
.ans:first-of-type { border-top:0; }
.ans:hover { background:var(--hover); }
.ans .aq { font-weight:500; font-size:13px; line-height:1.4; color:var(--ink); }
.ans .s { color:var(--muted); font-size:12.5px; margin-top:3px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ans .meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:7px; font-size:11.5px; color:var(--faint); }
.ans .when { font-size:12px; color:var(--faint); white-space:nowrap; }
.eng { display:inline-flex; align-items:center; gap:7px; font-weight:500; }
.eng i { width:16px; height:16px; border-radius:4px; display:grid; place-items:center; font:600 8.5px/1 var(--sans); color:#fff; font-style:normal; letter-spacing:-.02em; background:var(--muted); flex:none; }

/* misc existing components, restyled */
.stack { height:8px; gap:2px; border-radius:4px; }
.check .ic { box-shadow:none; }
.check .ic.ok { background:var(--up-soft) !important; } .check .ic.bad { background:var(--down-soft) !important; } .check .ic.warn { background:var(--surface-2) !important; }
mark.hl.you { background:var(--accent-soft); box-shadow:inset 0 -1.5px 0 var(--s0); }
mark.hl.comp { background:transparent; box-shadow:inset 0 -1.5px 0 var(--c); }
.prose { font-size:14.5px; line-height:1.65; color:var(--ink); }
.opp.card { padding:16px; }
.prio { border-radius:5px; font:500 11.5px/1 var(--sans); letter-spacing:0; text-transform:none; }
.impact { border-radius:10px; }
.grid.gap16 { gap:14px; }
.door { transition:box-shadow .15s; } .door:hover { box-shadow:var(--sh-pop); }
.portfolio td .sub { color:var(--muted); }
@media print { .mhead, .sidescrim { display:none !important; } }
.panes h3, body.product .panes > .card > h3:first-child { font:600 15px/1.3 var(--sans); letter-spacing:-.01em; }
@media (max-width:900px) { body.product .content table.dt { display:block; overflow-x:auto; } }

/* slice 2 */
.rank { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:5px; font:600 11.5px/1 var(--sans); font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--ink-2); }
.rank.you { background:var(--accent-soft); color:var(--accent); }
.names { display:inline-flex; flex-wrap:wrap; gap:4px 12px; }
.names .brand { gap:6px; font-weight:400; color:var(--ink-2); }
.names .mk { width:16px; height:16px; border-radius:4px; font-size:8.5px; }
.dt .brand .mk { width:18px; height:18px; font-size:9.5px; }
body.product .tag.ugc { background:color-mix(in srgb, var(--s1) 14%, transparent); color:var(--s1); }
body.product .tag.ed { background:color-mix(in srgb, var(--s4) 16%, transparent); color:color-mix(in srgb, var(--s4) 80%, var(--ink)); }
body.product .tag.rev { background:color-mix(in srgb, var(--s2) 14%, transparent); color:var(--s2); }
body.product .tag.refc { background:color-mix(in srgb, var(--s3) 14%, transparent); color:var(--s3); }
.dt tr.grp td { font:500 11px/1 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding:16px 12px 8px; background:transparent !important; }
.dt details summary { list-style:none; } .dt details summary::-webkit-details-marker { display:none; }
.dt details[open] summary .mk { background:var(--ink); color:var(--bg); }
/* changes timeline */
.timeline { border-top:0; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh), var(--hl); padding:0 16px; }
.tl { grid-template-columns:130px minmax(0,1fr) 80px; gap:20px; padding:14px 0; }
.tl:last-child { border-bottom:0; }
.tl .when .d { font:600 14px/1.2 var(--sans); letter-spacing:-.01em; }
.tl.quiet .when .d { font-size:13.5px; font-weight:500; }
.tl .when .vs { font:400 11.5px var(--sans); }
.tl .noise { font-size:13px; }
.tl .ev .mk { all:unset; font-size:11px; line-height:1.9; color:var(--faint); }
.tl .ev.good .mk { color:var(--up); } .tl .ev.bad .mk { color:var(--down); }
.tl .ev b { font-size:13.5px; }
.tl .ev span { font-size:12.5px; }
.tl .vis { font:600 18px/1 var(--sans); font-variant-numeric:tabular-nums; }
.tl.quiet .vis { font-size:15px; font-weight:500; }
@media (max-width:700px) { .tl { grid-template-columns:1fr auto; gap:6px 12px; } .tl > :nth-child(2) { grid-column:1 / -1; grid-row:2; } }
/* signed-in pages outside a domain: portfolio, top bar */
body.product .nav { background:color-mix(in srgb, var(--bg) 90%, transparent); border-bottom:1px solid var(--line); }
body.product .nav .wrap { height:52px; max-width:1240px; }
body.product .nav .logo { font:600 15px/1 var(--sans); letter-spacing:-.01em; }
body.product .nav .links a { font-size:13.5px; font-weight:500; }
body.portfolio-page .page > .wrap { max-width:1240px; }
body.portfolio-page .page > .wrap > .frame { padding:28px 0 64px; }
body.product footer.site { background:transparent; }
body.product .who-am-i { font-size:12.5px; color:var(--muted); }
body.portfolio-page .page h1, body.portfolio-page .page .display { font:600 24px/1.2 var(--sans); letter-spacing:-.02em; margin:0 0 8px; }
body.portfolio-page .page h2 { font:600 15px/1.3 var(--sans); letter-spacing:-.01em; margin:32px 0 12px; display:flex; align-items:baseline; gap:10px; }
body.portfolio-page .page .lead { font-size:13.5px; color:var(--muted); }
body.product footer.site .wrap { max-width:1240px; }

/* logos */
.mk { position:relative; overflow:hidden; }
.mk.has-logo { background:#fff !important; box-shadow:inset 0 0 0 1px var(--line); color:transparent; }
.mk img { position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); object-fit:contain; border-radius:3px; }
.eng i.logo { background:var(--surface) !important; box-shadow:inset 0 0 0 1px var(--line); padding:2px; }
.eng i.logo svg { width:100%; height:100%; display:block; }
.eng.code i { position:relative; overflow:visible; }
.eng.code i::after { content:"</>"; position:absolute; right:-5px; bottom:-4px; font:700 6.5px/1 var(--mono); background:var(--ink); color:var(--bg); border-radius:3px; padding:1px 2px; letter-spacing:-.04em; }
:root[data-theme="dark"] .mk.has-logo { background:#fff !important; }
/* monograms for brands without a real logo: tinted tile, coloured letter */
.mk:not(.has-logo):not(.fav) { background:color-mix(in srgb, var(--mkc, currentColor) 15%, var(--surface)) !important; color:var(--mkc, var(--ink-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mkc, var(--ink)) 22%, transparent); font-weight:650; }