/* GetNews: bright violet. The logo's violet and gold at full strength (see the look section at the end of this file). */
/* One type family for every language: Alexandria draws Arabic and Latin as a pair, so a Latin name inside an Arabic sentence
   sits in the line at the same size and weight and the sentence reads as one line. SIL OFL 1.1, served from our own server
   (licence: public/fonts/ALEXANDRIA-OFL.txt). Chinese characters come from the reader's own system fonts. */
@font-face { font-family: "Alexandria"; src: url("fonts/alexandria-arabic.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; src: url("fonts/alexandria-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* defaults: the look section at the end of this file sets the real light and moon values */
  --bg: #F3F1FA; --surface: #FFFFFF; --surface-2: #E8E4F5; --ink: #15122E; --ink-2: #423E5E; --ink-3: #656182; --line: #E1DDEF; --line-2: #CBC5E2;
  --accent: #F2651D; --accent-ink: #A8400A; --hype: #B4460C; --real: #177245;
  --ai: #5B34C4; --phones: #1463B8; --gpus: #B0276A; --chips: #86590A; --robots: #0A6E7E; --wearables: #3F6A08; --laptops: #495057; --home: #2B7A3D; --cameras: #9C5700; --drones: #095F6E; --next: #0A7285;
  --yes: #177245; --skip: #656182;
  /* the logo's own colours: violet for the brand, sunrise gold for numbers and calls, midnight for the dark cards */
  --brand: #5B34C4; --brand-soft: #B79DFF; --sun-a: #FF7A2F; --sun-b: #FFC24D; --night-a: #0B0F2E; --night-b: #1A1552; --night-c: #2C1D70;
  --glow-1: rgb(255 170 120 / .36); --glow-2: rgb(124 88 232 / .32);
  --sans: "Alexandria", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: var(--sans); --mono: var(--sans);
  --r: 18px; --shadow: 0 1px 2px rgb(50 36 120 / .06), 0 14px 34px -18px rgb(50 36 120 / .28);
  color-scheme: light;
}
:root[data-theme="dark"], .on-navy {
  --bg: #0A1C4A; --surface: #0F2660; --surface-2: #14306F; --ink: #F4F7FF; --ink-2: #C3D3F5; --ink-3: #93A9DA; --line: #1D3A82; --line-2: #28499A;
  --accent: #FF6B33; --accent-ink: #FF9466; --hype: #FF8A4C; --real: #5AD394;
  --ai: #A891FF; --phones: #63B5FF; --gpus: #FF79AE; --chips: #F2B544; --robots: #43D3E3; --wearables: #A3E36A; --laptops: #BAC5D6; --home: #5AD3A6; --cameras: #9DB0FF; --drones: #66D9E8; --next: #E3A0F5; --yes: #5AD394; --skip: #93A9DA;
  --shadow: 0 1px 2px rgb(2 8 30 / .35), 0 10px 28px -12px rgb(2 8 30 / .7);
  color-scheme: dark;
}
:root[data-theme="dark"] { --brand: #B79DFF; --night-a: #0F2768; --night-b: #1B2E86; --night-c: #3B2D9E; --glow-1: rgb(255 150 70 / .16); --glow-2: rgb(124 84 232 / .36); }
/* dark cards on the light page take the logo's midnight; in the dark theme they keep its royal blue */
:root:not([data-theme="dark"]) .on-navy { --bg: #0D1032; --surface: #181B48; --surface-2: #21255C; --ink: #F6F4FF; --ink-2: #D2CEF2; --ink-3: #A6A1D4; --line: #2A2F6B; --line-2: #3B418F; --accent: #FF8A3D; --accent-ink: #FFB07A; --brand: #B79DFF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.6 var(--sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
/* a dawn glow behind the first screen: gold from the right, violet from the left, fading in below the header */
body::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 780px; pointer-events: none; background: radial-gradient(54% 60% at 90% 14%, var(--glow-1), transparent 72%), radial-gradient(50% 54% at 4% 16%, var(--glow-2), transparent 72%); -webkit-mask-image: linear-gradient(transparent 30px, #000 170px, #000 46%, transparent); mask-image: linear-gradient(transparent 30px, #000 170px, #000 46%, transparent); }
@media (max-width: 640px) { body::before { background: radial-gradient(95% 44% at 100% 16%, var(--glow-1), transparent 74%), radial-gradient(90% 40% at 0% 14%, var(--glow-2), transparent 74%); opacity: .8; } }
::selection { background: color-mix(in srgb, var(--sun-b) 55%, transparent); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
svg { display: block; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* a thin line under the header fills as the page is read */
@supports (animation-timeline: scroll()) { .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--brand), var(--sun-a), var(--sun-b)); animation: read linear both; animation-timeline: scroll(root); } }
@keyframes read { from { transform: scaleX(0); } }
.top-in { max-width: 1180px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 700 1.3rem/1 var(--sans); letter-spacing: -.04em; }
.brand em { font-style: normal; color: var(--brand); }
@media (max-width: 380px) { .brand em { display: none; } }
.mark { width: 40px; height: 40px; object-fit: contain; border-radius: 11px; box-shadow: 0 0 0 1px rgb(183 157 255 / .28), 0 8px 18px -6px rgb(91 52 196 / .65); }
.mark-dot { fill: var(--accent); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.top-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.you-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .9rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 8px 18px -10px rgb(23 20 43 / .7); transition: transform .2s, background .2s; }
.you-btn:hover { background: var(--ink-2); transform: translateY(-1px); }
.you-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--sun-b), var(--sun-a)); box-shadow: 0 0 0 3px rgb(255 140 60 / .28); }
.you-btn.has-profile .you-dot { background: var(--real); box-shadow: none; }
.theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink-2); }
.theme-btn svg { width: 18px; height: 18px; }

/* section bar: scrolls sideways on phones, scrolls away with the page */
.sections { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sections-in { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.sections-in::-webkit-scrollbar { display: none; }
.sections a { position: relative; flex: none; text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 500; padding: 11px 12px 12px; transition: color .2s; }
.sections a:hover { color: var(--ink); }
.sections a[aria-current] { color: var(--ink); font-weight: 650; }
.sections a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--brand), var(--sun-a)); }
@media (min-width: 1080px) { .sections-in { padding: 0 24px; -webkit-mask-image: none; mask-image: none; } }

/* ---------- layout ---------- */
main { min-height: 70vh; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.wrap-narrow { max-width: 820px; display: block; }
@media (min-width: 1080px) {
  .wrap { grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; padding: 0 24px 72px; }
  .wrap-narrow { display: block; padding: 0 24px 72px; }
  .col-side { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; padding-top: 40px; }
}
.col-main { min-width: 0; }

/* ---------- masthead ---------- */
.mast { padding: 36px 0 20px; }
@media (max-width: 640px) { .mast { padding: 24px 0 8px; } .mast-sub { font-size: 1rem; margin-top: 10px; } .mast-bar { margin-top: 16px; } }
.mast-date { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.mast h1 { font: 600 clamp(2rem, 1.4rem + 2.4vw, 3.1rem)/1.06 var(--serif); letter-spacing: -.02em; max-width: 18ch; text-wrap: balance; }
.mast-sub { margin-top: 14px; font-size: 1.08rem; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.mast-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.mast-topic h1 { max-width: 24ch; }
/* ---------- first screen: fresh stamp, one Wire line, the lead story as a dark card, two rows ---------- */
.mast-front { padding: 22px 0 20px; }
.mast-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.mast-front h1 { font: 600 clamp(1.32rem, 1.05rem + 1.5vw, 2.15rem)/1.12 var(--serif); letter-spacing: -.02em; max-width: none; }
/* the promise in the title gets a highlighter stroke, drawn once */
.mast-front h1 em { padding: 0 .14em 0 .1em; margin-inline-end: -.14em; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--sun-b) 64%, transparent) 58% 90%, transparent 90%) no-repeat 0 0 / 0% 100%; animation: mark-in .8s .5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes mark-in { to { background-size: 100% 100%; } }
.mast-front .mast-bar { margin-top: 18px; padding-top: 6px; border-top: 0; }
.mast-front .mast-date { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.mast-day::before, .mast-next:not(:empty)::before { content: "·"; margin: 0 .7em; color: var(--line-2); }
.upd { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.upd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.upd.is-fresh { color: var(--ink); }
.upd.is-fresh .upd-dot { background: var(--sun-a); animation: pulse 2s infinite; }
.tick { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; font-size: .9rem; line-height: 1.5; transition: border-color .2s; }
.tick:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.tick-k { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tick-roll { position: relative; flex: 1; min-width: 0; height: 1.5em; overflow: hidden; }
.tick-it { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(70%); transition: opacity .4s ease, transform .4s ease; }
.tick-it.on { opacity: 1; transform: none; }
.tick-it.out { opacity: 0; transform: translateY(-70%); }
.tick-it time { font: 500 .72rem/1 var(--mono); color: var(--ink-3); margin-inline-end: 9px; }
.tick-it b { font-weight: 650; color: var(--ink-2); margin-inline-end: 9px; }

.top3 { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.top3 li { min-width: 0; }
.top3 li:nth-child(2):last-child { grid-column: 1 / -1; }
.top3 a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 16px 15px; text-decoration: none; height: 100%; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.top3 li:not(.t3-lead) a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); box-shadow: 0 1px 2px rgb(50 36 120 / .06), 0 24px 42px -22px rgb(60 36 150 / .45); }
.t3-n { font: 700 1.9rem/1 var(--mono); color: transparent; -webkit-text-stroke: 1.4px var(--line-2); padding-top: 2px; transition: -webkit-text-stroke-color .3s; }
.top3 a:hover .t3-n { -webkit-text-stroke-color: var(--brand); }
.t3-main { display: grid; gap: 6px; min-width: 0; align-content: start; }
.t3-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.t3-topic { font: 700 .68rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--c, var(--ink-2)); }
.t3-ai { --c: var(--ai); } .t3-phones { --c: var(--phones); } .t3-gpus { --c: var(--gpus); } .t3-chips { --c: var(--chips); } .t3-robots { --c: var(--robots); } .t3-wearables { --c: var(--wearables); } .t3-laptops { --c: var(--laptops); } .t3-home { --c: var(--home); } .t3-cameras { --c: var(--cameras); } .t3-drones { --c: var(--drones); } .t3-next { --c: var(--next); }
.t3-key { display: inline-block; font: 700 1.05rem/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.t3-key-l { font-size: .8rem; line-height: 1.2; color: var(--ink-3); }
.t3-title { font: 600 clamp(1.08rem, 1rem + .4vw, 1.3rem)/1.22 var(--serif); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.top3 a:hover .t3-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.t3-thumb { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; background: var(--surface-2); }
/* one plain word of advice per story, in its own colour */
.t3-call { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .86rem; line-height: 1.3; color: var(--ink-2); }
.t3-call b { flex: none; font: 700 .66rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--cc, var(--ink-3)); color: #fff; }
.t3-call span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3c-buy, .t3c-try, .t3c-under { --cc: var(--real); } .t3c-wait { --cc: var(--chips); } .t3c-watch { --cc: var(--phones); } .t3c-skip { --cc: var(--skip); } .t3c-over { --cc: var(--hype); }
:root[data-theme="dark"] .t3-call b, .on-navy .t3-call b { color: #0B0F2E; }
/* the lead story: a midnight card lit by the logo's violet and gold, its picture melting into it, the key number large */
.t3-lead { grid-column: 1 / -1; }
.top3 .t3-lead a { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(125deg, var(--night-a), var(--night-b) 58%, var(--night-c)); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 28px 56px -28px rgb(52 30 140 / .72), 0 2px 8px rgb(16 10 50 / .18); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.top3 .t3-lead a::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 110% at 0% 0%, rgb(128 88 240 / .5), transparent 62%), radial-gradient(46% 80% at 30% 120%, rgb(255 140 60 / .3), transparent 66%); }
.top3 .t3-lead a::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--sun-b), var(--sun-a), transparent); }
.top3 .t3-lead a:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 36px 64px -28px rgb(52 30 140 / .85), 0 2px 8px rgb(16 10 50 / .2); }
.top3 .t3-lead.has-img a { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
.t3-lead .t3-main { gap: 11px; padding: 22px 24px 24px; align-content: center; }
.t3-lead .t3-top { gap: 4px 12px; }
.t3-when { font: 500 .72rem/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.t3-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.t3-lead .t3-key { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem); letter-spacing: -.045em; padding-inline-end: .04em; background: linear-gradient(92deg, var(--sun-b), var(--sun-a)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgb(255 130 50 / .35)); }
.t3-lead .t3-key-l { font-size: .9rem; color: var(--ink-2); }
.t3-lead .t3-title { font-size: clamp(1.42rem, 1.15rem + 1.2vw, 1.95rem); line-height: 1.14; letter-spacing: -.015em; -webkit-line-clamp: 4; line-clamp: 4; }
.t3-lead .t3-call { font-size: .92rem; }
.t3-lead .t3-call span { white-space: normal; }
.sec-lead { margin: 0 0 16px; }
.t3-pic { position: relative; order: 2; min-height: 230px; overflow: hidden; background: var(--night-a); }
.t3-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: settle 16s ease-out both, drift 28s ease-in-out 16s infinite alternate; }
.t3-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--night-b), color-mix(in srgb, var(--night-b) 50%, transparent) 14%, transparent 42%); }
@keyframes settle { from { transform: scale(1.09); } }
@keyframes drift { to { transform: scale(1.07) translate(-1.5%, -1%); } }   /* a slow camera move, like a film still */
.t3-credit { position: absolute; z-index: 1; inset-inline-end: 8px; bottom: 7px; font: 500 .62rem/1 var(--sans); letter-spacing: .02em; color: #fff; background: rgb(0 0 0 / .5); padding: 4px 7px; border-radius: 5px; }
@media (max-width: 640px) {
  .mast-front { padding: 16px 0 8px; }
  .mast-next { display: none; }
  .tick { margin-top: 12px; padding: 9px 12px; gap: 11px; font-size: .88rem; line-height: 1.4; align-items: flex-start; }
  .tick-k { padding-top: .42em; }
  .tick-roll { height: 2.8em; }
  .tick-it { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  .top3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .top3 a { padding: 14px 14px 13px; gap: 4px 12px; }
  .top3 .t3-lead.has-img a { grid-template-columns: minmax(0, 1fr); }
  .t3-pic { order: 0; min-height: 0; aspect-ratio: 2 / 1; }
  .t3-pic::after { background: linear-gradient(0deg, var(--night-b), color-mix(in srgb, var(--night-b) 50%, transparent) 22%, transparent 56%); }
  .t3-lead .t3-main { padding: 16px 16px 18px; gap: 9px; }
  .t3-thumb { width: 68px; height: 68px; }
}
/* the first screen arrives in order, once; the lead keeps its opacity so its picture paints at once */
@media (prefers-reduced-motion: no-preference) {
  .mast-line, .tick, .top3 > li:not(.t3-lead), .mast-front .mast-bar { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  .top3 > .t3-lead { animation: rise-lead .8s cubic-bezier(.2, .8, .2, 1) backwards; }
  .tick { animation-delay: .06s; } .top3 > li:nth-child(2) { animation-delay: .2s; } .top3 > li:nth-child(3) { animation-delay: .28s; } .mast-front .mast-bar { animation-delay: .36s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise-lead { from { transform: translateY(18px) scale(.985); } }
.mast-ai .mast-date { color: var(--ai); } .mast-phones .mast-date { color: var(--phones); } .mast-computers .mast-date { color: var(--gpus); } .mast-home .mast-date { color: var(--home); } .mast-cameras .mast-date { color: var(--cameras); } .mast-next .mast-date { color: var(--next); }
.subfilters { margin-top: 18px; }
.more-sections { margin: -8px 0 24px; font-size: .9rem; color: var(--ink-2); }
.more-sections[hidden] { display: none; }
.mid-picks { margin: 4px 0 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.mid-picks .picks:last-child { margin-bottom: 0; }
.progress { display: flex; align-items: center; gap: 12px; }
.progress-dots { display: flex; gap: 5px; }
.progress-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); transition: background .4s, transform .4s; }
.progress-dots i.seen { background: var(--accent); transform: scale(1.1); }
.progress-txt { font: 500 .8rem var(--mono); color: var(--ink-3); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button, .seg button { border: 1px solid var(--line); background: var(--surface); padding: 6px 13px; border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--ink-2); transition: border-color .2s, background .2s, color .2s; }
.filters button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wire .filters { margin-top: 20px; }
@media (max-width: 640px) { .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .filters::-webkit-scrollbar { display: none; } .filters button { flex: none; } }

/* ---------- persona quick pick (sits after the first story) ---------- */
.hello { margin: 4px 0 24px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); border-radius: 20px; padding: 14px 16px; }
.hello[hidden] { display: none; }
.hello-q { color: var(--ink-2); font-size: .95rem; margin-bottom: 10px; }
.hello-q strong { color: var(--ink); }
.hello-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hello-chips button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-weight: 600; transition: transform .2s, border-color .2s, color .2s; }
.hello-chips button:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); }

