:root{--sand:#fbf5ea;--card:#fff;--ink:#2b2118;--muted:#6b5b4b;--terra:#b5532a;--terra2:#d9774a;--green:#2f6b4f;--gold:#e0a526;--sky:#2c5d8a;--line:#e8dccb;--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Heebo","Assistant",Arial,sans-serif;background:var(--sand);color:var(--ink);font-size:18px;line-height:1.6}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:8px;z-index:99}.skip:focus{right:8px}
a{color:var(--sky)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 12px;background:linear-gradient(90deg,#7a3416,var(--terra));color:#fff;box-shadow:0 2px 8px #0003}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0}
.brand img{width:52px;height:52px;border-radius:50%;background:#fff;flex:none}
.ttl{font-weight:800;font-size:1.02rem;line-height:1.25}.ttl small{display:block;font-weight:400;font-size:.85rem;opacity:.92}
.menu-btn{flex:none;font:inherit;font-weight:700;background:#fff2;color:#fff;border:2px solid #fff8;border-radius:14px;padding:10px 14px;min-height:48px;cursor:pointer}
.side{display:none;background:#fff;border-bottom:3px solid var(--line);padding:8px}
.side.open{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.side a{display:block;padding:12px;border-radius:12px;background:var(--sand);text-decoration:none;color:var(--ink);font-weight:700;min-height:48px}
.side a.on{background:var(--terra);color:#fff}
@media(min-width:1000px){.menu-btn{display:none}.side{display:flex!important;flex-wrap:wrap;gap:6px;justify-content:center}.side a{padding:8px 12px;font-size:.95rem;min-height:auto}}
.levelbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px;background:#f3e6d2}
.levelbar button{font:inherit;font-weight:700;border:2px solid var(--terra);background:#fff;color:var(--terra);border-radius:999px;padding:8px 14px;min-height:48px;cursor:pointer}
.levelbar button.on{background:var(--terra);color:#fff}
.levelbar .nik{border-color:var(--green);color:var(--green)}.levelbar .nik.on{background:var(--green);color:#fff}
main{max-width:1080px;margin:0 auto;padding:14px 12px 30px;outline:none}
h1{font-size:1.6rem;line-height:1.3;margin:.3em 0}h2{font-size:1.3rem;margin:1em 0 .4em;color:#7a3416}h3{font-size:1.1rem;margin:.6em 0 .3em}
.hero{background:linear-gradient(160deg,#fff7e8,#f6dfc0);border-radius:24px;padding:18px;border:2px solid var(--line);text-align:center}
.hero .big{font-size:3rem;line-height:1}
.lead{font-size:1.05rem;color:var(--muted)}
.vbtn{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto;max-width:520px;background:#c4302b;color:#fff!important;text-decoration:none;font-weight:800;font-size:1.25rem;padding:16px 20px;border-radius:20px;min-height:64px;box-shadow:0 4px 0 #8a1f1b}
.vbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #8a1f1b}
.vnote{font-size:.9rem;color:var(--muted);text-align:center;margin-top:-6px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid.g3{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:0 2px 0 #0000000d}
a.card{display:block;text-decoration:none;color:var(--ink);min-height:96px}
a.card:hover{border-color:var(--terra2)}
a.card .e{font-size:2rem}a.card b{display:block;font-size:1.1rem}a.card span{color:var(--muted);font-size:.95rem}
.card.teacher{background:#eef6f1;border-color:#b9d8c6}
.quote{background:#fff6e6;border-right:6px solid var(--gold);padding:10px 14px;border-radius:10px;font-weight:700;white-space:pre-line;margin:6px 0}
.quote::after{content:"  (מתוך השיר בסרטון)";font-weight:400;font-size:.8rem;color:var(--muted)}
.btn{font:inherit;font-weight:700;border:0;background:var(--terra);color:#fff;border-radius:14px;padding:12px 18px;min-height:52px;cursor:pointer;margin:4px 0}
.btn.alt{background:#fff;color:var(--terra);border:2px solid var(--terra)}
.btn.g{background:var(--green)}
.btn:disabled{opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{font:inherit;border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;min-height:48px;cursor:pointer;font-weight:600}
.chip.on{background:var(--gold);border-color:#b8841b;color:#2b2118}
.chip.ok{background:#d6f0dd;border-color:#4c9a66}.chip.no{background:#f7dede;border-color:#c46}
.chip.dim{opacity:.55}
textarea,input[type=text],select{font:inherit;width:100%;border:2px solid var(--line);border-radius:12px;padding:10px;background:#fff;min-height:48px}
textarea{min-height:110px;resize:vertical}
.ans{display:none;background:#eef6f1;border-radius:10px;padding:10px;margin-top:8px}
.ans.show{display:block}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sortrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;border-bottom:1px dashed var(--line);padding:6px 0}
.sortrow .it{font-weight:700;flex:1 1 180px}
.fb{font-weight:700;margin-top:6px;min-height:1.6em}
.fb.good{color:var(--green)}.fb.try{color:#9a5a00}
.match{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.match button{font:inherit;font-weight:700;padding:12px;border-radius:12px;border:2px solid var(--line);background:#fff;min-height:56px;cursor:pointer}
.match button.sel{border-color:var(--gold);background:#fff4d6}.match button.done{background:#d6f0dd;border-color:#4c9a66}
.map{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative;margin:10px 0}
.map::before{content:"";position:absolute;top:36px;right:12%;left:12%;border-top:4px dashed #c9a77d;z-index:0}
.st{position:relative;z-index:1;font:inherit;background:none;border:0;cursor:pointer;text-align:center;padding:0}
.st .dot{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto;border-radius:50%;background:#fff;border:4px solid #c9a77d;font-size:2rem}
.st.on .dot{border-color:var(--terra);background:#ffe9d9;transform:scale(1.06)}
.st.done .dot{border-color:var(--green)}
.st small{display:block;font-weight:700;font-size:.85rem;margin-top:4px}
.badge{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:4px 12px;font-weight:700;font-size:.9rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px}
.candle{background:linear-gradient(#2a1d14,#3b2a1c);color:#ffe9b8;border-radius:14px;padding:10px;text-align:center;min-height:120px}
.flame{font-size:2rem;display:inline-block;animation:fl 1.6s ease-in-out infinite alternate}
@keyframes fl{from{transform:scale(1) rotate(-2deg)}to{transform:scale(1.1) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.flame{animation:none}}
.candle p{margin:6px 0 0;font-weight:700;word-break:break-word}
table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
th,td{border:1px solid var(--line);padding:8px;vertical-align:top;text-align:right}
th{background:#f3e6d2}
.tw{overflow-x:auto}
.lines{border-bottom:1px solid #cbb; height:34px}
.muted{color:var(--muted)}
.big-emo{font-size:2.2rem}
.preview{background:linear-gradient(160deg,#fffaf0,#f3e0c4);border:3px double var(--gold);border-radius:18px;padding:18px;text-align:center;white-space:pre-line;font-weight:700;font-size:1.15rem;min-height:120px}
.letter{font-family:"Assistant","Heebo",sans-serif;background:#fffdf7;border:2px solid #e9dcc2;border-radius:14px;padding:12px;background-image:repeating-linear-gradient(#fffdf7 0 33px,#eadfc8 33px 34px)}
.check label{display:flex;gap:8px;align-items:center;min-height:44px}
.check input{width:24px;height:24px}
.pbox{border:2px dashed var(--terra2);border-radius:14px;padding:12px;background:#fffaf4}
.navnext{display:flex;justify-content:space-between;gap:8px;margin-top:18px;flex-wrap:wrap}
.navnext a{flex:1 1 200px;text-align:center;text-decoration:none;background:#fff;border:2px solid var(--terra);color:var(--terra);font-weight:800;padding:12px;border-radius:14px;min-height:52px}
footer{text-align:center;padding:20px;background:#f3e6d2;border-top:3px solid var(--line)}
footer img{border-radius:50%;background:#fff}
.nk{font-size:1.12em;line-height:1.9}
@media print{@page{margin:15mm}.top,.side,.levelbar,.menu-btn,.navnext,.btn,.vbtn,.skip{display:none!important}body{background:#fff;font-size:12pt}.card{break-inside:avoid;box-shadow:none}.ans{display:block}main{max-width:none;padding:0}footer{background:none}}

@media(max-width:520px){.ttl{font-size:.9rem}.ttl small{font-size:.75rem}.brand img{width:44px;height:44px}.st .dot{width:58px;height:58px;font-size:1.6rem}.map::before{top:29px}.st small{font-size:.78rem}}
.match>div{display:flex;flex-direction:column;gap:8px}