/* Un-thread Greek — design system.
   Idea: the quiet light of an Athens morning. Sea-mist grey-blue ground, whitewash panels, Aegean blue for action,
   honey and sage only as small accents. No pure white or near-black: text is a soft slate so long reading stays easy.
   Type: Alegreya (headings) + Alegreya Sans (text). Both were drawn with real Greek letters.
   The meander (Greek key) line is the one decorative motif. Colour is never the only cue. */
:root{
  --bg:#eef2f5;--wash:#dfe9f1;--paper:#f8fafb;
  --ink:#33404d;--ink-soft:#56636f;--head:#264d77;--line:#d3dce4;
  --aegean:#2f6396;--aegean-deep:#264d77;--aegean-tint:#dce8f2;
  --honey:#cf9a3a;--honey-tint:#f3e8cd;
  --clay:#b4563f;--clay-deep:#8f3f2c;--clay-tint:#f2e0d8;
  --sage:#4d7e62;--sage-tint:#dcebe2;
  --btnink:#ffffff;
  --shadow:0 1px 2px rgba(38,64,92,.07),0 10px 26px -14px rgba(38,64,92,.22);
  --key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M0 11H2V2H12V8H6V5H9V11H14' fill='none' stroke='%239db5c9' stroke-width='1.2'/%3E%3C/svg%3E");
  /* names used by the lesson pages */
  --blue:var(--aegean);--soft:var(--aegean-tint);--muted:var(--ink-soft);--rule:var(--line);
  --sun:var(--honey);--sunsoft:var(--honey-tint);--coral:var(--clay);--coralsoft:var(--clay-tint);
  --green:var(--sage);--greensoft:var(--sage-tint);--good:#3d7656;--bad:#a54235;
  --sky:#d3e2ec;--stucco:#f7f5f0;--bubble:#ffffff;--violet:#7a68ad;
  --display:'Alegreya Variable','Alegreya',Georgia,'Iowan Old Style',serif;
  --serif:var(--display);
  --sans:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
  --ut-h:4.25rem;
  --sky-top:#c7dbea;--sky-bot:#f2e7d1;--pave:#d7d3c8;--sunc:#e2a93f;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#141c25;--wash:#1a2633;--paper:#1a242f;
  --ink:#c9d3dd;--ink-soft:#97a7b6;--head:#a9c9e8;--line:#2a3744;
  --aegean:#86b3de;--aegean-deep:#a9c9e8;--aegean-tint:#1f3448;
  --honey:#d4aa5c;--honey-tint:#33291a;
  --clay:#e0937f;--clay-deep:#efb4a4;--clay-tint:#3a2722;
  --sage:#7fc29b;--sage-tint:#1a2f24;
  --btnink:#10202e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px -14px rgba(0,0,0,.6);
  --key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M0 11H2V2H12V8H6V5H9V11H14' fill='none' stroke='%23395068' stroke-width='1.2'/%3E%3C/svg%3E");
  --sky-top:#101b29;--sky-bot:#2e2d36;--pave:#202a35;--sunc:#e8b857;--good:#7fc29b;--bad:#f0a196;--sky:#25405a;--stucco:#22303f;--bubble:#1a242f;--violet:#b9a4f5;
}}
:root[data-theme=dark]{
  --bg:#141c25;--wash:#1a2633;--paper:#1a242f;
  --ink:#c9d3dd;--ink-soft:#97a7b6;--head:#a9c9e8;--line:#2a3744;
  --aegean:#86b3de;--aegean-deep:#a9c9e8;--aegean-tint:#1f3448;
  --honey:#d4aa5c;--honey-tint:#33291a;
  --clay:#e0937f;--clay-deep:#efb4a4;--clay-tint:#3a2722;
  --sage:#7fc29b;--sage-tint:#1a2f24;
  --btnink:#10202e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px -14px rgba(0,0,0,.6);
  --key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M0 11H2V2H12V8H6V5H9V11H14' fill='none' stroke='%23395068' stroke-width='1.2'/%3E%3C/svg%3E");
  --sky-top:#101b29;--sky-bot:#2e2d36;--pave:#202a35;--sunc:#e8b857;--good:#7fc29b;--bad:#f0a196;--sky:#25405a;--stucco:#22303f;--bubble:#1a242f;--violet:#b9a4f5;
}
*{box-sizing:border-box}
html{color-scheme:light dark}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
html{scroll-padding-top:calc(var(--ut-h) + 1rem);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 1.1875rem/1.65 var(--sans);background:linear-gradient(var(--wash),var(--bg) 26rem) no-repeat,var(--bg);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--display);color:var(--head);letter-spacing:-.005em}
a{color:var(--aegean-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--aegean);outline-offset:3px;border-radius:6px}
.muted,.small{color:var(--ink-soft)}
.gr,.page .gr{font-family:var(--display)}
.panel{top:var(--ut-h)!important}