/* ---------- story cards: each brief on its own surface, a short bar in its section colour ---------- */
.brief { counter-reset: n; }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 16px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); scroll-margin-top: 80px; transition: box-shadow .3s, border-color .3s; }
.card::before { content: ""; position: absolute; left: -1px; top: 24px; width: 4px; height: 46px; border-radius: 0 4px 4px 0; background: var(--tc, var(--line-2)); }
.card[data-topic="ai"] { --tc: var(--ai); } .card[data-topic="phones"] { --tc: var(--phones); } .card[data-topic="gpus"] { --tc: var(--gpus); } .card[data-topic="chips"] { --tc: var(--chips); } .card[data-topic="robots"] { --tc: var(--robots); } .card[data-topic="wearables"] { --tc: var(--wearables); } .card[data-topic="laptops"] { --tc: var(--laptops); } .card[data-topic="home"] { --tc: var(--home); } .card[data-topic="cameras"] { --tc: var(--cameras); } .card[data-topic="drones"] { --tc: var(--drones); } .card[data-topic="next"] { --tc: var(--next); }
.card:hover { border-color: color-mix(in srgb, var(--tc, var(--brand)) 34%, var(--line)); box-shadow: 0 1px 2px rgb(50 36 120 / .06), 0 26px 46px -24px rgb(60 36 150 / .42); }
.card[hidden], .row-story[hidden] { display: none; }
.card-n { display: none; }
@media (min-width: 720px) {
  .card { grid-template-columns: 40px minmax(0, 1fr) 176px; gap: 0 22px; }
  .card-n { display: block; font: 500 .85rem/2.1 var(--mono); color: var(--ink-3); }
  .card.is-seen .card-n { color: var(--accent); }
}
.card-meta, .crumbs, .row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .8rem; color: var(--ink-3); }
.chip { --c: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font: 700 .68rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); padding: 5px 10px 5px 8px; border-radius: 999px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.chip-ai { --c: var(--ai); } .chip-phones { --c: var(--phones); } .chip-gpus { --c: var(--gpus); } .chip-chips { --c: var(--chips); } .chip-robots { --c: var(--robots); } .chip-wearables { --c: var(--wearables); } .chip-laptops { --c: var(--laptops); } .chip-home { --c: var(--home); } .chip-cameras { --c: var(--cameras); } .chip-drones { --c: var(--drones); } .chip-next { --c: var(--next); }
.status { display: inline-flex; align-items: center; gap: 3px; font: 500 .72rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.status svg { width: 13px; height: 13px; }
.status-official { color: var(--real); }
.status-rumor { color: var(--hype); border: 1px dashed currentColor; padding: 3px 6px; border-radius: 6px; }
.when { font: 500 .75rem var(--mono); color: var(--ink-3); }
.new-dot { font: 700 .66rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #1A0F3A; background: linear-gradient(135deg, var(--sun-b), var(--sun-a)); padding: 4px 7px; border-radius: 999px; }
.card-title { margin-top: 10px; font: 600 clamp(1.4rem, 1.15rem + .9vw, 1.8rem)/1.16 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.card-dek { margin-top: 8px; color: var(--ink-2); font-size: 1.02rem; text-wrap: pretty; }
.card-why { margin-top: 12px; text-wrap: pretty; }
.card-why strong { font-weight: 650; }
.card-side { padding-top: 30px; }
@media (max-width: 719px) {
  .card { gap: 0; padding: 16px; border-radius: 20px; }
  .card::before { top: 16px; height: 22px; }
  .card.has-pic::before { display: none; }
  .card-body { display: contents; }
  .card-meta { order: 1; } .card-title { order: 2; } .card-dek { order: 3; } .card-side { order: 4; padding-top: 14px; }
  .card-why { order: 5; } .card .fy { order: 6; } .card-foot { order: 7; } .card .call { order: 8; }
  .card-side .key { padding: 12px 14px; }
}
/* a story's picture: across the top of the card on phones, above the key number on wide screens */
.pic-by { font: 500 .62rem/1.2 var(--sans); letter-spacing: .02em; color: var(--ink-3); }
.card-pic, .spot-pic, .dev-photo { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--surface-2); }
.card-pic img, .spot-pic img, .dev-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-pic img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card-pic img { transform: scale(1.045); }
.card-pic .pic-by, .spot-pic .pic-by, .dev-photo .pic-by { position: absolute; inset-inline-end: 7px; bottom: 7px; color: #fff; background: rgb(0 0 0 / .5); padding: 3px 6px; border-radius: 5px; }
.card-pic { order: 0; aspect-ratio: 2 / 1; margin: -16px -16px 14px; border-radius: 19px 19px 0 0; }
.card.is-collapsed .card-pic { display: none; }
@media (min-width: 720px) {
  .card.has-pic { grid-template-rows: auto 1fr; }
  .card.has-pic .card-n, .card.has-pic .card-body { grid-row: 1 / span 2; }
  .card.has-pic .card-body { grid-column: 2; }
  .card-pic { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 3; margin: 30px 0 0; border-radius: var(--r); }
  .card.has-pic .card-side { grid-column: 3; grid-row: 2; padding-top: 12px; }
}
.card.is-filtered-out { display: none; }
.fit-note { margin: 0 0 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--yes) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yes) 35%, var(--line)); font-size: .93rem; color: var(--ink-2); }
.fit-note strong { color: var(--yes); }
.fit-note a { font-weight: 600; color: var(--ink); }
.card.is-collapsed { padding: 14px 22px; }
@media (max-width: 719px) { .card.is-collapsed { padding: 12px 16px; } }
.card.is-collapsed .card-dek, .card.is-collapsed .card-why, .card.is-collapsed .card-foot, .card.is-collapsed .card-side { display: none; }
.card.is-collapsed .card-title { font-size: 1.15rem; margin-top: 6px; }
.card.is-collapsed .fy { margin-top: 8px; padding: 8px 12px; }
/* briefs rise into place as they scroll in, and the hype and real bars fill with them (where the browser can) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card, .idea, .cn-strip, .hello { animation: scroll-in linear both; animation-timeline: view(); animation-range: entry 0% entry 160px; }
    .hm-bar i { transform-origin: 0 50%; animation: bar-in linear both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
  }
}
@keyframes scroll-in { from { opacity: 0; transform: translateY(26px) scale(.985); } }
@keyframes bar-in { from { transform: scaleX(0); } }

.key { --c: var(--ink); position: relative; border-radius: 16px; background: linear-gradient(165deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface) 78%); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--line)); padding: 16px 16px 14px; overflow: hidden; display: flex; align-items: baseline; gap: 10px; }
.key::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent)); }
.key-ai { --c: var(--ai); } .key-phones { --c: var(--phones); } .key-gpus { --c: var(--gpus); } .key-chips { --c: var(--chips); } .key-robots { --c: var(--robots); } .key-wearables { --c: var(--wearables); } .key-laptops { --c: var(--laptops); } .key-home { --c: var(--home); } .key-cameras { --c: var(--cameras); } .key-drones { --c: var(--drones); } .key-next { --c: var(--next); }
.key-v { font: 700 1.6rem/1 var(--mono); letter-spacing: -.03em; color: color-mix(in srgb, var(--c) 70%, var(--ink)); white-space: nowrap; }
.key-l { font-size: .82rem; line-height: 1.3; color: var(--ink-2); }
@media (min-width: 720px) { .card-side .key { display: grid; gap: 8px; padding: 20px 16px 16px; } .card-side .key-v { font-size: 2.1rem; } }

/* for-you line */
.fy { margin-top: 16px; border-radius: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
.fy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fy-tag { font: 700 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fy-set { font-size: .8rem; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.fy-line { font-weight: 500; text-wrap: pretty; }
.fy-device { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: .88rem; color: var(--ink-2); }
.fy-device b { color: var(--ink); }
.fy.is-yes { border-color: color-mix(in srgb, var(--yes) 45%, var(--line)); background: color-mix(in srgb, var(--yes) 7%, var(--surface)); }
.fy.is-yes .fy-tag { color: var(--yes); }
.fy.is-skip { background: transparent; border-style: dashed; }
.fy.is-skip .fy-line { color: var(--ink-3); font-weight: 400; }
.fy-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.fy-tabs button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: .8rem; color: var(--ink-2); }
.fy-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* hype meter */
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin-top: 18px; }
.hm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hm-rows { display: grid; gap: 4px; }
.hm-row { display: flex; align-items: center; gap: 8px; }
.hm-k { font: 700 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); width: 34px; }
.hm-bar { width: 84px; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.hm-bar i { display: block; height: 100%; width: calc(var(--v) * 10%); border-radius: inherit; }
.hm-hype i { background: linear-gradient(90deg, #FFB648, #FF6A2B); } .hm-real i { background: linear-gradient(90deg, #3CCB93, #128A55); }
:root[data-theme="dark"] .hm-hype i { background: var(--hype); } :root[data-theme="dark"] .hm-real i { background: var(--real); }
.hm-v { font: 700 .78rem/1 var(--mono); width: 14px; }
.hm-label { display: inline-block; font: 700 .72rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.hm-over { color: var(--hype); } .hm-under { color: var(--real); } .hm-fair { color: var(--ink-2); }
.hm-big .hm-bar { width: clamp(90px, 28vw, 140px); height: 9px; } .hm-big .hm-k { font-size: .72rem; width: 40px; } .hm-big .hm-v { font-size: .95rem; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-wrap summary { list-style: none; cursor: pointer; font-size: .85rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; gap: 6px; align-items: center; transition: border-color .2s, color .2s; }
.rc-wrap summary::-webkit-details-marker { display: none; }
.rc-wrap .count { font: 700 .72rem var(--mono); color: var(--ink-3); }
.rc-wrap[open] { flex-basis: 100%; order: 5; }
.rc-wrap[open] summary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rc-wrap[open] .count { color: inherit; }
.act { display: inline-grid; place-items: center; height: 34px; min-width: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: .85rem; font-weight: 600; transition: border-color .2s, color .2s; }
.act svg { width: 17px; height: 17px; }
.act-more { padding: 0 14px; }
.act:hover, .rc-wrap:not([open]) summary:hover { border-color: var(--brand); color: var(--brand); }

.receipts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.receipts a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: .9rem; }
.receipts a:hover { border-color: var(--ink); }
.rc-kind { font: 700 .64rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); }
.rc-primary { background: color-mix(in srgb, var(--real) 14%, transparent); color: var(--real); }
.rc-name { font-weight: 600; }
.rc-host { font: 500 .75rem var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; }

/* glossary terms */
.term { all: unset; cursor: help; border-bottom: 1.5px dotted var(--ink-3); }
.term:hover, .term[aria-expanded="true"] { border-bottom-color: var(--accent); color: var(--accent-ink); }
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.term-pop { position: absolute; z-index: 40; max-width: min(320px, calc(100vw - 32px)); background: var(--ink); color: var(--bg); border-radius: 12px; padding: 12px 14px; font-size: .88rem; line-height: 1.45; box-shadow: 0 12px 32px -8px rgb(0 0 0 / .35); }
.term-pop strong { display: block; font: 700 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.term-pop em { display: block; margin-top: 6px; font-style: normal; opacity: .78; }

/* done + earlier */
.done { text-align: center; padding: 48px 20px; margin: 12px 0 8px; border-radius: 28px; background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--sun-b) 24%, transparent), transparent 70%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.done-mark { width: 52px; height: 52px; margin: 0 auto 16px; color: var(--ink-3); transition: color .6s; }
.done-mark svg { width: 100%; height: 100%; }
.done.is-complete .done-mark { color: var(--real); }
.done h2 { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); }
.done p { color: var(--ink-2); max-width: 46ch; margin: 10px auto 0; }
.done-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; background: linear-gradient(135deg, var(--night-c), var(--night-a)); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: 0 12px 24px -14px rgb(40 24 120 / .8); transition: transform .2s, background .2s, border-color .2s; }
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
:root[data-theme="dark"] .btn:not(.btn-ghost), .on-navy .btn:not(.btn-ghost) { background: linear-gradient(135deg, var(--sun-b), var(--sun-a)); color: #1A0F3A; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink); }
.sec-h { font: 700 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 12px; margin-bottom: 4px; background: linear-gradient(90deg, var(--brand), var(--sun-a)) 0 100% / 46px 3px no-repeat, linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; }
.earlier { margin-top: 40px; }
.rows { list-style: none; padding: 0; margin: 0; }
.row-story { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row-meta { grid-column: 1 / -1; }
.row-title { font: 600 1.12rem/1.3 var(--serif); text-decoration: none; }
.row-title:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.row-story .hm-label { font-size: .64rem; padding: 5px 8px; }
.empty { padding: 32px 0; color: var(--ink-3); }

/* side boxes */
.col-side { display: grid; gap: 28px; align-content: start; }
.side-box { padding-top: 14px; background: linear-gradient(90deg, var(--brand), var(--sun-a)) 0 0 / 46px 3px no-repeat, linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.side-head h2 { display: flex; align-items: center; gap: 8px; font: 700 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.side-head a { font-size: .8rem; color: var(--ink-3); text-decoration: none; }
.side-head a:hover { color: var(--ink); }
.side-k { font: 700 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.next a { font: 600 1.15rem/1.3 var(--serif); text-decoration: none; }
.next a:hover { text-decoration: underline; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--sun-a); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live, .upd.is-fresh .upd-dot, .t3-pic img, .top::after { animation: none; } .mast-front h1 em { animation: none; background-size: 100% 100%; } * { transition: none !important; } }
.w-list { list-style: none; padding: 0; margin: 0; }
.w-item a { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.w-item a:hover .w-title { text-decoration: underline; text-decoration-color: var(--accent); }
.w-item[hidden] { display: none; }
.w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 .72rem/1.3 var(--mono); color: var(--ink-3); }
.w-src { font-family: var(--sans); font-weight: 650; color: var(--ink-2); }
.w-official::before { content: "●"; color: var(--real); margin-inline-end: 4px; font-size: .6rem; vertical-align: 1px; }
.w-more { color: var(--ink-3); }
.w-flag { font: 700 .6rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; }
.w-dev { background: var(--accent); color: #fff; }
.w-rumor { color: var(--hype); border: 1px dashed currentColor; }
.w-title { font-size: .93rem; line-height: 1.4; font-weight: 500; }
.w-new .w-title::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-inline-end: 6px; vertical-align: 2px; }
.wire .w-item a { padding: 14px 0; }
.wire .w-title { font-size: 1.02rem; }
.w-day { margin-top: 28px; }
.dec-term { font: 600 1.2rem var(--serif); }
.dec-short { font-size: .92rem; margin-top: 4px; }
.dec-why { font-size: .88rem; color: var(--ink-3); margin-top: 6px; }
.pairs { list-style: none; padding: 0; margin: 0; }
.pairs a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .92rem; }
.pairs a span { font: 500 .72rem var(--mono); color: var(--ink-3); margin: 0 4px; }
.pairs a:hover { color: var(--accent-ink); }
.pairs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }

/* ---------- story page ---------- */
.story .crumbs { padding-top: 36px; }
.story-h { margin-top: 14px; font: 600 clamp(2rem, 1.3rem + 2.6vw, 3.1rem)/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.byline { margin-top: 10px; font-size: .85rem; color: var(--ink-3); }
.byline a { color: var(--ink-2); }
.ai-note { margin-top: 12px; font-size: .78rem; color: var(--ink-3); }
.ai-note a { color: inherit; }
.story-dek { margin-top: 14px; font: 400 clamp(1.15rem, 1.05rem + .4vw, 1.35rem)/1.45 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.story-top { display: grid; gap: 14px; margin-top: 26px; }
.story-top > * { min-width: 0; }
@media (min-width: 640px) { .story-top { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }
.story-top .key { display: grid; align-content: center; gap: 8px; padding: 22px 20px; }
.story-top .key-v { font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem); }
.hm-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.hm-title { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.hm-note { margin-top: 12px; font-size: .88rem; color: var(--ink-2); }
.hm-legal { margin-top: 8px; font-size: .76rem; color: var(--ink-3); }
.hm-legal a { color: inherit; }
.report-err { margin-top: 14px; }
.legal .block p + p { margin-top: 10px; }
.legal-date { margin-top: 36px; }
.block { margin-top: 30px; }
.block-h { font: 700 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.lead { font-size: 1.12rem; text-wrap: pretty; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.facts li { position: relative; padding-inline-start: 22px; text-wrap: pretty; }
.facts li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 2px; background: var(--accent); }
.verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-weight: 500; box-shadow: var(--shadow); }
.verdict-k { flex: none; font: 700 .78rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.verdict-buy .verdict-k, .verdict-try .verdict-k { background: var(--real); color: #fff; }
.verdict-wait .verdict-k { background: var(--chips); color: #fff; }
.verdict-skip .verdict-k { background: var(--skip); color: #fff; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.dev-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dev-mini { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); }
.dev-mini.has-pic { overflow: hidden; }
.dev-pic { display: grid; place-items: center; height: 124px; margin: -14px -16px 12px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.dev-pic img { width: 100%; height: 100%; object-fit: cover; }
.dev-pic.is-small img { width: auto; height: 88%; object-fit: contain; }
.dev-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dev-top strong { font: 600 1.08rem/1.25 var(--serif); }
.dev-price { font: 700 .9rem var(--mono); }
.dev-facts { margin-top: 6px; font: 500 .76rem/1.5 var(--mono); color: var(--ink-3); }
.dev-good, .dev-bad { margin-top: 8px; font-size: .86rem; line-height: 1.4; }
.dev-good span, .dev-bad span { display: block; font: 700 .62rem var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.dev-good span { color: var(--real); } .dev-bad span { color: var(--hype); }
.dev-cmp { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--brand); align-self: center; }

/* ---------- picks ---------- */
.picks { margin-bottom: 18px; }
.picks-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.picks-head .sec-h { flex: 1; }
.picks-head a { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--brand); }
.picks-grid { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pick-k { display: block; font: 700 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.pick .dev-mini { height: calc(100% - 22px); }
/* phones: picks sit in one sideways row so the news starts sooner */
@media (max-width: 640px) { .picks-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 76%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .pick { scroll-snap-align: start; } }

/* ---------- compare ---------- */
.cmp-pick { display: grid; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; white-space: nowrap; }
.cmp-pick > * { min-width: 0; }
.cmp-selects label, .cmp-selects select { min-width: 0; width: 100%; }
.cmp-selects { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.vs { font: 700 .8rem var(--mono); color: var(--ink-3); }
select, textarea, input[type="text"] { width: 100%; border: 1px solid var(--line-2); background: var(--bg); border-radius: 10px; padding: 10px 12px; font-size: 1rem; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 34px; }
.cmp-out { margin-top: 22px; }
.cmp-verdict { padding: 18px 20px; border-radius: var(--r); border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand), var(--sun-a)) border-box; box-shadow: var(--shadow); }
.cmp-verdict ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.cmp-verdict li::marker { color: var(--accent); }
.cmp-you { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--yes) 9%, transparent); border: 1px solid color-mix(in srgb, var(--yes) 40%, transparent); font-weight: 500; }
.cmp-you strong { color: var(--yes); }
.toggle { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--ink); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 18px; table-layout: fixed; }
.cmp-table th, .cmp-table td { text-align: start; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.cmp-table thead th { font: 600 1.05rem/1.25 var(--serif); border-bottom: 2px solid var(--ink); }
.cmp-table tbody th { font-weight: 500; color: var(--ink-3); font-size: .85rem; width: 30%; }
.cmp-table td.win { font-weight: 700; }
.cmp-table td.win::after { content: " ✓"; color: var(--real); }
.cmp-table.only-diff tr.same { display: none; }
.cmp-bar { display: block; margin-top: 6px; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--ink-3); border-radius: inherit; }
td.win .cmp-bar i { background: var(--real); }

/* ---------- Your call: the reader's Hype or Real vote ---------- */
.call { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); display: grid; gap: 8px; }
.call[hidden] { display: none; }
.call-q { font: 700 .7rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.call-btns { display: flex; gap: 8px; }
.call-btns[hidden] { display: none; }
.call-btns button { flex: 1; max-width: 150px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 700; font-size: .9rem; transition: border-color .15s, background .15s, color .15s; }
.call-btns button[data-call-pick="real"]:hover:not(:disabled) { border-color: var(--real); color: var(--real); }
.call-btns button[data-call-pick="hype"]:hover:not(:disabled) { border-color: var(--hype); color: var(--hype); }
.call-btns button:disabled { opacity: .55; cursor: default; }
.call-note { font-size: .8rem; color: var(--ink-3); }
.call-note:empty { display: none; }
.call-res p { margin-top: 6px; font-size: .9rem; }
.call-res .muted { font-size: .8rem; margin-inline-start: 4px; }
.call-bar { display: block; height: 8px; border-radius: 99px; background: var(--hype); overflow: hidden; }
.call-bar i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--real); }
.call-compact { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.call-compact .call-res, .call-compact .call-note { grid-column: 1 / -1; }
.card.is-collapsed .call { display: none; }
.hm-card .call { margin-top: 16px; }

/* ---------- Help me choose ---------- */
.ch-entry { margin-top: 14px; }
.ch-form fieldset[hidden] { display: none; }
.ch-filter { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.ch-filter[hidden] { display: none; }
.ch-filter-k { font: 700 .7rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.chips-in input:disabled + span { opacity: .45; cursor: default; }
.ch-out { margin: 18px 0 20px; }
.ch-pick h3 a { text-decoration: none; }
.ch-pick h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ch-why { margin: 12px 0 4px; padding-inline-start: 1.1em; display: grid; gap: 4px; color: var(--ink-2); }
.ch-pick .dev-good, .ch-pick .dev-bad { margin-top: 10px; }

/* ---------- Idea of the day ---------- */
.idea { margin: 4px 0 28px; padding: 22px 22px 18px; border-radius: 24px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand), var(--sun-a), var(--sun-b)) border-box; box-shadow: var(--shadow); }
.idea-k { font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.idea h2 { margin-top: 10px; font: 600 clamp(1.3rem, 1.1rem + .9vw, 1.7rem)/1.2 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.idea h2 a { text-decoration: none; }
.idea h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.idea-simple { margin-top: 10px; font-size: 1.03rem; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.idea-foot { margin-top: 14px; font-size: .88rem; color: var(--ink-3); }
.idea-num { font: 700 .95rem var(--mono); color: var(--ink); }
.idea-foot a { font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }

/* ---------- Themed strips (From China, Through the lens, For your home) ---------- */
.cn-chip { font: 700 .66rem/1 var(--sans); letter-spacing: .04em; padding: 5px 8px; border-radius: 6px; color: #C92A2A; background: color-mix(in srgb, #E03131 10%, transparent); }
.w-cn { font-size: .8rem; }
.cn-strip { margin: 6px 0 26px; padding: 18px 0 4px; border-top: 1px solid var(--line); }
.cn-head h2 { font: 600 1.35rem/1.2 var(--serif); }
.cn-head p { margin-top: 4px; font-size: .9rem; color: var(--ink-2); }
.cn-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 2px 12px; scrollbar-width: thin; }
@media (min-width: 720px) { .cn-row { grid-auto-columns: minmax(240px, 32%); } }
.cn-strip { --tint: #E03131; } .strip-cameras { --tint: var(--cameras); } .strip-home { --tint: var(--home); }
.cn-card { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 7%, var(--surface)), var(--surface) 55%); text-decoration: none; min-height: 150px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.cn-card:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: var(--shadow); }
.cn-card strong { font: 600 1.02rem/1.3 var(--serif); }
.cn-k { font: 700 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cn-price { margin-top: auto; font: 700 .85rem var(--mono); color: var(--ink-2); }
.cn-price small { font: 500 .74rem var(--sans); color: var(--ink-3); }
.cn-wire .cn-price { font: 500 .78rem var(--sans); color: var(--ink-3); }
.avail { margin-top: 22px; padding: 14px 16px; border-radius: var(--r); border: 1px dashed color-mix(in srgb, #E03131 45%, var(--line)); background: color-mix(in srgb, #E03131 5%, var(--surface)); }
.avail .block-h { margin-bottom: 4px; }
.avail-s { font-weight: 650; }
.avail-n { margin-top: 4px; font-size: .9rem; color: var(--ink-2); }

/* ---------- events ---------- */
.live-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); text-decoration: none; font-size: .95rem; }
.live-banner strong { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--sun-b); }
.live-banner .lb-go { margin-inline-start: auto; font-weight: 650; }
.lb-dot, .ev-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--sun-a); display: inline-block; animation: pulse 1.6s infinite; }
.ev-list { list-style: none; padding: 0; margin: 0; }
.ev-item a { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ev-item a:hover .ev-name { text-decoration: underline; text-decoration-color: var(--accent); }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ev-brand { font: 700 .72rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.ev-name { font: 600 1.05rem/1.3 var(--serif); }
.ev-when { font: 500 .78rem var(--mono); color: var(--ink-3); }
.ev-list-big .ev-name { font-size: 1.3rem; }
.ev-list-big .ev-item a { padding: 16px 0; }
.ev-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 .64rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; }
.ev-live { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.ev-up { background: var(--surface-2); color: var(--ink-2); }
.ev-ended { background: transparent; color: var(--ink-3); border: 1px solid var(--line-2); }
.ev-exp { font: 500 .72rem var(--mono); color: var(--chips); }
.ev-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ev-time { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font: 600 1rem var(--mono); }
.ev-count { color: var(--accent-ink); }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ev-updates { list-style: none; padding: 0; margin: 0; display: grid; }
.ev-updates li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ev-updates time { font: 600 .8rem var(--mono); color: var(--accent-ink); padding-top: 2px; }
.ev-src { margin-top: 4px; font-size: .82rem; }
.ev-empty { color: var(--ink-3); padding: 12px 0; grid-template-columns: 1fr !important; }
.ev-poll { font: 500 .7rem var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: 0; }

/* ---------- email forms ---------- */
.sub-form { position: relative; margin-top: 22px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-align: start; }
.done .sub-form { max-width: 520px; margin: 26px auto 0; }
.sub-title { font: 600 1.1rem var(--serif); margin-bottom: 10px; }
.sub-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-row input[type=email] { flex: 1 1 220px; width: auto; border: 1px solid var(--line-2); background: var(--bg); border-radius: 999px; padding: 10px 16px; font-size: 1rem; }
.sub-note { margin-top: 8px; font-size: .8rem; color: var(--ink-3); }
.sub-msg { margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--hype); }
.sub-msg.ok { color: var(--yes); }
.sub-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.sub-check input { margin-top: 3px; accent-color: var(--ink); }
.hp { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); }
.sub-full fieldset { margin-bottom: 14px; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- owner dashboard ---------- */
.adm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .adm-kpis { grid-template-columns: repeat(5, 1fr); } }
.adm-kpi { padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; }
.adm-kpi span { font: 700 1.9rem/1 var(--mono); }
.adm-kpi small { color: var(--ink-3); font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.adm-live { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
/* visitor report */
.adm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
@media (min-width: 720px) { .adm-tiles { grid-template-columns: repeat(3, 1fr); } }
.adm-tile { padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 3px; align-content: start; }
.adm-tile-k { font: 700 .68rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.adm-tile-v { font: 700 2rem/1.05 var(--mono); }
.adm-tile-s { font-size: .82rem; color: var(--ink-2); }
.adm-vs { font-size: .76rem; color: var(--ink-3); }
.adm-up { color: var(--real); } .adm-down { color: var(--hype); }
.adm-heat-wrap { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.adm-heat { --cell: 13px; --gap: 3px; width: max-content; }
.adm-heat-m, .adm-heat-g { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cell); gap: var(--gap); }
.adm-heat-m { margin-bottom: 4px; font: 500 .66rem var(--mono); color: var(--ink-3); }
.adm-heat-m span { overflow: visible; white-space: nowrap; }
.adm-heat-g { grid-template-rows: repeat(7, var(--cell)); }
.adm-heat-g i, .adm-heat-key i { display: block; width: var(--cell, 13px); height: var(--cell, 13px); border-radius: 3px; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); }
.adm-heat-g i[data-day] { cursor: pointer; }
.adm-heat-g i.adm-off { visibility: hidden; }
.adm-heat i[data-l="1"], .adm-heat-key i[data-l="1"] { background: color-mix(in srgb, var(--brand) 28%, var(--surface)) !important; }
.adm-heat i[data-l="2"], .adm-heat-key i[data-l="2"] { background: color-mix(in srgb, var(--brand) 52%, var(--surface)) !important; }
.adm-heat i[data-l="3"], .adm-heat-key i[data-l="3"] { background: color-mix(in srgb, var(--brand) 76%, var(--surface)) !important; }
.adm-heat i[data-l="4"], .adm-heat-key i[data-l="4"] { background: var(--brand) !important; }
.adm-heat-g i.adm-now { outline: 2px solid var(--accent); outline-offset: 1px; }
.adm-heat-g i.adm-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.adm-heat-key { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .72rem; color: var(--ink-3); }
.adm-day { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.adm-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 130px; margin-top: 16px; }
.adm-month { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 3px; text-align: center; min-width: 0; }
.adm-month b { font: 700 .62rem var(--mono); color: var(--ink-2); overflow: hidden; }
.adm-month i { align-self: end; height: calc(var(--h) * 1%); min-height: 2px; background: var(--brand); border-radius: 3px 3px 0 0; }
.adm-month span { font: 500 .66rem var(--mono); color: var(--ink-3); }
.adm-time-top { font-size: .95rem; margin-bottom: 10px; }
.adm-time-top b { font: 700 1.15rem var(--mono); }
.adm-bars { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.adm-bars li { display: grid; grid-template-columns: 104px 1fr 34px; gap: 10px; align-items: center; font-size: .82rem; color: var(--ink-2); }
.adm-bars i { display: block; height: 10px; width: calc(var(--w) * 1%); min-width: 2px; background: var(--real); border-radius: 99px; }
.adm-bars b { font: 700 .8rem var(--mono); text-align: end; }
.adm-seg { display: flex; gap: 6px; margin-bottom: 8px; }
.adm-seg button { border: 1px solid var(--line); background: var(--surface); padding: 6px 13px; border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.adm-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.adm-people { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.adm-people li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.adm-p-who { overflow-wrap: anywhere; }
.adm-p-n { grid-column: 1; font-size: .78rem; color: var(--ink-3); overflow-wrap: anywhere; }
.adm-people b { grid-row: 1; grid-column: 2; font: 700 .9rem var(--mono); }
.adm-people time { grid-row: 1; grid-column: 3; font: 500 .75rem var(--mono); color: var(--ink-3); }
.adm-people li.adm-on .adm-p-who::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-inline-end: 6px; }
.adm-chart { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding: 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.adm-chart i { flex: 1; height: calc(var(--h) * 1%); min-height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.adm-grid { display: grid; gap: 0 28px; }
@media (min-width: 720px) { .adm-grid { grid-template-columns: 1fr 1fr; } }
.adm-list, .adm-feed { list-style: none; margin: 0; padding: 0; }
.adm-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; overflow-wrap: anywhere; }
.adm-list li small { color: var(--ink-3); }
.adm-feed li { display: grid; grid-template-columns: 74px 1fr; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.adm-feed time { font: 500 .75rem var(--mono); color: var(--ink-3); grid-row: span 2; padding-top: 2px; }
.adm-feed small { color: var(--ink-3); }

/* ---------- simple words ---------- */
.card-simple { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); font-size: 1.05rem; }
.simple-on .card[data-has-simple] .card-dek, .simple-on .card[data-has-simple] .card-why { display: none; }
.simple-on .card[data-has-simple] .card-simple { display: block; }
.simple-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.simple-toggle input { width: 17px; height: 17px; accent-color: var(--brand); }
.simple-btn { margin-top: 12px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .88rem; }
.simple-box { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); font-size: 1.1rem; }

/* ---------- swipe mode ---------- */
html.sw-on, html.sw-on body { overflow: hidden; }
.sw { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; }
.sw-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 6px; }
.sw-bars { flex: 1; display: flex; gap: 4px; }
.sw-bars i { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); transition: background .3s; }
.sw-bars i.on { background: var(--accent); }
.sw-x { border: 0; background: none; color: var(--ink-2); font-size: 1.8rem; line-height: 1; padding: 2px 6px; }
.sw-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.sw-track::-webkit-scrollbar { display: none; }
.sw-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; padding: 18px 22px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
.sw-meta { display: flex; align-items: center; gap: 8px; }
.sw-n { margin-inline-start: auto; font: 500 .78rem var(--mono); color: var(--ink-3); }
.sw-key { align-self: flex-start; display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.sw-key span { font: 700 2.6rem/1 var(--mono); letter-spacing: -.03em; }
.sw-key small { font-size: .85rem; color: var(--ink-2); }
.sw-slide h2 { font: 600 clamp(1.7rem, 1.3rem + 2vw, 2.4rem)/1.12 var(--serif); letter-spacing: -.015em; }
.sw-dek { font-size: 1.08rem; color: var(--ink-2); }
.sw-fy { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--yes) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yes) 30%, var(--line)); }
.sw-fy b { color: var(--yes); }
.sw-fy.sw-skip { background: transparent; border-style: dashed; color: var(--ink-3); }
.sw-fy.sw-skip b { color: var(--ink-3); }
.sw-hm { display: flex; gap: 16px; align-items: center; font: 500 .85rem var(--mono); color: var(--ink-3); }
.sw-hm b { color: var(--ink); }
.sw-hm em { font: 700 .72rem var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border: 1.5px solid currentColor; border-radius: 999px; }
.sw-slide .btn { align-self: flex-start; }
.sw-end { align-items: center; justify-content: center; text-align: center; }
.sw-end .btn { align-self: center; }
.sw-end .done-mark { color: var(--real); }
.sw-hint { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); inset-inline-end: 20px; font: 700 .78rem var(--mono); color: var(--accent-ink); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* ---------- device pages ---------- */
.dev-hero { display: grid; gap: 22px; align-items: start; }
@media (min-width: 720px) { .dev-hero { grid-template-columns: 360px 1fr; } }
.spec-img { margin: 0; }
.spec-img img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border-radius: 16px; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.spec-actions { display: grid; gap: 10px; align-content: start; }
.spec-actions .btn { justify-content: center; }
.spec-table tbody th { width: 34%; }
.dev-top strong a { text-decoration: none; }
.dev-top strong a:hover { text-decoration: underline; }

/* ---------- morning card ---------- */
.card-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: .85rem; font-weight: 650; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .2s, color .2s; }
.card-link svg { width: 17px; height: 17px; color: var(--brand); }
.card-link:hover { border-color: var(--brand); color: var(--brand); }
.cardpage-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 720px) { .cardpage-grid { grid-template-columns: 340px 1fr; } }
.cardpage-img { margin: 0; }
.cardpage-img img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; border-radius: 18px; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.cardpage-actions { display: grid; gap: 10px; align-content: start; }
.cardpage-actions .btn { justify-content: center; }
.cardpage-list { margin: 8px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; font: 600 1.02rem/1.35 var(--serif); }
.cardpage-list a { text-decoration: none; }
.cardpage-list a:hover { text-decoration: underline; }

/* ---------- you ---------- */
.you-form { display: grid; gap: 14px; }
fieldset { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 16px 18px 18px; margin: 0; min-width: 0; box-shadow: var(--shadow); }
legend { font: 600 1.1rem var(--serif); padding: 0 6px; display: flex; align-items: center; gap: 8px; }
legend small { font: 500 .78rem var(--sans); color: var(--ink-3); }
.step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 .75rem var(--mono); }
.persona-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
@media (min-width: 640px) { .persona-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.persona input, .chips-in input { position: absolute; opacity: 0; pointer-events: none; }
.persona span { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; background: var(--bg); height: 100%; }
.persona small { color: var(--ink-3); font-size: .8rem; line-height: 1.3; }
.persona input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.persona input:checked + span small { color: rgb(255 255 255 / .78); }
:root[data-theme="dark"] .persona input:checked + span, :root[data-theme="dark"] .chips-in input:checked + span { color: #1A0F3A; }
:root[data-theme="dark"] .persona input:checked + span small { color: rgb(26 15 58 / .75); }
.persona input:focus-visible + span, .chips-in input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips-in { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips-in span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); cursor: pointer; font-size: .92rem; font-weight: 500; background: var(--bg); }
.chips-in input:checked + span { background: var(--brand); color: #fff; border-color: var(--brand); }
.two { display: grid; gap: 12px; margin-top: 6px; }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.two label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.two + .two { margin-top: 12px; }
textarea { resize: vertical; min-height: 84px; margin-top: 6px; line-height: 1.5; }
.needs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--ink-3); min-height: 1.2em; }
.needs b { font: 700 .72rem var(--sans); letter-spacing: .03em; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--real) 13%, transparent); color: var(--real); }
.privacy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-3); padding: 4px 4px 0; }
.privacy svg { width: 18px; height: 18px; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; color: var(--ink-2); font-size: .85rem; }
.acct { margin: 4px 0 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: grid; gap: 10px; }
.acct-t { font-size: .95rem; color: var(--ink-2); }
.acct-t strong { color: var(--ink); }
.acct-actions { display: flex; gap: 18px; }
.gbtn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid #DADCE0; background: #fff; color: #1F1F1F; font: 500 .95rem var(--sans); text-decoration: none; }
.gbtn:hover { background: #F7F8F8; }
.you-out { margin-top: 8px; display: grid; gap: 16px; }
.you-edit { margin-top: 28px; }
.you-edit > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: 600 1.15rem var(--serif); }
.you-edit > summary::-webkit-details-marker { display: none; }
.you-edit > summary small { font: 600 .85rem var(--sans); color: var(--accent-ink); }
.you-edit[open] > summary { margin-bottom: 14px; }
.you-edit[open] > summary small { visibility: hidden; }
.you-tip { padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); font-size: .93rem; }
.dev-cards { display: grid; gap: 14px; }
@media (min-width: 720px) { .dev-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.dev-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 18px 20px; box-shadow: var(--shadow); }
.dev-card h3 { font: 600 1.45rem/1.15 var(--serif); }
.dev-age { font: 500 .8rem var(--mono); color: var(--ink-3); }
.dev-status { display: inline-block; margin-top: 10px; font: 700 .7rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.dev-good { background: color-mix(in srgb, var(--yes) 14%, transparent); color: var(--yes); }
.dev-up { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.dev-plan { background: color-mix(in srgb, var(--chips) 16%, transparent); color: var(--chips); }
.dev-line { margin-top: 10px; color: var(--ink-2); }
.dev-lines { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 0; }
.dev-lines li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.dev-lines b { font: 700 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dev-lines a { font-weight: 600; }
.you-empty { padding: 24px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r); }
.reco { border: 1px solid transparent; border-radius: 18px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand), var(--sun-a)) border-box; padding: 18px 20px; box-shadow: var(--shadow); }
.reco-k { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.reco-main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: 8px; }
.reco-main h3 { font: 600 1.6rem/1.15 var(--serif); }
.reco-price { font: 700 1rem var(--mono); }
.reco-why { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.reco-why li { font-size: .82rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); }
.upg { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: .92rem; }
.upg-k { font: 700 .68rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; color: #fff; }
.upg-upgrade { background: var(--real); } .upg-maybe { background: var(--chips); } .upg-keep { background: var(--skip); }
.reco-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.reco-alt a { font-weight: 600; }
.reco-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- decoder / how ---------- */
.dec-group { margin-top: 28px; }
.dec-item { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
@media (min-width: 640px) { .dec-item { grid-template-columns: 200px 1fr; } }
.dec-item dt { font: 600 1.15rem var(--serif); }
.dec-item dd { margin: 0; }
.dec-item:target { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.legend { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; font-size: .92rem; }
.how .block p + p { margin-top: 10px; }
.src-tier { margin-top: 18px; }
.src-tier h3 { font: 600 1.05rem var(--serif); }
.src-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 18px; }
.src-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.src-list span { font: 500 .72rem var(--mono); color: var(--ink-3); }

/* ---------- install bar ---------- */
.install { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 10px 30px -8px rgb(0 0 0 / .3); }
.install[hidden] { display: none; }
.install img { border-radius: 10px; flex: none; }
.install-t { flex: 1; display: grid; gap: 1px; font-size: .82rem; color: var(--ink-2); line-height: 1.35; }
.install-t strong { font-size: .92rem; color: var(--ink); }
.install .btn { padding: 8px 14px; font-size: .85rem; }
.install .btn[hidden] { display: none; }
.install-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--ink-3); padding: 4px 6px; }
@media (min-width: 820px) { .install { inset-inline-start: auto; inset-inline-end: 24px; bottom: 24px; max-width: 420px; } }

