/* Heritage Lab tool renders — shared by the showcase deck and the website visuals.
   Every render lives inside a .hl-stage and scales with the stage's font-size. */
.hl-stage {
  --r-ink: #2A2420; --r-soft: #5E554C; --r-muted: #9C9384; --r-line: #D9D0BB; --r-card: #FBF8F0;
  --r-green: #3F6B2A; --r-green-soft: #E6EED8; --r-yellow: #F6C928; --r-teal: #2E8F7E; --r-blue: #1F4FD1; --r-brown: #6B3E2A;
  --r-syl: "Noto Sans Canadian Aboriginal", "Inter", sans-serif;
  --r-sans: "Inter", "Noto Sans Canadian Aboriginal", system-ui, sans-serif;
  --r-serif: "Fraunces", Georgia, serif;
  position: relative; overflow: hidden; border-radius: 28px; background: var(--r-card); color: var(--r-ink);
  font-family: var(--r-sans); line-height: 1.4;
  box-shadow: 0 40px 90px -40px rgba(42,36,32,.5), 0 0 0 1px rgba(42,36,32,.07);
}
.hl-stage * { box-sizing: border-box; margin: 0; }
.hl-stage .syl { font-family: var(--r-syl); }
.hl-caret { display: inline-block; width: 2px; height: 1.1em; background: currentColor; vertical-align: -.15em; margin-left: 2px; animation: hl-blink 1s steps(1) infinite; }
@keyframes hl-blink { 50% { opacity: 0; } }

