:root{
  --bg:#F3EEE4; --paper:#FFFBF4; --ink:#2A211C; --ink2:#6B5D53; --line:#2A211C; --soft:#E6DCCB;
  --orange:#D97757; --orange2:#C4623F; --peach:#F6D6C3; --sage:#7D9B76; --sky:#6E8FB5; --plum:#9A6C9E; --gold:#D9A441;
  --shadow:3px 3px 0 var(--line); --r:10px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#1C1714; --paper:#26201C; --ink:#F2E9DD; --ink2:#B8A99B; --line:#0D0A08; --soft:#3A312B; --peach:#4A2E22; --shadow:3px 3px 0 #000; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;padding-top:calc(56px + var(--safe-t));padding-bottom:calc(68px + var(--safe-b));overscroll-behavior-y:contain}
a{color:inherit}
button{font:inherit;color:inherit}
.pix{font-family:"Pixelify Sans",ui-monospace,monospace;font-weight:700;letter-spacing:.02em}

/* ---- header ---- */
.top{position:fixed;inset:0 0 auto 0;z-index:20;height:calc(56px + var(--safe-t));padding:var(--safe-t) 12px 0;display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer}
.brand .word{font-family:"Pixelify Sans",monospace;font-size:24px;font-weight:700;color:var(--orange);text-shadow:2px 2px 0 var(--line)}
.mascot{display:inline-block;width:32px;height:32px;image-rendering:pixelated}
.mascot svg{width:100%;height:100%;display:block}
.mascot.bob svg{animation:bob 2.4s steps(4) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.mascot.big{width:84px;height:84px}
.iconbtn{margin-left:auto;width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:var(--paper);box-shadow:2px 2px 0 var(--line);font-size:18px;cursor:pointer}
.iconbtn:active{transform:translate(2px,2px);box-shadow:none}
.newpill{position:absolute;left:50%;top:calc(var(--safe-t) + 62px);transform:translateX(-50%);background:var(--orange);color:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}

/* ---- feed ---- */
.view{max-width:620px;margin:0 auto;padding:12px 16px}
.feed{display:flex;flex-direction:column;gap:16px}
.card{background:var(--paper);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:relative}
.card .in{padding:12px 14px 14px}
.meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);margin-bottom:6px;flex-wrap:wrap}
.chip{font-family:"Pixelify Sans",monospace;font-size:12.5px;font-weight:700;padding:2px 7px 1px;border:2px solid var(--line);border-radius:6px;background:var(--orange);color:#fff;letter-spacing:.04em}
.chip.anthropic{background:var(--orange)} .chip.events{background:var(--sky)} .chip.news{background:var(--sage)} .chip.x{background:#2A211C} .chip.art{background:var(--plum)}
.meta .dot{opacity:.5}
.card h2{font-size:17.5px;line-height:1.3;margin:0 0 6px;font-weight:700}
.card h2 a{text-decoration:none}
.card h2 a:hover{text-decoration:underline}
.card p.body{margin:0 0 10px;color:var(--ink)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 10px}
.tags span{font-size:11.5px;color:var(--ink2);background:var(--soft);border-radius:999px;padding:1px 8px}
.card.earlier{opacity:.92}
.card.earlier .meta::after{content:"from earlier";font-family:"Pixelify Sans",monospace;font-size:10px;margin-left:auto;color:var(--ink2)}

/* event / deadline block */
.when{border:2px solid var(--line);border-radius:8px;background:var(--bg);padding:8px 10px;margin:0 0 10px}
.when .d{font-weight:700;font-size:14px}
.when .p{font-size:13px;color:var(--ink2)}
.bar{margin-top:8px;height:12px;border:2px solid var(--line);border-radius:4px;background:var(--paper);overflow:hidden;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,var(--orange) 0 8px,var(--orange2) 8px 10px);transition:width .6s}
.bar.soon i{animation:pulse 1.2s steps(2) infinite}
.bar.live i{background:repeating-linear-gradient(90deg,var(--sage) 0 8px,#5f7e59 8px 10px)}
@keyframes pulse{50%{opacity:.6}}
.cd{display:flex;justify-content:space-between;font-family:"Pixelify Sans",monospace;font-size:11px;margin-top:4px;color:var(--ink2)}
.cd b{color:var(--orange2);font-weight:700}

/* media */
.media{border-top:2px solid var(--line);border-bottom:2px solid var(--line);background:#000;position:relative}
.media img,.media video{display:block;width:100%;max-height:420px;object-fit:cover;background:var(--soft)}
.media.svg{background:var(--bg)}
.media.svg svg{display:block;width:100%;height:auto}
.media .yt{position:relative;width:100%;aspect-ratio:16/9}
.media .yt iframe,.media .yt .poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.media .yt .poster{object-fit:cover}
.media .play{position:absolute;left:10px;bottom:10px;font-family:"Pixelify Sans",monospace;font-size:11px;background:rgba(0,0,0,.6);color:#fff;padding:3px 8px;border-radius:6px;pointer-events:none}
.media.x{background:var(--paper);padding:6px 10px;min-height:60px}
.media.x .twitter-tweet{margin:6px auto!important}
blockquote.xcard{margin:0;padding:10px 12px;border:2px dashed var(--soft);border-radius:8px;font-size:14px}
blockquote.xcard a{font-weight:700;color:var(--orange2)}
.top-media{margin:-12px -14px 12px}

/* next step */
.step{display:flex;gap:10px;align-items:flex-start;background:var(--peach);border:2px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:4px}
.step .lbl{font-family:"Pixelify Sans",monospace;font-size:10.5px;color:var(--orange2);display:block;margin-bottom:1px}
.step .txt{flex:1;font-size:14px;font-weight:500}
.step .txt a{color:inherit}
.save{flex:none;border:2px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:2px 2px 0 var(--line);padding:4px 9px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.save.on{background:var(--orange);color:#fff}
.save:active{transform:translate(2px,2px);box-shadow:none}
.foot{display:flex;justify-content:flex-end;margin-top:10px}
.src{font-size:13px;font-weight:600;color:var(--orange2);text-decoration:none;border-bottom:2px solid currentColor}

/* breather + dividers */
.breather{background:var(--bg);border:2px dashed var(--ink2);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center}
.breather .mascot{width:48px;height:48px;flex:none}
.breather p{margin:0;font-size:14px}
.breather b{font-family:"Pixelify Sans",monospace;font-size:12px;display:block;color:var(--orange2)}
.breather button{margin-top:6px;border:2px solid var(--line);background:var(--paper);border-radius:8px;padding:3px 10px;font-weight:700;font-size:13px;box-shadow:2px 2px 0 var(--line);cursor:pointer}
.divider{text-align:center;font-family:"Pixelify Sans",monospace;font-size:12px;color:var(--ink2);padding:10px 0;display:flex;align-items:center;gap:10px}
.divider::before,.divider::after{content:"";flex:1;border-top:2px dashed var(--soft)}
.sentinel{display:flex;justify-content:center;padding:24px 0}
.dots i{display:inline-block;width:8px;height:8px;margin:0 3px;background:var(--orange);animation:dot 1s steps(2) infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{transform:translateY(-4px)}}

/* steps view */
.steps h1{font-size:20px;color:var(--orange);text-shadow:2px 2px 0 var(--line);margin:6px 0 2px}
.steps .sub{margin:0 0 12px;color:var(--ink2);font-size:14px}
.steplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steplist li{background:var(--paper);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
.steplist input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;border:2px solid var(--line);border-radius:6px;background:var(--paper);margin:1px 0 0;cursor:pointer;display:grid;place-content:center}
.steplist input[type=checkbox]:checked{background:var(--orange)}
.steplist input[type=checkbox]:checked::after{content:"✓";color:#fff;font-weight:900;font-size:15px;line-height:1}
.steplist .t{flex:1;min-width:0}
.steplist .t a{font-weight:600;text-decoration:none}
.steplist .t small{display:block;color:var(--ink2);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steplist .x{flex:none;background:none;border:0;font-size:18px;color:var(--ink2);cursor:pointer;padding:0 2px}
.steplist.done li{opacity:.65}
.steplist.done .t a{text-decoration:line-through}
.donebox{margin-top:18px}
.donebox summary{font-family:"Pixelify Sans",monospace;font-size:13px;cursor:pointer;margin-bottom:10px;color:var(--ink2)}
.empty{text-align:center;color:var(--ink2);padding:30px 10px}
.empty .mascot{width:64px;height:64px;margin-bottom:8px}

/* tabs */
.tabs{position:fixed;inset:auto 0 0 0;z-index:20;display:flex;justify-content:center;gap:10px;padding:8px 16px calc(8px + var(--safe-b));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--line)}
.tab{flex:1;max-width:220px;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--line);border-radius:10px;background:var(--paper);padding:8px;font-family:"Pixelify Sans",monospace;font-size:13px;font-weight:700;cursor:pointer;position:relative;box-shadow:2px 2px 0 var(--line)}
.tab.on{background:var(--orange);color:#fff}
.tab .ti{font-size:15px}
.badge{position:absolute;top:-8px;right:-6px;background:var(--ink);color:var(--bg);border-radius:999px;font-size:11px;padding:1px 6px;font-family:Inter,sans-serif}

.locked{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;padding:24px}
.lockcard{text-align:center;max-width:320px}
.lockcard h1{color:var(--orange)}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600;transition:.25s;pointer-events:none;z-index:40}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.mascot.bob svg,.bar.soon i,.dots i{animation:none}}