/* ---------- footer, tabbar, toast ---------- */
/* the page ends on the logo's midnight, with its violet and gold glow */
.foot { --surface: #151840; --ink: #F6F4FF; --ink-2: #CFCBF0; --ink-3: #A29DD0; --line: #272B63; --brand: #B79DFF; position: relative; color: var(--ink); background: radial-gradient(50% 120% at 10% 0%, rgb(124 84 232 / .36), transparent 65%), radial-gradient(40% 100% at 94% 112%, rgb(255 140 60 / .2), transparent 65%), #0B0F2E; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-soft), var(--sun-b), var(--sun-a), transparent); }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 32px 16px 110px; display: grid; gap: 18px; }
@media (min-width: 820px) { .foot-in { padding: 36px 24px 44px; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); align-items: start; } .foot-links { justify-content: flex-end; } .foot-note { grid-column: 1 / -1; } }
.foot-brand { display: flex; gap: 10px; align-items: flex-start; }
.foot-brand strong { font: 700 1.15rem var(--sans); letter-spacing: -.03em; }
.foot-brand p { color: var(--ink-3); font-size: .88rem; max-width: 40ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
.foot-links a { text-decoration: none; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-note { font-size: .82rem; color: var(--ink-3); }
.tabbar { position: fixed; z-index: 25; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7); box-shadow: 0 18px 40px -16px rgb(30 20 90 / .5); }
.tabbar a { display: grid; justify-items: center; gap: 2px; text-decoration: none; font-size: .7rem; font-weight: 600; color: var(--ink-3); padding: 6px 0; border-radius: 18px; transition: background .25s, color .25s; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar a[aria-current] { color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, transparent); }
.tabbar a[aria-current] svg { color: var(--brand); }
@media (max-width: 819px) { .nav { display: none; } .top-in { gap: 12px; } .you-btn { padding: 7px 12px; } }
@media (min-width: 820px) { .tabbar { display: none; } }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 92px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); }
@media (min-width: 820px) { .toast { bottom: 28px; } }
@media (max-width: 460px) { .rc-host { display: none; } .receipts a { grid-template-columns: auto 1fr; } .cmp-table { font-size: .88rem; } .cmp-table th, .cmp-table td { padding: 10px 6px; } .legend li { grid-template-columns: 1fr; gap: 4px; } }
@media print { .top, .tabbar, .col-side, .card-actions, .hello, .done, .foot { display: none; } .card, .idea, .cn-strip, .hello { animation: none; } body::before { display: none; } }