/* ── Buttons: one primary (solid blue), one quiet (tinted) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;background:var(--aegean);color:var(--btnink);border:0;border-radius:14px;padding:.55rem 1.5rem;font:700 1.0625rem var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 16px -9px rgba(38,77,119,.65);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);background:var(--aegean)}
.btn:active{transform:none}
.btn.alt{background:var(--aegean-tint);color:var(--aegean-deep);box-shadow:none}
.btn.alt:hover{filter:brightness(.97)}
.btn.go{font-size:1.15rem;padding:.7rem 1.9rem;min-height:3.3rem}
.btn[disabled]{opacity:.45;cursor:default;transform:none;filter:none}
.link{color:var(--aegean-deep)}

/* ── Top bar: frosted, calm ── */
.ut-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
.ut-nav-in{max-width:64rem;margin:0 auto;padding:0 1.25rem;min-height:var(--ut-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ut-logo{display:flex;align-items:center;gap:.65rem;color:var(--head);text-decoration:none;font:700 1.45rem/1 var(--display);white-space:nowrap}
.ut-logo i{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--aegean-tint);color:var(--aegean-deep);display:grid;place-items:center;font:700 1.3rem var(--display);font-style:normal;box-shadow:0 0 0 1px color-mix(in srgb,var(--aegean) 30%,transparent) inset}
.ut-menu{display:flex;gap:.2rem;margin:0;padding:0;list-style:none}
.ut-menu a{display:flex;align-items:center;gap:.5rem;min-height:2.9rem;padding:0 1rem;border-radius:12px;color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:1.05rem;transition:background .15s,color .15s}
.ut-menu a:hover{background:color-mix(in srgb,var(--aegean) 10%,transparent);color:var(--ink)}
.ut-menu a[aria-current=page]{background:var(--aegean-tint);color:var(--aegean-deep)}
.ut-ico{width:1.35rem;height:1.35rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:40rem){
  :root{--ut-h:3.6rem}
  .ut-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .ut-logo{font-size:1.3rem}
  /* menu moves to a tab bar at the bottom, where thumbs reach */
  .ut-menu{position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-top:1px solid var(--line);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));gap:.2rem;justify-content:space-around}
  .ut-menu li{flex:1}
  .ut-menu a{flex-direction:column;justify-content:center;gap:.15rem;min-height:3.5rem;padding:.2rem .1rem;font-size:.9rem;border-radius:14px;text-align:center}
  .ut-ico{width:1.5rem;height:1.5rem}
  body{padding-bottom:5.2rem}
}

/* ── Where am I, on lesson pages ── */
.ut-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:0 0 1.4rem;font-size:1rem;color:var(--ink-soft)}
.ut-chip{display:inline-flex;align-items:center;border-radius:999px;padding:.2rem .85rem;font-weight:700;background:var(--aegean-tint);color:var(--aegean-deep)}
.ut-chip.story{background:var(--clay-tint);color:var(--clay-deep)}
.ut-crumb a{font-weight:700}
.ut-dots{display:flex;gap:.35rem;margin-left:auto}
.ut-dots span{width:.6rem;height:.6rem;border-radius:50%;background:var(--line)}
.ut-dots span.on{background:var(--honey)}
.ut-dots span.done{background:var(--sage)}

/* ── Previous / Next ── */
.ut-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;margin:4rem 0 0;padding-top:1.6rem;position:relative}
.ut-pager::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--key) repeat-x left center;opacity:.8}
.ut-pager a{display:flex;flex-direction:column;gap:.1rem;min-height:3.5rem;justify-content:center;padding:.5rem 1.2rem;border-radius:16px;text-decoration:none;background:var(--paper);color:var(--ink);font-weight:700;box-shadow:var(--shadow);transition:transform .15s}
.ut-pager a small{font-weight:400;color:var(--ink-soft);font-size:.95rem}
.ut-pager a:hover{transform:translateY(-1px)}
.ut-pager .next{background:var(--aegean);color:var(--btnink);text-align:right}
.ut-pager .next small{color:color-mix(in srgb,var(--btnink) 82%,transparent)}
.ut-pager .mid{text-align:center;background:none;box-shadow:none;color:var(--aegean-deep)}
.ut-pager .none{visibility:hidden}
@media(max-width:40rem){.ut-pager{grid-template-columns:1fr 1fr}.ut-pager .mid{grid-column:1/-1;order:3}}

