/* Native Figma quiz states; fixed outer cards, scrollable feedback content. */
[hidden]{display:none!important}
#quiz .quiz-card{padding:0 0 10px;overflow:hidden;gap:8px;display:flex;flex-direction:column}
.quiz-card .quiz-main{padding:24px;display:flex;flex-direction:column;min-height:0;flex:1;overflow:auto;scrollbar-width:thin}
.quiz-main>h3{font-size:20px;line-height:30px;font-weight:500;margin:4px 0 16px;flex-shrink:0}
.quiz-main .quiz-body{min-height:0;flex:1}.quiz-main .fill-body{justify-content:center;gap:64px;padding:0}
.sentences{display:flex;flex-direction:column;gap:16px;width:100%}.quiz-main .sentence{display:flex;align-items:end;justify-content:center;white-space:nowrap;min-height:44px;line-height:28px;font-size:18px;gap:0}
.quiz-main ruby{ruby-align:center}.quiz-main rt{font-size:10px;line-height:12px;color:#14143366;font-weight:400}.grammar-token{color:#00c8e8;text-decoration:underline dotted;text-underline-offset:5px}
.quiz-main .blank{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:80px;height:44px;min-height:44px;margin:0 0 0 2px;padding:0 4px;border:0;border-radius:0;border-bottom:1px solid #a6abb2;background:transparent;font-size:14px;line-height:20px;vertical-align:bottom;color:#141433;box-shadow:none}
.quiz-main .blank.filled{border:1.5px solid #00c8e8;border-radius:12px;background:#e5faff;color:#009eb5;box-shadow:inset 0 -4px #00a3bd}.quiz-main .blank:focus-visible{outline:2px solid #0085ff;outline-offset:3px}
.quiz-main .word-options{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}.word-options>div{display:flex;justify-content:center;gap:8px}.quiz-main .word-options button{height:44px;min-width:54px;padding:10px 12px;font-size:14px;border-radius:12px;border:1.5px solid #00000014;background:#fff;color:#141433;box-shadow:inset 0 -4px 2px #e7e7e7}.quiz-main .word-options button.selected{background:#e5faff;color:#009eb5;border-color:#00c8e8;box-shadow:inset 0 -4px #009eb5}.word-options button:disabled,.answers button:disabled{opacity:1;cursor:default}
.quiz-card .reading{display:flex;flex-direction:column;gap:0;padding:0;flex:initial}.quiz-card .reading .jp{font-size:16px;line-height:30px;min-height:44px;margin:0}.quiz-card .reading .question{font-size:14px;line-height:20px;margin:16px 0}.quiz-card .answers{gap:8px}.quiz-card .answers button{font-size:14px;line-height:20px;min-height:52px;text-align:left;padding:12px 16px;margin:0;flex-shrink:0}
.quiz-check,.quiz-explain-end{padding:12px 16px;flex-shrink:0;width:100%}.quiz-card .check{display:flex;align-items:center;justify-content:center;width:100%;height:52px;min-height:52px;font-size:18px;line-height:22px;margin:0;border:0;border-radius:16px;background:#16cbfb;color:#fff;font-weight:700;box-shadow:inset 0 -4px #0ba3ca}.quiz-card .check:disabled{background:#ccc;box-shadow:inset 0 -4px #b9b9b9;color:white;cursor:default}
.quiz-feedback{padding:12px 16px;flex-shrink:0;width:100%;display:flex;flex-direction:column;gap:12px}.quiz-feedback h4{font-size:19.5px;line-height:30px;display:flex;gap:13px;align-items:center;margin:0;font-weight:700}.feedback-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:currentColor;position:relative;flex-shrink:0}.feedback-icon:before{content:'';position:absolute;width:12px;height:7px;border:3px solid white;border-top:0;border-right:0;transform:rotate(-45deg);top:7px;left:6px}.quiz-feedback p{font-size:16px;line-height:24px;margin:0}.quiz-feedback button{height:52px;min-height:52px;border-radius:17px;font-size:19.5px;font-weight:700;width:100%;border:1.6px solid currentColor;display:grid;place-items:center}.feedback-actions{display:flex;flex-direction:column;gap:13px}.quiz-feedback.correct{background:#e4f7ea;color:#1f8c1f}.correct button[data-action=explain]{background:#e4f7ea;border-color:#7acc7a;box-shadow:0 3px #7acc7a}.correct button[data-action=continue]{background:#51cf55;color:white;border:0;box-shadow:inset 0 -4px #2fa433}.quiz-feedback.wrong{background:#fff2f2;color:#f34e4e}.wrong .feedback-icon:before,.wrong .feedback-icon:after{content:'';width:14px;height:3px;left:6px;top:11.5px;background:white;border:0;transform:rotate(45deg);position:absolute}.wrong .feedback-icon:after{transform:rotate(-45deg)}.wrong button[data-action=explain]{background:#fff2f2;border-color:#f6b0b0;box-shadow:0 3px #f6b0b0}.wrong button[data-action=continue]{background:#ff5a65;border:0;color:white;box-shadow:inset 0 -4px #dd3c49}.quiz-feedback.retry{background:#fff8d1;color:#ed8d00;gap:12px}.retry .feedback-icon{width:22px;height:22px}.retry .feedback-icon:before{content:'!';border:0;color:white;transform:none;font-size:18px;line-height:22px;inset:0;width:100%;height:100%;text-align:center;font-weight:700}.quiz-feedback.retry h4{font-size:18px}.quiz-feedback.retry .check{background:#ffab00;box-shadow:inset 0 -4px #e48e00}
.quiz-card[data-state=retry] .quiz-main .fill-body,.quiz-card[data-state=correct] .quiz-main .fill-body,.quiz-card[data-state=wrong] .quiz-main .fill-body{gap:24px;justify-content:flex-start}.quiz-card[data-state=correct] .quiz-main,.quiz-card[data-state=wrong] .quiz-main{padding-top:20px;padding-bottom:16px}.quiz-card[data-state=correct] .quiz-main .writing,.quiz-card[data-state=wrong] .quiz-main .writing{min-height:160px}
.quiz-explanation{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:22px 28px 12px;font-size:14px;line-height:24px}.quiz-explanation h4{font-size:15px;line-height:24px;font-weight:700;margin:0 0 8px}.quiz-explanation p{margin:0 0 10px}.quiz-explanation p:last-child{margin-bottom:0}.explanation-good{padding:16px 20px;border-radius:14px;background:#e4f7ea;color:#1f8c1f}.explanation-caution{padding:12px 16px;border-radius:18px;background:#fdf3ed;color:#8c421c;margin-top:12px}.explanation-caution ul{margin:0;padding-left:16px;display:grid;gap:8px}
.quiz-card .kana-label{margin:0 0 20px}.quiz-card .writing{flex:1;min-height:200px;margin:0}.stroke-guide{position:absolute;left:18%;top:34%;width:60%;height:1px;border-top:2px dashed #ff9900;color:#ff9900;font-size:24px;text-align:right;line-height:0;pointer-events:none}.quiz-card[data-state=ready] .stroke-guide,.quiz-card[data-state=correct] .stroke-guide{display:none}
@media(max-width:700px){#quiz .quiz-card{display:none;height:560px;min-height:560px}#quiz .quiz-card.active{display:flex}.quiz-card .quiz-main{padding:18px 14px}.quiz-main>h3{font-size:18px;line-height:26px}.quiz-main .sentence{font-size:16px}.quiz-main .blank{width:66px}.quiz-card .reading .jp{font-size:15px;line-height:26px;min-height:38px}.quiz-card .answers button{padding:10px 12px}.quiz-main .fill-body{gap:48px}.quiz-feedback p{font-size:14px;line-height:22px}.quiz-feedback button{font-size:18px}.quiz-explanation{padding:18px 16px 8px}.quiz-card .writing{min-height:180px}}
@media(prefers-reduced-motion:no-preference){.quiz-feedback:not([hidden]),.quiz-explanation:not([hidden]){animation:fade .25s ease}.quiz-main .blank.filled{animation:pop .3s ease}}
.quiz-feedback button[data-action=explain]{color:inherit}
/* Pending pages retain their authored visuals without invented destinations. */
[data-pending-link]{cursor:default}.button[data-pending-link]:hover,.dark-button[data-pending-link]:hover{transform:none}
/* Image zoom is clipped to the original image area; lift is independent of reveal. */
.pain-card>.pain-visual{display:block;padding:0;height:258px;overflow:hidden;flex:none}.pain-visual>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.pain-card:nth-child(1)>.pain-visual{background:#e0e6ee}.pain-card:nth-child(2)>.pain-visual{background:#eae8f1}.pain-card{translate:0 0;transition:opacity .7s ease var(--reveal-delay,0ms),transform .85s var(--spring) var(--reveal-delay,0ms),translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease!important}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.pain-card:hover{translate:0 -3%;box-shadow:0 18px 36px #14274214}.pain-card:hover .pain-visual>img{transform:scale(1.03)}}
@media(min-width:701px) and (max-width:1000px){.pain-card>.pain-visual{height:180px}}
@media(max-width:700px){.pain-card>.pain-visual{height:176.77px}}
/* The active dot stays in the middle while neighboring dots travel with the cards. */
.carousel-nav{position:relative;display:block;overflow:hidden;width:120px;height:24px;margin-left:auto;margin-right:auto}.story-dot-track{position:absolute;left:-48px;top:0;display:flex;height:24px;transform:translateX(0)}.carousel-nav button,.carousel-nav button[aria-current=true]{width:24px;height:24px;min-width:24px;position:relative;flex:none}.carousel-nav button:after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#999;transform:translate(-50%,-50%) scale(var(--dot-scale,.65));transition:transform .58s cubic-bezier(.2,.8,.2,1),background-color .4s}.carousel-nav button[aria-current=true]:after{background:#000}.story-dot-track.moving{transition:transform .62s cubic-bezier(.22,.8,.25,1)}.story-track{scroll-snap-type:none;touch-action:pan-y;cursor:grab;padding-top:18px;padding-bottom:24px;user-select:none}.story-track.dragging{cursor:grabbing}.story{flex-shrink:0}.story:not(.story-entered){opacity:0;translate:0 22px}.story-entered{opacity:1;translate:0 0;transition:opacity .55s ease,translate .7s cubic-bezier(.22,1.12,.36,1);transition-delay:var(--story-delay,0ms)}
@media(max-width:700px){.carousel-nav{height:44px}.story-dot-track{height:44px}.carousel-nav button,.carousel-nav button[aria-current=true]{height:44px}}
.faq-list{min-height:calc(var(--faq-closed-height,660px) + var(--faq-answer-height,120px))}.faq{padding-bottom:max(0px,calc(var(--faq-bottom,160px) + 60px - var(--faq-answer-height,120px)))}.faq details{overflow:hidden}.faq details>p{animation:fade .25s ease}.faq summary:focus-visible{outline:2px solid #0085ff;outline-offset:6px}
@media(max-width:700px){.faq{--faq-bottom:32px}}
@media(prefers-reduced-motion:reduce){.pain-card,.pain-visual>img,.story-entered,.story-dot-track.moving,.carousel-nav button:after{transition:none!important}.story{opacity:1!important;translate:0 0!important}}