/* samueljrobie.com: shared styles for every page. Black and white: dark (black page, white text) unless the visitor
   flips the switch in the header (html[data-theme]); the accent colours come from the home page's theme. */
:root {
  --bg: #ffffff; --card: #f5f5f5; --ink: #000000; --muted: #595959; --line: #e0e0e0;
  --accent: var(--accent-light, #000000); --accent-ink: #ffffff; --bad: #b3261e; --top: rgba(255, 255, 255, .88);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] { --bg: #000000; --card: #0e0e0e; --ink: #ffffff; --muted: #a6a6a6; --line: #262626; --accent: var(--accent-dark, #ffffff); --accent-ink: #000000; --bad: #ff8a80; --top: rgba(0, 0, 0, .85); color-scheme: dark; }
[data-theme="dark"] .ink { filter: invert(1) brightness(.92); }


* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
img { max-width: 100%; }
main { flex: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 16px 48px; }
.wrap.narrow { max-width: 760px; }

/* ---------- header + menu ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--top); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: block; line-height: 0; flex: none; }
.brand img { height: 42px; width: auto; }
.brand .wordmark { display: inline-block; line-height: 1; font: 800 1.15rem/1 var(--display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
/* light / dark switch, always the last thing on the right of the header */
.themeBtn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.themeBtn:hover { background: var(--card); }
.themeBtn svg { width: 19px; height: 19px; grid-area: 1 / 1; }
.themeBtn .icMoon, [data-theme="dark"] .themeBtn .icSun { display: block; }
.themeBtn .icSun, [data-theme="dark"] .themeBtn .icMoon { display: none; }
.menu { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.menu a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.menu a:hover { background: var(--card); }
.menu a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.menuToggle { position: absolute; opacity: 0; pointer-events: none; }
.menuBtn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menuBtn span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.menuToggle:focus-visible + .menuBtn { outline: 2px solid var(--accent); }
/* tablets: the full row of links only just fits, so it tightens up; narrower than 900px the ☰ menu takes over
   (a wrapped two-line header used to push the page down and hide the sticky music bar) */
@media (max-width: 1100px) {
  .menu { gap: 0; }
  .menu a { padding: 7px 9px; font-size: .9rem; }
}
@media (max-width: 900px) {
  .menuBtn { display: flex; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 12px 14px; }
  .menuToggle:checked ~ .menu { display: flex; }
  .menu a { padding: 12px 14px; }
  .brand img { height: 36px; }
}

/* ---------- type ---------- */
h1, h2 { text-wrap: balance; }
.pageTitle { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.03em; line-height: 1; margin: 8px 0 18px; }
.eyebrow { font-family: var(--display); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }
.lead { color: var(--muted); font-size: 1.1rem; margin: -6px 0 22px; max-width: 60ch; }
.meta { color: var(--muted); font-size: .88rem; }
.note { color: var(--muted); font-size: .9rem; border-left: 3px solid var(--accent); padding: 4px 10px; }
.empty { color: var(--muted); padding: 30px 0; }
.badge { display: inline-block; font: 700 .7rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; vertical-align: middle; }
.badge.private { background: var(--ink); color: var(--bg); }
.badge.beat { background: var(--accent); color: var(--accent-ink); margin-right: 4px; }
.ownerBadge { color: var(--accent); font-weight: 700; }
.tag { color: var(--accent); font-size: .85em; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; font: 600 .95rem var(--body); padding: 10px 18px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost:hover { background: var(--card); }

/* ---------- home hero ---------- */
.page-home main { display: flex; flex-direction: column; }
/* home page blocks (dashboard → Website → Home) */
.hb { width: 100%; }
.hb.bg-card { background: var(--card); border-block: 1px solid var(--line); }
.hb.bg-invert { background: var(--ink); color: var(--bg); --ink: var(--bg); --muted: color-mix(in srgb, var(--bg) 70%, transparent); --card: color-mix(in srgb, var(--bg) 8%, transparent); --line: color-mix(in srgb, var(--bg) 22%, transparent); }
.hb.bg-invert .btn.primary { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.hb .wrap { padding-block: 40px; }
.hbHead { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.025em; line-height: 1.05; margin: 0 0 16px; }
.hbText .prose { font-size: 1.08rem; }
.hbText .prose > :first-child { margin-top: 0; }
.hbText.center { text-align: center; }
/* a text block in a frame: a bordered box in the middle of the page */
.hbText.framed .hbTextIn { margin: 0 auto; max-width: 680px; border: 2px solid var(--ink); border-radius: 22px; padding: 28px clamp(18px, 4vw, 40px); background: var(--card); }
.hbVideos, .hbPhotos { scroll-margin-top: 72px; }   /* /#videos lands below the sticky header */
.hbImage { margin: 0 auto; }
.hbImage img { display: block; width: 100%; height: auto; border-radius: 16px; }
.hbImage.w-full img { border-radius: 0; }
.hbImage figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; text-align: center; }
.hbButtons { display: flex; flex-wrap: wrap; gap: 10px; }
.hbButtons.center { justify-content: center; }
.grid.cards.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.grid.cards.cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.hbCards .excerpt p { margin: 0 0 6px; }
.hbFrame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--card); }
.hbFrame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hbSpacer.s-small { height: 16px; } .hbSpacer.s-medium { height: 40px; } .hbSpacer.s-large { height: 88px; }
.hbSpacer { display: flex; align-items: center; } .hbSpacer hr { width: min(1128px, calc(100% - 32px)); margin: 0 auto; border: 0; border-top: 1px solid var(--line); }
.hero.h-tall { min-height: 70vh; min-height: 70svh; } .hero.h-short { min-height: 42vh; min-height: 42svh; }
.hero { position: relative; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; overflow: hidden; background: #111; isolation: isolate; }
.hero.noPhoto { background: radial-gradient(120% 120% at 20% 10%, #3a3a3a, #000 70%); }
.heroImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: heroIn 1.4s ease-out both; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,var(--shade))), rgba(0,0,0,calc(var(--shade) * .45)); }
@keyframes heroIn { from { transform: scale(1.06); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .heroImg { animation: none; } }
.overlay { margin: 32px; max-width: 560px; color: #fff; padding: 26px 28px; border-radius: 22px; align-self: flex-end; }
.overlay.style-glass { background: rgba(0, 0, 0, .38); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.18); }
.overlay.style-solid { background: rgba(0, 0, 0, .86); }
.overlay.style-none { background: none; padding: 0; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
/* no photo: the title sits right on the page (page colours, follows light/dark), no shadow */
.hero.noPhoto { background: var(--bg); }
.hero.noPhoto .overlay { color: var(--ink); }
.hero.noPhoto .overlay.style-none { text-shadow: none; }
.hero.noPhoto .overlay .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hero.noPhoto .overlay .btn.ghost { color: var(--ink); border-color: var(--ink); }
.hero.noPhoto .overlay .btn.ghost:hover { background: var(--card); }
.hero.noPhoto .overlay .desc a { color: var(--ink); }
.overlay.pos-center.style-none { max-width: 900px; }
/* centred home page: headings, grids and galleries in the middle */
.home.centered .hbHead { text-align: center; }
main.home.centered .wrap .grid.feed, main.home.centered .wrap .grid.cards { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; }
main.home.centered .wrap .grid.cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 480px)); }
main.home.centered .wrap .grid.cards.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 260px)); }
.home.centered .masonry { columns: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.home.centered .masonry .tile { width: min(100%, 300px); margin: 0; }
.home.centered .hbButtons { justify-content: center; }
.overlay.pos-top-left { align-self: flex-start; } .overlay.pos-top-center { align-self: flex-start; margin-inline: auto; text-align: center; } .overlay.pos-top-right { align-self: flex-start; margin-left: auto; }
.overlay.pos-center { align-self: center; margin-inline: auto; text-align: center; } .overlay.pos-center-left { align-self: center; } .overlay.pos-center-right { align-self: center; margin-left: auto; }
.overlay.pos-bottom-left { align-self: flex-end; } .overlay.pos-bottom-center { align-self: flex-end; margin-inline: auto; text-align: center; } .overlay.pos-bottom-right { align-self: flex-end; margin-left: auto; }
.overlay[class*="center"] .btns { justify-content: center; }
.overlay h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: .95; letter-spacing: -.035em; margin: 0 0 10px; }
.overlay .sub { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; opacity: .95; }
.overlay .desc { font-size: 1.02rem; opacity: .92; }
.overlay .desc p { margin: 0 0 8px; }
.overlay .desc a { color: #fff; }
.overlay .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.overlay .btn.ghost { color: #fff; border-color: rgba(255,255,255,.85); }
.overlay .btn.ghost:hover { background: rgba(255,255,255,.12); }
.overlay .btn.primary { background: #fff; border-color: #fff; color: #000; }
@media (max-width: 600px) { .overlay { margin: 16px; padding: 20px; } }

/* ---------- cards / feeds ---------- */
.grid { display: grid; gap: 18px; }
.grid.feed, .grid.cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* the Videos grid shares the class "feed" with the Stories feed (.feed below): keep Stories' width, padding and flex
   column off it so the cards line up with the page title and the shows row */
.grid.feed { display: grid; max-width: none; margin: 0; padding: 0; }
.grid.posts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--line); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.ph { display: grid; place-items: center; font-size: 2.4rem; color: var(--muted); }
.play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0,0,0,.55); }
.play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.src { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.cardBody { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.cardTitle { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.excerpt { color: var(--muted); font-size: .93rem; }
.latest .eyebrow { margin-top: 8px; }

/* photo feed */
.masonry { columns: 3 260px; column-gap: 14px; }
.tile { position: relative; display: block; margin: 0 0 14px; break-inside: avoid; border-radius: 14px; overflow: hidden; background: var(--line); color: #fff; text-decoration: none; }
.tile img { display: block; width: 100%; height: auto; transition: transform .3s; }
.tile:hover img { transform: scale(1.03); }
.tileCap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.65)); font-weight: 600; opacity: 0; transition: opacity .2s; }
.tile:hover .tileCap, .tile:focus-visible .tileCap { opacity: 1; }
@media (hover: none) { .tileCap { opacity: 1; } }
.noPreview { display: grid; place-items: center; min-height: 160px; color: var(--muted); font-weight: 700; text-align: center; padding: 20px; }
.noPreview.big { min-height: 40vh; }

/* ---------- detail pages ---------- */
.detail .crumbs { margin-bottom: 14px; font-weight: 600; }
.crumbs a { text-decoration: none; }
.player { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.player video { display: block; width: 100%; max-height: 78vh; background: #000; }
.player.yt { aspect-ratio: 16 / 9; }
.player.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer { margin: 0; border-radius: 16px; overflow: hidden; background: var(--card); display: grid; place-items: center; }
.viewer img { display: block; max-height: 80vh; width: auto; max-width: 100%; }
[data-fs-target]:fullscreen { background: #000; display: grid; place-items: center; border-radius: 0; }
[data-fs-target]:fullscreen img, [data-fs-target]:fullscreen video { max-height: 100vh; max-width: 100vw; }
.detailHead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; }
.detailHead h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.3rem); letter-spacing: -.02em; line-height: 1.1; }
.detail > h1 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (pointer: coarse) { .showPage .actions .btn { min-height: 44px; } }   /* show page on a phone: big enough to tap (Renew links / Stop renewing) */
.cover { width: 100%; border-radius: 16px; max-height: 360px; object-fit: cover; }
.prevNext { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 16px; }
.prevNext a { font-weight: 600; text-decoration: none; max-width: 48%; }

/* prose (descriptions, posts, notes) */
.prose { max-width: 72ch; font-size: 1.04rem; }
.prose.small { font-size: .95rem; color: var(--muted); }
.prose img, .prose video { border-radius: 10px; display: block; margin: 12px 0; }
.prose pre { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: .88rem; }
.prose code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; }
.prose :not(pre) > code { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.prose blockquote { margin: 12px 0; padding: 4px 14px; border-left: 3px solid var(--line); color: var(--muted); }
.prose .tableWrap { overflow-x: auto; }
.prose table { border-collapse: collapse; } .prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.prose li.task { list-style: none; margin-left: -1.2em; }
.prose mark { background: #ffe66d; color: #121614; padding: 0 2px; }
.callout { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--card); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.callout-title { font-weight: 700; margin-bottom: 4px; }
.callout-warning, .callout-caution, .callout-danger { border-left-color: var(--bad); }
.wikilink { text-decoration: underline dotted; } .wikilink.missing { color: var(--muted); }
.files ul { list-style: none; padding: 0; } .files li { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* blog notes tree */
.folder { margin: 0 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.folder summary { font-weight: 700; cursor: pointer; }
.folder ul { margin: 8px 0 2px; padding-left: 18px; columns: 2 220px; }
.folder li { padding: 2px 0; break-inside: avoid; }

/* ---------- demos + scoreboard ---------- */
.board { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 6px 20px 18px; margin-bottom: 26px; }
.extremes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.extremes div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(80px, 160px) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ranking li:last-child { border-bottom: 0; }
.rank { font-family: var(--display); font-weight: 800; color: var(--muted); }
.ranking li:first-child .rank { color: var(--accent); }
.ranking a { font-weight: 600; text-decoration: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreBar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.scoreBar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.scoreBar.neg i { background: var(--bad); }
.nums { font-size: .88rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .ranking li { grid-template-columns: 26px minmax(0, 1fr) auto; } .scoreBar { display: none; } }
.demos { display: grid; gap: 14px; }
.demo { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; scroll-margin-top: 90px; }
.demo:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.demoHead { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.demo h2 { margin: 0; font-size: 1.15rem; } .demo h2 a { color: inherit; text-decoration: none; }
.demo audio { width: 100%; margin: 10px 0; }
.vote { display: flex; gap: 8px; flex-wrap: wrap; }
.voteBtn { font: 600 .9rem var(--body); display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.voteBtn.up.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.voteBtn.down.on { border-color: var(--bad); background: var(--bad); color: #fff; }
.voteBtn:disabled { opacity: .6; cursor: wait; }

/* ---------- links ---------- */
.links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.links li { border-bottom: 1px solid var(--line); }
.links a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 4px; color: inherit; text-decoration: none; border-radius: 8px; transition: background .15s, padding .15s; }
.links a:hover { background: var(--card); padding-inline: 12px; }
.badge-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.badge-ic svg { width: 22px; height: 22px; }
.links .name { display: block; font-weight: 600; font-size: 1.05rem; }
.links .handle { display: block; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrow { color: var(--muted); font-size: 1.2rem; }
.project { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; }
.project:hover { border-color: var(--accent); }
.project .t { font-weight: 600; font-size: 1.05rem; } .project .t span { font-weight: 500; color: var(--muted); margin-left: 6px; }
.project .d { grid-column: 1; color: var(--muted); font-size: .9rem; } .project .arrow { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- footer ---------- */
.foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }
.foot .banner { width: min(100%, 260px); height: auto; opacity: .9; }
.foot a { color: var(--muted); }

/* ---------- donate (Venmo) ---------- */
.donateBox { border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.venmoHead { display: flex; align-items: center; gap: 12px; }
.venmoHead b { display: block; font-family: var(--display); font-size: 1.1rem; }
.venmoHead .handle { color: var(--muted); }
.venmoMark { width: 44px; height: 44px; border-radius: 12px; background: #008cff; color: #fff; display: grid; place-items: center; font: 800 1.4rem var(--display); }
.amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.amt { display: grid; place-items: center; min-height: 54px; border-radius: 14px; background: #008cff; color: #fff; font: 800 1.2rem var(--display); text-decoration: none; transition: transform .12s; }
.amt:hover { transform: translateY(-2px); }
.amt.other { grid-column: 1 / -1; min-height: 46px; background: transparent; color: var(--ink); border: 2px solid #008cff; font-size: .95rem; font-family: var(--body); }
.donatePage .small { color: var(--muted); font-size: .9rem; margin: 0; }
.donatePage .raised { margin: 0; font-weight: 700; color: var(--accent); }

/* donate page: centered column */
.donatePage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.donatePage .lead { margin-inline: auto; }
.donatePage .donateBox { width: 100%; margin-inline: auto; text-align: left; }
.donatePage .amounts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.donatePage .amt{flex:1 1 96px;}
.donatePage .amt.other{flex-basis:100%;}

/* fullscreen: real fullscreen keeps the photo/video whole; the phone fallback viewer covers the screen */
[data-fs-target]:fullscreen, [data-fs-target]:-webkit-full-screen { background: #000; display: grid; place-items: center; width: 100vw; height: 100vh; margin: 0; border-radius: 0; }
[data-fs-target]:fullscreen img, [data-fs-target]:-webkit-full-screen img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; }
.fsView { position: fixed !important; inset: 0; z-index: 1000; background: #000; display: grid; place-items: center; margin: 0 !important; border-radius: 0 !important; max-width: none !important; width: 100vw; height: 100vh; height: 100dvh; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.fsView img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fsClose { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 1001; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #000; font-size: 28px; line-height: 1; cursor: pointer; }
body.fsOpen { overflow: hidden; }
.noteSearch{width:100%;max-width:420px;margin:0 0 16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;}
.ownerCard .cardTitle{font-family:var(--display);}
.toolCard{display:flex;flex-direction:column;gap:6px;min-width:0;}
.toolCard>.card{flex:1;}
.toolPub{align-self:flex-start;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer;}
.toolPub.on{border-color:currentColor;font-weight:600;}
.toolPub:disabled{opacity:.6;cursor:wait;}
.toolHelp{margin:-4px 0 12px;}

/* ---------- Notes: Obsidian-style interface, clean theme (follows light/dark) ---------- */
.obsBody{
  --o-bg:#fbfbf9;--o-side:#f3f4f1;--o-rib:#eceee9;--o-line:#e2e5df;--o-ink:#1c211e;--o-muted:#66706a;--o-faint:#98a09b;--o-hover:#e9ece6;
  --o-accent:#1f7a4d;--o-accent-soft:#e1f0e7;--o-link:#1b6e45;--o-tag-bg:#eaf1ec;--o-tag-ink:#2c5c43;--o-code-bg:#f0f1ee;--o-code-ink:#a3355a;--o-card:#ffffff;--o-up:#17804a;--o-down:#c0392b;
  background:var(--o-bg);color:var(--o-ink)}

[data-theme="dark"] .obsBody {
  --o-bg:#141715;--o-side:#191d1a;--o-rib:#111412;--o-line:#272d29;--o-ink:#e3e8e4;--o-muted:#9aa49e;--o-faint:#6b746f;--o-hover:#20261f;
  --o-accent:#4cc488;--o-accent-soft:#1c3328;--o-link:#6fd3a0;--o-tag-bg:#1d2b23;--o-tag-ink:#9fdcbc;--o-code-bg:#1f2421;--o-code-ink:#f2a6bf;--o-card:#191d1a;--o-up:#4cc488;--o-down:#ff8a80}

.obsBody .top{background:var(--o-bg);border-color:var(--o-line)}
.obsBody .top .menu a{color:var(--o-ink)}
.obsBody .top .menu a:hover{background:var(--o-hover)}
.obsBody .top .menu a[aria-current="page"]{background:var(--o-accent-soft);color:var(--o-link);border-color:transparent}
.obsBody .foot{display:none}
.obs{display:grid;grid-template-columns:48px 264px minmax(0,1fr) 248px;height:calc(100vh - 64px);height:calc(100dvh - 64px);background:var(--o-bg);color:var(--o-ink);font:15px/1.6 var(--body)}
.obs.noRight{grid-template-columns:48px 264px minmax(0,1fr)}
.obsRibbon{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;background:var(--o-rib);border-right:1px solid var(--o-line)}
.rib{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--o-muted)}
.rib svg{width:19px;height:19px}
.rib:hover{background:var(--o-hover);color:var(--o-ink)}
.rib.on{background:var(--o-accent-soft);color:var(--o-link)}
.obsSide,.obsRight{background:var(--o-side);overflow:auto;padding:14px 10px}
.obsSide{border-right:1px solid var(--o-line)}
.obsRight{border-left:1px solid var(--o-line)}
.obsSideHead{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;color:var(--o-ink);padding:2px 6px 10px}
.obsCount{font-size:11px;background:var(--o-hover);color:var(--o-muted);border-radius:8px;padding:1px 7px;font-weight:600}
.obsCount:empty{display:none}   /* no number yet (or none): no empty pill */
.obsSearchForm{margin:0 0 10px}
.obsSearch{width:100%;padding:7px 10px;border-radius:8px;border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-ink);font:inherit;font-size:13px}
.obsSearch:focus{outline:2px solid var(--o-accent);outline-offset:0;border-color:transparent}
.obsTree{font-size:13.5px}
.obsFolder>summary{list-style:none;cursor:pointer;padding:3px 6px;border-radius:6px;color:var(--o-muted);font-weight:600}
.obsFolder>summary::-webkit-details-marker{display:none}
.obsFolder>summary::before{content:"\203A";display:inline-block;width:14px;transition:transform .12s;color:var(--o-faint)}
.obsFolder[open]>summary::before{transform:rotate(90deg)}
.obsFolder>summary:hover,.obsFile:hover{background:var(--o-hover)}
.obsKids{margin-left:10px;border-left:1px solid var(--o-line);padding-left:4px}
.obsFile{display:block;padding:3px 8px 3px 20px;border-radius:6px;color:var(--o-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obsFile.active{background:var(--o-accent-soft);color:var(--o-link);font-weight:600}
.obsLock{color:#d08a1e;font-size:9px;vertical-align:middle}
.obsSec{margin-top:16px;border-top:1px solid var(--o-line);padding-top:10px}
.obsSec>summary{list-style:none;cursor:pointer;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);font-weight:700;padding:2px 6px 8px}
.obsSec>summary::-webkit-details-marker{display:none}
.obsTagCloud{display:flex;flex-wrap:wrap;gap:5px;padding:0 4px}
.obsTagCloud .obsTag span{opacity:.6;font-size:11px}
.obsMain{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative}
.obsTabs{display:flex;align-items:flex-end;gap:4px;background:var(--o-side);border-bottom:1px solid var(--o-line);padding:7px 10px 0;min-height:40px;overflow-x:auto}
/* every tab is a bubble around its title with its own ×; the open one is the page's colour with an accent edge */
.obsTab{display:flex;align-items:center;gap:2px;background:var(--o-hover);color:var(--o-muted);border:1px solid var(--o-line);border-bottom:0;border-radius:9px 9px 0 0;padding:5px 4px 6px 12px;font-size:13px;max-width:240px;white-space:nowrap;text-decoration:none}
.obsTab:hover{color:var(--o-ink)}
.obsTab.active{background:var(--o-card);color:var(--o-ink);font-weight:600;box-shadow:inset 0 2px 0 var(--o-accent)}
.obsTab.view{font-style:normal}
.obsTabLink{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.obsTabX{border:0;background:none;color:var(--o-faint);font-size:16px;line-height:1;width:22px;height:22px;border-radius:6px;cursor:pointer;flex:none}
.obsTabX:hover{background:var(--o-hover);color:var(--o-ink)}
.obsTabCount{margin-left:auto;align-self:center;font-size:11.5px;color:var(--o-faint);padding:0 4px 6px;white-space:nowrap}
.obsTabs.full{animation:obsShake .4s}
.obsTabs.full .obsTabCount{color:var(--o-down);font-weight:700}
@keyframes obsShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.obsCrumbs{padding:10px 28px 0;font-size:12.5px;color:var(--o-faint)}
.obsCrumbs span{margin:0 4px}
.obsScroll{overflow:auto;flex:1}
.obsStatus{display:flex;justify-content:flex-end;gap:16px;padding:5px 16px;border-top:1px solid var(--o-line);background:var(--o-side);color:var(--o-faint);font-size:12px;font-variant-numeric:tabular-nums}
.obsNote{max-width:720px;margin:0 auto;padding:28px 32px 90px}
.obsNote h1,.obsTitle{font-size:2.05em;font-weight:800;letter-spacing:-.01em;color:var(--o-ink);margin:.2em 0 .45em;line-height:1.2;text-wrap:balance}
.obsProse{font-size:16.5px;line-height:1.75}
.obsProse h2{font-size:1.45em;color:var(--o-ink);border:0;margin:1.5em 0 .5em}
.obsProse h3{font-size:1.2em;color:var(--o-ink);margin:1.3em 0 .4em}
.obsProse h4{color:var(--o-ink)}
.obsProse a,.obsProse a.wikilink{color:var(--o-link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--o-link) 35%,transparent);text-underline-offset:3px}
.obsProse a:hover{text-decoration-color:currentColor}
.obsProse .wikilink.missing{color:var(--o-faint);text-decoration:none}
.obsProse code{background:var(--o-code-bg);color:var(--o-code-ink);border-radius:5px;padding:1px 6px;font-size:.88em}
.obsProse pre{background:var(--o-code-bg);border:1px solid var(--o-line);border-radius:10px;padding:14px;overflow:auto}
.obsProse pre code{background:none;color:var(--o-ink);padding:0}
.obsProse blockquote{border-left:3px solid var(--o-accent);margin:1em 0;padding:2px 16px;color:var(--o-muted)}
.obsProse hr{border:0;border-top:1px solid var(--o-line);margin:2em 0}
.obsProse table{border-collapse:collapse;display:block;overflow-x:auto}.obsProse th,.obsProse td{border:1px solid var(--o-line);padding:6px 10px}
.obsProse img{border-radius:10px}
.obsProse .callout{background:var(--o-accent-soft);border-left:4px solid var(--o-accent);border-radius:10px;padding:10px 16px;margin:1em 0}
.obsProse>h1:first-child{font-size:2.05em;margin-top:.2em}
.obsTags{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 20px}
.obsTag{display:inline-flex;gap:4px;align-items:center;background:var(--o-tag-bg);color:var(--o-tag-ink);border-radius:999px;padding:1px 10px;font-size:12.5px;text-decoration:none}
a.obsTag:hover{filter:brightness(.95)}
.obsPane{margin-bottom:24px}
.obsPane h4{font-size:11.5px;letter-spacing:.06em;color:var(--o-faint);margin:4px 6px 8px;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.obsOut,.obsBack{display:block;padding:3px 8px;border-radius:6px;color:var(--o-muted);text-decoration:none;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obsOut:hover,.obsBack:hover{background:var(--o-hover);color:var(--o-ink)}
.obsOut.lvl2{padding-left:18px}.obsOut.lvl3{padding-left:28px}.obsOut.lvl4{padding-left:38px}
.obsMuted{color:var(--o-muted);font-size:13px;margin:4px 6px}
.obsBody .empty{color:var(--o-muted)}
/* home feed */
.feed{max-width:760px;margin:0 auto;padding:26px 28px 80px;display:flex;flex-direction:column;gap:14px}
.feedHead h1{font-size:2em;font-weight:800;margin:0}
.feedHead .obsMuted{margin:2px 0 6px;font-variant-numeric:tabular-nums}
.feedCard{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 18px;background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:16px 18px}
.feedCard.hasImg{grid-template-columns:minmax(0,1fr) 128px}
.feedLink{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;min-width:0}
.feedLink:hover .feedTitle{color:var(--o-link)}
.feedMeta{font-size:12.5px;color:var(--o-faint)}
.feedFolder{color:var(--o-muted);font-weight:600}
.feedTitle{font-size:1.18em;font-weight:700;line-height:1.3;text-wrap:balance}
.feedText{color:var(--o-muted);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feedImg{grid-row:span 2}.feedImg img{width:128px;height:96px;object-fit:cover;border-radius:10px;display:block}
.feedTags{display:flex;flex-wrap:wrap;gap:5px}
.feedPager{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.feedPager a{color:var(--o-link);font-weight:600;text-decoration:none}
.feedStories{background:var(--o-side);border:1px solid var(--o-line);border-radius:14px;padding:14px 16px}
.feedStories h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);margin:0 0 8px}
.teaserList{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.feedMore{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--o-link);text-decoration:none}
/* calendar */
.obsCal{padding:0 4px;font-size:12px}
.calHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:700;color:var(--o-ink)}
.calHead button{border:0;background:none;color:var(--o-muted);font-size:16px;width:26px;height:26px;border-radius:6px;cursor:pointer}
.calHead button:hover{background:var(--o-hover)}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-variant-numeric:tabular-nums}
.calDow{color:var(--o-faint);font-size:10.5px;font-weight:700}
.calDay{display:block;padding:4px 0;border-radius:6px;color:var(--o-faint);text-decoration:none}
.calDay.has{color:var(--o-ink);font-weight:700;background:var(--o-accent-soft)}
.calDay.has:hover{background:var(--o-accent);color:#fff}
.calDay.today{outline:1.5px solid var(--o-accent)}
/* graph */
.graphWrap{position:relative;height:100%;min-height:420px}
#obsGraph{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.graphHint{position:absolute;left:14px;bottom:10px;font-size:12px;color:var(--o-faint);background:color-mix(in srgb,var(--o-bg) 85%,transparent);padding:3px 8px;border-radius:8px}
/* stories */
/* one column: the stocks are a row of cards across the top, the stories get the full width (no empty column under them) */
.stories{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 24px 80px;max-width:1280px;margin:0 auto}
.stocksBubble{background:var(--o-card);border:1px solid var(--o-line);border-radius:18px;padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.06);min-width:0}
.stocksBubble .stockList{flex-direction:row;overflow-x:auto;scrollbar-width:thin}.stocksBubble .stock{min-width:180px;flex:1 0 180px}
.stocksBubble h2{margin:0 0 8px}.stocksBubble .stocksNote{margin:8px 2px 0}
.stocksBubble h2,.storyHead h1{margin:0 0 10px}
.stocksBubble h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint)}
.stockList{display:flex;flex-direction:column;gap:8px}
.stock{border:1px solid var(--o-line);border-radius:12px;padding:9px 10px;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.stockTop{display:flex;justify-content:space-between;align-items:baseline}
.stockPrice{font-weight:700}
.stockName{font-size:12px;color:var(--o-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stockBottom{display:flex;justify-content:space-between;align-items:center;gap:6px}
.stockChg{font-size:12.5px;font-weight:700}
.stock.up .stockChg{color:var(--o-up)}.stock.down .stockChg{color:var(--o-down)}
.spark{width:80px;height:24px}.spark polyline{fill:none;stroke-width:1.6;stroke-linejoin:round}
.spark.up polyline{stroke:var(--o-up)}.spark.down polyline{stroke:var(--o-down)}
.stocksNote{font-size:11.5px;margin:10px 2px 0}
/* title, Request and Feature a video together on the left; search on the right */
.storyHead{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px}
.storyHead h1{margin-right:6px}
.storyHead .storySearch{margin-left:auto}
.storyHead h1{font-size:2em;font-weight:800;margin:0}
.storySearch{display:flex;gap:6px}
.storySearch input{padding:8px 12px;border-radius:999px;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-ink);font:inherit;font-size:14px;min-width:0;width:220px}
.storySearch button,.chip{border:1px solid var(--o-line);background:var(--o-card);color:var(--o-ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.interestChips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.chip small{margin-left:6px;color:var(--o-faint);font-weight:500;font-size:11px}
.chip.on{background:var(--o-accent-soft);border-color:var(--o-accent);color:var(--o-link)}
.storyList{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.story{display:flex;flex-direction:column;gap:5px;background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:12px 14px;color:inherit;text-decoration:none;min-width:0}
.story:hover{border-color:var(--o-accent)}
.story img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;max-width:100%}
.storyMeta{font-size:12px;color:var(--o-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storyTitle{font-weight:700;line-height:1.35}
.storyTerm{align-self:flex-start;font-size:11.5px;background:var(--o-tag-bg);color:var(--o-tag-ink);border-radius:999px;padding:1px 8px}
/* 3-tab limit overlay + toast */
.obsBlock{position:absolute;inset:40px 0 0;background:color-mix(in srgb,var(--o-bg) 80%,transparent);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:5;padding:16px}
.obsBlockBox{background:var(--o-card);border:1px solid var(--o-line);border-radius:16px;padding:20px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.15)}
.obsBlockBox h2{margin:0 0 4px;font-size:1.2em}.obsBlockBox p{margin:0 0 12px;color:var(--o-muted)}
.obsBlockRow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--o-line)}
.obsBlockRow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obsBlockRow button,.obsBlockBack{border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-ink);border-radius:8px;padding:5px 12px;font:inherit;font-weight:600;cursor:pointer}
.obsBlockBack{margin-top:12px;width:100%}
.obsToast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--o-ink,#222);color:var(--o-bg,#fff);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50}
.obsToast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:1100px){.obs{grid-template-columns:48px 230px minmax(0,1fr)}.obsRight{display:none}.stories{grid-template-columns:minmax(0,1fr)}.stocksBubble{position:static}.stockList{flex-direction:row;overflow-x:auto}.stock{min-width:170px}}
@media (max-width:700px){
  .obs,.obs.noRight{display:block;height:auto}
  .obsRibbon{flex-direction:row;justify-content:center;border-right:0;border-bottom:1px solid var(--o-line);padding:6px}
  .obsSide{border-right:0;border-bottom:1px solid var(--o-line);max-height:32vh}
  .obsMain{overflow:visible}.obsScroll{overflow:visible}
  .obsRight{display:block;border-left:0;border-top:1px solid var(--o-line)}
  .obsNote,.feed{padding:18px 16px 40px}
  .stories{padding:16px}
  .feedCard.hasImg{grid-template-columns:minmax(0,1fr) 88px}.feedImg img{width:88px;height:72px}
  .storySearch input{width:100%}
  .obsBlock{position:fixed;inset:0}
}


/* ---------- Notes v3: the website's own palette, vault folder colors/icons, properties, previews, Bases, graph editor, stories ---------- */
.obsBody{--o-bg:#f4f6f2;--o-side:#eaeee8;--o-rib:#e2e7df;--o-line:#d3d9d3;--o-ink:#121614;--o-muted:#5b655f;--o-faint:#8a948e;--o-hover:#dfe5dc;--o-accent:#1f7a4d;--o-accent-soft:#d8ecdf;--o-link:#1b6e45;--o-tag-bg:#e2ece5;--o-tag-ink:#245c41;--o-card:#fafbf9}

[data-theme="dark"] .obsBody {--o-bg:#0f1311;--o-side:#131815;--o-rib:#0c0f0d;--o-line:#26302a;--o-ink:#e9eee9;--o-muted:#9aa59e;--o-faint:#6d7872;--o-hover:#1b221d;--o-accent:#4cc488;--o-accent-soft:#183326;--o-link:#6fd3a0;--o-tag-bg:#1a2a21;--o-tag-ink:#9fdcbc;--o-card:#171c19}

.obsNote h1,.obsTitle,.feedHead h1,.storyHead h1,.storyH{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.obsFolder>summary{display:flex;align-items:center;gap:6px}
.obsFolder>summary::before{flex:none}
.obsName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obsN{font-size:10.5px;color:var(--o-faint);font-weight:600;padding:0 2px}
.obsFile{display:flex;align-items:center;gap:6px;padding-left:10px}
.obsIco{width:15px;height:15px;flex:none;display:inline-grid;place-items:center;color:var(--o-muted)}
.obsIco svg{width:15px;height:15px}
.obsIco.emoji{font-size:13px;line-height:1}
.obsIco.big,.obsIco.big svg{width:28px;height:28px;vertical-align:-4px;margin-right:8px}
.obsFolder>summary.fc{background:var(--fc-bg);color:var(--fc-fg,#fff);margin:1px 0}
.obsFolder>summary.fc::before,.obsFolder>summary.fc .obsN,.obsFolder>summary.fc .obsIco{color:inherit;opacity:.85}
.obsFolder>summary.fc:hover{filter:brightness(1.08);background:var(--fc-bg)}
.obsFile.fc{color:var(--fc-fg,inherit);background:color-mix(in srgb,var(--fc-bg) 22%,transparent)}
.obsFile.fc .obsIco{color:inherit}
.obsFile.fc.active{outline:2px solid var(--o-accent);outline-offset:-2px}
.obsBase .obsIco{color:var(--o-accent)}
.obsBack.missing{color:var(--o-faint);font-style:italic}
/* properties */
.obsProps{border:1px solid var(--o-line);border-radius:12px;background:var(--o-card);margin:0 0 18px;padding:4px 12px}
.obsProps>summary{cursor:pointer;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);font-weight:700;padding:6px 0}
.obsProps dl{margin:0 0 6px}
.propRow{display:grid;grid-template-columns:minmax(90px,30%) 1fr;gap:10px;padding:5px 0;border-top:1px solid var(--o-line);font-size:14px}
.propRow dt{color:var(--o-muted);overflow-wrap:anywhere}.propRow dd{margin:0;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.propChip{background:var(--o-hover);border-radius:999px;padding:1px 9px;font-size:13px;overflow-wrap:anywhere}
.propChip.link{background:var(--o-accent-soft);color:var(--o-link);text-decoration:none}
.propChip.date{font-variant-numeric:tabular-nums}
.propEmpty{color:var(--o-faint)}
.noteBanner{height:180px;background:center/cover no-repeat var(--o-hover);border-bottom:1px solid var(--o-line)}
.noteCover{float:right;width:160px;max-width:40%;border-radius:12px;margin:0 0 12px 16px}
.noteIcon{margin-right:8px}
/* page preview */
.notePop{position:absolute;z-index:60;background:var(--o-card);color:var(--o-ink);border:1px solid var(--o-line);border-radius:12px;padding:12px 14px;box-shadow:0 12px 36px rgba(0,0,0,.18);font-size:14px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.notePop p{margin:4px 0 0;color:var(--o-muted);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* Bases */
.baseTabs{display:flex;gap:6px;flex-wrap:wrap}
.baseTabs button,.storyTabs button{border:1px solid var(--o-line);background:var(--o-card);color:var(--o-ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.baseTabs button.on,.storyTabs button.on{background:var(--o-accent-soft);border-color:var(--o-accent);color:var(--o-link)}
.baseGroup{font-size:15px;margin:18px 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.baseTableWrap{overflow-x:auto;border:1px solid var(--o-line);border-radius:12px;background:var(--o-card)}
.baseTable{border-collapse:collapse;width:100%;font-size:14px}
.baseTable th,.baseTable td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--o-line);vertical-align:top}
.baseTable th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--o-faint);background:var(--o-side)}
.baseTable tr:last-child td{border-bottom:0}
.baseTable td a{color:var(--o-link);font-weight:600;text-decoration:none}
/* graph editor */
.graphWrap{position:relative;height:100%;min-height:460px;overflow:hidden}
.graphPanel{position:absolute;top:10px;right:10px;width:270px;max-width:calc(100% - 20px);max-height:calc(100% - 20px);overflow:auto;background:color-mix(in srgb,var(--o-card) 94%,transparent);border:1px solid var(--o-line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.12);font-size:13px}
.graphToggle{width:100%;text-align:left;border:0;background:none;color:var(--o-ink);font:inherit;font-weight:700;padding:10px 12px;cursor:pointer}
.graphPanel.closed .graphPanelBody{display:none}
.graphPanelBody{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.graphPanelBody details>summary{cursor:pointer;font-weight:700;color:var(--o-muted);padding:4px 0}
.gGroup{display:grid;grid-template-columns:30px 1fr auto 26px;gap:6px;align-items:center;margin:4px 0}
.gGroup input[type=color]{width:30px;height:28px;border:1px solid var(--o-line);border-radius:6px;padding:0;background:none}
.gGroup input[type=text]{min-width:0;padding:5px 8px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-bg);color:var(--o-ink);font:inherit;font-size:12.5px}
.gDel{border:0;background:none;color:var(--o-faint);font-size:18px;cursor:pointer}
.gSlider{display:flex;flex-direction:column;gap:2px;margin:4px 0;color:var(--o-muted)}
.gSlider input,.gSlider select{width:100%;accent-color:var(--o-accent)}
.gSlider select{padding:4px;border-radius:6px;border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-ink)}
.graphRow{display:flex;gap:6px;flex-wrap:wrap}
.graphRow button{border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-ink);border-radius:8px;padding:5px 10px;font:inherit;font-weight:600;cursor:pointer}
.graphRow button.primary{background:var(--o-accent);border-color:var(--o-accent);color:#fff}
.graphNote{margin:2px 0;color:var(--o-faint);font-size:12px;line-height:1.4}
.graphNote code{font-size:11.5px;background:var(--o-hover);padding:0 4px;border-radius:4px}
/* stories v2 */
.storyEngine{margin:6px 0 0;font-size:12.5px}
.storyTabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 8px}
.storyFilters{display:flex;gap:6px;flex-wrap:wrap}
.storyFilters select{padding:6px 10px;border-radius:999px;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-ink);font:inherit;font-size:13px}
.chip.saved{border-color:#c99a06}.chip.liked{border-color:var(--o-accent)}.chip.less{opacity:.6}
.storyList{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.story{padding:0;overflow:hidden;gap:0}
.story.seen{opacity:.72}
.storyPic{display:block;line-height:0}
.storyPic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.storyBody{display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.storyTitle{color:var(--o-ink);font-weight:700;line-height:1.35;text-decoration:none;font-size:15.5px}
.storyTitle:hover{color:var(--o-link)}
.storySnip{margin:0;color:var(--o-muted);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.seenTag{color:var(--o-faint)}
.storyActions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sAct{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-muted);border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none}
.sAct svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sAct:hover{color:var(--o-ink);border-color:var(--o-muted)}
.sAct.on[data-act=up],.sAct.on[data-act=save]{background:var(--o-accent-soft);border-color:var(--o-accent);color:var(--o-link)}
.sAct.on[data-act=save] svg{fill:currentColor}
.sAct.on[data-act=down]{background:color-mix(in srgb,var(--o-down) 14%,transparent);border-color:var(--o-down);color:var(--o-down)}
.savedTree{display:flex;flex-direction:column;gap:12px;grid-column:1/-1}
.savedTopic>summary{cursor:pointer;font-weight:800;font-size:16px;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.savedTopic{display:block}
.savedTopic .story{margin-bottom:10px}
.teaserList .story{flex-direction:row}
.teaserList .storyPic{width:96px;flex:none}.teaserList .storyPic img{height:100%;aspect-ratio:auto}
.teaserList .story{display:flex}
/* story page */
.storyPage{max-width:780px;margin:0 auto;padding:22px 28px 80px}
.storyHero{width:100%;max-height:380px;object-fit:cover;border-radius:16px;margin:10px 0}
.storyH{font-size:1.9em;line-height:1.2;margin:.2em 0 .4em;text-wrap:balance}
.storySummary,.storySources{background:var(--o-card);border:1px solid var(--o-line);border-radius:16px;padding:14px 18px;margin-top:16px}
.storySummary h2,.storySources h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);margin:0 0 8px;display:flex;gap:8px;align-items:center}
.sumBody{font-size:16px;line-height:1.65}
.sumBody ul{padding-left:1.2em;margin:.4em 0}.sumBody li{margin:.3em 0}.sumBody li.note{color:var(--o-muted);font-style:italic}
.cite{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--o-accent-soft);color:var(--o-link);font-size:11px;font-weight:700;text-decoration:none;margin:0 1px;vertical-align:2px}
.sumBy{font-size:12.5px;margin-top:10px}
.storySources ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.storySources a{color:var(--o-link);font-weight:600;text-decoration:none}
@media (max-width:700px){.graphPanel{position:static;width:auto;margin:8px}.graphWrap{min-height:auto}#obsGraph{height:60vh}.storyPage{padding:16px}.propRow{grid-template-columns:1fr}}

/* ---------- shows: add/edit form ---------- */
.showsHead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.videosHead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:8px 0 18px}
.videosHead .pageTitle{margin:0}
.videosHead .headBtns{display:flex;gap:8px;flex-wrap:wrap}
.btn.small{padding:6px 12px;font-size:14px}
.formCard{display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.formCard label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.formCard input,.formCard textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.formCard textarea{font-family:ui-monospace,Consolas,monospace;font-size:14px}
.formMsg{margin:0;color:var(--muted)}.formMsg.bad{color:var(--bad)}
.btn.danger.confirm{background:var(--bad);color:#fff;border-color:var(--bad)}

/* ---------- /music/upload (owner): the dashboard's Music tab on the website ---------- */
.muPage{max-width:860px}
.muDrop{text-align:center;align-items:center;margin-bottom:24px;border-style:dashed}
.muDrop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.muDrop .actions{justify-content:center}
.muList{display:flex;flex-direction:column;gap:18px}
.muHead{display:flex;gap:14px;align-items:center}
.muCover{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:none}
.muCover.none{display:grid;place-items:center;background:var(--bg);color:var(--muted);font-size:1.6rem}
.muInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.muInfo audio{width:100%}
.formCard select{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.muChecks{display:flex;flex-wrap:wrap;gap:8px 20px}
.formCard .muCheck{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.formCard .muCheck input{width:auto}
.muActions{flex-wrap:wrap;gap:8px}
.muActions .formMsg{width:100%}
@media (max-width:560px){.muHead{flex-direction:column;align-items:stretch}.muCover{width:100%;height:160px}}

/* ---------- Code Lessons (Zuki's AI teacher) ---------- */
.lessons{padding:20px 16px 40px;max-width:1500px;margin:0 auto;width:100%}
.lsHead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.lsHead h1{font-family:var(--display);margin:4px 0}.lsHead .lead{margin:0;color:var(--muted);max-width:640px}
.lsPick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lsPick select{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:260px}
.lsAi{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.lsAi.on{color:var(--accent)}.lsAi.off{color:var(--bad)}
.lsGrid{display:grid;grid-template-columns:270px minmax(0,1fr) minmax(0,.8fr);gap:12px;height:calc(100vh - 230px);min-height:520px}
.lsFiles,.lsChat,.lsView{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:0;min-width:0}
.lsBarHead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.lsBarHead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsLink{margin-left:auto;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.lsFiles input[type=search]{margin:8px 10px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:13px}
.lsTree{overflow:auto;flex:1;padding:0 6px 8px;font-size:13px}
.lsDir>summary{cursor:pointer;font-weight:600;padding:2px 4px;color:var(--muted)}
.lsDir .lsDir,.lsDir .lsFile{margin-left:12px}
.lsFile{display:flex;align-items:center;gap:4px}
.lsOpen{border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:2px 4px;border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsOpen:hover{background:var(--bg)}
.lsHelp{padding:8px 12px;margin:0;border-top:1px solid var(--line)}
.lsIdeas{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.lessons .chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.lsMsgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.lsMsg{max-width:88%;padding:10px 13px;border-radius:14px;line-height:1.55;overflow-wrap:anywhere}
.lsMsg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.lsMsg.ai{align-self:flex-start;background:var(--bg);border:1px solid var(--line)}
.lsMsg.err{border-color:var(--bad);color:var(--bad)}
.lsMsg code{background:rgba(127,127,127,.15);padding:1px 5px;border-radius:5px}
.lsPre{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;margin:6px 0;font-size:13px}
.lsH{display:block;margin-top:6px}
.lsForm{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.lsForm textarea{flex:1;min-width:0;font:inherit;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}
#lsNote{padding:0 12px 10px;margin:0}
.lsCode{flex:1;margin:0;overflow:auto;padding:12px;font:13px/1.5 ui-monospace,Consolas,monospace;white-space:pre;tab-size:4}
@media (max-width:1100px){.lsGrid{grid-template-columns:240px minmax(0,1fr);height:auto}.lsView{grid-column:1/-1;height:420px}.lsChat{height:70vh}}
@media (max-width:700px){.lsGrid{display:flex;flex-direction:column}.lsFiles{height:300px}.lsChat{height:70vh}}

/* ---------- shows (owner-only watchlist) ---------- */
/* (2026-10-26) every show on ONE row that scrolls sideways (visible scroll bar); cards = cover + title, equal height */
.showsGrid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 0 12px;margin:0 0 8px;scrollbar-width:thin;scrollbar-color:var(--muted) var(--line)}
.showsGrid::-webkit-scrollbar{height:8px}.showsGrid::-webkit-scrollbar-track{background:var(--line);border-radius:4px}.showsGrid::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px}
.showCard{flex:0 0 160px;scroll-snap-align:start}
.showCard .cardBody{padding:10px 12px 12px}
.showCard .cardTitle,.card.video .cardTitle{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
@media (max-width:560px){.showCard{flex-basis:132px}}
.showCard .thumb{aspect-ratio:2/3}
.showCard .thumb img{width:100%;height:100%;object-fit:cover}
.showNoCover{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--line),var(--card))}
.showBar{display:block;height:4px;border-radius:2px;background:var(--line);margin-top:8px;overflow:hidden}.showBar i{display:block;height:100%;background:var(--accent)}
.showHead{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.showCover{width:160px;max-width:40%;border-radius:10px;aspect-ratio:2/3;object-fit:cover}
.showHead>div{flex:1;min-width:240px}
.eps{list-style:none;padding:0;margin:0;max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:12px}
.ep{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ep:last-child{border-bottom:0}
.ep.watched .epTitle{color:var(--muted);text-decoration:line-through}
.ep.next{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.epCheck{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:64px}
.epCheck input{width:18px;height:18px;accent-color:var(--accent)}
.epNum{font-variant-numeric:tabular-nums;font-weight:700;min-width:28px}
.epTitle{flex:1;min-width:0;overflow-wrap:anywhere}
.epOpen{padding:6px 14px!important}

/* ---------- Stories v3: refresh, Remove, videos, undo toast, phone layout; search modes; files toggle; Notes Inbox; quizzes ---------- */
.storySearch{flex-wrap:wrap}
.storyRefresh{display:inline-flex;align-items:center;gap:6px}
.storyRefresh svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.storyRefresh.spin svg{animation:przSpin 1s linear infinite}
.storyRefresh:disabled{opacity:.7;cursor:progress}
@keyframes przSpin{to{transform:rotate(360deg)}}
.story{transition:opacity .2s,transform .2s}
.story.leaving{opacity:0;transform:scale(.96)}
.story[hidden]{display:none}
.storyPic{position:relative}
.playMark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.playMark svg{width:52px;height:52px;padding:12px 10px 12px 14px;border-radius:50%;background:rgba(0,0,0,.6);fill:#fff}
.sBadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:1px 6px;margin-right:6px;background:var(--o-hover);color:var(--o-muted);vertical-align:1px}
.sBadge.vid{background:color-mix(in srgb,#d33 16%,transparent);color:#c22}
.sBadge.live{background:#d22;color:#fff}
.sAct[data-act=dismiss]{margin-left:auto}
.sAct.on[data-act=dismiss]{background:var(--o-hover);color:var(--o-ink)}
/* feed cards: one quiet row of icon buttons (each name is its tooltip and screen-reader label); the story page keeps words */
.story .storyActions{gap:2px;flex-wrap:nowrap;margin-top:6px;padding-top:8px;border-top:1px solid var(--o-line)}
.story .sAct{padding:0;width:34px;height:30px;justify-content:center;border-radius:9px;border-color:transparent;background:none}
.story .sAct:hover{background:var(--o-hover);border-color:transparent}
.story .sAct span{display:none}
.story .sAct svg{width:16px;height:16px}
.story .sAct.out{width:auto;padding:0 10px}.story .sAct.out span{display:inline}
.storyVids{display:flex;flex-direction:column;gap:4px}
.vidChip{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--o-link);text-decoration:none;min-width:0}
.vidChip svg{width:13px;height:13px;flex:none;fill:currentColor;stroke:currentColor;stroke-width:1}
.vidChip .obsMuted{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storyEmpty{grid-column:1/-1}
.savedList{display:block}
.chipX{border:0;background:none;color:inherit;font:inherit;font-weight:800;cursor:pointer;padding:0 0 0 4px}
.obsToast{display:flex;align-items:center;gap:12px;pointer-events:none;max-width:calc(100vw - 32px)}
.obsToast.on{pointer-events:auto}
.toastBtn{border:0;background:none;color:var(--o-accent,#4cc488);font:inherit;font-weight:800;cursor:pointer;padding:2px 4px;text-transform:uppercase;letter-spacing:.04em}
.stocksStrip{display:none}
.stockPill{display:inline-flex;gap:4px;align-items:baseline;white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums;border:1px solid var(--o-line);border-radius:999px;padding:3px 10px;background:var(--o-card)}
.stockPill i{font-style:normal;font-weight:700}.stockPill.up i{color:var(--o-up)}.stockPill.down i{color:var(--o-down)}
/* story page: video first */
.storyVideo{display:flex;gap:12px;align-items:center;color:var(--o-ink);background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:8px;margin:8px 0}
.storyVideo .vMain{display:flex;gap:12px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit}
.storyVideo.big .vMain{flex-direction:column;align-items:stretch;gap:0}
.storyVideo .vVotes{display:flex;flex-direction:column;gap:6px;flex:none}
.storyVideo.big .vVotes{flex-direction:row;padding:0 14px 12px}
.vVote{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;color:var(--o-faint);background:transparent;border:1px solid var(--o-line);border-radius:999px;padding:4px 10px;cursor:pointer}
.vVote svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vVote:hover{color:var(--o-ink);border-color:var(--o-faint)}
.vVote:focus-visible{outline:2px solid var(--o-accent,#5b8def);outline-offset:2px}
.vVote.up.on{color:#1f9d55;border-color:#1f9d55;background:rgba(31,157,85,.1)}
.vVote.down.on{color:#d64545;border-color:#d64545;background:rgba(214,69,69,.1)}
.storyVideo.vHidden{opacity:.6}
.vidHiddenList{margin-top:10px;border-top:1px solid var(--o-line);padding-top:8px}
.vidHiddenList summary{cursor:pointer;font-size:13px;color:var(--o-faint)}
.findHelp,.fillNote{font-size:12.5px;margin:0 0 8px;line-height:1.45}
.fillNote{font-style:italic}
@media (max-width:560px){.storyVideo{flex-wrap:wrap}.storyVideo .vVotes{flex-direction:row;width:100%;justify-content:flex-end}.storyVideo .vThumb{width:120px}}
.storyVideo .vThumb{position:relative;width:180px;flex:none;line-height:0}
.storyVideo .vThumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.storyVideo .vText{display:flex;flex-direction:column;gap:2px;min-width:0}
.storyVideo.big{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.storyVideo.big .vThumb{width:100%}.storyVideo.big .vThumb img{border-radius:0}
.storyVideo.big .vText{padding:10px 14px 12px}
.storyVideos{background:var(--o-card);border:1px solid var(--o-line);border-radius:16px;padding:14px 18px;margin-top:16px}
.storyVideos h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);margin:0}
.storyVideos .vidHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.findVids{display:inline-flex;align-items:center;gap:5px}
.findVids svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.findVids:disabled{opacity:.6;cursor:progress}
/* phone: one column, small icon buttons, stocks as a strip */
@media (max-width:760px){
  .stories{display:block;padding:12px 12px 60px}
  .stocksBubble{display:none}
  .stocksStrip:not([hidden]){display:flex;gap:6px;overflow-x:auto;margin:10px -12px 0;padding:0 12px 4px;scrollbar-width:none;min-height:30px}
  /* title, Request and Feature on one row (the search goes under them) */
  .storyHead{gap:8px}
  .storyHead h1{font-size:1.5em;margin-right:2px}
  .storyRequest,.storyFeature{font-size:13px;padding:5px 10px;gap:5px}
  .storyRequest svg,.storyFeature svg{width:14px;height:14px}
  .fLong{display:none}
  .storySearch{width:100%}
  .storySearch input{flex:1;width:auto}
  .storyRefresh span{display:none}
  .storyTabs{flex-wrap:nowrap;overflow-x:auto;margin:10px -12px 6px;padding:0 12px 2px;scrollbar-width:none}
  .storyTabs button{white-space:nowrap;flex:none}
  .storyFilters{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:0 12px 2px}
  .storyFilters select{flex:none}
  .interestChips{flex-wrap:nowrap;overflow-x:auto;margin:10px -12px;padding:0 12px 2px}
  .interestChips .chip{flex:none;white-space:nowrap}
  .storyList{grid-template-columns:minmax(0,1fr);gap:10px}
  .storyBody{padding:10px 12px;gap:5px}
  .storyTitle{font-size:16px}
  .storyActions{gap:4px;flex-wrap:nowrap}
  .sAct{padding:0;width:38px;height:34px;justify-content:center;border-radius:10px}
  .sAct span{display:none}
  .sAct svg{width:17px;height:17px}
  .sAct.out{width:auto;padding:0 10px}
  .sAct.out span{display:inline}
  .storyVideo:not(.big){flex-direction:column;align-items:stretch}.storyVideo:not(.big) .vThumb{width:100%}
  .storyVideo:not(.big) .vMain{flex-direction:column;align-items:stretch;gap:8px}
  .storyVideo:not(.big) .vText{padding:0 4px}
  .obsToast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
html[data-device=phone] .storyPage .storyActions .sAct span{display:none}
/* notes: search modes, files toggle */
.obsSearchForm{display:flex;gap:4px;align-items:center}
.obsSearchForm .obsSearch{flex:1;min-width:0}
.obsSearchMode{flex:none;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-muted);border-radius:8px;padding:4px 8px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;min-width:66px}
.obsSearchMode:hover{color:var(--o-ink)}
.searchModes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.searchModes a{border:1px solid var(--o-line);background:var(--o-card);color:var(--o-ink);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:600;text-decoration:none}
.searchModes a.on{background:var(--o-accent-soft);border-color:var(--o-accent);color:var(--o-link)}
.obs.sideHidden{grid-template-columns:48px minmax(0,1fr) 248px}
.obs.sideHidden.noRight{grid-template-columns:48px minmax(0,1fr)}
.obs.sideHidden .obsSide{display:none}
@media (max-width:1100px){.obs.sideHidden{grid-template-columns:48px minmax(0,1fr)}}
@media (max-width:700px){.obsSide{display:none;max-height:none}.obs.filesOpen .obsSide{display:block}}
/* graph: dragging */
.gMove{width:100%}
/* ---------- Notes Inbox ---------- */
.inbox .lead code{font-size:.9em}
.inboxDrop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed var(--line);border-radius:16px;padding:28px 16px;margin:18px 0;text-align:center;cursor:pointer;background:var(--card)}
.inboxDrop:hover,.inboxDrop.over,.inboxDrop:focus-visible{border-color:var(--accent);outline:none}
.inboxBar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.inboxList{display:flex;flex-direction:column;gap:10px}
.inboxItem{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.inboxHead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.inboxHead b{font-size:16px;overflow-wrap:anywhere}
.inboxText{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.inboxSort{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inboxSort label{display:flex;align-items:center;gap:8px;font-weight:600;flex:1;min-width:0}
.inboxFolder{flex:1;min-width:0;font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.inboxBtns{display:flex;gap:6px;flex-wrap:wrap}
.inboxWait{animation:przPulse 1.4s ease-in-out infinite}
@keyframes przPulse{50%{opacity:.5}}
.inbox .sBadge{background:var(--bg);color:var(--accent);border:1px solid var(--accent)}
.inbox p.meta{margin:0}
/* ---------- Code Lessons: quizzes & progress ---------- */
.lsTabs{display:flex;gap:6px;margin:0 0 12px}
.lsTabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.lsTabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lsQuiz{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.qCol{display:flex;flex-direction:column;gap:10px;min-width:0}
.qCard,.qPanel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.qCard h3,.qPanel h2{margin:0;font-size:16px;line-height:1.4}
.qPanel h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qAbout{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.qCtx{margin:0;color:var(--muted);font-size:13.5px}
.qCard textarea{font:inherit;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical;min-height:70px}
.qBtns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qFeedback{border-radius:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--line)}
.qFeedback.correct{border-color:var(--accent)}.qFeedback.wrong{border-color:var(--bad)}
.qFeedback b{text-transform:capitalize}
.pRow{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:8px;align-items:center;font-size:14px;padding:4px 0;border-top:1px solid var(--line)}
.pRow:first-of-type{border-top:0}
.pName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pBar{height:8px;border-radius:4px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.pBar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.pRow.practice .pBar i{background:var(--bad)}
.pTag{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.pRow.practice .pTag{color:var(--bad)}
.pOverall{display:flex;align-items:center;gap:10px;font-weight:700}
.pOverall .pBar{flex:1;height:12px}
@media (max-width:900px){.lsQuiz{grid-template-columns:minmax(0,1fr)}}
/* anything marked hidden stays hidden, even when its class sets display (e.g. .obsFile is flex) */
[hidden]{display:none!important}
@media (max-width:760px){.storyTabs::-webkit-scrollbar,.storyFilters::-webkit-scrollbar,.interestChips::-webkit-scrollbar,.stocksStrip::-webkit-scrollbar{display:none}.storyTabs,.storyFilters,.interestChips{scrollbar-width:none}}

/* ---------- Stories header: dropdowns on phones; wide feeds on PCs ---------- */
.mOnly{display:none}
@media (max-width:760px){
  /* phones: "Which stories" and "Topic" are dropdowns next to the other filters, no button rows */
  .storyTabs,.interestChips{display:none}
  .storyFilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 14px;padding:0;overflow:visible}
  .storyFilters select{width:100%;min-width:0;flex:none;padding:9px 12px;font-size:14px}
  .storyFilters .mOnly{display:block;font-weight:700;border-color:var(--o-accent);background:var(--o-accent-soft);color:var(--o-link)}
}
/* teaser cards: the text gets the room left of the picture (and wraps instead of being cut off) */
.teaserList .storyBody{min-width:0;flex:1}
.teaserList .storyTitle{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
@media (min-width:1101px){
  /* PCs: the notes feed fills the page (two columns of notes, stories across the top) */
  .feed{max-width:1480px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px 16px;padding:26px 36px 80px}
  .feed>*{min-width:0}
  .feed>.feedHead,.feed>.feedStories,.feed>.feedPager,.feed>.obsEmpty,.feed>p{grid-column:1/-1}
  .teaserList{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .teaserList .storyPic{width:112px}
  /* Stories page: as wide as the screen allows, more columns of stories */
  .stories{max-width:1760px;grid-template-columns:minmax(0,1fr);padding:22px 32px 80px}
  .storyList{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
}
@media (min-width:1101px) and (max-width:1400px){.teaserList{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- Stories v4: steady cards, outlet lean, pins, story chat ---------- */
/* five shades: far left dark blue, leans left light blue, center gray, leans right light red, far right dark red */
.obsBody{--lean-l:#1d4ed8;--lean-ll:#93c5fd;--lean-c:#9ca3af;--lean-lr:#fca5a5;--lean-r:#b91c1c;--pin-hot:#e8590c}
/* every card has the same picture box: the outlet's name until the picture shows, so nothing moves when pictures
   load late or fail */
.storyPic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;line-height:normal;background:linear-gradient(135deg,var(--o-hover),var(--o-side))}
.storyPic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.storyPic img.late{animation:przFade .3s ease-out}
@keyframes przFade{from{opacity:0}}
.picPh{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--o-faint)}
.storyPic:not(.noPic) .picPh{visibility:hidden}
.teaserList .story{min-height:96px}
.teaserList .storyPic{aspect-ratio:auto;align-self:stretch}
.teaserList .picPh{font-size:11px;padding:6px}
.story.skel{min-height:96px;border:1px solid var(--o-line);border-radius:14px;background:linear-gradient(90deg,var(--o-card),var(--o-hover),var(--o-card));background-size:200% 100%;animation:przShimmer 1.4s linear infinite}
@keyframes przShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.story.skel{animation:none}.storyPic img.late{animation:none}}
/* things that arrive after the page loads keep their space */
.interestChips{min-height:34px}
/* pins */
.pinBadge{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:800;background:rgba(0,0,0,.66);color:#fff;line-height:1.3}
.pinBadge svg,.pinNews h2 svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.pinBadge.hot{background:var(--pin-hot)}
.story.pinHot{border-color:var(--pin-hot)}
.sAct.on[data-act=pin]{background:color-mix(in srgb,var(--pin-hot) 14%,transparent);border-color:var(--pin-hot);color:var(--pin-hot)}
.pinNews{border:1px solid var(--o-line);border-left:4px solid var(--o-accent);border-radius:14px;padding:12px 16px;margin:8px 0 14px;background:var(--o-card)}
.pinNews.hot{border-left-color:var(--pin-hot)}
.pinNews h2{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);margin:0}
/* the header is the drop-down: tap it (or the ▾) to show or hide the new reports */
.pinToggle{display:flex;align-items:center;gap:6px;width:100%;padding:2px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.pinToggle .obsCount{margin-left:2px}
.pinChev{width:16px;height:16px;margin-left:auto;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pinToggle[aria-expanded="true"] .pinChev{transform:rotate(180deg)}
.pinToggle:hover{color:var(--o-ink)}
#pinList{margin-top:8px}
.pinNews ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.pinNews a{color:var(--o-link);font-weight:600;text-decoration:none}
/* which way the outlets lean */
.leanBar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--o-muted);min-width:0}
.leanTrack{display:flex;flex:0 0 88px;height:6px;border-radius:3px;overflow:hidden;background:var(--o-hover);gap:1px}
.leanTrack i{display:block;height:100%}
.lL{background:var(--lean-l)}.lLL{background:var(--lean-ll)}.lC{background:var(--lean-c)}.lLR{background:var(--lean-lr)}.lR{background:var(--lean-r)}
.leanLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lN{background:var(--o-faint);opacity:.55}
/* PC /stories page: no row of tab buttons; "Which stories" is a dropdown, as on phones (Notes and Obsidian keep the buttons) */
.stories.noTabs .storyTabs{display:none}
.stories.noTabs .storyFilters [data-mtab]{display:block;font-weight:700;border-color:var(--o-accent);background:var(--o-accent-soft);color:var(--o-link)}
.leanBar.big{flex-wrap:wrap;margin:2px 0 10px;font-size:13px}
.leanBar.big .leanTrack{flex:1 1 220px;max-width:420px;height:10px;border-radius:5px}
.leanBar.big .leanLabel{white-space:normal;font-weight:700;color:var(--o-ink)}
.leanBar.big .leanLabel .obsMuted{font-weight:500}
.leanNone{font-size:13px;margin:0 0 10px}
.leanDot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.leanDot.l-2{background:var(--lean-l)}.leanDot.l-1{background:var(--lean-ll)}.leanDot.l0{background:var(--lean-c)}.leanDot.l1{background:var(--lean-lr)}.leanDot.l2{background:var(--lean-r)}
.leanDot.none{border:1.5px solid var(--o-faint);background:transparent}
.leanKey{font-size:12px;margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
.leanKey .leanDot{margin-right:3px}
.vidChip.more{color:var(--o-muted);font-weight:700}
/* chat under the summary */
.storyChat{background:var(--o-card);border:1px solid var(--o-line);border-radius:16px;padding:14px 18px;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.storyChat h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--o-faint);margin:0}
.chatMsgs{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto}
.chatMsg{max-width:90%;padding:9px 13px;border-radius:14px;line-height:1.55;overflow-wrap:anywhere;font-size:15px}
.chatMsg p{margin:0 0 .4em}.chatMsg p:last-child{margin:0}.chatMsg ul{margin:.2em 0;padding-left:1.1em}
.chatMsg.me{align-self:flex-end;background:var(--o-accent);color:#fff}
.chatMsg.ai{align-self:flex-start;background:var(--o-bg);border:1px solid var(--o-line)}
.chatMsg.err{border-color:var(--lean-r);color:var(--lean-r)}
.chatIdeas{display:flex;flex-wrap:wrap;gap:6px}
.chatIdeas .chip{font-size:12.5px}
.chatForm{display:flex;gap:8px;align-items:flex-end}
.chatForm textarea{flex:1;min-width:0;font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-ink);resize:vertical}
.chatNote{font-size:12px;margin:0}
@media (max-width:760px){.chatForm{flex-direction:column;align-items:stretch}.chatMsg{max-width:100%}.leanTrack{flex-basis:64px}}
/* ---------- Stories v5: listen, update summary, every side ---------- */
.obsBody{--axis-state:#8b5cf6;--axis-lib:#c98a06}
.sumHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.sumHead h2{margin:0}
.sumListen{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:13px}
.sumListen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sumAudio{background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:10px 14px;margin-top:10px}
.sumAudio audio{width:100%;display:block}
.sumAudioNote{font-size:12.5px;margin:0 0 6px}
.sumUpdate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--o-line)}
.sumUpdate .obsMuted{font-size:13px}
.sumUpdate.working .obsMuted{animation:przPulse 1.4s ease-in-out infinite}
.axisChip{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;border-radius:5px;padding:1px 6px;white-space:nowrap;border:1px solid currentColor}
.axisChip.state{color:var(--axis-state)}
.axisChip.lib{color:var(--axis-lib)}
.leanBar .axisChip{flex:none}
.sideNote{font-size:12.5px;margin:-4px 0 10px}
@media (prefers-reduced-motion:reduce){.sumUpdate.working .obsMuted{animation:none}}
/* ---------- Stories v6: pull to refresh, point arrows, unverified ---------- */
.obsBody{--unv:#c2410c}
html.ptrOn,html.ptrOn body{overscroll-behavior-y:contain}   /* our own pull-to-refresh instead of the browser's reload */
.ptr{position:fixed;left:50%;top:calc(-44px + env(safe-area-inset-top,0px));transform:translate(-50%,0);z-index:60;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--o-card);color:var(--o-ink);border:1px solid var(--o-line);box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;font-weight:700;opacity:0;transition:opacity .15s;pointer-events:none}
.ptr.on{opacity:1}
.ptr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ptr.ready svg{transform:rotate(180deg);color:var(--o-accent)}
.ptr.busy svg{animation:przSpin 1s linear infinite}
/* summary points: an arrow instead of a dot; tap it for more detail */
.sumBody ul{list-style:none;padding-left:0}
.sumPt{display:grid;grid-template-columns:24px 24px minmax(0,1fr);gap:4px;align-items:start;margin:.45em 0;border-radius:10px;transition:background .2s}
/* read aloud, part by part: a small round play/pause next to each part (no time bar); the part being read is lit */
.sumLead{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:start;border-radius:10px;transition:background .2s}
.ptPlay{width:22px;height:22px;margin-top:2px;padding:0;border:1px solid var(--o-line);border-radius:50%;background:var(--o-bg);color:var(--o-link);cursor:pointer;display:grid;place-items:center;position:relative;transition:background .15s,border-color .15s,color .15s}
.ptPlay svg{width:11px;height:11px;fill:currentColor}
.ptPlay:hover{border-color:var(--o-accent)}
.ptPlay.on{background:var(--o-accent);border-color:var(--o-accent);color:#fff}
.ptPlay.busy{border-color:transparent}
.ptPlay.busy::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--o-accent);border-right-color:transparent;animation:ptSpin .8s linear infinite}
@keyframes ptSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ptPlay.busy::after{animation:none;border-right-color:var(--o-accent);opacity:.6}}
.sumPt.reading,.sumLead.reading{background:var(--o-accent-soft)}
.sumListen.on{border-color:var(--o-accent);color:var(--o-link)}
/* a meeting's times link into its video */
.mTime{font-variant-numeric:tabular-nums;font-weight:700;font-size:.92em;color:var(--o-accent);text-decoration:none;padding:0 3px;border-radius:5px;background:var(--o-accent-soft)}
.mTime:hover{text-decoration:underline}
/* Change focus */
.focusBar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 8px;font-size:13.5px}
.focusNow{color:var(--o-ink)}
.focusBtn{display:inline-flex;align-items:center;gap:5px}
.focusBtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.focusForm{display:flex;flex-direction:column;gap:10px;margin:0 0 12px;padding:14px;border:1px solid var(--o-line);border-radius:14px;background:var(--o-card)}
.focusForm label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px;min-width:0}
.focusForm input{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--o-line);border-radius:10px;background:var(--o-bg);color:var(--o-ink);width:100%;min-width:0}
.focusIdeas{display:flex;flex-wrap:wrap;gap:6px}
.featureActions button.focusClear,.featureActions button.focusCancel{background:none;color:var(--o-ink);border-color:var(--o-line)}
.ptMore{width:22px;height:22px;margin-top:2px;padding:0;border:1px solid var(--o-line);border-radius:6px;background:var(--o-bg);color:var(--o-link);cursor:pointer;display:grid;place-items:center}
.ptMore svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ptMore[aria-expanded="true"] svg{transform:rotate(180deg)}
.ptMore:hover{border-color:var(--o-accent)}
.sumPt.note .ptBody>span{color:var(--o-muted);font-style:italic}
.ptDetail{margin:6px 0 4px;padding:8px 12px;border-left:3px solid var(--o-accent);background:var(--o-bg);border-radius:0 10px 10px 0;font-size:14.5px;line-height:1.6}
.ptDetail p{margin:0 0 .4em}.ptDetail p:last-child{margin:0}
/* unverified (Novel) */
.sBadge.unv{background:color-mix(in srgb,var(--unv) 15%,transparent);color:var(--unv)}
.axisChip.unv{color:var(--unv)}
.novelNote{border:1px solid color-mix(in srgb,var(--unv) 45%,transparent);background:color-mix(in srgb,var(--unv) 8%,transparent);color:var(--o-ink);border-radius:12px;padding:10px 14px;margin:6px 0 12px;font-size:14px}
@media (prefers-reduced-motion:reduce){.ptr.busy svg{animation:none}.ptMore svg,.ptr svg{transition:none}}
/* shows v2: find the episode list, official links, your own files, the Robz player */
.showFind{margin-bottom:16px}
.showFind label{font-weight:600}
.findRow{display:flex;gap:8px;flex-wrap:wrap}.findRow input{flex:1 1 240px;min-width:0}
/* samueljrobie.com/shows: "Add show" from a Re:ANIME link, with a bar while Episode Scraper works (sliding until it knows the episode count) */
.showAddForm{margin:12px 0 20px}.showAddForm label{display:block;margin-bottom:8px}
.showBar.addBar{height:6px;margin-top:10px}.showBar.addBar.busy i{width:30%;animation:addSlide 1.2s ease-in-out infinite}
@keyframes addSlide{from{margin-left:-30%}to{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.showBar.addBar.busy i{animation:none;width:100%;opacity:.5}}
.linkBtn{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
/* show page: Edit details link beside the buttons, the Switch links chooser and the Rescan panel */
.showPage .actions{align-items:center}
/* the buttons, Switch links chooser, Rescan panel and captions: a full-width row under the poster, centered */
.showControls{margin:0 0 18px;text-align:center}
.showControls .actions{justify-content:center}
.showControls .switchBox{justify-content:center}
.showControls .rescanBox{text-align:left}
.showControls .regionBox{text-align:left}
.editLink{color:var(--muted);font-size:14px;margin-left:4px}.editLink:hover{color:var(--accent)}
.switchBox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.switchBox .count{opacity:.7;font-variant-numeric:tabular-nums;margin-left:2px}
.rescanBox{margin:10px 0 0}.rescanBox label{display:block;margin-bottom:8px}.rescanBox .meta:last-child{margin:8px 0 0}
.playFrom{margin:6px 0 0}
.findResults{display:flex;flex-direction:column;gap:8px}.findResults:empty{display:none}
.findPick{display:flex;gap:12px;align-items:center;text-align:left;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer}
.findPick:hover:not(:disabled){border-color:var(--accent)}.findPick:disabled{opacity:.6;cursor:default}.findPick.busy{opacity:1;border-color:var(--accent)}
.findCover{flex:0 0 48px;width:48px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--line)}.findCover img{width:100%;height:100%;object-fit:cover;display:block}
.findText{display:flex;flex-direction:column;gap:2px;min-width:0}.findText b{overflow-wrap:anywhere}
.formCard label.check{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;font-weight:600}.formCard label.check input{width:18px;height:18px;accent-color:var(--accent)}
.watchLinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}.watchLinks .eyebrow{margin:0 4px 0 0}
.showDesc{max-height:9.5em;overflow:auto}
.airing{color:var(--accent);font-weight:600}
.epDate{display:block;font-size:13px;text-decoration:none}
.ep.watched .epDate{text-decoration:none}
.epActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.epAdd{cursor:pointer}.epAdd.busy{pointer-events:none;font-variant-numeric:tabular-nums}
.epMove{display:inline-flex;gap:2px}.epMove .btn{min-width:32px;padding-left:0;padding-right:0}
.ep.justMoved{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.ep.upcoming{opacity:.6}
.showEp .player video{max-height:80vh}
.epEmpty{background:var(--card);border:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px;text-align:center}
.epWatched{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.epWatched input{width:16px;height:16px;accent-color:var(--accent)}
.epMsg{min-height:1.4em;margin:4px 0;color:var(--muted)}
@media (max-width:560px){.ep{flex-wrap:wrap}.epActions{width:100%;justify-content:flex-start;padding-left:76px}.showCover{width:120px}}
/* shows: episode player links pasted as CSV, embedded players */
.csvBox{margin:0 0 16px}
.csvBox summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;list-style:none}
.csvBox summary::-webkit-details-marker{display:none}
.csvBox summary::before{content:"▸";color:var(--muted);transition:transform .15s}.csvBox[open] summary::before{transform:rotate(90deg)}
.csvBox textarea{font:14px/1.45 ui-monospace,Consolas,monospace;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%;min-width:0;resize:vertical}
.csvRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.csvRow label.btn{display:inline-flex;flex-direction:row;cursor:pointer;font-weight:600}
.csvPreview{overflow-x:auto;max-height:50vh;overflow-y:auto}.csvPreview:empty{display:none}
.csvPreview table{border-collapse:collapse;width:100%;font-size:14px}
.csvPreview th,.csvPreview td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.csvPreview th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--card)}
.csvPreview td.num{font-variant-numeric:tabular-nums;font-weight:700}
.csvPreview td.host{overflow-wrap:anywhere;color:var(--muted)}
.csvPreview td.here{color:var(--accent);font-weight:600;white-space:nowrap}.csvPreview td.out{color:var(--muted);white-space:nowrap}
.showEp .player.yt{max-height:80vh}
/* shows: episode titles open the player */
.epLink{color:inherit;text-decoration:none;font-weight:600}.epLink:hover,.epLink:focus-visible{color:var(--accent);text-decoration:underline}
.ep.watched .epLink{font-weight:400}
.csvBox .findRow{margin-top:-6px}
/* shows: where the YouTube episodes play */
.regionBox{margin:10px 0 0;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--card)}
.regionBox p{margin:0 0 4px;overflow-wrap:anywhere}.regionBox p:last-child{margin:0}
/* Stories inside the Obsidian app (?embed=1): the same page without the site header / footer */
.embedBody{min-height:100vh}
.embedMain{flex:1;min-width:0}
.storyPage .crumbs{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.saveNoteBtn{font:inherit;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--o-line,var(--line));background:var(--o-card,var(--card));color:var(--o-accent,var(--accent));cursor:pointer}
.saveNoteBtn:hover:not(:disabled){border-color:var(--o-accent,var(--accent))}.saveNoteBtn:disabled{opacity:.7;cursor:default}
/* Stories → Request: research a subject with the local AI */
.storyRequest{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:6px 12px;border-radius:999px;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-accent);text-decoration:none;white-space:nowrap}
.storyRequest svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.storyRequest:hover{border-color:var(--o-accent)}
.research{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:22px 24px 80px;max-width:1200px;margin:0 auto}
.rsSide h2{font-size:15px;margin:0 0 8px;color:var(--o-muted);text-transform:uppercase;letter-spacing:.06em}
.rsNew{width:100%;font:inherit;font-weight:600;padding:8px 10px;margin-bottom:10px;border-radius:10px;border:1px dashed var(--o-line);background:none;color:var(--o-accent);cursor:pointer}
.rsList{display:flex;flex-direction:column;gap:4px}
.rsItem{display:flex;align-items:stretch;gap:2px;border-radius:10px}.rsItem.on{background:var(--o-accent-soft)}
.rsOpen{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--o-ink);cursor:pointer}
.rsOpen:hover{background:var(--o-hover)}.rsOpen b{overflow-wrap:anywhere}.rsOpen span{font-size:12px}
.rsDel{font:inherit;border:0;background:none;color:var(--o-faint);cursor:pointer;padding:0 8px;border-radius:8px}.rsDel:hover,.rsDel.confirm{color:var(--o-down)}
.rsMain{min-width:0}
.rsHead h1{margin:6px 0 4px}.rsBack{font-size:14px;color:var(--o-link);text-decoration:none}
.rsForm{display:flex;flex-direction:column;gap:12px;background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:16px;margin:14px 0}
.rsForm label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px;min-width:0}
.rsForm textarea,.rsForm input:not([type=checkbox]),.rsForm select,.rsAsk textarea{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--o-line);border-radius:10px;background:var(--o-bg);color:var(--o-ink);width:100%;min-width:0}
/* Stories as its own page (/stories, main menu): the Notes look, with the site footer (sign out) */
.storiesMain{min-width:0}
.storiesBody .foot{display:flex}
/* the row of open tabs: Stories, then each story open in another browser tab */
.storyTabRow{display:flex;gap:4px;overflow-x:auto;padding:2px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--o-line);scrollbar-width:thin}
.stTab{flex:none;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:9px 9px 0 0;border:1px solid var(--o-line);border-bottom:0;background:var(--o-side);color:var(--o-muted);text-decoration:none}
.stTab:hover{color:var(--o-ink);background:var(--o-hover)}
.stTab.on{background:var(--o-card);color:var(--o-ink);box-shadow:inset 0 2px 0 var(--o-accent)}
.stories > .storyCol > .storyTabRow{margin-top:0}
.obsStoryTabs{display:contents}.obsStoryTabs[hidden]{display:none}
.obsTab.stOpen{max-width:220px}
/* /stories (outside Notes): story tabs have a × too */
.stTab.hasX{display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 12px}
.stTab .stTabLink{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.stTab .obsTabX{width:22px;height:22px}
/* who took the picture (from the outlet or channel it came from) */
.picBy{position:absolute;right:6px;bottom:6px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:600;line-height:1.3;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.6);color:#fff}
.teaserList .picBy{display:none}
.storyPic.noPic .picBy{display:none}
.storyHeroFig{position:relative;margin:10px 0}.storyHeroFig .storyHero{margin:0;display:block}
.storyHeroFig .picBy{right:10px;bottom:10px;font-size:12px}
.sBadge.feat{background:color-mix(in srgb,var(--o-accent) 18%,transparent);color:var(--o-accent)}
.sBadge.info{background:color-mix(in srgb,#2563eb 15%,transparent);color:#2563eb}

[data-theme="dark"] .sBadge.info {color:#7aa7ff}

/* signed-in account, its plan, and its own topics; Feature a video (you) */
.acctBar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 0;font-size:13.5px;color:var(--o-muted)}
.acctBar b{color:var(--o-ink)}
.topicsBtn,.storyFeature{font:inherit;font-size:13.5px;font-weight:600;padding:4px 12px;border-radius:999px;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-accent);cursor:pointer}
.storyFeature{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:6px 12px;white-space:nowrap}
.storyFeature svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.topicsBtn:hover,.storyFeature:hover{border-color:var(--o-accent)}
.topicsForm,.featureForm{display:flex;flex-direction:column;gap:10px;margin:10px 0 0;padding:14px;border:1px solid var(--o-line);border-radius:14px;background:var(--o-card)}
.topicsForm p{margin:0;font-size:13.5px}
.featureForm label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px;min-width:0}
.topicsForm textarea,.featureForm input{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--o-line);border-radius:10px;background:var(--o-bg);color:var(--o-ink);width:100%;min-width:0}
.featureActions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.featureActions button{font:inherit;font-weight:600;padding:7px 14px;border-radius:10px;border:1px solid var(--o-accent);background:var(--o-accent);color:#fff;cursor:pointer}
.featureActions button.featureCancel{background:none;color:var(--o-ink);border-color:var(--o-line)}
/* Your town: the button next to Your topics, its form, the box at the top of the Your town tab, and the card badge */
.townBtn{font:inherit;font-size:13.5px;font-weight:600;padding:4px 12px;border-radius:999px;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-accent);cursor:pointer}
.townBtn:hover{border-color:var(--o-accent)}
.townForm{display:flex;flex-direction:column;gap:10px;margin:10px 0 0;padding:14px;border:1px solid var(--o-line);border-radius:14px;background:var(--o-card)}
.townForm p{margin:0;font-size:13.5px}
.townFields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.townForm label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px;min-width:0}
.townForm input{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--o-line);border-radius:10px;background:var(--o-bg);color:var(--o-ink);width:100%;min-width:0}
.featureActions button.townClear{background:none;color:var(--o-ink);border-color:var(--o-line)}
.townBox{margin:10px 0 12px;padding:14px 16px;border:1px solid var(--o-line);border-left:3px solid #0f766e;border-radius:14px;background:var(--o-card)}
.townBox h2{margin:0 0 6px;font-size:1.15em}
.townBox p{margin:6px 0;font-size:14px}
.townFacts{margin:0 0 8px;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:14px}
.townFacts a{color:var(--o-accent)}
.townBox .btn{margin-top:4px}
.sBadge.local{background:color-mix(in srgb,#0f766e 16%,transparent);color:#0f766e}

[data-theme="dark"] .sBadge.local {color:#2dd4bf}
[data-theme="dark"] .townBox {border-left-color:#2dd4bf}

.featureActions button:disabled{opacity:.6;cursor:default}
.featureStatus,.topicsStatus{font-size:13.5px;min-width:0;overflow-wrap:anywhere}
/* raw footage (official / wire livestreams) and its key moments: each opens the video at that second */
.sBadge.raw{background:color-mix(in srgb,#0f766e 16%,transparent);color:#0f766e}

[data-theme="dark"] .sBadge.raw {color:#5eead4}

.moments{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:2px}
.moments a{display:flex;gap:8px;align-items:baseline;padding:3px 6px;border-radius:7px;color:var(--o-ink);text-decoration:none;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.moments a:hover{background:var(--o-hover)}
.mT{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;color:var(--o-accent);min-width:3.6em}
.storyRaw{margin:18px 0 0}.storyRaw h2{margin:0 0 4px}.storyRaw > p{margin:0 0 10px;font-size:13.5px}
.rawItem{padding:10px 12px;border:1px solid var(--o-line);border-left:3px solid #0f766e;border-radius:12px;background:var(--o-card);margin-bottom:10px}
.rawHead{display:block;color:var(--o-ink);text-decoration:none;overflow-wrap:anywhere}.rawHead:hover b{text-decoration:underline}
.rawWait{margin:6px 0 0;font-size:13px}
.feedBuilding{margin:10px 0 0;padding:8px 12px;border-radius:10px;border:1px solid var(--o-line);border-left:3px solid var(--o-accent);background:var(--o-card);font-size:13.5px}
.rsProps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.rsSources{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}.rsSources legend{font-weight:600;font-size:14px;margin-bottom:4px}
.rsSources label{flex-direction:row;align-items:center;gap:6px;font-weight:400}.rsSources input{accent-color:var(--o-accent)}
.rsNote{font-size:13px;margin:0}
.rsActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rsGo,.rsAsk button{font:inherit;font-weight:700;padding:9px 18px;border-radius:999px;border:0;background:var(--o-accent);color:#fff;cursor:pointer}.rsGo:disabled,.rsAsk button:disabled{opacity:.6;cursor:default}
.rsStatus{color:var(--o-muted);font-size:14px}.rsStatus.bad{color:var(--o-down)}
.rsResult{display:flex;flex-direction:column;gap:12px}
.rsTitle{margin:6px 0 0}.rsMeta{margin:0;font-size:13px;overflow-wrap:anywhere}
.rsBrief{background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;padding:14px 18px;line-height:1.6}
.rsBrief h3,.rsMsg h3{font-size:16px;margin:14px 0 4px}.rsBrief h3:first-child{margin-top:0}
.rsBrief ul,.rsMsg ul{padding-left:1.2em;margin:4px 0}.rsBrief p,.rsMsg p{margin:4px 0}
.rsCite{font-size:12px;font-weight:700;text-decoration:none;color:var(--o-link);vertical-align:super;margin-left:1px}
.rsSrc summary{cursor:pointer;font-weight:700}
.rsPack{padding-left:1.6em;margin:8px 0;display:flex;flex-direction:column;gap:4px}.rsPack li,.rsMore li{overflow-wrap:anywhere}
.rsPack li:target{background:var(--o-accent-soft);border-radius:6px}
.rsMore ul{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:4px}.rsMore summary{cursor:pointer;color:var(--o-muted)}
.rsKind{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;margin-right:6px;border-radius:6px;background:var(--o-tag-bg);color:var(--o-tag-ink)}
.rsKind.k-reddit,.rsKind.k-reviews,.rsKind.k-youtube{background:color-mix(in srgb,var(--unv,#c2410c) 15%,transparent);color:var(--unv,#c2410c)}
.rsChat h3{margin:8px 0}.rsMsgs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.rsMsg{padding:10px 14px;border-radius:12px;max-width:100%;overflow-wrap:anywhere}.rsMsg.you{align-self:flex-end;background:var(--o-accent-soft)}.rsMsg.ai{background:var(--o-card);border:1px solid var(--o-line)}.rsMsg.bad{color:var(--o-down)}
.rsAsk{display:flex;gap:8px;align-items:flex-end}.rsAsk textarea{flex:1}
@media (max-width:760px){.research{grid-template-columns:1fr;padding:14px 14px 60px}.rsSide{order:2}}
/* ---------- Saved: small cards (picture on top, title, the first point from the story's page) ---------- */
.savedGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.savedCard{position:relative;display:flex;flex-direction:column;background:var(--o-card);border:1px solid var(--o-line);border-radius:12px;overflow:hidden;min-width:0}
.savedPic{position:relative;display:block;aspect-ratio:16/9;background:var(--o-hover);overflow:hidden}
.savedPic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.savedPic .picPh{position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;font-weight:700;font-size:13px;color:var(--o-muted)}
.savedPic:not(.noPic) .picPh{visibility:hidden}
.savedPic .playMark{position:absolute;left:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center}
.savedPic .playMark svg{width:13px;height:13px;fill:#fff}
.savedTitle{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:9px 11px 0;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--o-ink);text-decoration:none}
.savedTitle:hover{color:var(--o-link)}
.savedDesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:5px 11px 11px;font-size:13px;line-height:1.4;color:var(--o-muted)}
.savedCard .savedTitle:last-child{margin-bottom:11px}
.savedX{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.55);display:grid;place-items:center;cursor:pointer;opacity:.85}
.savedX:hover{opacity:1;background:rgba(0,0,0,.75)}
.savedX svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.savedTopic .savedGrid{margin-bottom:6px}
@media (max-width:560px){.savedGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.savedTitle{font-size:13.5px}.savedDesc{-webkit-line-clamp:2}}

/* ---------- Inside Fukiso (Zuki's Stories view: WebView2, detected in the page head): Fukiso's own dark theme ---------- */
html[data-host="fukiso"]{color-scheme:dark;background:#0C0B0E}
html[data-host="fukiso"] body.obsBody,html[data-host="fukiso"] .obsBody{
  --o-bg:#0C0B0E;--o-side:#151317;--o-rib:#0C0B0E;--o-line:#2B2930;--o-ink:#FAF5EC;--o-muted:#CBC1B7;--o-faint:#988F87;--o-hover:#2B2930;
  --o-accent:#D7BEE3;--o-accent-soft:#332A35;--o-link:#E4CDEF;--o-tag-bg:#332A35;--o-tag-ink:#D7BEE3;--o-code-bg:#1D1A1F;--o-code-ink:#FFBDC5;
  --o-card:#151317;--o-up:#D7BEE3;--o-down:#FFBDC5;--pin-hot:#E4CDEF;
  background:var(--o-bg);color:var(--o-ink);font-family:Inter,"Segoe UI",system-ui,sans-serif}
html[data-host="fukiso"] .story,html[data-host="fukiso"] .savedCard{border-color:#2B2930}
html[data-host="fukiso"] .story:hover,html[data-host="fukiso"] .savedCard:hover{border-color:#826D87}
html[data-host="fukiso"] .chip.on,html[data-host="fukiso"] .storyTabs button.on{background:#332A35;border-color:#826D87;color:#E4CDEF}
/* buttons filled with the accent: Fukiso puts dark text on its light lilac (white would be hard to read) */
html[data-host="fukiso"] .graphRow button.primary,html[data-host="fukiso"] .chatMsg.me,html[data-host="fukiso"] .ptPlay.on,html[data-host="fukiso"] .featureActions button,html[data-host="fukiso"] .rsGo,html[data-host="fukiso"] .rsAsk button,html[data-host="fukiso"] .btn.primary{color:#130D1D}
html[data-host="fukiso"] ::-webkit-scrollbar{width:10px;height:10px}html[data-host="fukiso"] ::-webkit-scrollbar-thumb{background:#3A3740;border-radius:6px}html[data-host="fukiso"] ::-webkit-scrollbar-track{background:#0C0B0E}

/* ---------- Stories round 3 (2026-10-18) ---------- */
/* PCs have no row of open-story tabs (phones keep it) */
html:not([data-device=phone]) .storiesMain .storyTabRow{display:none!important}
/* story page: one column on phones (summary, ask, videos, coverage); on PCs the summary and coverage on the left,
   Ask about this story and the videos beside them, with a bigger picture and headline */
.storyLayout{display:flex;flex-direction:column}
.storyMainCol,.storySide{display:contents}
.storyLayout .storyPageBody{order:1}.storyLayout .sumAudio{order:2}.storyLayout .storyChat{order:3}.storyLayout .storySideVids{order:4}.storyLayout .storyRest{order:5}
@media (min-width:1101px){
  .storyPage{max-width:1480px;padding:22px 36px 80px}
  .storyLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:0 30px;align-items:start}
  .storyMainCol,.storySide{display:block;min-width:0}
  .storySide{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto;scrollbar-width:thin;padding-bottom:4px}
  .storySide .storyChat{margin-top:10px}
  .storySide .chatMsgs{max-height:360px}
  .storyHero{max-height:560px;border-radius:18px}
  .storyH{font-size:2.6em;line-height:1.15}
}
/* pinned stories as filters; a war's running story; more saves of the same story */
.chip.pin{display:inline-flex;align-items:center;gap:5px}
.chip.pin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.sBadge.war{background:color-mix(in srgb,#dc2626 15%,transparent);color:#dc2626}

[data-theme="dark"] .sBadge.war {color:#f87171}

.savedMore{margin:-4px 11px 11px;font-size:12px;color:var(--o-faint)}
/* the side column is narrow: a small video's Like / Dislike go in a row under it, so its title gets the width */
@media (min-width:1101px){
  .storySide .storyVideo:not(.big){flex-wrap:wrap}
  .storySide .storyVideo:not(.big) .vThumb{width:132px}
  .storySide .storyVideo:not(.big) .vVotes{flex-direction:row;width:100%;justify-content:flex-end}
  .storySide .storyVideo .vText b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
/* ---------- round 4 (2026-10-18) ---------- */
/* Photos and Videos: wider page and bigger pictures on PCs */
.wrap.wide{max-width:1640px}
@media (min-width:1101px){
  .wrap.wide{padding-left:32px;padding-right:32px}
  .wrap.wide .grid.feed{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px}
  .wrap.wide .card.video .cardTitle{font-size:1.08rem}
  .wrap.wide .masonry{columns:3 400px;column-gap:18px}
  .wrap.wide .tile{margin-bottom:18px}
}
/* Demos: scoreboard beside the demos, a compact card, the player */
.demosLayout{display:grid;gap:18px}
@media (min-width:980px){.demosLayout{grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start}.demosLayout .board{position:sticky;top:84px;margin:0;max-height:calc(100vh - 100px);overflow:auto}}
.demosPage .demos{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px}
@media (max-width:560px){.demosPage .demos{grid-template-columns:1fr}}
.demosLayout .board{padding:6px 16px 10px}
.demosLayout .board h2{margin:10px 0 4px}
.ranking li{grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"r t n" "r b c";gap:3px 10px;padding:8px 0;align-items:center}
.ranking .rank{grid-area:r;text-align:center}
.ranking li > a{grid-area:t}
.ranking .net{grid-area:n;text-align:right;font-variant-numeric:tabular-nums;color:var(--accent)}
.ranking .net.neg{color:var(--bad)}
.ranking .scoreBar{grid-area:b;display:block}
.ranking .nums{grid-area:c;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums}
@media (max-width:560px){.ranking li{grid-template-columns:26px minmax(0,1fr) auto}.ranking .scoreBar{display:block}}
.demo{padding:12px 14px}
.demo.playing{border-color:var(--accent)}
.demo .prose.small{margin:8px 0 0;font-size:.9rem}
.dPlayer{display:flex;gap:12px;align-items:center}
/* a song's cover picture: a small square before the play button on the list, bigger on the track's own page */
.dCover{flex:none;width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--card)}
.dPlayer.hasCover{gap:10px}
.demo.single .dCover{width:140px;height:140px;border-radius:16px}
@media (max-width:560px){
  .dCover{width:52px;height:52px}
  .demo.single .dCover{width:96px;height:96px}
}
.dPlay{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .15s}
.dPlay:hover{transform:scale(1.06)}
.dPlay svg{width:20px;height:20px;fill:currentColor}
.dMain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.dMain .demoHead h2{font-size:1.05rem}
.demo.single .dMain h1{margin:0}
.dBar{display:flex;align-items:center;gap:8px}
.dSeek{flex:1;min-width:0;height:6px;border-radius:3px;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--line) var(--p,0%))}
.dSeek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.dSeek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.dTime{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px}
.dDur{text-align:right}
/* Music list: while a track sits in the queue bar (playing or paused) the bar shows its time, so that card's own time row
   is a plain line instead (.current = the loaded track, site.js paintTrack) */
[data-queue] .demo.current .dBar>*{display:none}
[data-queue] .demo.current .dBar::before{content:"";flex:1;height:2px;border-radius:1px;background:var(--muted);opacity:.5;margin:6px 0}
.dMute{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.dMute:hover{color:var(--accent)}
.dMute svg{width:18px;height:18px;fill:currentColor}
.dSeek.dVol{flex:none;width:80px}
@media (max-width:480px){.dSeek.dVol{width:56px}}
.dPlayer audio{flex:1;min-width:0;width:100%;margin:0}
.dPlayer.enhanced audio{display:none}
.dPlayer:not(.enhanced) .dBar,.dPlayer:not(.enhanced) .dPlay{display:none}
.dFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px}
.dFoot .voteBtn{padding:5px 12px;font-size:.85rem}
.dDl{font:600 .85rem var(--body);padding:6px 12px;border-radius:999px;border:2px solid var(--line);color:var(--ink);text-decoration:none}
.dDl:hover{border-color:var(--accent);color:var(--accent)}
/* "+ Queue" / "✓ In queue" per track (site.js; the queue is this browser's own) */
.dQueue{font:600 .85rem var(--body);padding:5px 12px;border-radius:999px;border:2px solid var(--line);background:none;color:var(--ink);cursor:pointer;white-space:nowrap}
.dQueue:hover{border-color:var(--accent);color:var(--accent)}
.dQueue.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.lblS{display:none}
/* phones: one row per track: ▲ 0  ▼ 0 ………… + Queue  🛒 Buy  ⬇ (the words hide, the icons and counts stay) */
@media (max-width:560px){
  .demos .dFoot{flex-wrap:nowrap;justify-content:flex-start;gap:6px}
  .demos .vote{flex:none;gap:6px;flex-wrap:nowrap}
  .demos .dFoot .voteBtn{padding:6px 10px;font-size:.85rem;gap:5px}
  .demos .dFoot .lbl{display:none}
  .demos .dFoot .lblS{display:inline}
  .demos .dQueue{margin-left:auto;padding:6px 10px;font-size:.8rem}
  .demos .dBuy,.demos .dDl{padding:6px 10px;font-size:.8rem;white-space:nowrap}
}
.dBuy{font:600 .85rem var(--body);padding:6px 14px;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:#fff;text-decoration:none}
.dBuy:hover{filter:brightness(1.1)}
/* Music: one queue for the whole list (site.js): a bar on top of the tracks + the Queue menu */
.mQueueWrap{grid-column:1/-1;position:sticky;top:76px;z-index:5;pointer-events:none}
.mQueueWrap>.mQueue{pointer-events:auto}
.mQueue{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 6px 20px rgb(0 0 0/.12);overflow:visible}
.mQueue.on{border-color:var(--accent)}
/* the bar's seek row: time · slider · length on its own line, with room under it so it never touches the border */
.mBar{flex:1 1 100%;order:10;display:flex;align-items:center;gap:10px;margin-top:-2px;padding-bottom:2px}
.mBar .dSeek{flex:1;width:auto;min-width:0}
.mTime{flex:none;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px}
.mTime.mDur{text-align:right}
.mCtl{display:flex;align-items:center;gap:4px;flex:none}
.mBtn{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.mBtn:hover{color:var(--accent)}
.mBtn svg{width:18px;height:18px;fill:currentColor}
.mBtn.mPlay{width:44px;height:44px;background:var(--accent);color:var(--accent-ink)}
.mBtn.mPlay:hover{color:var(--accent-ink);filter:brightness(1.08)}
.mBtn.mPlay svg{width:20px;height:20px}
.mNow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mNow b,.mNow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mSub{font-size:.8rem;color:var(--muted)}
.mVolBox{display:flex;align-items:center;gap:4px;flex:none}
.mMenuWrap{position:relative;flex:none}
.mMenuBtn{font:600 .85rem var(--body);padding:7px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.mMenuBtn:hover,.mMenuBtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.mMenu{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 12px 32px rgb(0 0 0/.25);z-index:20}
.mMenu[hidden]{display:none}
.mMenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.mMenu button:hover,.mMenu button:focus-visible{background:color-mix(in srgb,var(--accent) 14%,transparent);outline:none}
.mMenu [aria-checked]::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}
.mMenu [role="menuitemcheckbox"]::before{border-radius:4px}
.mMenu [aria-checked="true"]::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--card)}
.mGroup{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.mHead{display:block;padding:6px 10px 2px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mUpNext .mN{flex:none;min-width:22px;color:var(--muted);font-variant-numeric:tabular-nums}
.mUpNext [aria-current="true"]{color:var(--accent);font-weight:700}
.mUpNext [aria-current="true"] .mN{color:var(--accent)}
/* queue rows can be dragged into a new order: a grip, a faded row while it moves, a line where it will land */
.mHead small{font-weight:500;letter-spacing:0;text-transform:none}
.mMenu button small{display:block;flex-basis:100%;margin-left:24px;font-size:.75rem;color:var(--muted)}
.mMenu [data-act="keep"]{flex-wrap:wrap;row-gap:0}
.mRow{display:flex;align-items:center;position:relative;cursor:grab}
.mRow:active{cursor:grabbing}
.mRow>button{flex:1;min-width:0}
.mRow .mDel{flex:none;width:34px;padding:8px 0;justify-content:center;color:var(--muted)}
.mRow .mDel:hover,.mRow .mDel:focus-visible{color:#e5484d;background:rgb(229 72 77/.12)}
.mRow .mDel svg{width:16px;height:16px;fill:currentColor}
.mGrip{flex:none;color:var(--muted);font-size:.8rem;letter-spacing:-2px;opacity:.6;touch-action:none;padding:4px 2px;margin:-4px 0}
.mUpNext .mDragging{opacity:.4}
.mUpNext .mOver::after{content:"";position:absolute;left:8px;right:8px;top:-1px;height:2px;border-radius:1px;background:var(--accent);pointer-events:none}
.mUpNext .mOver.mBelow::after{top:auto;bottom:-1px}
/* the queue list comes first on every screen (it is what the menu is for); the options follow */
.mMenu{display:flex;flex-direction:column}
.mUpNext{order:-1;border-top:0;margin-top:0;padding-top:0}
.mMenu .mDone{display:none}
/* phones: the menu is a sheet up from the bottom edge, a Done button pinned at the top, the page dimmed behind it */
@media (max-width:560px){
  .mMenuWrap.open::before{content:"";position:fixed;inset:0;background:rgb(0 0 0/.45);z-index:19}
  .mMenu{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:min(82vh,82dvh);border-radius:18px 18px 0 0;padding:0 10px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -12px 32px rgb(0 0 0/.35)}
  .mMenu .mDone{display:flex;order:-2;position:sticky;top:0;z-index:2;width:auto;margin:0 -10px 4px;padding:12px 20px;justify-content:flex-end;border-radius:18px 18px 0 0;background:var(--card);font-weight:700;color:var(--accent);box-shadow:0 1px 0 var(--line)}
  .mMenu button{padding:10px 10px;font-size:.95rem}
  .mRow .mDel{width:44px;padding:10px 0}
  .mGrip{padding:10px 6px;margin:-10px 0;font-size:1rem}
}
.demo.current{border-color:var(--accent)}
@media (max-width:560px){
  .mQueueWrap{top:64px}
  .mQueue{flex-wrap:wrap;gap:8px 10px}
  .mNow{order:-1;flex-basis:100%}
  .mVolBox{flex:1 1 0;min-width:0}
  .mVolBox .dVol{flex:1;width:auto;min-width:0}
  /* scrolled past the top (site.js adds .stuck): a slim strip edge to edge: a controls row, then the seek row, the only
     highlight a bottom line (accent while playing); the "up next" text goes away */
  .mQueue.stuck{position:fixed;left:0;right:0;width:auto;margin:0;z-index:15;border-radius:0;border-width:0 0 2px;padding:6px 14px 8px;gap:2px 8px;box-shadow:0 8px 20px rgb(0 0 0/.25);animation:mSlideIn .22s ease-out}
  @keyframes mSlideIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
  .mQueue.stuck.on{border-color:var(--accent)}
  .mQueue.stuck .mSub,.mQueue.stuck .mVolBox{display:none}
  .mQueue.stuck .mBar{margin-top:0;padding-bottom:0}
  .mQueue.stuck .mNow{order:0;flex:1 1 auto;min-width:0}
  .mQueue.stuck .mTitle{font-size:.9rem}
  .mQueue.stuck .mBtn{width:32px;height:32px}
  .mQueue.stuck .mBtn.mPlay{width:38px;height:38px}
  .mQueue.stuck .mMenuBtn{padding:6px 11px;font-size:.8rem}
}
/* phones and tablets: the hardware buttons set the volume and the page can't read or change it (iOS ignores audio.volume
   outright), so the slider is hidden there; Mute still works */
@media (pointer:coarse){
  .dVol{display:none}
}
/* Add a show: a close button; the search matches can be closed */
.formHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.closeX{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:22px;line-height:1;text-decoration:none;cursor:pointer;flex:none;padding:0}
.closeX:hover{border-color:var(--accent);color:var(--accent)}
.findResults{position:relative}
.findClose{position:absolute;right:0;top:0;width:30px;height:30px;font-size:18px}
/* a tool's public download (Work Tracking) */
.dlBox{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);display:grid;gap:8px;justify-items:start}
/* Stories: Update summary, step by step; the summary lights up when it's done; audio state next to Listen */
.sumSteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--o-faint)}
.sumSteps li{display:flex;align-items:center;gap:6px}
.sumSteps .dot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font-size:11px;font-weight:700}
.sumSteps li.now{color:var(--o-link);font-weight:700}
.sumSteps li.now .dot{animation:przPulse 1.2s ease-in-out infinite;background:var(--o-accent-soft)}
.sumSteps li.done{color:var(--o-ink)}
.sumSteps li.done .dot{background:var(--o-accent);border-color:var(--o-accent);color:#fff}
.sumProg{flex:1 1 100%;height:6px;border-radius:3px;background:var(--o-line);overflow:hidden}
.sumProg i{display:block;height:100%;background:linear-gradient(90deg,var(--o-accent),var(--o-link));border-radius:3px;transition:width .8s ease}
.sumUpdate.done{border-top-color:#16a34a}
.sumDone{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#16a34a;color:#fff;font-weight:800;flex:none}
.storySummary.justUpdated{animation:przUpdated 3s ease-out 1}
@keyframes przUpdated{0%{box-shadow:0 0 0 0 color-mix(in srgb,#16a34a 70%,transparent);border-color:#16a34a}60%{box-shadow:0 0 0 12px transparent;border-color:#16a34a}100%{box-shadow:none}}
.sumListenWrap{display:flex;align-items:center;gap:8px}
.sumAudioState{font-size:12px;color:var(--o-faint);white-space:nowrap}
.sumAudioState:not(.ready){animation:przPulse 1.4s ease-in-out infinite}
.sumAudioState.ready{color:#16a34a;font-weight:600}
@media (prefers-reduced-motion:reduce){.sumSteps li.now .dot,.sumAudioState,.storySummary.justUpdated{animation:none}}

/* link-only video: password box */
.lockForm { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.lockForm input[type=password] { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.lockForm .err { color: var(--bad); margin: 0; }
.lockForm .btn { align-self: flex-start; }
/* ---------- episode page (2026-10-21): player + switcher + "Not playing?" + tools row + episode list beside it ---------- */
.wrap.showEp{max-width:1480px}
.epLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media (min-width:1100px){.epLayout{grid-template-columns:minmax(0,1fr) 320px;gap:28px}}
.epMain{min-width:0}
.showEp .player{border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.showEp .player.yt{max-height:none}
.plLoad{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;background:#000;color:#cfd6d0;font-size:.95rem;transition:opacity .3s}
.plLoad.done{opacity:0;pointer-events:none}
.plLoad.slow .plLoadText{color:#fff;max-width:420px}
.plSpin{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:plSpin .9s linear infinite}
@keyframes plSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.plSpin{animation-duration:2.4s}}
.plBar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:12px}
.plPick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.plChip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.plChip:hover{border-color:var(--accent)}
.plChip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);cursor:default}
.plChip.solo{cursor:default}
.plChip.busy{opacity:.6}
.plWhere{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plHelpBtn{margin-left:auto;background:none;border:0;padding:6px 2px;font:600 .86rem var(--body);color:var(--accent);cursor:pointer}
.plHelpBtn:hover{text-decoration:underline}
.plHelp{margin:10px 0 0;padding:12px 16px 12px 34px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:.9rem;display:grid;gap:6px}
.plHelp[hidden]{display:none}
.plHelp code{font-size:.82rem}
.plBlocked{margin-top:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--bad);border-left-width:4px;background:var(--card);font-size:.9rem}
.plBlocked[hidden]{display:none}
.plBlocked b{display:block;margin-bottom:2px}
.epHead{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:20px}
.epTitleBox{min-width:0;flex:1 1 280px}
.epTitleBox h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;line-height:1.15}
.epTitleBox .epSub{display:block;font-family:var(--body);font-weight:600;font-size:clamp(1rem,1.6vw,1.15rem);letter-spacing:0;color:var(--muted);margin-top:4px}
.epTitleBox .meta{margin:6px 0 0}
.epTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.epTools .btn{min-height:36px;justify-content:center}
.epTools .iconBtn{width:36px;padding:0;font-size:1.05rem}
.epTools .epWatched.quiet{border-color:var(--line)}
.showEp .epMsg{margin:10px 0 0}
.epSide{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (min-width:1100px){.epSide{position:sticky;top:84px}}
.epSideHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.epSideHead a{color:inherit;text-decoration:none}
.epSideList{position:relative;list-style:none;margin:0;padding:6px;max-height:min(70vh,640px);overflow-y:auto}
.es .esLink{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:inherit;text-decoration:none;font-size:.9rem}
.es a.esLink:hover{background:var(--bg)}
.es.on .esLink{background:var(--accent);color:var(--accent-ink);font-weight:700}
.es.off .esLink{color:var(--muted)}
.esNum{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg);font-size:.78rem;font-weight:700}
.es.watched .esNum{color:var(--accent)}
.es.on .esNum{background:rgba(255,255,255,.22);color:inherit}
.esTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es.watched:not(.on) .esTitle{color:var(--muted)}
@media (max-width:640px){.epTools{width:100%}.epTools .btn{flex:1 1 auto}.epTools .iconBtn{flex:0 0 36px}.plWhere{flex-basis:100%;order:3}}
/* ---------- notes: Download / Edit (2026-10-21) ---------- */
.noteTools{display:flex;justify-content:flex-end;gap:6px;margin:0 0 6px}
.noteTool{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--o-line);background:var(--o-card);color:var(--o-ink);font:600 .82rem var(--body);text-decoration:none;cursor:pointer}
.noteTool:hover{border-color:var(--o-accent);color:var(--o-accent)}
.noteTool[hidden]{display:none}
.noteEdit{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.noteEdit[hidden]{display:none}
.noteEditBar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.noteEditBar .meta{color:var(--o-muted);font-size:.82rem}
.noteEditBtns{margin-left:auto;display:flex;gap:8px}
.noteEditText{width:100%;box-sizing:border-box;min-height:320px;resize:vertical;padding:16px 18px;border-radius:10px;border:1px solid var(--o-line);background:var(--o-bg);color:var(--o-ink);font:400 .95rem/1.6 ui-monospace,"Cascadia Mono",Consolas,monospace;tab-size:4}
.noteEditText:focus-visible{outline:2px solid var(--o-accent);outline-offset:1px}
.noteEditMsg.bad{color:var(--bad)}
/* ---------- show page: Earlier seasons (2026-10-21) ---------- */
.seasonsBox[hidden]{display:none}
.seasonList{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.seasonRow{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.seasonCover{width:46px;height:64px;object-fit:cover;border-radius:6px;flex:none;background:var(--line)}
.seasonInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.seasonLabel{font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.seasonTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seasonActs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.seasonRow{flex-wrap:wrap}.seasonActs{width:100%;justify-content:flex-start}}
/* ---------- show page + show cards, cleaned up (2026-10-21): wider on PC, one toolbar, season tabs, aligned episode rows ---------- */
.wrap.detail.showPage{max-width:1100px}
.seasonTabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.seasonTab{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none}
a.seasonTab:hover{border-color:var(--accent)}
.seasonTab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.showPage .showHead{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;margin-bottom:24px}
.showPage .showHead:not(:has(.showCover)){grid-template-columns:minmax(0,1fr)}
.showPage .showCover{width:100%;max-width:none;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.showPage .showInfo h1{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.02em;line-height:1.1}
.showPage .showInfo .meta{margin:0 0 12px}
.showPage .showDesc{max-height:7.5em;margin:0 0 12px}
.showPage .watchLinks{margin:12px 0 0}
.showControls{margin:0 0 24px;text-align:left}
.showTools{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.showGo .btn{min-height:44px;padding:0 22px}
.showMore{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.showMore .btn{min-height:40px;padding:0 16px;font-size:.9rem;justify-content:center}
.showControls .showSyncMsg{margin:10px 0 0;min-height:0}
.showControls .showSyncMsg:empty{display:none}
.showControls .switchBox,.showControls .seasonsBox,.showControls .rescanBox,.showControls .ytWhere{margin:14px 0 0;text-align:left}
.ytWhere summary{cursor:pointer;font-weight:600}
.showPage .csvBox{margin:0 0 18px}
.showPage .eps{max-height:none;overflow:visible}
.showPage .ep{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px}
.showPage .ep .epActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:nowrap}
.showPage .ep .epActions .btn{min-height:34px;min-width:84px;justify-content:center}
.showPage .ep.next{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.showPage .epNone{padding:18px 16px}
@media (max-width:760px){
  .showPage .showHead{grid-template-columns:110px minmax(0,1fr);gap:16px}
  .showPage .showInfo h1{font-size:1.45rem}
  .showTools{flex-direction:column;align-items:stretch}
  .showGo .btn{width:100%;justify-content:center}
  .showMore{margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .showMore .btn{width:100%;min-height:44px}
  .showPage .ep{grid-template-columns:56px minmax(0,1fr) auto;padding:10px 12px;gap:10px}
  .showPage .ep .epActions .btn{min-width:0;padding:0 12px}
  .showPage .ep .epActions .epAdd{display:none}
}
.showCard .thumb{position:relative}
.seasonCount{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.showPage .csvBox:not([open]){padding:14px 20px;gap:0}

/* ---------- show page: season dropdown beside Add player links (2026-10-21) ---------- */
.epsBar{display:flex;gap:12px;align-items:stretch;margin:0 0 18px}
.epsBar .csvBox{flex:1;min-width:0;margin:0}
.seasonPick{display:flex;align-items:center;gap:10px;padding:0 6px 0 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);font-weight:700;white-space:nowrap}
.seasonPick span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seasonPick select{font:600 .95rem var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:40px;cursor:pointer}
.seasonPick select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.epsBar .csvBox:not([open]){display:flex;align-items:center}
@media (max-width:760px){.epsBar{flex-direction:column}.seasonPick{justify-content:space-between;padding:8px 8px 8px 16px}.seasonPick select{flex:1;max-width:70%}}.seasonPick{align-self:flex-start;min-height:54px;box-sizing:border-box}
@media (max-width:760px){.seasonPick{align-self:stretch}}
.epsBar .csvBox:not([open]) summary{flex:1;justify-content:flex-start}

/* StudyForge (/studyforge): tabs, cards, tiles, bars, the tutor chat with its question cards, interactive quizzes */
.sf .sfHero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sf .sfHeroBar { min-width: 220px; display: grid; gap: 4px; }
.sfTabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 20px; overflow-x: auto; scrollbar-width: none; }
.sfTabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.sfTabs a:hover { color: var(--ink); }
.sfTabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.sfCount { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .75rem; text-align: center; }
.sfGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sfCard { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.sfCard:hover { border-color: var(--accent); transform: translateY(-1px); }
.sfCardTitle { font-weight: 700; font-size: 1.05rem; }
.sfStats { display: flex; gap: 12px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.sfStats b { color: var(--ink); }
.sfBar { display: inline-block; width: 100%; min-width: 90px; height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; }
.sfBar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sfChip { align-self: flex-start; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sfChip.accent { color: var(--accent); border-color: var(--accent); }
.sfChip.soon { color: var(--bad); border-color: var(--bad); }
.sfTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sfTiles > div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: grid; gap: 2px; }
.sfTiles b { font-size: 1.4rem; font-family: var(--display); }
.sfTiles span { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.sf .sfList { list-style: none; padding: 0; margin: .4rem 0 1.4rem; display: grid; gap: 8px; }
.sf .sfList li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.sf .sfList li[hidden] { display: none; }
.sf .sfList .grow { flex: 1; min-width: 0; }
.sf .sfList .sfBar { width: 120px; flex: none; }
.sf .sfList.numbered { counter-reset: n; }
.sf .sfList.numbered li::before { counter-increment: n; content: counter(n); font-weight: 700; color: var(--accent); }
.sfPct { width: 42px; text-align: right; }
.sfFilter { width: 100%; max-width: 360px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; margin-bottom: 10px; }
.sf .btn.small { padding: 6px 14px; font-size: .88rem; }
.sfHow { margin-top: 28px; }
/* tutor */
.sfStages { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 14px; }
.sfStagesTop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sfStageRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.sfStageRow span { text-align: center; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); font-size: .88rem; font-weight: 600; }
.sfStageRow .on { color: var(--ink); border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.sfStageRow .done { color: var(--accent); }
.sfLessonScores { margin: 12px 0 0; padding-left: 1.3rem; display: grid; gap: 6px; }
.sfLessonScores .sfBar { width: 120px; margin: 0 6px; }
.sfChats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sfChats a { font-size: .85rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.sfChats a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.sfChat { display: grid; gap: 14px; }
.sfMsg { max-width: 860px; padding: 14px 16px; border-radius: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.sfMsg.you { justify-self: end; max-width: 640px; background: var(--accent); color: var(--accent-ink); white-space: pre-wrap; border-bottom-right-radius: 4px; }
.sfMsg.ai { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.sfMsg.ai h2 { font-size: 1.2rem; margin: 1.1em 0 .4em; } .sfMsg.ai h3 { font-size: 1.05rem; }
.sfMsg table, .sfGcard table { border-collapse: collapse; margin: 8px 0; }
.sfMsg th, .sfMsg td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.sfModelTag { margin: 8px 0 0; font-size: .75rem; }
.sfGcard { margin-top: 12px; padding: 14px; border: 2px solid var(--accent); border-radius: 14px; background: var(--bg); }
.sfGcard.graded { border-width: 1px; border-color: var(--line); }
.sfGcard.old { opacity: .55; }
.sfGhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sfGq { margin-top: 12px; }
.sfGq p { margin: 0 0 6px; }
.sfGchoices { margin: 0; padding-left: 1.6rem; display: grid; gap: 4px; }
.sfGchoices li { padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; }
.sfGchoices li.picked { border-color: var(--line); font-weight: 600; }
.sfGchoices li.right { border-color: var(--accent); color: var(--accent); }
.sfGchoices li.wrong { border-color: var(--bad); color: var(--bad); text-decoration: line-through; }
.sfWhy { margin: 6px 0 0 !important; padding: 6px 10px; border-left: 3px solid var(--bad); background: var(--card); border-radius: 0 8px 8px 0; font-size: .92rem; }
.sfPill { font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sfPill.good, .sfPill.accent { color: var(--accent); border-color: var(--accent); }
.sfPill.warn { color: #c98a00; border-color: #c98a00; }
.sfPill.bad { color: var(--bad); border-color: var(--bad); }
/* lessons + quizzes */
.sfLessonWrap { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1000px) { .sfLessonWrap { grid-template-columns: 240px minmax(0, 1fr); } .sfSide { position: sticky; top: 90px; align-self: start; } }
.sfSide ol { padding-left: 1.2rem; display: grid; gap: 6px; margin: 8px 0 0; }
.sfSide a { text-decoration: none; color: var(--muted); }
.sfSide a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.sfLesson { max-width: 760px; }
.sfSummary { font-size: 1.08rem; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 12px 12px 0; }
.sfTerms { display: grid; gap: 8px; }
.sfTerms div { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.sfTerms dt { font-weight: 700; } .sfTerms dd { margin: 2px 0 0; color: var(--muted); }
.sfExample { padding: 4px 16px 12px; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; }
.sfPager { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.sfQuiz { display: grid; gap: 14px; max-width: 760px; }
.sfQ { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card); margin: 0; }
.sfQ legend { padding: 0 6px; font-weight: 600; }
.sfQ.ok { border-color: var(--accent); } .sfQ.no { border-color: var(--bad); }
.sfQ textarea { width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.sfChoice { display: flex; gap: 10px; align-items: center; padding: 9px 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
.sfChoice:hover { border-color: var(--accent); }
.sfChoice:has(input:checked) { border-color: var(--ink); }
.sfChoice.right { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sfChoice.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.sfExplain, .sfModel { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); font-size: .92rem; }
.sfQuizFoot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sfScore { font-weight: 700; } .sfScore.good { color: var(--accent); } .sfScore.warn { color: #c98a00; } .sfScore.bad { color: var(--bad); }
.sfAsk { margin-top: 16px; display: grid; gap: 8px; }
.sfAskRow { display: flex; gap: 8px; align-items: flex-end; }
.sfAskRow textarea { flex: 1; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; resize: vertical; }
.sfQuick { display: flex; gap: 6px; flex-wrap: wrap; }
.sfCardForm { display: grid; gap: 10px; }
.sfWaiting { color: var(--muted); font-style: italic; }
.sfMsg.imported { border-style: dashed; opacity: .9; }
.sfTag { display: block; margin-top: 6px; font-size: .75rem; opacity: .8; }.sfMethods { display: inline-flex; gap: 3px; margin: 0 6px; vertical-align: middle; }
.sfMethods span { font-size: .7rem; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.sfMethods span.done { color: var(--accent); border-color: var(--accent); }
.sfMethods span.next { color: var(--ink); border-color: var(--ink); font-weight: 700; }/* ---- Articles (2026-11-03): the Articles tab, the reader, loading screens and the queue tray ---- */
.loadBox{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--o-line);border-radius:14px;background:var(--o-card);margin:10px 0}
.loadBox .sumProg{height:8px}
.loadNote{font-size:13px}
.sumNote{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:var(--o-hover);font-size:13.5px;color:var(--o-muted)}
.articleList{display:flex;flex-direction:column;gap:14px;padding:4px 0 40px}
.artIntro{font-size:13px;margin:0 0 4px}
.artCard{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:12px;border:1px solid var(--o-line);border-radius:14px;background:var(--o-card)}
.artCard:not(:has(.artPic)){grid-template-columns:1fr}
.artPic img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block;background:var(--o-hover)}
.artCardBody{display:flex;flex-direction:column;gap:6px;min-width:0}
.artCardBody .storyMeta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12.5px;color:var(--o-muted)}
.artCardBody .storyMeta .sBadge{margin:0}
.artCardBody .storyTitle{font-size:17px;font-weight:700;line-height:1.3;color:var(--o-ink);text-decoration:none}
.artCardBody .storyTitle:hover{text-decoration:underline}
.artCardBody .storySnip{margin:0;font-size:14px;color:var(--o-muted)}
.artActions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.artActions .btn{font-size:13px;padding:5px 12px}
.sBadge.pay{background:color-mix(in srgb,#b45309 16%,transparent);color:#b45309}
.sBadge.full{background:color-mix(in srgb,#16a34a 14%,transparent);color:#15803d}
.sBadge.ok{background:#16a34a;color:#fff}

[data-theme="dark"] .sBadge.pay {color:#fbbf24}
[data-theme="dark"] .sBadge.full {color:#4ade80}

.readLink{font-size:12px;font-weight:700;margin-left:6px;padding:0 6px;border:1px solid var(--o-line);border-radius:6px;text-decoration:none;color:var(--o-link)}
.articlePage{max-width:1180px;margin:0 auto;padding:22px 28px 80px}
.articlePage .crumbs{display:flex;gap:14px}
.artHead h1{font-size:30px;line-height:1.2;margin:4px 0 8px}
.artOutlet{display:flex;align-items:center;gap:6px;margin:0;font-weight:700;font-size:14px}
.artStand{font-size:17px;line-height:1.5;color:var(--o-muted);margin:0 0 8px}
.artMeta{font-size:13px;margin:0 0 12px}
.artImg{width:100%;max-height:440px;object-fit:cover;border-radius:14px;margin:0 0 14px;display:block}
.artNotice{padding:10px 14px;border-left:4px solid #b45309;background:color-mix(in srgb,#b45309 10%,transparent);border-radius:0 10px 10px 0;font-size:14.5px}
.artSummary ul{padding:0;list-style:none}
.artSummary .ptDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o-accent);margin:9px 8px 0 9px;flex:none}
.artCols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;margin-top:18px}
.artSide{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
.artSide section,.artDetails{border:1px solid var(--o-line);border-radius:14px;padding:12px 16px;background:var(--o-card)}
.artSide h2,.artDetails h2,.artText h2{font-size:16px;margin:0 0 8px}
.artDetails h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--o-muted);margin:12px 0 4px}
.artDetails ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.55}
.artQuotes li{margin-bottom:6px}
.artText{margin-top:18px}
.artRights{font-size:12.5px}
.artBlocks{font-size:17px;line-height:1.75;max-width:70ch}
.artBlocks h3{font-size:19px;margin:1.2em 0 .4em}
.artBlocks mark{background:color-mix(in srgb,#facc15 60%,transparent);color:inherit;border-radius:3px}
.artFind{display:flex;flex-direction:column;gap:4px;font-size:13px;margin-bottom:10px}
.artFind input,.artSearchForm input{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--o-line);border-radius:9px;background:var(--o-bg);color:var(--o-ink);font:inherit}
.artChips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.artChips .chip{font-size:12.5px;text-decoration:none}
.artSearchForm{display:flex;gap:6px}
.artRelList{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.artRelList li{display:block}
.artRelList .leanDot{margin-right:6px}
.artLoading{max-width:640px;margin:30px auto}
.artLoadTitle{font-weight:700;font-size:16px;margin:0 0 4px}
.artWaitSnip{font-size:14px}
.artQueue{position:fixed;right:16px;bottom:16px;z-index:30;width:min(360px,calc(100vw - 32px));max-height:60vh;overflow:auto;background:var(--o-card);border:1px solid var(--o-line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px 12px}
.aqHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px}
.aqClose{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--o-muted)}
.aqRow{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-top:1px solid var(--o-line);font-size:13px}
.aqRow a{font-weight:700;color:var(--o-ink);text-decoration:none}
.aqRow.queued .sumProg i{background:var(--o-faint)}
.aqRow.done .sumProg i{background:#16a34a}
@media (max-width:900px){.artCols{grid-template-columns:1fr}.artSide{position:static}}
@media (max-width:560px){.articlePage{padding:14px 16px 60px}.artHead h1{font-size:24px}.artCard{grid-template-columns:96px 1fr;gap:10px;padding:10px}.artCardBody .storyTitle{font-size:15.5px}.artBlocks{font-size:16.5px}}
.artSummary .sumLead{grid-template-columns:minmax(0,1fr);font-size:17px;line-height:1.5;margin:0 0 8px}
.artSummary .sumPt{grid-template-columns:24px minmax(0,1fr)}

/* Robie: the Notes pages in black and white too (last, so it wins over the two palettes above) */
.obsBody{--o-bg:#ffffff;--o-side:#f5f5f5;--o-rib:#ededed;--o-line:#e0e0e0;--o-ink:#000000;--o-muted:#595959;--o-faint:#8c8c8c;--o-hover:#ebebeb;--o-accent:var(--accent);--o-accent-soft:#e6e6e6;--o-link:#000000;--o-tag-bg:#efefef;--o-tag-ink:#262626;--o-code-bg:#f2f2f2;--o-card:#ffffff}
[data-theme="dark"] .obsBody{--o-bg:#000000;--o-side:#0b0b0b;--o-rib:#050505;--o-line:#262626;--o-ink:#ffffff;--o-muted:#a6a6a6;--o-faint:#6e6e6e;--o-hover:#1a1a1a;--o-accent:var(--accent);--o-accent-soft:#1f1f1f;--o-link:#ffffff;--o-tag-bg:#1a1a1a;--o-tag-ink:#d9d9d9;--o-code-bg:#141414;--o-card:#0b0b0b}