/* ── Page furniture ── */
.page{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.page-head{padding:3rem 0 1rem}
.page-head h1{font:700 clamp(2.4rem,6vw,3.8rem)/1.05 var(--display);margin:0 0 .6rem;color:var(--head)}
.page-head p{font:500 1.35rem/1.5 var(--display);color:var(--ink-soft);margin:.4rem 0;max-width:36rem}
.page h2{font:700 clamp(1.7rem,4vw,2.2rem)/1.15 var(--display);margin:0 0 1rem}
.page h3{font:700 1.3rem/1.25 var(--display);margin:0 0 .3rem}
.page p{margin:.6rem 0}
.page section{padding:2.2rem 0}
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:var(--paper);border-radius:20px;padding:1.4rem 1.6rem;box-shadow:var(--shadow)}
.card.sun{background:var(--honey-tint);box-shadow:none}
.card.coral{background:var(--clay-tint);box-shadow:none}
.card.green{background:var(--sage-tint);box-shadow:none}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.footer{position:relative;margin-top:3rem;padding:2.2rem 0 2.5rem;color:var(--ink-soft);font-size:1rem}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--key) repeat-x left center}

/* Steps: a real sequence, so numbered; set as type, not boxes */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--line);background:none;border-radius:0}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);width:auto;height:auto;border-radius:0;background:none;display:block;font:700 2.2rem/1 var(--display);color:var(--honey);text-align:left}
.steps h3{margin-bottom:.15rem}.steps p{margin:0}

/* A notebook page, because the advice is to keep one */
.note{position:relative;background:var(--paper) repeating-linear-gradient(transparent 0 1.95rem,color-mix(in srgb,var(--aegean) 18%,transparent) 1.95rem 2rem);border-radius:6px 20px 20px 6px;padding:1.2rem 1.6rem 1.2rem 4rem;box-shadow:var(--shadow);line-height:2rem}
.note::before{content:"";position:absolute;left:3rem;top:0;bottom:0;width:2px;background:color-mix(in srgb,var(--clay) 45%,transparent)}
.note h3{margin:0;line-height:2rem}.note p{margin:0}
@media(max-width:40rem){.note{padding-left:2.2rem}.note::before{left:1.4rem}}

/* ── Lessons map: a table of contents on a line, not a pile of boxes ── */
.page section.group{padding:0;margin:1.6rem 0 2.6rem;max-width:46rem}
.group-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.group-head .badge{width:3.2rem;height:3.2rem;border-radius:16px;display:grid;place-items:center;background:var(--aegean-tint);color:var(--aegean-deep);font:700 1.5rem var(--display)}
.group.story .badge{background:var(--clay-tint);color:var(--clay-deep)}
.group.later .badge{background:var(--line);color:var(--ink-soft)}
.badge svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.group-head h2{margin:0}
.group-head p{margin:0;color:var(--ink-soft);font-size:1.05rem}
.stops{list-style:none;margin:0 0 0 1.6rem;padding:0 0 0 1.8rem;border-left:2px solid var(--line)}
.stop{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 1rem;border-radius:18px;transition:background .15s}
.stop:hover{background:var(--paper);box-shadow:var(--shadow)}
.stop::before{content:"";position:absolute;left:-2.4rem;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;border-radius:50%;background:var(--aegean);box-shadow:0 0 0 5px var(--bg)}
.group.story .stop::before{background:var(--clay)}
.stop .n{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--aegean) inset;color:var(--aegean-deep);font:700 1.25rem var(--display)}
.group.story .stop .n{box-shadow:0 0 0 1.5px var(--clay) inset;color:var(--clay-deep)}
.stop h3{margin:0;font:700 1.3rem/1.2 var(--display)}
.stop .m{font-size:1rem;color:var(--ink-soft)}
.stop .seen{color:var(--good);font-weight:700}
.stop .btn{min-height:2.7rem;padding:.4rem 1.2rem}
.stop.soon{opacity:.62}
.stop.soon:hover{background:none;box-shadow:none}
.stop.soon::before{background:var(--line)}
.stop.soon .n{box-shadow:0 0 0 1.5px var(--line) inset;color:var(--ink-soft)}
.tag{display:inline-block;font-size:.95rem;font-weight:700;border-radius:999px;padding:.1rem .8rem;background:var(--honey-tint);color:var(--ink)}
.resume{display:none;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--honey-tint);border-radius:20px;padding:1rem 1.4rem;margin:1.2rem 0 0}
.resume.show{display:flex}
@media(max-width:40rem){.stops{margin-left:.9rem;padding-left:1.4rem}.stop{gap:.7rem;padding:.8rem .5rem}.stop::before{left:-1.85rem}.stop .btn{padding:.3rem 1rem}}

