:root{--ink: #fdfaf4;--ink-dim: rgba(253, 250, 244, .66);--ink-faint: rgba(253, 250, 244, .38);--glass: rgba(20, 14, 10, .44);--glass-strong: rgba(16, 11, 8, .66);--edge: rgba(253, 250, 244, .16);--edge-soft: rgba(253, 250, 244, .09);--accent: #f0a13c;--live: #4ade80;--r-sm: 10px;--r-md: 16px;--r-lg: 26px;--shadow: 0 18px 50px rgba(0, 0, 0, .42);--dock-h: 108px;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--font-display: "Baloo Chettan 2", "Inter", sans-serif;color-scheme:dark}.lang-ml{--font-ui: "Noto Sans Malayalam", "Baloo Chettan 2", system-ui, sans-serif;--font-display: "Baloo Chettan 2", "Noto Sans Malayalam", sans-serif}.lang-hi{--font-ui: "Noto Sans Devanagari", "Baloo 2", system-ui, sans-serif;--font-display: "Baloo 2", "Noto Sans Devanagari", sans-serif}[lang=ml]{font-family:Noto Sans Malayalam,"Baloo Chettan 2",system-ui,sans-serif}[lang=hi]{font-family:Noto Sans Devanagari,"Baloo 2",system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#100b08}body{font-family:var(--font-ui);color:var(--ink);-webkit-font-smoothing:antialiased}.app{font-family:var(--font-ui)}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em;padding:.1em .36em;border-radius:5px;background:#fdfaf41f}.app{position:relative;min-height:100vh;min-height:100dvh;isolation:isolate}.app__content{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:18px clamp(16px,4vw,40px) calc(var(--dock-h) + 24px)}.hero{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 38%}.hero__scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0c08069e,#0c080624 32%,#0c080680,#0c0806e6),radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(12,8,6,.55) 100%)}.hero__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#2a1a3c,#7d3f2c 44%,#c9743a,#e8a860)}.hero__sun{position:absolute;left:50%;top:30%;width:42vmin;height:42vmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,224,160,.95),rgba(255,190,110,.25) 55%,transparent 72%);filter:blur(2px)}.hero__ground{position:absolute;inset:auto 0 0 0;height:26%;background:linear-gradient(180deg,#4a2c1c,#2c1a10)}.hero__hint{position:absolute;left:50%;top:58px;transform:translate(-50%);margin:0;max-width:34ch;padding:9px 14px;border-radius:var(--r-sm);background:#120c0880;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;font-size:12.5px;line-height:1.7;color:#fff5e6d1;text-shadow:0 1px 8px rgba(0,0,0,.5)}.topbar{display:flex;align-items:center;gap:12px;font-size:13px;font-variant-numeric:tabular-nums}.topbar__clock{font-weight:500;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,0,0,.55)}.topbar__online{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;padding:5px 12px;border-radius:999px;border:1px solid var(--edge-soft);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink-dim);font-size:12.5px}.topbar__dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px #4ade8033}.app__title{margin:clamp(28px,7vh,72px) 0 clamp(24px,5vh,48px);text-align:center}.app__title h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(40px,9vw,104px);line-height:1.12;letter-spacing:-.01em;text-shadow:0 3px 28px rgba(0,0,0,.55)}.app__tagline{margin:clamp(12px,1.6vh,20px) auto 0;max-width:44ch;font-size:14px;line-height:1.6;color:var(--ink-dim);text-shadow:0 2px 14px rgba(0,0,0,.75)}.lang-ml .app__title h1,.lang-hi .app__title h1{line-height:1.34}.lang-ml .app__tagline,.lang-ml .player__title,.lang-hi .app__tagline,.lang-hi .player__title{line-height:1.75}.lang-ml .syllabus__label,.lang-hi .syllabus__label{letter-spacing:0}.app__panel{width:100%;max-width:620px;margin:0 auto;display:grid}.syllabus{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.syllabus__pill{display:grid;gap:3px;padding:13px 15px;text-align:left;border-radius:var(--r-md);border:1px solid var(--edge-soft);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(115%);backdrop-filter:blur(22px) saturate(115%);box-shadow:var(--shadow);transition:border-color .18s,background .18s,transform .18s}.syllabus__pill:hover{transform:translateY(-1px);border-color:var(--edge)}.syllabus__pill.is-selected{border-color:color-mix(in srgb,var(--tint) 62%,white 12%);background:color-mix(in srgb,var(--tint) 40%,var(--glass));box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--tint) 30%,transparent)}.syllabus__label{font-size:14.5px;font-weight:600}.syllabus__meta{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.syllabus__pill.is-selected .syllabus__meta{color:var(--ink-dim)}.ambience{margin-top:16px;position:relative;z-index:1}.ambience__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.ambience__ducked{align-self:center;font-size:11.5px;color:var(--accent);text-shadow:0 1px 10px rgba(0,0,0,.55)}.ambience__chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;font-size:13px;border-radius:999px;border:1px solid var(--edge-soft);background:var(--glass-strong);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);color:var(--ink);transition:color .18s,border-color .18s,background .18s}.ambience__chip svg{font-size:16px}.ambience__chip:hover:not(:disabled){color:var(--ink);border-color:var(--edge)}.ambience__chip.is-on{color:#1b1206;background:var(--accent);border-color:var(--accent);font-weight:500}.ambience__chip.is-pending{cursor:not-allowed;opacity:.62}.app__dock{position:fixed;left:50%;bottom:18px;transform:translate(-50%);z-index:2;width:min(620px,calc(100vw - 32px))}.player{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:999px;border:1px solid var(--edge);background:var(--glass-strong);-webkit-backdrop-filter:blur(26px) saturate(120%);backdrop-filter:blur(26px) saturate(120%);box-shadow:var(--shadow)}.player__art{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(140deg,#d97a2b,#8c3f1e);font-family:var(--font-display);font-size:21px;font-weight:600;color:#fff6e8}.player__body{flex:1 1 auto;min-width:0;display:grid;gap:2px}.player__title{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__sub{margin:0;font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__track{height:4px;margin:6px 0 3px;border-radius:999px;background:#fdfaf429;cursor:pointer}.player__track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.player__fill{height:100%;border-radius:inherit;background:var(--accent);transition:width .2s linear}.player__time{margin:0;font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--ink-faint)}.player__controls{flex:0 0 auto;display:flex;align-items:center;gap:6px}.player__btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:18px;color:var(--ink-dim);transition:color .16s,background .16s,transform .16s}.player__btn:hover:not(:disabled){color:var(--ink);background:#fdfaf41a}.player__btn--main{width:46px;height:46px;font-size:20px;color:#17100a;background:var(--ink)}.player__btn--main:hover:not(:disabled){color:#17100a;background:#fff;transform:scale(1.05)}.player__btn:disabled{opacity:.4;cursor:not-allowed}:where(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width: 560px){:root{--dock-h: 96px}.app__panel{padding:16px;gap:18px}.syllabus{gap:8px}.syllabus__pill{justify-items:center;text-align:center;padding:12px 8px}.syllabus__meta{display:none}.player{gap:11px;padding:10px 12px}.player__art{width:42px;height:42px;font-size:18px}.player__controls{gap:2px}.player__btn{width:30px;height:30px}.player__btn--main{width:42px;height:42px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
