:root{--ink:#16202C;--muted:#5A6573;--accent:#145C63;--accent-2:#0F474D;--accent-soft:#E8F1F2;--accent-tint:rgba(20,92,99,.07);--accent-edge:rgba(20,92,99,.45);--brass-ink:#8A5F1A;--brass-soft:#FBEFE2;--brass-edge:#F1D6B8;--bg:#F6F6F2;--paper:#FBF9F4;--sunken:#F3EFE6;--surface:#FFFFFF;--line:rgba(22,32,44,.10);--line-strong:#D5D6CF;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-pill:999px;--sh-1:0 1px 2px rgba(22,32,44,.04),0 1px 1px rgba(22,32,44,.03);--head:'Fraunces','Noto Sans Devanagari',Georgia,serif;--ui:'Inter','Noto Sans','Noto Sans Devanagari',system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #E8590C!important;outline-offset:2px!important}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;border-radius:var(--r-pill);z-index:20}.skip:focus{left:8px}
.bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.bar .in{max-width:1120px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto}.brand img{height:32px;width:auto;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);font:600 15px/1 var(--ui);text-decoration:none;cursor:pointer;touch-action:manipulation;text-align:center}
.btn[hidden]{display:none}
.btn.primary{min-height:48px;padding:0 24px;background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-2)}
.btn.secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}.btn.secondary:hover{background:var(--paper)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px 40px}
.crumb{font-size:13px;color:var(--muted);padding-top:18px}.crumb a{color:var(--muted)}
.kicker{font:700 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);margin:24px 0 10px}
h1{font:500 clamp(28px,5vw,44px)/1.1 var(--head);letter-spacing:-.015em;margin:0 0 12px;text-wrap:balance}
h2{font:500 clamp(22px,3vw,28px)/1.15 var(--head);letter-spacing:-.01em;margin:36px 0 12px}
.lead{font-size:16px;color:var(--muted);max-width:62ch;margin:0 0 20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px;list-style:none;margin:0;padding:0}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.thumb{background:var(--paper);border-bottom:1px solid var(--line);padding:12px}.thumb svg{display:block;width:100%;height:auto}
.card .body{display:flex;flex-direction:column;gap:8px;padding:14px;flex:1}
.card h3{font:500 20px/1.2 var(--head);margin:0}.card p{margin:0;font-size:14px;color:var(--muted)}
.meta{font:500 13px var(--ui);color:var(--muted)}.card .btn{margin-top:auto}
.note{background:var(--brass-soft);border:1px solid var(--brass-edge);border-radius:var(--r-md);padding:14px 16px;max-width:62ch}
.steps{max-width:62ch;padding-left:22px}.steps li{margin:6px 0}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 16px;margin:10px 0;max-width:62ch}
summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer}details p,details ul{margin:0 0 14px}
.links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.tip{max-width:190mm;margin:12px auto 0;padding:0 16px;font-size:14px;color:var(--muted)}

/* ---- the A4 sheet (screen preview) ---- */
.sheet{width:min(190mm,calc(100% - 24px));margin:12px auto 32px;padding:6mm;background:#fff;color:#111;border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:3mm}
.sh-title{font:500 22pt/1.1 var(--head);letter-spacing:-.01em;margin:0}
.sh-sub{margin:0;font-size:10.5pt;line-height:1.4;color:#222}
.nameline{display:flex;gap:6mm;font-size:10pt;color:#222}.nameline span{flex:1;border-bottom:1px solid #777;padding-bottom:1mm}.nameline span:first-child{flex:2}
.sec-h{font:600 12pt/1.2 var(--ui);margin:1mm 0 0}
.fig{display:block;width:100%;height:auto}
.count-row{display:flex;align-items:center;gap:4mm}.count-row svg{flex:1;min-width:0;height:auto}
.ans{flex:none;width:16mm;height:12mm;border:1.5px solid #555;border-radius:3mm}.unit{flex:none;width:17mm;font-size:10pt}
.q{margin:0;font-size:11pt}

/* colouring parts: the only black outlines on a sheet */
.ol{fill:#fff;stroke:#000;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.on{fill:none;stroke:#000;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.eye{fill:#000}
/* non-colouring drawing */
.dot{fill:#333}.kline{fill:none;stroke:#145C63;stroke-width:3;stroke-linejoin:round}.guide{fill:none;stroke:#8a8a8a;stroke-width:2.5;stroke-dasharray:6 5}

/* kolam */
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.kcell{border:1px solid #bbb;border-radius:3mm;padding:1.5mm;text-align:center;font-size:9pt;color:#222}.kcell svg{display:block;width:100%;height:auto}.kcell b{display:block;font-weight:600;margin-top:.5mm}
.kcell.txt{text-align:left;font-size:9.5pt;line-height:1.35;padding:3mm}.kcell.txt ol{margin:1mm 0 0;padding-left:5mm}.kcell.txt li{margin:1mm 0}

/* story order */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.panel{border:1.5px dashed #888;border-radius:3mm;padding:2mm;display:flex;flex-direction:column;gap:1.5mm}
.panel svg{display:block;width:100%;height:auto}.panel p{margin:0;font-size:9.5pt;line-height:1.3}
.numrow{display:flex;align-items:center;gap:2mm;font-size:9.5pt;color:#222}.numbox{width:11mm;height:11mm;border:1.5px solid #555;border-radius:50%}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
.slot{aspect-ratio:3/2;border:1.5px solid #888;border-radius:2mm;padding:1mm 2mm;font:600 11pt var(--ui)}

/* moral match */
.match{display:grid;grid-template-columns:1fr 1fr;column-gap:22mm;row-gap:3mm}
.item{position:relative;display:flex;align-items:center;gap:3mm;min-height:23mm;border:1px solid #bbb;border-radius:3mm;padding:2mm 3mm;font-size:10.5pt;line-height:1.3}
.item svg{flex:none;width:17mm;height:17mm}.item b{font-weight:600}
.item.l::after,.item.r::before{content:"";position:absolute;top:50%;width:5mm;height:5mm;margin-top:-2.5mm;border-radius:50%;background:#fff;border:1.5px solid #555}
.item.l::after{right:-2.5mm}.item.r::before{left:-2.5mm}
.item .badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:8mm;height:8mm;border-radius:50%;border:1.5px solid #555;font-weight:700}
.free{height:28mm;border:1.5px solid #888;border-radius:3mm}

@media screen and (max-width:480px){.kgrid{grid-template-columns:1fr 1fr}.match{column-gap:12mm}.sheet{padding:4mm}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@page{size:A4 portrait;margin:10mm}
@media print{
  html,body{background:#fff}
  .bar,.tip,.skip,.no-print{display:none!important}
  .sheet{width:190mm;height:275mm;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;break-inside:avoid;page-break-after:avoid;break-after:avoid}
}