/* ── Lesson pages: same components, softened ── */
body[data-page=lesson] main{max-width:42rem;padding:2rem 1.25rem 4rem}
body[data-page=lesson] h1{font:700 clamp(2.3rem,6vw,3.4rem)/1.05 var(--display);color:var(--head);margin:.1rem 0 .5rem}
body[data-page=lesson] h2{font:700 1.75rem/1.15 var(--display);color:var(--head);border:0;border-radius:0;padding:0;margin:3.6rem 0 1rem}
body[data-page=lesson] h2::before{content:"";display:block;width:2.4rem;height:3px;border-radius:2px;background:var(--honey);margin-bottom:.8rem}
body[data-page=lesson] h3{font:700 1.25rem/1.25 var(--display);color:var(--head);margin:2rem 0 .5rem}
body[data-page=lesson] .lead{font:500 1.35rem/1.5 var(--display);color:var(--ink-soft)}
body[data-page=lesson] th{color:var(--aegean-deep);font-family:var(--sans);font-weight:700}
body[data-page=lesson] th,body[data-page=lesson] td{border-bottom:1px solid var(--line)}
body[data-page=lesson] .bar{background:var(--line);height:6px}
body[data-page=lesson] .bar i{background:var(--honey)}
.line{border-radius:16px;padding:.9rem .8rem;border-bottom:0;transition:background .15s}
.line:hover{background:var(--paper);box-shadow:var(--shadow)}
.line .gr,.gr{font-family:var(--display)}
.line .gr{font-size:1.55rem;color:var(--ink)}
.en{color:var(--aegean-deep)}
.who{color:var(--ink-soft)}
.scene{font-family:var(--sans);font-style:italic;color:var(--ink-soft)}
.opt{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;font-size:1.1rem;color:var(--ink);transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--aegean);background:var(--aegean-tint)}
.opt.good{border-color:var(--good);background:var(--sage-tint)}
.opt.bad{border-color:var(--bad);background:var(--clay-tint)}
input{font:500 1.3rem var(--display);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.55rem .8rem}
input:focus{outline:3px solid color-mix(in srgb,var(--aegean) 35%,transparent);border-color:var(--aegean)}
.pick button,.read button{background:var(--aegean-tint);color:var(--aegean-deep);border:0;border-radius:12px;font-family:var(--display);font-weight:700;transition:filter .15s}
.pick button:hover,.read button:hover{background:var(--aegean-tint);filter:brightness(.96)}
.fb.good{color:var(--good)}.fb.bad{color:var(--bad)}
.read{border-bottom:1px solid var(--line)}
.read .ans{color:var(--aegean-deep)}
.grid button{background:var(--paper);border:1px solid var(--line);border-radius:14px;font-family:var(--display);font-size:1.9rem;color:var(--ink);transition:border-color .15s,transform .15s}
.grid button:hover{border-color:var(--aegean);transform:translateY(-1px)}
.grid button[aria-pressed=true]{background:var(--aegean-tint);border-color:var(--aegean)}
.panel{background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);border-radius:0 0 18px 18px}
#big{color:var(--aegean-deep);font-family:var(--display)}
#q .big{font-family:var(--display);color:var(--head)}
.rule li{margin:.6rem 0}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Theme switch ── */
.ut-tools{display:flex;align-items:center;gap:.4rem}
.ut-theme{width:2.9rem;height:2.9rem;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s}
.ut-theme:hover{background:color-mix(in srgb,var(--aegean) 12%,transparent);color:var(--ink)}
.ut-theme svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ut-theme .sun{display:none}
:root[data-theme=dark] .ut-theme .sun{display:block}
:root[data-theme=dark] .ut-theme .moon{display:none}

