:root { --finger-left-pinky: #ff83c5; --finger-left-ring: #ffd166; --finger-left-middle: #55c7ff; --finger-left-index: #b49aff; --finger-right-index: #42dca8; --finger-right-middle: #ff8c70; --finger-right-ring: #6cbcff; --finger-right-pinky: #ff9d57; --finger-thumb: #c5e86c; color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; background: #090d12; color: #eef2f4; font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #090d12; }
.landscape-recommendation { display: none; }
button, select, input { font: inherit; }
button { color: #0c1421; background: #55dbcf; border: 1px solid #55dbcf; border-radius: 7px; padding: .62rem .9rem; cursor: pointer; font-weight: 700; }
button:hover { filter: brightness(1.12); }
button:focus-visible, select:focus-visible, input:focus-visible, .practice-stage:focus-visible { outline: 3px solid #f7be63; outline-offset: 4px; }
button.quiet { background: transparent; color: #b9c4ca; border-color: #38434a; }
.shell { max-width: 1120px; margin: 0 auto; padding: 1.2rem 2rem 1rem; }
.mast { display: flex; align-items: center; gap: 1rem; min-height: 48px; color: #a9b4bc; }
.logo { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; padding: .25rem .2rem; border: 0; color: inherit; background: transparent; line-height: 1; white-space: nowrap; }
.brand-mark { display: block; width: 2.6rem; height: 1.4rem; flex: 0 0 auto; }
.brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-key { fill: #111a20; stroke-width: 1.7; }
.brand-key-home { stroke: #f7be63; }
.brand-key-target { stroke: #55dbcf; }
.brand-path { fill: none; stroke: #d8e5e7; stroke-width: 2; stroke-linecap: round; }
.brand-dot-home { fill: #f7be63; }
.brand-dot-target { fill: #55dbcf; }
.brand-word { color: #e8eef0; font-size: 1.18rem; font-weight: 850; letter-spacing: -.055em; }
.mast-home { min-width: 5.4rem; color: #071315; background: #55dbcf; border-color: #7de9e0; box-shadow: 0 0 0 1px #55dbcf20, 0 7px 20px #55dbcf1f; white-space: nowrap; }
.mast .quiet { font-size: .94rem; }
.mast-fullscreen { white-space: nowrap; }
.chapter-control { display: flex; align-items: center; gap: .45rem; color: #b9c4ca; font-size: .9rem; }
.chapter-control strong { color: #55dbcf; font: 800 .88rem/1 ui-monospace, Menlo, Consolas, monospace; }
.trial-status { padding: .43rem .68rem; color: #f7be63; background: #261f15; border-color: #8b6934; font-size: .84rem; white-space: nowrap; }
.edition-badge { padding: .38rem .62rem; border: 1px solid #f7be63; border-radius: 999px; color: #f7be63; font: 800 .76rem/1 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.trial-edition #developer-tools { display: none; }
.home-screen { min-height: calc(100vh - 130px); display: grid; align-content: center; gap: 1rem; padding: 2rem 0; }
.home-screen[hidden] { display: none; }
.home-head { display: grid; gap: .55rem; padding: 0 .35rem .65rem; }
.home-head p, .home-primary-copy > p, .home-progress p, .home-remedial p { margin: 0; color: #f7be63; font: 800 .84rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .13em; }
.home-head h1 { margin: 0; font-size: clamp(2.35rem, 5.6vw, 4.8rem); letter-spacing: -.06em; }
.home-head span { color: #9aaab3; font-size: 1rem; line-height: 1.65; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .75fr); gap: 1rem; }
.home-primary, .home-progress, .home-remedial { border: 1px solid #34444d; border-radius: 15px; background: linear-gradient(145deg, #131e25, #0c1319 72%); box-shadow: inset 0 1px #ffffff0a, 0 18px 42px #0004; }
.home-primary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.2rem; min-height: 18rem; padding: 1.65rem; overflow: hidden; }
.home-primary::after { content: ''; position: absolute; right: -5rem; top: -8rem; width: 22rem; aspect-ratio: 1; border: 1px solid #55dbcf35; border-radius: 50%; box-shadow: 0 0 0 3rem #55dbcf07, 0 0 0 6rem #55dbcf04; pointer-events: none; }
.home-primary-copy { position: relative; z-index: 1; display: grid; align-content: end; gap: .75rem; }
.home-primary h2 { max-width: 38rem; margin: 0; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1.18; letter-spacing: -.035em; }
.home-primary-copy > p:not(:first-child) { max-width: 42rem; color: #aebdc4; font-size: .98rem; line-height: 1.65; letter-spacing: 0; }
.home-primary > button { position: relative; z-index: 1; min-width: 14rem; padding: .92rem 1.1rem; box-shadow: 0 10px 28px #55dbcf27; }
.home-key-list { display: flex; flex-wrap: wrap; gap: .38rem; }
.home-key-list kbd { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: .28rem .42rem; border: 1px solid #526771; border-radius: 5px; color: #e4edef; background: #101a20; font: 800 .85rem/1 ui-monospace, Menlo, Consolas, monospace; }
.home-progress { display: grid; align-content: space-between; gap: 1rem; padding: 1.4rem; }
.home-progress h2 { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0 0; }
.home-progress h2 strong { color: #55dbcf; font: 900 clamp(2.8rem, 6vw, 4.8rem)/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: -.08em; }
.home-progress h2 span { color: #91a1a9; font-size: 1rem; }
.home-progress-track { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #243139; }
.home-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55dbcf, #9af3ea); transition: width .5s ease; }
.home-progress dl { display: grid; gap: .65rem; margin: 0; }
.home-progress dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .65rem; border-top: 1px solid #28363e; }
.home-progress dt { color: #8f9fa7; font-size: .85rem; }
.home-progress dd { margin: 0; color: #e6edef; font-weight: 800; }
.home-remedial { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 7.4rem; padding: 1.2rem 1.4rem; }
.home-remedial > div { display: grid; gap: .35rem; }
.home-remedial h2 { margin: 0; font-size: 1.1rem; }
.home-remedial span { color: #8f9fa7; font-size: .88rem; line-height: 1.5; }
.home-remedial:not(.available) { opacity: .7; }
.home-remedial button { min-width: 13rem; }
.home-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: .2rem .35rem 0; }
select { background: #1c242b; border: 1px solid #46545d; border-radius: 7px; color: #f3f5f6; padding: .47rem .68rem; min-height: 44px; }
.chapter-control select { min-width: 4.2rem; min-height: 36px; margin-left: .25rem; padding: .3rem .55rem; }
.chapter-picker-screen { min-height: calc(100vh - 130px); padding: 2.2rem 0; }
.chapter-picker-head { display: grid; gap: .55rem; max-width: 48rem; padding: 0 .35rem 1.4rem; }
.chapter-picker-head p { margin: 0; color: #9aaab3; line-height: 1.7; }
.chapter-picker-head p:first-child { color: #f7be63; font: 800 .84rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .13em; }
.chapter-picker-head h1 { margin: 0; font-size: clamp(2.15rem, 5vw, 4.2rem); letter-spacing: -.055em; }
.chapter-continue { display: grid; gap: .55rem; max-width: 70rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid #665337; border-radius: 13px; background: linear-gradient(105deg, #211c14, #111820 78%); }
.chapter-continue h2 { margin: 0; color: #f0cb72; font-size: .95rem; }
.chapter-continue-button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem 1rem; width: 100%; padding: .9rem 1rem; border-color: #8a6a36; color: #f3f5f6; background: #101820; text-align: left; }
.chapter-continue-button:hover { border-color: #f7be63; background: #17212a; }
.continue-number { color: #f7be63; font-size: 1.2rem; font-weight: 900; white-space: nowrap; }
.continue-copy { display: grid; gap: .25rem; min-width: 0; }
.continue-copy strong { font-size: 1rem; }
.continue-copy small, .continue-mastery small { color: #a9b7bd; font-size: .84rem; }
.continue-mastery { display: grid; justify-items: end; gap: .2rem; }
.continue-mastery strong { color: #ffd45c; font-size: 1.2rem; }
.chapter-list { display: grid; gap: .8rem; max-width: 70rem; padding: 0 .35rem 2rem; }
.course-group { min-width: 0; overflow: hidden; border: 1px solid #34444d; border-radius: 13px; background: linear-gradient(145deg, #111a20, #0c1319 72%); box-shadow: inset 0 1px #ffffff08, 0 12px 28px #0002; }
.course-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4.4rem; padding: .9rem 1rem; border: 0; border-radius: 0; color: #edf3f5; background: transparent; text-align: left; }
.course-toggle:hover { background: #18232a; filter: none; }
.course-toggle-label { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; min-width: 0; }
.course-range { color: #f1d096; font-weight: 850; }
.course-summary { color: #a9b7bd; font-size: .88rem; font-weight: 650; }
.course-status { padding: .22rem .45rem; border: 1px solid #40525c; border-radius: 999px; color: #b5c1c6; font-size: .78rem; font-weight: 750; }
.course-status.complete { border-color: #377d68; color: #9de5c7; background: #10261f; }
.course-indicator { flex: 0 0 auto; color: #f7be63; font-size: 1.4rem; font-weight: 500; line-height: 1; }
.course-chapters { display: grid; gap: .55rem; margin: 0 .85rem .9rem 1.1rem; padding: .85rem 0 .15rem 1rem; border-left: 2px solid #40525c; }
.course-chapters[hidden] { display: none; }
.course-chapters .chapter-card { width: 100%; min-width: 0; min-height: 0; grid-template-columns: minmax(4.2rem, auto) minmax(0, 1fr) auto; align-items: center; gap: .45rem .8rem; padding: .75rem .9rem; }
.course-chapters .chapter-number { grid-column: 1; grid-row: 1; min-height: 1.4rem; }
.course-chapters .chapter-badge { grid-column: 3; grid-row: 1; }
.course-chapters .chapter-card strong { grid-column: 2; grid-row: 1; min-height: 0; }
.course-chapters .chapter-card kbd { grid-column: 1; grid-row: 2; }
.course-chapters .chapter-card small { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
.course-chapters .chapter-mastery { grid-column: 2 / -1; grid-row: 3; }
.chapter-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .55rem .75rem; min-height: 10.7rem; padding: 1rem; border: 1px solid #34444d; border-radius: 12px; color: #edf3f5; background: linear-gradient(145deg, #131e25, #0c1319); text-align: left; box-shadow: inset 0 1px #ffffff0a, 0 12px 28px #0003; }
.chapter-card:hover { border-color: #55dbcf; background: linear-gradient(145deg, #16262d, #0d171d); }
.chapter-card.current { border-color: #f7be63; box-shadow: inset 0 1px #ffffff0f, 0 0 0 1px #f7be6330, 0 12px 28px #0003; }
.chapter-card.passed { border-color: #3aa985; background: linear-gradient(145deg, #112924, #0c1717); }
.chapter-card.passed.current { box-shadow: inset 0 1px #ffffff0f, 0 0 0 1px #f7be6330, 0 12px 28px #0003; }
.chapter-card.locked { opacity: .42; cursor: not-allowed; filter: saturate(.45); }
.chapter-card.locked:hover { border-color: #34444d; background: linear-gradient(145deg, #131e25, #0c1319); }
.chapter-card.purchase-locked { opacity: .68; cursor: pointer; filter: saturate(.72); border-style: dashed; }
.chapter-card.purchase-locked:hover { opacity: .9; border-color: #f7be63; }
.chapter-card.purchase-locked .chapter-badge { color: #25180a; background: #f7be63; border-color: #ffd992; }
.chapter-number { display: flex; align-items: baseline; gap: .38rem; min-height: 1.8rem; color: #9cabb3; font-family: ui-monospace, Menlo, Consolas, monospace; }
.chapter-label { font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.chapter-value { color: #dce8ea; font-size: 1.55rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.chapter-suffix { font-size: .84rem; font-weight: 800; letter-spacing: .08em; }
.chapter-badge { justify-self: end; padding: .28rem .42rem; border: 1px solid #3f6870; border-radius: 4px; color: #76e5db; background: #13262b; font: 800 .75rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.chapter-card.review .chapter-badge { border-color: #5c5b78; color: #c9c4ff; background: #201f34; }
.chapter-card.passed .chapter-badge { padding: .3rem .48rem .26rem; border: 2px solid #c94d4d; border-radius: 3px; color: #ffaaa2; background: #3a1718; box-shadow: inset 0 0 0 1px #ffb0a333; font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: .82rem; font-weight: 900; letter-spacing: .14em; line-height: 1; transform: rotate(-3deg); }
.chapter-card strong { grid-column: 1 / -1; min-height: 2.5em; font-size: 1rem; line-height: 1.35; }
.chapter-card kbd { width: fit-content; padding: .36rem .48rem; border: 1px solid #40525c; border-radius: 5px; color: #f7be63; background: #091117; font: 800 .9rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.chapter-card small { grid-column: 1 / -1; color: #9fafb7; font-size: .875rem; line-height: 1.5; }
.chapter-mastery { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.85rem; margin-top: -.2rem; padding: .26rem .5rem; border: 1px solid #34434a; border-radius: 6px; color: #95a5ac; background: #0b1318; font-size: .78rem; }
.chapter-mastery-score { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.chapter-mastery-stars { display: inline-flex; align-items: center; gap: .08em; font-size: 1.25rem; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.chapter-mastery-star.earned { color: #ffd45c; text-shadow: 0 0 7px #ffcb4b66; }
.chapter-mastery-star.unearned { color: #4a545c; text-shadow: none; }
.chapter-mastery-fraction { min-width: 2.4em; min-height: 0 !important; color: #f0cb72; font-size: .92rem; font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .02em; line-height: 1; text-align: right; }
.chapter-mastery.rated { border-color: #78603a; background: #211c14; }
.briefing-mastery { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid #78603a; border-radius: 10px; color: #e5e0d2; background: linear-gradient(100deg, #211c14, #111820 78%); }
.briefing-mastery[hidden] { display: none; }
.briefing-mastery > div { display: flex; align-items: baseline; gap: .75rem; }
.briefing-mastery p { margin: 0; color: #c7b17e; font-size: .86rem; font-weight: 800; }
.briefing-mastery strong { color: #ffd45c; font-size: 1.4rem; letter-spacing: .08em; }
.briefing-mastery b { color: #f0cb72; font: 900 .95rem/1 ui-monospace, Menlo, Consolas, monospace; }
.briefing-mastery > span { color: #b9c3c7; font-size: .86rem; line-height: 1.45; text-align: right; }
.onboarding-screen { min-height: calc(100vh - 130px); display: grid; align-content: center; gap: 1.15rem; padding: 2.2rem 0; }
.onboarding-screen[hidden] { display: none; }
.onboarding-head { display: grid; gap: .55rem; width: min(100%, 57rem); max-width: 57rem; margin-inline: auto; padding: 0 .35rem; }
.onboarding-head > p:first-child, .onboarding-card > p:first-child { margin: 0; color: #f7be63; font: 800 .84rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .13em; }
.onboarding-head h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 4.35rem); letter-spacing: -.055em; }
.onboarding-head > p:last-child { max-width: 52rem; margin: 0; color: #9aaab3; font-size: 1rem; line-height: 1.7; }
.onboarding-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; width: min(100%, 58rem); max-width: 58rem; margin-inline: auto; }
.onboarding-card { display: grid; align-content: start; gap: .75rem; min-width: 0; min-height: 365px; padding: 1.35rem; border: 1px solid #34444d; border-radius: 15px; background: linear-gradient(145deg, #131e25, #0c1319 70%); box-shadow: inset 0 1px #ffffff0a, 0 18px 42px #0005; }
.onboarding-card[hidden] { display: none; }
.onboarding-card h2 { margin: 0; font-size: 1.3rem; }
.onboarding-card > p:not(:first-child) { margin: 0; color: #b4c2c9; font-size: .94rem; line-height: 1.6; }
.onboarding-about { align-content: center; gap: 1rem; min-height: 430px; }
.onboarding-about h2 { max-width: 44rem; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.35; letter-spacing: -.025em; }
.onboarding-about > p:not(:first-child) { max-width: 48rem; font-size: 1rem; }
.onboarding-contrast { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .65rem; padding: .75rem .9rem; border: 1px solid #344850; border-radius: 11px; background: #091217; text-align: center; }
.onboarding-contrast code { color: #718087; font: 700 .88rem/1.35 ui-monospace, Menlo, Consolas, monospace; text-decoration: line-through; text-decoration-color: #ff6f9180; }
.onboarding-contrast i { color: #84949b; font-size: .76rem; font-style: normal; }
.onboarding-contrast strong { color: #55dbcf; font-size: .98rem; letter-spacing: .04em; }
.onboarding-about-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.onboarding-about-points li { display: grid; align-content: start; gap: .45rem; min-height: 7.5rem; padding: 1rem; border: 1px solid #344850; border-radius: 11px; color: #aebdc3; background: #091217; }
.onboarding-about-points strong { color: #f7be63; font-size: 1rem; }
.onboarding-about-points span { font-size: .9rem; line-height: 1.55; }
.onboarding-about .onboarding-outcome { max-width: none; padding-left: .9rem; border-left: 3px solid #55dbcf; color: #d5e4e7; }
.onboarding-outcome b { color: #f7be63; }
.onboarding-keyboard { margin-top: .4rem; }
.onboarding-home { min-height: 520px; }
.onboarding-home .onboarding-keyboard { justify-items: center; width: min(100%, 49rem); margin: .4rem auto 0; }
.onboarding-home .briefing-key.right-hand { margin-left: 0; }
.onboarding-home .briefing-key.learned:not(.target) { color: #d2e4e7; border-color: #52727a; background: #223840; }
.onboarding-finger-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; width: min(100%, 45rem); margin: .35rem auto 0; }
.onboarding-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; padding: .65rem; border: 1px solid #2e3e46; border-radius: 10px; background: #091217; }
.onboarding-hand h3 { grid-column: 1 / -1; margin: 0; color: #9aabb2; font-size: .78rem; letter-spacing: .08em; }
.onboarding-finger-row { display: grid; justify-items: center; gap: .3rem; min-width: 0; color: #aabac0; font-size: .76rem; line-height: 1.15; text-align: center; }
.onboarding-finger-row kbd, .onboarding-thumb kbd { display: grid; place-items: center; min-width: 2rem; min-height: 1.85rem; padding: .15rem .35rem; border: 1px solid #50636c; border-radius: 5px; color: #e4edf0; background: #172329; font: 800 .82rem/1 ui-monospace, Menlo, Consolas, monospace; }
.onboarding-finger-row:not(.home) kbd { border-color: #52727a; color: #d7e9eb; background: linear-gradient(145deg, #29444d, #1d3037); box-shadow: inset 0 1px #ffffff10; }
.onboarding-finger-row.home kbd { border-color: #55dbcf; color: #071315; background: #55dbcf; box-shadow: 0 0 12px #55dbcf2f; }
.onboarding-thumb { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.65rem; padding: .38rem .7rem; border: 1px solid #2e3e46; border-radius: 10px; color: #aabac0; font-size: .82rem; background: #0a1419; }
.onboarding-thumb kbd { min-width: 5.5rem; }
.onboarding-motion { justify-items: center; text-align: center; }
.onboarding-motion > p:not(:first-child) { max-width: 39rem; }
.onboarding-motion-board { display: grid; justify-items: center; gap: .8rem; width: min(100%, 43rem); margin-top: auto; }
.onboarding-motion-route { display: flex; align-items: center; justify-content: center; gap: .55rem; color: #9eafb6; font: 800 .92rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.onboarding-motion-route span, .onboarding-motion-route b { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #576973; border-radius: 50%; }
.onboarding-motion-route b { color: #071012; border-color: #b1fff7; background: #55dbcf; box-shadow: 0 0 16px #55dbcf42; }
.onboarding-motion-route i { position: relative; width: 6.5rem; height: 2px; overflow: hidden; background: #3c5058; }
.onboarding-motion-route i::after { content: ''; position: absolute; inset: -2px auto -2px -35%; width: 35%; border-radius: 999px; background: #f7be63; animation: onboarding-route 2.6s ease-in-out infinite; }
.onboarding-motion-route i:nth-of-type(2)::after { animation-delay: 1.3s; }
@keyframes onboarding-route { 0%, 15% { transform: translateX(0); opacity: 0; } 25%, 60% { opacity: 1; } 72%, 100% { transform: translateX(380%); opacity: 0; } }
.onboarding-questions { display: grid; gap: .55rem; }
.onboarding-question { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; margin: 0; padding: .55rem 0; border: 0; border-bottom: 1px solid #2a363e; }
.onboarding-question:last-child { border-bottom: 0; }
.onboarding-question legend { grid-column: 1 / -1; color: #dce5e8; font-size: .94rem; }
.onboarding-question label { display: grid; grid-template-columns: 0 1fr; min-width: 3.9rem; overflow: hidden; border: 1px solid #3c4c54; border-radius: 7px; color: #aebdc3; background: #0b1217; cursor: pointer; }
.onboarding-question input { width: 0; height: 0; opacity: 0; }
.onboarding-question strong { padding: .43rem .62rem; font: 800 .92rem/1 ui-monospace, Menlo, Consolas, monospace; text-align: center; }
.onboarding-question label:has(input:checked) { border-color: #55dbcf; color: #081317; background: #55dbcf; box-shadow: 0 0 14px #55dbcf28; }
.onboarding-personalize { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); gap: 1rem; align-items: start; margin-top: .2rem; }
.onboarding-choice-section, .onboarding-theme-section { display: grid; align-content: start; gap: .55rem; min-width: 0; padding: .8rem; border: 1px solid #2a363e; border-radius: 11px; background: #091117aa; }
.onboarding-choice-section h3, .onboarding-theme-section h3 { margin: 0; color: #dce5e8; font-size: .96rem; }
.onboarding-choice-section > p, .onboarding-theme-section > p { margin: 0; color: #8fa0a8; font-size: .8rem; line-height: 1.5; }
.onboarding-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; margin-top: .25rem; }
.onboarding-theme-options label { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem; border: 1px solid #3c4c54; border-radius: 8px; color: #aebdc3; background: #0b1217; cursor: pointer; }
.onboarding-theme-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.onboarding-theme-options label:has(input:checked) { border-color: #55dbcf; color: #e8ffff; background: #152a2d; box-shadow: 0 0 14px #55dbcf28; }
.onboarding-theme-options .theme-swatch { width: 1.75rem; height: 1.75rem; }
.onboarding-theme-options span { display: grid; gap: .12rem; min-width: 0; }
.onboarding-theme-options strong { font-size: .82rem; line-height: 1.2; }
.onboarding-theme-options small { color: inherit; font-size: .7rem; line-height: 1.3; opacity: .75; }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 58rem); max-width: 58rem; margin-inline: auto; padding: .15rem .35rem 0; }
.onboarding-actions p { margin: 0; color: #84939b; font-size: .9rem; line-height: 1.55; }
.onboarding-actions button { min-width: 13rem; padding: .8rem 1.15rem; box-shadow: 0 8px 24px #55dbcf25; }
.onboarding-navigation { display: flex; align-items: center; gap: .6rem; }
.onboarding-navigation .quiet { min-width: 0; box-shadow: none; }
.lesson-briefing { min-height: calc(100vh - 130px); display: grid; align-content: center; gap: 1rem; padding: 2.2rem 0; }
.briefing-head { display: grid; gap: .55rem; padding: 0 .35rem; }
.briefing-kicker, .briefing-key-card > p, .briefing-plan > p, .briefing-words p { margin: 0; color: #f7be63; font: 800 .84rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .13em; }
.briefing-head h1 { margin: 0; font-size: clamp(2.15rem, 5vw, 4.2rem); letter-spacing: -.055em; }
.briefing-lead { max-width: 47rem; margin: 0; color: #9aaab3; font-size: 1rem; line-height: 1.7; }
.briefing-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 1rem; }
.briefing-key-card, .briefing-plan, .briefing-words { border: 1px solid #34444d; border-radius: 15px; background: linear-gradient(145deg, #131e25, #0c1319 70%); box-shadow: inset 0 1px #ffffff0a, 0 18px 42px #0005; }
.briefing-key-card { position: relative; display: grid; justify-items: center; align-content: center; gap: .7rem; min-height: 215px; padding: 1.35rem; overflow: hidden; text-align: center; }
.briefing-key-card::after { content: ''; position: absolute; right: -8%; bottom: -42%; width: 240px; aspect-ratio: 1; border: 1px solid #55dbcf3b; border-radius: 50%; box-shadow: 0 0 0 32px #55dbcf08, 0 0 0 64px #55dbcf05; pointer-events: none; }
.briefing-key-card h2 { position: relative; z-index: 1; margin: 0; font-size: 1.1rem; }
.briefing-target { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.briefing-target span { display: grid; place-items: center; min-width: 3.1rem; min-height: 3rem; padding: .35rem .65rem; border: 1px solid #8bf4ea; border-radius: 8px; color: #0a1b20; background: #55dbcf; box-shadow: 0 0 22px #55dbcf31; font: 900 clamp(1.4rem, 3vw, 2rem)/1 ui-monospace, Menlo, Consolas, monospace; }
.briefing-key-card code { position: relative; z-index: 1; width: fit-content; padding: .4rem .55rem; border-radius: 6px; color: #b7c5cc; background: #081015a8; font-size: .9rem; letter-spacing: .09em; }
.briefing-finger-guide { position: relative; z-index: 1; margin: .1rem 0 0; color: #bfd0d5; font-size: .9rem; line-height: 1.55; }
.briefing-keyboard {
  --briefing-key-size: clamp(19px, 2.35vw, 42px);
  --briefing-key-gap: clamp(3px, .38vw, 7px);
  --briefing-key-pitch: calc(var(--briefing-key-size) + var(--briefing-key-gap));
  --briefing-hand-gap: clamp(8px, 1.4vw, 22px);
  --briefing-left-gutter: var(--briefing-key-pitch);
  --briefing-right-gutter: calc(var(--briefing-key-pitch) * 2);
  --briefing-core-width: calc(13 * var(--briefing-key-size) + 12 * var(--briefing-key-gap) + var(--briefing-hand-gap));
  --briefing-keyboard-width: calc(var(--briefing-left-gutter) + var(--briefing-core-width) + var(--briefing-right-gutter));
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--briefing-key-gap);
  width: min(100%, calc(var(--briefing-keyboard-width) + 1.6rem + 2px));
  max-width: 100%;
  margin-top: auto;
  padding: .7rem .8rem;
  overflow: hidden;
  border: 1px solid #2e414a;
  border-radius: 9px;
  background: #091117b8;
}
.briefing-key-row { position: relative; display: flex; justify-content: flex-start; gap: var(--briefing-key-gap); width: var(--briefing-keyboard-width); padding-left: var(--briefing-left-gutter); }
.briefing-row-upper { padding-left: calc(var(--briefing-left-gutter) + var(--briefing-key-pitch) * .5); }
.briefing-row-home { padding-left: calc(var(--briefing-left-gutter) + var(--briefing-key-pitch)); }
.briefing-row-lower { padding-left: calc(var(--briefing-left-gutter) + var(--briefing-key-pitch) * 1.5); }
.briefing-row-space { justify-content: center; width: var(--briefing-keyboard-width); padding-left: 0; }
.briefing-key { display: grid; place-items: center; width: var(--briefing-key-size); min-width: var(--briefing-key-size); height: calc(var(--briefing-key-size) * .94); border: 1px solid #33434c; border-radius: calc(var(--briefing-key-size) * .12); color: #809099; background: #11191f; font: 800 clamp(.56rem, 1.35vw, 1rem)/1 ui-monospace, Menlo, Consolas, monospace; }
.briefing-key.learned { color: #c7d4d8; border-color: #47616a; background: #19262b; }
.briefing-key.target { color: #071012; border-color: #b1fff7; background: #55dbcf; box-shadow: 0 0 0 2px #55dbcf2e, 0 0 18px #55dbcf3a; }
.briefing-key[data-base-label] { position: relative; font-size: clamp(.9rem, 2vw, 1.45rem); }
.briefing-key[data-base-label]::after { content: attr(data-base-label); position: absolute; left: 3px; top: 2px; color: #17484a; font: 800 clamp(.38rem, .7vw, .55rem)/1 ui-monospace, Menlo, Consolas, monospace; }
.briefing-key.home { border-bottom: 3px solid #f7be63; }
.briefing-key.right-hand { margin-left: var(--briefing-hand-gap); }
.briefing-key.modifier { width: calc(var(--briefing-key-size) * 1.8 + var(--briefing-key-gap)); font-size: clamp(.48rem, 1vw, .75rem); }
.briefing-row-lower .briefing-key.modifier { position: absolute; top: 0; }
.briefing-row-lower .briefing-key.modifier:first-child {
  left: calc(var(--briefing-left-gutter) + var(--briefing-key-pitch) * 1.5 - (var(--briefing-key-size) * 1.8 + var(--briefing-key-gap)) - var(--briefing-key-gap));
}
.briefing-row-lower .briefing-key.modifier:last-child {
  left: calc(var(--briefing-left-gutter) + var(--briefing-key-pitch) * 1.5 + 11 * var(--briefing-key-size) + 10 * var(--briefing-key-gap) + var(--briefing-hand-gap) + var(--briefing-key-gap));
}
.briefing-key.space { width: calc(var(--briefing-key-size) * 5.7 + var(--briefing-key-gap) * 4); font-size: clamp(.48rem, 1vw, .75rem); }
.briefing-plan { padding: 1.35rem; }
.briefing-plan ol { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.briefing-plan li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .6rem; align-items: center; min-height: 2.85rem; border-bottom: 1px solid #2a363e; color: #d5dfe3; }
.briefing-plan li:last-child { border-bottom: 0; }
.briefing-plan strong { color: #55dbcf; font: 800 .86rem/1 ui-monospace, Menlo, Consolas, monospace; }
.briefing-plan span { font-size: .94rem; }
.briefing-words { padding: 1.25rem 1.35rem; }
.briefing-words h2 { margin: .2rem 0 0; font-size: 1.16rem; }
.briefing-word-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.briefing-word-list span { padding: .48rem .7rem; border: 1px solid #34434c; border-radius: 999px; color: #e7edef; background: #111a20; font-size: .98rem; }
.briefing-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .35rem 0; color: #819099; font-size: .9rem; }
.briefing-actions button { min-width: 13rem; padding: .8rem 1.15rem; box-shadow: 0 8px 24px #55dbcf25; }
.play { position: relative; min-height: calc(100vh - 130px); display: grid; grid-template-rows: auto minmax(260px, 1fr) minmax(2.5rem, auto) minmax(220px, auto); align-content: center; padding: 1rem 0; }
.practice-controls { position: fixed; z-index: 20; top: max(5.6rem, env(safe-area-inset-top)); right: .7rem; display: grid; gap: .4rem; justify-items: end; }
.practice-control { min-width: 6.7rem; padding: .48rem .65rem; border-color: #40515a; color: #aebcc2; background: #0c1419e8; box-shadow: 0 5px 18px #0005; font-size: .78rem; opacity: .62; backdrop-filter: blur(8px); transition: opacity .18s ease, border-color .18s ease, color .18s ease; }
.practice-control:hover, .practice-control:focus-visible { color: #e5eff1; border-color: #6d838d; opacity: 1; }
.practice-control.abort { color: #d8a09d; border-color: #67413f; background: #1a1112e8; }
.practice-control.abort:hover, .practice-control.abort:focus-visible { color: #ffd7d3; border-color: #a95a55; }
:fullscreen .practice-controls { top: max(.8rem, env(safe-area-inset-top)); }
:-webkit-full-screen .practice-controls { top: max(.8rem, env(safe-area-inset-top)); }
html.ql-ipad-fullscreen, html.ql-ipad-fullscreen body { width: 100%; height: 100%; overflow: hidden; }
html.ql-ipad-fullscreen .shell { width: 100%; max-width: none; height: 100dvh; overflow: auto; overscroll-behavior: none; padding-top: max(.8rem, env(safe-area-inset-top)); padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
html.ql-ipad-fullscreen .mast { display: none; }
html.ql-ipad-fullscreen .play { min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 0; }
html.ql-ipad-fullscreen .practice-controls { top: max(.8rem, env(safe-area-inset-top)); }
.focus-exit { display: none; }
html.ql-ipad-fullscreen .focus-exit { display: block; position: fixed; z-index: 20; top: max(.8rem, env(safe-area-inset-top)); right: max(.8rem, env(safe-area-inset-right)); }
@media (min-width: 651px) and (orientation: landscape) {
  html.ql-ipad-fullscreen .play.word-drill,
  html.ql-ipad-fullscreen .play.roman-drill {
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
    grid-template-rows: auto minmax(72px, 1fr) minmax(1.7rem, auto) minmax(220px, auto);
    overflow: hidden;
  }
  html.ql-ipad-fullscreen .play.word-drill .practice-stage,
  html.ql-ipad-fullscreen .play.roman-drill .practice-stage { padding-block: .5rem; }
  html.ql-ipad-fullscreen .play.word-drill .keyboard,
  html.ql-ipad-fullscreen .play.roman-drill .keyboard { --key-size: 29px; --key-gap: .2rem; gap: .22rem; overflow: visible; padding: 0; }
  html.ql-ipad-fullscreen .play.word-drill .keyboard-stage,
  html.ql-ipad-fullscreen .play.roman-drill .keyboard-stage { align-self: start; }
  html.ql-ipad-fullscreen .play.word-drill .key,
  html.ql-ipad-fullscreen .play.roman-drill .key { min-height: 31px; font-size: 1.1rem; }
  html.ql-ipad-fullscreen .play.word-drill .key.space,
  html.ql-ipad-fullscreen .play.roman-drill .key.space { width: 220px; font-size: .7rem; }
  html.ql-ipad-fullscreen .play.word-drill .key.modifier,
  html.ql-ipad-fullscreen .play.roman-drill .key.modifier { width: 86px; font-size: .72rem; }
}
/* Mac の集中表示は画面に余裕があるため、鍵盤を通常練習に近い大きさへ戻す。 */
@media (min-width: 1200px) and (orientation: landscape) {
  html.ql-ipad-fullscreen .play.word-drill,
  html.ql-ipad-fullscreen .play.roman-drill {
    grid-template-rows: auto minmax(100px, 1fr) minmax(2.25rem, auto) minmax(310px, auto);
  }
  html.ql-ipad-fullscreen .play.word-drill .keyboard,
  html.ql-ipad-fullscreen .play.roman-drill .keyboard { --key-size: 46px; --key-gap: .42rem; gap: .46rem; }
  html.ql-ipad-fullscreen .play.word-drill .key,
  html.ql-ipad-fullscreen .play.roman-drill .key { min-height: 48px; font-size: 1.5rem; }
  html.ql-ipad-fullscreen .play.word-drill .key.space,
  html.ql-ipad-fullscreen .play.roman-drill .key.space { width: 320px; font-size: .86rem; }
  html.ql-ipad-fullscreen .play.word-drill .key.modifier,
  html.ql-ipad-fullscreen .play.roman-drill .key.modifier { width: 106px; font-size: .86rem; }
}
.lesson-meta { display: flex; justify-content: space-between; align-items: center; min-height: 28px; padding: 0 .3rem; transition: opacity .5s ease; }
.mode { color: #93a2ab; font-size: .92rem; }
.stats { font-size: .88rem; color: #687680; }
.practice-stage { --practice-font: clamp(1.65rem, 3.6vw, 2.6rem); position: relative; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; row-gap: .12em; min-width: 0; overflow: hidden; padding: clamp(.35rem, 1.4vh, .75rem) 1.2rem 1rem; border-top: 1px solid #222a31; border-bottom: 1px solid #222a31; cursor: text; outline: none; transition: border-color .5s ease; }
.practice-stage:focus { border-color: #34434c; }
.session-progress { position: absolute; z-index: 4; left: 1.2rem; right: 1.2rem; bottom: .65rem; height: 5px; overflow: hidden; border-radius: 999px; background: #263138; opacity: 0; transition: opacity .3s ease; }
.session-progress span { display: block; width: 100%; height: 100%; background: #55dbcf80; transform: scaleX(1); transform-origin: left center; }
.play.word-drill .session-progress { opacity: .65; }
.debug-timer { display: none; position: absolute; z-index: 5; top: 1rem; right: 1.2rem; min-width: 4.4ch; padding: .24rem .5rem; border: 1px solid #f7be63; border-radius: 5px; color: #10151a; background: #f7be63; font: 900 1.65rem/1 ui-monospace, Menlo, Consolas, monospace; text-align: center; box-shadow: 0 0 18px #f7be6340; }
.play.debug-mode.word-drill .debug-timer { display: block; }
.word-line { display: grid; grid-auto-rows: min-content; gap: .28em; width: 100%; min-width: 0; max-width: 100%; font-size: var(--practice-font); line-height: 1.55; letter-spacing: .015em; white-space: normal; }
.practice-row-pair { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .08em; width: 100%; min-width: 0; }
.input-line { display: grid; align-items: start; width: max-content; max-width: 100%; min-width: 0; height: 1.72em; min-height: 1.72em; box-sizing: border-box; margin-top: .04em; padding-top: .04em; overflow: hidden; border-top: 1px solid transparent; color: #55dbcf; font-size: var(--practice-font); font-weight: 620; line-height: 1.55; letter-spacing: .015em; white-space: nowrap; }
.input-entry { display: block; justify-self: start; width: max-content; max-width: none; min-width: .12em; min-height: 1.55em; white-space: nowrap; vertical-align: top; }
.input-current { color: #55dbcf; }
.play.word-drill .word-line { grid-row: 1; }
.play.word-drill .practice-stage { padding-bottom: max(2rem, calc(5px + 1.25rem)); }
.play.word-drill .session-progress { position: absolute; grid-row: auto; left: 1.2rem; right: 1.2rem; bottom: .75rem; width: auto; margin: 0; }
@media (min-width: 651px) and (max-width: 1199px) and (orientation: portrait) {
  .play.word-drill {
    height: var(--practice-viewport-height, calc(100dvh - 180px));
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) minmax(2.5rem, auto) minmax(220px, auto);
  }
}
.practice-row { display: grid; align-items: start; width: max-content; max-width: 100%; min-width: 0; }
.line-word, .line-separator { position: relative; display: block; min-height: 1.65em; color: #aeb8be; border-radius: .12em; padding: 0; font-size: var(--practice-font); font-weight: 620; line-height: 1.55; letter-spacing: .015em; transition: color .14s ease; }
.line-separator { justify-self: start; width: 1em; min-width: 1em; max-width: 1em; box-sizing: border-box; white-space: pre; letter-spacing: 0; }
.line-separator.half-space { width: .48em; min-width: .48em; max-width: .48em; }
.line-word.active, .line-separator.active { color: #fff; }
.line-word.active::after, .line-separator.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: .08em; height: .08em; min-height: 3px; border-radius: 999px; background: #55dbcf; pointer-events: none; }
.line-word.done, .line-separator.done { color: #55dbcf; }
.prompt-complete { color: #55dbcf; }
.prompt-pending { color: inherit; }
.input-word, .input-separator { display: block; width: auto; min-width: 0; min-height: 1.55em; overflow: visible; padding: 0; color: #55dbcf; font-size: var(--practice-font); font-weight: 620; line-height: 1.55; letter-spacing: .015em; }
.input-word .composition, .input-separator .composition { color: #f3f5f6; }
.caret { display: inline-block; height: 1.1em; margin-left: .12em; border-right: 2px solid #f7be63; vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
.practice-stage.wrong { animation: shake .25s; }
.feedback { min-height: 2.5rem; color: #f2b58e; text-align: center; padding: .65rem 1rem 0; font-size: .96rem; opacity: 0; transition: opacity .18s ease; }
.feedback.visible { opacity: 1; }
.keyboard-stage { position: relative; align-self: end; min-width: 0; transition: opacity .55s ease; }
.keyboard {
  --key-size: 52px;
  --key-gap: .56rem;
  --key-pitch: calc(var(--key-size) + var(--key-gap));
  --hand-gap: var(--key-gap);
  --keyboard-left-gutter: var(--key-pitch);
  --keyboard-right-gutter: calc(var(--key-pitch) * 2);
  --keyboard-core-width: calc(13 * var(--key-size) + 11 * var(--key-gap) + var(--hand-gap));
  --keyboard-width: calc(var(--keyboard-left-gutter) + var(--keyboard-core-width) + var(--keyboard-right-gutter));
  position: relative;
  z-index: 2;
  display: grid;
  gap: .62rem;
  justify-content: center;
  overflow: auto;
  padding: 1.4rem 0 .5rem;
}
.keyboard.split { --hand-gap: clamp(1.45rem, 3.5vw, 2.8rem); }
.key-row { display: grid; justify-content: start; width: var(--keyboard-width); padding-left: var(--keyboard-left-gutter); column-gap: var(--hand-gap); }
.keyboard-row-number { grid-template-columns: calc(5 * var(--key-size) + 4 * var(--key-gap)) calc(8 * var(--key-size) + 7 * var(--key-gap)); }
.keyboard-row-upper, .keyboard-row-home { grid-template-columns: calc(5 * var(--key-size) + 4 * var(--key-gap)) calc(7 * var(--key-size) + 6 * var(--key-gap)); }
.keyboard-row-upper { padding-left: calc(var(--keyboard-left-gutter) + var(--key-pitch) * .5); }
.keyboard-row-home { padding-left: calc(var(--keyboard-left-gutter) + var(--key-pitch)); }
.keyboard-row-lower { grid-template-columns: calc(5 * var(--key-size) + 4 * var(--key-gap)) calc(6 * var(--key-size) + 5 * var(--key-gap)); padding-left: calc(var(--keyboard-left-gutter) + var(--key-pitch) * 1.5); }
.keyboard-row-space { display: flex; justify-content: center; width: var(--keyboard-width); padding-left: 0; }
.play .keyboard .key-row:has(> .thumb-group) { display: flex; justify-content: center; padding-left: 0; }
.hand-group { position: relative; display: flex; gap: var(--key-gap); }
/* Shift は文字列の外側へ絶対配置し、Z〜記号キーの基準位置や B/N 境界を動かさない。 */
.lower-modifier-row .key.modifier { position: absolute; top: 0; }
.lower-modifier-row .left-hand .key.modifier { right: calc(100% + var(--key-gap)); }
.lower-modifier-row .right-hand .key.modifier { left: calc(100% + var(--key-gap)); }
.key-row.modifier-row { display: flex; align-items: center; justify-content: center; gap: var(--key-gap); margin-top: calc(var(--key-gap) * -.12); }
.key-row.modifier-row .hand-group { transform: none; }
.key-row.modifier-row .hand-group:nth-child(2) { margin-inline: calc(var(--key-gap) * .8); }
.key { position: relative; display: grid; place-items: center; width: var(--key-size); min-width: var(--key-size); min-height: 53px; border: 1px solid #39434a; border-radius: 6px; color: transparent; background: #181e23; font: 900 1.8rem/1 ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; transition: background .08s, border-color .08s, transform .08s, color .18s; user-select: none; }
.key.target { border-color: #48666b; background: #1c292c; }
.key.learned { background: #1c2328; }
.key.unavailable { opacity: .2; }
.key.home { border-bottom-color: #6eaaa5; border-bottom-width: 2px; }
.key.home::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 9px; height: 2px; border-radius: 2px; background: #79b9b3; transform: translateX(-50%); opacity: .85; }
.key.hint { color: #9fc2c4; border-color: #547378; background: #1c2a2e; box-shadow: inset 0 0 0 1px #7ed6d028; }
.key.next { background: #55dbcf; border-color: #9cfff6; box-shadow: 0 0 0 3px #55dbcf26, 0 0 22px #55dbcf33; transform: translateY(2px); }
.play.word-drill .keyboard.support-full .key.learned { color: #9fc2c4; }
.play.word-drill .keyboard.support-guided .key.home,
.play.word-drill .keyboard.support-guided .key.hint { color: #9fc2c4; }
.play.word-drill .keyboard.support-guided .key.next { color: #071012; }
.key.next[data-shift-symbol]::after, .key.guide-target[data-shift-symbol]::after { content: attr(data-shift-symbol); display: grid; place-items: center; position: absolute; inset: 5px; border-radius: 4px; color: #071012; font: 950 2rem/1 ui-monospace, Menlo, Consolas, monospace; background: inherit; }
.key.next.reveal { color: #071012; font-size: 1.8rem; font-weight: 900; }
.key.missed { animation: target-pulse .55s ease 2; }
.key.guide-home { color: #d9ffff; border-color: #7edfd8; box-shadow: 0 0 0 3px #55dbcf22, 0 0 18px #55dbcf24; }
.key.guide-target { color: #071012; background: #f7be63; border-color: #ffe0a9; box-shadow: 0 0 0 3px #f7be6329; }
.key.pressed { color: #fff; opacity: 1; transform: translateY(3px) scale(.96); }
.key.pressed.press-correct { border-color: #9bcaff; background: #2f70b7; box-shadow: 0 0 0 3px #62a9f126, 0 0 16px #4f9ce34d; }
.key.pressed.press-wrong { border-color: #ffaaa3; background: #a73f3a; box-shadow: 0 0 0 3px #ff6d611f, 0 0 16px #ff51423d; }
.key.space { width: 350px; font-size: .9rem; text-transform: none; }
.key.modifier { width: calc(var(--key-size) * 2.15 + var(--key-gap)); font-size: 1rem; text-transform: none; }
.play.key-intro .word-line, .play.key-intro .input-line { display: none; }
.play.key-intro { grid-template-rows: auto 0 auto minmax(220px, 1fr); align-content: stretch; }
.play.key-intro .practice-stage { min-height: 0; height: 0; padding: 0; border: 0; cursor: default; }
.play.key-intro .practice-stage:focus-visible { outline: none; }
.play.key-intro .feedback { align-self: end; color: #c7d0d5; font-size: 1.05rem; }
.play.key-intro .keyboard-stage { align-self: center; }
.play.key-intro .keyboard { --key-size: 60px; --key-gap: .62rem; gap: .72rem; padding-top: .6rem; }
.play.key-intro .key { min-height: 62px; color: #dce4e8; opacity: 1; font-size: 1.95rem; }
.play.key-intro .key.unavailable { opacity: 1; background: #151b20; color: transparent; }
.play.key-intro .key.next { color: #071012; }
.play.key-intro .key.pressed { color: #fff; opacity: 1; }
.play.key-intro .key.pressed.press-correct { border-color: #9bcaff; background: #2f70b7; }
.play.key-intro .key.pressed.press-wrong { border-color: #ffaaa3; background: #a73f3a; }
.play.key-intro .key.space { width: 390px; font-size: 1rem; }
.play.roman-drill .line-word,
.play.roman-drill .line-separator,
.play.roman-drill .input-word,
.play.roman-drill .input-separator { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-ligatures: none; font-feature-settings: 'liga' 0; letter-spacing: .035em; }
.finger-guide { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.finger-guide.visible { opacity: 1; }
.finger-path { fill: none; stroke: #f7be63; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 7; filter: drop-shadow(0 0 5px #f7be6370); }
.finger { position: absolute; z-index: 4; left: 0; top: 0; width: 27px; height: 42px; border: 2px solid #f7be63; border-radius: 14px 14px 11px 11px; background: #131a20e8; box-shadow: 0 0 18px #f7be6350; opacity: 0; pointer-events: none; transform-origin: 50% 100%; }
.finger::before { content: ''; position: absolute; left: 6px; right: 6px; top: 7px; height: 11px; border: 1px solid #f7be638c; border-radius: 8px; }
.finger::after { content: ''; position: absolute; left: 50%; bottom: -13px; width: 2px; height: 13px; background: #f7be63; transform: translateX(-50%); }
.finger.visible { opacity: 1; }
.key-intro-guide { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: .2rem .7rem; margin: 0 auto .45rem; color: #c7d6da; text-align: center; }
.key-intro-guide[hidden], .finger-markers[hidden] { display: none; }
.key-intro-guide .guide-kicker { grid-column: 1 / -1; color: #f7be63; font: 800 .75rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; }
.key-intro-guide strong { display: grid; place-items: center; min-width: 2.1rem; min-height: 2rem; padding: .1rem .35rem; border: 1px solid #ffe0a9; border-radius: 7px; color: #071012; background: #f7be63; font: 900 1.55rem/1 ui-monospace, Menlo, Consolas, monospace; }
.key-intro-guide .guide-finger { color: #eef5f6; font-size: 1.05rem; font-weight: 800; }
.key-intro-guide .guide-move { color: #9fc2c4; font-size: .9rem; }
.finger-markers { position: absolute; z-index: 5; inset: 0; width: 100%; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
.finger-markers span { position: absolute; display: grid; justify-items: center; align-content: center; gap: .13rem; width: 4.2rem; min-height: 2.8rem; padding: .18rem .2rem; border: 1px solid #354850; border-radius: 7px; color: #a8b9bf; background: #111a20f2; font-size: .65rem; line-height: 1.1; text-align: center; transform: translateX(-50%); transition: color .16s, background .16s, border-color .16s, transform .16s; }
.finger-markers .finger-hand-palm { z-index: 0; display: block; min-height: 0; padding: 0; border: 1px solid #54757a82; border-radius: 48% 48% 25% 25% / 30% 30% 18% 18%; background: linear-gradient(160deg, #25434b62, #12202773 72%); box-shadow: inset 0 1px #c8ffff12, 0 5px 16px #0002; clip-path: polygon(0 38%, 4% 28%, 12% 25%, 19% 31%, 22% 8%, 27% 0, 33% 3%, 39% 34%, 43% 8%, 49% 2%, 56% 7%, 61% 37%, 67% 16%, 73% 11%, 79% 16%, 82% 43%, 89% 29%, 96% 32%, 100% 43%, 95% 74%, 87% 91%, 66% 100%, 31% 100%, 12% 88%, 4% 69%); transform: translateX(-50%); transition: none; }
.finger-markers .finger-hand-label { z-index: 1; display: block; width: auto; min-height: 0; padding: .12rem .46rem; border: 1px solid #36535a; border-radius: 999px; color: #bfd3d7; background: #10191ee8; font-size: .62rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; transform: translateX(-50%); transition: none; }
.finger-markers b { color: #d7e4e6; font: 900 .94rem/1 ui-monospace, Menlo, Consolas, monospace; }
.finger-markers .finger-marker-space { z-index: 2; width: 5.1rem; min-height: 2.7rem; border-radius: 999px 999px 9px 9px; color: #d3e6cd; border-color: #788e52; background: linear-gradient(150deg, #25351c, #151e16); }
.finger-markers .finger-marker-space b { color: #d9edaa; }
.finger-markers span.active { border-color: #ffe0a9; color: #fff4df; background: #4a3821; box-shadow: 0 0 0 2px #f7be6330, 0 0 15px #f7be6338; transform: translate(-50%, -2px); }
.finger-markers span.active b { color: #f7be63; }
.finger-markers [data-home][data-finger] { border-top: 3px solid var(--finger-color, #53656c); }
.finger-markers span.active { border-color: var(--finger-color, #ffe0a9); color: #f4fafb; background: #152129; box-shadow: 0 0 0 2px color-mix(in srgb, var(--finger-color, #fff) 28%, transparent), 0 0 15px color-mix(in srgb, var(--finger-color, #fff) 28%, transparent); }
.finger-markers span.active b { color: var(--finger-color, #f7be63); }
.finger-markers span[data-finger="thumb"] { border-radius: 999px 999px 8px 8px; }
.key-intro-guide .guide-finger::before { content: ''; display: inline-block; width: .72em; height: .72em; margin-right: .38em; border: 2px solid var(--finger-color, #eef5f6); border-radius: 50%; background: var(--finger-color, #eef5f6); vertical-align: .02em; }
.key-intro-guide strong[data-finger-tone] { box-shadow: inset 0 -5px var(--finger-color), 0 0 0 3px #42dca826; }
.play.key-intro .finger-markers { display: flex; }
.play.key-intro .feedback {
  min-height: 3.5rem;
  padding: .1rem 1rem 0;
  color: #f7be63;
  font-size: clamp(1.75rem, 2.25vw, 2.55rem);
  font-weight: 850;
  line-height: 1.25;
  transform: translateY(2em);
}
/* ローマ字・単語練習では、入力・助言・鍵盤を3段で読ませる。 */
@media (min-width: 1200px) {
  html:not(.ql-ipad-fullscreen) .play.roman-drill,
  html:not(.ql-ipad-fullscreen) .play.word-drill {
    grid-template-rows: auto minmax(230px, 1fr) minmax(5.5rem, auto) minmax(250px, auto);
  }
  html:not(.ql-ipad-fullscreen) .play.roman-drill .practice-stage,
  html:not(.ql-ipad-fullscreen) .play.word-drill .practice-stage {
    transform: translateY(-1.25rem);
  }
  html:not(.ql-ipad-fullscreen) .play.roman-drill .feedback,
  html:not(.ql-ipad-fullscreen) .play.word-drill .feedback {
    min-height: 3.5rem;
    padding: .1rem 1rem 0;
    color: #f7be63;
    font-size: clamp(1.75rem, 2.25vw, 2.55rem);
    font-weight: 850;
    line-height: 1.25;
    align-self: center;
    transform: none;
  }
  html:not(.ql-ipad-fullscreen) .play.roman-drill .keyboard-stage,
  html:not(.ql-ipad-fullscreen) .play.word-drill .keyboard-stage {
    align-self: start;
    transform: translateY(1.2rem);
  }
}
.play.flow .lesson-meta, .play.flow .keyboard-stage { opacity: .2; }
.play.flow .practice-stage { border-color: transparent; }
.play.flow .keyboard-stage:focus-within, .play.flow .keyboard-stage:hover { opacity: .55; }
.play.flow .keyboard-stage:has(.key.pressed) { opacity: 1; }
footer { color: #5d6a72; text-align: center; padding: .25rem .5rem; font-size: .78rem; letter-spacing: .13em; }
dialog { width: min(650px, calc(100vw - 1.5rem)); max-height: min(84vh, 800px); padding: 1.5rem; border: 1px solid #607889; border-radius: 14px; background: #141c23; color: #eef4f8; }
dialog::backdrop { background: #03080fdd; }
dialog form { display: grid; gap: 1rem; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-head h2 { margin: 0; font-size: 1.4rem; }
.platinum-dialog { width: min(560px, calc(100vw - 1.5rem)); border-color: #8f7440; box-shadow: 0 24px 70px #0009; }
.platinum-dialog form { display: grid; gap: 1rem; }
.platinum-dialog p { margin: 0; line-height: 1.75; }
.platinum-kicker { margin: 0 0 .35rem !important; color: #f6bd60; font: 900 .72rem/1 ui-monospace, monospace; letter-spacing: .16em; }
.platinum-fields { display: grid; gap: .8rem; }
.platinum-fields label { display: grid; gap: .4rem; color: #dbe6ea; font-weight: 800; }
.platinum-fields input { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid #536873; border-radius: 8px; color: inherit; background: #071118; font: inherit; }
.platinum-dialog small { color: #91a6b2; line-height: 1.65; }
.platinum-status { min-height: 1.5em; margin: 0 !important; }
.platinum-status.error { color: #ffaaa2; }
.platinum-status.success { color: #79eee4; }
.purchase-dialog { width: min(820px, calc(100vw - 1.5rem)); padding: 0; overflow: hidden; }
.purchase-dialog form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; max-height: min(84vh, 800px); }
.purchase-dialog .dialog-head { padding: 1rem 1.5rem .75rem; }
.purchase-scroll { display: grid; gap: 1rem; min-height: 0; padding: 0 1.5rem 1rem; overflow-y: auto; overscroll-behavior: contain; }
.purchase-actions { display: grid; gap: .45rem; padding: .85rem 1.5rem 1rem; border-top: 1px solid #314652; background: #141c23; box-shadow: 0 -12px 26px #03080f66; }
.purchase-dialog h2 { margin: .15rem 0 .65rem; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.purchase-dialog h3 { margin: .15rem 0 .45rem; font-size: clamp(1.15rem, 3vw, 1.45rem); }
.purchase-dialog ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.4rem; margin: 0; padding-left: 1.3rem; color: #c7d5dd; }
.purchase-dialog small { color: #91a6b2; line-height: 1.65; }
.purchase-intro { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
.purchase-progress { margin: 0; color: var(--accent-warm); font-weight: 900; }
.purchase-progress-ring { display: grid; place-content: center; width: 104px; aspect-ratio: 1; border: 8px solid #244a50; border-top-color: #55dbcf; border-radius: 50%; text-align: center; }
.purchase-progress-ring strong { font-size: 1.75rem; line-height: 1; }
.purchase-progress-ring span { margin-top: .25rem; color: #91a6b2; font-size: .78rem; }
.purchase-section { display: grid; gap: .8rem; padding: 1rem; border: 1px solid #314652; border-radius: 12px; background: #101820; }
.purchase-section-label { margin: 0; color: #66e1d7 !important; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.purchase-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.purchase-roadmap div { display: grid; gap: .25rem; padding: .75rem; border-radius: 9px; background: #17242b; }
.purchase-roadmap strong { color: #f6bd60; }
.purchase-roadmap span { color: #c7d5dd; font-size: .9rem; line-height: 1.45; }
.purchase-assurance { font-weight: 700; }
.purchase-preview { grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr); align-items: center; }
.purchase-sample { display: flex; flex-wrap: wrap; gap: .7rem 1.15rem; padding: 1rem; border: 1px solid #715996; border-radius: 10px; background: #211b36; color: #f5f1ff; font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 800; }
.purchase-unlock { grid-template-columns: 1fr auto; align-items: start; }
.purchase-unlock > ul { grid-column: 1; }
.purchase-price { grid-column: 2; grid-row: 1 / span 2; display: grid; min-width: 190px; gap: .2rem; padding: .9rem 1rem; border-radius: 10px; background: #17242b; text-align: right; }
.purchase-price span { color: #c7d5dd; }
.purchase-price strong { color: #f6bd60; font-size: 1.15rem; }
.purchase-price small { font-size: .76rem; }
.purchase-payment-note { display: block; text-align: center; }
.license-claim { margin-top: .3rem; border-top: 1px solid #314652; padding-top: .65rem; }
.license-claim summary { width: fit-content; margin: 0 auto; color: #a9bdc6; font-size: .84rem; font-weight: 800; cursor: pointer; }
.license-claim-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: .55rem; align-items: end; margin-top: .7rem; }
.license-claim-fields label { display: grid; gap: .28rem; color: #a9bdc6; font-size: .75rem; font-weight: 800; }
.license-claim-fields input { min-width: 0; min-height: 42px; padding: .6rem .7rem; border: 1px solid #40555f; border-radius: 7px; color: #edf5f6; background: #091117; }
.license-claim-fields input:focus { border-color: #55dbcf; outline: 2px solid #55dbcf33; }
.license-claim-fields button { min-height: 42px; white-space: nowrap; }
#license-claim-status { display: block; margin-top: .45rem; text-align: left; }
#license-claim-status.error { color: #ffaaa2; }
.purchase-kicker { margin: 0; color: var(--accent-warm); font-size: .75rem; font-weight: 900; letter-spacing: .16em; }
.purchase-link { display: inline-flex; justify-content: center; padding: .95rem 1rem; border: 2px solid #79eee4; border-radius: 9px; color: #071015 !important; background: #55dbcf !important; font-weight: 900; text-decoration: none; box-shadow: 0 0 0 3px #55dbcf22; }
.purchase-link:hover { background: #79eee4 !important; }
@media (max-width: 680px) {
  .purchase-dialog ul, .purchase-roadmap { grid-template-columns: 1fr; }
  .purchase-preview, .purchase-unlock { grid-template-columns: 1fr; }
  .purchase-price { grid-column: 1; grid-row: auto; min-width: 0; text-align: left; }
  .purchase-progress-ring { width: 84px; }
  .license-claim-fields { grid-template-columns: 1fr; }
  .purchase-dialog .dialog-head { padding: .85rem 1rem .65rem; }
  .purchase-scroll { padding: 0 1rem .85rem; }
  .purchase-actions { padding: .75rem 1rem .85rem; }
}
dialog p { color: #b2c6d4; margin: 0; }
dialog input { min-height: 45px; border-radius: 8px; border: 1px solid #597088; background: #0c1218; color: white; padding: .6rem; }
.layout-options { display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; }
.layout-options legend { margin-bottom: .6rem; color: #92a5b1; font-size: .92rem; }
.layout-options label { display: flex; align-items: center; gap: .75rem; min-height: 68px; padding: .8rem 1rem; border: 1px solid #394852; border-radius: 9px; background: #0e151b; cursor: pointer; }
.layout-options label:has(input:checked) { border-color: #55dbcf; background: #142329; }
.layout-options input { min-height: 0; width: 1.05rem; height: 1.05rem; accent-color: #55dbcf; }
.layout-options span { display: grid; gap: .18rem; }
.layout-options small { color: #91a0a9; font-size: .875rem; line-height: 1.45; }
.debug-duration-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem; padding: .8rem 1rem; border: 1px dashed #4a5963; border-radius: 9px; background: #111920; }
.debug-duration-option[hidden] { display: none; }
.debug-duration-option label { display: block; min-height: 0; padding: 0; border: 0; background: transparent; color: #d6e0e4; cursor: default; }
.debug-duration-option select { min-width: 7rem; }
.debug-duration-option small { grid-column: 1 / -1; }
.developer-tools { border-color: #735938; background: #1d1811; }
.developer-tools > fieldset { display: grid; gap: .65rem; margin: .65rem 0 0; padding: .75rem; border: 1px solid #4f4638; border-radius: 8px; }
.developer-tools > fieldset > legend { color: #c5ad83; font-size: .84rem; }
.developer-tools[hidden] { display: none; }
.learning-data { padding-top: .15rem; }
.learning-data p { font-size: .9rem; }
.learning-data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.learning-data-actions button { width: 100%; }
button.danger { color: #ffc6c0; border-color: #8d4a47; background: #2a1719; }
button.danger:hover { color: #fff; border-color: #ff8d84; background: #462022; }
#learning-data-status { min-height: 1.25em; }
#learning-data-status.success { color: #64e1bc; }
#learning-data-status.error { color: #ff8e87; }
.product-license { padding-top: .15rem; }
.product-license p { font-size: .9rem; }
.recovery-result { display: grid; gap: .35rem; padding: .85rem; border: 1px solid #46606b; border-radius: 9px; background: #091117; }
.recovery-result strong { overflow-wrap: anywhere; }
.recovery-result code { display: block; padding: .7rem; border: 1px dashed #55dbcf; border-radius: 7px; color: #79eee4; background: #111d22; font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 900; letter-spacing: .08em; text-align: center; overflow-wrap: anywhere; }
.license-ready-dialog { width: min(540px, calc(100vw - 1.5rem)); }
.license-ready-dialog form { display: grid; gap: 1rem; }
.license-ready-dialog .primary { width: 100%; }
#recovery-status.error { color: #ff8e87; }
#recovery-status.success { color: #64e1bc; }
@media (max-width: 520px) { .learning-data-actions { grid-template-columns: 1fr; } }
.romaji-list { overflow: auto; display: grid; gap: .25rem; max-height: 53vh; }
.romaji-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .65rem; border-bottom: 1px solid #334049; min-height: 55px; }
.romaji-option > span { font-size: 1.03rem; }
.romaji-option select { max-width: min(75%, 360px); min-width: 8rem; }
.play[hidden], .results[hidden], .lesson-briefing[hidden], .overall-results[hidden] { display: none; }
.overall-results { display: grid; gap: 1rem; min-height: calc(100vh - 130px); padding: 1.2rem 0 2rem; }
.overall-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #26343b; }
.overall-head-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.overall-head p { margin: 0 0 .35rem; color: #f7be63; font: 800 .84rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; }
.overall-head h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 4.5rem); letter-spacing: -.05em; }
.overall-head span { display: block; margin-top: .45rem; color: #84929a; }
.overall-trend { padding: 1rem 1.15rem .8rem; border: 1px solid #2d4148; border-radius: 12px; background: radial-gradient(circle at 88% 0, #55dbcf12, transparent 32%), #0e161c; }
.overall-trend-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.overall-trend-tools { display: grid; justify-items: end; gap: .55rem; }
.trend-mode { display: flex; padding: 3px; border: 1px solid #33464e; border-radius: 8px; background: #0a1116; }
.trend-mode button { min-height: 34px; padding: .36rem .76rem; border: 0; border-radius: 5px; background: transparent; color: #89999f; font-size: .84rem; box-shadow: none; }
.trend-mode button[aria-pressed="true"] { background: #1b3638; color: #71e3d9; }
.overall-trend-head p { margin: 0 0 .25rem; color: #f7be63; font: 800 .8rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .13em; }
.overall-trend-head h2 { margin: 0; font-size: 1.08rem; }
.overall-trend svg { display: block; width: 100%; height: clamp(145px, 17vw, 220px); margin-top: .55rem; overflow: visible; }
.overall-trend .trend-grid { stroke: #29363d; stroke-width: 1; stroke-dasharray: 4 7; }
.overall-trend .trend-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.overall-trend .trend-line.accuracy { stroke: #55dbcf; }
.overall-trend .trend-line.speed { stroke: #f7be63; }
.overall-trend .trend-dot { stroke-width: 2.5; }
.overall-trend .trend-dot.accuracy { fill: #55dbcf; stroke: #0e161c; }
.overall-trend .trend-dot.speed { fill: #f7be63; stroke: #0e161c; }
.overall-trend .trend-dot.remedial { stroke: #ba83ff; stroke-width: 4; }
.trend-legend { display: flex; gap: .8rem; flex-wrap: wrap; color: #89999f; font-size: .8rem; }
.trend-legend span { display: flex; align-items: center; gap: .32rem; }
.trend-legend i { width: 9px; height: 9px; border-radius: 50%; background: #55dbcf; }
.trend-legend i.speed { background: #f7be63; }
.trend-legend i.remedial { background: transparent; border: 2px solid #ba83ff; }
.overall-trend-message { margin: .15rem 0 0; color: #9aabb1; font-size: .88rem; }
.overall-trend-readout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; margin-top: .15rem; padding-top: .55rem; border-top: 1px solid #24333a; color: #8798a0; font-size: .84rem; }
.overall-trend-readout strong { padding: .35rem .6rem; border: 1px solid #355057; border-radius: 999px; color: #c8f5f1; background: #122328; font-size: .84rem; font-weight: 750; }
.overall-trend-readout strong:empty { display: none; }
@media (max-width: 620px) { .overall-trend-head { align-items: start; } .overall-trend-tools { justify-items: start; } .overall-trend-readout { align-items: flex-start; flex-direction: column; gap: .45rem; } }
.overall-progress, .overall-panel { min-width: 0; padding: 1rem; border: 1px solid #27343b; border-radius: 12px; background: #0e151b; }
.overall-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.overall-progress h2 { margin: 0; font-size: 1.1rem; }
.overall-progress > div:first-child span { color: #8e9ca3; font-size: .88rem; }
.overall-progress-track { display: block; height: 8px; margin: .8rem 0 1rem; overflow: hidden; border-radius: 8px; background: #263239; }
.overall-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55dbcf, #7af0c7); transition: width .45s ease; }
.overall-chapters { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .4rem; }
.overall-chapter { display: grid; place-items: center; min-width: 0; min-height: 48px; padding: .35rem .2rem; border: 1px solid #2e3c43; border-radius: 7px; color: #718089; background: #11191f; }
.overall-chapter strong { font: 900 .9rem/1 ui-monospace, Menlo, Consolas, monospace; }
.overall-chapter small { margin-top: .22rem; color: #69777e; font-size: .76rem; line-height: 1.2; }
.overall-chapter.available { color: #d7e1e4; border-color: #466069; }
.overall-chapter.passed { color: #8ff2cf; border-color: #3e987b; background: #123027; }
.overall-chapter.recorded:not(.passed) { color: #f7c77e; border-color: #765b36; }
.overall-chapter:disabled { cursor: default; }
.overall-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.overall-ranking { display: grid; gap: .35rem; padding-top: .7rem; }
.overall-rank { display: grid; grid-template-columns: minmax(5rem, auto) 1fr auto auto; align-items: center; gap: .7rem; min-height: 46px; padding: .35rem .45rem; border-radius: 6px; }
.overall-rank:hover { background: #172128; }
.overall-rank strong { display: grid; font-size: .96rem; }
.overall-rank strong small { color: #74838a; font: .78rem/1.3 ui-monospace, Menlo, Consolas, monospace; }
.overall-rank .metric-detail { text-align: right; }
.overall-practice { min-width: 5.2rem; padding: .45rem .7rem; color: #dffbf8; border-color: #3e6d6b; }
.overall-practice:hover { border-color: #55dbcf; background: #16302f; }
.overall-empty { margin: .5rem; color: #718089; }
.results { min-height: calc(100vh - 130px); display: grid; align-content: center; gap: 1rem; padding: 1.3rem 0 2rem; }
.result-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #33545a; border-radius: 16px; background: radial-gradient(circle at 88% 15%, #55dbcf22, transparent 30%), linear-gradient(135deg, #111a21, #0d141a); box-shadow: inset 0 1px #ffffff08, 0 18px 50px #0006; }
.result-kicker, .panel-head p { margin: 0 0 .3rem; color: #f7be63; font: 800 .82rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.result-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.35rem); letter-spacing: -.04em; }
.result-note { max-width: 42rem; margin: .6rem 0 0; color: #99a7ae; font-size: .92rem; }
.result-encouragement { max-width: 44rem; margin: .7rem 0 0; color: #dbe8e7; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.result-status { width: fit-content; margin: .7rem 0 0; padding: .4rem .74rem; border: 1px solid; border-radius: 999px; font-weight: 800; font-size: .92rem; }
.result-status.passed { color: #7af0c7; border-color: #4eaf91; background: #123329; }
.result-status.retry { color: #ffc477; border-color: #bd8242; background: #342315; }
.result-status.debug { color: #c2bbff; border-color: #6c639e; background: #201d35; }
.pass-stamp { display: grid; place-items: center; flex: 0 0 auto; width: clamp(90px, 12vw, 132px); aspect-ratio: 1; border: 5px double #ee6b63; border-radius: 50%; color: #ff8177; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 1000; letter-spacing: .12em; text-indent: .12em; text-shadow: 0 2px 18px #ff604f55; box-shadow: inset 0 0 0 5px #ee6b631c, 0 9px 25px #0005; opacity: 0; transform: rotate(-11deg) scale(1.8) translateY(-12px); }
.pass-stamp[hidden] { display: none; }
.pass-stamp.landed { animation: pass-stamp-impact .52s cubic-bezier(.17,.84,.32,1.35) both; }
@keyframes pass-stamp-impact { 0% { opacity: 0; transform: rotate(-11deg) scale(1.9) translateY(-18px); } 62% { opacity: 1; transform: rotate(-8deg) scale(.9) translateY(3px); } 80% { transform: rotate(-12deg) scale(1.06); } 100% { opacity: 1; transform: rotate(-10deg) scale(1); } }
.result-mastery, .result-certificate-award { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #80643a; border-radius: 13px; background: linear-gradient(105deg, #241d13, #111820 70%); box-shadow: inset 0 1px #fff1, 0 12px 35px #0003; }
.result-mastery[hidden], .result-certificate-award[hidden] { display: none; }
.result-mastery > div, .result-certificate-award > div { display: grid; gap: .2rem; }
.result-mastery p, .result-certificate-award p { margin: 0; color: #c4a263; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.result-mastery strong { color: #ffd884; font-size: 1.85rem; letter-spacing: .16em; }
.result-mastery b { color: #f0cb72; font: 900 1rem/1 ui-monospace, Menlo, Consolas, monospace; }
.result-mastery span, .result-certificate-award span { color: #d2dadd; font-size: .9rem; }
.result-mastery em { width: fit-content; padding: .34rem .62rem; border: 1px solid #aa812f; border-radius: 999px; color: #ffe28a; background: #45340f; font-style: normal; font-size: .94rem; font-weight: 900; letter-spacing: .04em; }
.result-mastery em[hidden] { display: none; }
.result-mastery em.mastery-rise { animation: mastery-rise .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes mastery-rise { from { opacity: 0; transform: translateY(8px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
.result-mastery > small { max-width: 30rem; color: #aab3b7; line-height: 1.55; }
.result-certificate-award { border-color: #a8874f; background: radial-gradient(circle at 85% 20%, #e3bd6930, transparent 34%), linear-gradient(105deg, #2e2413, #15191a 72%); }
.result-certificate-award strong { color: #fff0c1; font-size: 1.15rem; }
.certificate-library { display: grid; gap: .8rem; padding: 1.1rem; border: 1px solid #3d4850; border-radius: 14px; background: linear-gradient(145deg, #141b20, #0d1318); }
.certificate-library-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.certificate-library-head p:first-child { margin: 0 0 .25rem; color: #c4a263; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.certificate-library-head h2 { margin: 0; font-size: 1.3rem; }
.certificate-library-head > p:last-child, .certificate-prototype-note { margin: 0; color: #98a5ab; font-size: .82rem; }
.certificate-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.certificate-tile { display: grid; align-content: start; gap: .38rem; min-width: 0; padding: .85rem; border: 1px solid #38434a; border-radius: 9px; background: #0c1216; }
.certificate-tile.earned { border-color: #8a7043; background: linear-gradient(145deg, #211b11, #12181b); }
.certificate-tile strong { color: #e6d3a8; font-size: .95rem; }
.certificate-tile small, .certificate-tile span { color: #9ba7ad; font-size: .78rem; }
.certificate-tile button { justify-self: start; margin-top: .25rem; padding: .44rem .65rem; font-size: .8rem; }
.certificate-prototype-note { line-height: 1.5; }
.certificate-dialog { width: min(96vw, 920px); max-width: none; max-height: 95dvh; padding: 1rem; border: 1px solid #8d7445; border-radius: 16px; color: #18201f; background: #111619; box-shadow: 0 26px 90px #000b; }
.certificate-dialog::backdrop { background: #05090dcc; backdrop-filter: blur(5px); }
.certificate-sheet { padding: clamp(.7rem, 3vw, 1.5rem); background: #d8c99f; }
.certificate-border { position: relative; display: grid; justify-items: center; min-height: 520px; padding: 2rem 1.4rem 1.2rem; overflow: hidden; border: 3px double #a68441; outline: 1px solid #a68441; outline-offset: -11px; background: radial-gradient(ellipse at center, #fffef5 0, #f3eedb 68%, #e7dcbb 100%); text-align: center; }
.certificate-brand { margin: 0; color: #77613b; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
.certificate-kicker { margin: 1.3rem 0 .2rem; color: #947742; font: 700 .75rem/1.2 Georgia, serif; letter-spacing: .25em; }
.certificate-border h2 { margin: .1rem 0; color: #5f4820; font-family: Georgia, 'Yu Mincho', serif; font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 500; letter-spacing: .12em; }
.certificate-range { margin: 0; color: #776b50; font-size: .95rem; }
.certificate-name-line { display: flex; align-items: baseline; justify-content: center; gap: .8rem; width: min(80%, 460px); margin: 1.25rem 0 .45rem; color: #776b50; }
.certificate-name-line b { flex: 1; height: 1.6em; border-bottom: 1px solid #9f8c64; }
.certificate-subtitle { max-width: 35rem; color: #5d5c52; line-height: 1.55; }
.certificate-stats { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 3.5rem); margin: .65rem 0 .35rem; }
.certificate-stats span { display: grid; gap: .3rem; color: #837454; font-size: .75rem; }
.certificate-stats strong { color: #554a32; font-size: 1.05rem; }
.certificate-date-label { margin: .6rem 0 0; color: #94855f; font-size: .78rem; }
.certificate-date { margin: .1rem 0; color: #554a32; font-size: 1.05rem; letter-spacing: .08em; }
.certificate-seal { position: absolute; right: 9%; bottom: 12%; display: grid; place-items: center; width: 74px; aspect-ratio: 1; margin: 0; border: 3px double #a34939; border-radius: 50%; color: #a34939; font-size: 1.15rem; font-weight: 900; transform: rotate(-12deg); }
.certificate-footer { margin: auto 0 0; color: #7a6d4f; font-size: .8rem; letter-spacing: .04em; }
.mastery-guide { display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; max-width: 60rem; margin: .45rem 0 0; padding: .6rem .8rem; border-left: 3px solid #a8874f; border-radius: 0 6px 6px 0; color: #d6d4c8; background: #171a1c; font-size: .9rem; line-height: 1.55; }
.mastery-guide > p { margin: 0; }
.mastery-guide details { flex: 0 0 auto; color: #c7b17e; font-size: .78rem; }
.mastery-guide summary { cursor: pointer; }
.mastery-guide details ul { margin: .45rem 0; padding-left: 1.15rem; color: #e0dbca; }
.mastery-guide details p { max-width: 36rem; margin: .35rem 0 0; color: #b8b3a5; }
@media (max-width: 750px) { .mastery-guide { align-items: flex-start; flex-direction: column; gap: .3rem; } }
.certificate-actions { display: flex; justify-content: flex-end; gap: .65rem; padding-top: .8rem; }
.accuracy-ring { --accuracy: 0deg; position: relative; display: grid; place-content: center; flex: 0 0 auto; width: 132px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#55dbcf var(--accuracy), #263239 0); text-align: center; isolation: isolate; }
.accuracy-ring::before { content: ''; position: absolute; z-index: -1; inset: 10px; border-radius: inherit; background: #101820; box-shadow: inset 0 0 20px #0008; }
.accuracy-ring span { font: 900 1.7rem/1 ui-monospace, Menlo, Consolas, monospace; }
.accuracy-ring small { margin-top: .25rem; color: #8b9aa1; font-size: .8rem; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.summary-card { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .15rem .5rem; min-width: 0; padding: 1rem 1.05rem; border: 1px solid #27343b; border-radius: 11px; background: #10171d; }
.summary-card > span { grid-column: 1 / -1; color: #93a0a7; font-size: .86rem; }
.summary-card strong { color: #eef4f5; font: 900 clamp(1.6rem, 3vw, 2.25rem)/1 ui-monospace, Menlo, Consolas, monospace; }
.summary-card small { color: #718087; font-size: .78rem; white-space: nowrap; }
.history-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(320px, 2fr); gap: .75rem; }
.performance-trend { padding: .85rem 1rem; border: 1px solid #344950; border-radius: 11px; background: #101a20; color: #dce9e8; }
.performance-trend summary { cursor: pointer; font-weight: 700; }
.performance-trend p { margin: .55rem 0; color: #aebfc1; font-size: .86rem; }
.performance-trend-scroll { max-width: 100%; overflow-x: auto; }
.performance-trend table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .78rem; text-align: right; }
.performance-trend th, .performance-trend td { padding: .42rem .32rem; border-bottom: 1px solid #2c4046; white-space: nowrap; }
.performance-trend th:first-child, .performance-trend td:first-child { text-align: left; }
.history-card { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .25rem .75rem; padding: .72rem 1rem; border-left: 3px solid #3a5558; border-radius: 4px 9px 9px 4px; background: #0d1419; }
.history-card > span { color: #8d9aa1; font-size: .84rem; }
.history-card strong { color: #55dbcf; font: 800 1rem/1.2 ui-monospace, Menlo, Consolas, monospace; }
.history-card small { grid-column: 1 / -1; color: #718088; font-size: .78rem; }
.trend-card { min-width: 0; padding: .55rem .8rem .35rem; border-left: 3px solid #3a5558; border-radius: 4px 9px 9px 4px; background: #0d1419; }
.trend-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #8d9aa1; font-size: .8rem; }
.trend-legend { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.trend-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 3px; }
.trend-legend i.accuracy { background: #55dbcf; }
.trend-legend i.speed { margin-left: .35rem; background: #f7be63; }
.history-trend { display: block; width: 100%; height: 48px; overflow: visible; }
.trend-grid { stroke: #2b373e; stroke-width: 1; stroke-dasharray: 3 5; }
.trend-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend-line.accuracy { stroke: #55dbcf; }
.trend-line.speed { stroke: #f7be63; }
.trend-dot { stroke: #0d1419; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trend-dot.accuracy { fill: #55dbcf; }
.trend-dot.speed { fill: #f7be63; }
.trend-empty { fill: #65747c; font: 12px system-ui, sans-serif; text-anchor: middle; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.result-panel { min-width: 0; padding: 1rem; border: 1px solid #27343b; border-radius: 12px; background: #0e151b; }
.panel-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #263139; }
.panel-head h2 { margin: 0; font-size: 1.05rem; }
.panel-head > span { color: #718087; font-size: .8rem; }
.key-results, .word-results { display: grid; gap: .15rem; max-height: 250px; overflow: auto; padding-top: .55rem; }
.key-result-row { display: grid; grid-template-columns: 3.8rem minmax(60px, 1fr) auto; align-items: center; gap: .65rem; min-height: 34px; padding: .25rem .35rem; border-radius: 5px; }
.key-result-row:hover, .word-result-row:hover { background: #172128; }
.key-result-row strong { color: #eef5f6; font: 900 .9rem/1 ui-monospace, Menlo, Consolas, monospace; }
.metric-bar { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: #29343a; }
.metric-bar::after { content: ''; display: block; width: var(--metric); height: 100%; border-radius: inherit; background: #55dbcf; }
.metric-detail { color: #8d9ba2; font-size: .8rem; white-space: nowrap; }
.word-result-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .35rem .45rem; border-radius: 5px; }
.result-word { display: grid; min-width: 5.5rem; }
.result-word strong { font-size: .98rem; }
.result-word small { color: #79888f; font: .8rem/1.35 ui-monospace, Menlo, Consolas, monospace; }
.empty-result { margin: .7rem .35rem; color: #7e8d94; font-size: .88rem; }
.time-feedback { margin: .9rem 0 .45rem; padding: .7rem .85rem; border: 1px solid #d9e1df; border-radius: 10px; color: #53656d; font-size: .82rem; }
.time-feedback legend { padding: 0 .3rem; font-weight: 700; }
.time-feedback-options { display: flex; flex-wrap: wrap; gap: .35rem .8rem; }
.time-feedback-options label { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.3rem; cursor: pointer; }
.time-feedback-options input { accent-color: #243a55; }
.time-feedback small { display: block; color: #63757a; line-height: 1.5; }
.result-actions { display: flex; justify-content: flex-end; gap: .75rem; padding-top: .25rem; }
.result-actions button { min-width: 9.5rem; }
button:disabled { opacity: .4; cursor: default; filter: none; }
@media (min-width: 800px) {
  .onboarding-screen { min-height: calc(100vh - 120px); gap: 1.4rem; padding: 2rem 0; }
  .onboarding-head h1 { font-size: clamp(2.7rem, 4.6vw, 4.8rem); }
  .onboarding-head > p:last-child { font-size: 1.08rem; }
  .onboarding-grid { gap: 1.2rem; }
  .onboarding-card { min-height: 350px; padding: 1.55rem; }
  .onboarding-actions { font-size: .95rem; }
  .onboarding-actions button { min-width: 15rem; padding: .9rem 1.35rem; }
  .lesson-briefing { min-height: calc(100vh - 120px); gap: 1.35rem; padding: 2rem 0; }
  .briefing-head h1 { font-size: clamp(2.6rem, 4.4vw, 4.6rem); }
  .briefing-lead { max-width: 62rem; font-size: 1.08rem; }
  .briefing-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 1.2rem; }
  .briefing-key-card, .briefing-plan { min-height: 330px; padding: 1.55rem; }
  .briefing-words { padding: 1.35rem 1.55rem; }
  .briefing-word-list span { padding: .58rem .82rem; font-size: 1.04rem; }
  .briefing-actions { font-size: .95rem; }
  .briefing-actions button { min-width: 15rem; padding: .9rem 1.35rem; }

  /* 成績は一画面に収め、明細だけを独立してスクロールする。 */
  .results {
    height: calc(100dvh - 120px);
    min-height: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    overflow: hidden;
    padding: .7rem 0 .8rem;
  }
  .detail-grid { min-height: 0; overflow: hidden; }
  .result-panel { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .key-results, .word-results {
    min-height: 0;
    max-height: none;
    align-content: start;
    grid-auto-rows: min-content;
    overflow-y: auto;
    scrollbar-color: #4f6b70 #121b21;
    scrollbar-width: thin;
  }
}
@media (min-width: 1500px) and (min-height: 900px) {
  .shell { max-width: 1600px; padding: 1.35rem 3.2rem 1.1rem; }
  .mast { min-height: 56px; }
  .play { min-height: calc(100vh - 145px); grid-template-rows: auto minmax(360px, 1fr) minmax(3.25rem, auto) minmax(310px, auto); padding: 1.25rem 0; }
  .lesson-meta { min-height: 34px; }
  .practice-stage { padding: clamp(.45rem, 1.4vh, .9rem) 2rem 1.1rem; }
  .practice-stage { --practice-font: clamp(2.25rem, 3vw, 3.9rem); }
  .feedback { min-height: 3.25rem; padding-top: .8rem; font-size: 1.08rem; }
  .keyboard { --key-size: 68px; --key-gap: .7rem; gap: .78rem; padding: 1.8rem 0 .7rem; }
  .key { min-height: 69px; font-size: 2.15rem; }
  .key.next.reveal { font-size: 2.15rem; }
  .key.space { width: 460px; font-size: 1rem; }
  .key.modifier { font-size: 1.12rem; }
  .play.key-intro { grid-template-rows: auto 0 auto minmax(320px, 1fr); }
  .play.key-intro .keyboard { --key-size: 76px; --key-gap: .76rem; gap: .86rem; }
  .play.key-intro .key { min-height: 78px; font-size: 2.35rem; }
  .play.key-intro .key.space { width: 510px; }

  /* 成績は一覧を読む画面。大画面では余白より記録の表示量を優先する。 */
  .results {
    height: calc(100dvh - 145px);
    min-height: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 1.15rem;
    padding: .6rem 0 1rem;
  }
  .result-hero { padding: 1.45rem 1.7rem; }
  .result-hero h1 { font-size: clamp(2.6rem, 3.4vw, 4rem); }
  .result-note { max-width: 60rem; font-size: .95rem; }
  .accuracy-ring { width: 154px; }
  .accuracy-ring span { font-size: 2rem; }
  .summary-card { min-height: 108px; padding: 1.15rem 1.25rem; }
  .summary-card > span { font-size: .86rem; }
  .summary-card strong { font-size: clamp(2rem, 2.65vw, 2.7rem); }
  .history-card { min-height: 76px; padding: .9rem 1.15rem; }
  .trend-card { min-height: 76px; }
  .history-card > span { font-size: .84rem; }
  .history-card strong { font-size: 1.15rem; }
  .detail-grid { min-height: 0; gap: 1.15rem; }
  .result-panel { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); padding: 1.2rem; }
  .panel-head h2 { font-size: 1.2rem; }
  .key-results, .word-results { min-height: 0; max-height: none; align-content: start; grid-auto-rows: min-content; }
  .key-result-row { min-height: 42px; font-size: 1.04rem; }
  .word-result-row { min-height: 56px; }
  .result-word strong { font-size: 1.08rem; }
  .result-actions { padding-top: .1rem; }
}
/* MacBook Proなど、横幅は広いが縦が限られる画面では練習だけを一段圧縮する。 */
@media (min-width: 1200px) and (max-height: 1050px) {
  .play {
    height: calc(100dvh - 116px);
    min-height: 0;
    grid-template-rows: auto minmax(230px, 1fr) minmax(2.25rem, auto) minmax(210px, auto);
    overflow: hidden;
    padding: .4rem 0;
  }
  .practice-stage { padding: clamp(.35rem, 1.1vh, .65rem) 1.5rem .9rem; }
  .practice-stage { --practice-font: clamp(1.9rem, 2.55vw, 3rem); }
  .feedback { min-height: 2.25rem; padding-top: .3rem; }
  .keyboard { --key-size: 54px; --key-gap: .54rem; gap: .58rem; padding: .55rem 0 .2rem; }
  .key { min-height: 55px; font-size: 1.8rem; }
  .key.next.reveal { font-size: 1.8rem; }
  .key.space { width: 370px; }
  .play.key-intro { grid-template-rows: auto 0 auto minmax(215px, 1fr); }
  .play.key-intro .keyboard { --key-size: 61px; --key-gap: .58rem; gap: .62rem; padding-top: .2rem; }
  .play.key-intro .key { min-height: 63px; font-size: 1.95rem; }
  .play.key-intro .key.space { width: 410px; }
  .finger-markers span { width: 3.45rem; min-height: 2.35rem; padding-inline: .16rem; font-size: .61rem; }
  .finger-markers .finger-marker-space { width: 4.7rem; }
}
/* 12.9インチiPad横向きは幅が1200pxを超えるため、Mac用寸法のままだと導入練習だけが横へ溢れる。 */
@media (min-width: 1200px) and (max-width: 1499px) and (orientation: landscape) and (pointer: coarse) {
  .play.key-intro .keyboard { --key-size: 54px; }
}
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes target-pulse { 50% { background: #f7be63; border-color: #ffe0a9; box-shadow: 0 0 22px #f7be6366; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* iPad横・小型ノートでは、文字を縮めず余白を練習領域へ戻す。 */
@media (min-width: 651px) and (max-width: 1199px) and (orientation: landscape) {
  .shell { max-width: none; padding: .9rem 1.15rem .8rem; }
  .mast { min-height: 44px; }
  .play { min-height: calc(100dvh - 100px); padding: .55rem 0; }
  .practice-stage { max-width: 100%; padding-block: clamp(.35rem, 1.2vh, .7rem); }
  .practice-stage { --practice-font: clamp(1.55rem, 2.9vw, 2.15rem); }
  .keyboard {
    --key-size: 42px;
    --key-gap: .38rem;
    gap: .48rem;
    justify-content: center;
    overflow-x: hidden;
    padding: .9rem 1rem .35rem;
  }
  .key { min-height: 46px; font-size: 1.55rem; }
  .keyboard.split { --hand-gap: clamp(.8rem, 2vw, 1.35rem); }
  .key.space { width: 290px; }
  .play.key-intro .keyboard { --key-size: 48px; --key-gap: .42rem; gap: .52rem; }
  .play.key-intro .key { min-height: 52px; font-size: 1.65rem; }
  .play.key-intro .key.space { width: 320px; }
  .finger-markers span { width: 3.35rem; min-height: 2.3rem; padding-inline: .15rem; font-size: .6rem; }
  .finger-markers .finger-marker-space { width: 4.5rem; }
  .lesson-briefing { min-height: calc(100dvh - 100px); padding: 1.15rem 0; }
  .briefing-grid { gap: .8rem; }
  .briefing-key-card, .briefing-plan { min-height: 280px; padding: 1.15rem; }
  .results { height: calc(100dvh - 100px); }
}
@media (min-width: 651px) and (max-width: 1140px) and (orientation: landscape) {
  .keyboard { --key-size: 39px; --key-gap: .32rem; gap: .4rem; padding-inline: .6rem; }
  .key { min-height: 43px; font-size: 1.45rem; }
  .keyboard.split { --hand-gap: .7rem; }
  .key.space { width: 265px; }
  .play.key-intro .keyboard { --key-size: 44px; --key-gap: .35rem; gap: .44rem; }
  .play.key-intro .key { min-height: 48px; font-size: 1.55rem; }
  .play.key-intro .key.space { width: 290px; }
}
/* タブレット縦画面は操作を妨げず、横向き推奨だけを明示する。 */
@media (min-width: 651px) and (max-width: 1100px) and (orientation: portrait) and (pointer: coarse) {
  .landscape-recommendation {
    position: sticky;
    z-index: 30;
    top: 0;
    display: block;
    margin: 0;
    padding: .72rem 1rem;
    color: #172023;
    background: #f7be63;
    font-size: .94rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 4px 18px #0007;
  }
}
@media (max-width: 650px) {
  .shell { padding: .65rem .75rem; }
  .mast { gap: .55rem; }
  .logo { gap: .38rem; }
  .brand-mark { width: 2.2rem; }
  .brand-word { font-size: 1rem; }
  .mast-home { min-width: 0; padding: .55rem .7rem; font-size: .84rem; }
  .chapter-control { font-size: .84rem; padding: .55rem; }
  .chapter-control strong { font-size: .8rem; }
  .chapter-picker-screen { min-height: calc(100vh - 100px); padding: 1.35rem 0; }
  .chapter-picker-head { padding-bottom: 1rem; }
  .chapter-picker-head h1 { font-size: 2.1rem; }
  .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding-bottom: 1rem; }
  .chapter-card { min-height: 10.2rem; padding: .75rem; gap: .45rem; }
  .chapter-card strong { font-size: .9rem; }
  .chapter-card small { font-size: .8rem; }
  .trial-status { display: none; }
  .onboarding-screen { min-height: calc(100vh - 100px); padding: 1.35rem 0; gap: .75rem; }
  .onboarding-head h1 { font-size: 2.1rem; }
  .onboarding-head > p:last-child { font-size: .9rem; }
  .onboarding-grid { grid-template-columns: 1fr; gap: .75rem; }
  .onboarding-card { padding: 1rem; border-radius: 11px; }
  .onboarding-about { min-height: 0; }
  .onboarding-about > p:not(:first-child) { font-size: .9rem; }
  .onboarding-about-points { grid-template-columns: 1fr; gap: .5rem; }
  .onboarding-about-points li { min-height: 0; padding: .75rem; }
  .onboarding-contrast { grid-template-columns: 1fr; gap: .35rem; }
  .onboarding-home { min-height: 0; }
  .onboarding-finger-guide { gap: .55rem; }
  .onboarding-hand { gap: .28rem; padding: .55rem; }
  .onboarding-finger-row { font-size: .69rem; }
  .onboarding-question { grid-template-columns: minmax(0, 1fr) auto auto; }
  .onboarding-actions { align-items: stretch; flex-direction: column; }
  .onboarding-actions button { width: 100%; }
  .mast .quiet { padding: .55rem .55rem; font-size: .84rem; }
  .lesson-briefing { min-height: calc(100vh - 100px); gap: .75rem; padding: 1.35rem 0; }
  .briefing-head h1 { font-size: 2.1rem; }
  .briefing-lead { font-size: .9rem; }
  .briefing-grid { grid-template-columns: 1fr; gap: .75rem; }
  .briefing-key-card, .briefing-plan, .briefing-words { border-radius: 11px; }
  .briefing-key-card { min-height: 175px; padding: 1rem; }
  .briefing-plan, .briefing-words { padding: 1rem; }
  .briefing-word-list { gap: .38rem; }
  .briefing-word-list span { padding: .38rem .55rem; font-size: .88rem; }
  .briefing-actions { align-items: stretch; flex-direction: column; }
  .briefing-actions button { width: 100%; }
  .play { min-height: calc(100vh - 100px); grid-template-rows: auto minmax(220px, 1fr) minmax(2.5rem, auto) minmax(190px, auto); padding-top: .5rem; }
  .practice-stage { padding: .35rem .25rem .8rem; }
  .practice-stage { --practice-font: 1.38rem; }
  .line-word, .input-word { line-height: 1.65; }
  .mode { max-width: 78%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .keyboard { --key-size: 34px; --key-gap: .28rem; gap: .42rem; }
  .key { min-height: 38px; font-size: 1.35rem; }
  .keyboard.split { --hand-gap: .7rem; }
  .key.space { width: 240px; font-size: .72rem; }
  .play.key-intro .keyboard { --key-size: 38px; --key-gap: .3rem; gap: .46rem; }
  .play.key-intro .key { min-height: 42px; font-size: 1.45rem; }
  .play.key-intro .key.space { width: 260px; font-size: .78rem; }
  .keyboard { justify-content: start; padding-top: .75rem; }
  .play.word-drill .practice-stage { padding-bottom: 2rem; }
  .play.word-drill .session-progress { left: .25rem; right: .25rem; bottom: .75rem; }
  .debug-timer { top: .6rem; right: .4rem; font-size: 1.25rem; }
  .results { min-height: calc(100vh - 100px); padding-top: .7rem; }
  .result-hero { gap: 1rem; }
  .accuracy-ring { width: 102px; }
  .accuracy-ring span { font-size: 1.3rem; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .history-comparison { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .key-results, .word-results { max-height: 210px; }
  .key-result-row { grid-template-columns: 3.4rem minmax(45px, 1fr) auto; gap: .4rem; }
  .word-result-row { align-items: flex-start; }
  .word-result-row .metric-detail { white-space: normal; text-align: right; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .result-actions button { min-width: 0; }
  .overall-head { align-items: start; flex-direction: column; gap: 1rem; }
  .overall-trend-head { align-items: start; flex-direction: column; }
  .overall-trend svg { height: 130px; }
  .overall-analysis { grid-template-columns: 1fr; }
  .overall-chapters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .overall-rank { grid-template-columns: minmax(4rem, auto) 1fr auto; }
  .overall-rank .metric-detail { grid-column: 1 / 3; text-align: left; }
  .overall-practice { grid-column: 3; grid-row: 1 / 3; }
}

/* Theme selector: the original cool palette remains the default. */
.theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-options legend { grid-column: 1 / -1; }
.theme-options label { min-width: 0; }
.theme-swatch { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border: 2px solid #ffffff80; border-radius: 50%; box-shadow: 0 0 0 1px #0006; }
.theme-swatch.cool { background: linear-gradient(135deg, #090d12 0 54%, #55dbcf 55% 76%, #f7be63 77%); }
.theme-swatch.light { background: linear-gradient(135deg, #f4f7f8 0 54%, #087f78 55% 76%, #b76a00 77%); }
.theme-swatch.pop { background: linear-gradient(135deg, #17142d 0 48%, #ff6f91 49% 68%, #54e2d2 69% 83%, #ffd166 84%); }
.theme-swatch.contrast { background: linear-gradient(135deg, #000 0 50%, #fff 51% 69%, #00ffff 70% 84%, #ffeb00 85%); }

@media (max-width: 520px) {
  .theme-options { grid-template-columns: 1fr; }
  .onboarding-personalize { grid-template-columns: 1fr; }
  body:has(.play:not([hidden])) { overflow-x: hidden; }
  body:has(.play:not([hidden])) .mast > :not(.logo):not(.edition-badge) { display: none; }
  body:has(.play:not([hidden])) .mast { justify-content: space-between; min-height: 44px; }
  body:has(.play:not([hidden])) .logo { margin-right: 0; }
  .play { grid-template-rows: auto auto minmax(180px, 1fr) minmax(2.5rem, auto) auto; }
  .practice-controls { position: static; display: flex; justify-content: flex-end; width: 100%; gap: .35rem; }
  .practice-control { min-width: 0; padding: .42rem .52rem; font-size: .72rem; }
  /* 狭幅の位置確認は、重複する補助表示を整理し、押すキー→担当指→
     ホーム位置の順で縦に読む。PC・iPad横向きの配置には適用しない。 */
  .play.key-intro {
    min-height: calc(100dvh - 88px);
    grid-template-rows: auto auto 0 0 auto;
    align-content: start;
    gap: .25rem;
    padding-top: .35rem;
  }
  .play.key-intro .feedback { display: none; }
  .play.key-intro .keyboard-stage { align-self: start; width: 100%; min-width: 0; }
  .play.key-intro .key-intro-guide {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "kicker kicker" "key finger" "move move";
    justify-content: stretch;
    width: 100%;
    min-height: 6.7rem;
    margin: 0 0 .55rem;
    padding: .7rem .75rem;
    gap: .42rem .7rem;
    border: 1px solid #40535d;
    border-radius: 10px;
    background: #111a20;
    text-align: left;
  }
  .play.key-intro .guide-kicker { grid-area: kicker; }
  .play.key-intro .key-intro-guide strong { grid-area: key; min-width: 3rem; min-height: 2.6rem; font-size: 1.55rem; }
  .play.key-intro .guide-finger { grid-area: finger; align-self: center; min-width: 0; font-size: 1rem; line-height: 1.4; }
  .play.key-intro .guide-move { grid-area: move; font-size: .86rem; line-height: 1.45; }
  .play.key-intro .finger-markers { display: none; }
  .play.key-intro .keyboard,
  .play.roman-drill .keyboard,
  .play.word-drill .keyboard {
    --key-size: clamp(16px, 5.1vw, 23px);
    --key-gap: .1rem;
    gap: .22rem;
    justify-content: center;
    overflow-x: hidden;
    padding: .2rem 0 .35rem;
  }
  .play.key-intro .keyboard.split,
  .play.roman-drill .keyboard.split,
  .play.word-drill .keyboard.split { --hand-gap: .2rem; }
  /* Space is the final string row, so it has a thumb group rather than the
     keyboard-row-space class. Center it within the same keyboard canvas. */
  .play .keyboard .key-row:has(> .thumb-group) {
    display: flex;
    justify-content: center;
    padding-left: 0;
  }
  .play.key-intro .key,
  .play.roman-drill .key,
  .play.word-drill .key { min-height: 28px; font-size: clamp(.68rem, 3.3vw, .82rem); border-radius: 4px; }
  .play.key-intro .key.next.reveal { font-size: clamp(.72rem, 3.5vw, .9rem); }
  .play.key-intro .key.modifier,
  .play.roman-drill .key.modifier,
  .play.word-drill .key.modifier { font-size: .6rem; }
  .play.key-intro .key.space,
  .play.roman-drill .key.space,
  .play.word-drill .key.space { width: min(62vw, 190px); min-height: 28px; font-size: .62rem; }
}

@media (max-width: 900px) {
  .home-screen { align-content: start; padding-top: 1.35rem; }
  .home-grid { grid-template-columns: 1fr; }
  .home-primary { grid-template-columns: 1fr; min-height: 0; }
  .home-primary > button { width: 100%; }
  .home-progress { min-height: 12rem; }
}

@media (max-width: 650px) {
  .home-head h1 { font-size: 2.45rem; }
  .home-primary, .home-progress { padding: 1.15rem; }
  .home-remedial { align-items: stretch; flex-direction: column; }
  .home-remedial button { width: 100%; min-width: 0; }
  .home-actions { display: grid; grid-template-columns: 1fr; }
}

/* iPhone横向きは幅が520pxを超えるため、縦向き用の整理を高さと向きでも適用する。 */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .shell { padding: .4rem .75rem; }
  body:has(.play:not([hidden])) .mast > :not(.logo):not(.edition-badge) { display: none; }
  body:has(.play:not([hidden])) .mast { justify-content: space-between; min-height: 34px; }
  body:has(.play:not([hidden])) .logo { margin-right: 0; }
  .play { min-height: calc(100dvh - 52px); grid-template-rows: auto auto minmax(0, 1fr) 0 auto; gap: .1rem; padding: 0; }
  .practice-controls { position: static; display: flex; justify-content: flex-end; width: 100%; gap: .35rem; }
  .practice-control { min-width: 0; padding: .32rem .5rem; font-size: .72rem; }
  .play.key-intro { min-height: 0; grid-template-rows: auto auto 0 0 auto; align-content: start; }
  .play.key-intro .feedback, .play.key-intro .finger-markers,
  .play.key-intro .finger-guide, .play.key-intro .finger { display: none; }
  .play.key-intro .keyboard-stage { align-self: start; width: 100%; min-width: 0; }
  .play.key-intro .key-intro-guide {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "kicker kicker" "key finger" "move move";
    justify-content: stretch;
    width: 100%;
    min-height: 0;
    margin: 0 0 .25rem;
    padding: .4rem .65rem;
    gap: .15rem .55rem;
    border: 1px solid #40535d;
    border-radius: 9px;
    background: #111a20;
    text-align: left;
  }
  .play.key-intro .guide-kicker { grid-area: kicker; }
  .play.key-intro .key-intro-guide strong { grid-area: key; min-width: 2.3rem; min-height: 2rem; font-size: 1.25rem; }
  .play.key-intro .guide-finger { grid-area: finger; align-self: center; min-width: 0; font-size: .95rem; line-height: 1.3; }
  .play.key-intro .guide-move { grid-area: move; font-size: .82rem; line-height: 1.3; }
  .play.key-intro .keyboard,
  .play.roman-drill .keyboard,
  .play.word-drill .keyboard {
    --key-size: clamp(24px, 4.2vw, 31px);
    --key-gap: .1rem;
    gap: .1rem;
    justify-content: center;
    overflow-x: hidden;
    padding: 0 0 .15rem;
  }
  .play.key-intro .keyboard.split,
  .play.roman-drill .keyboard.split,
  .play.word-drill .keyboard.split { --hand-gap: .2rem; }
  .play .keyboard .key-row:has(> .thumb-group) { display: flex; justify-content: center; padding-left: 0; }
  .play.key-intro .key,
  .play.roman-drill .key,
  .play.word-drill .key { min-height: 24px; font-size: .82rem; border-radius: 4px; }
  .play.key-intro .key.next.reveal { font-size: .88rem; }
  .play.key-intro .key.modifier,
  .play.roman-drill .key.modifier,
  .play.word-drill .key.modifier { font-size: .62rem; }
  .play.key-intro .key.space,
  .play.roman-drill .key.space,
  .play.word-drill .key.space { width: min(45vw, 210px); min-height: 24px; font-size: .65rem; }
}

:root[data-theme="light"] { color-scheme: light; background: #edf2f3; color: #1b2930; }
:root[data-theme="light"] body { background: #edf2f3; }
:root[data-theme="light"] button { color: #fff; background: #087f78; border-color: #087f78; }
:root[data-theme="light"] button.quiet { color: #344b57; background: #fff; border-color: #9baeb8; }
:root[data-theme="light"] .logo { color: #536873; background: transparent; border-color: transparent; }
:root[data-theme="light"] .brand-key { fill: #fff; }
:root[data-theme="light"] .brand-path { stroke: #536873; }
:root[data-theme="light"] .brand-word { color: #2c414b; }
:root[data-theme="light"] .mast,
:root[data-theme="light"] .chapter-control,
:root[data-theme="light"] .mode,
:root[data-theme="light"] .stats,
:root[data-theme="light"] footer { color: #536873; }
:root[data-theme="light"] .chapter-control strong,
:root[data-theme="light"] .line-word.done,
:root[data-theme="light"] .line-separator.done,
:root[data-theme="light"] .prompt-complete,
:root[data-theme="light"] .input-word,
:root[data-theme="light"] .input-separator { color: #087f78; }
:root[data-theme="light"] .chapter-picker-head,
:root[data-theme="light"] .overall-head,
:root[data-theme="light"] .practice-stage { border-color: #bdcbd2; }
:root[data-theme="light"] .chapter-card,
:root[data-theme="light"] .home-primary,
:root[data-theme="light"] .home-progress,
:root[data-theme="light"] .home-remedial,
:root[data-theme="light"] .onboarding-card,
:root[data-theme="light"] .briefing-key-card,
:root[data-theme="light"] .briefing-plan,
:root[data-theme="light"] .briefing-words,
:root[data-theme="light"] .result-hero,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .history-card,
:root[data-theme="light"] .trend-card,
:root[data-theme="light"] .result-panel,
:root[data-theme="light"] .overall-trend,
:root[data-theme="light"] .overall-progress,
:root[data-theme="light"] .overall-panel { color: #1b2930; background: #f8fafb; border-color: #b7c5cb; box-shadow: 0 7px 22px #29434d10; }
:root[data-theme="light"] .chapter-card small,
:root[data-theme="light"] .home-head span,
:root[data-theme="light"] .home-primary-copy > p:not(:first-child),
:root[data-theme="light"] .home-remedial span,
:root[data-theme="light"] .onboarding-card p,
:root[data-theme="light"] .briefing-lead,
:root[data-theme="light"] .briefing-finger-guide,
:root[data-theme="light"] .metric-label,
:root[data-theme="light"] .metric-detail,
:root[data-theme="light"] .overall-head span,
:root[data-theme="light"] .overall-trend-message,
:root[data-theme="light"] .trend-legend { color: #566b76; }
:root[data-theme="light"] .result-note,
:root[data-theme="light"] .summary-card > span,
:root[data-theme="light"] .summary-card small,
:root[data-theme="light"] .history-card > span,
:root[data-theme="light"] .history-card small,
:root[data-theme="light"] .trend-head,
:root[data-theme="light"] .metric-detail,
:root[data-theme="light"] .result-word small,
:root[data-theme="light"] .panel-head span { color: #52656e; }
:root[data-theme="light"] .summary-card strong,
:root[data-theme="light"] .key-result-row strong,
:root[data-theme="light"] .result-word strong,
:root[data-theme="light"] .panel-head h2 { color: #1b2930; }
:root[data-theme="light"] .history-card,
:root[data-theme="light"] .trend-card { border-left-color: #8ba6aa; background: #e7eef0; }
:root[data-theme="light"] .result-panel { background: #f6f9fa; }
:root[data-theme="light"] .key-result-row:hover,
:root[data-theme="light"] .word-result-row:hover { background: #e8f1f2; }
:root[data-theme="light"] .metric-bar { background: #cdd8dc; }
:root[data-theme="light"] .trend-grid { stroke: #b5c4ca; }
:root[data-theme="light"] .trend-dot { stroke: #e7eef0; }
:root[data-theme="light"] .trend-empty { fill: #52656e; }
:root[data-theme="light"] .accuracy-ring { background: conic-gradient(#0c948b var(--accuracy), #cbd7da 0); }
:root[data-theme="light"] .accuracy-ring::before { background: #f8fafb; box-shadow: inset 0 0 14px #637a8424; }
:root[data-theme="light"] .accuracy-ring span { color: #13242b; }
:root[data-theme="light"] .accuracy-ring small { color: #52656e; }
:root[data-theme="light"] .result-status.passed { color: #075d46; border-color: #479078; background: #d7eee5; }
:root[data-theme="light"] .result-status.retry { color: #7a4500; border-color: #bf833b; background: #f8e7c9; }
:root[data-theme="light"] .result-status.debug { color: #4b3e83; border-color: #8b80bd; background: #e8e4f8; }
:root[data-theme="light"] .chapter-card:hover,
:root[data-theme="light"] .chapter-card.current { background: #eaf7f6; border-color: #087f78; }
:root[data-theme="light"] .chapter-card.passed { color: #172129; background: #e8f6ef; border-color: #378c6c; }
:root[data-theme="light"] .chapter-card.locked,
:root[data-theme="light"] .chapter-card.locked:hover { color: #172129; background: #edf1f3; border-color: #bdc8ce; }
:root[data-theme="light"] select,
:root[data-theme="light"] dialog input { color: #172129; background: #fff; border-color: #879da8; }
:root[data-theme="light"] .chapter-value,
:root[data-theme="light"] .onboarding-question legend,
:root[data-theme="light"] .briefing-plan li,
:root[data-theme="light"] .briefing-word-list span { color: #172129; }
:root[data-theme="light"] .chapter-card kbd,
:root[data-theme="light"] .home-key-list kbd,
:root[data-theme="light"] .briefing-key-card code,
:root[data-theme="light"] .briefing-keyboard,
:root[data-theme="light"] .briefing-word-list span { background: #edf4f5; border-color: #9fb2bb; }
:root[data-theme="light"] .line-word,
:root[data-theme="light"] .line-separator { color: #63727a; }
:root[data-theme="light"] .line-word.active,
:root[data-theme="light"] .line-separator.active,
:root[data-theme="light"] .input-word .composition,
:root[data-theme="light"] .input-separator .composition { color: #172129; }
:root[data-theme="light"] .key { background: #dfe6e9; border-color: #9eacb3; }
:root[data-theme="light"] .key.target,
:root[data-theme="light"] .key.learned { background: #d2e2e3; }
:root[data-theme="light"] .key.hint { color: #174c50; background: #c3e5e2; border-color: #087f78; }
:root[data-theme="light"] .key.guide-home { color: #174c50; border-color: #087f78; }
:root[data-theme="light"] .play.word-drill .keyboard.support-full .key.learned,
:root[data-theme="light"] .play.word-drill .keyboard.support-guided .key.home,
:root[data-theme="light"] .play.word-drill .keyboard.support-guided .key.hint { color: #263a43; }
:root[data-theme="light"] .play.key-intro .key { color: #263a43; background: #e3eaed; }
:root[data-theme="light"] .play.key-intro .key.unavailable { color: transparent; background: #edf1f2; }
:root[data-theme="light"] .play.key-intro .key.next,
:root[data-theme="light"] .play.key-intro .key.guide-target,
:root[data-theme="light"] .play.key-intro .key.unavailable.next,
:root[data-theme="light"] .play.key-intro .key.unavailable.guide-target { color: #172129; background: #f7be63; border-color: #b56a00; box-shadow: 0 0 0 3px #f7be6348, 0 0 20px #c7772440; opacity: 1; }
:root[data-theme="light"] dialog { color: #172129; background: #f7fafb; border-color: #8299a5; }
:root[data-theme="light"] dialog::backdrop { background: #24343c99; }
:root[data-theme="light"] dialog p,
:root[data-theme="light"] .layout-options legend,
:root[data-theme="light"] .layout-options small { color: #566b76; }
:root[data-theme="light"] .layout-options label,
:root[data-theme="light"] .debug-duration-option { background: #fff; border-color: #aebec6; }
:root[data-theme="light"] .layout-options label:has(input:checked) { background: #e7f5f3; border-color: #087f78; }
:root[data-theme="light"] .practice-control { color: #445c67; background: #fffffff0; border-color: #9baeb8; box-shadow: 0 5px 18px #29434d20; }
:root[data-theme="light"] .practice-control.abort { color: #8a3430; background: #fff7f6f2; border-color: #c89793; }
:root[data-theme="light"] .onboarding-choice-section,
:root[data-theme="light"] .onboarding-theme-section { background: #edf4f5; border-color: #b7c5cb; }
:root[data-theme="light"] .onboarding-choice-section h3,
:root[data-theme="light"] .onboarding-theme-section h3 { color: #172129; }
:root[data-theme="light"] .onboarding-choice-section > p,
:root[data-theme="light"] .onboarding-theme-section > p { color: #566b76; }
:root[data-theme="light"] .onboarding-theme-options label { color: #344b57; background: #fff; border-color: #aebec6; }
:root[data-theme="light"] .onboarding-theme-options label:has(input:checked) { color: #174c50; background: #dff3f0; border-color: #087f78; }

:root[data-theme="pop"] { color-scheme: dark; background: #17142d; color: #fff8fb; }
:root[data-theme="pop"] body { background: radial-gradient(circle at 12% 10%, #322354 0, transparent 30%), radial-gradient(circle at 88% 5%, #173a4d 0, transparent 28%), #17142d; }
:root[data-theme="pop"] button { color: #271129; background: #ffd166; border-color: #ffe29a; }
:root[data-theme="pop"] button.quiet { color: #f6eafa; background: #241d3d; border-color: #6e5c91; }
:root[data-theme="pop"] .logo { color: #fff8fb; background: transparent; border-color: transparent; }
:root[data-theme="pop"] .brand-key { fill: #241d3d; }
:root[data-theme="pop"] .brand-path { stroke: #f6eafa; }
:root[data-theme="pop"] .brand-word { color: #fff8fb; }
:root[data-theme="pop"] .chapter-control strong,
:root[data-theme="pop"] .line-word.done,
:root[data-theme="pop"] .line-separator.done,
:root[data-theme="pop"] .prompt-complete,
:root[data-theme="pop"] .input-word,
:root[data-theme="pop"] .input-separator { color: #54e2d2; }
:root[data-theme="pop"] .chapter-card,
:root[data-theme="pop"] .home-primary,
:root[data-theme="pop"] .home-progress,
:root[data-theme="pop"] .home-remedial,
:root[data-theme="pop"] .onboarding-card,
:root[data-theme="pop"] .briefing-key-card,
:root[data-theme="pop"] .briefing-plan,
:root[data-theme="pop"] .briefing-words,
:root[data-theme="pop"] .result-hero,
:root[data-theme="pop"] .summary-card,
:root[data-theme="pop"] .history-item,
:root[data-theme="pop"] .detail-panel,
:root[data-theme="pop"] .overall-trend,
:root[data-theme="pop"] .overall-progress,
:root[data-theme="pop"] .overall-panel { background: #211b39; border-color: #554675; box-shadow: 0 8px 26px #08051055; }
:root[data-theme="pop"] .chapter-card:hover,
:root[data-theme="pop"] .chapter-card.current { background: #30234a; border-color: #ff6f91; }
:root[data-theme="pop"] .chapter-card.passed { background: #173b38; border-color: #54e2d2; }
:root[data-theme="pop"] .chapter-card.locked,
:root[data-theme="pop"] .chapter-card.locked:hover { background: #1b172d; border-color: #4c4265; }
:root[data-theme="pop"] select { color: #fff8fb; background: #241d3d; border-color: #6e5c91; }
:root[data-theme="pop"] .line-word,
:root[data-theme="pop"] .line-separator { color: #c3b8d2; }
:root[data-theme="pop"] .line-word.active,
:root[data-theme="pop"] .line-separator.active { color: #fff; }
:root[data-theme="pop"] .line-word.active::after,
:root[data-theme="pop"] .line-separator.active::after { background: #ff6f91; }
:root[data-theme="pop"] .key { background: #27213b; border-color: #5f527b; }
:root[data-theme="pop"] .key.target,
:root[data-theme="pop"] .key.learned { background: #34294a; }
:root[data-theme="pop"] .key.hint { color: #cffff9; background: #244750; border-color: #54e2d2; }
:root[data-theme="pop"] .key.guide-home { color: #cffff9; border-color: #54e2d2; }
:root[data-theme="pop"] .play.word-drill .keyboard.support-full .key.learned,
:root[data-theme="pop"] .play.word-drill .keyboard.support-guided .key.home,
:root[data-theme="pop"] .play.word-drill .keyboard.support-guided .key.hint { color: #e8e2ff; }
:root[data-theme="pop"] .key.next { color: #241429; background: #ff6f91; border-color: #ffb0c2; box-shadow: 0 0 22px #ff6f9155; }
:root[data-theme="pop"] .key.guide-target { color: #271129; background: #ffd166; border-color: #ffe29a; }
:root[data-theme="pop"] dialog { color: #fff8fb; background: #211b39; border-color: #76629b; }
:root[data-theme="pop"] dialog::backdrop { background: #090612dd; }
:root[data-theme="pop"] .layout-options label,
:root[data-theme="pop"] .debug-duration-option { background: #17132a; border-color: #554675; }
:root[data-theme="pop"] .layout-options label:has(input:checked) { background: #352442; border-color: #ff6f91; }
:root[data-theme="pop"] .layout-options input { accent-color: #ff6f91; }
:root[data-theme="pop"] .practice-control { color: #f6eafa; background: #241d3dee; border-color: #6e5c91; }
:root[data-theme="pop"] .practice-control.abort { color: #ffb0c2; background: #321a2aee; border-color: #a14a68; }
:root[data-theme="pop"] .onboarding-choice-section,
:root[data-theme="pop"] .onboarding-theme-section { background: #17132a; border-color: #554675; }
:root[data-theme="pop"] .onboarding-theme-options label { color: #eadff1; background: #211b39; border-color: #665580; }
:root[data-theme="pop"] .onboarding-theme-options label:has(input:checked) { color: #fff; background: #352442; border-color: #ff6f91; box-shadow: 0 0 16px #ff6f9133; }

:root[data-theme="contrast"] { color-scheme: dark; background: #000; color: #fff; }
:root[data-theme="contrast"] body { background: #000; }
:root[data-theme="contrast"] button { color: #000; background: #ffeb00; border-color: #fff36a; }
:root[data-theme="contrast"] button.quiet { color: #fff; background: #000; border-color: #fff; }
:root[data-theme="contrast"] .logo { color: #fff; background: transparent; border-color: transparent; }
:root[data-theme="contrast"] .brand-key { fill: #000; stroke-width: 2.2; }
:root[data-theme="contrast"] .brand-key-home { stroke: #ffeb00; }
:root[data-theme="contrast"] .brand-key-target { stroke: #00ffff; }
:root[data-theme="contrast"] .brand-path { stroke: #fff; stroke-width: 2.4; }
:root[data-theme="contrast"] .brand-dot-home { fill: #ffeb00; }
:root[data-theme="contrast"] .brand-dot-target { fill: #00ffff; }
:root[data-theme="contrast"] .brand-word { color: #fff; }
:root[data-theme="contrast"] .mast,
:root[data-theme="contrast"] .chapter-control,
:root[data-theme="contrast"] .mode,
:root[data-theme="contrast"] .stats,
:root[data-theme="contrast"] footer { color: #fff; }
:root[data-theme="contrast"] .chapter-control strong,
:root[data-theme="contrast"] .line-word.done,
:root[data-theme="contrast"] .line-separator.done,
:root[data-theme="contrast"] .prompt-complete,
:root[data-theme="contrast"] .input-word,
:root[data-theme="contrast"] .input-separator { color: #00ffff; }
:root[data-theme="contrast"] .chapter-picker-head,
:root[data-theme="contrast"] .overall-head,
:root[data-theme="contrast"] .practice-stage { border-color: #fff; }
:root[data-theme="contrast"] .chapter-card,
:root[data-theme="contrast"] .home-primary,
:root[data-theme="contrast"] .home-progress,
:root[data-theme="contrast"] .home-remedial,
:root[data-theme="contrast"] .onboarding-card,
:root[data-theme="contrast"] .briefing-key-card,
:root[data-theme="contrast"] .briefing-plan,
:root[data-theme="contrast"] .briefing-words,
:root[data-theme="contrast"] .result-hero,
:root[data-theme="contrast"] .summary-card,
:root[data-theme="contrast"] .history-item,
:root[data-theme="contrast"] .detail-panel,
:root[data-theme="contrast"] .overall-trend,
:root[data-theme="contrast"] .overall-progress,
:root[data-theme="contrast"] .overall-panel { color: #fff; background: #000; border-color: #fff; box-shadow: none; }
:root[data-theme="contrast"] .chapter-card:hover,
:root[data-theme="contrast"] .chapter-card.current { background: #171700; border-color: #ffeb00; }
:root[data-theme="contrast"] .chapter-card.passed { color: #fff; background: #002800; border-color: #00ff73; }
:root[data-theme="contrast"] .chapter-card.locked,
:root[data-theme="contrast"] .chapter-card.locked:hover { color: #fff; background: #000; border-color: #888; }
:root[data-theme="contrast"] select,
:root[data-theme="contrast"] dialog input { color: #fff; background: #000; border-color: #fff; }
:root[data-theme="contrast"] .line-word,
:root[data-theme="contrast"] .line-separator { color: #fff; }
:root[data-theme="contrast"] .line-word.active,
:root[data-theme="contrast"] .line-separator.active { color: #fff; }
:root[data-theme="contrast"] .line-word.active::after,
:root[data-theme="contrast"] .line-separator.active::after { background: #ffeb00; }
:root[data-theme="contrast"] .key { background: #000; border-color: #fff; }
:root[data-theme="contrast"] .key.target,
:root[data-theme="contrast"] .key.learned { background: #171717; }
:root[data-theme="contrast"] .key.hint { color: #fff; background: #003b3b; border-color: #00ffff; }
:root[data-theme="contrast"] .key.guide-home { color: #fff; border-color: #00ffff; }
:root[data-theme="contrast"] .play.word-drill .keyboard.support-full .key.learned,
:root[data-theme="contrast"] .play.word-drill .keyboard.support-guided .key.home,
:root[data-theme="contrast"] .play.word-drill .keyboard.support-guided .key.hint { color: #fff; }
:root[data-theme="contrast"] .key.next { color: #000; background: #ffeb00; border-color: #fff; box-shadow: 0 0 0 3px #fff; }
:root[data-theme="contrast"] .key.guide-target { color: #000; background: #ffeb00; border-color: #fff; }

/* 位置確認では、対象キーは常に緑。担当指の色は下辺と指マーカーで対応づける。
   入力ミスの赤表示（.pressed.press-wrong）はこの配色と独立させる。 */
.play.key-intro .keyboard .key.guide-target { color: #06170f; background: #73e5a7; border-color: #c1ffda; box-shadow: inset 0 -5px var(--finger-color, #c5e86c), 0 0 0 3px #42dca833, 0 0 18px #42dca84d; }
.play.key-intro .keyboard .key.guide-target[data-shift-symbol]::after { color: #06170f; background: #73e5a7; }
.play.key-intro .key-intro-guide strong[data-finger-tone] { color: #06170f; background: #73e5a7; border-color: #c1ffda; }
:root[data-theme="contrast"] .session-progress { background: #333; }
:root[data-theme="contrast"] .session-progress span { background: #00ffff; }
:root[data-theme="contrast"] dialog { color: #fff; background: #000; border-color: #fff; }
:root[data-theme="contrast"] dialog::backdrop { background: #000e; }
:root[data-theme="contrast"] dialog p,
:root[data-theme="contrast"] .layout-options legend,
:root[data-theme="contrast"] .layout-options small { color: #fff; }
:root[data-theme="contrast"] .layout-options label,
:root[data-theme="contrast"] .debug-duration-option { background: #000; border-color: #fff; }
:root[data-theme="contrast"] .layout-options label:has(input:checked) { background: #202000; border-color: #ffeb00; }
:root[data-theme="contrast"] .layout-options input { accent-color: #ffeb00; }
:root[data-theme="contrast"] .practice-control { color: #fff; background: #000; border-color: #fff; opacity: 1; box-shadow: none; }
:root[data-theme="contrast"] .practice-control.abort { color: #fff; background: #3b0000; border-color: #ff6464; }
:root[data-theme="contrast"] .onboarding-choice-section,
:root[data-theme="contrast"] .onboarding-theme-section { background: #000; border-color: #fff; }
:root[data-theme="contrast"] .onboarding-choice-section h3,
:root[data-theme="contrast"] .onboarding-theme-section h3,
:root[data-theme="contrast"] .onboarding-choice-section > p,
:root[data-theme="contrast"] .onboarding-theme-section > p { color: #fff; }
:root[data-theme="contrast"] .onboarding-theme-options label { color: #fff; background: #000; border-color: #fff; }
:root[data-theme="contrast"] .onboarding-theme-options label:has(input:checked) { color: #000; background: #ffeb00; border-color: #fff; box-shadow: 0 0 0 2px #fff; }

@media (min-width: 800px) {
  .results { height: auto; min-height: calc(100dvh - 120px); grid-template-rows: none; align-content: start; }
}
@media (max-width: 650px) {
  .chapter-mastery { font-size: .72rem; }
  .chapter-mastery-score { gap: .35rem; }
  .chapter-mastery-stars { font-size: 1.12rem; }
  .chapter-mastery-fraction { font-size: .83rem; }
  .briefing-mastery { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .briefing-mastery > span { text-align: left; }
  .pass-stamp { width: 78px; border-width: 4px; }
  .result-mastery, .result-certificate-award { align-items: flex-start; flex-direction: column; }
  .result-mastery > small { max-width: none; }
  .certificate-library-head { align-items: flex-start; flex-direction: column; }
  .certificate-shelf { grid-template-columns: 1fr; }
  .certificate-border { min-height: 470px; padding-inline: 1rem; }
  .certificate-seal { right: 7%; bottom: 10%; width: 58px; }
  .certificate-stats { gap: 1rem; }
  .certificate-stats span { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pass-stamp.landed { animation: none; opacity: 1; transform: rotate(-10deg) scale(1); }
}
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html, body { width: 100%; height: 100%; min-height: 0; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
  body > * { display: none !important; visibility: hidden !important; }
  #certificate-dialog[open], #certificate-dialog[open] * { visibility: visible !important; }
  #certificate-dialog[open] { position: relative; inset: auto; display: block !important; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; color: #18201f; background: #fff; box-shadow: none; break-after: avoid-page; page-break-after: avoid; }
  #certificate-dialog::backdrop { display: none; }
  .certificate-sheet { width: 100%; height: 100%; padding: 0; background: #d8c99f !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .certificate-border { width: 100%; height: 100%; min-height: 0; padding: 16mm 20mm; overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .certificate-actions { display: none !important; }
}

/* Chapter selection: hybrid course accordion with a vertical chapter roadmap. */
.chapter-continue { width: min(100%, 70rem); }
.chapter-continue-button { min-height: 4.7rem; }
.course-group { width: min(100%, 70rem); }
.course-toggle:focus-visible { outline: 3px solid #f7be63; outline-offset: -4px; }
.course-chapters .chapter-card:hover:not(:disabled) { transform: translateX(2px); }
.course-chapters .chapter-card.current { box-shadow: inset 3px 0 #f7be63, 0 0 0 1px #f7be6330, 0 12px 28px #0003; }
.course-chapters .chapter-card.passed:not(.current) { box-shadow: inset 3px 0 #3aa985, 0 12px 28px #0002; }
:root[data-theme="light"] .chapter-continue { color: #263941; background: #f8f5eb; border-color: #c5ad79; }
:root[data-theme="light"] .chapter-continue h2,
:root[data-theme="light"] .continue-number,
:root[data-theme="light"] .continue-mastery strong { color: #7a5718; }
:root[data-theme="light"] .chapter-continue-button { color: #263941; background: #fff; border-color: #b59b63; }
:root[data-theme="light"] .continue-copy small,
:root[data-theme="light"] .continue-mastery small { color: #586a72; }
:root[data-theme="light"] .course-group { color: #1b2930; background: #fff; border-color: #bdcbd2; }
:root[data-theme="light"] .course-toggle { color: #263941; }
:root[data-theme="light"] .course-toggle:hover { background: #edf4f4; }
:root[data-theme="light"] .course-range { color: #344b57; }
:root[data-theme="light"] .course-summary { color: #536873; }
:root[data-theme="light"] .course-status.complete { color: #145e47; background: #e8f6ef; }
:root[data-theme="light"] .course-chapters { border-color: #bdcbd2; }
:root[data-theme="pop"] .chapter-continue { background: #251d36; border-color: #897744; }
:root[data-theme="pop"] .chapter-continue-button { color: #fff8fb; background: #17142d; }
:root[data-theme="pop"] .course-group { background: #211b39; border-color: #554675; }
:root[data-theme="pop"] .course-toggle { color: #fff8fb; }
:root[data-theme="pop"] .course-toggle:hover { background: #30234a; }
:root[data-theme="pop"] .course-range { color: #f2d58e; }
:root[data-theme="pop"] .course-chapters { border-color: #6e5c91; }
:root[data-theme="contrast"] .chapter-continue,
:root[data-theme="contrast"] .course-group { color: #fff; background: #000; border: 1px solid #fff; box-shadow: none; }
:root[data-theme="contrast"] .chapter-continue-button,
:root[data-theme="contrast"] .course-toggle { color: #fff; background: #000; border-color: #fff; }
:root[data-theme="contrast"] .chapter-continue h2,
:root[data-theme="contrast"] .continue-number,
:root[data-theme="contrast"] .continue-mastery strong,
:root[data-theme="contrast"] .course-range,
:root[data-theme="contrast"] .course-indicator { color: #ffeb00; }
:root[data-theme="contrast"] .continue-copy small,
:root[data-theme="contrast"] .continue-mastery small,
:root[data-theme="contrast"] .course-summary { color: #fff; }
:root[data-theme="contrast"] .course-status,
:root[data-theme="contrast"] .course-chapters { border-color: #fff; }
@media (max-width: 650px) {
  .chapter-continue { padding: .8rem; }
  .chapter-continue-button { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .65rem; padding: .75rem; }
  .continue-number { grid-column: 1; grid-row: 1; font-size: 1.05rem; }
  .continue-copy { grid-column: 1 / -1; grid-row: 2; }
  .continue-mastery { grid-column: 2; grid-row: 1; }
  .course-toggle { align-items: flex-start; padding: .8rem; }
  .course-toggle-label { gap: .35rem .65rem; }
  .course-range { flex-basis: 100%; }
  .course-chapters { gap: .5rem; margin: 0 .5rem .6rem .65rem; padding: .6rem 0 0 .6rem; }
  .course-chapters .chapter-card { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .65rem; padding: .65rem; }
  .course-chapters .chapter-number { grid-column: 1; grid-row: 1; }
  .course-chapters .chapter-badge { grid-column: 2; grid-row: 1; }
  .course-chapters .chapter-card strong { grid-column: 1 / -1; grid-row: 2; font-size: .95rem; }
  .course-chapters .chapter-card kbd { grid-column: 1; grid-row: 3; }
  .course-chapters .chapter-card small { grid-column: 1 / -1; grid-row: 4; font-size: .84rem; }
  .course-chapters .chapter-mastery { grid-column: 1 / -1; grid-row: 5; font-size: .78rem; }
}

/* Keep per-chapter mastery as a quiet, compact review cue. */
.course-chapters .chapter-mastery {
  grid-column: 2 / -1;
  grid-row: 3;
  justify-self: end;
  align-self: center;
  width: fit-content;
  min-height: 0;
  margin: 0;
  padding: .08rem .12rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #87949a;
  font-size: .68rem;
  line-height: 1.15;
  gap: .3rem;
}
.course-chapters .chapter-mastery[data-mastery-rated="true"] .chapter-mastery-label,
.course-chapters .chapter-mastery[data-mastery-rated="false"] .chapter-mastery-score { display: none; }
.course-chapters .chapter-mastery-score { gap: .28rem; }
.course-chapters .chapter-mastery-stars { font-size: .96rem; }
.course-chapters .chapter-mastery-fraction { min-width: 0; color: #c5a45a; font-size: .72rem; font-weight: 700; }
:root[data-theme="light"] .course-chapters .chapter-mastery { color: #64767d; }
:root[data-theme="contrast"] .course-chapters .chapter-mastery { color: #fff; }
@media (max-width: 650px) {
  .course-chapters .chapter-mastery { grid-column: 1 / -1; grid-row: 5; font-size: .68rem; }
  .course-chapters .chapter-mastery-stars { font-size: .96rem; }
}

/* Chapter picker readability: enlarge only the pass label and key tags. */
.course-chapters .chapter-card.passed .chapter-badge {
  padding: .34rem .4rem .3rem;
  font-size: 1.15rem;
  letter-spacing: .07em;
}
.course-chapters .chapter-card kbd {
  padding: .4rem .58rem;
  font-size: 1.24rem;
}

/* Results use an explicit action role so the pass/fail primary choice remains
   visually clear in every theme, including keyboard focus and pop colors. */
.results .result-actions button.result-primary:not(:disabled) {
  background: var(--results-primary-bg, #55dbcf);
  color: var(--results-primary-fg, #0c1421);
  border-color: var(--results-primary-border, #55dbcf);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--results-primary-bg, #55dbcf) 25%, transparent);
}
.results .result-actions button.result-secondary {
  background: var(--results-secondary-bg, transparent);
  color: var(--results-secondary-fg, #b9c4ca);
  border-color: var(--results-secondary-border, #38434a);
  box-shadow: none;
}
:root[data-theme="light"] { --results-primary-bg: #087f78; --results-primary-fg: #fff; --results-primary-border: #087f78; --results-secondary-bg: #fff; --results-secondary-fg: #344b57; --results-secondary-border: #9baeb8; }
:root[data-theme="pop"] { --results-primary-bg: #ffd166; --results-primary-fg: #271129; --results-primary-border: #ffe29a; --results-secondary-bg: #241d3d; --results-secondary-fg: #f6eafa; --results-secondary-border: #6e5c91; }
:root[data-theme="contrast"] { --results-primary-bg: #ffeb00; --results-primary-fg: #000; --results-primary-border: #fff36a; --results-secondary-bg: #000; --results-secondary-fg: #fff; --results-secondary-border: #fff; }

/* iPhone横向きstandaloneでは、成績画面だけナビと比較カードの幅を確保する。 */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .shell:has(> #results:not([hidden])) {
    max-width: none;
    padding: .35rem .65rem;
    overflow-x: clip;
  }
  .shell:has(> #results:not([hidden])) .mast {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .35rem .45rem;
    min-height: 0;
  }
  .shell:has(> #results:not([hidden])) .mast > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .shell:has(> #results:not([hidden])) .mast .logo { margin-right: auto; }
  .shell:has(> #results:not([hidden])) #settings { flex-shrink: 0; }
  .shell:has(> #results:not([hidden])) #results {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: calc(100dvh - 92px);
    grid-template-rows: none;
    align-content: start;
    gap: .65rem;
    overflow: visible;
    padding: .45rem 0 1rem;
  }
  .shell:has(> #results:not([hidden])) .result-hero {
    min-width: 0;
    gap: .75rem;
    padding: .75rem .9rem;
  }
  .shell:has(> #results:not([hidden])) .result-hero > :first-child { min-width: 0; }
  .shell:has(> #results:not([hidden])) .result-hero h1 { font-size: clamp(1.65rem, 4vw, 2.25rem); }
  .shell:has(> #results:not([hidden])) .accuracy-ring { width: 82px; }
  .shell:has(> #results:not([hidden])) .accuracy-ring span { font-size: 1.2rem; }
  .shell:has(> #results:not([hidden])) .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }
  .shell:has(> #results:not([hidden])) .summary-card { padding: .65rem .75rem; }
  .shell:has(> #results:not([hidden])) .history-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }
  .shell:has(> #results:not([hidden])) .history-card { min-width: 0; padding: .6rem .75rem; }
  .shell:has(> #results:not([hidden])) .trend-card { grid-column: 1 / -1; min-width: 0; }
  .shell:has(> #results:not([hidden])) .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  .shell:has(> #results:not([hidden])) .result-panel { min-width: 0; padding: .7rem; }
  .shell:has(> #results:not([hidden])) .result-actions { flex-wrap: wrap; gap: .4rem; }
}