/* Zaku Malawi Chichewa lessons: chalkboard. CSS only, no images; the chalk font is self-hosted (Patrick Hand, OFL, fonts/OFL.txt). */
@font-face{font-family:"Patrick Hand";src:url("fonts/patrick-hand.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.zk-ny{--chalk:#f4f1e6;--dim:rgba(244,241,230,.72);--board:#1f4a33;--yel:#ffe08a;--pink:#ffb3b3;
	position:relative;margin:20px 0 26px;padding:12px 12px 0;border-radius:18px;color:var(--chalk);
	background:linear-gradient(135deg,#8a5a2b,#5e3a19 40%,#7d4f24 70%,#4f2f13);
	box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);
	font-family:"Patrick Hand","Gochi Hand","Segoe Print","Chalkboard SE","Comic Sans MS","Comic Neue",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.zk-ny *{box-sizing:border-box}
.zk-ny p,.zk-ny span,.zk-ny b,.zk-ny small,.zk-ny a,.zk-ny button{font-family:inherit!important}
.zk-ny [hidden]{display:none!important}
.zk-ny-board{position:relative;min-height:380px;border-radius:10px;padding:14px 14px 18px;overflow:hidden;
	background:
		radial-gradient(ellipse at 20% 15%,rgba(255,255,255,.07),transparent 55%),
		radial-gradient(ellipse at 80% 85%,rgba(255,255,255,.05),transparent 50%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
		var(--board);
	box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 0 40px rgba(0,0,0,.35)}
.zk-ny-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.zk-ny-name{font-size:17px;color:var(--dim);letter-spacing:.02em}
.zk-ny-endstars,.zk-ny-mini{display:inline-flex;gap:4px}
.zk-ny-endstars i,.zk-ny-mini i{display:inline-block;width:22px;height:22px;background:currentColor;opacity:.28;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.zk-ny-endstars i.on,.zk-ny-mini i.on{opacity:1;color:var(--yel)}
.zk-ny-endstars{margin:4px 0 8px}.zk-ny-endstars i{width:40px;height:40px}
.zk-ny-wait{font-size:40px;text-align:center;margin:90px 0;opacity:.5}
.zk-ny-screen p{margin:0}
.zk-ny-start,.zk-ny-end{text-align:center;padding:26px 4px 6px}
.zk-ny-big{font-size:54px;line-height:1.05;margin:0 0 10px!important;color:var(--chalk);text-shadow:0 0 1px rgba(255,255,255,.6),0 0 6px rgba(255,255,255,.12)}
.zk-ny-lead{font-size:23px;line-height:1.3;margin:0 0 8px!important}
.zk-ny-sub{font-size:18px;line-height:1.4;color:var(--dim)}
.zk-ny-badge{display:inline-block;margin:14px 0 0!important;padding:8px 16px;border:2px dashed var(--yel);border-radius:999px;color:var(--yel);font-size:20px;transform:rotate(-2deg)}

/* Tabs on the board */
.zk-ny-tabs{display:flex;gap:6px;margin:4px 0 10px}
.zk-ny .zk-ny-tabs button{flex:1;min-height:44px;border:2px solid rgba(244,241,230,.35)!important;background:transparent!important;color:var(--chalk)!important;
	border-radius:999px;font:inherit;font-size:18px;line-height:1;padding:8px 6px;cursor:pointer;box-shadow:none!important;text-transform:none;letter-spacing:0}
.zk-ny .zk-ny-tabs button[aria-selected=true]{background:var(--chalk)!important;color:var(--board)!important;border-color:var(--chalk)!important}
.zk-ny-count{font-size:16px;color:var(--dim);text-align:center;margin:0 0 10px!important}
.zk-ny-streak{color:var(--yel)}

/* Learn card */
.zk-ny .zk-ny-card{display:block;position:relative;width:100%;min-height:250px;margin:0;padding:0;border:0!important;background:transparent!important;
	cursor:pointer;perspective:1000px;color:var(--chalk);font:inherit;text-align:center;box-shadow:none!important}
.zk-ny-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 14px;
	border:2px dashed rgba(244,241,230,.4);border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .45s ease}
.zk-ny-back{transform:rotateY(180deg)}
.zk-ny-card.is-flipped .zk-ny-front{transform:rotateY(-180deg)}
.zk-ny-card.is-flipped .zk-ny-back{transform:rotateY(0)}
.zk-ny-en{font-size:34px;line-height:1.15}
.zk-ny-tap{font-size:16px;color:var(--dim)}
.zk-ny-ny{font-size:36px;line-height:1.1;color:var(--yel)}
.zk-ny-say{font-size:18px;color:var(--chalk)}.zk-ny-say b{font-weight:400;color:var(--yel);letter-spacing:.03em}
.zk-ny-note{font-size:16px;line-height:1.35;color:var(--dim);max-width:30em}
.zk-ny-ex{font-size:20px;line-height:1.3}.zk-ny-ex small{display:block;font-size:16px;color:var(--dim)}

/* Quiz */
.zk-ny-ask{font-size:18px;color:var(--dim);text-align:center;line-height:1.35;margin:0 0 4px!important}
.zk-ny-q{font-size:34px;line-height:1.15;text-align:center;margin:0 0 14px!important;color:var(--yel)}
.zk-ny-opts{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.zk-ny-opts{grid-template-columns:1fr 1fr}}
.zk-ny .zk-ny-opt,.zk-ny .zk-ny-tile{position:relative;overflow:hidden;min-height:54px;width:100%;margin:0;padding:10px 12px;border:2px solid rgba(244,241,230,.45)!important;
	background:rgba(255,255,255,.04)!important;color:var(--chalk)!important;border-radius:12px;font:inherit;font-size:21px;line-height:1.2;cursor:pointer;
	text-align:center;box-shadow:none!important;text-transform:none;letter-spacing:0;transition:background .2s,border-color .2s,opacity .3s}
.zk-ny .zk-ny-opt:disabled{cursor:default}
.zk-ny .zk-ny-opt.is-right{border-color:var(--yel)!important;color:var(--yel)!important;animation:zkNyWrite .55s steps(14,end) both}
.zk-ny .zk-ny-opt.is-wrong,.zk-ny .zk-ny-tile.is-wrong{animation:zkNyShake .4s}
.zk-ny .zk-ny-opt.is-wrong::after,.zk-ny .zk-ny-tile.is-wrong::after{content:"";position:absolute;inset:-10px;pointer-events:none;
	background:radial-gradient(ellipse at 50% 50%,rgba(244,241,230,.55),rgba(244,241,230,.15) 45%,transparent 70%);filter:blur(4px);animation:zkNyRub .8s ease-out forwards}
.zk-ny-fb{min-height:52px;font-size:19px;line-height:1.35;text-align:center;margin:12px 0 0!important}
.zk-ny-fb b{font-weight:400;color:var(--yel);font-size:24px}
.zk-ny-write{display:inline-block;animation:zkNyWrite .7s steps(16,end) both}
@keyframes zkNyWrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zkNyShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes zkNyRub{from{opacity:1}to{opacity:0}}

/* Match */
.zk-ny-clock{height:8px;border-radius:999px;background:rgba(255,255,255,.12);margin:0 0 12px;overflow:hidden}
.zk-ny-clock i{display:block;height:100%;width:100%;background:var(--chalk);border-radius:999px;transition:width .25s linear}
.zk-ny-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:560px){.zk-ny-grid{grid-template-columns:1fr 1fr 1fr}}
.zk-ny .zk-ny-tile{min-height:64px;font-size:18px}
.zk-ny .zk-ny-tile.is-ny{color:var(--yel)!important}
.zk-ny .zk-ny-tile.is-on{background:rgba(244,241,230,.18)!important;border-color:var(--chalk)!important;border-style:solid!important}
.zk-ny .zk-ny-tile.is-done{opacity:.25;border-style:dashed!important;cursor:default}

/* Sign-up note and saved line */
.zk-ny-nudge{margin:18px auto 0;max-width:30em;padding:14px 14px 16px;border:2px dashed rgba(244,241,230,.5);border-radius:14px;transform:rotate(-.6deg)}
.zk-ny-nudge p{font-size:19px;line-height:1.35;margin:0 0 12px!important}
.zk-ny-link{display:inline-block;margin:8px 6px 0;color:var(--chalk)!important;font-size:17px;text-decoration:underline!important}
.zk-ny-saved{margin:14px 0 0!important;font-size:17px;color:var(--yel)}

/* Chalk tray with the main buttons */
.zk-ny-tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;min-height:76px;padding:12px 4px 14px;position:relative}
.zk-ny-tray::before{content:"";position:absolute;left:18%;top:2px;width:38px;height:8px;border-radius:4px;background:#f7f4ea;box-shadow:60px 1px 0 -1px #f3d36b,104px 0 0 -1px #f2b6b6;opacity:.85}
.zk-ny .zk-ny-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 140px;max-width:280px;min-height:54px;margin:0;padding:12px 18px;
	border:0!important;border-radius:999px;background:var(--chalk)!important;color:#1f3a28!important;font:inherit;font-size:21px;line-height:1.1;cursor:pointer;
	text-decoration:none!important;box-shadow:0 3px 0 rgba(0,0,0,.3)!important;text-transform:none;letter-spacing:0}
.zk-ny .zk-ny-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)!important}
.zk-ny .zk-ny-ghost{background:rgba(255,255,255,.14)!important;color:var(--chalk)!important;box-shadow:inset 0 0 0 2px rgba(244,241,230,.5)!important}
.zk-ny-nudge .zk-ny-btn{flex:0 0 auto;min-width:200px}
.zk-ny-trayhint{margin:0;font-size:17px;color:rgba(244,241,230,.75)}
.zk-ny button:focus-visible,.zk-ny a:focus-visible{outline:3px solid var(--yel)!important;outline-offset:2px}
.zk-ny-nojs{padding:20px;font-size:18px}

