@font-face{font-family:"Mukta Mahee";src:url(fonts/MuktaMahee-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Mukta Mahee";src:url(fonts/MuktaMahee-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Serif Gurmukhi";src:url(fonts/NotoSerifGurmukhi-VF.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Ubuntu;src:url(fonts/Ubuntu-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Ubuntu;src:url(fonts/Ubuntu-Bold.woff) format("woff");font-weight:700;font-display:swap}
:root{--navy:#0B0B3B;--logo:#061244;--line:#fff;--hi:#0274ee;--fs:17px}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--navy);color:#fff;font-family:Ubuntu,"Mukta Mahee",helvetica,sans-serif;min-height:100vh;padding-bottom:84px}
a{color:#fff}
#topbar{position:sticky;top:0;z-index:20;background:var(--navy);display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid #2a2a6a}
#title{font-weight:700;font-size:1.15rem;text-decoration:underline;white-space:nowrap}
#tools{margin-left:auto;display:flex;align-items:center;gap:6px}
#sform{display:flex;align-items:center;background:#fff;border-radius:8px;overflow:hidden}
#q{border:0;padding:6px 8px;font:inherit;font-size:.9rem;width:min(42vw,320px);color:#000;outline:none}
#mic{border:0;background:#fff;font-size:.9rem;padding:4px 6px;cursor:pointer}
#tools>button{border:1px solid #fff;background:transparent;color:#fff;border-radius:6px;padding:3px 7px;font:inherit;font-size:.8rem;cursor:pointer}
#unofficial{margin:6px 10px 0;text-align:center;font-size:.72rem;line-height:1.35;opacity:.9}
#unofficial a{text-decoration:none}#unofficial .en{opacity:.8}
#content{max-width:1100px;margin:0 auto;padding:4px 0 10px;outline:none}
.quote{background:#fff;color:#111;width:max-content;max-width:94%;margin:12px auto 0;padding:10px 16px;text-align:center;font-family:"Noto Serif Gurmukhi",serif;font-size:.95rem;line-height:1.7}
.quote small{display:block;color:#888;font-family:"Mukta Mahee",sans-serif;font-size:.7rem}
.logo{display:block;margin:0 auto 6px;width:120px;height:auto}
h2.sec{font-size:.95rem;font-weight:700;margin:18px 12px 4px;letter-spacing:.02em}
h1.pt{font-size:1.2rem;margin:12px 12px 2px}
.crumb{margin:6px 12px;font-size:.8rem}.crumb a{opacity:.85}
ul.pageitem{border-radius:8px;background:var(--navy);border:1px solid var(--line);margin:3px 9px 17px;padding:0;list-style:none;overflow:hidden}
ul.pageitem li{border-top:1px solid var(--line)}ul.pageitem li:first-child{border-top:0}
.menu{display:flex;align-items:center;gap:8px;min-height:43px;padding:6px 26px 6px 8px;text-decoration:none;color:#fff;position:relative}
.menu:hover,.menu:focus{background:var(--hi);outline:none}
.menu:focus-visible{box-shadow:inset 0 0 0 3px #ffd34d}
.menu img{width:auto;height:32px;border-radius:3px}
.menu .name{font-weight:700;font-size:1rem;flex:1;min-width:0}
.menu .comment{font-size:.9rem;white-space:nowrap;opacity:.95}
.menu:after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-52%);font-size:1.3rem;opacity:.8}
.menu.play:after{content:"▶";font-size:.8rem}
.menu .gb{font-family:"Noto Serif Gurmukhi",serif;font-weight:500;display:block;font-size:1rem;line-height:1.6}
.menu .sub{display:block;font-weight:400;font-size:.8rem;opacity:.85}
.textbox{padding:8px 12px;border-top:1px solid #fff}
.gurbani{font-family:"Noto Serif Gurmukhi",serif;font-size:1.25rem;line-height:1.9;margin:0;padding:0;list-style:none}
.gurbani li{padding:4px 12px;border-top:1px solid #22225a}
.gurbani li.has{background:#14145a}
.gurbani .chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.chip{font-family:"Mukta Mahee",sans-serif;font-size:.78rem;border:1px solid #fff;border-radius:14px;padding:2px 10px;background:transparent;color:#fff;cursor:pointer;text-decoration:none}
.chip:hover,.chip:focus{background:var(--hi);outline:none}.chip:focus-visible{box-shadow:0 0 0 3px #ffd34d}
.pager{display:flex;justify-content:space-between;gap:8px;margin:8px 9px}
.btn{border:1px solid #fff;border-radius:8px;background:transparent;color:#fff;font:inherit;font-size:.9rem;padding:6px 12px;text-decoration:none;cursor:pointer}
.btn:hover,.btn:focus{background:var(--hi);outline:none}.btn:focus-visible{box-shadow:0 0 0 3px #ffd34d}
.note{font-size:.8rem;opacity:.85;margin:4px 12px}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x{border:0;background:transparent;color:#fff;font-size:.8rem;cursor:pointer;padding:4px 8px;border-left:1px solid #fff}
.x:focus{background:var(--hi);outline:none}
.row2{display:flex;align-items:stretch}.row2 .menu{flex:1}
#footer{text-align:center;margin:18px 10px 6px;font-size:.78rem;line-height:1.5}
#footer img{vertical-align:middle;height:24px;width:auto}
#footer .small{font-size:.68rem;opacity:.8;margin:2px 0}
#player{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#05052a;border-top:1px solid #fff;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
.prow{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto}
.prow button{border:1px solid #556;background:transparent;color:#fff;border-radius:6px;min-width:34px;height:32px;font-size:.85rem;cursor:pointer;flex:none}
.prow button.big{min-width:44px;font-size:1rem}
.prow button:focus{background:var(--hi);outline:none}.prow button:focus-visible{box-shadow:0 0 0 3px #ffd34d}
#seek{flex:1;min-width:80px}#vol{width:70px}
#tcur,#tdur{font-size:.75rem;min-width:36px;text-align:center;font-family:Ubuntu,sans-serif}
#pinfo{font-size:.75rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 2px 0}
#ytbox{position:absolute;right:8px;bottom:calc(100% + 6px);width:256px;height:144px;border:1px solid #fff;background:#000}
#ytbox iframe,#yt{width:100%;height:100%;display:block}
.resume{display:flex;gap:6px;align-items:center;font-size:.8rem;padding:2px 4px}
.resume button{min-width:auto;padding:0 8px}
@media (max-width:640px){#q{width:38vw}#vol,#tools>button{display:none}.prow button{min-width:30px}#ytbox{width:200px;height:113px}}
/* TV / big screens: larger type, roomy focus targets for D-pad */
@media (min-width:1600px){:root{--fs:22px}#content{max-width:1400px}}
html.tv{--fs:24px}html.tv #content{max-width:1500px}
html.tv .menu{min-height:64px}
html.tv .menu:focus,html.tv .chip:focus,html.tv .btn:focus,html.tv .prow button:focus{box-shadow:0 0 0 4px #ffd34d}

#player{z-index:1000}
#player.ytmode .prow button:not([data-k=close]),#player.ytmode .prow input,#player.ytmode .prow span{display:none}
#player.ytmode .prow{justify-content:flex-end}
.ytbtn{display:block;text-align:center;background:#c4302b;color:#fff;font-weight:700;border-radius:8px;padding:12px;margin:2px 0 6px;text-decoration:none;font-size:1rem;position:relative;z-index:1001;-webkit-tap-highlight-color:rgba(255,255,255,.3)}
.ytbtn[hidden]{display:none}
.ytbtn:focus-visible{box-shadow:0 0 0 4px #ffd34d;outline:none}
#mic.off{opacity:.45}
#toast{position:fixed;left:50%;transform:translateX(-50%);top:62px;z-index:1100;background:#fff;color:#0B0B3B;border-radius:8px;padding:10px 14px;max-width:92vw;font-size:.9rem;box-shadow:0 4px 16px rgba(0,0,0,.4);font-family:"Mukta Mahee",sans-serif}
#toast[hidden]{display:none}
#player.ytmode{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#player.ytmode[hidden]{display:none}
#player.ytmode .ytbtn{flex:1;margin:0;padding:10px}
#player.ytmode .prow{flex:none}
#player.ytmode #pinfo{flex-basis:100%;order:3}