/* Hindi varnamala tracing. The guide font loads only when tracing starts or a worksheet is printed. */
@font-face{font-family:"VMDeva";src:url(../fonts/ck-noto-deva-700.woff2) format("woff2");font-weight:400 800;font-display:swap}
.vm-app [lang=hi],.vm-l b,.vm-ph,.vm-word,#vm-cons,#vm-pick{font-family:"Nirmala UI","Noto Sans Devanagari","Mangal","Kohinoor Devanagari",var(--font)}
.vm-tabs{margin-bottom:14px}
.vm-tabs .chip{font-size:15px;min-height:40px}
.vm-count{margin-bottom:12px}
.vm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.vm-l{display:grid;justify-items:center;gap:0;padding:6px 2px 4px;background:#fff;border:2px solid var(--ink);border-radius:12px;cursor:pointer;color:var(--ink);box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.vm-l:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.vm-l b{font-size:28px;font-weight:600;line-height:1.5}
.vm-l .vm-s{display:block;height:16px;font-size:12px;line-height:16px;letter-spacing:1px;color:#f59e0b}
.vm-l .vm-s::before{content:"☆☆☆";color:#c9cde0}
.vm-l[data-st="1"] .vm-s::before{content:"★";color:#f59e0b}.vm-l[data-st="1"] .vm-s::after{content:"☆☆";color:#c9cde0}
.vm-l[data-st="2"] .vm-s::before{content:"★★";color:#f59e0b}.vm-l[data-st="2"] .vm-s::after{content:"☆";color:#c9cde0}
.vm-l[data-st="3"] .vm-s::before{content:"★★★";color:#f59e0b}
.vm-l[data-st="3"]{background:#ecfdf3}
.vm-l[aria-pressed=true]{background:var(--sun);box-shadow:3px 3px 0 var(--blue)}
.vm-word{display:flex;align-items:center;gap:10px;min-height:44px;font-size:22px;font-weight:600;margin:-4px 0 10px}
.vm-word b{color:#c2410c}
.vm-word small{font:500 14px var(--font);color:var(--muted)}
.vm-pic{font-size:30px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.vm-box{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.vm-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:min(200px,44vw);font-weight:700;color:#e3e6ef;line-height:1;user-select:none;padding-bottom:6%}
.vm-start{position:absolute;inset:auto 0 0 0;display:grid;justify-items:center;gap:8px;padding:14px;background:linear-gradient(to top,rgba(255,255,255,.96) 60%,rgba(255,255,255,0))}
.vm-start .hint{text-align:center}
.vm-box canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.vm-box.on .vm-ph,.vm-box.on .vm-start{display:none}
.vm-stars{display:flex;justify-content:center;gap:10px;height:44px;margin-top:14px}
.vm-stars i{width:40px;height:40px;background:#e3e6ef;clip-path:polygon(50% 3%,63% 36%,98% 37%,70% 59%,80% 94%,50% 74%,20% 94%,30% 59%,2% 37%,37% 36%)}
.vm-stars i.on{background:#f59e0b}
.vm-stars i.pop{animation:vmpop .5s var(--ease) both}
@keyframes vmpop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.vm-stars i.pop{animation:none}}
.vm-msg{min-height:48px;text-align:center;font-weight:700;font-size:15.5px;margin-top:6px}
.vm-flash .mv-flash{margin:8px 0 0}
.vm-actions{justify-content:center}
.vm-progress,.vm-printpanel{margin-top:26px}
.vm-printpanel .lbl{display:block;margin-bottom:8px}
.vm-chips{margin-bottom:16px}
.vm-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;max-width:460px}
.vm-pickf{max-width:460px}
.vm-phint{margin-top:12px}
#vm-printbox{display:none}
@media (max-width:900px){.vm-app{grid-template-columns:minmax(0,1fr)}.vm-trace-panel{position:static}}
@media (max-width:520px){.vm-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}.vm-l b{font-size:25px}.vm-actions .btn{padding:10px 14px}}

/* printed worksheet */
.vm-sheet{width:186mm;font-family:var(--font);color:#000}
.vm-sheet h3{font:700 18px "VMDeva",var(--font);margin:0 0 2mm}
.vm-head{display:flex;gap:6mm;font-size:12px;margin-bottom:4mm}
.vm-head span{flex:1;border-bottom:1px solid #000;padding-bottom:1mm}
.vm-blk{break-inside:avoid;page-break-inside:avoid;margin-bottom:4mm}
.vm-bw{font:600 13px "VMDeva",var(--font);margin:0 0 1mm}
.vm-row{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #9aa0b4;border-bottom:0}
.vm-row:last-child{border-bottom:1px solid #9aa0b4}
.vm-row svg{display:block;width:100%;height:auto;border-right:1px solid #c9cde0}
.vm-row svg:last-child{border-right:0}
.vm-row text{font-family:"VMDeva","Noto Sans Devanagari","Nirmala UI",sans-serif;font-weight:700}
.vm-row .m{fill:#000}
.vm-row .d{fill:#f1f2f6;stroke:#6b7086;stroke-width:1.8;stroke-dasharray:1.6 1.8;paint-order:stroke}
.vm-row .gl{stroke:#c9d6f5;stroke-width:.6}
.vm-foot{font-size:10px;color:#555;margin-top:2mm}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body>*:not(#vm-printbox){display:none!important}
  #vm-printbox{display:block!important}
  #vm-printbox,#vm-printbox *{visibility:visible}
  #vm-printbox *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}