:root{
  --sun:#FFC93C; --sun-deep:#F5A623; --sky:#4EA8DE; --sky-deep:#2C7BB6;
  --coral:#FF7B54; --mint:#6BCB77; --plum:#9B5DE5;
  --cream:#FFF8EC; --paper:#ffffff; --ink:#2B2D42; --muted:#5b6079;
  --line:#f0e4cf; --radius:20px; --shadow:0 8px 24px rgba(43,45,66,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Mukta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px; line-height:1.75;
}
h1,h2,h3,h4,.brand,.sec-title{font-family:"Baloo 2","Mukta",sans-serif; line-height:1.25; color:var(--ink)}
a{color:var(--sky-deep); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.wrap{max-width:1080px; margin:0 auto; padding:0 18px}
.center{text-align:center}
.muted{color:var(--muted)}
.skip{position:absolute; left:-999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:8px 12px; z-index:99; border-radius:8px}

/* header */
.site-head{background:linear-gradient(180deg,#fff 0%, #FFF8EC 100%); border-bottom:3px solid var(--sun); position:sticky; top:0; z-index:20}
.head-inner{display:flex; align-items:center; gap:16px; padding:12px 18px; flex-wrap:wrap}
.brand{font-size:28px; font-weight:800; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-ico{font-size:30px}
.search{margin-left:auto; display:flex; background:#fff; border:2px solid var(--line); border-radius:999px; overflow:hidden}
.search input{border:0; padding:10px 16px; font-size:16px; font-family:inherit; width:220px; outline:none; background:transparent}
.search button{border:0; background:var(--sun); padding:0 16px; font-size:17px; cursor:pointer}
.site-nav{background:var(--sun)}
.nav-inner{display:flex; gap:6px; overflow-x:auto; padding:8px 18px; scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.site-nav a{color:#5b3d00; font-weight:600; white-space:nowrap; padding:6px 12px; border-radius:999px; font-size:16px}
.site-nav a:hover{background:#fff; text-decoration:none}

/* hero */
.hero{text-align:center; padding:40px 18px 10px}
.hero h1{font-size:38px; margin:0 0 12px}
.hero p{max-width:640px; margin:0 auto; color:var(--muted); font-size:19px}
.hero-tags{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.hero-tags span{background:#fff; border:2px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:600; font-size:15px}

.sec-title{font-size:26px; margin:38px 0 16px; position:relative; padding-left:16px}
.sec-title::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:6px; border-radius:6px; background:var(--coral)}

/* grids */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.cat-card{background:var(--paper); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; border:2px solid #fff; transition:transform .15s ease, border-color .15s}
.cat-card:hover{transform:translateY(-4px); border-color:var(--sun); text-decoration:none}
.cat-emoji{font-size:30px}
.cat-emoji.big{font-size:52px}
.cat-name{font-weight:700; font-size:18px; color:var(--ink); font-family:"Baloo 2",sans-serif}
.cat-desc{font-size:14px; color:var(--muted); line-height:1.5}
.cat-head{text-align:center; padding:24px 0 6px}
.cat-head h1{font-size:32px; margin:6px 0}
.cat-head .count{color:var(--muted); font-weight:600}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.card{background:var(--paper); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; border:2px solid #fff; transition:transform .15s ease, border-color .15s; position:relative}
.card:hover{transform:translateY(-4px); border-color:var(--sky); text-decoration:none}
.card-emoji{font-size:26px}
.card h3{margin:0; font-size:20px; color:var(--ink)}
.card-shiksha{font-size:15px; color:var(--muted); margin:0; flex:1}
.card-meta{font-size:13px; color:var(--coral); font-weight:600}

/* breadcrumb */
.breadcrumb{font-size:15px; color:var(--muted); margin:20px 0 4px}
.breadcrumb span{color:var(--ink)}

/* story */
.story{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; margin-top:14px}
.story-head h1{font-size:34px; margin:0 0 10px}
.story-author{color:var(--coral); font-weight:600; font-size:17px; margin:0 0 10px}
.story-meta{display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:15px; font-weight:600}
.story-tools{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0}
.story-tools button,.story-tools .tool{border:2px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; color:var(--ink)}
.story-tools button:hover,.story-tools .tool:hover{border-color:var(--sun); background:var(--cream); text-decoration:none}
.shiksha-box{background:linear-gradient(135deg,#FFF3D6,#FFE9C2); border-left:6px solid var(--sun-deep); border-radius:14px; padding:14px 18px; font-size:18px; margin:18px 0}
.story-body{font-size:20px; line-height:2}
.story-body p{margin:0 0 18px}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0}
.tag{background:#EAF6FF; color:var(--sky-deep); border-radius:999px; padding:4px 12px; font-size:14px; font-weight:600}
.story-nav{display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; margin-top:20px; border-top:2px dashed var(--line); padding-top:18px}
.pn{font-weight:600; color:var(--sky-deep)}
.ad-slot{margin:20px 0; min-height:90px; text-align:center}

/* prose */
.prose{max-width:760px; margin:0 auto; padding:10px 18px 40px}
.prose h2{font-size:24px; margin-top:30px}
.prose p{color:#3a3d55}

/* footer */
.site-foot{background:#2B2D42; color:#e9e9f2; margin-top:50px; padding:36px 0 12px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.foot-brand{font-size:24px; font-weight:800; font-family:"Baloo 2",sans-serif; margin:0 0 6px}
.foot-tag{color:#b9bcd0; font-size:15px; max-width:320px}
.site-foot h3{color:#fff; font-size:17px; margin:0 0 10px}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot li{margin:6px 0}
.site-foot a{color:#cfd2e6; font-size:15px}
.site-foot a:hover{color:var(--sun)}
.copyright{text-align:center; color:#9a9db4; font-size:14px; margin:26px 0 0; border-top:1px solid #3a3d55; padding-top:14px}

.btn{display:inline-block; background:var(--coral); color:#fff; padding:10px 22px; border-radius:999px; font-weight:700}
.btn:hover{text-decoration:none; background:#e8643d}

.story-source{color:var(--coral); font-weight:600; font-size:17px; margin:0 0 10px}
.story-body{user-select:none; -webkit-user-select:none; -moz-user-select:none}
.share-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:24px 0 4px; border-top:2px dashed var(--line); padding-top:16px}
.share-label{font-weight:700; color:var(--muted)}
.share,.share-row button{border:0; border-radius:999px; padding:9px 18px; font-family:inherit; font-weight:700; font-size:15px; cursor:pointer; color:#fff; text-decoration:none; line-height:1}
.share:hover{text-decoration:none; opacity:.9}
.share.wa{background:#25D366}.share.fb{background:#1877F2}.share.tw{background:#111}.share.tg{background:#229ED9}
.share-row button{background:#6c757d}
.comments{margin-top:30px; background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:18px 24px 12px}
.comments .muted{color:var(--muted)}
.all-coll{margin:22px 0 6px; font-size:19px; border-bottom:2px solid var(--sun); padding-bottom:4px; font-family:"Baloo 2",sans-serif}
.all-list{columns:2; column-gap:30px; list-style:none; padding:0; margin:0 0 6px}
.all-list li{margin:5px 0; break-inside:avoid}
.all-list a{font-weight:600; display:inline-block}
.all-list .en{color:var(--muted); font-weight:500; font-size:13px; margin-left:6px}
@media (max-width:640px){.all-list{columns:1}}
.comments .giscus{min-height:100px}
.comments .fb-comments{min-height:120px}
.cform{margin:6px 0 14px; display:flex; flex-direction:column; gap:8px; max-width:640px}
.cform input[type=text],.cform textarea{font-family:inherit; font-size:15px; padding:9px 12px; border:2px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.cform textarea{min-height:80px; resize:vertical}
.cform button{align-self:flex-start; border:none; background:var(--sky-deep); color:#fff; font-family:inherit; font-weight:700; font-size:15px; padding:9px 22px; border-radius:999px; cursor:pointer}
.cform button:hover{filter:brightness(1.08)}
.cform .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.cmsg{font-size:14px; color:var(--muted); margin:0}
.clist{margin-top:6px}
.citem{background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:8px 0}
.citem b{color:var(--ink)}
.cdate{color:var(--muted); font-size:12px; margin-left:8px}
.citem p{margin:4px 0 0}
.email-btn{border:2px solid var(--sun); background:#fff; color:var(--ink); border-radius:999px; padding:6px 14px; font-family:inherit; font-weight:700; font-size:15px; cursor:pointer}
.email-btn:hover{background:var(--cream)}
.email-out a{color:var(--sky-deep); font-weight:700}
.site-foot .email-out a{color:var(--sun)}
.print-head,.print-foot{display:none}

@media (max-width:640px){
  body{font-size:17px}
  .hero h1{font-size:28px}
  .story{padding:20px}
  .story-head h1{font-size:26px}
  .story-body{font-size:18px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .search input{width:140px}
  .head-inner{gap:8px}
}
@media print{
  .site-head,.site-foot,.story-tools,.story-nav,.ad-slot,.breadcrumb,.share-row{display:none}
  .story{box-shadow:none; padding:0}
  body{background:#fff}
  .print-head,.print-foot{display:block}
  .print-head{font-weight:700; margin-bottom:12px; border-bottom:1px solid #999; padding-bottom:6px; font-size:13px}
  .print-foot{margin-top:22px; border-top:1px solid #999; padding-top:8px; font-size:13px; color:#333}
}