/* ---------- spotlights: midnight cards between the briefs, each led by a picture ---------- */
.spot { margin: 6px 0 30px; border-radius: 24px; overflow: hidden; background: linear-gradient(125deg, var(--night-a), var(--night-b) 58%, var(--night-c)); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 28px 56px -28px rgb(52 30 140 / .72); }
.spot-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.spot-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sun-a); }
.spot h2 { font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.1 var(--serif); letter-spacing: -.015em; }
.spot h2 a { text-decoration: none; }
.spot h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.spot-dev { display: grid; grid-template-columns: minmax(0, 1fr); }
.spot-dev .spot-pic { border-radius: 0; aspect-ratio: 16 / 10; background: #000; }
.spot-body { display: grid; gap: 10px; padding: 20px 20px 22px; align-content: center; }
.spot-price { font: 700 1.55rem/1 var(--mono); letter-spacing: -.03em; color: var(--sun-b); }
.spot-line { font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
.spot-line b { display: block; font: 700 .62rem/1.7 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--real); }
.spot-warn b { color: var(--hype); }
.spot-scores { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.spot-scores li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 22px; align-items: center; gap: 10px; font: 600 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.spot-scores i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--sun-b), var(--sun-a) calc(var(--v) * 10%), rgb(255 255 255 / .13) 0); }
.spot-scores b { color: var(--ink); font-size: .84rem; text-align: end; }
.spot-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; font-size: .9rem; font-weight: 600; }
.spot-go a { color: var(--ink-2); text-underline-offset: 3px; }
.spot-go a.spot-btn { text-decoration: none; background: linear-gradient(135deg, var(--sun-b), var(--sun-a)); color: #1A0F3A; padding: 10px 17px; border-radius: 999px; font-weight: 700; box-shadow: 0 12px 26px -12px rgb(255 130 50 / .75); }
.spot-go a.spot-btn:hover { filter: brightness(1.08); }
@media (min-width: 720px) { .spot-dev { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); } .spot-dev .spot-pic { aspect-ratio: auto; min-height: 320px; } .spot-body { padding: 26px 28px; } }
/* face-off: two devices and the short answer */
.spot-face { display: grid; gap: 16px; padding: 20px 18px 22px; background-image: radial-gradient(90% 80% at 50% 0%, rgb(128 88 240 / .46), transparent 62%), radial-gradient(60% 60% at 50% 122%, rgb(255 140 60 / .24), transparent 66%), linear-gradient(125deg, var(--night-a), var(--night-b) 58%, var(--night-c)); }
.fo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.fo-side { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; text-align: center; text-decoration: none; }
.fo-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 16px 30px -18px rgb(0 0 0 / .7); }
.fo-pic img { width: 100%; height: 100%; object-fit: cover; }
.fo-pic.is-small img { width: auto; max-width: 80%; height: 88%; object-fit: contain; }
.fo-none { background: var(--surface); font: 700 1rem var(--sans); color: var(--ink-3); }
.fo-side strong { font: 600 clamp(1.02rem, .9rem + .6vw, 1.35rem)/1.2 var(--serif); }
.fo-price { font: 700 .92rem/1 var(--mono); color: var(--sun-b); }
.fo-vs { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--sun-b), var(--sun-a)); color: #1A0F3A; font: 800 .8rem/1 var(--sans); letter-spacing: .04em; box-shadow: 0 0 0 5px rgb(255 160 70 / .22), 0 10px 26px -8px rgb(255 130 50 / .7); }
.fo-verdict { justify-self: center; max-width: 60ch; margin: 0; font-size: 1rem; line-height: 1.45; text-align: center; text-wrap: balance; }
.spot-face .spot-go { justify-content: center; margin-top: 0; }
.spot-face .pic-by { flex-basis: 100%; text-align: center; }
.vs-hero { margin: 0 0 18px; padding: 18px 18px 12px; border-radius: 24px; color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 28px 56px -28px rgb(52 30 140 / .72); background: radial-gradient(90% 80% at 50% 0%, rgb(128 88 240 / .46), transparent 62%), radial-gradient(60% 60% at 50% 122%, rgb(255 140 60 / .24), transparent 66%), linear-gradient(125deg, var(--night-a), var(--night-b) 58%, var(--night-c)); }
.vs-hero[hidden] { display: none; }
.vs-hero .pic-by { display: block; margin-top: 12px; text-align: center; }
@media (min-width: 720px) { .spot-face { padding: 24px 28px 26px; } .fo { gap: 22px; } .fo-pic { max-width: 300px; } .fo-vs { width: 54px; height: 54px; font-size: .95rem; } .vs-hero { padding: 24px 28px 14px; } }
/* a device's own page: its picture first */
.dev-photo { margin: 0 auto 22px; aspect-ratio: var(--ar, 2); max-width: min(100%, calc(var(--mh, 410px) * var(--ar, 2))); background: #000; box-shadow: var(--shadow); }
.dev-photo.is-small { aspect-ratio: auto; max-width: 340px; display: grid; place-items: center; padding: 20px; background: #fff; border: 1px solid var(--line); box-shadow: none; }
.dev-photo.is-small img { width: auto; height: 230px; object-fit: contain; }
.dev-photo.is-small .pic-by { color: var(--ink-3); background: none; }
/* spotlights arrive once as they scroll into view: the two sides of a face-off come in from left and right */
.mo [data-spot] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.mo [data-spot] .fo-side { transition: transform .6s cubic-bezier(.2, .8, .2, 1) .1s; }
.mo [data-spot]:not(.in) .fo-side:first-child { transform: translateX(-26px); }
.mo [data-spot]:not(.in) .fo-side:last-child { transform: translateX(26px); }
.mo [data-spot] .fo-vs { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .35s; }
.mo [data-spot]:not(.in) .fo-vs { transform: scale(.4); }
.mo [data-spot] .spot-scores i { transition: background-size .8s ease .2s; background-size: 100% 100%; background-repeat: no-repeat; }
.mo [data-spot]:not(.in) .spot-scores i { background-size: 0% 100%; }
.mo [data-spot].in { opacity: 1; transform: none; }
/* comparison links with both devices' pictures; a story's picture on its own page and on strip cards */
.pairs a.has-pics { display: flex; align-items: center; gap: 12px; }
.pair-pics { flex: none; display: flex; }
.pair-pics img, .pair-pics i { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid var(--bg); }
.pair-pics i { display: grid; place-items: center; font: 700 .8rem/1 var(--sans); font-style: normal; color: var(--ink-3); }
.pair-pics > :last-child { margin-inline-start: -12px; }
.pair-names { min-width: 0; }
.story-pic { margin: 18px 0 4px; }
.story-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.story-pic figcaption { margin-top: 6px; text-align: end; }
.cn-pic img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 10px; background: var(--surface-2); }



/* ---------- languages ---------- */
/* the language menu in the header: the same page in Arabic, English, Chinese or French */
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 700 .82rem/1 var(--sans); cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 17px; height: 17px; }
.lang[open] summary { color: var(--ink); border-color: var(--brand); }
.lang-list { position: absolute; z-index: 40; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -14px rgb(30 20 90 / .45); }
.lang-list a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 11px; text-decoration: none; color: var(--ink); }
.lang-list a b { font: 650 .98rem/1.2 var(--sans); }
.lang-list a small { font-size: .74rem; color: var(--ink-3); }
.lang-list a:hover { background: var(--surface-2); }
.lang-list a[aria-current] { background: color-mix(in srgb, var(--brand) 11%, transparent); }
.lang-list a[aria-current] b::after { content: " ✓"; color: var(--brand); }
@media (max-width: 420px) { .lang summary { padding: 0 9px; } }
/* one quiet line for a reader whose browser speaks another of our languages */
.lang-hint { max-width: 1180px; margin: 10px auto 0; padding: 0 16px; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.lang-hint a { flex: 1; text-decoration: none; color: var(--ink-2); padding: 9px 14px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.lang-hint a b { color: var(--brand); margin-inline-start: 6px; }
.lang-hint button { border: 0; background: none; color: var(--ink-3); font-size: 1.3rem; line-height: 1; padding: 4px 8px; cursor: pointer; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 4px; }
.foot-langs a { text-decoration: none; color: var(--ink-2); font-weight: 600; }
.foot-langs a[aria-current] { color: var(--brand); }
.name-en { display: block; margin-top: 6px; font: 500 .5em/1.2 var(--sans); color: var(--ink-3); letter-spacing: 0; }
.mast-hijri { margin-inline-start: 8px; padding-inline-start: 8px; border-inline-start: 1px solid var(--line-2); }
/* source headlines keep their own language: aligned with the page, punctuation in the right place */
.w-title[dir="auto"], .tick-roll [dir="auto"], .cn-wire strong { text-align: match-parent; unicode-bidi: plaintext; }

/* ---------- Arabic: right to left, Arabic fonts, joined letters ---------- */
/* headlines: one bold face for both scripts, so a Latin name inside an Arabic headline does not read as a second voice */
:lang(ar) :is(.mast h1, .story-h, .card-title, .t3-title, .row-title, .spot-title, .idea-title) { font-weight: 700; letter-spacing: 0; }
/* Arabic letters join; spacing between them would break the words apart */
:lang(ar) * { letter-spacing: 0 !important; text-transform: none !important; }
:lang(ar) body { font-size: clamp(1.02rem, .98rem + .22vw, 1.1rem); line-height: 1.75; }
/* headline sizes (the look section at the end of the file sets the final ones) */
:lang(ar) :is(.mast h1, .story-h, .card-title, .t3-title, .row-title, .done h2, .idea h2, .cn-head h2, .next a, .dec-term, .ev-name, .dev-top strong, .cmp-table thead th, .spot-dev h2) { line-height: 1.35; font-weight: 700; }
:lang(ar) .mast h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
:lang(ar) .mast-front h1 { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.05rem); }
:lang(ar) .story-h { font-size: clamp(1.85rem, 1.3rem + 2.3vw, 2.9rem); }
:lang(ar) .card-title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
:lang(ar) .t3-title { font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem); }
:lang(ar) .t3-lead .t3-title { font-size: clamp(1.38rem, 1.15rem + 1.1vw, 1.85rem); line-height: 1.35; }
:lang(ar) .story-dek { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.7; }
:lang(ar) .row-title { font-size: 1.25rem; }
/* small labels: a little larger and bolder, Arabic is hard to read tiny */
:lang(ar) :is(.mast-date, .sec-h, .block-h, .side-head h2, .side-k, .hm-title, .call-q, .pick-k, .cn-k, .idea-k, .t3-topic, .chip, .status, .fy-tag, .rc-kind, .dev-good span, .dev-bad span, .ev-badge, .w-flag, .tick-k, .ch-filter-k, .new-dot, .hm-label, .t3-call b, .verdict-k, .term-pop strong, .spot-k) { font-family: var(--sans); font-weight: 700; }
:lang(ar) :is(.sec-h, .block-h, .side-head h2, .side-k, .hm-title, .call-q, .pick-k, .idea-k) { font-size: .9rem; }
:lang(ar) :is(.mast-date, .t3-topic, .chip, .status, .fy-tag, .cn-k, .tick-k) { font-size: .8rem; }
:lang(ar) .hm-k { width: auto; min-width: 30px; font-size: .78rem; }
:lang(ar) .hm-big .hm-k { width: auto; min-width: 34px; font-size: .84rem; }
/* mirrored pieces: lines that grow, fades and accents that sit at the start of the line */
[dir="rtl"] .top::after { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--brand), var(--sun-a), var(--sun-b)); }
[dir="rtl"] .sections-in { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
@media (min-width: 1080px) { [dir="rtl"] .sections-in { -webkit-mask-image: none; mask-image: none; } }
[dir="rtl"] .sec-h { background-position: 100% 100%, 0 100%; }
[dir="rtl"] .side-box { background-position: 100% 0, 0 0; }
[dir="rtl"] .card::before { left: auto; right: -1px; border-radius: 4px 0 0 4px; }
[dir="rtl"] .t3-pic::after { background: linear-gradient(270deg, var(--night-b), color-mix(in srgb, var(--night-b) 50%, transparent) 14%, transparent 42%); }
[dir="rtl"] .hm-bar i { transform-origin: 100% 50%; }
[dir="rtl"] .spot-scores i { background: linear-gradient(270deg, var(--sun-b), var(--sun-a) calc(var(--v) * 10%), rgb(255 255 255 / .13) 0); }
[dir="rtl"] select { background-position: 13px 55%, 18px 55%; }
[dir="rtl"] .mo [data-spot]:not(.in) .fo-side:first-child { transform: translateX(26px); }
[dir="rtl"] .mo [data-spot]:not(.in) .fo-side:last-child { transform: translateX(-26px); }
[dir="rtl"] .sw-hint { animation-name: nudge-rtl; }
@keyframes nudge-rtl { 50% { transform: translateX(-6px); } }
/* charts read in time order from left to right, as in Arabic newspapers' graphs; numbers stay left to right */
[dir="rtl"] :is(.adm-heat-wrap, .adm-chart, .adm-months) { direction: ltr; }
[dir="rtl"] :is(.key-v, .t3-key, .hm-v, .dev-price, .fo-price, .reco-price, .cn-price, .spot-price) { unicode-bidi: isolate; }

/* ---------- Chinese: the reader's system fonts for Chinese characters, Latin stays in our fonts ---------- */
:root:lang(zh) { --sans: "Alexandria", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
:lang(zh) body { line-height: 1.75; }
:lang(zh) :is(.mast h1, .story-h, .card-title, .t3-title) { line-height: 1.3; letter-spacing: 0; }
:lang(zh) :is(.sec-h, .block-h, .side-head h2, .mast-date, .chip, .t3-topic, .fy-tag) { letter-spacing: .02em; }
/* the source's name is set left to right inside Arabic text, so its gap is given on the page's side */
[dir="rtl"] .tick-it b { margin-inline-end: 0; margin-left: 9px; }
/* small phones: the tab bar at the bottom already has «You», so the header keeps room for the language menu */
@media (max-width: 480px) { .you-btn { display: none; } .top-in { gap: 14px; } }
/* a Latin name with dashes stays whole inside Arabic text (txt() in components.mjs) */
.ltr { white-space: nowrap; unicode-bidi: isolate; }
/* phones: the source line, then the English headline on one line that ends in … on its own side */
@media (max-width: 640px) { .tick-it { display: block; } .tick-it > span[dir="auto"] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* «Popular comparisons»: the two names in the page's font, only the small «vs» is quiet */
.pairs a .pair-names { font: inherit; color: inherit; margin: 0; }
.pairs a .pair-names > span { font: 500 .8rem var(--sans); color: var(--ink-3); margin: 0 4px; }
/* small Arabic labels never under 12px */
:lang(ar) :is(.w-flag, .pic-by, .t3-credit, .spot-line b, .dev-good span, .dev-bad span, .rc-kind, .ev-badge, .cn-chip, .t3-call b, .spot-k) { font-size: max(.78rem, 12px); letter-spacing: 0; }
:lang(ar) .tabbar a { font-size: .76rem; }
[dir="rtl"] .name-en { text-align: right; }   /* the English name sits under the Arabic one */
.acct[hidden] { display: none; }
.idea-go { white-space: nowrap; }   /* the dot goes to the next line with its link */

/* ================= Look: bright violet (chosen by the owner, 2026-10-19) =================
   Violet crown edged in gold, lilac page, outlined cards with an offset shadow in the section colour, gold stickers for key numbers.
   Written as a section on top of the rules above: the doubled :root lifts it over them so it can sit at the end of the file.
   Light is the default; the moon theme follows below each block. Plain CSS, no nesting. */
/* mirrored direction helpers: gradients and hard shadows face the right way in right-to-left pages */
:root:root { --gd:90deg; --sx:1; --rot:-1.5deg; }
:root:root[dir="rtl"] { --gd:270deg; --sx:-1; --rot:1.5deg; }
/* each small card on the home page carries its topic colour (the big cards already do) */
:root:root .top3 a:has(.t3-ai) { --tc:var(--ai); }
:root:root .top3 a:has(.t3-phones) { --tc:var(--phones); }
:root:root .top3 a:has(.t3-gpus) { --tc:var(--gpus); }
:root:root .top3 a:has(.t3-chips) { --tc:var(--chips); }
:root:root .top3 a:has(.t3-robots) { --tc:var(--robots); }
:root:root .top3 a:has(.t3-wearables) { --tc:var(--wearables); }
:root:root .top3 a:has(.t3-laptops) { --tc:var(--laptops); }
:root:root .top3 a:has(.t3-home) { --tc:var(--home); }
:root:root .top3 a:has(.t3-cameras) { --tc:var(--cameras); }
:root:root .top3 a:has(.t3-drones) { --tc:var(--drones); }
:root:root .top3 a:has(.t3-next) { --tc:var(--next); }
/* section bar: every section has its own colour (the first link is «Today» in every language) */
:root:root .sections a:first-child { --sc:var(--brand); }
:root:root .sections a[href$="/ai/"] { --sc:var(--ai); }
:root:root .sections a[href$="/phones/"] { --sc:var(--phones); }
:root:root .sections a[href$="/computers/"] { --sc:var(--gpus); }
:root:root .sections a[href$="/home/"] { --sc:var(--home); }
:root:root .sections a[href$="/cameras/"] { --sc:var(--cameras); }
:root:root .sections a[href$="/next/"] { --sc:var(--next); }
/* type: one set of rules reads the size variables set per language below */
:root:root body { font-size:var(--f-body); line-height:var(--lh-body); font-weight:var(--fw-body,400); }
:root:root :is(.mast h1,.story-h,.card-title,.t3-title,.row-title,.done h2,.idea h2,.cn-head h2,.next a,.dec-term,.ev-name,.dev-top strong,.cmp-table thead th,.spot h2,.fo-side strong,.sub-title,.you-edit>summary) { font-weight:var(--fw-h); letter-spacing:var(--ls-h); line-height:var(--lh-h); }
:root:root .mast-front h1 { font-size:var(--f-h1); line-height:var(--lh-h1,var(--lh-h)); }
:root:root .mast:not(.mast-front) h1 { font-size:var(--f-h1s,var(--f-h1)); }
:root:root .story-h { font-size:var(--f-story); }
:root:root .story-dek { font-size:var(--f-sdek); line-height:var(--lh-dek); font-weight:var(--fw-dek,400); }
:root:root .card-title { font-size:var(--f-card); }
:root:root .card.is-collapsed .card-title { font-size:calc(var(--f-card) * .8); }
:root:root .card-dek { font-size:var(--f-dek); line-height:var(--lh-dek); }
:root:root .t3-title { font-size:var(--f-t3); }
:root:root .t3-lead .t3-title { font-size:var(--f-lead); line-height:var(--lh-lead,var(--lh-h)); -webkit-line-clamp:6; line-clamp:6; }
:root:root .row-title { font-size:var(--f-row); }
:root:root .spot h2 { font-size:var(--f-spot,1.7rem); }
/* small labels: one size and weight everywhere, never under 12px in Arabic */
:root:root :is(.mast-date,.sec-h,.block-h,.side-head h2,.side-k,.hm-title,.call-q,.pick-k,.cn-k,.idea-k,.t3-topic,.chip,.status,.fy-tag,.rc-kind,.dev-good span,.dev-bad span,.ev-badge,.w-flag,.tick-k,.new-dot,.hm-label,.t3-call b,.verdict-k,.term-pop strong,.spot-k,.spot-line b,.hm-k,.cn-chip,.ev-brand,.upg-k,.dev-status) { font-family:var(--lab-font,var(--sans)); font-size:var(--f-label); font-weight:var(--fw-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label,none); line-height:1.35; }
/* dates and counters: the page's own sans face, so an Arabic phrase with numbers keeps even spacing */
:root:root:lang(ar) :is(.when,.t3-when,.progress-txt,.w-meta,.tick-it time,.dev-facts,.card-n,.hm-v,.mast-date,.ev-when,.ev-exp,.ev-time,.ev-updates time,.ev-poll,.pairs a span,.spot-scores li,.reco-k,.src-list span,.dev-age,.rc-wrap .count) { font-family:var(--sans); font-variant-numeric:tabular-nums; }
:root:root .key-v, :root:root .t3-key, :root:root .spot-price, :root:root .fo-price { font-family:var(--num-font,var(--mono)); font-variant-numeric:lining-nums; }
:root:root .t3-key { font-size:var(--f-key,1.1rem); }
:root:root .t3-lead .t3-key { font-size:var(--f-key-lead); }
:root:root .key-v { font-size:var(--f-keyv,1.7rem); }
:root:root .story-top .key-v { font-size:var(--f-keyv-story,2.6rem); }
@media (min-width:720px) {
  :root:root .card-side .key-v { font-size:var(--f-keyv-side,2.1rem); }
}
/* a Latin name inside an Arabic sentence stays whole, in the same family, size and weight as the Arabic around it */
:root:root:lang(ar) .lat { text-wrap:nowrap; }
/* moon theme: light-coloured fills need dark text */
:root:root[data-theme="dark"] :is(.verdict-k,.t3-call b,.upg-k,.w-dev,.new-dot) { color:#0B0F2E; }
:root:root[data-theme="dark"] .cn-chip { color:#FF9D9D; background:color-mix(in srgb,#FF6B6B 16%,transparent); }
:root:root:not([data-theme="dark"]) .cn-chip { color:#B01F1F; }
:root:root .w-dev { background:var(--accent-ink); color:var(--bg); }
:root:root[data-theme="dark"] .w-dev { color:#0B0F2E; }
/* glossary pop-up: the small heading is gold on the dark bubble, deep amber on the pale one (moon theme) */
:root:root .term-pop strong { color:var(--sun-b); }
:root:root[data-theme="dark"] .term-pop strong { color:#7A3A00; }
@media (prefers-reduced-motion:reduce) {
  :root:root *, :root:root *::before, :root:root *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition:none!important; }
}
:root:root { --r:16px; --shadow:none; --glow-1:transparent; --glow-2:transparent; --on-gold:#1B0D52; --f-nav:.9rem; --num-font:var(--sans); }
:root:root:not([data-theme="dark"]) { --night-a:#1A0B50; --night-b:#25127E; --night-c:#331C9E; --ol:#1B0D52; --olsh:#1B0D52; --bg:#EFE8FF; --surface:#FFFFFF; --surface-2:#E3D8FB; --ink:#1B0D52; --ink-2:#43357F; --ink-3:#5E5195; --line:#D2C6F3; --line-2:#B8A8EA; --accent:#D9540C; --accent-ink:#A13D06; --hype:#B4460C; --real:#12703F; --yes:#12703F; --skip:#5E5195; --brand:#5B34C4; --brand-soft:#B79DFF; --sun-a:#FF8A2B; --sun-b:#FFC531; --ai:#5B34C4; --phones:#1463B8; --gpus:#B0276A; --chips:#86590A; --robots:#0A6E7E; --wearables:#3F6A08; --laptops:#495057; --home:#2B7A3D; --cameras:#9C5700; --drones:#095F6E; --next:#0A7285; }
:root:root[data-theme="dark"] { --night-a:#120640; --night-b:#1D0E68; --night-c:#2E1A94; --ol:#7E67E6; --olsh:#08031F; }
:root:root[data-theme="dark"], :root:root[data-theme="dark"] .on-navy:not(.t3-lead) { --bg:#170C45; --surface:#241364; --surface-2:#2F1B80; --ink:#FFF4D8; --ink-2:#E4D9F7; --ink-3:#B9A9E8; --line:#38268C; --line-2:#523CB8; --accent:#FFC531; --accent-ink:#FFC531; --hype:#FF9A52; --real:#5AD394; --yes:#5AD394; --skip:#B9A9E8; --brand:#BBA3FF; --brand-soft:#BBA3FF; --sun-a:#FF8A2B; --sun-b:#FFC531; }
/* ---------- type: Alexandria, chunky headlines ---------- */
:root:root:lang(ar) { --f-body:1.02rem; --lh-body:1.95; --fw-h:800; --ls-h:0; --lh-h:1.55; --lh-h1:1.4; --lh-lead:1.5; --lh-dek:1.9; --f-h1:clamp(1.65rem,1.2rem + 2.3vw,2.55rem); --f-h1s:clamp(1.85rem,1.35rem + 2.4vw,2.8rem); --f-story:clamp(1.75rem,1.3rem + 2.3vw,2.7rem); --f-sdek:clamp(1.05rem,.98rem + .4vw,1.25rem); --f-card:clamp(1.2rem,1.05rem + .8vw,1.55rem); --f-dek:1.02rem; --f-t3:clamp(1.02rem,.96rem + .35vw,1.18rem); --f-lead:clamp(1.38rem,1.1rem + 1.4vw,1.95rem); --f-row:1.12rem; --f-label:.8125rem; --fw-label:700; --ls-label:0; --f-key:1.2rem; --f-key-lead:clamp(2.5rem,1.8rem + 3vw,3.7rem); --f-keyv:1.8rem; --f-keyv-side:2.2rem; --f-keyv-story:clamp(2.3rem,1.8rem + 2.2vw,3.3rem); --fw-body:400; }
:root:root:lang(en), :root:root:lang(fr) { --f-body:1.02rem; --lh-body:1.72; --fw-h:800; --ls-h:-.025em; --lh-h:1.22; --lh-dek:1.65; --lh-lead:1.18; --f-h1:clamp(1.7rem,1.2rem + 2.5vw,2.7rem); --f-h1s:clamp(2rem,1.4rem + 3vw,3.1rem); --f-story:clamp(2rem,1.4rem + 3vw,3.3rem); --f-sdek:clamp(1.08rem,1rem + .45vw,1.3rem); --f-card:clamp(1.35rem,1.1rem + 1vw,1.8rem); --f-dek:1.02rem; --f-t3:clamp(1.1rem,1.03rem + .4vw,1.28rem); --f-lead:clamp(1.55rem,1.15rem + 1.8vw,2.3rem); --f-row:1.15rem; --f-label:.74rem; --fw-label:700; --ls-label:.01em; --f-key:1.2rem; --f-key-lead:clamp(2.6rem,1.9rem + 3.2vw,3.9rem); --f-keyv:1.9rem; --f-keyv-side:2.3rem; --f-keyv-story:clamp(2.4rem,1.9rem + 2.4vw,3.4rem); --fw-body:400; }
:root:root:lang(fr) { --lh-body:1.76; --lh-h:1.28; --f-label:.72rem; }
:root:root:lang(zh) { --f-body:1.05rem; --lh-body:1.9; --fw-h:800; --ls-h:.01em; --lh-h:1.42; --lh-dek:1.8; --lh-lead:1.38; --f-h1:clamp(1.75rem,1.3rem + 2.4vw,2.7rem); --f-h1s:clamp(2rem,1.45rem + 2.6vw,3rem); --f-story:clamp(1.95rem,1.45rem + 2.6vw,3.1rem); --f-sdek:clamp(1.12rem,1.03rem + .4vw,1.32rem); --f-card:clamp(1.35rem,1.15rem + .9vw,1.75rem); --f-dek:1.05rem; --f-t3:clamp(1.1rem,1.03rem + .4vw,1.28rem); --f-lead:clamp(1.5rem,1.15rem + 1.6vw,2.15rem); --f-row:1.2rem; --f-label:.78rem; --fw-label:700; --ls-label:.03em; --f-key:1.2rem; --f-key-lead:clamp(2.6rem,1.9rem + 3vw,3.8rem); --f-keyv:1.8rem; --f-keyv-side:2.2rem; --f-keyv-story:clamp(2.3rem,1.8rem + 2.2vw,3.3rem); --fw-body:400; }
:root:root body { font-family:var(--sans); }
:root:root body::before { display:none; }
/* ---------- the violet crown, edged in gold ---------- */
:root:root .top { --bg:#4A27B3; --surface:rgb(255 255 255 / .14); --surface-2:rgb(255 255 255 / .22); --ink:#fff; --ink-2:#EDE6FF; --ink-3:#D5C9FA; --line:rgb(255 255 255 / .3); --line-2:rgb(255 255 255 / .42); --brand:#FFD875; background:linear-gradient(100deg,#4524B0 0%,#5B34C4 55%,#7448E6 100%); color:var(--ink); border-bottom:4px solid var(--sun-b); backdrop-filter:none; -webkit-backdrop-filter:none; }
:root:root .top::after { bottom:-4px; height:4px; background:var(--on-gold); }
:root:root .top-in { height:64px; }
:root:root .brand { font-weight:800; letter-spacing:-.03em; font-size:1.4rem; }
:root:root .brand em { color:var(--sun-b); }
:root:root .nav a { color:#EDE6FF; font-weight:700; border-radius:10px; }
:root:root .nav a:hover { background:rgb(255 255 255 / .16); color:#fff; }
:root:root .nav a[aria-current] { background:rgb(255 255 255 / .2); color:#fff; box-shadow:none; }
:root:root .you-btn { background:var(--sun-b); color:var(--on-gold); border:2px solid var(--on-gold); border-radius:12px; box-shadow:calc(var(--sx) * 3px) 3px 0 var(--on-gold); font-weight:800; }
:root:root .you-btn:hover { background:#FFD35A; transform:none; }
:root:root .you-dot { background:var(--on-gold); box-shadow:none; }
:root:root .theme-btn, :root:root .lang summary { border-radius:12px; border:2px solid rgb(255 255 255 / .5); background:rgb(255 255 255 / .12); }
:root:root .lang[open] summary { border-color:var(--sun-b); }
:root:root .lang-list { --surface:#fff; --surface-2:#EFE8FF; --ink:#1B0D52; --ink-2:#43357F; --ink-3:#5E5195; --line-2:#B8A8EA; --brand:#5B34C4; background:#fff; color:var(--ink); border:2px solid var(--on-gold); border-radius:14px; box-shadow:calc(var(--sx) * 4px) 4px 0 var(--on-gold); }
:root:root .lang-list a { border-radius:10px; }
/* section bar: sticker tabs, each with a square dot in its section colour */
:root:root .sections { background:var(--bg); border-bottom:2px solid var(--ol); }
:root:root .sections-in { padding-block:4px; }
:root:root .sections a { display:inline-flex; align-items:center; gap:7px; margin:5px 3px; padding:6px 13px; border:2px solid transparent; border-radius:10px; color:var(--ink-2); font-weight:700; font-size:var(--f-nav); }
:root:root .sections a::before { content:""; width:9px; height:9px; border-radius:3px; background:var(--sc,var(--brand)); border:1.5px solid var(--ol); flex:none; }
:root:root .sections a:hover { color:var(--ink); background:var(--surface-2); }
:root:root .sections a[aria-current] { color:var(--on-gold); background:var(--sun-b); border-color:var(--ol); box-shadow:calc(var(--sx) * 3px) 3px 0 var(--olsh); }
:root:root .sections a[aria-current]::after { display:none; }
/* ---------- masthead ---------- */
:root:root .mast-front h1::after { content:""; display:block; width:104px; height:10px; margin-top:12px; border:2px solid var(--ol); border-radius:5px; background:repeating-linear-gradient(-45deg,var(--sun-b) 0 7px,var(--ol) 7px 11px); }
:root:root .tick { background:var(--surface); border:2px solid var(--ol); border-radius:16px; box-shadow:calc(var(--sx) * 4px) 4px 0 var(--olsh); backdrop-filter:none; -webkit-backdrop-filter:none; }
:root:root .tick:hover { border-color:var(--ol); }
:root:root .tick-k { background:var(--sun-b); color:var(--on-gold); border:2px solid var(--ol); border-radius:8px; padding:3px 8px; }
:root:root .tick-k .live { background:var(--on-gold); }
/* ---------- today's three ---------- */
:root:root .top3 a { border:2px solid var(--ol); border-radius:18px; box-shadow:calc(var(--sx) * 5px) 5px 0 var(--tc,var(--olsh)); }
:root:root .top3 li:not(.t3-lead) a:hover { transform:none; border-color:var(--ol); box-shadow:calc(var(--sx) * 7px) 7px 0 var(--tc,var(--olsh)); }
:root:root .t3-n { -webkit-text-stroke:0; color:var(--sun-b); background:#1B0D52; width:1.55em; height:1.55em; display:grid; place-items:center; border-radius:10px; font-size:1.2rem; font-weight:800; line-height:1; padding:0; padding-top:0; }
:root:root .top3 a:hover .t3-n { -webkit-text-stroke:0; }
:root:root .t3-thumb { border-radius:12px; border:2px solid var(--ol); }
:root:root .t3-key { background:var(--sun-b); color:var(--on-gold); border:2px solid var(--ol); border-radius:9px; padding:.02em .28em; font-weight:900; transform:rotate(var(--rot)); }
:root:root .t3-call b { border-radius:8px; }
/* the lead: a gold poster slab; the key number rides on an ink sticker */
:root:root .top3 .t3-lead a { --bg:#FFC531; --surface:#fff; --ink:#1B0D52; --ink-2:#3A2870; --ink-3:#4D3A8C; --accent-ink:#8A2E00; --real:#12703F; --hype:#A83E06; --skip:#4D3A8C; --chips:#7A4F00; --home:#12703F; --ai:#4A22B0; --phones:#0E57A8; --gpus:#A3205F; --robots:#08626F; --wearables:#365F06; --laptops:#3F454C; --cameras:#8A4A00; --drones:#085462; --next:#08666F; background:var(--sun-b); color:var(--ink); border:2px solid var(--ol); border-radius:22px; box-shadow:calc(var(--sx) * 8px) 8px 0 var(--olsh); }
:root:root .top3 .t3-lead a::before { display:none; }
:root:root .top3 .t3-lead a::after { display:none; }
:root:root .top3 .t3-lead a:hover { transform:none; box-shadow:calc(var(--sx) * 10px) 10px 0 var(--olsh); }
:root:root .t3-pic { border-bottom:3px solid var(--ol); }
:root:root .t3-pic::after { display:none; }
@media (min-width:641px) {
  :root:root .t3-pic { border-bottom:0; border-inline-start:3px solid var(--ol); }
}
:root:root .t3-lead .t3-topic { color:var(--on-gold); background:#fff; border:2px solid var(--ol); border-radius:8px; padding:2px 9px; }
:root:root .t3-lead .t3-when { color:var(--ink-2); }
:root:root .t3-lead .t3-key { background:var(--on-gold); color:var(--sun-b); filter:none; -webkit-background-clip:border-box; background-clip:border-box; border:0; border-radius:14px; padding:.02em .26em; box-shadow:calc(var(--sx) * 5px) 5px 0 var(--brand); font-weight:900; letter-spacing:-.02em; }
:root:root .t3-lead .t3-key-l { color:var(--ink-2); font-weight:600; }
:root:root .t3-lead .t3-call b { color:#fff; }
:root:root .t3-lead .t3-call span { color:var(--ink); }
:root:root .t3-lead .t3-main { padding:22px 24px 26px; }
/* ---------- briefs ---------- */
:root:root .card { border:2px solid var(--ol); border-radius:20px; box-shadow:calc(var(--sx) * 6px) 6px 0 var(--tc,var(--olsh)); }
:root:root .card::before { display:none; }
:root:root .card:hover { border-color:var(--ol); box-shadow:calc(var(--sx) * 8px) 8px 0 var(--tc,var(--olsh)); }
:root:root .card-n { font-weight:900; color:var(--ink); opacity:.35; }
:root:root .card-pic { border-radius:18px 18px 0 0; border-bottom:2px solid var(--ol); }
@media (min-width:720px) {
  :root:root .card-pic { border-radius:14px; border:2px solid var(--ol); }
}
:root:root .chip { background:color-mix(in srgb,var(--c) 14%,#fff); color:var(--on-gold); border:2px solid var(--ol); border-radius:8px; padding:2px 9px 2px 7px; }
:root:root .chip::before { width:8px; height:8px; border-radius:2px; border:1.5px solid var(--ol); }
:root:root .status-rumor { border-radius:8px; }
:root:root .new-dot { border-radius:8px; border:2px solid var(--ol); color:var(--on-gold); }
:root:root .key { background:var(--sun-b); border:2px solid var(--ol); border-radius:16px; --ink-2:#3A2870; box-shadow:calc(var(--sx) * 5px) 5px 0 var(--olsh); }
:root:root .key::before { display:none; }
:root:root .key-v { color:var(--on-gold); font-weight:900; }
:root:root .key-l { color:#3A2870; font-weight:600; }
:root:root .fy { background:color-mix(in srgb,var(--sun-b) 16%,var(--surface)); border:2px solid var(--ol); border-radius:14px; }
:root:root .fy.is-yes { background:color-mix(in srgb,var(--real) 10%,var(--surface)); border-color:var(--ol); }
:root:root .fy.is-skip { background:transparent; border-style:dashed; }
:root:root .hm-card, :root:root .verdict, :root:root .dev-mini, :root:root .cmp-pick { border:2px solid var(--ol); border-radius:16px; box-shadow:calc(var(--sx) * 4px) 4px 0 var(--olsh); }
:root:root .hm-bar { height:12px; border:2px solid var(--ol); border-radius:8px; background:var(--surface-2); }
:root:root .hm-bar i { border-radius:0; }
:root:root .hm-hype i { background:var(--sun-a); }
:root:root .hm-real i { background:var(--real); }
:root:root .hm-label { border:2px solid currentColor; border-radius:10px; font-weight:800; }
:root:root .verdict-k { border-radius:9px; }
:root:root .receipts a { border:2px solid var(--ol); border-radius:12px; }
:root:root .rc-kind { border-radius:6px; }
:root:root :is(.byline,.hm-legal,.ai-note,.report-err,.sub-note,.fy-device,.lead,.facts) a { font-weight:700; color:var(--ink); text-decoration-color:var(--sun-b); text-decoration-thickness:4px; text-underline-offset:3px; }
:root:root .hello { border:2px dashed var(--ol); border-radius:16px; background:color-mix(in srgb,var(--sun-b) 16%,var(--surface)); }
/* buttons and filters: chunky, they press down */
:root:root .btn { background:var(--brand); color:#fff; border:2px solid var(--ol); border-radius:12px; font-weight:800; box-shadow:calc(var(--sx) * 4px) 4px 0 var(--olsh); transition:transform .12s,box-shadow .12s; }
:root:root .btn:hover { transform:translate(calc(var(--sx) * -1px),-1px); box-shadow:calc(var(--sx) * 5px) 5px 0 var(--olsh); }
:root:root .btn:active { transform:translate(calc(var(--sx) * 3px),3px); box-shadow:0 0 0 var(--olsh); }
:root:root .btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--ol); }
:root:root .btn-ghost:hover { background:color-mix(in srgb,var(--sun-b) 40%,var(--surface)); }
:root:root .filters button, :root:root .seg button, :root:root .fy-tabs button, :root:root .hello-chips button, :root:root .call-btns button, :root:root .rc-wrap summary, :root:root .act, :root:root .simple-btn, :root:root .card-link { border:2px solid var(--ol); border-radius:12px; font-weight:700; background:var(--surface); }
:root:root .filters button[aria-pressed="true"], :root:root .seg button[aria-pressed="true"], :root:root .fy-tabs button[aria-selected="true"] { background:var(--on-gold); border-color:var(--ol); color:var(--sun-b); }
:root:root .filters button:hover, :root:root .seg button:hover, :root:root .act:hover, :root:root .rc-wrap:not([open]) summary:hover { background:color-mix(in srgb,var(--sun-b) 45%,var(--surface)); color:var(--ink); border-color:var(--ol); }
:root:root .filters button[aria-pressed="true"]:hover, :root:root .seg button[aria-pressed="true"]:hover { background:var(--on-gold); color:var(--sun-b); }
:root:root .rc-wrap[open] summary { background:var(--on-gold); color:var(--sun-b); border-color:var(--ol); }
/* ---------- rules ---------- */
:root:root .sec-h { background:none; border-bottom:3px solid var(--ol); padding-bottom:9px; color:var(--ink); }
:root:root .sec-h::before { content:""; display:inline-block; width:11px; height:11px; margin-inline-end:8px; border:2px solid var(--ol); border-radius:3px; background:var(--sun-b); vertical-align:-1px; }
:root:root .side-box { background:none; border-top:3px solid var(--ol); padding-top:12px; }
:root:root .side-head h2 { color:var(--ink); }
:root:root .row-story { border-bottom:2px dotted var(--line-2); }
:root:root .done { border:2px solid var(--ol); border-radius:22px; box-shadow:calc(var(--sx) * 6px) 6px 0 var(--sun-b); }
/* ---------- dark blocks: deep violet with a gold offset ---------- */
:root:root .spot, :root:root .vs-hero { --ink-3:#C0BBEA; border:2px solid var(--ol); border-radius:22px; box-shadow:calc(var(--sx) * 6px) 6px 0 var(--sun-b); }
:root:root .idea { border:2px solid var(--ol); border-radius:22px; background:var(--surface); box-shadow:calc(var(--sx) * 5px) 5px 0 var(--olsh); }
:root:root .cn-card { border:2px solid var(--ol); border-radius:16px; }
:root:root .spot-go a.spot-btn, :root:root .fo-vs { box-shadow:none; }
:root:root .foot { background:#1A0B50; border-top:4px solid var(--sun-b); }
:root:root .foot::before { display:none; }
/* ---------- phone tab bar: a sticker; the open tab is the gold one ---------- */
:root:root .tabbar { background:var(--surface); border:2px solid var(--ol); border-radius:20px; box-shadow:calc(var(--sx) * 4px) 4px 0 var(--olsh); backdrop-filter:none; -webkit-backdrop-filter:none; }
:root:root .tabbar a { color:var(--ink-2); border-radius:14px; font-weight:700; }
:root:root .tabbar a[aria-current] { color:var(--on-gold); background:var(--sun-b); box-shadow:inset 0 0 0 2px var(--ol); }
:root:root .tabbar a[aria-current] svg { color:var(--on-gold); }

/* ---------- new AI models (home section, /models/ and one page per day) ---------- */
.md-home { margin: 34px 0 10px; }
.md-head .sec-h { margin-bottom: 6px; }
.md-sub { margin: 0 0 14px; color: var(--ink-2); font-size: .95rem; }
.md-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .md-home .md-list { grid-template-columns: 1fr 1fr; } }
.md-card { --mc: var(--ai); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; background: var(--surface); border: 2px solid var(--ol, var(--line-2)); border-radius: 18px; box-shadow: calc(var(--sx, 1) * 5px) 5px 0 var(--mc); }
.md-image, .md-edit, .md-three { --mc: var(--gpus); }
.md-video { --mc: var(--phones); }
.md-tts, .md-asr, .md-audio { --mc: var(--home); }
.md-cut, .md-robot { --mc: var(--robots); }
.md-embed, .md-translate { --mc: var(--next, var(--ai)); }
.md-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8rem; color: var(--ink-3); }
.md-type { font-weight: 700; color: #fff; background: var(--mc); padding: 4px 10px; border-radius: 999px; }
.md-org { font-weight: 600; color: var(--ink-2); }
.md-day { margin-inline-start: auto; font-weight: 600; }
.md-name { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.3; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; text-align: start; }
[dir="rtl"] .md-name { text-align: right; }
.md-sum { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.md-points { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; font-size: .92rem; color: var(--ink); }
.md-need { margin: 2px 0 0; padding: 9px 11px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; line-height: 1.55; }
.md-need-k { display: inline-block; font-weight: 800; color: var(--ink); margin-inline-end: 6px; }
.md-eg { color: var(--ink-2); }
.md-eg a { font-weight: 700; color: var(--brand); }
.md-or { display: block; color: var(--ink-2); font-size: .85rem; }
.md-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .8rem; font-weight: 700; }
.md-facts span { padding: 4px 9px; border-radius: 8px; border: 1.5px solid var(--line-2); color: var(--ink-2); }
.md-lic-open { color: var(--yes) !important; border-color: color-mix(in srgb, var(--yes) 45%, transparent) !important; }
.md-lic-nc { color: var(--hype) !important; border-color: color-mix(in srgb, var(--hype) 45%, transparent) !important; }
.md-ar { color: var(--brand) !important; border-color: color-mix(in srgb, var(--brand) 40%, transparent) !important; }
.md-get { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; font-weight: 800; font-size: .92rem; text-decoration: none; color: var(--on-gold, #1B0D52); background: var(--sun-b); border: 2px solid var(--ol, transparent); }
.md-get:hover { filter: brightness(1.05); }
.md-all { display: inline-block; margin-top: 16px; font-weight: 800; color: var(--brand); text-decoration: none; }
.md-page .md-list-full { margin-top: 8px; }
.md-note { margin-top: 18px; }
.md-pn { display: flex; justify-content: space-between; margin: 20px 0 6px; font-weight: 700; }
.md-pn a { color: var(--brand); text-decoration: none; }
.md-days { margin-top: 26px; }
.md-days ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.md-days a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.md-days a[aria-current] { font-weight: 800; color: var(--brand); }
.md-days b { font-variant-numeric: tabular-nums; color: var(--ink-3); }
:root[data-theme="dark"] .md-type { color: #0B0F2E; }
.md-daybox { margin-top: 26px; }
.md-daybox .sec-h a { color: inherit; text-decoration: none; }
.md-count { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
/* the home page keeps model cards short: the three points are on /models/ */
.md-home .md-points, .md-home .md-facts { display: none; }

/* ---------- the big strip of new AI models on the home page ---------- */
.ms { margin: 30px 0 8px; }
.ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ms-head .sec-h { flex: 1; margin-bottom: 6px; }
.ms-all { flex: none; font-weight: 800; font-size: .9rem; color: var(--brand); text-decoration: none; }
.ms-sub { margin: 0 0 12px; color: var(--ink-2); font-size: .95rem; }
.ms-track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 4px 16px; margin: 0 -4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ms-track::-webkit-scrollbar { display: none; }
.ms-track:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ms-list { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; flex: none; }
.ms-copy { display: none; }
.ms.is-moving .ms-copy { display: flex; }
.ms-card { --mc: var(--ai); width: 290px; min-height: 250px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 20px; border: 2px solid var(--ol, var(--line-2)); background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 16%, var(--surface)), var(--surface) 62%); box-shadow: calc(var(--sx, 1) * 5px) 5px 0 var(--mc); color: var(--ink); text-decoration: none; transition: transform .2s ease; }
.ms-card:hover { transform: translateY(-3px); }
@media (min-width: 900px) { .ms-card { width: 330px; min-height: 260px; } }
.ms-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; }
.ms-day { color: var(--ink-3); font-weight: 600; }
.ms-name { font-size: 1.3rem; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; text-align: start; }
[dir="rtl"] .ms-name, [dir="rtl"] .ms-org { text-align: right; }
.ms-org { margin-top: -4px; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.ms-line { flex: 1; font-size: .95rem; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ms-need { font-size: .84rem; line-height: 1.5; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--mc) 10%, var(--surface-2)); }
.ms-need b { margin-inline-end: 4px; }
.ms-card.md-image, .ms-card.md-edit, .ms-card.md-three { --mc: var(--gpus); }
.ms-card.md-video { --mc: var(--phones); }
.ms-card.md-tts, .ms-card.md-asr, .ms-card.md-audio { --mc: var(--home); }
.ms-card.md-cut, .ms-card.md-robot { --mc: var(--robots); }
.ms-card.md-embed, .ms-card.md-translate { --mc: var(--next, var(--ai)); }
@media (prefers-reduced-motion: reduce) { .ms-card { transition: none; } }