*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#2b1708;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.feed{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y proximity;overscroll-behavior:contain}
.fc{min-height:100vh;min-height:100dvh;box-sizing:border-box;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:56px 16px 24px;background:linear-gradient(160deg,#fbf4e6,#f6dfb7)}
.fc-game{background:linear-gradient(160deg,#e8f5e9,#b9e0bd)}
.fc-quiz{background:linear-gradient(160deg,#e3f2fd,#b6d6f5)}
.fc-gift{background:linear-gradient(160deg,#fff3e0,#ffd39a)}
.fc-master{background:linear-gradient(160deg,#f3ecfa,#d6c3ef)}
.fc-wisdom{background:linear-gradient(160deg,#fdecea,#f6c1b8)}
.fc-riddle{background:linear-gradient(160deg,#fffde7,#f1e48a)}
.fc-today{background:linear-gradient(160deg,#fff8e1,#ffcc80)}
.fc-rest{background:linear-gradient(160deg,#1a237e,#3949ab);color:#fff}
.fbox{cursor:pointer;width:100%;max-width:440px;background:#fffdf7cc;border-radius:22px;padding:20px;box-shadow:0 8px 24px #0002;color:#3b2412;text-align:center}
.fc-rest .fbox{cursor:pointer;background:#ffffff1f;color:#fff}
.kind{margin:0;font-weight:700;font-size:.9rem;color:#9a4b12;text-transform:uppercase;letter-spacing:.04em}
.fc-rest .kind{color:#fff}
.big{font-size:3.4rem;line-height:1.2;margin:6px 0}
h2{margin:.2rem 0 .4rem;font-size:1.45rem;color:#8a2c0d;line-height:1.25}
.fc-rest h2{color:#fff}
.sa{font-size:1.2rem;color:#5a1d06;margin:.2rem 0}
.sub{margin:.1rem 0 .6rem;color:#8a6a4a;font-size:.9rem}
.body{font-size:1.05rem;line-height:1.5;margin:.4rem 0}
.extra{font-size:.95rem;line-height:1.45;background:#fdebd0aa;border-radius:12px;padding:8px 10px;text-align:left}
.qopts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.qo{padding:12px;border-radius:12px;border:2px solid #e9a85a;background:#fff;font-size:1rem;cursor:pointer;color:#3b2412}
.qo.yes{background:#2e7d32;border-color:#2e7d32;color:#fff}
.qo.try{animation:wig .4s}
@keyframes wig{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fb{min-height:1.2em;font-size:.95rem;line-height:1.4}
.go{display:block;margin:14px auto 0;background:linear-gradient(#f39c34,#d9661c);color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:14px;box-shadow:0 3px 0 #a8460f}
.go2{display:inline-block;margin-top:10px;color:#9a4b12;font-weight:600}
.fc-rest .go2{color:#fff}
.home{position:fixed;top:10px;left:12px;z-index:2;background:#fffdf7e6;color:#9a4b12;text-decoration:none;padding:6px 12px;border-radius:999px;font-size:.9rem;font-weight:600}
.hint[hidden]{display:none}
.hint{position:fixed;bottom:10px;left:0;right:0;margin:0;text-align:center;z-index:2;color:#8a2c0d;font-weight:700;font-size:.85rem;pointer-events:none}
@media (prefers-reduced-motion:reduce){.qo.try{animation:none}}
.chips{position:fixed;top:46px;left:0;right:0;z-index:3;display:flex;gap:6px;overflow-x:auto;padding:4px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:2px solid #e8a85f;background:#fffdf7ee;color:#8a2c0d;border-radius:999px;padding:5px 11px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.chip.on{background:#c2551c;border-color:#c2551c;color:#fff}
.mportrait { margin: 4px auto 8px; text-align: center; }
.mportrait img { max-width: 100%; width: auto; height: auto; max-height: 200px; border-radius: 14px; }
.mportrait figcaption { font-size: .72em; opacity: .8; overflow-wrap: anywhere; }

/* Chip-card breathing pacer */
.pacer { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: .4rem 0; }
.pacer-ring { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: radial-gradient(circle, #f6d58e, #e39b3a); opacity: .85; transform: scale(.7); transition: transform 4s ease-in-out; }
.pacer-ring.in { transform: scale(1.35); }
.pacer-say { margin: 0; font-size: .9rem; min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .pacer-ring { transition: none !important; } }
/* Tap-to-load YouTube in a card */
.mixyt { position: relative; width: 100%; max-width: 22rem; margin: .4rem auto; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #1b1208; }
.mixyt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; animation: blTodayIn .4s ease; }
.mixyt-go { position: absolute; inset: 0; border: 0; background: radial-gradient(circle, #3a2610, #1b1208); color: #f6efe2; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.bt-pvr { display: inline-block; margin-top: .2rem; font-weight: 700; color: #a4501c; text-decoration: none; }

/* Surya Namaskar figure */
.surya { margin: 0.3rem auto 0.2rem; max-width: 22rem; text-align: center; }
.surya svg { width: 100%; height: clamp(5rem, 11vh, 6.5rem); cursor: pointer; }
.surya .sb { stroke: #c0601f; stroke-width: 4; stroke-linecap: round; }
.surya .sh { fill: #c0601f; }
.surya .sg { stroke: rgba(90, 40, 10, 0.25); stroke-width: 1.5; }
.surya .scap p { margin: 0.05rem 0; line-height: 1.2; }
.surya .sname { font-weight: 700; font-size: 0.85rem; }
.surya .sbreath { font-size: 0.8rem; opacity: 0.85; }
.surya .smantra { font-size: 0.85rem; color: #7a2e0a; font-weight: 600; }
.surya .sfade { animation: blSuryaIn 0.5s ease; }
@keyframes blSuryaIn { from { opacity: 0.2; } to { opacity: 1; } }
.surya .sctl { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; }
.surya .spp { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; }
.surya .sdots { display: flex; gap: 0.18rem; }
.surya .sdot { width: 0.85rem; height: 0.85rem; padding: 0; border-radius: 50%; border: 0; background: rgba(90, 40, 10, 0.2); }
.surya .sdot.on { background: #c0601f; }
.surya .smean { font-size: 0.72rem; opacity: 0.75; font-style: italic; }
.mix .sa, .fbox .sa { font-size: 1rem; line-height: 1.4; color: #7a2e0a; margin: 0.2rem 0; }

/* Kavi: palm-leaf manuscript look, per-poet tradition variants */
.kavi-box { background: repeating-linear-gradient(0deg, rgba(120, 80, 20, 0.05) 0 2px, transparent 2px 22px), linear-gradient(160deg, #f6e3b4, #ecd08f 60%, #e2c07a) !important; border: 1px solid rgba(110, 70, 20, 0.35); }
.kavi { position: relative; margin: 0.2rem 0; }
.kavi .kv-motif { font-size: 1.1rem; letter-spacing: 0.4rem; opacity: 0.7; text-align: center; }
.kavi .kv-verse { min-height: 5.6rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; cursor: pointer; background: rgba(255, 250, 235, 0.55); box-shadow: inset 0 0 0 1px rgba(110, 70, 20, 0.18); }
.kavi .kv-l, .kavi .kv-d { margin: 0.15rem 0; opacity: 0; animation: kvIn 0.7s ease forwards; color: #3d2408; }
.kavi .kv-orig { font-family: "Noto Serif Devanagari", "Noto Serif Tamil", "Noto Serif Telugu", "Noto Serif Kannada", "Noto Serif Bengali", "Tiro Devanagari Sanskrit", Georgia, serif; font-size: 1.08rem; line-height: 1.55; }
.kavi .kv-d { font-size: 0.85rem; text-align: left; }
.kavi .kv-raga { font-size: 0.78rem; margin-top: 0.35rem; color: #6b3a0a; font-weight: 700; }
@keyframes kvIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kavi .kv-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; margin-top: 0.4rem; }
.kavi .kv-enter { display: block; margin: 0.45rem auto 0; width: fit-content; padding: 0.35rem 0.9rem; border-radius: 999px; background: #2a1d10; color: #f6ecd8; font: italic 600 0.85rem Georgia, serif; text-decoration: none; }
.kavi .kv-tab { font-size: 0.72rem; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid rgba(110, 70, 20, 0.4); background: transparent; color: #5a3410; }
.kavi .kv-tab.on { background: #6b3a0a; color: #fff3da; }
/* tradition variants */
.kv-cloud .kv-verse { background: linear-gradient(180deg, rgba(220, 232, 245, 0.85), rgba(255, 255, 255, 0.6)); border-radius: 2rem 2rem 1rem 1rem; }
.kv-cloud .kv-l { animation-name: kvDrift; }
@keyframes kvDrift { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.kv-kural .kv-verse { display: grid; gap: 0.3rem; background: none; box-shadow: none; padding: 0; }
.kv-kural .kv-l { background: rgba(255, 250, 235, 0.8); border-left: 4px solid #2f6b2f; border-radius: 0.4rem; padding: 0.35rem 0.6rem; }
.kv-doha .kv-verse { background: repeating-linear-gradient(90deg, rgba(90, 50, 120, 0.07) 0 3px, transparent 3px 9px), rgba(255, 250, 235, 0.6); }
.kv-doha .kv-l { border-bottom: 1px dashed rgba(90, 50, 120, 0.4); padding-bottom: 0.2rem; }
.kv-bhajan .kv-verse { background: radial-gradient(circle at 50% 120%, rgba(60, 90, 200, 0.18), transparent 60%), rgba(255, 250, 235, 0.6); }
.kv-ashtapadi .kv-verse { border: 2px double rgba(0, 110, 110, 0.45); }
.kv-ashtapadi .kv-l:last-child { color: #00605f; font-weight: 700; }
.kv-vachana .kv-verse { text-align: left; border-left: 5px solid #8a1c1c; border-radius: 0.2rem 0.6rem 0.6rem 0.2rem; }
.kv-raga .kv-verse { background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(110, 70, 20, 0.15) 18px 19px), rgba(255, 250, 235, 0.6); }
.kv-padyam .kv-verse { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; background: none; box-shadow: none; padding: 0; }
.kv-padyam .kv-l { background: rgba(255, 250, 235, 0.8); border-radius: 0.5rem; padding: 0.35rem; font-size: 0.9rem; }
.kv-padyam .kv-l:last-child { grid-column: 1 / -1; background: #6b3a0a; color: #fff3da; font-weight: 700; }
.kv-poster .kv-verse { background: #8a1c1c; box-shadow: 4px 4px 0 #2b0a0a; border-radius: 0.2rem; }
.kv-poster .kv-l, .kv-poster .kv-raga { color: #fff3da; font-weight: 800; text-transform: none; }
.kv-poster .kv-d { color: #fff3da; }
.kv-gitanjali .kv-verse { font-style: italic; background: linear-gradient(135deg, rgba(40, 30, 20, 0.08), rgba(255, 250, 235, 0.7)); border-radius: 0.2rem 1.4rem 0.2rem 1.4rem; }
.kv-krauncha .kv-verse { background: radial-gradient(circle at 85% 15%, rgba(160, 30, 30, 0.14), transparent 40%), rgba(255, 250, 235, 0.6); }

.kavi .kv-enter { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kavi .kv-enter.kv-enter-long { font-size: 0.76rem; padding: 0.35rem 0.7rem; }
/* 10/31 computer width: bigger reading card instead of a 312px box in a large empty page. */
@media (min-width:1100px){
 .fc{padding:110px 32px 48px}
 .fbox{max-width:640px;padding:30px 40px;border-radius:26px;box-shadow:0 14px 40px #0002}
 .fbox h2{font-size:1.9rem}
 .fbox .body{font-size:1.18rem;line-height:1.6}
 .fbox .sub{font-size:1rem}
 .fbox .extra{font-size:1.05rem;padding:12px 16px}
 .fbox .qopts{flex-direction:row;flex-wrap:wrap}.fbox .qo{flex:1 1 40%}
 .home{top:12px;left:max(1.5rem,calc((100% - 78rem)/2))}
}