/* Ananse's Phonics — teacher / classroom app */
@font-face { font-family: "Fredoka"; src: url(fonts/fredoka.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Andika"; src: url(fonts/andika-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Andika"; src: url(fonts/andika-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Ghanaian-language letters (ɛ, ɔ, ŋ) and IPA — only downloaded if a page uses them */
@font-face { font-family: "Andika"; src: url(fonts/andika-ext-400.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-024F, U+0250-02AF, U+1E00-1EFF; }

:root {
  --ink: #1B2559;
  --ink-soft: #4A5383;
  --sky: #BFE8F9;
  --sky-deep: #8CD3F0;
  --sun: #FFC21A;
  --palm: #149B57;
  --hibiscus: #E5412D;
  --paper: #FFFFFF;
  --mist: #EEF3FB;
  --class: var(--palm);
  --term: var(--sun);
  --term-bg: #FFF3C9;
  --display: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --read: "Andika", "Segoe UI", system-ui, sans-serif;
  --r-lg: 28px; --r-md: 18px; --r-sm: 12px;
  --lift: 0 6px 0 rgba(27, 37, 89, .16);
  --kente: repeating-linear-gradient(90deg, var(--sun) 0 22px, var(--palm) 22px 30px, var(--hibiscus) 30px 36px, var(--sun) 36px 50px, var(--ink) 50px 56px, var(--palm) 56px 64px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 18px/1.5 var(--read); color: var(--ink); background: var(--sky); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
h1[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kente { height: 10px; background: var(--kente); }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: .7rem 1.5rem;
  font: 600 1.15rem var(--display); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s; touch-action: manipulation; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-go { background: var(--sun); }
.btn-big { min-height: 76px; padding: 1rem 2.6rem; font-size: 1.7rem; box-shadow: 0 6px 0 var(--ink); }
.btn-quiet { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 5px; }
.btn-quiet:active { transform: none; }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- top bar & breadcrumb ---------- */
.bar { position: relative; z-index: 2; background: var(--sky); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2.5rem); }
.home-link { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 600 1.25rem var(--display); }
.home-link img { height: 40px; width: auto; display: block; }
.crumbs { font: 500 1.05rem var(--display); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.crumbs a { text-decoration: none; padding: .2rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.crumbs a:hover { background: #fff; }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { padding: .2rem .5rem; }

.screen { padding: 0 clamp(1rem, 3vw, 2.5rem) 3rem; max-width: 1400px; margin: 0 auto; }
.screen-title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: .6rem 0 1.6rem; letter-spacing: -.01em; }
.screen-title small { display: block; font: 500 1.2rem var(--read); color: var(--ink-soft); margin-top: .5rem; letter-spacing: 0; }

/* ---------- Kweku Ananse ---------- */
.ananse { position: relative; display: inline-block; line-height: 0; }
.ananse img { height: 100%; width: auto; display: block; user-select: none; -webkit-user-drag: none; }
.an-thread { position: absolute; left: 49%; bottom: 99%; width: 3px; height: 100vh; background: #9AA3C7; border-radius: 2px; }
.an-confetti { position: absolute; left: -22%; top: -10%; width: 144%; height: 118%; pointer-events: none; }

/* ---------- home ---------- */
.home { position: relative; min-height: calc(100vh - 10px); display: flex; flex-direction: column; overflow: hidden; }
.home-foot { margin-top: auto; }
.hero { flex: 1; }
.home .web { position: absolute; top: 10px; left: 0; width: min(46vw, 420px); color: rgba(255, 255, 255, .75); pointer-events: none; }
.home .web.right { left: auto; right: 0; transform: scaleX(-1); width: min(30vw, 260px); }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2rem; padding: 2rem clamp(1rem, 5vw, 5rem) 1rem; position: relative; }
.hero-title { font-size: clamp(3.6rem, 10vw, 8.5rem); line-height: .92; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.hero-title .l2 { display: block; color: var(--paper); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); }
.hero p { font-size: clamp(1.15rem, 2vw, 1.45rem); max-width: 34ch; margin: 1.4rem 0 2rem; color: var(--ink-soft); }
.hero-ananse { position: relative; height: min(64vh, 560px); display: flex; justify-content: center; }
.hero-ananse .ananse { height: 100%; animation: drop 1.4s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes drop { from { transform: translateY(-110%); } to { transform: none; } }
.ground { height: 110px; background: linear-gradient(var(--palm), var(--palm)) bottom / 100% 40px no-repeat,
  radial-gradient(60px 40px at 10% 72%, var(--palm) 98%, transparent) ,
  radial-gradient(90px 55px at 28% 72%, #1FB569 98%, transparent),
  radial-gradient(70px 45px at 55% 72%, var(--palm) 98%, transparent),
  radial-gradient(110px 60px at 80% 72%, #1FB569 98%, transparent),
  radial-gradient(60px 38px at 97% 72%, var(--palm) 98%, transparent); }

.quick { background: var(--paper); border-radius: var(--r-lg); padding: 1.3rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin: 0 clamp(1rem, 5vw, 5rem) 1.5rem; box-shadow: var(--lift); position: relative; }
.quick h2 { flex: 1 0 100%; font-size: 1.3rem; }
.quick label { display: flex; flex-direction: column; gap: .3rem; font: 600 1rem var(--display); flex: 1 1 160px; }
.quick select { min-height: 52px; font: 500 1.1rem var(--read); padding: .4rem .8rem; border: 3px solid var(--ink); border-radius: var(--r-sm); background: #fff; color: var(--ink); }
.offline-list { margin: 0 clamp(1rem, 5vw, 5rem) 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.offline-list a { text-decoration: none; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: .35rem .9rem; font: 500 1rem var(--display); }

/* ---------- choice tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); list-style: none; padding: 0; margin: 0; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .6rem; min-height: 340px;
  padding: 1.5rem; text-decoration: none; border-radius: var(--r-lg); background: var(--paper); border: 4px solid var(--ink);
  box-shadow: 0 10px 0 var(--ink); transition: transform .12s, box-shadow .12s; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 58%; background: var(--tile, var(--class)); }
.tile::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 12px; background: var(--kente); }
.tile:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 14px 0 var(--ink); }
.tile:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--ink); }
.tile .emblem { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 46%; max-width: 170px; }
.tile .name { position: relative; font: 700 clamp(2.4rem, 4.5vw, 3.4rem) var(--display); line-height: 1; }
.tile .sub { position: relative; font-size: 1.1rem; color: var(--ink-soft); }
.side-ananse { display: flex; align-items: flex-end; gap: 1rem; margin-top: 2rem; }
.side-ananse .ananse { height: 150px; flex: none; }
.bubble { background: var(--paper); border: 3px solid var(--ink); border-radius: 22px 22px 22px 4px; padding: .8rem 1.2rem; font: 500 1.2rem var(--display); max-width: 36ch; }

/* term themes */
.t1 { --term: var(--sun); --term-bg: #FFF3C9; }
.t2 { --term: #10A5A0; --term-bg: #D7F3EF; }
.t3 { --term: #F28C28; --term-bg: #FDE6CF; }

/* ---------- weeks ---------- */
.weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.8vw, 1.4rem); list-style: none; padding: 0; margin: 0; }
.week { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 190px; text-decoration: none; background: var(--paper);
  border: 3px solid var(--ink); border-radius: var(--r-md); box-shadow: 0 6px 0 var(--ink); overflow: hidden; transition: transform .1s; }
a.week:hover { transform: translateY(-3px); }
a.week:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.week .cover { aspect-ratio: 16 / 9; background: var(--term-bg); display: grid; place-items: center; overflow: hidden; border-bottom: 3px solid var(--ink); }
.week .cover img { width: 100%; height: 100%; object-fit: contain; }
.week .num { font: 700 clamp(2.4rem, 4vw, 3.4rem) var(--display); line-height: 1; color: var(--ink); }
.week .meta { padding: .6rem .9rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.week .wlabel { font: 600 1.15rem var(--display); }
.week .wtitle { font-size: .98rem; color: var(--ink-soft); line-height: 1.3; }
.focus-chip { align-self: flex-start; font: 600 1.05rem var(--read); background: var(--term); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: .05rem .55rem; }
.week.soon { border-style: dashed; box-shadow: none; background: rgba(255, 255, 255, .45); color: var(--ink-soft); }
.week.soon .cover { background: transparent; border-bottom-style: dashed; }
.week.soon .num { color: var(--ink-soft); opacity: .6; }
.week .offline-badge { position: absolute; top: .5rem; right: .5rem; background: var(--palm); color: #fff; font: 600 .85rem var(--display); border-radius: 999px; padding: .15rem .6rem; }
.term-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* ---------- welcome & done ---------- */
.stage-screen { min-height: calc(100vh - 90px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding: 1rem clamp(1rem, 5vw, 5rem) 3rem; }
.stage-screen > div:first-child { display: flex; justify-content: center; }
.stage-screen .ananse { height: min(62vh, 560px); }
.welcome-card h1 { margin-bottom: .6rem; font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: .98; letter-spacing: -.015em; }
.where { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0; }
.where span { font: 600 1.05rem var(--display); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: .2rem .8rem; }
.welcome-card .msg { font-size: clamp(1.2rem, 2vw, 1.55rem); max-width: 32ch; margin: 0 0 1.6rem; }
.welcome-card .focus-big { font: 700 clamp(2rem, 4vw, 3rem) var(--read); display: inline-block; background: var(--sun); border: 3px solid var(--ink); border-radius: 16px; padding: .1rem 1rem; margin-bottom: 1.2rem; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.offline-box { margin-top: 2rem; padding: 1rem 1.2rem; background: rgba(255, 255, 255, .7); border-radius: var(--r-md); max-width: 34rem; display: flex; flex-direction: column; gap: .6rem; }
.offline-box .state { font: 600 1.05rem var(--display); }
.offline-box .state.ok { color: #0E6B3C; }
.offline-box progress { width: 100%; height: 10px; }
.week-hop { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.done .ananse { animation: bounce 1.2s ease-out 1 both; }
@keyframes bounce { 0% { transform: translateY(30px) scale(.9); } 55% { transform: translateY(-14px) scale(1.03); } 100% { transform: none; } }

/* ---------- flipbook ---------- */
body.lesson { background: var(--mist); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 460px); gap: 1.2rem; padding: 0 clamp(.8rem, 2vw, 1.6rem) 1rem; align-items: start; }
.book.notes-off { grid-template-columns: minmax(0, 1fr); }
.stage-wrap { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.stage { position: relative; height: calc(100vh - 205px); min-height: 320px; background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 8px 0 var(--class); overflow: hidden; touch-action: pan-y; display: grid; place-items: center; }
.stage .pic { position: absolute; inset: 14px; display: flex; align-items: center; justify-content: center; }
.stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 10px; }
.stage .pic.in-next { animation: inNext .32s ease-out both; }
.stage .pic.in-prev { animation: inPrev .32s ease-out both; }
@keyframes inNext { from { opacity: 0; transform: translateX(6%) rotateY(-8deg); } to { opacity: 1; transform: none; } }
@keyframes inPrev { from { opacity: 0; transform: translateX(-6%) rotateY(8deg); } to { opacity: 1; transform: none; } }
.stage .loading { font: 500 1.2rem var(--display); color: var(--ink-soft); }
.stage .missing { text-align: center; padding: 2rem; font: 500 1.3rem var(--display); }

.controls { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.controls .btn { min-width: 150px; }
.progress { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.count { font: 600 1.25rem var(--display); margin: 0; display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.ptitle { font: 500 1.05rem var(--read); color: var(--ink-soft); }
.ptitle:empty { display: none; }
/* Krobo-bead progress string */
.beads { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; padding: 6px 4px; list-style: none; margin: 0;
  background: linear-gradient(var(--ink-soft), var(--ink-soft)) center / 100% 2px no-repeat; scrollbar-width: none; }
.beads button { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; cursor: pointer; padding: 0; }
.beads button.seen { background: var(--bead, var(--sun)); }
.beads li:nth-child(4n+1) { --bead: var(--sun); } .beads li:nth-child(4n+2) { --bead: var(--palm); }
.beads li:nth-child(4n+3) { --bead: var(--hibiscus); } .beads li:nth-child(4n+4) { --bead: #5B3FD1; }
.beads button[aria-current] { width: 34px; height: 34px; background: var(--bead, var(--sun)); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }

.tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
body.lesson .bar { padding-top: .5rem; padding-bottom: .5rem; background: var(--mist); }
.tools .btn { min-height: 48px; font-size: 1rem; padding: .45rem 1.1rem; box-shadow: 0 3px 0 var(--ink); }

.notes { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 1.1rem;
  max-height: calc(100vh - 110px); overflow-y: auto; position: sticky; top: .8rem; }
.notes h2 { font-size: 1.05rem; letter-spacing: .06em; display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.notes h2::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--c); border: 2px solid var(--ink); }
.note { --c: var(--sun); }
.note p { margin: 0 0 .6em; }
.note p:last-child { margin: 0; }
.n-say { --c: var(--ink); }
.n-say .txt { font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.5; }
.n-tip { --c: var(--sun); background: #FFF6DB; margin: 0 -.5rem; padding: .7rem .8rem; border-radius: var(--r-sm); }
.n-ask { --c: var(--hibiscus); }
.n-ask .txt { font-size: 1.2rem; }
.n-do { --c: var(--palm); }
.n-focus { --c: #5B3FD1; }
.n-focus .txt { font: 700 2.2rem var(--read); }
.n-vocab { --c: #F28C28; }
.vocab { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.vocab li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.vocab strong { font: 700 1.35rem var(--read); background: #FDE6CF; border: 2px solid var(--ink); border-radius: 10px; padding: 0 .55rem; }
.vocab span { font-size: 1.05rem; color: var(--ink-soft); }
.notes-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-bottom: 2px dashed #C9CFE6; padding-bottom: .6rem; }
.notes-head strong { font: 600 1.1rem var(--display); }

.drawer { position: fixed; inset: auto 0 0; z-index: 30; background: var(--paper); border-top: 4px solid var(--ink); padding: 1rem clamp(1rem, 3vw, 2rem) 1.4rem;
  box-shadow: 0 -10px 40px rgba(27, 37, 89, .25); max-height: 50vh; overflow: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.thumbs button { width: 100%; background: var(--mist); border: 3px solid transparent; border-radius: var(--r-sm); padding: .4rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.thumbs button[aria-current] { border-color: var(--ink); background: #FFF3C9; }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.thumbs span { font: 600 .95rem var(--display); }

.banner { margin: 0 clamp(1rem, 3vw, 2.5rem) .8rem; padding: .6rem 1rem; border-radius: var(--r-sm); background: var(--ink); color: #fff; font: 500 1rem var(--display); }
.banner.warn { background: #8A5A00; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff; padding: .8rem 1.3rem; border-radius: 14px; font: 500 1.05rem var(--display); max-width: 92vw; }

/* ---------- presentation mode ---------- */
body.presenting { background: var(--ink); }
body.presenting .bar, body.presenting .banner, body.presenting .hide-present { display: none !important; }
body.presenting .book { padding: 0; gap: 0; height: 100vh; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 440px); }
body.presenting .book.notes-off { grid-template-columns: minmax(0, 1fr); }
body.presenting .stage-wrap { height: 100vh; gap: 0; display: flex; flex-direction: column; }
body.presenting .stage { height: auto; flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--ink); }
body.presenting .stage .pic { inset: 1.2vh 1.2vw; }
body.presenting .stage img { border-radius: 6px; }
body.presenting .controls { padding: .5rem 1rem .7rem; grid-template-columns: auto 1fr auto auto; color: #fff; }
body.presenting .ptitle { color: #C9D0F0; }
body.presenting .controls .btn { min-height: 50px; font-size: 1.05rem; }
.present-tools { gap: .5rem; }
body.presenting .present-tools .btn { background: transparent; color: #fff; border-color: #6D77B3; box-shadow: none; }
body.presenting .count { color: #fff; }
body.presenting .notes { max-height: 100vh; height: 100vh; border-radius: 0; border: 0; border-left: 6px solid var(--sun); top: 0; }
body.presenting.idle { cursor: none; }
.present-only { display: none; }
body.presenting .present-only { display: inline-flex; }

/* ---------- responsive ---------- */
@media (max-width: 1100px), (orientation: portrait) {
  .book, body.presenting .book { grid-template-columns: minmax(0, 1fr); }
  .notes { position: static; max-height: none; }
  .stage { height: min(70vh, 78vw); }
  body.presenting .book { height: auto; min-height: 100vh; }
  body.presenting .stage-wrap { height: 100vh; }
  body.presenting .notes { height: auto; border-left: 0; border-top: 6px solid var(--sun); }
}
@media (max-width: 900px) {
  .hero, .stage-screen { grid-template-columns: 1fr; text-align: center; }
  .hero p, .welcome-card .msg { margin-left: auto; margin-right: auto; }
  .hero-ananse { height: 38vh; order: -1; }
  .stage-screen .ananse { height: 34vh; }
  .welcome-card .row, .where, .week-hop { justify-content: center; }
  .offline-box { margin-left: auto; margin-right: auto; }
  .weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 250px; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .progress { grid-column: 1 / -1; grid-row: 1; }
  .controls .btn { min-width: 0; }
  .bar { flex-wrap: wrap; }
  .home .web { width: 60vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}