/* ── Lessons map: the building ── */
:root{--plate:#2b5d91;--plate-ink:#f4f7fa;--glass:#cfe0ec;--lamp1:#fbe3a4;--lamp2:#f1c56e}
:root[data-theme=dark]{--plate:#1f4a78;--plate-ink:#eef3f8;--glass:#243a50;--lamp1:#f2c46a;--lamp2:#d99a36}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--plate:#1f4a78;--plate-ink:#eef3f8;--glass:#243a50;--lamp1:#f2c46a;--lamp2:#d99a36}}
.map{display:grid;grid-template-columns:minmax(0,27rem) minmax(0,1fr);gap:3.5rem;align-items:stretch;padding-bottom:2rem}
.block{display:flex;flex-direction:column-reverse;position:relative;background:var(--stucco);border-radius:14px 14px 0 0;box-shadow:var(--shadow);padding:0 1.2rem;overflow:hidden}
.block::after{content:"";height:.9rem;margin:0 -1.2rem;background:var(--pave)}
.plaque{align-self:center;display:flex;align-items:baseline;gap:.7rem;margin:1.3rem 0 .6rem;padding:.3rem 1.2rem;background:var(--plate);color:var(--plate-ink);border-radius:7px;box-shadow:0 0 0 2px var(--plate),0 0 0 4px var(--stucco),0 0 0 5px color-mix(in srgb,var(--plate) 60%,transparent);font:700 1.2rem/1.3 var(--display)}
.plaque small{font:400 .95rem var(--sans);opacity:.85}
.floor{position:relative;display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:1.3rem 1.5rem;padding:1.1rem 1.1rem 2.1rem}
.floor::after{content:"";position:absolute;left:-.4rem;right:-.4rem;bottom:0;height:1.25rem;background:linear-gradient(color-mix(in srgb,var(--ink-soft) 40%,transparent) 0 .3rem,transparent .3rem),repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink-soft) 40%,transparent) 0 2px,transparent 2px 9px);background-size:100% 100%,100% .95rem;background-position:0 0,0 .3rem;background-repeat:no-repeat,no-repeat}
.floor.ground::before{content:"";position:absolute;left:-.4rem;right:-.4rem;top:0;height:.95rem;background:repeating-linear-gradient(90deg,var(--plate) 0 1.1rem,var(--paper) 1.1rem 2.2rem);border-radius:0 0 4px 4px;box-shadow:0 3px 5px -3px rgba(0,0,0,.3)}
.floor.ground{padding-top:1.7rem}
.win{--shutter:var(--aegean);position:relative;display:block;width:100%;aspect-ratio:40/52;margin:0;padding:0;border:0;border-radius:3px;background:var(--glass);color:var(--ink);cursor:pointer;font:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.win::before,.win::after{content:"";position:absolute;top:-3%;bottom:-3%;width:22%;background:var(--shutter);border-radius:2px;transition:width .35s ease,opacity .35s}
.win::before{left:-27%}.win::after{right:-27%}
.win .num{position:absolute;inset:0;display:grid;place-items:center;font:700 1.45rem/1 var(--display);color:color-mix(in srgb,var(--ink) 75%,transparent)}
.win.ready{background:linear-gradient(var(--lamp1),var(--lamp2));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 18px -2px color-mix(in srgb,var(--lamp2) 70%,transparent)}
.win.ready .num{color:#3b2a0f}
.win.soon::before,.win.soon::after{width:51%;top:0;bottom:0;border-radius:3px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 6px),var(--shutter);opacity:.55}
.win.soon::before{left:0}.win.soon::after{right:0}
.win.soon .num{display:none}
.win:hover{filter:brightness(1.05)}
.win[aria-pressed=true]{outline:3px solid var(--head);outline-offset:6px;border-radius:3px;z-index:2}
.win .tick{position:absolute;right:-.15rem;bottom:-.3rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--sage);color:#fff;display:none;place-items:center;z-index:3;box-shadow:0 0 0 2px var(--stucco)}
.win .tick svg{width:.7rem;height:.7rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.win.seen .tick{display:grid}
.door{display:block;position:relative;aspect-ratio:40/62;align-self:end;border-radius:999px 999px 2px 2px;background:var(--aegean);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--paper) 25%,transparent)}
.door::after{content:"";position:absolute;right:16%;top:56%;width:.45rem;height:.45rem;border-radius:50%;background:var(--sunc)}
.door:hover{filter:brightness(1.1)}
.scaffold{margin:1.3rem .2rem 0;padding:1.2rem 1rem 1.3rem;border:2px dashed color-mix(in srgb,var(--ink-soft) 45%,transparent);border-bottom:0;border-radius:10px 10px 0 0;background:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--honey) 16%,transparent) 12px 14px);text-align:center}
.scaffold b{display:block;font:700 1.25rem var(--display);color:var(--head)}
.scaffold span{color:var(--ink-soft);font-size:1.02rem}
.pick{position:sticky;top:calc(var(--ut-h) + 1rem);display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;align-items:center;background:var(--paper);border-radius:22px;padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
.pick-win{grid-row:span 2;width:3.4rem;aspect-ratio:40/52;position:relative;border-radius:3px;margin:0 .8rem 0 .5rem}
.pick-win .win{pointer-events:none}
.pick-kicker{font-weight:700;color:var(--ink-soft);font-size:1rem}
.pick h2{margin:0;font:700 clamp(1.6rem,3vw,2.1rem)/1.1 var(--display)}
.pick-meta{margin:.2rem 0 0;color:var(--ink-soft)}
.pick .btn{grid-column:1/-1;margin-top:.9rem}
.pick .btn.off{background:var(--line);color:var(--ink-soft);box-shadow:none;pointer-events:none}
.legend{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem;color:var(--ink-soft);font-size:1.05rem}
.legend li{display:flex;align-items:center;gap:.8rem}
.legend .win{width:1.7rem;flex:none;pointer-events:none}
@media(max-width:56rem){
  .map{grid-template-columns:1fr;gap:1.4rem}
  .pick-col{order:-1;position:sticky;top:var(--ut-h);z-index:20;margin:0 -1.25rem;padding:.6rem 1.25rem;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .pick{position:static;grid-template-columns:auto 1fr auto;padding:.7rem 1rem;border-radius:18px;gap:.1rem 1rem}
  .pick-win{grid-row:span 2;width:2.3rem;margin:0}
  .pick .btn{grid-column:3;grid-row:1/span 2;margin:0;min-height:2.8rem;padding:.4rem 1.2rem}
  .pick h2{font-size:1.3rem}.pick-kicker{font-size:.9rem}.pick-meta{display:none}
  .legend{display:none}
  .block{max-width:30rem}
}
@media(prefers-reduced-motion:reduce){.win::before,.win::after{transition:none}}

/* ── Lesson page extras ── */
.minwin{--shutter:var(--aegean);position:relative;display:inline-grid;place-items:center;width:1.55rem;height:2rem;margin:0 .5rem 0 .6rem;border-radius:2px;background:linear-gradient(var(--lamp1),var(--lamp2));font:700 1rem var(--display);color:#3b2a0f;vertical-align:middle}
.minwin::before,.minwin::after{content:"";position:absolute;top:-3%;bottom:-3%;width:.38rem;background:var(--shutter);border-radius:1px}
.minwin::before{left:-.5rem}.minwin::after{right:-.5rem}
.minwin.story{--shutter:var(--clay)}
body[data-page=lesson] .line{display:grid;grid-template-columns:1fr;gap:.1rem;width:auto;max-width:90%;margin:.8rem auto .8rem 0;padding:.75rem 1.25rem 1rem;background:var(--paper);border-radius:20px 20px 20px 6px;box-shadow:var(--shadow);text-align:left}
body[data-page=lesson] .line:hover{background:var(--paper);box-shadow:0 1px 2px rgba(38,64,92,.1),0 14px 28px -14px rgba(38,64,92,.3)}
body[data-page=lesson] .line .who{grid-column:1;padding:0;font:700 .95rem/1.4 var(--sans);color:var(--spk,var(--ink-soft));display:flex;align-items:center;gap:.45rem}
body[data-page=lesson] .line .who::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--spk,var(--ink-soft))}
body[data-page=lesson] .line .gr{grid-column:1;font-size:1.7rem;line-height:1.3}
body[data-page=lesson] .line .en{grid-column:1;margin-top:.2rem;padding-top:.5rem;border-top:1px dashed var(--line)}
body[data-page=lesson] .line.me{margin:.8rem 0 .8rem auto;background:var(--aegean-tint);border-radius:20px 20px 6px 20px}
body[data-page=lesson] .line.me:hover{background:var(--aegean-tint)}
.spk-sofia{--spk:var(--clay-deep)}.spk-alexis{--spk:var(--aegean-deep)}.spk-maria{--spk:var(--sage)}.spk-nikos{--spk:#8a6414}.spk-yiayia,.spk-eleni{--spk:var(--violet)}.spk-sam{--spk:var(--aegean-deep)}
:root[data-theme=dark] .spk-nikos{--spk:var(--honey)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .spk-nikos{--spk:var(--honey)}}
body[data-page=lesson] .scene{margin:1.2rem 0 1.2rem 0;text-align:center;font-size:1.05rem}

/* ── Home ── */
.hero-band{position:relative;overflow:hidden;background:linear-gradient(var(--sky-top),var(--sky-bot) 92%);border-bottom:0}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:1.5rem;align-items:center;padding-top:3.5rem;padding-bottom:0;min-height:34rem}
.hero-text{padding-bottom:4rem}
.hero h1{font:700 clamp(2.7rem,5vw,4.3rem)/1.03 var(--display);letter-spacing:-.012em;margin:0;color:var(--head)}
.hero .big{font:500 1.5rem/1.45 var(--display);color:var(--ink-soft);margin:1.4rem 0 0;max-width:30rem}
.hero .fine{color:var(--ink-soft);margin-top:1.3rem;font-size:1.05rem}
.hero-art{display:block;width:100%;height:auto;align-self:end;margin-bottom:-1px;overflow:visible}
.glow{fill:#fcd27a;opacity:0}
.glow.kitchen{opacity:.92}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .glow{fill:#f0b44c}}
:root[data-theme=dark] .glow{fill:#f0b44c}
@media(prefers-reduced-motion:no-preference){.glow:not(.kitchen){animation:lit 1.2s ease forwards;animation-delay:var(--d)}.glow.kitchen{animation:lit2 1.2s ease backwards;animation-delay:var(--d)}@keyframes lit{to{opacity:.92}}@keyframes lit2{from{opacity:0}}}
@media(prefers-reduced-motion:reduce){.glow:not(.kitchen){opacity:.92}}
@media(max-width:52rem){.hero{grid-template-columns:1fr;padding-top:2.4rem;min-height:0}.hero-text{padding-bottom:1rem}.hero-art{width:100%;max-width:32rem;margin:0 auto -1px}}
.lead2{font:500 1.3rem/1.5 var(--display);color:var(--ink-soft);max-width:38rem}
.page section{padding:3.2rem 0}
.page h2{font:700 clamp(1.9rem,4.2vw,2.6rem)/1.1 var(--display);margin:0 0 1.1rem}
.triptych{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;counter-reset:t}
.triptych li{counter-increment:t;position:relative;padding-top:4.6rem}
.triptych li::before{content:counter(t);position:absolute;top:0;left:0;font:700 4.6rem/1 var(--display);color:color-mix(in srgb,var(--honey) 80%,transparent)}
.triptych li::after{content:"";position:absolute;top:2.35rem;left:3.4rem;right:0;height:12px;background:var(--key) repeat-x left center;opacity:.7}
.triptych h3{margin-bottom:.4rem}.triptych p{margin:0;color:var(--ink-soft)}
@media(max-width:46rem){.triptych{grid-template-columns:1fr;gap:1.4rem}.triptych li{padding-top:0;padding-left:4rem}.triptych li::before{font-size:3.2rem}.triptych li::after{display:none}}
.cast{display:grid;gap:2.2rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin-top:2rem}
.who{display:flex;gap:1.1rem;align-items:flex-start}
.portrait{flex:none;width:4.6rem;height:4.6rem;border-radius:50%;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line)}
.who h3{margin:.1rem 0 .15rem}.who p{margin:0;color:var(--ink-soft);font-size:1.08rem}
.road{list-style:none;margin:1.6rem 0 0;padding:0}
.road li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.road li:last-child{border-bottom:1px solid var(--line)}
.road .t{font:700 1.5rem var(--display);color:var(--head)}
.road .m{color:var(--ink-soft)}
.road .soon{opacity:.6}
.know{display:grid;gap:1.6rem 3rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.know h3{margin:0 0 .2rem}.know p{margin:0;color:var(--ink-soft)}