/* ---------- Read-Along ---------- */
.r-ra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; }
.r-ra .art { background: #fff center/contain no-repeat; height: 100%; min-height: 12em; transition: opacity .35s; }
.r-ra .side { overflow: hidden; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.4em 1.6em; gap: .9em; background: #FFFDF7; border-left: 1px solid var(--r-line); }
.r-ra .sylrow { font-family: var(--r-syl); font-size: 2.3em; font-weight: 600; line-height: 1.3; }
.r-ra .romrow { font-size: 1.15em; font-style: italic; color: var(--r-soft); }
.r-ra .w { display: inline-block; margin-right: .3em; }
.r-ra .u { color: #C3B9A6; border-radius: .12em; transition: color .08s, background .08s; }
.r-ra .u.past { color: var(--r-ink); }
.r-ra .u.on { color: var(--r-ink); background: var(--r-yellow); }
.r-ra .romrow .u.past, .r-ra .romrow .u.on { color: var(--r-soft); }
.r-ra .voice { display: flex; align-items: center; gap: .6em; font-size: .8em; }
.r-ra .voice .dot { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--r-yellow); display: grid; place-items: center; flex: none; }
.r-ra .voice .dot svg { width: 1.1em; }
.r-ra .voice b { display: block; font-size: 1.1em; }
.r-ra .voice span { color: var(--r-soft); }
.r-ra .bar { height: 6px; background: var(--r-line); border-radius: 3px; overflow: hidden; }
.r-ra .bar i { display: block; height: 100%; width: 0; background: var(--r-ink); }
.r-ra.speaking .voice .dot { animation: hl-pulse 1s ease-in-out infinite; }
@keyframes hl-pulse { 50% { box-shadow: 0 0 0 .5em rgba(246,201,40,.3); } }

/* ---------- Dictionary ---------- */
.r-dict { padding: 1.8em; display: flex; flex-direction: column; gap: 1.1em; height: 100%; justify-content: center; }
.r-search { display: flex; align-items: center; gap: .7em; background: #fff; border: 2px solid var(--r-line); border-radius: 999px; padding: .65em 1.2em; font-size: 1.2em; }
.r-search svg { width: 1em; height: 1em; flex: none; color: var(--r-green); }
.r-voices { display: flex; gap: .45em; flex-wrap: wrap; font-size: .72em; }
.r-voices span { padding: .35em .9em; border-radius: 999px; border: 1px solid var(--r-line); color: var(--r-soft); transition: all .3s; }
.r-voices span.on { background: var(--r-ink); color: #F4EFE2; border-color: var(--r-ink); }
.r-entry { background: #fff; border-radius: 20px; padding: 1.2em 1.4em; display: flex; align-items: center; gap: 1.1em; border: 1px solid var(--r-line); opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; min-height: 6.4em; }
.r-entry.show { opacity: 1; transform: none; }
.r-entry .play { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--r-ink); display: grid; place-items: center; flex: none; }
.r-entry .play svg { width: .9em; color: #fff; }
.r-entry .syl { font-size: 2.2em; font-weight: 600; line-height: 1.1; }
.r-entry .rom { font-size: 1.1em; font-weight: 600; color: var(--r-green); }
.r-entry .def { color: var(--r-soft); font-size: .92em; }
.r-wave { display: flex; gap: 4px; align-items: center; height: 2em; margin-left: auto; }
.r-wave i { width: 5px; border-radius: 3px; background: var(--r-teal); height: 20%; }
.r-entry.speaking .r-wave i { animation: hl-wave .9s ease-in-out infinite; }
.r-wave i:nth-child(2) { animation-delay: .1s } .r-wave i:nth-child(3) { animation-delay: .2s } .r-wave i:nth-child(4) { animation-delay: .3s } .r-wave i:nth-child(5) { animation-delay: .15s } .r-wave i:nth-child(6) { animation-delay: .05s }
@keyframes hl-wave { 0%,100% { height: 20%; } 50% { height: 100%; } }

/* ---------- Noun Builder ---------- */
.r-nb { padding: 1.8em; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.3em; }
.r-nb .step { font-size: .7em; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); font-weight: 600; min-height: 1.4em; }
.r-nb .row { display: flex; align-items: center; gap: .6em; justify-content: center; min-height: 6.4em; }
.r-piece { border-radius: 18px; padding: .6em 1em .7em; text-align: center; border: 2px solid; opacity: 0; transform: translateY(-40px) scale(.9); transition: all .55s cubic-bezier(.2,.8,.2,1.2); min-width: 5em; }
.r-piece.in { opacity: 1; transform: none; }
.r-piece .s { font-family: var(--r-syl); font-size: 1.9em; font-weight: 700; line-height: 1.15; }
.r-piece .r { font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
.r-piece .g { font-size: .6em; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: .3em; }
.r-piece.base { background: #EDF2FF; border-color: #A9BEF5; color: var(--r-blue); }
.r-piece.ext { background: #E7F7EF; border-color: #8FD6B0; color: #0E7A48; }
.r-piece.end { background: #FFF7DB; border-color: #F2D774; color: #9A5B00; }
.r-op { font-size: 1.6em; color: var(--r-muted); opacity: 0; transition: opacity .4s; }
.r-op.in { opacity: 1; }
.r-nb .result { text-align: center; opacity: 0; transform: scale(.85); transition: all .6s cubic-bezier(.2,.8,.2,1.2); min-height: 4.6em; }
.r-nb .result.in { opacity: 1; transform: none; }
.r-nb .result .s { font-family: var(--r-syl); font-weight: 700; font-size: 4em; line-height: 1.05; }
.r-nb .result .r { font-size: 1.5em; font-weight: 600; }
.r-nb .result .m { color: var(--r-soft); }
.c-base { color: var(--r-blue); } .c-ext { color: #0E7A48; } .c-end { color: #C07A00; }

/* ---------- Script Converter ---------- */
.r-conv { background: var(--r-green-soft); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .5em; padding: 1.4em; }
.r-conv .box { flex: none; background: #fff; border-radius: 14px; padding: .55em .9em; text-align: center; min-height: 2.6em; display: grid; place-items: center; }
.r-conv .a { font-family: var(--r-syl); font-size: 1.55em; font-weight: 600; color: var(--r-green); line-height: 1.3; }
.r-conv .b { font-size: 1.3em; font-weight: 600; }
.r-conv .arrow { text-align: center; font-size: 1.4em; color: var(--r-muted); }
.r-conv .lbl { display: flex; justify-content: space-between; font-size: .65em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--r-green); }

/* ---------- Document Scanner ---------- */
.r-scan { background: #EDE6D3; height: 100%; display: flex; align-items: center; justify-content: center; gap: 1.4em; padding: 1.4em; }
.r-scan .doc { width: 38%; aspect-ratio: 3/4; background: #fff; border-radius: 8px; box-shadow: 0 10px 25px -10px rgba(0,0,0,.35); padding: 12% 9%; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.r-scan .doc i { display: block; height: 6%; border-radius: 3px; background: #D5CCB9; transition: background .25s; }
.r-scan .doc i.read { background: var(--r-teal); }
.r-scan .beam { position: absolute; left: 0; right: 0; height: 4px; background: var(--r-teal); box-shadow: 0 0 18px 4px rgba(46,143,126,.55); top: 0; }
.r-scan .out { display: flex; flex-direction: column; gap: .45em; }
.r-scan .out span { background: #fff; border-radius: 999px; padding: .25em .9em; font-weight: 600; font-size: .95em; opacity: .3; transition: opacity .3s, transform .3s; }
.r-scan .out span.on { opacity: 1; transform: translateX(5px); }

/* ---------- Translate ---------- */
.r-tr { background: #E3EEEA; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 1.4em; }
.r-tr .lang { display: flex; gap: .4em; align-items: center; justify-content: center; }
.r-tr .lang span { font-size: .72em; font-weight: 600; background: #fff; border-radius: 999px; padding: .2em .8em; }
.r-tr .bubble { flex: none; background: #fff; border-radius: 16px; padding: .6em 1em; font-size: 1em; min-height: 2.5em; line-height: 1.3; }
.r-tr .dots { display: inline-flex; gap: 6px; padding: .4em 0; }
.r-tr .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--r-teal); animation: hl-bounce 1s infinite; }
.r-tr .dots i:nth-child(2) { animation-delay: .15s } .r-tr .dots i:nth-child(3) { animation-delay: .3s }
@keyframes hl-bounce { 0%,100% { transform: translateY(0); opacity: .4 } 50% { transform: translateY(-5px); opacity: 1 } }
.r-tr .res { font-size: 1.2em; font-weight: 600; color: var(--r-teal); }
.r-tr .note { font-size: .62em; color: var(--r-soft); text-align: center; }

/* ---------- Documentation ---------- */
.r-docs { height: 100%; display: grid; grid-template-columns: 38% 1fr; background: #fff; }
.r-docs nav { background: #F6F3EA; border-right: 1px solid var(--r-line); padding: 1.2em 1em; display: flex; flex-direction: column; gap: .3em; font-size: .78em; }
.r-docs nav h4 { font-size: .75em; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); margin: .8em 0 .2em; }
.r-docs nav a { padding: .35em .7em; border-radius: 8px; color: var(--r-soft); transition: all .3s; }
.r-docs nav a.on { background: var(--r-green-soft); color: var(--r-green); font-weight: 600; }
.r-docs main { padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: .7em; }
.r-docs main h3 { font-family: var(--r-serif); font-weight: 600; font-size: 1.5em; line-height: 1.15; }
.r-docs main p { color: var(--r-soft); font-size: .9em; }
.r-docs main .ln { height: .55em; border-radius: 3px; background: #ECE6D8; }
.r-docs main .fade { transition: opacity .35s; }

/* ---------- Game (Ice Float Words) ---------- */
.r-game { height: 100%; background: linear-gradient(135deg, #2B83B6, #6CC3E4); position: relative; overflow: hidden; }
.r-game .card { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); background: #fff; border: 4px solid #F6C928; border-radius: 22px; padding: .8em 1.4em .7em; text-align: center; min-width: 52%; z-index: 2; }
.r-game .slots { display: flex; gap: .45em; justify-content: center; }
.r-game .slot { width: 2.4em; height: 2.4em; border: 2px dashed #F2A56A; border-radius: 12px; display: grid; place-items: center; font-family: var(--r-syl); font-size: 1.1em; font-weight: 700; background: #FFF8F1; transition: all .3s; }
.r-game .slot.fill { border: 2.5px solid #F07A1A; background: #fff; }
.r-game .label { color: #0E6E62; font-weight: 700; margin-top: .4em; }
.r-game .label span { color: var(--r-muted); font-weight: 400; margin: 0 .3em; }
.r-game .floe { position: absolute; width: 4.2em; height: 4.2em; display: grid; place-items: center; text-align: center; line-height: 1; transition: transform .35s, opacity .35s; animation: hl-bob 4s ease-in-out infinite; }
.r-game .floe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-game .floe b { position: relative; font-family: var(--r-syl); font-size: 1.5em; color: #1E293B; }
.r-game .floe small { position: relative; display: block; font-size: .8em; color: #475569; font-style: italic; margin-top: .15em; }
.r-game .floe.hit { transform: scale(1.25); opacity: 0; }
.r-game .floe.tap { transform: scale(.9); }
@keyframes hl-bob { 50% { translate: 0 -8px; rotate: 3deg; } }
.r-game .win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); background: #fff; border-radius: 22px; padding: .8em 1.6em; text-align: center; opacity: 0; transition: all .45s cubic-bezier(.2,.8,.2,1.2); z-index: 3; }
.r-game .win.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.r-game .win .s { font-family: var(--r-syl); font-size: 2.6em; font-weight: 700; color: var(--r-ink); }
.r-game .win .r { color: var(--r-soft); font-style: italic; }
.r-game .win .ok { color: #0E6E62; font-weight: 700; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Ojitodan ---------- */
.r-oji { background: #FFF9EE; height: 100%; display: flex; flex-direction: column; }
.r-oji .head { background: var(--r-brown); color: #F6D98B; padding: .8em 1.4em; font-family: var(--r-serif); font-weight: 600; font-size: 1.05em; display: flex; justify-content: space-between; align-items: center; }
.r-oji .head small { font-family: var(--r-sans); font-size: .6em; letter-spacing: .12em; color: #E8C98A; }
.r-oji .body { padding: 1.4em 1.6em 1.6em; flex: 1; display: flex; flex-direction: column; gap: 1em; }
.r-oji .concept { display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap; }
.r-oji .concept .lbl { font-size: .6em; letter-spacing: .14em; text-transform: uppercase; color: var(--r-brown); font-weight: 700; width: 100%; }
.r-oji .concept .fr { font-family: var(--r-serif); font-size: 2.2em; line-height: 1.1; }
.r-oji .concept .en { font-size: 1.1em; color: var(--r-soft); }
.r-oji .list { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; }
.r-oji .item { background: #fff; border: 1px solid #EAD9B5; border-radius: 16px; padding: .7em 1em; opacity: 0; transform: translateY(14px); transition: all .45s; }
.r-oji .item.in { opacity: 1; transform: none; }
.r-oji .item .word { font-family: var(--r-serif); font-weight: 600; font-size: 1.7em; color: var(--r-brown); line-height: 1.1; }
.r-oji .item .com { font-size: .66em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8B6A3F; margin-top: .2em; }

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

/* ---------- Exercise: Match word and meaning ---------- */
.r-ex { height: 100%; padding: 1.5em 1.7em; display: flex; flex-direction: column; gap: .7em; background: #FFFDF7; }
.r-ex .top { display: flex; justify-content: space-between; align-items: center; font-size: .75em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--r-soft); }
.r-ex .xp { position: relative; background: var(--r-ink); color: #fff; border-radius: 999px; padding: .3em .9em; letter-spacing: .04em; }
.r-ex .plus { position: absolute; right: 0; top: -1.4em; color: #0E7A48; font-weight: 800; animation: hl-float .5s ease-out forwards; }
@keyframes hl-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } }
.r-ex .hint { color: var(--r-soft); font-size: .85em; }
.r-ex .cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; min-height: 0; }
.r-ex .words, .r-ex .means { display: grid; grid-template-rows: repeat(6, 1fr); gap: .45em; }
.r-ex .w, .r-ex .m { background: #fff; border: 2px solid var(--r-line); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: .6em; transition: all .25s; }
.r-ex .w .syl { font-size: 1.35em; font-weight: 700; }
.r-ex .w small { font-size: .8em; color: var(--r-soft); }
.r-ex .m { font-size: 1.05em; font-weight: 600; }
.r-ex .sel { border-color: var(--r-yellow); box-shadow: 0 0 0 3px rgba(246,201,40,.35); transform: scale(1.03); }
.r-ex .ok { border-color: #34A36B; background: #E7F7EF; box-shadow: none; transform: none; }
.r-ex .done { opacity: .45; }

/* ---------- Exercise: Join the pieces ---------- */
.r-join { height: 100%; padding: 1.1em 1.5em; display: flex; flex-direction: column; gap: .55em; background: #FFFDF7; }
.r-join .top { display: flex; justify-content: space-between; align-items: center; font-size: .75em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--r-soft); }
.r-join .xp { background: var(--r-ink); color: #fff; border-radius: 999px; padding: .3em .9em; letter-spacing: .04em; }
.r-join .prompt { font-size: .9em; color: var(--r-soft); }
.r-join .pieces { display: flex; align-items: center; gap: .6em; }
.r-join .pc { background: #fff; border: 2px solid var(--r-line); border-radius: 14px; padding: .35em 1em; text-align: center; }
.r-join .pc b { display: block; font-size: 1.4em; }
.r-join .pc small { color: var(--r-soft); font-size: .75em; }
.r-join .plus { color: var(--r-muted); font-size: 1.4em; }
.r-join .answer { display: flex; gap: .6em; }
.r-join .input { flex: 1; background: #fff; border: 2.5px solid var(--r-line); border-radius: 14px; padding: .45em .9em; font-size: 1.5em; font-weight: 600; letter-spacing: .02em; transition: border-color .2s; }
.r-join .check { border: 0; border-radius: 14px; background: var(--r-teal); color: #fff; font-weight: 700; padding: 0 1.2em; font-size: 1em; transition: transform .15s; }
.r-join .check.press { transform: scale(.94); }
.r-join.bad .input { border-color: #E07A2F; animation: hl-shake .35s; }
.r-join.good .input { border-color: #34A36B; }
@keyframes hl-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.r-join .live { font-size: 1.4em; font-weight: 700; color: var(--r-green); min-height: 1.2em; line-height: 1.2; }
.r-join .fb { border-radius: 14px; padding: 0; min-height: 0; opacity: 0; transition: opacity .3s; }
.r-join .fb.bad, .r-join .fb.good { opacity: 1; padding: .7em 1em; }
.r-join .fb.bad { background: #FFF1E4; color: #8A3B00; }
.r-join .fb.good { background: #E7F7EF; color: #0E5B38; }
.r-join .fb b { display: block; }
.r-join .fb span { font-size: .9em; }
.r-join .merge { display: flex; align-items: baseline; gap: .15em; font-size: 1.3em; margin-top: .2em; flex-wrap: wrap; }
.r-join .merge s { color: #C0392B; opacity: .7; }
.r-join .merge ins { color: #0E7A48; text-decoration: none; font-weight: 800; }
.r-join .merge em { font-style: normal; margin: 0 .4em; color: var(--r-muted); }
.r-join .merge strong { margin-right: .4em; }