/* pandarobz.net: shared styles for every page. Same palette and type as the original links page. */
:root {
  --bg: #eef1ec; --card: #fafbf9; --ink: #121614; --muted: #5b655f; --line: #d3d9d3;
  --accent: #1f7a4d; --accent-ink: #ffffff; --bad: #b3261e; --top: rgba(238, 241, 236, .9);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1311; --card: #171c19; --ink: #e9eee9; --muted: #9aa59e; --line: #26302a; --accent: #4cc488; --accent-ink: #0b0f0d; --bad: #ff8a80; --top: rgba(15, 19, 17, .88); color-scheme: 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; }
.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); }
@media (max-width: 760px) {
  .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); }
.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; }
.hero { position: relative; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; overflow: hidden; background: #1c2a20; isolation: isolate; }
.hero.noPhoto { background: radial-gradient(120% 120% at 20% 10%, #2f5d40, #0f1311 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(12, 16, 13, .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(12, 16, 13, .86); }
.overlay.style-none { background: none; padding: 0; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.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: #121614; }
@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)); }
.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)}
@media (prefers-color-scheme: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}
@media (prefers-color-scheme: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)}

/* ---------- 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) ---------- */
.showsGrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.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}
/* pandarobz.net/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}
@media (prefers-color-scheme: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}
@media (prefers-color-scheme:dark){.sBadge.local{color:#2dd4bf}.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}
@media (prefers-color-scheme: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}
@media (prefers-color-scheme: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}
.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}
.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)}
.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)}
/* 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}}