:root { --bg:#121214; --fg:#e6e4df; --mute:#9a9a9a; --line:#2a2a2e; --card:#1a1a1e; --bar:#0c0c0e; --w:760px; --sans:"Inter",-apple-system,"Segoe UI Variable","Segoe UI",Roboto,sans-serif; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; color-scheme:dark }
body.theme-light { --bg:#f6f5f2; --fg:#1a1a1a; --mute:#6b6b6b; --line:#e3e1dc; --card:#fff; color-scheme:light }
/* skin "feed": dark #1f1f1f panels on #2b2b2b, light white on #f5f5f5, green accent; sans everywhere */
body.skin-feed.theme-dark { --bg:#2b2b2b; --card:#1f1f1f; --fg:#e6e6e6; --mute:#9d9d9d; --line:#3a3a3a; --accent:#2bb24c }
body.skin-feed.theme-light { --bg:#f5f5f5; --card:#ffffff; --fg:#1a1a1a; --mute:#6f6f6f; --line:#e6e6e6; --accent:#2bb24c }
body.skin-feed .side .cur { background:var(--bg); box-shadow:inset 3px 0 0 var(--accent) }
/* skin "inst": reading first — light cream page, dark #1b1b1b, serif list and body, no cards */
body.skin-inst.theme-light { --bg:#fbfaf7; --card:#fbfaf7; --fg:#222; --mute:#777; --line:#e8e5dc }
body.skin-inst.theme-dark { --bg:#1b1b1b; --card:#1b1b1b; --fg:#d8d4cb; --mute:#8a8a8a; --line:#2e2e2e }
body.skin-inst .side { border-right:1px solid var(--line) }
/* skin "goog": the old Google Reader look - white, Arial, blue links, thin grey rules; dark variant keeps the shapes */
body.skin-goog.theme-light { --bg:#ffffff; --card:#ffffff; --fg:#000000; --mute:#666666; --line:#e5e5e5; --accent:#0000cc }
body.skin-goog.theme-dark { --bg:#202124; --card:#202124; --fg:#e8eaed; --mute:#9aa0a6; --line:#3c4043; --accent:#8ab4f8 }
body.skin-goog .card { padding:8px 0 } body.skin-goog .card h2 { font-weight:700 } body.skin-goog .card .src .name { color:var(--accent) }
body.skin-goog .side .cur { background:#e5ecf9 } body.skin-goog.theme-dark .side .cur { background:#303134 }
body.skin-goog .side .row.head { font-size:15px }
body.font-arial { --sans:Arial,Helvetica,"Liberation Sans",sans-serif }
body.font-system { --sans:-apple-system,"Segoe UI Variable","Segoe UI",Roboto,sans-serif }
body.font-roboto { --sans:"Roboto",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-opensans { --sans:"Open Sans",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-sourcesans { --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-plex { --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-work { --sans:"Work Sans",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-nunito { --sans:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-manrope { --sans:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-merriweather { --sans:"Merriweather",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-lora { --sans:"Lora",-apple-system,"Segoe UI",Roboto,sans-serif }
body.font-sourceserif { --sans:"Source Serif 4",-apple-system,"Segoe UI",Roboto,sans-serif }
* { box-sizing:border-box }
html { overscroll-behavior-y:contain; background:transparent }
html { margin:0; background:transparent }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh }
a { color:inherit; text-decoration:none }
h3 { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:26px 0 6px }
.hint { color:var(--mute); font-size:13px }

/* title bar */
.bar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; padding-top:env(safe-area-inset-top); background:var(--bar); color:var(--bar-fg, #fff); transition:background .6s, color .6s }
.bar .brand { flex:0 1 auto; min-width:0; font-weight:600; font-size:18.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bar .spacer { flex:1 }
.bar .readctr { margin-left:4px }
.bar .menu, .bar .cog { background:none; border:0; color:var(--bar-fg, #fff); font-size:22px; line-height:1; padding:4px 6px; cursor:pointer; opacity:.9 }
.bar .cog { display:inline-flex; align-items:center }
.bar .refresh { font-size:20px; cursor:pointer }
.bar .markall { display:inline-flex; align-items:center; cursor:pointer } .bar .refresh.busy { animation:spin 1s linear infinite } @keyframes spin { to { transform:rotate(360deg) } }
.bar .readctr { display:flex; align-items:center; gap:6px; font-size:13px; color:rgba(255,255,255,.8); white-space:nowrap }
.bar .readctr b { font-weight:600; color:#fff; font-variant-numeric:tabular-nums }
.bar .readctr button { background:rgba(255,255,255,.18); border:0; color:#fff; border-radius:7px; padding:3px 8px; font-size:12.5px; cursor:pointer; font-family:var(--sans) }
.bar .readctr[hidden] { display:none }
.bar .tabs { display:flex; gap:2px }
.bar .listctl { display:flex; flex:0 0 auto; flex-wrap:nowrap; align-items:center; gap:8px; margin-left:auto }
.bar .tabs a, .bar .tabs button { background:none; border:0; color:var(--bar-fg, #fff); opacity:.72; padding:6px 9px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--sans) }
.bar .tabs .on { opacity:1; background:color-mix(in srgb, var(--bar-fg, #fff) 18%, transparent) }
.bar .panes { display:flex; gap:0; border:1px solid rgba(255,255,255,.35); border-radius:8px; overflow:hidden }
.bar .panes a { padding:5px 11px; font-size:13px; font-weight:500; color:rgba(255,255,255,.75) }
.bar .panes .on { background:rgba(255,255,255,.22); color:#fff }
.card { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
body.nothumb .card img, body.noblurb .card p { display:none }
body.nothumb .card { grid-template-columns:0 1fr; column-gap:0 }
/* floating view controls under the bar */
.refreshing { height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--mute); background:var(--card); border-bottom:0 solid var(--line); transition:height .2s }
.refreshing.pull, .refreshing.busy { border-bottom-width:1px }
.refreshing.busy { height:36px }
.refreshing .spin { width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--fg); border-radius:50%; animation:spin .8s linear infinite }
.viewctls { display:flex; align-items:center; gap:6px; margin-right:4px }
.viewctl { position:relative }
.viewctl-btn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:28px; background:transparent; color:var(--bar-fg, #fff); border:1px solid color-mix(in srgb, var(--bar-fg, #fff) 45%, transparent); border-radius:16px; padding:4px 11px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.25); font-family:var(--sans) }
.viewctl-panel { display:none; position:absolute; right:0; top:36px; width:340px; max-width:calc(100vw - 24px); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:0 8px 30px rgba(0,0,0,.35) }
.viewctl.open .viewctl-panel { display:block }
.viewctl-panel label { display:grid; grid-template-columns:78px 1fr 34px; align-items:center; gap:8px; font-size:12.5px; color:var(--mute); margin:6px 0 }
.viewctl-panel input[type=range] { width:100%; accent-color:var(--fg) }
.viewctl-panel b { font-weight:500; color:var(--fg); text-align:right; font-variant-numeric:tabular-nums }
.anchors { position:relative; height:46px; margin:8px 0 4px }
.anchors .track { position:absolute; left:0; right:0; top:10px; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--a0, #000) 0%, var(--a1, #1e5bd8) var(--p1, 10%), var(--a2, #7b3fe4) var(--p2, 25%), var(--a2, #7b3fe4) 100%) }
.anchors input[type=range] { position:absolute; left:0; right:0; top:4px; width:100%; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; height:24px }
.anchors input[type=range]::-webkit-slider-runnable-track { background:transparent; height:24px }
.anchors input[type=range]::-webkit-slider-thumb { pointer-events:auto; -webkit-appearance:none; width:18px; height:18px; margin-top:3px; border-radius:50%; background:#fff; border:2px solid #333; box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:grab }
.anchors input[type=range]::-moz-range-thumb { pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid #333 }
.anchors .now { position:absolute; top:2px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--fg); transform:translateX(-6px); opacity:.8 }
.anchors .legend { position:absolute; left:0; right:0; top:28px; display:flex; justify-content:space-between; font-size:11px; color:var(--mute) }
.viewctl-panel .shape { display:flex; gap:6px; margin:2px 0 8px 86px }
.viewctl-panel label.dual { grid-template-columns:78px 1fr 30px 1fr 22px }
.viewctl-panel .row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.viewctl-panel label.sel { grid-template-columns:auto 1fr; font-size:12.5px }
.viewctl-panel select { width:100%; padding:4px 6px; font-size:13px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--fg); font-family:var(--sans) }
.viewctl-panel .colors { display:flex; gap:4px } .viewctl-panel input[type=color] { width:34px; height:26px; border:0; padding:0; background:none }
.viewctl-panel .hint { margin:6px 0 0; font-size:11.5px }
.viewctl-panel .shape button { flex:1; background:var(--bg); color:var(--mute); border:1px solid var(--line); border-radius:8px; padding:4px 0; font-size:12.5px; cursor:pointer; font-family:var(--sans) }
.viewctl-panel .shape button.on { color:var(--bg); background:var(--fg); border-color:var(--fg) }
.card.pressing { transform:scale(.985); opacity:.8; transition:transform .15s }
.card { position:relative }
.card .bm { display:none; margin-left:6px; color:var(--saved, #1f9d55); line-height:0; padding:4px; margin:-4px -4px -4px 2px; cursor:pointer }
#boardpane .card .bm { display:block } #archivepane .card .bm { display:none }
.card.saved .bm { display:block }
.card.gone { opacity:0; transition:opacity .3s }
.card.hidden { display:none }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--fg); color:var(--bg); padding:9px 16px; border-radius:20px; font-size:14px; opacity:0; transition:all .25s; pointer-events:none; z-index:9 }
.toast.show { opacity:1; transform:translateX(-50%) }

/* sidebar */
.side { position:fixed; top:0; left:0; bottom:0; width:var(--side-w, 280px); padding:60px 0 20px; background:var(--card); border-right:1px solid var(--line); overflow:auto; transform:translateX(-100%); transition:transform .25s; z-index:4 }
.side.open { transform:none }
.side .row { display:flex; align-items:center; gap:6px; padding:8px 10px 8px 16px; font-size:14px }
.side .row.feed { padding-left:35px } .side .row.feed > span:not(.gear) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.side .row .gname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.side .row > .dot, .side summary > .dot { margin-left:auto }
.side .row.head { font-weight:700; font-size:17px; padding:12px 10px 12px 16px; margin-top:4px } .side .row.head .gear { margin-left:auto; opacity:.55 } .side .gear.plus { font-size:20px; font-weight:500; line-height:1 }
button.link.danger { color:#e53935; background:none; border:0; font:inherit; cursor:pointer; padding:0 }
.side .sidefoot { margin-top:14px; border-top:1px solid var(--line); padding-top:6px }
.side .fav { width:16px; height:16px; border-radius:3px; object-fit:cover; flex:none; background:var(--line); display:inline-block }
.side .cur { background:var(--bg) }
.side .muted { color:var(--mute) }
.side summary { list-style:none; cursor:pointer }
.side summary::-webkit-details-marker { display:none }
.side summary .gname { flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.side summary .gname + * { margin-left:auto }
.side .dot { width:7px; height:7px; border-radius:50%; background:var(--bar); flex:none }
.side em { color:#c0392b; font-style:normal; font-weight:700 }
.side .admin { color:var(--mute); margin-top:4px }

/* two panes side by side, slid by finger */
.panes-wrap { overflow:hidden; width:100%; touch-action:pan-y; height:calc(100vh - 52px - env(safe-area-inset-top)); height:calc(100dvh - 52px - env(safe-area-inset-top)) }
.panes-track > * { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y }
body.haspanes { overflow:hidden }
.panes-track { display:flex; height:100%; transition:transform .18s cubic-bezier(.2,.8,.2,1); will-change:transform }
.panes-track.drag { transition:none }
.panes-track > .list { flex:none; max-width:none }
.panes-track > .slot { flex:none; overflow:hidden; display:grid } .slot > main { grid-area:1 / 1; height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; max-width:none } .slot > main[hidden] { display:none }
.side.inpane { position:static; transform:none; flex:none; padding-top:8px; border-right:1px solid var(--line); transition:none }
/* card style: flat rows or rounded cards, radius and gap from the palette panel */
body.cards-rounded .card { background:var(--card); border:0; border-radius:var(--radius, 10px) }
body.cards-rounded .card img { border-radius:calc(var(--radius, 10px) - 4px) }
body.cards-rounded .list { padding-top:8px }
/* list: cards (default) */
.list { padding:10px 18px 60px }
.list > * { max-width:var(--w); margin-left:auto; margin-right:auto }
.card { display:grid; grid-template-columns:var(--thumb-w) 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:6px; padding:var(--pady, 14px) var(--padx, 0); margin:var(--gap, 0) 0; border-bottom:1px solid var(--line) }
.card .src { grid-column:1 / -1; font-size:var(--src-fs); color:var(--mute); display:flex; align-items:center; gap:8px; min-width:0 }
.card .src .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card .src .age { margin-left:auto; white-space:nowrap }
.card .pill { font-size:.85em; padding:1px 8px; border-radius:10px; color:#fff; background:var(--pc); white-space:nowrap; cursor:pointer }
.card.is-read .pill { opacity:.7 }
.dragging { opacity:.9; background:var(--bg); box-shadow:0 6px 18px rgba(0,0,0,.35); position:relative; z-index:3; will-change:transform }
.dragging.settle { transition:transform .15s cubic-bezier(.2,.8,.2,1) }
.reordering > * { cursor:grabbing }
.side summary { cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
.sortlist .lrow { display:flex; align-items:center; gap:10px; padding:10px 6px; border-bottom:1px solid var(--line); cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
.sortlist .lrow .gname { flex:1; color:var(--fg); text-decoration:none } .sortlist .lrow .gear { color:var(--mute); display:inline-flex }
.sortlist .swatch { width:12px; height:12px; border-radius:3px; flex:none; display:inline-block }
.bar .tabs[hidden] { display:none }
.bar #trash, .bar .baractions #trash, .split-actions #trash { color:#e53935 !important; opacity:1 !important }
.chips { display:flex; gap:8px; overflow-x:auto; padding:6px 0 10px; scrollbar-width:none } .chips::-webkit-scrollbar { display:none }
.chip { flex:none; border:1.5px solid var(--lc, var(--saved)); color:var(--lc, var(--saved)); border-radius:16px; padding:4px 13px; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; background:none; cursor:pointer; font-family:inherit }
.chip.on { background:var(--lc, var(--saved)); color:#fff }
.chip.plus { border-style:dashed; font-weight:400; padding:4px 10px }
.sheet { position:fixed; left:50%; bottom:-100%; transform:translateX(-50%); width:min(520px, calc(100% - 24px)); background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:14px; padding:14px 16px 18px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:30; display:flex; flex-wrap:wrap; gap:8px; transition:bottom .2s }
.sheet.show { bottom:calc(20px + env(safe-area-inset-bottom)) } .sheet h4 { width:100%; margin:0 0 4px; font-size:13px; color:var(--mute); font-weight:600 }
.list .search { display:flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:2px 4px 2px 10px; margin:4px auto 10px; max-width:var(--w) }
.list .search input { background:none; border:0; color:var(--fg); font:inherit; font-size:14px; flex:1; outline:none; min-width:0 }
.list .search button { background:none; border:0; color:var(--fg); display:inline-flex; padding:4px; cursor:pointer } .list .search .clear { color:var(--mute); font-size:13px; padding:0 8px }
.side .swatch { width:11px; height:11px; border-radius:3px; flex:none; display:inline-block }
.side .gear { color:var(--mute); display:inline-flex; align-items:center; justify-content:center; margin-left:auto; width:26px; height:22px; padding:0; opacity:.55; cursor:pointer; flex:none } .side summary:hover .gear, .side .row:hover .gear, .side .cur .gear { opacity:1; color:var(--fg) }
.side .row.feed .gear { margin-left:auto; flex:none }
.side .dot { flex:none; margin-left:8px } .side .row > .dot:first-child, .side summary > .dot:first-child { margin-left:auto } .side summary > .gname { flex:1 1 auto }
.side .row > .gear, .side summary > .gear { margin-left:auto } .side .row > .gear + .gear { margin-left:2px } .side .row:not(:has(.dot)) > .gear:last-of-type { margin-right:21px } .side .gear + .dot { margin-left:8px } .side .row:not(:has(.gear)) > .dot, .side summary:not(:has(.gear)) > .dot { margin-left:auto }
.card img { grid-row:2; width:var(--thumb-w); height:var(--thumb-h); object-fit:cover; border-radius:8px; background:var(--line) }
.card > div { grid-row:2; grid-column:2; min-width:0 }
.card img + div { grid-column:2 } .card .src + div { grid-column:1 / -1 }
.card h2 { font-size:var(--title-fs); line-height:1.3; margin:0 0 4px; font-weight:600; display:-webkit-box; -webkit-line-clamp:var(--title-lines); -webkit-box-orient:vertical; overflow:hidden }
.card p { margin:0; font-size:var(--blurb-fs); color:var(--mute); display:-webkit-box; -webkit-line-clamp:var(--blurb-lines); -webkit-box-orient:vertical; overflow:hidden }
.card.is-read { opacity:.55 }
.card.is-read .src::before { content:"✓ "; color:var(--accent, #7b3fe4) }
.card.read .src::before { content:"✓ "; color:var(--accent, #7b3fe4) }

/* list: classic (Google Reader) — one dense line per item */
body.view-classic .list { max-width:none; padding:0 }
body.view-classic .card { display:grid; grid-template-columns:150px 1fr; grid-template-rows:auto; align-items:baseline; gap:12px; padding:6px 14px; border-bottom:1px solid var(--line); font-size:13.5px }
body.view-classic .card img { display:none }
body.view-classic .card > div { display:contents }
body.view-classic .card .src .pill, body.view-classic .card .src .age { display:none }
body.view-classic .card .src { grid-column:1; order:1; font-size:13px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
body.view-classic .card h2 { order:2; display:inline; -webkit-line-clamp:unset; font-size:13.5px; font-weight:600; margin:0 }
body.view-classic .card h2::after { content:" — "; color:var(--mute); font-weight:400 }
body.view-classic .card p { order:2; display:inline; -webkit-line-clamp:unset; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13.5px }
body.view-classic .card.is-read { opacity:.6 }

.more { visibility:hidden; height:1px; margin:0; padding:0; border:0 }
.readall button { display:block; margin:18px auto; padding:10px 18px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); font-size:14px; cursor:pointer; text-align:center; font-family:var(--sans) }
.empty { text-align:center; color:var(--mute); padding:60px 0 }
.gotab-row { text-align:center; margin:-30px 0 30px } .gotab { display:inline-block; padding:6px 14px; border-radius:8px; background:var(--card); color:var(--fg); border:1px solid var(--line); font-size:14px; font-weight:500; text-decoration:none }

/* reading view */
.progress { position:sticky; top:52px; z-index:5; height:3px; background:color-mix(in srgb, var(--fg) 10%, transparent) } .progress i { display:block; height:100%; width:0; background:var(--fg); opacity:.9; transition:width .08s linear }
.read { max-width:var(--read-w, 760px); margin:0 auto; padding:18px 16px 80px; font-family:var(--serif); font-size:var(--read-fs, 18.5px); line-height:var(--read-lh, 1.62) }
body.readfont-sans .read { font-family:var(--sans) }
body.readfont-inter .read { font-family:"Inter",-apple-system,"Segoe UI",sans-serif }
body.readfont-roboto .read { font-family:"Roboto",sans-serif }
body.readfont-opensans .read { font-family:"Open Sans",sans-serif }
body.readfont-sourcesans .read { font-family:"Source Sans 3",sans-serif }
body.readfont-plex .read { font-family:"IBM Plex Sans",sans-serif }
body.readfont-work .read { font-family:"Work Sans",sans-serif }
body.readfont-nunito .read { font-family:"Nunito",sans-serif }
body.readfont-manrope .read { font-family:"Manrope",sans-serif }
body.readfont-merriweather .read { font-family:"Merriweather",Georgia,serif }
body.readfont-lora .read { font-family:"Lora",Georgia,serif }
body.readfont-sourceserif .read { font-family:"Source Serif 4",Georgia,serif }
body.readfont-arial .read { font-family:Arial,Helvetica,sans-serif }
body.readfont-system .read { font-family:-apple-system,"Segoe UI Variable","Segoe UI",Roboto,sans-serif }
.bar .menu.back { visibility:visible !important; font-size:26px; text-decoration:none; color:var(--bar-fg, #fff) }
.bar .actions a, .bar .actions button { font-size:13.5px; padding:5px 9px }
.bar .actions .on { background:color-mix(in srgb, var(--bar-fg, #fff) 22%, transparent) }
.bar .icons a, .bar .icons button { display:inline-flex; align-items:center; padding:5px 7px; color:var(--bar-fg, #fff); opacity:.75 } .bar .icons .on { opacity:1 } .bar .icons #star.on svg { fill:color-mix(in srgb, var(--bar-fg, #fff) 35%, transparent) }
.bar #readtoggle svg, .bar .baractions #readtoggle svg { fill:none !important } .bar #readtoggle:not(.on) { opacity:.45 } .bar .icons #star.on { color:var(--saved) } .bar .icons #star.on svg { fill:var(--saved) }
.read .hero { width:100%; height:auto; border-radius:8px; margin:0 0 20px }
.read .hero.lead { margin:14px 0 18px; width:100%; max-width:var(--read-img, 100%); height:auto; border-radius:6px; display:block }   /* never cropped: a comic's gag and a banner stay whole */
.read .meta.url { margin:-14px 0 22px; word-break:break-all } .read .meta.url a { text-decoration:underline; text-underline-offset:3px }
.read .body p:first-child { margin-top:0 }
.read .body figure.yt { position:relative; cursor:pointer } .read .body figure.yt img { width:100% } .read .body figure.yt figcaption { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px } .read .body figure.yt figcaption a { color:#fff; background:rgba(0,0,0,.6); padding:8px 16px; border-radius:20px }
.read .body figure.yt figcaption.ytopen { position:static; display:block; font-size:13px; margin-top:6px } .read .body figure.yt figcaption.ytopen a { background:none; color:var(--mute); padding:0; text-decoration:underline }
.read .body > img:first-child, .read .body > p:first-child > img:only-child { width:100% }
.read .footnav, .settings .footnav { margin-top:40px; font-family:var(--sans); font-size:15px; display:flex; gap:6px } .footnav .spacer { flex:1 }
.read h1 { font-size:27px; line-height:1.2; margin:6px 0 8px; font-family:var(--sans); font-weight:700 }
.read .meta { font-family:var(--sans); font-size:13px; color:var(--mute); margin:0 0 22px }
.read .body h2, .read .body h3, .read .body h4 { font-size:calc(var(--read-fs, 18.5px) * var(--head-fs, 125) / 100); text-transform:var(--head-tt, none); font-weight:var(--head-fw, 700); font-family:var(--head-ff, inherit); letter-spacing:0; color:var(--fg); margin:1.4em 0 .5em; line-height:1.25 }
.read .body h3 { font-size:calc(var(--read-fs, 18.5px) * var(--head-fs, 125) / 100 * .88) } .read .body h4 { font-size:calc(var(--read-fs, 18.5px) * var(--head-fs, 125) / 100 * .8) }
.read .body img, .read .body video, .read .body iframe { max-width:var(--read-img, 100%); height:auto; border-radius:6px; display:block; margin-left:auto; margin-right:auto }
.read .body iframe { aspect-ratio:16/9; width:100% }
.read .body figure { margin:18px 0 }
.read .body figcaption { font-size:14px; color:var(--mute) }
.read .body a { color:inherit; text-decoration:underline; text-decoration-color:var(--mute); text-underline-offset:3px }
.read .body pre { overflow:auto; font-size:14px }
.read .body blockquote { margin:0; padding-left:14px; border-left:3px solid var(--line); color:var(--mute) }

/* forms */
.login { max-width:340px; margin:60px auto; padding:0 16px }
.settings { max-width:var(--w); margin:0 auto; padding:14px 16px 80px }
.settings a { color:var(--fg); text-decoration:underline; text-underline-offset:3px } .settings a.gear, .settings a.back, .settings .footnav a { text-decoration:none }
.settings .feedlist .grouphead, .feedlist .grouphead { display:flex; align-items:center; gap:8px; margin:22px 0 4px; font-size:15px; letter-spacing:0; text-transform:none; color:var(--fg) }
.feedlist .grouphead .swatch { width:10px; height:10px; border-radius:3px; flex:none; display:inline-block }
.feedlist .feedrow { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line) } .feedlist .feedrow > a:first-of-type { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.feedlist .fav { width:16px; height:16px; border-radius:3px; object-fit:cover; flex:none; background:var(--line); display:inline-block }
.feedlist .gear { color:var(--mute); display:inline-flex; margin-left:auto; width:26px; height:22px; align-items:center; justify-content:center; flex:none } .feedlist .gear:hover { color:var(--fg) }
.feedlist .hint em { color:#c0392b; font-style:normal; font-weight:700 }
.login label, .settings label { display:block; margin:12px 0 }
.settings label.check { display:flex; gap:10px; align-items:flex-start }
.login input, .settings input:not([type=color]):not([type=checkbox]), .settings select { width:100%; padding:9px 10px; font-size:15px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font-family:var(--sans) }
.settings input[type=number] { width:90px; display:inline-block }
.settings input[type=color] { width:56px; height:34px; border:0; background:none; vertical-align:middle; padding:0 }
.settings input[type=checkbox] { width:18px; height:18px; margin-top:2px }
.login button, .settings button { margin-top:16px; padding:10px 18px; border:0; border-radius:8px; background:var(--fg); color:var(--bg); font-size:15px; font-family:var(--sans); cursor:pointer }
.login button { width:100% }
.err { color:#c0392b }
.login .passkey { width:100%; padding:12px; font-size:16px; border:0; border-radius:8px; background:var(--fg); color:var(--bg); font-family:var(--sans); cursor:pointer }
.login details { margin-top:18px } .login summary { cursor:pointer }
.settings .qr { background:#fff; display:inline-block; padding:10px; border-radius:8px; margin:8px 0 } .settings .qr img { width:220px; height:220px; display:block; image-rendering:pixelated }
.settings input.inline { width:120px !important; display:inline-block; padding:4px 8px !important; font-size:13px !important; margin:0 4px }
.side form.row { margin:0 } .side form.row button.link { background:none; border:0; color:var(--mute); padding:0; font:inherit; cursor:pointer }
.settings button.danger { background:#c0392b; color:#fff }
.settings button.link { background:none; border:0; color:var(--mute); text-decoration:underline; padding:0 6px; margin:0; font-size:13px; cursor:pointer }
.settings ul.plain { list-style:none; padding:0 } .settings ul.menu li { padding:12px 0; font-size:16px } .settings ul.plain li { padding:6px 0; border-bottom:1px solid var(--line) }
.swatches { display:flex; gap:4px; margin:10px 0 }
.swatches span { flex:1; height:34px; border-radius:6px; display:flex; align-items:flex-end; justify-content:center; font-size:11px; color:#fff; padding-bottom:2px }

@media (min-width: 1000px) { body.side-closed { --side-w: 0px !important } body.side-closed .side { transform:translateX(-100%) } body.side-closed #h-side { display:none }
  .bar { position:sticky } .side { transform:none; padding-top:52px } .panes-wrap, .settings { margin-left:var(--side-w, 280px) } .read { margin-left:var(--side-w, 280px); max-width:none } .read > * { max-width:var(--w) } .read .hero.lead { max-width:calc(var(--w) + 32px) } .list > * { margin-left:0 } }

/* phone: the read / off-board notes become a belt at the bottom, out of the crowded bar */
/* + on Saved: add a link by hand */
.fab { position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%; border:0; background:var(--saved, #1f9d55); color:#fff; font-size:32px; line-height:1; box-shadow:0 6px 20px rgba(0,0,0,.35); cursor:pointer; z-index:6; display:none }
body[data-pane="board"] #fab, body[data-pane="unread"] #fab, body[data-pane="all"] #fab, body[data-pane="interests"] #fab { display:block }
.card.link .pill { background:var(--saved, #1f9d55) }
/* split view (desktop): 350 px list column, the article to the right */
.reader-pane { display:none }
@media (min-width: 1000px) {
  body.view-split .panes-wrap { position:fixed; left:var(--side-w, 280px); top:52px; width:var(--split-w, 350px); height:calc(100vh - 52px); border-right:1px solid var(--line); margin:0 }
  body.view-split .list > * { max-width:none; margin:0 }
  body.view-split .list { padding:10px 10px 60px }
  body.view-split .card { padding-left:calc(var(--padx, 0px) + 10px) }
  body.view-split .card.cur { background:var(--card); box-shadow:inset 3px 0 0 var(--fg) }
  body.view-split .reader-pane { display:block; position:fixed; left:calc(var(--side-w, 280px) + var(--split-w, 350px)); right:0; top:52px; bottom:0; overflow-y:auto; padding:0 24px 80px }
  body.view-split .reader-pane .read { margin:0 auto; max-width:var(--read-w, 760px); padding-top:0 }
  body.view-split .reader-pane .hero.lead { margin:18px 0; width:100%; border-radius:8px }
  body.view-split .reader-pane .footnav { display:none }
  body.view-split .reader-pane .empty { padding-top:120px }
  body.view-split .split-actions { position:sticky; top:0; z-index:2; display:flex; justify-content:flex-end; align-items:center; gap:4px; padding:8px 0; background:var(--bg) }
  body.view-split .split-actions .viewctls { margin-right:10px } body.view-split .split-actions .viewctl-btn { color:var(--fg); border-color:var(--mute) }
  body.view-split .split-actions a, body.view-split .split-actions button { background:none; border:0; color:var(--mute); padding:6px 8px; cursor:pointer; display:inline-flex }
  body.view-split .split-actions .on { color:var(--fg) } body.view-split .split-actions #star.on { color:var(--saved) } body.view-split .split-actions #star.on svg { fill:var(--saved) }
  body.view-split .bar .listctl { position:absolute; top:0; height:52px; display:flex; flex-wrap:nowrap; white-space:nowrap; width:max-content; align-items:center; gap:10px; right:calc(100vw - var(--side-w, 280px) - var(--split-w, 350px) + 10px) }
  body.view-split .bar .baractions { margin-left:auto }
  .bar .baractions { display:none; align-items:center; gap:2px; margin-left:6px } .bar .baractions:not(:empty) { display:flex }
.bar .baractions .viewctls { margin-right:10px }
.bar .baractions #readtoggle svg { fill:none !important } .bar .baractions #readtoggle:not(.on) { opacity:.45 } .bar .baractions .on { opacity:1 } .bar .baractions #star.on { color:var(--saved) } .bar .baractions #star.on svg { fill:var(--saved) }
  .bar .baractions a, .bar .baractions button { background:none; border:0; color:var(--bar-fg, #fff); opacity:.75; padding:5px 7px; display:inline-flex; cursor:pointer } .bar .baractions .on { opacity:1 } .bar .baractions #star.on { color:var(--saved) } .bar .baractions #star.on svg { fill:var(--saved) }
}
/* desktop: drag handles on the sidebar edge and the split list column edge */
.vhandle { display:none }
@media (min-width: 1000px) {
  .vhandle { display:block; position:fixed; top:52px; bottom:0; width:8px; margin-left:-4px; cursor:col-resize; z-index:7; background:transparent }
  .vhandle:hover, .vhandle.on { background:color-mix(in srgb, var(--fg) 12%, transparent) }
  #h-side { left:var(--side-w, 280px) }
  #h-split { left:calc(var(--side-w, 280px) + var(--split-w, 350px)) }
  body:not(.view-split) #h-split { display:none }
}
/* shop mails: item list */
.read .body iframe[src*="instagram.com"] { width:min(400px, 100%); height:580px; border:0; border-radius:8px; background:#fff }
.read .items { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; margin:12px 0 }
.read .items .item { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--fg); font-family:var(--sans); font-size:14px; line-height:1.3 }
.read .items .item img, .read .items .item .noimg { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--card); margin:0 }
.read .items .item .t { font-weight:600 } .read .items .item .s { color:var(--mute); font-size:13px }
/* belts: read / off-board notes at the bottom, neutral colour, on every screen size */
.bar .readctr { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom)); height:auto; margin:0; justify-content:center; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:22px; padding:9px 16px; box-shadow:0 6px 24px rgba(0,0,0,.35); z-index:6; font-size:14px; white-space:nowrap }
.bar .readctr b { color:var(--fg) }
.bar .readctr button { background:var(--bg); color:var(--fg); border:1px solid var(--mute); font-size:13.5px; padding:4px 11px }
.bar #rmctr { bottom:calc(62px + env(safe-area-inset-bottom)) }
.bar #newctr button { display:inline-flex; gap:4px; align-items:center } .bar #newctr b { color:inherit }
@media (max-width: 999px) { .bar .readctr { left:14px; right:14px; transform:none } .bar .refresh { display:none } .bar .tabs a { padding:6px 6px; font-size:13px } .bar .listctl { gap:4px } .bar .viewctls { gap:4px; margin-right:0 } .viewctl-btn { min-width:34px; height:26px; font-size:12px } .bar .markall { padding:4px 2px } .bar { gap:6px; padding:0 10px } .bar .brand { font-size:17px }
  }
@media (min-width: 1000px) { .bar .readctr { left:calc(var(--side-w, 280px) + (100vw - var(--side-w, 280px)) / 2) } }

/* state icons (read, saved) show their active state with a pill background; the list's check is an action and stays plain */
.bar .icons #readtoggle, .bar .baractions #readtoggle, .split-actions #readtoggle { border-radius:8px }
.bar .icons #readtoggle.on, .bar .baractions #readtoggle.on { background:color-mix(in srgb, var(--bar-fg, #fff) 22%, transparent); opacity:1 }
.bar .icons #readtoggle:not(.on), .bar .baractions #readtoggle:not(.on) { opacity:.5 }
.split-actions #readtoggle.on { background:color-mix(in srgb, var(--fg) 15%, transparent); color:var(--fg) }

/* read = green, like saved = green */
.bar .icons #readtoggle.on, .bar .baractions #readtoggle.on, .split-actions #readtoggle.on { background:none; color:var(--saved, #1f9d55); opacity:1 }
.bar .icons #readtoggle.on svg, .bar .baractions #readtoggle.on svg { stroke:var(--saved, #1f9d55) }
/* phone: the pill panels open centred on the screen, never cut off */
@media (max-width: 999px) {
  .viewctl { position:static }
  .viewctl-panel { position:fixed; left:50%; right:auto; top:calc(52px + env(safe-area-inset-top) + 8px); transform:translateX(-50%); width:min(360px, calc(100vw - 24px)); max-height:calc(100vh - 80px); overflow:auto }
}