@font-face{font-family:'Rubik';src:url('Rubik.woff2') format('woff2');font-weight:300 900;font-display:block}
:root{
  --bg:#F4F6FA; --card:#FFFFFF; --ink:#18212F; --ink2:#475467; --line:#E3E8EF;
  --pri:#155E75; --pri-600:#0E4A5E; --pri-50:#E6F3F6; --pri-100:#CCE7EE;
  --acc:#E8A13A; --acc-50:#FDF3E3; --ok:#18794E; --ok-50:#E7F5EE; --ok-200:#A9DCC2;
  --r-lg:24px; --r-md:16px; --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Rubik',sans-serif;background:var(--bg);color:var(--ink);font-size:20px;line-height:1.55;direction:rtl;-webkit-font-smoothing:antialiased}
.app{min-height:100vh;display:flex;flex-direction:column}
/* top bar */
.topbar{height:84px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 40px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;color:var(--ink)}
.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--pri);display:grid;place-items:center}
.brand small{display:block;font-weight:400;font-size:15px;color:var(--ink2);line-height:1.2}
.brand .t{line-height:1.25}
.top-prog{flex:1;display:flex;align-items:center;gap:16px;max-width:520px;margin-inline-start:auto}
.top-prog .lbl{font-size:17px;color:var(--ink2);white-space:nowrap}
.top-prog .lbl b{color:var(--ink);font-weight:600}
.bar{flex:1;height:12px;border-radius:99px;background:var(--pri-50);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--pri);border-radius:99px}
.tools{display:flex;gap:10px}
.tool{height:48px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;gap:8px;font:500 17px 'Rubik';color:var(--ink)}
.tool svg{width:22px;height:22px}
/* speak button */
.spk{flex:none;width:48px;height:48px;border-radius:50%;border:none;background:var(--pri-50);color:var(--pri);display:inline-grid;place-items:center;cursor:pointer}
.spk svg{width:24px;height:24px}
.spk.sm{width:40px;height:40px}.spk.sm svg{width:20px;height:20px}
.spk.on-dark{background:rgba(255,255,255,.18);color:#fff}
.spk.playing{background:var(--pri);color:#fff;box-shadow:0 0 0 6px var(--pri-100)}
/* buttons */
.btn{height:64px;padding:0 32px;border-radius:18px;border:none;font:600 22px 'Rubik';display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}
.btn-pri{background:var(--pri);color:#fff;box-shadow:0 6px 16px rgba(21,94,117,.28)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn svg{width:26px;height:26px}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--line)}
.chip-tag{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:99px;background:var(--pri-50);color:var(--pri-600);font-size:16px;font-weight:600}
.row{display:flex;align-items:center;gap:14px}

/* ===== app ===== */
.topbar{position:sticky;top:0;z-index:20}
.brand{cursor:pointer;text-decoration:none}
.brand-mark{background:#fff!important;border:1.5px solid var(--line);padding:3px}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.tool{cursor:pointer;text-decoration:none}
.tool[aria-pressed="true"]{background:var(--pri-50);border-color:var(--pri-100);color:var(--pri-600)}
button{font-family:inherit}
:focus-visible{outline:4px solid #F2B84B;outline-offset:3px;border-radius:12px}
#view{flex:1;display:flex;flex-direction:column}
body.big #view{zoom:1.15}
.main{flex:1;display:flex;justify-content:center;padding:28px 40px 32px}
.wrap{width:100%;max-width:1180px;display:flex;flex-direction:column;gap:22px}
.credit{text-align:center;font-size:16px;color:var(--ink2);padding:14px 16px 18px;border-top:1px solid var(--line);background:#fff}
.spk{transition:background .15s,box-shadow .15s}
.spk:hover{background:var(--pri-100)}
.btn{transition:transform .08s, box-shadow .15s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-pri:hover{background:var(--pri-600)}
.btn-ghost:hover{border-color:#C9D3DF}
.crumb{display:flex;align-items:center;gap:12px;color:var(--ink2);font-size:18px;flex-wrap:wrap}
.h1row{display:flex;align-items:flex-start;gap:16px}
.h1row h1{font-size:36px;font-weight:700;line-height:1.3}
.h1row .sub{display:block;font-size:21px;font-weight:400;color:var(--ink2);margin-top:2px}
.say{display:flex;align-items:flex-start;gap:14px}
.say>p,.say>div.tx{flex:1;padding-top:8px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.nav .sp{flex:1}
.svgi{width:26px;height:26px}
/* ===== home / map (A) ===== */
.home{display:grid;grid-template-columns:380px 1fr;gap:28px;align-items:start}
.intro{padding:28px;display:flex;flex-direction:column;gap:16px}
.intro h1{font-size:34px;line-height:1.25}
.intro p{font-size:21px;color:var(--ink2)}
.intro .btn{width:100%}
.parts{padding:18px;display:flex;flex-direction:column;gap:8px}
.parts h3{font-size:18px;color:var(--ink2);font-weight:600;padding:4px 8px}
.part{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 12px;border-radius:16px;border:1.5px solid transparent;background:none;text-align:start;cursor:pointer;color:var(--ink);text-decoration:none;font-size:20px}
.part:hover{background:var(--bg);border-color:var(--line)}
.part .n{width:38px;height:38px;border-radius:12px;background:#EEF2F6;display:grid;place-items:center;font-weight:700;font-size:18px;color:#3D4B5E;flex:none}
.part.done .n{background:var(--ok);color:#fff}
.part .n svg{width:22px;height:22px}
.part b{display:block;font-weight:600;font-size:20px;line-height:1.25}
.part small{display:block;font-size:16px;color:var(--ink2)}
.part .tx{flex:1}
.mapcard{padding:26px 26px 22px}
.mapcard .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.mapcard h2{font-size:26px}
.route{position:relative;display:grid;grid-template-columns:repeat(4,1fr);row-gap:20px;padding:40px 52px 6px}
.route>svg.path{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px 4px;border-radius:20px;text-decoration:none}
.node:hover .disc{transform:scale(1.04)}
.disc{width:118px;height:118px;border-radius:50%;background:#fff;border:4px solid #DCE3EC;overflow:hidden;display:grid;place-items:center;transition:transform .15s;position:relative}
.disc img{width:100%;height:100%;object-fit:cover}
.node .lb{font-size:21px;font-weight:600;line-height:1.2;text-align:center}
.node .st{font-size:15px;color:var(--ink2);text-align:center;line-height:1.2}
.node.done .disc{border-color:var(--pri)}
.node .ck{position:absolute;top:2px;inset-inline-start:calc(50% + 34px);width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;z-index:2;border:3px solid #fff}
.node .ck svg{width:18px;height:18px}
.node.cur .disc{border-color:var(--acc);box-shadow:0 0 0 7px var(--acc-50)}
.node.todo .disc img{opacity:.55;filter:saturate(.6)}
.node.todo .lb{color:#5B6676}
.here{position:absolute;top:-38px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none}
.here span{background:var(--acc);color:#2B1B03;font-size:15px;font-weight:700;padding:2px 10px;border-radius:99px;white-space:nowrap}
.here img{width:44px;height:44px;margin-top:-2px}
.node.cur .lb{color:#7A4B07}
.kid-note{margin-top:18px;display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:2px dashed #C9D3DF;border-radius:18px;background:#FAFBFC}
.kid-note img{width:64px;height:64px;border-radius:12px;flex:none;object-fit:cover}
.kid-note b{display:block;font-size:19px;color:var(--ink)}
.kid-note p{font-size:18px;color:var(--ink2);line-height:1.5}
.kid-note .tx{flex:1}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sw-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;font-size:17px;font-weight:600;border:1.5px solid}
.sw-bread{background:#FDF3E3;border-color:#F1D3A2;color:#6B4307}
.sw-cheese{background:#FFF8D6;border-color:#EADB8C;color:#5E4C00}
.sw-lettuce{background:#E9F6EA;border-color:#B5DDB8;color:#1F5A26}
/* ===== station card ===== */
.stn{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start}
.fig{overflow:hidden;position:sticky;top:178px}
.figimg{background:#fff;aspect-ratio:1/1}
.figimg img{width:100%;height:100%;object-fit:contain}
.figcap{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.figcap div{flex:1}.figcap b{display:block;font-size:22px}.figcap small{display:block;font-size:17px;color:var(--ink2)}
.content{padding:28px;display:flex;flex-direction:column;gap:18px}
.facts{display:flex;flex-direction:column;gap:12px}
.facts .say p{font-size:22px;line-height:1.55}
.facts .say:not(:last-child){padding-bottom:12px;border-bottom:1px solid #EEF1F5}
.warn{background:var(--acc-50);border-radius:14px;padding:6px 12px 6px 6px}
.swbox{border-radius:20px;background:var(--bg);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.swbox h3{font-size:20px;display:flex;align-items:center;gap:10px}
.swbox h3 img{width:36px;height:36px}
.swrow{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:8px 10px;border:1px solid var(--line)}
.swrow .sw-tag{flex:none;min-width:190px;justify-content:center}
.swrow p{flex:1;font-size:20px;line-height:1.4}
.helpers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.helper{border:2px solid var(--pri-100);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fff}
.helper .row{justify-content:space-between}
.helper b{font-size:20px;color:var(--pri-600)}
.helper p{font-size:18px;line-height:1.45}
.exits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.exit{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px}
.exit.a{background:var(--pri-50);border:2px solid var(--pri-100)}
.exit.b{background:#FAFBFC;border:2px dashed #C9D3DF}
.exit small{font-size:16px;color:var(--ink2);font-weight:600}
.exit b{font-size:22px;line-height:1.35}
/* ===== question (B) ===== */
.qwrap{max-width:1040px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:22px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.opt{display:flex;align-items:center;gap:16px;min-height:88px;padding:12px 18px 12px 14px;background:#fff;border:2px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(16,24,40,.04);cursor:pointer;text-align:start;color:var(--ink);transition:border-color .15s, background .15s}
.opt:hover{border-color:#B9C6D6}
.opt .badge{width:48px;height:48px;border-radius:14px;background:#EEF2F6;color:#3D4B5E;display:grid;place-items:center;font-weight:700;font-size:22px;flex:none}
.opt .otext{flex:1;font-size:24px;font-weight:500;line-height:1.35}
.opt.ok{border-color:var(--ok);background:var(--ok-50);box-shadow:0 0 0 4px rgba(24,121,78,.12)}
.opt.ok .badge{background:var(--ok);color:#fff}
.opt.ok .otext{font-weight:700;color:#0F5132}
.opt.no{border-color:#E4B4A8;background:#FDF4F1}
.opt.no .badge{background:#F3D9D1;color:#8A2E12}
.opt.no .otext{color:#6E3B2E}
.opt.picked{border-color:var(--pri);background:var(--pri-50);box-shadow:0 0 0 4px rgba(21,94,117,.12)}
.opt.picked .badge{background:var(--pri);color:#fff}
.opt[aria-disabled="true"]{cursor:default}
.opt .badge svg{width:28px;height:28px}
.fb{display:flex;gap:18px;padding:22px 24px;border-radius:22px;background:#fff;border:2px solid var(--ok-200);animation:pop .25s ease}
.fb.no{border-color:#EBC8BE}
.fb.info{border-color:var(--pri-100)}
.fb .ic{width:56px;height:56px;border-radius:50%;background:var(--ok-50);color:var(--ok);display:grid;place-items:center;flex:none}
.fb.no .ic{background:#FDF0EC;color:#9A3412}
.fb.info .ic{background:var(--pri-50);color:var(--pri)}
.fb .ic svg{width:30px;height:30px}
.fb .body{flex:1;display:flex;flex-direction:column;gap:6px}
.fb h2{font-size:26px;color:var(--ok);line-height:1.3}
.fb.no h2{color:#9A3412}
.fb.info h2{color:var(--pri-600)}
.fb p{font-size:21px;line-height:1.55}
.fb .say{align-items:center}
.fb .say p{padding-top:0}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.src{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:#EEF2F6;color:#3D4B5E;font-size:16px;font-weight:600}
.src.extra{background:var(--acc-50);color:#6B4307}
.dots{display:flex;gap:8px}.dots i{width:10px;height:10px;border-radius:50%;background:#D0D8E2}.dots i.on{background:var(--pri);width:28px;border-radius:99px}.dots i.ok{background:var(--ok)}
/* ===== drag (C) ===== */
.dragscr{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}
.slotcard{display:none}
.panel{display:flex;flex-direction:column;gap:20px}
.task{padding:24px}
.task .k{font-size:17px;color:var(--ink2)}
.task h1{font-size:30px;line-height:1.25;margin-top:4px}
.task p{font-size:19px;color:var(--ink2);margin-top:8px}
.bank{padding:20px}
.bank h3{font-size:19px;font-weight:600;color:var(--ink2);margin-bottom:12px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chip{height:62px;border-radius:16px;background:#fff;border:2px solid #C9D3DF;display:flex;align-items:center;gap:6px;padding:0 8px 0 6px;font-size:22px;font-weight:600;box-shadow:0 2px 0 #DCE3EC;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--ink)}
.chip .grip{width:20px;height:20px;color:#98A6B8;flex:none}
.chip .ct{flex:1;white-space:nowrap;text-align:start}
.chip .spk.sm{width:40px;height:40px}
.chip.sel{border-color:var(--pri);background:var(--pri-50);box-shadow:0 0 0 4px rgba(21,94,117,.15)}
.chip.done{background:var(--ok-50);border-color:var(--ok-200);box-shadow:none;color:#0F5132;cursor:default;justify-content:center}
.chip.lifted{opacity:.35}
.status{display:flex;align-items:center;justify-content:space-between;gap:12px}
.status .count{font-size:19px;color:var(--ink2)}.status .count b{color:var(--ink)}
.bodycard{position:relative;padding:12px;display:flex;justify-content:center;overflow:hidden}
.stagebox{position:relative}
.stage{position:absolute;top:0;right:0;width:820px;height:700px;transform-origin:top right}
.stage>img.torso{position:absolute;left:221px;top:0;height:700px;width:auto;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);user-select:none;-webkit-user-drag:none;pointer-events:none}
.stage>svg.leaders{position:absolute;inset:0;z-index:1;pointer-events:none}
.slot{position:absolute;width:180px;height:62px;border-radius:16px;border:2px dashed #AEBBCB;background:#F7F9FB;display:flex;align-items:center;justify-content:center;gap:10px;z-index:2;cursor:pointer;color:var(--ink);font:inherit}
.slot-n{width:34px;height:34px;border-radius:50%;background:#E6EBF1;color:#475467;display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.armed .slot:not(.placed){border-color:var(--pri);background:var(--pri-50)}
.slot.hover{border:3px dashed var(--pri);background:var(--pri-50);box-shadow:0 0 0 6px rgba(21,94,117,.10)}
.slot.placed{border:2px solid var(--ok);background:var(--ok-50);justify-content:flex-start;padding:0 10px;gap:8px;cursor:default}
.slot.flash{animation:hint 1s ease 2}
@keyframes hint{50%{box-shadow:0 0 0 10px rgba(232,161,58,.45);border-color:var(--acc)}}
.slot.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pc-check{width:32px;height:32px;border-radius:10px;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none}.pc-check svg{width:20px;height:20px}
.pc-t{flex:1;font-size:21px;font-weight:700;color:#0F5132;white-space:nowrap}
.slot .spk.sm{width:36px;height:36px;background:#fff}
.mk{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;border:3px solid #8FA0B5;color:#3D4B5E;font-weight:700;font-size:17px;display:grid;place-items:center;z-index:3}
.mk.ok{border-color:var(--ok);background:var(--ok);color:#fff}
.stage .mk{display:none}
.stage.compact .mk,.stage.markers .mk{display:grid}
.stage.compact>svg.leaders{display:none}
.stage.compact .slot{display:none}
.stage.compact>img.torso{left:0}
.slotlist{display:none}
.slotlist.show{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;width:100%}
.slotlist .slot{position:static;width:auto}
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ok-200);border-radius:16px;padding:10px 14px;font-size:20px;box-shadow:0 12px 30px rgba(16,24,40,.18);z-index:60;animation:pop .2s ease;max-width:92vw}
.toast.no{border-color:#EBC8BE}
.ghost{position:fixed;z-index:80;pointer-events:none;height:62px;padding:0 14px;border-radius:16px;background:#fff;border:2px solid var(--pri);display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;box-shadow:0 18px 30px rgba(16,24,40,.22);transform:translate(-50%,-50%) rotate(-3deg)}
.donebox{padding:20px 22px;border-radius:20px;background:var(--ok-50);border:2px solid var(--ok-200);display:flex;align-items:center;gap:14px}
.donebox p{flex:1;font-size:22px;font-weight:600;color:#0F5132}
/* ===== match ===== */
.matchscr{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.mcard{padding:28px;display:flex;flex-direction:column;gap:18px}
.ename{display:flex;align-items:center;gap:14px}
.ename .big{font-size:40px;font-weight:700;color:var(--pri-600)}
.qsmall{font-size:24px;font-weight:600}
.opts.three{grid-template-columns:1fr 1fr 1fr}
.opts.compact .opt{min-height:72px}
.opts.compact .otext{font-size:22px}
.mtable{padding:20px}
.mtable h3{font-size:20px;margin-bottom:10px}
.mtable table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:18px}
.mtable th{text-align:start;color:var(--ink2);font-weight:600;font-size:16px;padding:0 8px}
.mtable td{background:var(--bg);padding:10px 8px;line-height:1.35}
.mtable td:first-child{border-radius:0 12px 12px 0;font-weight:700}
.mtable td:last-child{border-radius:12px 0 0 12px}
.mtable td.q{color:#98A6B8}
.mtable tr.cur td{background:var(--acc-50)}
/* ===== glossary ===== */
.gsearch{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:0 16px;height:64px}
.gsearch input{flex:1;border:none;outline:none;font:400 22px 'Rubik';background:none;color:var(--ink)}
.gsearch:focus-within{border-color:var(--pri)}
.glist{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gitem{padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.gitem .tx{flex:1}
.gitem b{display:block;font-size:24px;color:var(--pri-600)}
.gitem p{font-size:19px;line-height:1.5;margin-top:2px}
/* ===== bagrut ===== */
.bq{display:grid;grid-template-columns:380px 1fr;gap:28px;align-items:start}
.bfig{padding:14px;position:sticky;top:178px}
.bfig .stagebox{margin:0 auto}
.bfig small{display:block;font-size:16px;color:var(--ink2);text-align:center;margin-top:8px}
.bpart{padding:22px;display:flex;flex-direction:column;gap:12px}
.bpart .ltr{width:40px;height:40px;border-radius:12px;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.bpart .say p{font-size:21px}
.bpart textarea{width:100%;min-height:96px;border:2px solid var(--line);border-radius:16px;padding:12px 14px;font:400 21px/1.5 'Rubik';resize:vertical;color:var(--ink);background:#FCFDFE}
.bpart textarea:focus{border-color:var(--pri);outline:none}
.bpart .pts{font-size:16px;color:var(--ink2)}
.model{border-radius:16px;background:var(--ok-50);border:2px solid var(--ok-200);padding:14px 16px;display:flex;flex-direction:column;gap:6px;animation:pop .25s ease}
.model b{color:var(--ok);font-size:19px}
.model p{font-size:21px;line-height:1.5}
.model small{font-size:17px;color:#28543F}
.linkbtn{background:none;border:none;color:var(--pri);font:500 18px 'Rubik';text-decoration:underline;cursor:pointer;padding:6px}
/* ===== print ===== */
.sheet{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 28px;max-width:1000px;margin:0 auto;width:100%}
.sheet h1{font-size:30px;color:var(--pri-600)}
.sheet .lead{font-size:18px;color:var(--ink2);margin-top:2px}
.sheet h2{font-size:20px;margin:16px 0 8px;color:var(--ink)}
.smap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sst{border:1.5px solid var(--line);border-radius:14px;padding:8px 10px;display:flex;gap:10px;align-items:flex-start}
.sst img{width:54px;height:54px;border-radius:50%;border:2px solid var(--pri-100);object-fit:cover;flex:none}
.sst b{display:block;font-size:17px}
.sst span{display:block;font-size:14.5px;line-height:1.35;color:#2C3644}
.sst .n{font-size:13px;color:var(--ink2);font-weight:600}
.stable{width:100%;border-collapse:collapse;font-size:15.5px}
.stable th,.stable td{border:1px solid #D6DDE6;padding:6px 10px;text-align:start}
.stable th{background:var(--pri-50);color:var(--pri-600)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sbox{border-radius:12px;padding:10px 12px;font-size:15.5px;line-height:1.45}
.sbox.a{background:var(--pri-50)}
.sbox.b{border:2px dashed #C9D3DF}
.sbox b{display:block;font-size:16px}
.sheet .foot{margin-top:14px;text-align:center;font-size:14px;color:var(--ink2)}
.printbar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media print{
 @page{size:A4;margin:10mm}
 body{background:#fff;font-size:12pt}
 .topbar,.credit,.printbar,.toast,.noprint{display:none!important}
 .main{padding:0}
 .sheet{border:none;padding:0;max-width:none;border-radius:0}
 .sheet h1{font-size:20pt}.sheet .lead{font-size:11pt}.sheet h2{font-size:13pt;margin:9pt 0 5pt}
 .sst{padding:5px 7px;break-inside:avoid}.sst img{width:40px;height:40px}.sst b{font-size:11.5pt}.sst span{font-size:9.5pt}
 .stable{font-size:10pt}.stable th,.stable td{padding:3px 7px}
 .sbox{font-size:10pt}.sbox b{font-size:10.5pt}
 .sheet .foot{font-size:9.5pt}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 body.big #view{zoom:1}
}
/* ===== responsive ===== */
@media (max-width:1100px){
 .home{grid-template-columns:1fr}
 .stn{grid-template-columns:300px 1fr}
 .dragscr{grid-template-columns:340px 1fr}
 .matchscr{grid-template-columns:1fr}
 .bq{grid-template-columns:320px 1fr}
}
@media (max-width:700px){
 body{font-size:19px}
 .topbar{height:64px;padding:0 12px;gap:10px}
 .brand small,.top-prog,.tool span{display:none}
 .brand{font-size:18px}.brand-mark{width:40px;height:40px;border-radius:12px}
 .tools{margin-inline-start:auto;gap:6px}.tool{height:46px;padding:0 11px}
 .mprog{display:flex!important}
 .main{padding:14px 14px 22px}
 .wrap{gap:14px}
 .h1row h1{font-size:27px}.h1row .sub{font-size:18px}
 .intro{padding:20px}.intro h1{font-size:27px}.intro p{font-size:19px}
 .mapcard{padding:16px 12px}
 .mapcard h2{font-size:21px}
 .route{grid-template-columns:repeat(2,1fr);padding-top:36px;row-gap:26px}
 .route>svg.path{display:none}
 .disc{width:104px;height:104px}
 .node .ck{inset-inline-start:calc(50% + 28px)}
 .stn,.bq{grid-template-columns:1fr}
 .fig,.bfig{position:static}
 .fig{display:flex;align-items:center}
 .fig .figimg{width:96px;flex:none}
 .fig .figcap{border-top:none;flex:1}
 .content{padding:18px;gap:14px}
 .facts .say p{font-size:20px}
 .swrow{flex-wrap:wrap}.swrow .sw-tag{min-width:0}
 .swrow p{flex-basis:100%;order:3;font-size:19px}
 .helpers,.exits{grid-template-columns:1fr}
 .opts,.opts.three{grid-template-columns:1fr;gap:10px}
 .opt{min-height:62px;padding:8px 10px 8px 8px;border-radius:16px;gap:12px}
 .opt .badge{width:40px;height:40px;font-size:20px}
 .opt .otext{font-size:21px}
 .fb{padding:14px;gap:10px;border-radius:18px}
 .fb .ic{display:none}
 .fb h2{font-size:22px}.fb p{font-size:19px}
 .nav{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 22%);padding:14px 0 6px;z-index:5}
 .nav .btn{height:58px;font-size:20px;padding:0 18px}
 .nav .btn-pri{flex:1}
 .nav .sp,.nav .dots{display:none}
 .dragscr{grid-template-columns:1fr}
 .task{padding:18px}.task h1{font-size:24px}.task p{font-size:18px}
 .bank{padding:14px}
 .chip{font-size:20px;height:58px}
 .ename .big{font-size:32px}
 .mcard{padding:18px}
 .glist{grid-template-columns:1fr}
 .gitem b{font-size:22px}
 .smap{grid-template-columns:1fr 1fr}
 .sgrid{grid-template-columns:1fr}
 .sheet{padding:16px}
 .toast{bottom:20px;font-size:18px}
 .credit{font-size:15px}
}
.mprog{display:none;align-items:center;gap:10px;font-size:16px;color:var(--ink2)}
.mprog .bar{height:10px;min-width:80px}

@media (max-width:700px){
 .tools .tool.hide-m{display:none}
 .brand .t{white-space:nowrap}
 .home{display:flex;flex-direction:column;align-items:stretch}
 .home>aside{display:contents!important}
 .home .intro{order:1}.home .mapcard{order:2}.home .parts{order:3}
 .dragscr{display:flex;flex-direction:column;align-items:stretch}
 .dragscr .panel{display:contents}
 .dragscr .task{order:1}.dragscr .bodycard{order:2}.dragscr .bank{order:3}.dragscr .slotcard{order:4;display:block;padding:14px}.dragscr .status{order:5}.dragscr #ddone{order:6}
 .slotcard h3{font-size:19px;font-weight:600;color:var(--ink2);margin-bottom:10px}
 .slotlist.show{margin-top:0}
 .route{padding:36px 0 6px}
}

.stage.compact .mk{width:56px;height:56px;margin:-28px 0 0 -28px;font-size:28px;border-width:4px}
.stage.markers .mk{width:48px;height:48px;margin:-24px 0 0 -24px;font-size:24px}

.nav .btn{white-space:nowrap}
@media (max-width:700px){.nav .btn-ghost{padding:0 14px;flex:none}.nav .btn{font-size:19px;gap:8px}.nav .btn svg{width:22px;height:22px}.kid-note img{width:44px;height:44px}.kid-note{padding:12px}}

.opts.three .opt{gap:10px;padding:10px 12px 10px 10px}.opts.three .otext{white-space:nowrap;font-size:21px}

@media (max-width:700px){.nav .btn-ghost .bl{display:none}.nav .btn-ghost{width:58px;padding:0}.nav .btn-pri{min-width:0}}

/* ---------- read-aloud bar (one per screen) ---------- */
.rabar{position:sticky;top:84px;z-index:18;background:rgba(244,246,250,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 40px 8px;border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.rabar.stuck,.rabar.active{border-bottom-color:var(--line)}
.rabar-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;position:relative}
.ra-row{display:flex;align-items:center;gap:10px;width:100%}
.ra-play{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px 0 28px;border:none;border-radius:999px;background:#1B2A4A;color:#fff;font:600 20px 'Rubik',sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(27,42,74,.25);min-width:142px;justify-content:center}
.ra-play:hover{background:#24375F}.ra-play:focus-visible,.ra-stop:focus-visible,.ra-optbtn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.ra-ic{font-size:16px;line-height:1;letter-spacing:-2px;display:inline-block}
.ra-stop{width:50px;height:50px;border-radius:12px;border:2px solid #C9D3DF;background:#fff;display:grid;place-items:center;cursor:pointer}
.ra-stop span{width:16px;height:16px;border-radius:3px;background:#1B2A4A;display:block}
.ra-prog{flex:1;max-width:260px;display:flex;align-items:center}
.ra-track{height:6px;width:100%;border-radius:6px;background:#DCE3EC;overflow:hidden}
.ra-track i{display:block;height:100%;width:0;background:#1B2A4A;border-radius:6px;transition:width .25s linear;margin-inline-start:0}
.ra-sub{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.ra-hint{color:var(--ink2);font-size:14px;line-height:1.3}
.ra-optbtn{background:none;border:none;color:var(--pri);font:400 16px 'Rubik',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 2px}
.ra-panel{position:absolute;top:100%;inset-inline-start:0;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:14px;z-index:5;min-width:290px}
.ra-panel[hidden]{display:none}
.ra-grp{display:flex;flex-direction:column;gap:8px;font-size:17px}
.ra-k{color:var(--ink2);font-size:15px}
.ra-speeds{display:flex;gap:6px}
.ra-speeds button{flex:1;height:40px;padding:0 10px;border-radius:10px;border:2px solid var(--line);background:#fff;font:500 16px 'Rubik',sans-serif;color:var(--ink);cursor:pointer;direction:ltr}
.ra-speeds button[aria-pressed="true"]{background:#1B2A4A;border-color:#1B2A4A;color:#fff}
.ra-tog{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.ra-tog input{position:absolute;opacity:0;width:1px;height:1px}
.ra-sw{width:46px;height:26px;border-radius:13px;background:#C9D3DF;position:relative;flex:none;transition:background .2s}
.ra-sw::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:right .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ra-tog input:checked+.ra-sw{background:#1B2A4A}.ra-tog input:checked+.ra-sw::after{right:23px}
.ra-tog input:focus-visible+.ra-sw{outline:3px solid var(--acc);outline-offset:2px}
#main .ra-tap{cursor:pointer;-webkit-tap-highlight-color:rgba(255,228,92,.35)}
@media (hover:hover){#main .ra-tap:hover{box-shadow:inset 0 0 0 999px rgba(255,228,92,.13);border-radius:10px}}
.ra-now,#main .ra-tap.ra-now{box-shadow:0 0 0 3px #FFE58A;border-radius:12px;transition:box-shadow .25s}
::highlight(ra){background-color:#FFE45C;color:#18212F}
.ra-txt{background:#FFE45C;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px}
body.tapread #main .say,body.tapread #main .helper,body.tapread #main .swrow,body.tapread #main .gitem,body.tapread #main .kid-note,body.tapread #main .h1row,body.tapread #main .figcap,body.tapread #main .fb,body.tapread #main .task,body.tapread #main .model{cursor:pointer}
/* illustration zoom */
.zoombtn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 24px);margin:10px auto 0;height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--pri);font:500 17px 'Rubik',sans-serif;cursor:pointer}
.zoombtn svg{width:20px;height:20px}
.fig .zoombtn{margin:10px 12px 0}
.zlb{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.82);display:grid;place-items:center;padding:16px}
.zlb-box{position:relative;background:#fff;border-radius:20px;padding:14px;width:min(1000px,96vw);max-height:94vh;overflow:auto}
.zlb-art img{display:block;width:100%;max-height:86vh;object-fit:contain}
.zlb-x{position:absolute;top:10px;left:10px;width:44px;height:44px;border-radius:50%;border:none;background:#1B2A4A;color:#fff;font-size:20px;cursor:pointer;z-index:2}
@media (max-width:700px){
 .rabar{top:64px;padding:8px 14px 4px}
 .ra-play{height:46px;font-size:19px;min-width:128px;padding:0 20px}
 .ra-stop{width:46px;height:46px}
 .ra-optbtn{font-size:15px}
 .ra-hint{font-size:13px}
 .fig{flex-wrap:wrap}
 .fig .zoombtn{order:3;width:calc(100% - 24px);margin:0 12px 12px;height:40px}
}
@media print{.rabar,.zoombtn,.zlb{display:none!important}}

/* ---------- v4: select-then-check, stars, finish ---------- */
.opt.sel{border-color:var(--pri);background:var(--pri-50);box-shadow:0 0 0 4px rgba(21,94,117,.18)}
.opt.sel .badge{background:var(--pri);color:#fff}
.chkrow{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.chkbtn{min-width:240px}
.chkbtn[disabled]{background:#7B8A9C;box-shadow:none;opacity:1;color:#fff;cursor:not-allowed}
.chkbtn[hidden]{display:none}
.chkhint{font-size:17px;color:var(--ink2)}
.opt.cheer{animation:cheer .5s ease}
@keyframes cheer{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.gotstars{margin-top:8px;font-size:20px;color:#7A4B07}
.gotstars b{color:#7A4B07}
.gotstars.was{font-size:17px;color:var(--ink2)}
.starbox{display:flex;align-items:center;gap:6px;height:46px;padding:0 14px;border-radius:14px;background:var(--acc-50);border:1.5px solid #F2D29F;color:#5C3A06;font-size:18px;white-space:nowrap}
.starbox svg{width:24px;height:24px;color:var(--acc);flex:none}
.starbox b{font-size:21px;font-weight:700;color:#5C3A06}
.starbox.pop{animation:spop .5s ease}
@keyframes spop{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
.flystar{position:fixed;z-index:80;width:32px;height:32px;color:var(--acc);pointer-events:none;transition:transform .8s cubic-bezier(.5,-.2,.6,1),opacity .8s ease;filter:drop-shadow(0 2px 3px rgba(122,75,7,.35))}
.flystar svg{width:100%;height:100%}
.srow{display:inline-flex;gap:2px;justify-content:center}
.srow i{width:18px;height:18px;color:#D5DCE5;display:block}
.srow i.on{color:var(--acc)}
.srow svg{width:100%;height:100%;display:block}
.node .srow{margin-top:-2px}
.starsum{width:100%;max-width:560px;margin:8px auto 0;padding:18px 20px;border-radius:20px;background:var(--acc-50);border:1.5px solid #F2D29F;display:flex;flex-direction:column;gap:12px;align-items:center}
.starsum .big{display:flex;align-items:center;gap:10px;font-size:26px;color:#5C3A06;font-weight:500}
.starsum .big svg{width:40px;height:40px;color:var(--acc);flex:none}
.starsum .big b{font-size:32px}
.starsum small{font-size:16px;color:#5C4A2E}
.stlist{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.sti{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:18px;color:var(--ink);padding:6px 10px;background:#fff;border-radius:12px}
.sti b{color:#5C3A06;white-space:nowrap;direction:ltr}
.homefin{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;color:var(--ink);border:1.5px solid #F2D29F;background:var(--acc-50)}
.homefin .hf-ic{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--acc);flex:none}
.homefin .hf-ic svg{width:28px;height:28px}
.homefin .tx{flex:1;display:flex;flex-direction:column;gap:2px}
.homefin b{font-size:19px}.homefin small{font-size:16px;color:#5C4A2E}
.homefin>svg{width:24px;height:24px;flex:none}
.fin{display:flex;flex-direction:column;gap:20px}
.vids{gap:14px}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
.vid{display:flex;flex-direction:column;gap:10px}
.vbox{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0E4A5E}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;color:#fff;font-family:'Rubik';background:linear-gradient(135deg,#155E75,#0E4A5E 60%,#0B3B4B)}
.vplay .pl{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);color:#155E75;display:grid;place-items:center}
.vplay .pl svg{width:34px;height:34px;margin-inline-start:-4px}
.vplay .vt{font-size:20px;font-weight:600;text-align:center;line-height:1.3}
.vplay small{font-size:15px;color:#E6F3F6}
.vplay:hover .pl{transform:scale(1.06)}
.vexp p{font-size:19px;color:var(--ink)}
.vsh{font-size:18px;margin-top:2px}
.vsum{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.vsum li{position:relative;padding-inline-start:18px}
.vsum li::before{content:"";position:absolute;inset-inline-start:2px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.vsum li p{font-size:18px;line-height:1.45;color:var(--ink)}
.more{align-items:center;text-align:center;gap:14px}
.cetbtn{min-width:280px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn.wide{flex:none;width:auto;padding:0 22px}
@media (max-width:700px){
 .starbox{height:40px;padding:0 9px;font-size:15px;gap:4px}
 .starbox .sl{display:none}
 .starbox b{font-size:18px}
 .starbox svg{width:20px;height:20px}
 .chkrow{margin-top:12px}
 .chkbtn{min-width:0;width:100%}
 .chkhint{font-size:15px;text-align:center}
 .stlist{grid-template-columns:1fr}
 .vgrid{grid-template-columns:1fr}
 .starsum .big{font-size:21px}.starsum .big b{font-size:26px}
 .nav .btn.wide{flex:1;padding:0 14px}
 .srow i{width:15px;height:15px}
}
@media (prefers-reduced-motion: reduce){ .opt.cheer,.starbox.pop{animation:none} }
@media print{ .starbox{display:none!important} }

@media (max-width:700px){
 .topbar{gap:8px}
 .mprog{gap:6px}
 .mprog .bar{min-width:40px}
 .starbox{padding:0 7px}
}
@media (max-width:430px){
 .brand .t{display:none}
}