/* Demo 2: ce folosesc toate paginile. Direcția Studio (docs/branding/homepage-d).
   Două seturi de mărimi: paginile părintelui au mărimile moodboardului (text 20, etichete 16) și nu se măresc;
   ecranele copilului (.copil: exercițiile, evaluarea, pauza) au literele mai mari, din docs/demo/machete/demo-2.pen, planșa 00. */
[hidden] { display: none !important; }
:root {
  --paper: #F5F1E8; --card: #FFFDF8; --ink: #121316; --soft: #3D3F45; --line: #D9D3C5;
  --rec: #FF5A36; --recT: #C8391A; --mk: #FFD84A; --co: #3152F0; --ok: #1F7A4D; --okL: #DCEFE3; --on: #FFFDF8; --onS: #C4C6CC;
  /* Cinci mărimi de text, plus eticheta; două butoane; trei spații. */
  --afis: clamp(44px, 4.6vw, 72px); --t1: clamp(34px, 3.6vw, 56px); --t2: 28px; --tx: 20px; --mic: 18px; --eti: 16px;
  --btn: 60px; --btn-mic: 48px; --btn-tx: 20px;
  --s1: 12px; --s2: 24px; --s3: 56px;
  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --text: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --nota: 'Caveat', cursive;
  --copil: 'Andika', system-ui, sans-serif;
  --scris: 'Playwrite RO', cursive;
}
.copil > :not(.antet) { --afis: 72px; --t1: 52px; --t2: 34px; --tx: 26px; --mic: 22px; --eti: 22px; --btn: 72px; --btn-mic: 56px; --btn-tx: 28px; --s3: 48px; }
@media (max-width: 1280px) { .copil > :not(.antet) { --afis: 64px; } }
@media (max-width: 1000px) { :root { --s3: 32px; } .copil > :not(.antet) { --afis: 56px; --t1: 44px; --s3: 32px; } }
@media (max-width: 600px) {
  :root { --t2: 24px; --mic: 17px; --eti: 15px; --btn: 56px; --btn-mic: 48px; --s2: 18px; --s3: 20px; }
  .copil > :not(.antet) { --afis: 42px; --t1: 34px; --t2: 28px; --tx: 22px; --mic: 18px; --eti: 18px; --btn: 64px; --btn-mic: 52px; --btn-tx: 24px; --s2: 18px; --s3: 20px; }
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { background: var(--paper); color: var(--ink); font: 500 var(--tx)/1.5 var(--text); overflow-wrap: break-word; }
.copil > :not(.antet) { line-height: 1.4; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible + * { outline: 3px solid var(--co); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
h3 { font-weight: 700; }
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Textul, în cele cinci mărimi */
.afis { font-size: var(--afis); line-height: 1.05; }
.t1 { font-size: var(--t1); }
.t2 { font-size: var(--t2); }
.mic { font-size: var(--mic); }
.slab { color: var(--soft); }
.eti { font: 700 var(--eti)/1.3 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }
.eti.rosu { color: var(--recT); } .eti.mk { color: var(--mk); }
.nota { font: 700 calc(var(--t2) + 2px)/1.15 var(--nota); color: var(--co); }
.marcat { background: var(--mk); border-radius: 12px; padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Antetul */
.antet { display: flex; align-items: center; gap: var(--s2); min-height: 88px; padding: var(--s1) var(--s3); border-bottom: 2px solid var(--line); }
.logo { font: 800 32px/1 var(--disp); letter-spacing: -.04em; text-decoration: none; flex: none; }
.logo span { display: inline-block; line-height: 1; background: var(--mk); padding: .06em .02em; }
.edu { color: var(--mk); }
.antet nav, .drum { flex: 1; display: flex; justify-content: center; align-items: center; gap: 32px; font: 500 var(--tx) var(--text); }
.drum { gap: var(--s1); font-weight: 500; }
.antet nav a, .drum a { text-decoration: none; } .antet nav a:hover, .drum a:hover { text-decoration: underline; }
.drum .ic { width: .8em; height: .8em; color: var(--soft); }
.pastila { background: var(--ink); color: var(--on); border-radius: 99px; padding: var(--s1) var(--s2); font: 600 var(--mic) var(--text); text-decoration: none; white-space: nowrap; }
a.pastila:hover { background: #2a2c33; }
@media (max-width: 900px) {
  .antet { flex-wrap: wrap; gap: var(--s1) var(--s2); min-height: 0; padding-block: var(--s1); }
  .antet .logo { font-size: 32px; }
  .antet .pastila { margin-left: auto; }
  .antet nav, .drum { order: 3; flex-basis: 100%; justify-content: flex-start; gap: var(--s2); }
  .drum { gap: 8px; }
}
@media (max-width: 600px) { .antet nav, .drum { font-size: var(--mic); } .drum a { white-space: nowrap; } }

/* Scena: pe laptop (de la 1100 × 560) pagina încape toată pe ecran și nu se derulează (capitolul și ecranele copilului).
   Ecranele copilului (.copil) sunt desenate pe 1280 × 720 (sau înălțimea din data-h) și mărite întregi cât fereastra,
   cel mult de 1,1 ori (--k, din site.js); antetul rămâne la mărimea lui. Paginile părintelui nu se măresc.
   Pe tabletă și telefon toate paginile curg normal. */
.ecran { display: flex; flex-direction: column; min-height: 100dvh; }
@media (min-width: 1100px) and (min-height: 560px) {
  body:has(.scena:not([hidden])) { overflow: hidden; }
  .scena { height: 100dvh; min-height: 0; overflow: hidden; }
  .scena.copil { zoom: var(--k, 1); width: calc(100vw / var(--k, 1)); height: calc(100dvh / var(--k, 1)); }
  .scena.copil > .antet { zoom: calc(1 / var(--k, 1)); }
}

/* Butoanele: mare și mic; difuzorul are mărimea butonului mare */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: var(--btn); padding: 0 calc(var(--btn) / 2); border: 2px solid var(--ink); border-radius: 99px; font: 700 var(--btn-tx)/1.1 var(--disp); letter-spacing: -.02em; text-decoration: none; background: var(--card); text-align: center; white-space: nowrap; transition: transform .12s; }
.btn:hover { transform: translateY(-2px); }
.btn.mic { min-height: var(--btn-mic); padding: 0 var(--s2); font-size: var(--mic); }
.btn.foc { background: var(--rec); }
.btn.negru { background: var(--ink); color: var(--on); }
.btn.oprit, .btn:disabled { background: var(--line); border-color: var(--line); color: var(--soft); cursor: default; transform: none; }
.btn.lat { width: 100%; }
.legatura { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.difuzor { flex: none; width: var(--btn); height: var(--btn); border-radius: 50%; display: grid; place-items: center; background: var(--rec); border: 2px solid var(--ink); font-size: 36px; transition: transform .12s; }
.difuzor:hover { transform: scale(1.05); }
.difuzor.suna { box-shadow: 0 0 0 6px var(--mk); }
@media (max-width: 600px) { .difuzor { font-size: 30px; } }

/* Carduri și litere de citit */
.card { background: var(--card); border: 2px solid var(--ink); border-radius: 24px; }
.chip { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .24em .12em; background: var(--card); border: 2px solid var(--ink); border-radius: .28em; font: 700 1em/1 var(--copil); color: var(--recT); vertical-align: middle; letter-spacing: 0; }

/* Text pe care îl poate asculta copilul care nu citește încă */
.citeste { cursor: pointer; border-radius: 8px; }
.citeste .sp { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-left: .3em; vertical-align: -.2em; background: var(--rec); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font-size: .7em; font-family: var(--text); letter-spacing: 0; opacity: 0; transition: opacity .12s; }
.citeste .sp .ic { width: .8em; height: .8em; }
.citeste:hover .sp, .citeste.suna .sp { opacity: 1; }
.citeste.suna { background: rgba(255, 216, 74, .45); }
@media (hover: none) { .citeste .sp { opacity: 1; } }