:root { --ink: #252321; --cream: #f6f1e8; --coral: #e86f51; --sage: #83967d; --gold: #e5b85c; --line: rgba(37,35,33,.16); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
.presentation { min-height: 100vh; overflow: hidden; position: relative; }
.topbar { align-items: center; display: flex; height: 92px; justify-content: space-between; padding: 0 6vw; position: absolute; top: 0; width: 100%; z-index: 5; }
.brand { align-items: center; display: flex; font-size: 12px; font-weight: 700; gap: 10px; letter-spacing: .16em; text-decoration: none; }
.brand-mark { align-items: center; background: var(--coral); border-radius: 50%; color: var(--cream); display: flex; font-family: serif; font-size: 20px; height: 37px; justify-content: center; width: 37px; }
.lesson-label, .progress-wrap, .eyebrow, .hero-caption, .scroll-note { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; }
.lesson-label { color: #8d877d; }.lesson-label span { margin: 0 10px; }
.progress-wrap { align-items: center; display: flex; gap: 14px; }.progress { background: var(--line); height: 2px; width: 90px; }.progress span { background: var(--coral); display: block; height: 100%; transition: width .4s ease; width: 16.66%; }
.slide { display: none; min-height: 100vh; padding: 150px 10vw 130px; position: relative; }.slide.is-active { display: block; animation: appear .55s ease both; }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.intro-slide { align-items: center; display: none; gap: 8vw; grid-template-columns: 1fr 1fr; }.intro-slide.is-active { display: grid; }
.eyebrow { align-items: center; color: var(--coral); display: flex; gap: 9px; margin: 0 0 27px; }.eyebrow-dot { background: var(--coral); border-radius: 50%; display: inline-block; height: 6px; width: 6px; }
h1, h2 { font-family: "Playfair Display", serif; font-size: clamp(52px, 7vw, 96px); font-weight: 500; letter-spacing: -.06em; line-height: .9; margin: 0; } h2 { font-size: clamp(48px, 6vw, 82px); } em { color: var(--coral); font-style: italic; }
.intro-description, .section-heading > p:last-child, .finish-slide > p { color: #716c64; font-size: 16px; line-height: 1.6; max-width: 340px; }
.meal-slide { background: #efe4d8; }.meal-slide:nth-of-type(3) { background: #e1e8dc; }.meal-slide:nth-of-type(4) { background: #f1d8c9; }.gaishoku-slide { background: #d8dcd8; }.misc-slide { background: #ece2cd; }.misc-slide .vocab-card { display: flex; flex-direction: column; }.meal-content { max-width: 1040px; margin: auto; position: relative; }.meal-heading { align-items: end; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 40px; position: relative; z-index: 1; }.meal-heading .eyebrow { grid-column: 1 / -1; }.meal-heading h2 { font-size: clamp(48px, 6.5vw, 84px); }.section-title { cursor: pointer; outline: none; }.section-title:focus-visible { outline: 2px solid var(--coral); outline-offset: 8px; }.section-title ruby { ruby-position: over; }.section-title rt { color: var(--coral); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .05em; }.title-translation { color: var(--coral); display: block; font-family: "DM Sans", sans-serif; font-size: 15px; font-style: normal; font-weight: 600; letter-spacing: 0; margin-top: 16px; opacity: 0; transform: translateY(5px); transition: opacity .25s, transform .25s; }.section-title:hover .title-translation, .section-title.is-revealed .title-translation { opacity: 1; transform: translateY(0); }.meal-subtitle { font-family: "DM Mono", monospace; font-size: 13px; margin: 0 0 12px; }.interaction { align-items: center; color: #716c64; display: flex; font-family: "DM Mono", monospace; font-size: 10px; gap: 18px; justify-content: flex-end; margin-top: 25px; text-transform: uppercase; }.interaction-count { color: var(--coral); }
.environment { border-radius: 3px; height: 115px; overflow: hidden; position: absolute; right: 0; top: 5px; transform: rotate(2deg); width: 250px; }.environment-label { color: rgba(37,35,33,.55); font-family: "DM Mono", monospace; font-size: 9px; left: 17px; position: absolute; text-transform: uppercase; top: 15px; z-index: 1; }.environment-sun { background: var(--gold); border-radius: 50%; height: 64px; position: absolute; right: 26px; top: 18px; width: 64px; }.environment-table { background: rgba(37,35,33,.12); bottom: -20px; height: 48px; left: -8px; position: absolute; transform: rotate(-4deg); width: 115%; }.environment-cup { bottom: 12px; font-size: 28px; left: 30px; position: absolute; z-index: 1; }.environment-produce { background: #c8d7a9; }.environment-produce .environment-sun { background: #f1d17e; }.environment-produce .environment-table { background: #78915b; }.environment-breakfast { background: #f3c979; }.environment-breakfast .environment-table { background: #b67855; }.environment-lunch { background: #b8cda7; }.environment-lunch .environment-sun { background: #f4d98d; }.environment-lunch .environment-table { background: #7b9b72; }.environment-dinner { background: #c78970; }.environment-dinner .environment-sun { background: #e9b15b; }.environment-dinner .environment-table { background: #765048; }.environment-misc { background: #d8c9a4; }.environment-misc .environment-sun { background: #f0dca6; }.environment-misc .environment-table { background: #9c8555; }.environment-gaishoku { background: #9babb0; }.environment-gaishoku .environment-sun { background: #e4d59f; }.environment-gaishoku .environment-table { background: #4e5d64; }
.primary-button { align-items: center; background: var(--ink); border: 0; border-radius: 30px; color: var(--cream); display: inline-flex; font-size: 13px; justify-content: center; line-height: 1; margin-top: 23px; padding: 16px 23px; transition: background .2s, transform .2s; }.primary-button:hover { background: var(--coral); transform: translateY(-2px); }.primary-button span { display: block; font-size: 18px; margin-left: 20px; transform: translateY(1px); }
.hero-food { align-items: center; display: flex; height: 490px; justify-content: center; position: relative; }.sun { background: var(--gold); border-radius: 50%; height: 260px; position: absolute; right: 11%; top: 8%; width: 260px; }.bowl { background: var(--coral); border-radius: 0 0 160px 160px; bottom: 93px; height: 170px; position: absolute; transform: rotate(-8deg); width: 305px; }.bowl::after { background: var(--ink); border-radius: 50%; content: ""; height: 27px; left: 18px; position: absolute; top: -8px; width: 270px; }.bowl-line { border-top: 2px solid rgba(246,241,232,.5); left: 52px; position: absolute; top: 57px; transform: rotate(-2deg); width: 200px; }.bowl-rice { background: var(--cream); border-radius: 50%; color: var(--ink); font-family: serif; font-size: 29px; padding: 17px 24px; position: absolute; top: 194px; transform: rotate(-8deg); z-index: 1; }.steam { border-left: 2px solid var(--sage); border-radius: 50%; height: 95px; position: absolute; top: 110px; transform: rotate(13deg); width: 35px; }.steam-one { margin-left: 45px; }.steam-two { margin-left: 125px; transform: rotate(-13deg); }.grain { color: var(--coral); font-size: 28px; position: absolute; }.grain-one { left: 7%; top: 23%; }.grain-two { bottom: 13%; right: 7%; }.hero-caption { bottom: 33px; color: #8d877d; position: absolute; right: 9%; }.scroll-note { bottom: 35px; color: #8d877d; left: 6vw; position: absolute; }.scroll-note span { color: var(--coral); font-size: 18px; margin-right: 9px; }
.vocab-grid { display: grid; gap: 14px; grid-template-columns: repeat(var(--cols, 5), 1fr); position: relative; z-index: 2; }.vocab-card { background: #e9d8c9; border: 0; min-height: 205px; padding: 18px; position: relative; text-align: left; transition: transform .2s, background .2s; }.vocab-card:nth-child(2n) { background: #d2dfcf; }.vocab-card:nth-child(3n) { background: #f0cdbd; }.vocab-card:hover { transform: translateY(-5px); }.vocab-card.is-seen { background: var(--ink); color: var(--cream); transform: translateY(-5px) rotate(-2deg); }.card-index { color: #8d877d; font-family: "DM Mono", monospace; font-size: 10px; }.is-seen .card-index, .is-seen .card-english { color: #bdb8af; }.card-japanese { display: block; font-family: serif; font-size: 26px; letter-spacing: -.02em; margin-top: 14px; }.card-bottom { bottom: 18px; display: flex; flex-direction: column; gap: 5px; left: 18px; position: absolute; right: 18px; }.card-english { color: #716c64; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }.is-seen .card-english { opacity: 1; transform: translateY(0); }.card-check { border: 1px solid currentColor; border-radius: 50%; bottom: 18px; display: none; font-size: 11px; height: 20px; line-height: 18px; position: absolute; right: 18px; text-align: center; width: 20px; }.is-seen .card-check { display: block; }
.single-word-slide { background: var(--coral); color: var(--cream); padding-left: 19vw; padding-top: 24vh; }.single-word-slide .eyebrow { color: var(--cream); }.single-word-slide .eyebrow-dot { background: var(--cream); }.big-word { font-family: serif; font-size: clamp(100px, 18vw, 270px); letter-spacing: -.08em; line-height: .9; }.definition { font-size: 25px; margin: 0; }.example { border-left: 1px solid rgba(246,241,232,.55); bottom: 17vh; display: flex; flex-direction: column; gap: 7px; left: 19vw; padding-left: 18px; position: absolute; }.example span { font-family: serif; font-size: 22px; }.example small { font-family: "DM Mono", monospace; font-size: 10px; }.single-word-slide.alt { background: var(--sage); }.single-word-slide.alt .eyebrow, .single-word-slide.alt em { color: var(--cream); }
.recap-slide { background: var(--gold); }.recap-plate { align-items: center; background: var(--cream); border-radius: 50%; display: flex; flex-wrap: wrap; gap: 18px; height: 350px; justify-content: center; margin: -100px 8vw 0 auto; padding: 50px; transform: rotate(7deg); width: 350px; }.recap-plate div { color: var(--coral); font-family: serif; font-size: 38px; }
.finish-slide { align-items: flex-start; display: none; flex-direction: column; justify-content: center; text-align: left; }.finish-slide.is-active { display: flex; }.finish-slide h2 { margin-bottom: 24px; }.finish-slide h2 em { color: var(--sage); }
.slide-controls { align-items: center; bottom: 34px; display: flex; gap: 17px; left: 50%; position: fixed; transform: translateX(-50%); z-index: 8; }.icon-button { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; display: inline-flex; font-size: 20px; height: 43px; justify-content: center; padding-top: 3px; transition: background .2s; width: 43px; }.icon-button:hover { background: rgba(37,35,33,.1); }.slide-dots { display: flex; gap: 7px; }.slide-dot { background: var(--line); border: 0; border-radius: 50%; height: 5px; padding: 0; width: 5px; }.slide-dot.active { background: var(--coral); width: 21px; border-radius: 4px; }
.fullscreen-button { bottom: 34px; position: fixed; right: 6vw; z-index: 8; }
.gaishoku-slide { background: #b9c4c1; }.gaishoku-slide .environment { display: none; }.gaishoku-slide { padding-bottom: 118px; padding-top: 120px; }.gaishoku-slide .meal-content { background: #f5eee2; border: 1px solid rgba(37,35,33,.18); box-shadow: 10px 10px 0 rgba(37,35,33,.1); max-width: 960px; padding: 30px 52px 26px; }.shinagaki { background: transparent; border: 0; color: var(--coral); font-family: serif; font-size: 16px; letter-spacing: .2em; padding: 0; position: absolute; right: 52px; text-align: right; top: 26px; z-index: 3; }.shinagaki rt { font-family: "DM Sans", sans-serif; font-size: 8px; letter-spacing: .02em; }.shinagaki:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; }.shinagaki-translation { color: var(--coral); display: block; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; margin-top: 7px; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }.shinagaki:hover .shinagaki-translation, .shinagaki.is-revealed .shinagaki-translation { opacity: 1; transform: translateY(0); }.gaishoku-slide .meal-heading { display: block; margin-bottom: 14px; text-align: center; }.gaishoku-slide .meal-heading .eyebrow { justify-content: center; }.gaishoku-slide .section-title { display: inline-block; }.gaishoku-slide .vocab-grid { gap: 0 34px; grid-template-columns: repeat(2, 1fr); }.gaishoku-slide .vocab-card, .gaishoku-slide .vocab-card:nth-child(2n), .gaishoku-slide .vocab-card:nth-child(3n) { align-items: center; background: transparent; border-bottom: 1px solid rgba(37,35,33,.18); border-radius: 0; display: flex; gap: 12px; min-height: clamp(66px, 10vh, 94px); padding: 10px 12px; transform: none; }.gaishoku-slide .vocab-card:hover { background: rgba(37,35,33,.05); transform: none; }.gaishoku-slide .card-visual { flex: none; height: 32px; margin-top: 0; width: 32px; }.gaishoku-slide .card-photo { border-radius: 2px; height: 32px; width: 32px; }.gaishoku-slide .food { --s: .55; }.gaishoku-slide .card-index { align-self: flex-start; flex: none; margin-right: 0; margin-top: 6px; }.gaishoku-slide .card-japanese { flex: 0 0 auto; font-size: 24px; margin: 0; white-space: nowrap; }.gaishoku-slide .card-bottom { bottom: auto; flex: 0 1 auto; left: auto; margin-left: auto; min-width: 0; position: static; right: auto; text-align: right; }.gaishoku-slide .card-english { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; white-space: normal; }
.gaishoku-slide .card-check { bottom: auto; display: block; flex: none; position: static; right: auto; top: auto; visibility: hidden; }.gaishoku-slide .vocab-card.is-seen .card-check { visibility: visible; }
.gaishoku-slide .vocab-card.is-seen, .gaishoku-slide .vocab-card.is-seen:nth-child(2n), .gaishoku-slide .vocab-card.is-seen:nth-child(3n) { background: rgba(232,111,81,.13); border-bottom-color: rgba(232,111,81,.32); box-shadow: inset 3px 0 0 var(--coral); color: var(--ink); transform: none; }.gaishoku-slide .vocab-card.is-seen .card-index { color: var(--coral); }.gaishoku-slide .vocab-card.is-seen .card-english { color: var(--ink); }.gaishoku-slide .vocab-card.is-seen .card-check { color: var(--coral); }.gaishoku-slide .vocab-card.is-seen .card-japanese rt { color: #a8654e; }
.gaishoku-slide .interaction { margin-top: 14px; }
.card-japanese { line-height: 1.28; }.card-japanese ruby { ruby-position: over; }.card-japanese rt { color: #8d877d; font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .03em; }.is-seen .card-japanese rt { color: rgba(246,241,232,.62); }.gaishoku-slide .card-japanese rt { font-size: 9px; }

/* ---- visual layer: photo for the unfamiliar dishes, flat CSS drawing for the familiar foods ---- */
.card-visual { background: rgba(37,35,33,.05); border-radius: 3px; display: block; height: 58px; margin-top: 14px; position: relative; width: 58px; }
.card-photo, .card-visual .food { opacity: 0; transition: opacity .3s ease; }
.is-seen .card-photo, .is-seen .card-visual .food { opacity: 1; }
.card-photo { border-radius: 3px; display: block; filter: saturate(.82) contrast(1.06) brightness(1.03) sepia(.2); height: 58px; object-fit: cover; width: 58px; }
.is-seen .card-photo { cursor: zoom-in; }
.lightbox { align-items: center; background: rgba(24,22,20,.94); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 4vh 5vw; position: fixed; z-index: 50; }
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: 640px; text-align: center; }
.lightbox-figure img { background: #100f0e; border-radius: 4px; display: block; margin: 0 auto; max-height: 58vh; max-width: 100%; object-fit: contain; }
.lightbox-figure figcaption { color: var(--cream); display: block; margin-top: 18px; }
.lightbox-figure span { display: block; font-family: serif; font-size: 30px; }
.lightbox-figure small { color: #b3aca1; display: block; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; margin-top: 7px; text-transform: uppercase; }
.lightbox-figure p { color: #cec7bb; font-size: 14px; line-height: 1.55; margin: 14px auto 0; max-width: 46ch; }
.lightbox-figure p:empty { display: none; }
.lightbox-close { background: transparent; border: 1px solid rgba(246,241,232,.35); border-radius: 50%; color: var(--cream); font-size: 15px; height: 40px; position: absolute; right: 4vw; top: 4vh; transition: background .2s; width: 40px; }
.lightbox-close:hover { background: rgba(246,241,232,.16); }
.food { --s: 1; display: block; height: calc(58px * var(--s)); position: relative; transform: scale(var(--s)); transform-origin: top left; width: calc(58px * var(--s)); }
.food i { display: block; position: absolute; }
:root { --tomatoc: #d9573c; --orangec: #e0873c; --brownc: #9a6b4b; --deepc: #6f4a35; --whitec: #faf5ec; --leafc: #7d9b6a; --grapec: #8a6f9e; --noric: #2f3a35; --yolkc: #edc05a; --pinkc: #e6a08c; }

.f-ringo i:nth-child(1) { background: var(--tomatoc); border-radius: 50% 50% 46% 46%; height: 38px; left: 9px; top: 12px; width: 40px; }
.f-ringo i:nth-child(2) { background: var(--deepc); border-radius: 2px; height: 12px; left: 28px; top: 4px; transform: rotate(8deg); width: 3px; }
.f-ringo i:nth-child(3) { background: var(--leafc); border-radius: 50% 0 50% 0; height: 9px; left: 31px; top: 6px; width: 15px; }
.f-mikan i:nth-child(1) { background: var(--orangec); border-radius: 50%; height: 36px; left: 8px; top: 14px; width: 42px; }
.f-mikan i:nth-child(2) { background: var(--leafc); border-radius: 50% 0 50% 0; height: 8px; left: 29px; top: 9px; width: 14px; }
.f-mikan i:nth-child(3) { background: var(--deepc); border-radius: 2px; height: 6px; left: 27px; top: 12px; width: 4px; }
.f-banana i:nth-child(1) { border-bottom: 11px solid var(--yolkc); border-radius: 50%; height: 34px; left: 8px; top: 12px; transform: rotate(-10deg); width: 42px; }
.f-banana i:nth-child(2) { background: var(--deepc); border-radius: 3px; height: 5px; left: 6px; top: 34px; transform: rotate(-30deg); width: 8px; }
.f-ichigo i:nth-child(1) { background: var(--tomatoc); border-radius: 46% 46% 50% 50% / 38% 38% 62% 62%; height: 36px; left: 11px; top: 15px; width: 36px; }
.f-ichigo i:nth-child(2) { background: var(--leafc); border-radius: 50% 50% 0 0; height: 10px; left: 18px; top: 9px; width: 22px; }
.f-ichigo i:nth-child(3) { background: var(--whitec); border-radius: 50%; box-shadow: 8px 7px 0 var(--whitec), -6px 9px 0 var(--whitec); height: 3px; left: 22px; top: 25px; width: 3px; }
.f-budou i:nth-child(1) { background: var(--grapec); border-radius: 50%; box-shadow: 14px 4px 0 var(--grapec), -2px 15px 0 var(--grapec), 12px 19px 0 var(--grapec), 6px -9px 0 var(--grapec); height: 15px; left: 13px; top: 19px; width: 15px; }
.f-budou i:nth-child(2) { background: var(--deepc); border-radius: 2px; height: 9px; left: 30px; top: 5px; width: 3px; }
.f-budou i:nth-child(3) { background: var(--leafc); border-radius: 50% 0 50% 0; height: 8px; left: 32px; top: 3px; width: 13px; }
.f-ninjin i:nth-child(1) { background: var(--orangec); clip-path: polygon(0 0, 100% 0, 50% 100%); height: 36px; left: 17px; top: 16px; width: 22px; }
.f-ninjin i:nth-child(2) { background: var(--leafc); border-radius: 2px; height: 13px; left: 20px; top: 5px; transform: rotate(-24deg); width: 4px; }
.f-ninjin i:nth-child(3) { background: var(--leafc); border-radius: 2px; height: 13px; left: 31px; top: 5px; transform: rotate(20deg); width: 4px; }
.f-jagaimo i:nth-child(1) { background: var(--brownc); border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; height: 32px; left: 8px; top: 16px; width: 42px; }
.f-jagaimo i:nth-child(2) { background: var(--deepc); border-radius: 50%; box-shadow: 12px 6px 0 var(--deepc), -4px 9px 0 var(--deepc); height: 4px; left: 20px; top: 25px; width: 4px; }
.f-tamanegi i:nth-child(1) { background: #d9b98d; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; height: 32px; left: 12px; top: 18px; width: 34px; }
.f-tamanegi i:nth-child(2) { background: rgba(111,74,53,.5); height: 22px; left: 28px; top: 22px; width: 2px; }
.f-tamanegi i:nth-child(3) { background: var(--leafc); border-radius: 2px; box-shadow: 8px 0 0 var(--leafc); height: 14px; left: 24px; top: 5px; transform: rotate(-14deg); width: 4px; }
.f-tomato i:nth-child(1) { background: var(--tomatoc); border-radius: 50%; height: 36px; left: 9px; top: 15px; width: 40px; }
.f-tomato i:nth-child(2) { background: var(--leafc); border-radius: 2px; height: 4px; left: 22px; top: 12px; width: 14px; }
.f-tomato i:nth-child(3) { background: var(--leafc); border-radius: 2px; height: 10px; left: 27px; top: 9px; width: 4px; }
.f-tamago i:nth-child(1) { background: var(--whitec); border-radius: 60% 40% 50% 50% / 58% 55% 45% 42%; height: 30px; left: 6px; top: 16px; width: 46px; }
.f-tamago i:nth-child(2) { background: var(--yolkc); border-radius: 50%; height: 16px; left: 22px; top: 23px; width: 16px; }
.f-pan i:nth-child(1) { background: #e0b478; border-radius: 40% 40% 10% 10% / 60% 60% 12% 12%; height: 28px; left: 10px; top: 18px; width: 38px; }
.f-pan i:nth-child(2) { background: rgba(111,74,53,.3); border-radius: 2px; height: 2px; left: 16px; top: 31px; width: 26px; }
.f-kudamono i:nth-child(1) { background: var(--yolkc); border-radius: 50%; height: 18px; left: 13px; top: 15px; width: 18px; }
.f-kudamono i:nth-child(2) { background: var(--tomatoc); border-radius: 50%; height: 16px; left: 29px; top: 18px; width: 16px; }
.f-kudamono i:nth-child(3) { background: var(--coral); border-radius: 0 0 22px 22px; height: 20px; left: 8px; top: 30px; width: 42px; }
.f-gohan i:nth-child(1) { background: var(--whitec); border-radius: 50% 50% 0 0; height: 18px; left: 13px; top: 15px; width: 32px; }
.f-gohan i:nth-child(2) { background: var(--ink); border-radius: 2px; height: 3px; left: 8px; top: 30px; width: 42px; }
.f-gohan i:nth-child(3) { background: var(--coral); border-radius: 0 0 22px 22px; height: 20px; left: 8px; top: 32px; width: 42px; }
.f-sarada i:nth-child(1) { background: var(--leafc); border-radius: 50% 0 50% 0; height: 16px; left: 13px; top: 15px; width: 20px; }
.f-sarada i:nth-child(2) { background: var(--tomatoc); border-radius: 50%; height: 12px; left: 32px; top: 19px; width: 12px; }
.f-sarada i:nth-child(3) { background: var(--whitec); border: 1px solid rgba(37,35,33,.18); border-radius: 0 0 22px 22px; height: 20px; left: 8px; top: 30px; width: 42px; }
.f-yoguruto i:nth-child(1) { background: var(--whitec); border: 1px solid rgba(37,35,33,.14); border-radius: 2px 2px 7px 7px; height: 30px; left: 15px; top: 18px; width: 28px; }
.f-yoguruto i:nth-child(2) { background: var(--pinkc); border-radius: 3px; height: 6px; left: 12px; top: 14px; width: 34px; }
.f-yoguruto i:nth-child(3) { background: var(--pinkc); border-radius: 50%; height: 9px; left: 22px; top: 26px; width: 14px; }
.f-chiizu i:nth-child(1) { background: var(--yolkc); clip-path: polygon(0 100%, 100% 0, 100% 100%); height: 24px; left: 8px; top: 20px; width: 42px; }
.f-chiizu i:nth-child(2) { background: rgba(111,74,53,.42); border-radius: 50%; box-shadow: -10px 6px 0 rgba(111,74,53,.42); height: 6px; left: 32px; top: 30px; width: 6px; }
.f-bataa i:nth-child(1) { background: #edc76a; border-radius: 2px; height: 18px; left: 10px; top: 25px; width: 38px; }
.f-bataa i:nth-child(2) { background: #f6e3b0; height: 9px; left: 14px; top: 17px; transform: skewX(-35deg); width: 38px; }
.f-sandoitchi i:nth-child(1) { background: #e8c893; clip-path: polygon(0 0, 100% 0, 0 100%); height: 34px; left: 9px; top: 14px; width: 40px; }
.f-sandoitchi i:nth-child(2) { background: var(--leafc); height: 4px; left: 11px; top: 22px; transform: rotate(40deg); transform-origin: left center; width: 26px; }
.f-sandoitchi i:nth-child(3) { background: var(--tomatoc); height: 4px; left: 11px; top: 18px; transform: rotate(40deg); transform-origin: left center; width: 30px; }
.f-sandoitchi i:nth-child(4) { background: #d9b57a; height: 3px; left: 9px; top: 14px; width: 40px; }
.f-sakana i:nth-child(1) { background: #7f9aa6; border-radius: 50% 40% 40% 50% / 50%; height: 22px; left: 6px; top: 20px; width: 34px; }
.f-sakana i:nth-child(2) { background: #6d8894; clip-path: polygon(100% 0, 0 50%, 100% 100%); height: 18px; left: 36px; top: 22px; width: 16px; }
.f-sakana i:nth-child(3) { background: var(--ink); border-radius: 50%; height: 5px; left: 14px; top: 26px; width: 5px; }
.f-yasai i:nth-child(1) { background: var(--leafc); border-radius: 50% 0 50% 0; height: 24px; left: 8px; top: 17px; width: 24px; }
.f-yasai i:nth-child(2) { background: #a3b58f; border-radius: 0 50% 0 50%; height: 20px; left: 27px; top: 21px; width: 22px; }
.f-yasai i:nth-child(3) { background: #6d8455; border-radius: 2px; height: 12px; left: 25px; top: 37px; width: 3px; }
.f-niku i:nth-child(1) { background: #c05a45; border-radius: 55% 45% 50% 50% / 60% 50% 50% 40%; height: 26px; left: 6px; top: 18px; width: 38px; }
.f-niku i:nth-child(2) { background: #e8bda6; border-radius: 2px; height: 4px; left: 12px; top: 23px; transform: rotate(18deg); width: 13px; }
.f-niku i:nth-child(3) { background: var(--whitec); border-radius: 50%; height: 13px; left: 39px; top: 24px; width: 13px; }
.f-gyuunyuu i:nth-child(1) { background: var(--whitec); clip-path: polygon(4% 0, 96% 0, 82% 100%, 18% 100%); height: 35px; left: 17px; top: 13px; width: 24px; }
.f-gyuunyuu i:nth-child(2) { background: #e4dccb; border-radius: 2px; height: 4px; left: 15px; top: 11px; width: 28px; }
.f-gyuunyuu i:nth-child(3) { background: rgba(37,35,33,.07); clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%); height: 30px; left: 31px; top: 16px; width: 9px; }
@media (max-width: 760px) { .gaishoku-slide .vocab-grid { grid-template-columns: 1fr; }.gaishoku-slide .meal-content { padding: 24px 20px 20px; }.gaishoku-slide .meal-content::before { right: 20px; }.gaishoku-slide .vocab-card, .gaishoku-slide .vocab-card:nth-child(2n), .gaishoku-slide .vocab-card:nth-child(3n) { flex-wrap: wrap; gap: 4px 10px; padding: 10px 8px; }.gaishoku-slide .card-japanese { font-size: 21px; }.gaishoku-slide .card-english { font-size: 14px; } }
@media (max-width: 700px) { .topbar { height: 74px; padding: 0 6vw; }.lesson-label { display: none; }.progress { width: 60px; }.slide { padding: 110px 8vw 105px; }.intro-slide { align-items: flex-start; display: none; gap: 15px; grid-template-columns: 1fr; padding-top: 125px; }.intro-slide.is-active { display: grid; }.hero-food { height: 270px; margin-top: -12px; }.sun { height: 170px; right: 10%; width: 170px; }.bowl { bottom: 22px; height: 110px; width: 200px; }.bowl::after { height: 19px; left: 12px; top: -6px; width: 177px; }.bowl-rice { font-size: 19px; padding: 12px 17px; top: 120px; }.steam { height: 60px; top: 74px; }.hero-caption { bottom: -1px; }.environment { height: 85px; right: 0; top: -20px; width: 150px; }.environment-label { font-size: 7px; left: 10px; top: 10px; }.environment-sun { height: 42px; right: 14px; top: 16px; width: 42px; }.environment-cup { bottom: 6px; font-size: 21px; left: 16px; }.meal-heading { display: block; margin-bottom: 28px; }.meal-heading h2 { font-size: 52px; }.meal-subtitle { margin: 14px 0; }.vocab-grid { grid-template-columns: repeat(2, 1fr); }.vocab-card { min-height: 145px; padding: 15px; }.card-bottom { bottom: 14px; left: 15px; }.card-japanese { font-size: 23px; margin-top: 18px; }.interaction { align-items: flex-end; flex-direction: column; gap: 5px; } }

/* ---- Repaso: same mechanic as the practice screen, in this deck's own language ---- */
.review-slide { background: #dfe4da; }
.review-slide.is-active { align-items: center; display: flex; flex-direction: column; justify-content: center; }
.review-top { align-items: center; display: flex; gap: 18px; margin-bottom: 28px; width: min(880px, 100%); }
.review-label { color: var(--coral); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .18em; }
.review-bar { background: var(--line); flex: 1; height: 2px; }
.review-bar span { background: var(--coral); display: block; height: 100%; transition: width .45s ease; width: 0; }
.review-count { color: #716c64; font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .12em; }
.review-card { background: #f7f1e6; border: 1px solid rgba(37,35,33,.16); box-shadow: 12px 12px 0 rgba(37,35,33,.09); display: flex; flex-direction: column; min-height: 420px; padding: 44px 56px 46px; position: relative; width: min(880px, 100%); }
.review-prompt-label { color: var(--coral); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .16em; margin: 0 0 20px; }
.review-es { font-family: "Playfair Display", serif; font-size: clamp(30px, 3.9vw, 47px); font-weight: 500; letter-spacing: -.02em; line-height: 1.14; margin: 0; max-width: 17ch; }
.hint-button { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 30px; color: #716c64; display: inline-flex; font-family: "DM Mono", monospace; font-size: 11px; gap: 9px; letter-spacing: .1em; padding: 11px 18px; position: absolute; right: 38px; text-transform: uppercase; top: 38px; transition: background .2s, border-color .2s, color .2s; }
.hint-button:hover { border-color: var(--coral); color: var(--coral); }
.hint-button.is-open { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.hint-dot { background: var(--coral); border-radius: 50%; flex: none; height: 6px; width: 6px; }
.hint-panel { display: none; gap: 12px; list-style: none; margin: 28px 0 12px; padding: 0; }
.hint-panel.is-open { animation: hintIn .25s ease both; display: grid; }
@keyframes hintIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.hint-panel li { align-items: baseline; border-left: 2px solid rgba(232,111,81,.45); display: flex; gap: 16px; padding-left: 14px; }
.hint-jp { font-family: serif; font-size: 28px; }
.hint-jp rt { color: #8d877d; font-family: "DM Sans", sans-serif; font-size: 10px; letter-spacing: .02em; }
.hint-es { color: #716c64; font-size: 15px; }
.review-answer { border-top: 1px solid rgba(37,35,33,.14); margin-top: auto; opacity: 0; padding-top: 26px; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; }
.review-answer.is-open { opacity: 1; transform: translateY(0); }
.review-jp { font-family: serif; font-size: clamp(27px, 3.3vw, 39px); line-height: 1.6; margin: 0; }
.review-jp rt { color: var(--coral); font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.review-done-jp { font-family: serif; font-size: clamp(44px, 5.8vw, 70px); margin: 10px 0 0; }
.review-done-es { color: #716c64; font-size: 17px; margin: 20px 0 0; }
.review-action { align-self: center; margin-top: 26px; }
@media (max-width: 700px) { .review-card { min-height: 320px; padding: 26px 22px 28px; }.hint-button { margin-bottom: 16px; position: static; }.review-es { max-width: none; } }
/* Sub-slide navigation belongs to the slides route only. */
body:not([data-route="slides"]) .slide-controls { display: none; }
/* ⓘ badge on photo cards — a second route into the viewer, revealed with the card. */
.card-info { align-items: center; background: var(--coral); border: 0; border-radius: 50%; color: var(--cream); cursor: zoom-in; display: flex; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; height: 22px; justify-content: center; line-height: 1; position: absolute; right: 18px; top: 18px; transition: transform .18s ease, box-shadow .18s ease; visibility: hidden; width: 22px; }
.is-seen .card-info { visibility: visible; }
.card-info:hover, .card-info.is-hovered { box-shadow: 0 0 0 5px rgba(232,111,81,.22); transform: scale(1.18); }
.gaishoku-slide .card-info { flex: none; height: 23px; margin-left: 12px; position: static; width: 23px; }