.lesson-page{--reading:#f4f1e9;--reading-ink:#27252b}.lesson-page h1{font-size:clamp(37px,5.7vw,79px);font-weight:900;line-height:1.3;letter-spacing:-.065em}.lesson-page h1>span{font:inherit;display:inline}.lesson-page h1 i{font-style:normal;color:var(--accent)}.lesson-page h2{font-size:clamp(28px,3.4vw,45px)}.lesson-intro{max-width:1400px;margin:auto;padding:35px 5% 48px;display:grid;grid-template-columns:1.4fr 1fr;gap:8%;align-items:center}.lesson-intro>div>p:last-child{font-size:12px;line-height:2.2;color:var(--muted);margin-top:23px}.lesson-intro-note{border-left:1px solid var(--line);padding-left:40px}.lesson-intro-note>span{font:9px monospace;letter-spacing:2px;color:var(--muted)}.lesson-intro-note strong{display:block;font-size:32px;line-height:1.6;letter-spacing:-.04em;margin-top:12px}.lesson-intro-note em{color:var(--accent);font-style:normal}.lesson-intro-note p{font-size:10px!important}
.lesson-strip{position:sticky;top:88px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 5%;background:#1b1c20f5;border-block:1px solid var(--line);backdrop-filter:blur(12px)}.lesson-strip nav{display:flex;gap:7px;min-width:0}.lesson-strip nav a{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;padding:11px 12px;border:1px solid transparent}.lesson-strip nav a>span{font:10px monospace;color:var(--accent)}.lesson-strip nav a:hover,.lesson-strip nav a.current{border-color:var(--line);background:#ffffff09}.lesson-strip nav a>i{font-size:10px;visibility:hidden;font-style:normal;color:var(--accent)}.lesson-strip nav a.done>i{visibility:visible}.learning-progress{min-width:120px;max-width:160px;flex:1;font-size:10px;color:var(--muted);text-align:right}.learning-track{display:block;width:100%;height:3px;background:#ffffff20;margin-top:9px}.learning-track i{display:block;width:0;height:100%;background:var(--accent);transition:width .25s}
.lesson-content{max-width:1160px;margin:auto;padding:0 5%}.lesson-section{padding:65px 0;border-bottom:1px solid var(--line);scroll-margin-top:180px}.lesson-section-heading{display:flex;gap:23px;margin-bottom:30px;align-items:flex-start}.step-number{font:38px monospace;color:var(--accent);padding-top:3px}.lesson-section-heading .eyebrow{margin-bottom:8px}.lesson-section-heading p:last-child{font-size:12px;line-height:2;color:var(--muted);margin:17px 0 0;max-width:740px}.lesson-video{position:relative;aspect-ratio:16/9;background:#070809;border:1px solid var(--line);overflow:hidden}.video-launch{position:relative;width:100%;height:100%;padding:0;border:0;background:#101114;color:white;cursor:pointer;display:block;text-align:left}.video-launch img{width:100%;height:100%;object-fit:cover;display:block}.video-shade{position:absolute;inset:0;background:linear-gradient(0deg,#000c,transparent 45%,#0005)}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:65px;border-radius:14px;background:#f03;display:grid;place-items:center;font-size:31px;padding-left:4px;box-shadow:0 7px 35px #0007;transition:transform .2s}.video-launch:hover .video-play{transform:translate(-50%,-50%) scale(1.1)}.video-tag{position:absolute;left:24px;top:24px;font-size:13px;font-weight:800;padding:9px 13px;background:#111e;border-left:3px solid var(--accent)}.video-caption{position:absolute;left:25px;right:25px;bottom:22px;display:flex;justify-content:space-between;font-size:12px;font-weight:700}.video-caption>span{font:10px monospace;letter-spacing:2px;color:#ddd}.lesson-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-note,.credits{font-size:10px;line-height:1.9;color:var(--muted)}.credits{font-family:monospace}.step-end{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:28px}.step-end>p{font-size:10px;line-height:1.8;color:var(--muted)}.complete-step{font-size:11px;padding:13px 17px;background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer;white-space:nowrap}.complete-step span{margin-left:16px}.complete-step[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#ed60410c}.complete-step:hover{border-color:var(--accent)}
.lyrics-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.verse-menu{max-width:65%;font-size:12px}.verse-menu summary{cursor:pointer;padding:12px 0}.verse-menu nav{display:grid;gap:0;max-height:300px;overflow:auto;border:1px solid var(--line);background:#1c1d22}.verse-menu a{font-size:11px;line-height:1.8;padding:11px 15px;border-bottom:1px solid var(--line)}.verse-menu a:hover{color:var(--accent)}#toggle-explanations{font-size:11px;padding:11px 16px;background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer;white-space:nowrap}.lyrics-reader{background:var(--reading);color:var(--reading-ink);padding:clamp(24px,5vw,64px);border-top:4px solid var(--accent);font-size:15px;line-height:2.1;overflow-wrap:anywhere}.lyrics-reader>p{margin:0 0 28px}.lyrics-reader h3{font-size:clamp(19px,2.4vw,27px);line-height:1.9;border-left:4px solid #bf4930;padding:0 0 0 18px;margin:46px 0 20px;scroll-margin-top:190px;letter-spacing:-.02em}.lyrics-reader h3:first-child{margin-top:0}.lyrics-reader strong,.lyrics-reader b{font-weight:800}.lyrics-reader img{display:block;width:auto;max-width:100%;max-height:440px;object-fit:contain;margin:20px auto;box-shadow:0 2px 10px #0001}.lyrics-reader p{margin:0 0 18px}.lyrics-reader ol,.lyrics-reader ul{padding-left:24px;line-height:2}.lyrics-reader .lyric-callout{padding:22px 25px;border:1px solid #d7cfc2;background:#eae4d8;margin:24px 0;line-height:2.1;font-size:14px}.explanation{margin:14px 0 26px;border:1px solid #cfc7bb;background:#fff9}.explanation summary{font-size:12px;font-weight:800;cursor:pointer;padding:14px 18px;color:#a53d27;list-style-position:inside}.explanation>div{padding:5px 22px 20px;font-size:13px;line-height:2.1}.lyric-callout .explanation{margin-bottom:0}.lyric-callout .explanation>div{padding:5px 16px 16px}
.lesson-text-link{display:inline-block;margin-top:23px;color:var(--accent);font-size:12px;border-bottom:1px solid var(--accent);padding-bottom:5px}.worksheet{display:grid;grid-template-columns:1fr 180px;align-items:center;gap:40px;background:#1b1c21;border:1px solid var(--line);padding:30px;margin-top:30px}.worksheet h3{font-size:24px;line-height:1.6;margin:0 0 12px}.worksheet p:not(.eyebrow){font-size:12px;line-height:2;color:var(--muted)}.worksheet .eyebrow{margin-bottom:10px}.worksheet img{display:block;max-width:100%;height:auto;max-height:235px;object-fit:contain}.worksheet-links{display:flex;gap:14px;flex-direction:column;margin-top:23px}.worksheet-links a{font-size:11px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.karaoke{border:1px solid var(--line);padding:0 20px;margin-top:20px}.karaoke>summary{cursor:pointer;padding:20px 0;font-size:12px}.karaoke .lesson-video{margin:0 0 20px}
.quiz-app{border:1px solid var(--line);background:#1b1c22;padding:clamp(22px,4vw,45px)}.quiz-start{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center}.quiz-emblem{display:block;font:800 clamp(80px,10vw,150px)/1 'Noto Sans JP',sans-serif;color:var(--accent);text-align:center;letter-spacing:-.05em}.quiz-emblem small{display:block;font:10px monospace;letter-spacing:3px;margin-top:15px;color:var(--muted)}.quiz-start h3{font-size:clamp(23px,3vw,35px);margin:0 0 18px;line-height:1.5}.quiz-start p{font-size:12px;line-height:2;color:var(--muted)}.quiz-best{font-size:10px!important;margin:15px 0 0!important;color:var(--accent)!important}.question-top{display:flex;justify-content:space-between;align-items:center;font:11px monospace;color:var(--muted);gap:15px;margin-bottom:22px}.question-top strong{color:var(--accent);font-size:19px}.quiz-dots{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 26px;margin-bottom:25px;border-bottom:1px solid var(--line)}.quiz-dot{display:grid;place-content:center;min-width:29px;height:29px;border:1px solid var(--line);color:var(--muted);background:transparent;font:10px monospace;cursor:pointer}.quiz-dot.answered{background:#ffffff12;color:var(--ink)}.quiz-dot.current{border-color:var(--accent);color:var(--accent)}.quiz-fieldset{border:0;padding:0;margin:0;min-width:0}.quiz-fieldset legend{font-size:clamp(18px,2.3vw,27px);line-height:1.8;font-weight:800;margin-bottom:25px;letter-spacing:-.02em;width:100%}.quiz-option{display:flex;align-items:center;gap:15px;padding:17px 19px;border:1px solid var(--line);margin:12px 0;cursor:pointer;font-size:14px;line-height:1.8;transition:border-color .15s}.quiz-option input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0}.quiz-option:has(input:checked){border-color:var(--accent);background:#ed60410b}.quiz-actions{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:28px}.quiz-secondary{background:transparent;color:var(--ink);border:1px solid var(--line);padding:15px 22px;cursor:pointer;font-size:12px}.quiz-secondary:disabled{opacity:.3;cursor:default}.quiz-actions .button{cursor:pointer}.quiz-message{min-height:1.8em;margin:15px 0 0;font-size:12px;color:#ffc59d}.quiz-result-head{text-align:center;margin-bottom:35px}.quiz-result-head>span{font:10px monospace;letter-spacing:3px;color:var(--muted)}.quiz-score{font-size:78px;line-height:1.4;color:var(--accent);font-weight:900;letter-spacing:-.05em;margin-top:10px}.quiz-score small{font-size:22px;color:var(--muted);margin-left:7px}.quiz-result-head h3{font-size:26px;margin:10px 0}.quiz-result-head p{font-size:12px;color:var(--muted);line-height:2}.quiz-review{border-top:1px solid var(--line)}.quiz-review article{padding:20px 0;border-bottom:1px solid var(--line)}.quiz-review h4{font-size:13px;line-height:1.9;margin:0 0 10px}.quiz-review p{font-size:12px;line-height:1.9;margin:4px 0;color:var(--muted)}.quiz-review .correct-answer{color:var(--ink)}.review-status{font:11px monospace;color:#86dcc4;display:block;margin-bottom:8px}.review-status.wrong{color:#ff9d89}.quiz-review-toggle{cursor:pointer;font-size:13px;padding:20px 0;color:var(--accent)}.lesson-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:55px 0}.lesson-bottom h2{font-size:37px}.save-note{font-size:10px;color:var(--muted);line-height:1.9;margin:0 0 40px}.product-footer button{padding:0;border:0;background:none;color:var(--muted);font-size:10px;cursor:pointer;text-decoration:underline}.product-footer button:hover{color:var(--accent)}
@media(max-width:1050px){.lesson-strip{gap:10px;padding-inline:3%}.lesson-strip nav a{font-size:10px;gap:5px;padding:10px 8px}.learning-progress{min-width:90px}.lesson-intro-note{padding-left:25px}.lesson-intro-note strong{font-size:27px}}
@media(max-width:760px){.lesson-page .product-header nav a:last-child{display:none}.lesson-intro{grid-template-columns:1fr;gap:25px;padding:15px 6% 32px}.lesson-intro-note{border:0;border-top:1px solid var(--line);padding:20px 0 0}.lesson-intro-note>span{font-size:8px}.lesson-intro-note strong{font-size:22px}.lesson-intro-note strong br{display:none}.lesson-intro-note p{margin:10px 0 0!important}.lesson-page h1{font-size:clamp(32px,8vw,55px)}.lesson-intro>div>p:last-child{font-size:11px;margin-top:17px}.lesson-strip{top:76px;padding:9px 5%;display:block}.lesson-strip nav{overflow-x:auto;scrollbar-width:thin;gap:5px}.lesson-strip nav a{font-size:10px;padding:9px 8px;gap:5px}.learning-progress{max-width:none;display:flex;align-items:center;gap:15px;justify-content:space-between;margin-top:8px;font-size:9px}.learning-track{margin:0;max-width:180px;height:2px}.lesson-content{padding:0 5%}.lesson-section{padding:40px 0;scroll-margin-top:175px}.lesson-section-heading{gap:14px;margin-bottom:23px}.step-number{font-size:28px}.lesson-page h2{font-size:26px;line-height:1.6}.lesson-section-heading .eyebrow{font-size:8px}.lesson-section-heading p:last-child{font-size:11px;margin-top:12px}.video-play{width:64px;height:46px;border-radius:11px;font-size:24px}.video-tag{font-size:10px;left:13px;top:13px;padding:7px 9px}.video-caption{left:14px;right:14px;bottom:12px;font-size:10px}.video-caption>span{font-size:8px}.step-end{align-items:stretch;flex-direction:column;gap:8px;margin-top:22px}.step-end>p{font-size:9px}.complete-step{align-self:flex-start;font-size:11px}.lyrics-toolbar{gap:12px;flex-wrap:wrap}.verse-menu{max-width:100%;font-size:11px}.verse-menu nav{max-height:250px}.verse-menu a{font-size:10px}#toggle-explanations{font-size:10px;padding:10px 12px}.lyrics-reader{padding:27px 19px;font-size:13px;line-height:2.1}.lyrics-reader h3{font-size:18px;padding-left:12px;margin-top:35px;scroll-margin-top:185px}.lyrics-reader .lyric-callout{padding:16px;font-size:12px}.explanation summary{font-size:11px;padding:12px 13px}.explanation>div{padding:2px 15px 15px;font-size:12px}.lyrics-reader img{max-height:330px}.worksheet{grid-template-columns:1fr;gap:22px;padding:23px}.worksheet h3{font-size:22px}.worksheet> a{max-width:140px}.worksheet p:not(.eyebrow){font-size:11px}.worksheet-links{gap:18px}.worksheet-links a{font-size:10px}.karaoke{padding-inline:13px}.karaoke summary{font-size:11px}.quiz-start{grid-template-columns:1fr;gap:25px}.quiz-emblem{font-size:83px;text-align:left}.quiz-emblem small{display:inline-block;margin-left:15px;font-size:8px;vertical-align:middle}.quiz-start h3{font-size:24px}.quiz-start h3 br{display:none}.quiz-start p{font-size:11px}.quiz-dots{gap:5px;padding-bottom:20px;margin-bottom:23px}.quiz-dot{min-width:26px;height:26px;font-size:9px}.quiz-fieldset legend{font-size:18px;line-height:1.9;margin-bottom:17px}.quiz-option{padding:14px 12px;font-size:12px;gap:12px}.quiz-actions{gap:12px}.quiz-actions .button{font-size:11px;padding:14px 16px;gap:20px}.quiz-secondary{font-size:11px;padding:14px 17px}.quiz-result-head h3{font-size:23px}.quiz-score{font-size:67px}.quiz-review h4{font-size:12px}.quiz-review p{font-size:11px}.lesson-bottom{display:block;padding:40px 0}.lesson-bottom h2{font-size:29px}.lesson-bottom .button{margin-top:26px}.save-note{font-size:9px}.credits,.video-note{font-size:9px}}
@media print{.product-header,.lesson-strip,.lesson-intro,.breadcrumbs,.video-launch,.lesson-video,.lesson-section-heading,.step-end,.lyrics-toolbar,.quiz-section,.lesson-bottom,.product-footer,.save-note,.worksheet,.karaoke,.credits,.video-note,.lesson-text-link,#step1,#step3,#step4{display:none!important}.lesson-content{max-width:none;padding:0}.lyrics-reader{background:#fff;color:#000;border:0;padding:0;font-size:11pt}.lesson-section{padding:0;border:0}.explanation{break-inside:avoid}.lyrics-reader h3{break-after:avoid}}
.quiz-app{scroll-margin-top:180px}
.lyric-hint{font-size:10px;line-height:1.8;color:var(--muted);margin:12px 0}
@media(max-width:760px){.quiz-app{scroll-margin-top:180px}}
