/* ==========================================================================
   Макс і код маяка — стилі
   ========================================================================== */
:root{
  --night:#141a3c;
  --night-2:#1d2555;
  --night-3:#28316b;
  --beam:#ffd447;
  --lamp:#ffb03a;
  --paper:#fbf4e2;
  --paper-edge:#e9dcbb;
  --ink:#2b2748;
  --ink-soft:#5b567e;
  --sunflower:#f5a623;
  --sea:#3fb3a5;
  --sea-deep:#2a8b80;
  --crimson:#e2574c;
  --cerb:#b98cff;
  --tsugi:#e9b949;
  --star:#c9d2ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Nunito",system-ui,sans-serif;
  color:#eef1ff;
  background:var(--night);
  line-height:1.65;
  font-size:18px;
  overflow-x:hidden;
}
img{max-width:100%}
.wrap{max-width:840px;margin:0 auto;padding:0 20px}
a{color:var(--beam)}

/* ---------- typography ---------- */
h1,h2,h3,h4,.display{font-family:"Fredoka",sans-serif;font-weight:600;line-height:1.14;letter-spacing:.2px}
h1{font-size:clamp(2.2rem,8vw,3.4rem);color:var(--beam);margin:.1em 0}
h2{font-size:clamp(1.7rem,5vw,2.4rem);color:var(--beam);margin:0 0 .15em}
h3{font-size:1.3rem;margin:1.4em 0 .35em;color:#fff}
.chapter-num{
  font-family:"Fredoka",sans-serif;font-size:.95rem;letter-spacing:1.5px;
  color:var(--sunflower);display:block;margin-bottom:.3em;
}

/* ---------- поки не вибрано мову ----------
   Книга двомовна, і слова підставляються скриптом. Щоб читач не побачив
   спалах чужої мови, сторінка ховається на ті кілька мілісекунд, поки
   js/i18n.js не проставить свої підписи. */
html.i18n-boot body{visibility:hidden}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(15,19,48,.82);
  backdrop-filter:blur(8px);border-bottom:1px solid #2b3576;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.topbar .brand{font-family:"Fredoka";color:var(--beam);font-size:1.05rem;text-decoration:none}
.topbar nav a{color:#cdd4ff;text-decoration:none;margin-left:16px;font-size:.95rem}
.topbar nav a:hover{color:#fff}

/* ---------- перемикач мови ---------- */
.langpick{
  display:inline-flex;align-items:center;margin-left:16px;
  border:1px solid #46529c;border-radius:999px;overflow:hidden;vertical-align:middle;
}
.langpick .lang{
  margin:0;padding:3px 10px;font-size:.82rem;font-family:"Fredoka",sans-serif;
  letter-spacing:.5px;color:#9aa4dd;text-decoration:none;line-height:1.5;border-bottom:0;
}
.langpick .lang + .lang{border-left:1px solid #46529c}
.langpick .lang:hover{color:#fff;background:#2b357655}
.langpick .lang.on{background:var(--beam);color:#1b2350}
.brand-short{display:none}
@media (max-width:620px){
  /* довгі назви книжки не мають з'їдати півекрана */
  .topbar .wrap{flex-wrap:wrap;gap:4px 0;padding:8px 20px}
  .topbar .brand{font-size:.95rem}
  .brand-full{display:none}
  .brand-short{display:inline}
  .topbar nav{display:flex;align-items:center;flex-wrap:wrap}
  .topbar nav a{margin-left:0;margin-right:12px;font-size:.9rem}
  .langpick{margin-left:0}
  .topbar nav .langpick .lang{margin:0}
}

/* ---------- sections ---------- */
section{padding:56px 0;position:relative}
.hook,.story{font-size:1.08rem}
.story p{margin:.7em 0}
.pull{
  font-family:"Fredoka";font-size:1.15rem;color:#cdd4ff;
  border-left:3px solid var(--lamp);padding-left:18px;margin:18px 0;font-style:italic;
}

/* ---------- postcard from Tsugi ---------- */
.postcard{
  background:linear-gradient(135deg,#2a3374,#1d2555);
  border:1px solid #46529c;border-radius:12px;padding:16px 20px;margin:22px 0;
  position:relative;
}
.postcard .from{
  font-family:"Fredoka";font-size:.85rem;color:var(--tsugi);display:flex;
  align-items:center;gap:8px;margin-bottom:4px;
}
.postcard p{margin:.2em 0;color:#e7ecff;font-style:italic}
.postcard .stamp{
  position:absolute;top:12px;right:14px;width:34px;height:40px;border-radius:4px;
  background:#e2574c22;border:1.5px dashed #e2574c;display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;
}

/* ---------- journal (paper) ---------- */
.journal{
  background:var(--paper);color:var(--ink);border-radius:14px;
  padding:24px 26px;margin:24px 0;border:1px solid var(--paper-edge);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);position:relative;
}
.journal::before{
  content:"";position:absolute;left:18px;top:12px;bottom:12px;width:2px;
  background:repeating-linear-gradient(var(--paper-edge) 0 6px,transparent 6px 12px);opacity:.6;
}
.journal h3{color:var(--ink);margin-top:.1em}
.journal p{margin:.5em 0}
.journal .small{color:var(--ink-soft);font-size:.92rem}
.journal code{background:#00000010;border-radius:5px;padding:1px 5px;font-family:"JetBrains Mono";font-size:.85em}

/* ---------- anatomy ---------- */
.anatomy{margin:18px 0 6px}
.anatomy-line{font-family:"JetBrains Mono",monospace;font-size:1.12rem;display:flex;flex-wrap:wrap;justify-content:center}
.tok{display:inline-flex;flex-direction:column;align-items:center;position:relative;padding:2px 1px}
.tok .glyph{padding:6px 8px;border-radius:8px;font-weight:500;white-space:pre}
.tok .cap{font-family:"Nunito";font-size:.8rem;line-height:1.25;margin-top:26px;max-width:140px;text-align:center;position:relative}
.tok .cap:empty{display:none}
.tok .cap::before{content:"";position:absolute;top:-22px;left:50%;width:2px;height:18px;background:currentColor;opacity:.5;transform:translateX(-50%)}
.tok.t-kw .glyph{background:#fff2cf;color:#a5741a}.tok.t-kw .cap{color:#a5741a}
.tok.t-fn .glyph{background:#d4f5ef;color:#1c7a6e}.tok.t-fn .cap{color:#1c7a6e}
.tok.t-num .glyph{background:#ffe0ee;color:#b03e73}.tok.t-num .cap{color:#b03e73}
.tok.t-str .glyph{background:#e3f5d6;color:#4a7a2c}.tok.t-str .cap{color:#4a7a2c}
.tok.t-punc .glyph{background:#e7e9fb;color:#5b567e}.tok.t-punc .cap{color:#7a75a0}

/* ---------- diagrams ---------- */
.diagram{margin:20px 0;text-align:center}
.diagram svg{max-width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center;margin:10px 0;font-size:.9rem;color:var(--ink-soft)}
.legend div{display:flex;align-items:center;gap:8px}
.legend .chip{width:34px;height:22px;flex:none}

/* ==========================================================================
   Пісочниця (sandbox)
   ========================================================================== */
.sandbox{
  background:linear-gradient(180deg,var(--night-2),var(--night-3));
  border:1px solid #3a4699;border-radius:16px;padding:18px;margin:26px 0;
}
.sandbox .sb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sandbox .sb-title{font-family:"Fredoka";color:var(--beam);font-size:1.1rem}
.sandbox .sb-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.sandbox .sb-grid{grid-template-columns:1.1fr .9fr}}

.sb-editor{position:relative;border-radius:10px;overflow:hidden;border:1px solid #2b3576;background:#141a3c}
.sb-editor textarea{
  width:100%;min-height:150px;resize:vertical;border:none;outline:none;
  background:transparent;color:#e7ecff;font-family:"JetBrains Mono",monospace;
  font-size:.95rem;line-height:1.7;padding:14px;tab-size:4;white-space:pre;
}
.sb-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

.sb-stage{background:#0f1330;border:1px solid #2b3576;border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.beam-stage{position:relative;width:170px;height:170px}
.beam-rot{position:absolute;inset:0;transition:transform .5s ease}
.status{font-family:"JetBrains Mono";font-size:.82rem;color:#c7cffb;width:100%}
.status b{color:var(--beam);font-weight:500}

.console{
  font-family:"JetBrains Mono";font-size:.85rem;background:#0c1029;border:1px solid #2b3576;
  border-radius:10px;padding:10px 12px;margin-top:10px;min-height:2.2em;white-space:pre-wrap;
  color:#c7cffb;max-height:180px;overflow:auto;
}
.console .err{color:#ffb3ad}
.console .ok{color:#8ff0c2}
.console .cat{color:var(--tsugi)}

/* ---------- buttons ---------- */
button.btn{
  font-family:"Fredoka",sans-serif;font-size:1rem;cursor:pointer;background:var(--beam);
  color:#4a3a00;border:none;border-radius:999px;padding:9px 20px;transition:transform .1s,filter .15s;
}
button.btn:hover{filter:brightness(1.06)}
button.btn:active{transform:translateY(1px)}
button.btn.ghost{background:transparent;color:#dfe4ff;border:1.5px solid #5b66c4}
button.btn.small{padding:7px 14px;font-size:.9rem}
button.btn:disabled{opacity:.5;cursor:default}
button.btn:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #fff;outline-offset:2px}
select.pick{font-family:"Nunito";font-size:.95rem;padding:8px 12px;border-radius:10px;border:1.5px solid #5b66c4;background:#eef1ff;color:var(--ink)}

/* ---------- applied box ---------- */
.applied{background:rgba(63,179,165,.12);border:1px solid var(--sea);border-radius:12px;padding:16px 20px;margin:22px 0}
.applied .tag{font-family:"Fredoka";font-size:.85rem;color:var(--sea);display:block;margin-bottom:2px}

/* ---------- secret ---------- */
.secret{background:#0f1330;border:1px dashed #5b66c4;border-radius:14px;padding:22px;margin:24px 0;color:#c7cffb}
.secret h3{color:var(--tsugi)}

hr.rule{border:none;border-top:1px solid #333c78;margin:44px 0}
.center{text-align:center}
.mini{font-size:.85rem;color:#9aa4dd}
footer{padding:40px 0 60px;text-align:center;color:#9aa4dd}

@media (max-width:560px){
  body{font-size:17px}
  .journal{padding:20px 18px}
  .anatomy-line{font-size:1rem}
  .tok .cap{max-width:100px;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  .beam-sweep{animation:none!important}
  html{scroll-behavior:auto}
  .beam-rot{transition:none}
}

/* ==========================================================================
   Перехід між завданнями — попереднє / список / наступне

   Сайт більше не одна довга книга, а набір сторінок-завдань, у кожну з яких
   ведуть QR-коди з паперу. Тому знизу потрібен явний спосіб іти далі, не
   вертаючись до книги за наступним кодом.
   ========================================================================== */
.page-nav{
  display:flex;gap:10px;justify-content:space-between;align-items:center;
  flex-wrap:wrap;margin:30px 0 14px;
}
.page-nav .btn{flex:1;min-width:120px;text-align:center;text-decoration:none}
.page-nav [aria-disabled="true"]{opacity:.35;pointer-events:none}
/* на сторінці завдання шапка «У книзі: Розділ 1» — підпис, не заголовок */
.on-task .chapter-num{opacity:.75}
/* Дитина прийшла по QR-коду з книги — вітання й гасло вона вже прочитала
   на обкладинці. Показуємо завдання, а не афішу. */
html.on-task #top,
html.on-task #top + style + .rule{display:none}
html.on-task main#book{padding-top:18px}

/* ==========================================================================
   Записка Макса — голос оповідача на полях журналу
   ========================================================================== */
.maxnote{
  background:rgba(233,185,73,.10);border:1px dashed var(--tsugi);border-radius:12px;
  padding:14px 18px;margin:22px 0;color:#f2e9d4;font-style:italic;
}
.maxnote .who{
  font-family:"Fredoka";font-style:normal;font-size:.85rem;color:var(--tsugi);
  display:block;margin-bottom:2px;
}
.maxnote p{margin:.3em 0}

/* ---------- списки в журналі ---------- */
.journal ul,.journal ol{margin:.5em 0 .5em 1.1em;padding-left:.6em}
.journal li{margin:.25em 0}
.journal ol li::marker{font-family:"Fredoka";color:#b03e73}

/* ---------- банки з насінням біля маяка ---------- */
.jars{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.jar{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:"JetBrains Mono";font-size:.72rem;color:#c7cffb;
}
.jar-name{color:#9aa4dd}
.jar-count{color:var(--beam);font-weight:500;font-size:.85rem;line-height:1}

.sb-controls .hint{align-self:center;opacity:.7}
@media (max-width:560px){.sb-controls .hint{display:none}}

/* ---------- посилання, що виглядає кнопкою ---------- */
.btn-link,a.btn{
  display:inline-block;font-family:"Fredoka",sans-serif;font-size:1rem;text-decoration:none;
  background:var(--beam);color:#4a3a00;border-radius:999px;padding:10px 22px;
  transition:filter .15s,transform .1s;
}
.btn-link:hover,a.btn:hover{filter:brightness(1.06)}
.btn-link:active,a.btn:active{transform:translateY(1px)}

/* ==========================================================================
   Завдання — те, що дитина робить сама
   ========================================================================== */
.task{
  background:rgba(63,179,165,.07);border:1px solid #3a4699;border-left:4px solid var(--sea);
  border-radius:14px;padding:18px 20px;margin:28px 0;scroll-margin-top:70px;
}
.task.done{border-left-color:var(--beam);background:rgba(255,212,71,.07)}
.task-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.task-head h3{margin:0;color:#fff;font-size:1.2rem;flex:1}
.task-tag{
  font-family:"Fredoka";font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--sea);border:1px solid var(--sea);border-radius:999px;padding:2px 10px;
}
.task .star{font-size:1.3rem;color:var(--beam);line-height:1}
.task-goal{margin:8px 0 2px;color:#e7ecff}
.task-goal code{background:#00000030;border-radius:5px;padding:1px 5px;font-family:"JetBrains Mono";font-size:.85em}
.task .sandbox{margin:14px 0 10px}

.hint{
  background:#0f1330;border:1px dashed #5b66c4;border-radius:10px;
  padding:8px 14px;margin:8px 0;color:#c7cffb;font-size:.95rem;
}
.hint summary{cursor:pointer;font-family:"Fredoka";color:var(--tsugi);list-style:none}
.hint summary::-webkit-details-marker{display:none}
.hint summary::before{content:"▸ ";color:var(--tsugi)}
.hint[open] summary::before{content:"▾ "}
.hint > div,.hint pre{margin:8px 0 4px}
.hint pre{
  background:#0c1029;border:1px solid #2b3576;border-radius:8px;padding:10px 12px;
  overflow:auto;font-family:"JetBrains Mono";font-size:.85rem;color:#e7ecff;
}
.hint code{font-family:"JetBrains Mono"}

/* вердикт маяка після запуску */
.verdict{border-radius:10px;padding:10px 14px;margin-top:10px;font-size:.95rem}
.verdict.ok{background:rgba(143,240,194,.12);border:1px solid #8ff0c2;color:#c9ffe6}
.verdict.no{background:rgba(255,179,173,.10);border:1px solid #ffb3ad;color:#ffdad7}
.verdict ul{margin:6px 0 0 1.1em;padding:0}
.verdict li{margin:.2em 0}
.verdict code{background:#00000030;border-radius:5px;padding:1px 5px;font-family:"JetBrains Mono";font-size:.85em}

/* галочка «я спробував» у блоці «У житті» */
.applied .did{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:.92rem;color:#bfe9e2;cursor:pointer;
}
.applied .did input{width:18px;height:18px;accent-color:var(--sea);cursor:pointer}

/* журнал завдань в епілозі */
.progress-box{
  background:#0f1330;border:1px solid #3a4699;border-radius:14px;padding:20px 22px;margin:26px 0;
}
.progress-box h3{margin-top:0;color:var(--beam)}
.progress-box h4{font-family:"Fredoka";font-size:1rem;color:#cdd4ff;margin:14px 0 4px}
.progress-box .count{color:#cdd4ff;margin:0}
.progress-list{list-style:none;margin:0;padding:0}
.progress-list li{display:flex;align-items:baseline;gap:8px;padding:3px 0;flex-wrap:wrap}
.progress-list .mark{color:var(--beam)}
.progress-list li.done a{color:#8ff0c2}
.progress-list a{color:#dfe4ff;text-decoration:none;border-bottom:1px dotted #5b66c4}
.progress-list .where{color:#7d86c0;font-size:.82rem;margin-left:auto}
.progress-box .small{color:#9aa4dd;font-size:.85rem;margin-bottom:0}

/* ==========================================================================
   Опори для читача: «коротше кажучи», слово на полях, міст до Python,
   картка «коли не працює» — і палітра команд над пісочницею.
   ========================================================================== */

/* ---------- «Коротше кажучи» — якір після складного місця ---------- */
.gist{
  background:rgba(255,212,71,.10);border-left:4px solid var(--beam);border-radius:0 10px 10px 0;
  padding:10px 16px;margin:14px 0;color:#f6efdb;
}
.gist > span{
  font-family:"Fredoka";color:var(--beam);font-size:.85rem;display:block;margin-bottom:1px;
}
.gist code{background:#00000030;border-radius:5px;padding:1px 5px;font-family:"JetBrains Mono";font-size:.85em}

/* ---------- слово на полях ---------- */
.word{
  border-left:3px dotted var(--sunflower);background:rgba(245,166,35,.07);
  border-radius:0 10px 10px 0;padding:8px 16px;margin:12px 0;
  font-size:.94rem;color:#f0e4cf;
}
.word b{font-family:"Fredoka";color:var(--sunflower);font-weight:600}

/* ---------- міст до справжнього Python ---------- */
.bridge{
  background:rgba(91,102,196,.12);border:1px solid #5b66c4;border-radius:12px;
  padding:16px 20px;margin:24px 0;
}
.bridge > .tag{
  font-family:"Fredoka";font-size:.85rem;color:#a9b4ff;display:block;margin-bottom:8px;
}
.bridge table{width:100%;border-collapse:collapse;font-size:.95rem}
.bridge td{padding:5px 8px 5px 0;vertical-align:baseline;border-top:1px solid #333c78}
.bridge tr:first-child td{border-top:none}
.bridge .ours{color:#e7ecff;white-space:nowrap}
.bridge .arrow{color:#7d86c0;width:1.6em;text-align:center}
.bridge .theirs code{
  font-family:"JetBrains Mono";font-size:.88em;background:#00000040;color:var(--beam);
  border-radius:5px;padding:2px 7px;white-space:nowrap;
}
.bridge .note{color:#9aa4dd;font-size:.86rem;padding-left:10px}
.bridge .small{margin:10px 0 0;color:#c7cffb}
@media (max-width:560px){
  .bridge .note{display:none}
  .bridge .ours{white-space:normal}
}

/* ---------- картка «коли не працює» ---------- */
.debugcard{
  background:rgba(226,87,76,.08);border:1px solid var(--crimson);border-radius:12px;
  padding:16px 20px;margin:24px 0;
}
.debugcard > .tag{
  font-family:"Fredoka";font-size:.9rem;color:#ff9d95;display:block;margin-bottom:6px;
}
.debugcard ol{margin:.4em 0 .4em 1.1em;padding-left:.6em}
.debugcard li{margin:.35em 0}
.debugcard li::marker{font-family:"Fredoka";color:var(--crimson)}
.debugcard .small{margin:10px 0 0;color:#e8d5d3}

/* ---------- плашка «Полагодь» ---------- */
.task-tag.fix{background:rgba(226,87,76,.2);color:#ff9d95;border-color:var(--crimson)}
.task.fix{border-left-color:var(--crimson);background:rgba(226,87,76,.06)}
.task.fix.done{border-left-color:var(--beam);background:rgba(255,212,71,.07)}

/* ---------- палітра команд над редактором ---------- */
.palette{
  background:rgba(15,19,48,.5);border:1px solid #333c78;border-radius:12px;
  padding:8px 12px;margin-bottom:10px;
}
.palette > summary{
  cursor:pointer;list-style:none;font-family:"Fredoka";font-size:.9rem;color:#a9b4ff;
}
.palette > summary::-webkit-details-marker{display:none}
.palette > summary::before{content:"▸ ";color:#7d86c0}
.palette[open] > summary::before{content:"▾ "}
.palette-body{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.palette-grp{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.palette-name{
  font-family:"Fredoka";font-size:.75rem;color:#7d86c0;width:5.4em;flex:none;
}
button.chip-cmd{
  font-family:"JetBrains Mono",monospace;font-size:.78rem;cursor:pointer;
  background:#1b2250;color:#dfe4ff;border:1px solid #3a4699;border-radius:8px;
  padding:4px 9px;transition:background .12s,transform .08s;
}
button.chip-cmd:hover{background:#2b3576;color:#fff}
button.chip-cmd:active{transform:translateY(1px)}
button.chip-cmd:focus-visible{outline:3px solid var(--beam);outline-offset:2px}
@media (max-width:560px){
  .palette-name{width:100%;margin-bottom:-2px}
  button.chip-cmd{font-size:.74rem;padding:5px 8px}
}

/* ---------- голос Цербера в журналі пісочниці ---------- */
.console .cerb{color:var(--cerb)}

/* ---------- зберегти / повернути журнал зірок ---------- */
.progress-keep{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.progress-keep .btn{display:inline-block;cursor:pointer}
label.btn.ghost{
  font-family:"Fredoka",sans-serif;font-size:.9rem;background:transparent;color:#dfe4ff;
  border:1.5px solid #5b66c4;border-radius:999px;padding:7px 14px;
}
label.btn.ghost:hover{filter:brightness(1.1)}