:root{color-scheme:dark;--snack-brown: #a0522d;--snack-cream: #fff5e1;--snack-peanut: #e2b08f;--snack-teal: #68a0a7;--snack-orange: #ffa756;--bg0: #0c0a08;--bg1: #15110b;--bg2: #1b140d;--text: rgba(255, 245, 225, .96);--muted: rgba(255, 245, 225, .72);--muted2: rgba(255, 245, 225, .56);--accent: var(--snack-orange);--accent2: var(--snack-teal);--accentGlow: rgba(255, 167, 86, .18);--accent2Glow: rgba(104, 160, 167, .18);--stroke: rgba(255, 245, 225, .14);--stroke2: rgba(255, 245, 225, .08);--surface: rgba(255, 245, 225, .06);--surface2: rgba(255, 245, 225, .1);--ok: #2ce59b;--danger: #ff3d5a;--shadow: 0 24px 80px rgba(0, 0, 0, .55);--radius: 18px;--radius2: 26px;--tabbar-h: 76px;--bgGlowA: rgba(255, 167, 86, .22);--bgGlowB: rgba(104, 160, 167, .18);--topbar-from: rgba(12, 10, 8, .92);--topbar-to: rgba(12, 10, 8, .56);--tabbar-from: rgba(12, 10, 8, .35);--tabbar-to: rgba(12, 10, 8, .92);--overlay: rgba(0, 0, 0, .65);--modal-bg: rgba(12, 10, 8, .94);--btn-bg: rgba(255, 245, 225, .06);--btn-border: rgba(255, 245, 225, .12);--input-bg: rgba(0, 0, 0, .22);--input-border: rgba(255, 245, 225, .14);--pill-bg: rgba(0, 0, 0, .22);--pill-border: rgba(255, 245, 225, .14);--tag-bg: rgba(255, 245, 225, .06);--tag-border: rgba(255, 245, 225, .12);--hint-bg: rgba(0, 0, 0, .18);--hint-border: rgba(255, 245, 225, .1);--panel-bg: rgba(255, 245, 225, .05);--card-surface-from: rgba(12, 10, 8, .94);--card-surface-to: rgba(12, 10, 8, .82);--card-glow-a: rgba(255, 167, 86, .14);--card-glow-b: rgba(104, 160, 167, .12);--card-sheen-from: rgba(255, 245, 225, .08);--card-sheen-to: rgba(255, 245, 225, .04);--media-glow-a: rgba(255, 167, 86, .18);--media-glow-b: rgba(104, 160, 167, .16);--media-shadow-from: rgba(0, 0, 0, .12);--media-shadow-to: rgba(0, 0, 0, .35);--media-fade-0: rgba(12, 10, 8, .04);--media-fade-1: rgba(12, 10, 8, .55);--media-fade-2: rgba(12, 10, 8, .92);--logo-word: var(--snack-cream);--logo-sub: rgba(255, 245, 225, .72);--logo-cookie: var(--snack-brown);--logo-chip: #5a3a27;--logo-stroke: rgba(255, 245, 225, .28);--logo-paper-1: rgba(255, 245, 225, .16);--logo-paper-2: rgba(255, 245, 225, .24);--logo-paper-3: rgba(255, 245, 225, .34);--logo-line: rgba(255, 245, 225, .22);--logo-spot: var(--snack-peanut)}:root[data-theme=snack-light]{color-scheme:light;--bg0: #fff5e1;--bg1: #fff0d4;--bg2: #f6efe8;--text: rgba(32, 26, 22, .96);--muted: rgba(32, 26, 22, .72);--muted2: rgba(32, 26, 22, .56);--accent: var(--snack-orange);--accent2: var(--snack-teal);--accentGlow: rgba(255, 167, 86, .25);--accent2Glow: rgba(104, 160, 167, .22);--stroke: rgba(32, 26, 22, .18);--stroke2: rgba(32, 26, 22, .1);--surface: rgba(32, 26, 22, .05);--surface2: rgba(32, 26, 22, .08);--shadow: 0 22px 70px rgba(32, 26, 22, .16);--bgGlowA: rgba(160, 82, 45, .16);--bgGlowB: rgba(104, 160, 167, .12);--topbar-from: rgba(255, 245, 225, .92);--topbar-to: rgba(255, 245, 225, .7);--tabbar-from: rgba(255, 245, 225, .68);--tabbar-to: rgba(255, 245, 225, .94);--overlay: rgba(32, 26, 22, .45);--modal-bg: rgba(255, 245, 225, .98);--btn-bg: rgba(32, 26, 22, .05);--btn-border: rgba(32, 26, 22, .14);--input-bg: rgba(255, 255, 255, .72);--input-border: rgba(32, 26, 22, .16);--pill-bg: rgba(255, 245, 225, .65);--pill-border: rgba(32, 26, 22, .14);--tag-bg: rgba(32, 26, 22, .05);--tag-border: rgba(32, 26, 22, .12);--hint-bg: rgba(32, 26, 22, .04);--hint-border: rgba(32, 26, 22, .1);--panel-bg: rgba(255, 245, 225, .72);--card-surface-from: rgba(255, 247, 238, .96);--card-surface-to: rgba(255, 247, 238, .86);--card-glow-a: rgba(160, 82, 45, .1);--card-glow-b: rgba(104, 160, 167, .1);--card-sheen-from: rgba(255, 255, 255, .7);--card-sheen-to: rgba(255, 255, 255, .24);--media-glow-a: rgba(226, 176, 143, .44);--media-glow-b: rgba(104, 160, 167, .18);--media-shadow-from: rgba(32, 26, 22, .04);--media-shadow-to: rgba(32, 26, 22, .1);--media-fade-0: rgba(255, 245, 225, .02);--media-fade-1: rgba(255, 245, 225, .5);--media-fade-2: rgba(255, 245, 225, .96);--logo-word: #201a16;--logo-sub: #6b5a50;--logo-cookie: var(--snack-brown);--logo-chip: #5a3a27;--logo-stroke: rgba(107, 90, 80, .35);--logo-paper-1: #f6efe8;--logo-paper-2: #fff7ee;--logo-paper-3: #ffffff;--logo-line: #e9e0d7;--logo-spot: var(--snack-cream)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--text);font-family:Space Grotesk,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(1200px 900px at 20% 0%,var(--bgGlowA),transparent 55%),radial-gradient(900px 700px at 90% 20%,var(--bgGlowB),transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg0));overflow-x:hidden}a{color:inherit}button{font:inherit}.app{min-height:100vh;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:20;padding:14px 14px 10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(180deg,var(--topbar-from),var(--topbar-to));border-bottom:1px solid var(--stroke2)}.topbarRow{display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;flex-direction:column;line-height:1.05}.brandTitle{display:flex;align-items:center}.brandLogo{width:min(260px,68vw);max-width:340px}.brandLogo svg{display:block;width:100%;height:auto}.brandSub{font-size:12px;color:var(--muted2);margin-top:2px}.iconBtn{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);border-radius:999px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center}.iconBtn:active{transform:translateY(1px)}.content{padding:14px}.deck{position:relative;height:calc(100vh - 92px - var(--tabbar-h) - env(safe-area-inset-bottom));min-height:420px}.deckEmpty{height:100%;display:grid;place-items:center;color:var(--muted);border:1px dashed var(--stroke);border-radius:var(--radius2);background:var(--surface)}.cardShell{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:stretch;padding:2px}.card{border-radius:var(--radius2);background:linear-gradient(180deg,var(--card-surface-from),var(--card-surface-to)),radial-gradient(900px 540px at 20% 0%,var(--card-glow-a),transparent 45%),radial-gradient(760px 520px at 80% 10%,var(--card-glow-b),transparent 45%),linear-gradient(180deg,var(--card-sheen-from),var(--card-sheen-to));border:1px solid var(--stroke);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.cardMedia{position:relative;height:172px;background:radial-gradient(900px 540px at 20% 0%,var(--media-glow-a),transparent 55%),radial-gradient(760px 520px at 80% 10%,var(--media-glow-b),transparent 55%),linear-gradient(180deg,var(--media-shadow-from),var(--media-shadow-to));overflow:hidden}.cardMediaImg{width:100%;height:100%;object-fit:cover;transform:scale(1.02);filter:saturate(1.05) contrast(1.05)}.cardMediaFade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,var(--media-fade-0),var(--media-fade-1) 60%,var(--media-fade-2))}.cardInner{padding:18px 16px 14px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.cardMeta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;color:var(--muted2);font-size:12px}.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 10px;border:1px solid var(--pill-border);background:var(--pill-bg);color:var(--text);font-size:12px}.pillDot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px var(--accentGlow)}.title{font-family:Fraunces,ui-serif,Iowan Old Style,serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:26px}.tldr{color:var(--text);font-size:16px;line-height:1.4}.bullets{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.35}.why{margin-top:auto;padding-top:10px;border-top:1px solid var(--stroke2);color:var(--text);font-size:13px;line-height:1.35}.also{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--tag-border);background:var(--tag-bg);font-size:12px;color:var(--muted)}.hintRow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px;color:var(--muted);font-size:12px}.hint{border:1px solid var(--hint-border);background:var(--hint-bg);border-radius:14px;padding:10px;min-height:54px}.hint strong{display:block;color:var(--text);font-weight:600;margin-bottom:2px}.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:30;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(180deg,var(--tabbar-from),var(--tabbar-to));border-top:1px solid var(--stroke2);display:grid;grid-template-columns:repeat(5,1fr)}.tabBtn{border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:10px 6px}.tabBtnActive{color:var(--text)}.tabDot{width:6px;height:6px;border-radius:999px;background:transparent}.tabBtnActive .tabDot{background:var(--accent2);box-shadow:0 0 0 4px var(--accent2Glow)}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--overlay);display:grid;place-items:center;padding:14px}.modal{width:min(920px,100%);height:min(92vh,820px);background:var(--modal-bg);border:1px solid var(--stroke);border-radius:var(--radius2);box-shadow:0 30px 100px #00000059;overflow:hidden;display:flex;flex-direction:column}.modalHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px;border-bottom:1px solid var(--stroke2)}.modalTitle{font-size:13px;color:var(--text);font-weight:600;flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25}.modalBody{flex:1;overflow:hidden}.readerFrame{border:0;width:100%;height:100%;background:transparent}.panel{border:1px solid var(--stroke);background:var(--panel-bg);border-radius:var(--radius);padding:12px}.panelTitle{font-weight:700;margin:0 0 10px;font-size:13px;color:var(--text)}.row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--stroke2)}.row:last-child{border-bottom:0}.rowLabel{color:var(--text);font-size:13px}.rowHint{color:var(--muted2);font-size:12px;margin-top:4px}.select,.input{border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);border-radius:12px;padding:10px;min-width:120px}.toggle{display:inline-flex;align-items:center;gap:10px}.toggle input{width:18px;height:18px}.muted{color:var(--muted2)}.toastHost{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);z-index:80;display:grid;place-items:center;pointer-events:none;padding:0 14px}.toast{pointer-events:none;border:1px solid var(--stroke);background:#0000008c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);border-radius:999px;padding:10px 14px;font-size:13px;box-shadow:0 20px 60px #00000038}:root[data-theme=snack-light] .toast{background:#ffffffb3}.toastOk{border-color:#2ce59b8c}.toastErr{border-color:#ff3d5a8c}.undoHost{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);z-index:85;display:grid;place-items:center;padding:0 14px}.undoBar{pointer-events:auto;width:min(560px,100%);display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--stroke);background:#000000a6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;padding:10px 12px;box-shadow:0 20px 60px #00000038}:root[data-theme=snack-light] .undoBar{background:#ffffffc7}.undoText{flex:1;min-width:0;color:var(--text);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.undoBtn{border-color:#ffa75673;background:#ffa7562e}:root[data-theme=snack-light] .undoBtn{background:#ffa75638}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}