/* Cover: the red button is the first thing you see */
.zk-ny-total{font-size:18px;color:var(--yel);white-space:nowrap}
.zk-ny-ribbon{position:absolute;z-index:2;top:-12px;left:18px;background:#c8102e;color:#fff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px 4px;border-radius:6px;box-shadow:0 3px 0 rgba(0,0,0,.25);transform:rotate(-2deg)}
.zk-ny-cover{text-align:center;padding:14px 4px 6px}
.zk-ny-cover .zk-ny-big{margin:0 0 16px!important}
.zk-ny-cover .zk-ny-lead{margin:18px 0 0!important}
.zk-ny .zk-ny-play{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:64px;min-width:240px;padding:14px 30px;border:0!important;border-radius:999px;
	background:#c8102e!important;color:#fff!important;font:inherit;font-size:27px;line-height:1;cursor:pointer;box-shadow:0 4px 0 #7d0a1d,0 0 0 0 rgba(200,16,46,.6)!important;animation:zkNyPulse 1.8s ease-out infinite;text-transform:none;letter-spacing:0}
.zk-ny .zk-ny-play:hover{background:#a90d27!important}
.zk-ny .zk-ny-play:active{transform:translateY(3px);box-shadow:0 1px 0 #7d0a1d!important}
@keyframes zkNyPulse{0%{box-shadow:0 4px 0 #7d0a1d,0 0 0 0 rgba(200,16,46,.65)}70%{box-shadow:0 4px 0 #7d0a1d,0 0 0 18px rgba(200,16,46,0)}100%{box-shadow:0 4px 0 #7d0a1d,0 0 0 0 rgba(200,16,46,0)}}
.zk-ny-modes{display:flex;justify-content:center;gap:18px;margin:18px 0 0!important;color:var(--dim);font-size:16px}
.zk-ny-modes span{display:inline-flex;flex-direction:column;align-items:center;gap:4px}.zk-ny-modes svg{width:26px;height:26px}
.zk-ny.is-cover .zk-ny-tray{min-height:22px;padding:6px 4px 8px}
.zk-ny .zk-ny-red{background:#c8102e!important;color:#fff!important}

/* Lesson path */
.zk-ny-path{list-style:none!important;margin:0 auto!important;padding:0!important;max-width:460px;position:relative}
.zk-ny-path::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;border-left:3px dashed rgba(244,241,230,.35)}
.zk-ny-path li{list-style:none!important;margin:0 0 10px!important;padding:0!important;position:relative}.zk-ny-path li::before{content:none!important}
.zk-ny .zk-ny-stone{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;margin:0;padding:6px 12px 6px 4px;border:0!important;background:transparent!important;color:var(--chalk)!important;
	font:inherit;text-align:left;cursor:pointer;box-shadow:none!important;text-transform:none;letter-spacing:0}
.zk-ny-num{flex:0 0 46px;height:46px;margin-left:4px;border-radius:50%;border:3px solid var(--chalk);background:var(--board);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;z-index:1}
.zk-ny-num svg{width:20px;height:20px}
.zk-ny-stt{display:flex;flex-direction:column;gap:3px;font-size:20px;line-height:1.2}
.zk-ny-mini i{width:16px;height:16px}
.zk-ny .zk-ny-stone.is-next .zk-ny-num{background:#c8102e;border-color:#c8102e;color:#fff;box-shadow:0 0 0 4px rgba(200,16,46,.3)}
.zk-ny .zk-ny-stone.is-next{background:rgba(255,255,255,.07)!important;border-radius:999px}
.zk-ny .zk-ny-stone.is-locked{opacity:.45;cursor:default}
.zk-ny-tip{text-align:center;margin:6px 0 0!important}
.zk-ny-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.12);margin:-4px 0 14px;overflow:hidden}
.zk-ny-bar i{display:block;height:100%;background:var(--yel);border-radius:999px;transition:width .3s}
.zk-ny-skip{text-align:center;margin:10px 0 0!important}
.zk-ny .zk-ny-skip .zk-ny-link{border:0!important;background:transparent!important;box-shadow:none!important;font:inherit;font-size:17px;cursor:pointer;padding:6px}

/* Fill the gap */
.zk-ny-gapq{font-size:30px}
.zk-ny-blank{display:inline-block;min-width:70px;border-bottom:3px dashed var(--yel);color:transparent;line-height:1}

/* Put the words in order */
.zk-ny-built{min-height:62px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px;margin:0 0 12px;border-bottom:2px solid rgba(244,241,230,.45)}
.zk-ny-ph{color:var(--dim);font-size:17px}
.zk-ny-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.zk-ny .zk-ny-word{min-height:48px;padding:8px 14px;margin:0;border:2px solid rgba(244,241,230,.5)!important;border-radius:10px;background:rgba(255,255,255,.06)!important;color:var(--chalk)!important;
	font:inherit;font-size:21px;line-height:1;cursor:pointer;box-shadow:none!important;text-transform:none;letter-spacing:0}
.zk-ny .zk-ny-word.is-in{color:var(--yel)!important;border-color:var(--yel)!important}
.zk-ny .zk-ny-pool .zk-ny-word:disabled{opacity:.2;cursor:default}
.zk-ny-built.is-wrong{animation:zkNyShake .4s}

/* Chat */
.zk-ny-chat{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding:4px 2px 10px;margin:0 0 6px}
.zk-ny-msg{max-width:82%;padding:9px 13px!important;border-radius:16px;font-size:20px;line-height:1.25;margin:0!important}
.zk-ny-msg b{display:block;font-weight:400;font-size:14px;color:var(--yel);margin-bottom:2px}
.zk-ny-msg small{display:block;font-size:15px;color:var(--dim);margin-top:2px}
.zk-ny-msg.is-them{align-self:flex-start;background:rgba(255,255,255,.1);border-bottom-left-radius:4px}
.zk-ny-msg.is-you{align-self:flex-end;background:var(--chalk);color:var(--board);border-bottom-right-radius:4px}
.zk-ny-narr{align-self:center;font-size:16px;color:var(--dim);text-align:center;margin:4px 0!important}

/* Lesson posts: wide board, readable text */
.zg:has(.zk-ny)>section,.zg:has(.zk-ny)>header{max-width:780px;margin-left:auto;margin-right:auto}
.zg .zk-ny{max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:420px){.zk-ny{padding:8px 8px 0;border-radius:14px}.zk-ny-board{padding:12px 10px 16px}.zk-ny-big{font-size:46px}.zk-ny-q{font-size:30px}.zk-ny-en,.zk-ny-ny{font-size:30px}}
@media(prefers-reduced-motion:reduce){.zk-ny *{animation:none!important;transition:none!important}}
@media(max-width:420px){.zk-ny .zk-ny-play{font-size:24px;min-width:220px}.zk-ny-ribbon{left:12px}}
