@font-face{font-family:Newsreader;src:url(/assets/fonts/Newsreader-500.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/Newsreader-600.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans';src:url(/assets/fonts/NotoSans-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans';src:url(/assets/fonts/NotoSans-600.woff) format('woff');font-weight:600 700;font-display:swap}
@font-face{font-family:'Noto Sans Gurmukhi';src:url(/assets/fonts/NotoSansGurmukhi-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Gurmukhi';src:url(/assets/fonts/NotoSansGurmukhi-600.woff) format('woff');font-weight:600 700;font-display:swap}
@font-face{font-family:'Noto Sans Devanagari';src:url(/assets/fonts/NotoSansDevanagari-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Devanagari';src:url(/assets/fonts/NotoSansDevanagari-600.woff) format('woff');font-weight:600 700;font-display:swap}
@font-face{font-family:'Tiro Gurmukhi';src:url(/assets/fonts/TiroGurmukhi-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Tiro Devanagari Hindi';src:url(/assets/fonts/TiroDevanagariHindi-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/fonts/GeistMono-500.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/fonts/GeistMono-600.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Anek Latin';src:url(/assets/fonts/AnekLatinWide-700.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Anek Devanagari';src:url(/assets/fonts/AnekDevanagari-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif Gurmukhi';src:url(/assets/fonts/NotoSerifGurmukhi-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif Gurmukhi';src:url(/assets/fonts/NotoSerifGurmukhi-700.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Noto Serif Devanagari';src:url(/assets/fonts/NotoSerifDevanagari-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Serif Devanagari';src:url(/assets/fonts/NotoSerifDevanagari-700.woff) format('woff');font-weight:600 700;font-display:swap}
:root{--paper:#FBFAF6;--desk:#E7E1D3;--ground:#F6F4EF;--sheet:#FFFFFF;--ink:#172235;--muted:#5F6878;--line:#E2DDD1;--chip:#EAE6DC;
 --gui:#2E7D62;--pen:#1F4FA0;--wash:#E7EEF9;--warnbg:#FBF1DC;--warn:#8A5A00;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:18px/1.6 'Noto Sans','Noto Sans Gurmukhi','Noto Sans Devanagari',system-ui,sans-serif;overflow-x:clip}
:lang(pa) body,body:lang(pa){font-family:'Noto Sans','Noto Sans Gurmukhi',system-ui,sans-serif}
a{color:var(--pen)}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.mono{font-family:'Geist Mono',ui-monospace,Menlo,monospace}
/* the plain header on inner pages */
header.top{background:var(--paper);border-bottom:1px solid var(--line)}
header.top .bar{display:flex;align-items:center;gap:12px;padding:14px 0;flex-wrap:wrap}
.mark{width:34px;height:34px;border-radius:10px;background:var(--paper);color:var(--ink);display:grid;place-items:center;font:600 20px/1 Newsreader,Georgia,serif;flex:none;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(23,34,53,.18),0 3px 8px -3px rgba(23,34,53,.35)}
.brand{font:600 21px/1 Newsreader,Georgia,serif;color:var(--ink);text-decoration:none}
.langs{margin-left:auto;display:flex;gap:6px}
.langs a{color:var(--muted);text-decoration:none;padding:5px 11px;border-radius:99px;font-weight:600;font-size:15px}
.langs a[aria-current]{background:var(--ink);color:var(--paper)}
/* the Mohar hero */
.hero{position:relative;overflow:hidden;min-height:680px;isolation:isolate;color:#172235;
 background:radial-gradient(120% 95% at 72% 32%,#FFFFFF 0%,#F5F2EB 52%,#E7E1D3 100%)}
@media (min-width:900px){.hero{min-height:clamp(600px,52vw,700px)}}
.hero .stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab}
.hero .stage canvas:active{cursor:grabbing}
.hero picture.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:0;transition:opacity .6s}
.hero[data-state=live] picture.still img{opacity:0}
/* wide screens crop the still from the bottom so the press stays clear of the nav row */
@media (min-width:761px){.hero picture.still img{object-position:72% 8%}}
.hui{position:relative;z-index:2;min-height:inherit;display:flex;flex-direction:column;padding:16px 16px 18px;pointer-events:none;max-width:1160px;margin:0 auto}
@media (min-width:900px){.hui{padding:20px 28px 24px}}
.hui a,.hui button,.hui nav{pointer-events:auto}
.hnav{display:flex;align-items:center;gap:20px;font-size:15px;flex-wrap:wrap}
.hlogo{display:flex;align-items:center;gap:9px;font:600 21px/1 Newsreader,Georgia,serif;color:inherit;text-decoration:none}
.hlinks{display:none;gap:20px}
.hlinks a{color:inherit;text-decoration:none;opacity:.8}
@media (min-width:900px){.hlinks{display:flex}}
.hnav .langs{margin-left:auto}
.hbtn{padding:9px 15px;border-radius:99px;font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none;background:#172235;color:#FBFAF6}
.hcopy{margin-top:26px;max-width:600px}
@media (min-width:900px){.hcopy{margin:56px 0 auto;max-width:480px;padding-left:4px}}
/* phones: the copy first, then room for the 3D scene above the hint row */
@media (max-width:899px){.hero{min-height:0}.hero .hui{min-height:0}.hero .hui .hfoot{margin-top:min(86vw,380px);padding-top:0}}
.hk{margin:0;font:500 12px/1.4 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.hh{margin:10px 0 12px;font:500 clamp(38px,5vw,60px)/1.02 Newsreader,Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
:lang(pa) .hh{font-family:'Tiro Gurmukhi',Newsreader,serif;font-weight:400;letter-spacing:0;line-height:1.15}
:lang(hi) .hh{font-family:'Tiro Devanagari Hindi',Newsreader,serif;font-weight:400;letter-spacing:0;line-height:1.15}
.hs{margin:0 0 8px;font:400 clamp(18px,1.8vw,21px)/1.5 'Tiro Gurmukhi','Tiro Devanagari Hindi',serif;opacity:.92}
.hl{margin:0;font-size:17px;line-height:1.55;color:#3F4858;max-width:520px}
.hcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hcta a{padding:12px 18px;border-radius:99px;font-weight:600;font-size:15px;text-decoration:none}
.stores{margin:12px 0 0;font-size:14px;color:#5F6878}
.hcta .p{background:#172235;color:#FBFAF6}.hcta .g{background:rgba(23,34,53,.07);color:#172235}
.hfoot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hint{font:500 11px/1.3 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.7;max-width:24ch}
.hact{border:0;cursor:pointer;padding:11px 16px;border-radius:99px;font:600 14px/1.2 'Noto Sans','Noto Sans Gurmukhi','Noto Sans Devanagari',sans-serif;white-space:nowrap;
 background:#FBFAF6;color:#172235;box-shadow:0 1px 2px rgba(23,34,53,.15),0 10px 22px -10px rgba(23,34,53,.4)}
.hctl{display:flex;align-items:center;gap:8px}
/* the sound control (owner, 17 Oct 2026): speaker = mute, slider = volume; scenes.js keeps one setting for both heroes */
.snd{display:flex;align-items:center;gap:2px;height:39px;padding:0 12px 0 2px;border-radius:99px;background:#FBFAF6;color:#172235;
 box-shadow:0 1px 2px rgba(23,34,53,.15),0 10px 22px -10px rgba(23,34,53,.4)}
.snd button{display:grid;place-items:center;width:35px;height:35px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.snd button:hover{background:rgba(23,34,53,.07)}
.snd svg{width:20px;height:20px}
.snd .x,.snd.mute .w{display:none}.snd.mute .x{display:inline}
.snd input{width:78px;margin:0;accent-color:#172235;cursor:pointer}
@media (max-width:560px){.hfoot{flex-wrap:wrap}.hfoot .hint{flex:1 0 100%;max-width:none}.hctl{margin-left:auto}}
.nogl-note{display:none}
.hero.nogl .nogl-note{display:block;position:absolute;right:18px;bottom:70px;z-index:2;font-size:13px;padding:8px 12px;border-radius:10px;background:rgba(127,127,127,.18)}
.hero.nogl .hint,.hero.nogl .hact,.hero.nogl .snd,.hero.lite .hint,.hero.lite .hact,.hero.lite .snd,.hero.lite .stage{display:none}
.hero.lite picture.still img{opacity:1!important}
/* the Night Keys typing section */
.hero.keys{color:#E8ECF2;background:radial-gradient(55% 60% at 74% 26%,rgba(124,192,255,.2),rgba(124,192,255,0) 70%),linear-gradient(180deg,#0F131A,#07090D)}
.keys .hh{font:700 clamp(36px,4.6vw,56px)/1.05 'Anek Latin','Noto Sans Gurmukhi','Noto Sans Devanagari',sans-serif;letter-spacing:-.02em}
.keys .stores{color:#98A2B3}
.keys .hs{font-family:'Anek Devanagari','Noto Sans Devanagari','Noto Sans Gurmukhi',sans-serif;color:#C6D0DD}
.keys .hl{color:#AEB8C6}
.keys .hact{background:rgba(232,236,242,.1);color:#E8ECF2;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.keys .snd{background:rgba(232,236,242,.1);color:#E8ECF2;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.keys .snd button:hover{background:rgba(232,236,242,.12)}.keys .snd input{accent-color:#7CC0FF}
.keys .hk{color:#7CC0FF;opacity:1}
/* content */
main{padding:40px 0 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px}
.card{background:var(--sheet);border-radius:18px;padding:18px 20px;box-shadow:0 1px 2px rgba(23,34,53,.07),0 14px 26px -18px rgba(23,34,53,.45)}
.card h3{margin:0 0 6px;font:500 21px/1.25 Newsreader,'Tiro Gurmukhi','Tiro Devanagari Hindi',Georgia,serif}
.card p{margin:0;color:var(--muted);font-size:16.5px}
.note{margin:26px 0;padding:14px 16px;border-radius:14px;background:var(--warnbg);color:var(--warn);font-size:16px}
h2{font:500 30px/1.2 Newsreader,'Tiro Gurmukhi','Tiro Devanagari Hindi',Georgia,serif;margin:40px 0 10px}
.faq dt{font-weight:600;margin-top:14px}.faq dd{margin:2px 0 0;color:var(--muted)}
.shot{margin:30px 0 0;border-radius:14px;overflow:hidden;background:var(--sheet);box-shadow:0 1px 2px rgba(23,34,53,.08),0 30px 50px -30px rgba(23,34,53,.5)}
.shot img{display:block;width:100%;height:auto}
.doc{max-width:760px}.doc h1{font:500 38px/1.15 Newsreader,Georgia,serif;color:var(--ink);margin:28px 0 6px}.doc h2{font-size:24px;margin-top:28px}.doc p,.doc li{color:var(--ink)}
.doc .meta{color:var(--muted);font-size:15px}
footer{padding:40px 0 48px;color:var(--muted);font-size:15px}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
/* 1.2 phase 6: the header's links, the template and dictionary pages (light: this stylesheet and the counter only) */
header.top .links{display:flex;gap:16px;margin-left:6px;flex-wrap:wrap}
header.top .links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
header.top .links a:hover{color:var(--ink)}
@media (max-width:620px){header.top .links{order:3;width:100%;margin-left:0}}
.tpl{padding-top:20px}
.tpl h1{font:500 clamp(30px,4.2vw,42px)/1.15 Newsreader,'Tiro Gurmukhi','Tiro Devanagari Hindi',Georgia,serif;margin:10px 0 8px;letter-spacing:-.01em;text-wrap:balance}
:lang(pa) .tpl h1{font-family:'Tiro Gurmukhi',Newsreader,serif;font-weight:400;letter-spacing:0}
:lang(hi) .tpl h1{font-family:'Tiro Devanagari Hindi',Newsreader,serif;font-weight:400;letter-spacing:0}
.tpl h2{font-size:25px;margin:30px 0 10px}
.tpl h2 a{color:var(--ink);text-decoration:none}
.tpl h3{font-size:17px;margin:16px 0 4px}
.crumbs{font-size:14px;color:var(--muted)}.crumbs a{color:var(--muted)}
.lede{font-size:19px;color:#3F4858;max-width:720px;margin:0 0 16px}
.btn{display:inline-block;padding:12px 20px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:600;font-size:16px;text-decoration:none}
.small{font-size:14.5px;color:var(--muted);margin:8px 0 0}
.cols{display:grid;gap:22px;align-items:start;margin-top:26px}
.cols .sample>h2{margin-top:2px}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,1fr) 320px}}
.facts{background:var(--sheet);border-radius:18px;padding:2px 20px 16px;box-shadow:0 1px 2px rgba(23,34,53,.07),0 14px 26px -18px rgba(23,34,53,.45)}
.facts h2{font-size:21px;margin:14px 0 4px}
.facts dt{font-weight:600;font-size:14px;color:var(--muted);margin-top:10px}
.facts dd{margin:2px 0 0;font-size:16px}
.chips{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{background:var(--chip);border-radius:99px;padding:3px 11px;font-size:14.5px}
.chips a{text-decoration:none;color:var(--ink)}.chips a[aria-current]{font-weight:700}
.paper{position:relative;background:#fff;color:#141414;border-radius:3px;padding:28px 30px;font:16px/1.65 Tinos,'Times New Roman',Georgia,serif;overflow:hidden;overflow-wrap:break-word;
 box-shadow:0 1px 2px rgba(0,0,0,.2),0 14px 26px -14px rgba(0,0,0,.5)}
.paper:lang(pa){font-family:'Noto Serif Gurmukhi',serif}.paper:lang(hi){font-family:'Noto Serif Devanagari',serif}
@media (max-width:620px){.paper{padding:18px 16px;font-size:15px}.paper p{text-align:left}}
.paper.cut{max-height:660px}
.paper.cut::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.paper p{margin:0 0 .6em;text-align:justify}
.paper .xt{text-align:center;font-weight:700;margin-bottom:.4em}
.paper .c{text-align:center}.paper .r{text-align:right}.paper .lf{text-align:left}.paper .b{font-weight:700}.paper .in{padding-left:2em}
.paper .xp{padding-left:2.2em;text-indent:-2.2em}.paper .xp.sub{padding-left:4.4em}
.paper .xp .n{display:inline-block;min-width:2.2em;text-indent:0}
.paper .f{color:#1D4F86}
.paper .gap{display:inline-block;min-width:6em;border-bottom:1px dotted #6C7F92;color:#6C7F92;font-size:.85em;text-indent:0}
.paper .xs{display:flex;justify-content:space-between;gap:16px;margin:.6em 0}
.paper .xg{text-align:right;margin-top:1.2em}
.paper .xx{overflow-x:auto;margin:.4em 0 .8em}
.paper table{border-collapse:collapse;width:100%;font-size:.9em}.paper th,.paper td{border:1px solid #999;padding:3px 6px;text-align:left;vertical-align:top}
.paper .xph{display:flex;gap:12px;justify-content:center;margin:.6em 0}
.paper .xph span{width:3.5cm;height:4.5cm;border:1px solid #444;display:grid;place-items:center;text-align:center;font-size:.75em;padding:6px;color:#555}
.paper blockquote{margin:.4em 2em}
.more{font-size:14.5px;color:var(--muted);margin:10px 0 0}
.guide,.stamp,.related{max-width:760px}
.tlist{columns:2 300px;padding-left:1.1em;margin:6px 0}
.tlist li{break-inside:avoid;margin:3px 0}
.tlist.sum{columns:1;list-style:none;padding:0}
.tlist.sum li{padding:10px 0;border-bottom:1px solid var(--line)}
.tlist.sum a{font-weight:600}.tlist.sum span{display:block;color:var(--muted);font-size:15.5px}
.count{font-size:14px;font-family:'Noto Sans',sans-serif;color:var(--muted)}
.dt{overflow-x:auto}
.dict table{border-collapse:collapse;width:100%;background:var(--sheet);font-size:16px}
.dict th,.dict td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dict thead th{font-size:13px;color:var(--muted);font-weight:700;background:var(--chip)}
.dict tbody th{font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.hint{visibility:hidden}}