:root{--bg:#11100d;--panel:#191814;--panel-strong:#222018;--line:#39362c;--text:#f2efe4;--muted:#aaa394;--soft:#746d5f;--accent:#d7ff5f;--accent-2:#56d6a4;--warn:#ff675f;--gold:#f6c85f;--ink:#080806;--surface:#13120f;--surface-2:#151410;--surface-active:#202411;--surface-deep:#0d0c0a;--grid-line-strong:#ffffff06;--grid-line-soft:#ffffff05}:root[data-theme=light]{--bg:#f5f1e8;--panel:#fffdf7;--panel-strong:#ece5d7;--line:#d3cabb;--text:#1c1a16;--muted:#686052;--soft:#918673;--accent:#315fdb;--accent-2:#087f68;--warn:#c7352f;--gold:#9c6a00;--ink:#fff;--surface:#fff8eb;--surface-2:#fffaf1;--surface-active:#e9f0ff;--surface-deep:#eee6d8;--grid-line-strong:#1c1a160e;--grid-line-soft:#1c1a160a}*{box-sizing:border-box}html{background:linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px), linear-gradient(0deg, var(--grid-line-soft) 1px, transparent 1px), var(--bg);background-size:48px 48px;min-height:100%}body{min-height:100%;color:var(--text);margin:0;font-family:Arial,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif}button,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.shell{width:min(1480px,100vw - 32px);margin:0 auto;padding:16px 0 36px}.workspace,.lower-grid{gap:18px;display:grid}.app-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:18px;min-height:72px;margin-bottom:18px;padding:0 0 14px;display:flex}.mode-label{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:12px;font-weight:800}h1,h2,p{margin-top:0}h1{color:var(--text);letter-spacing:0;margin:0;font-size:26px;font-weight:900;line-height:1}.brand-title{align-items:baseline;gap:8px;display:flex}.app-version{color:var(--muted);letter-spacing:0;font-size:12px;font-weight:800}.brand-block p{color:var(--muted);margin:6px 0 0;font-size:13px;font-weight:700}h2{letter-spacing:0;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:0;font-size:clamp(38px,8vw,88px);line-height:.9;display:flex}.header-status{align-items:center;gap:14px;display:flex}h2 span{color:var(--muted);font-size:18px;font-weight:700}.session-mode-symbol{background:var(--panel-strong);width:.92em;height:.92em;color:var(--accent);font-size:inherit;border:1px solid #d7ff5f3d;place-items:center;font-weight:900;line-height:1;display:grid}.session-rank-value{min-width:3.3ch;color:var(--text);font-size:inherit;font-weight:900;line-height:inherit;display:inline-block;position:relative}.session-rank-value.concealed{color:var(--text);-webkit-user-select:none;user-select:none}.rank-strip{gap:8px;display:flex}.rank-badge{border:1px solid var(--line);background:var(--panel);min-width:92px;padding:8px 10px 9px}.rank-badge span,.rank-badge small{color:var(--muted);font-size:12px;display:block}.rank-badge-canvas,.rank-link-canvas,.rank-guide-current-canvas,.rank-guide-band-canvas,.history-rank-canvas{display:block}.rank-badge-canvas{margin:5px 0 4px}.header-actions{align-items:center;gap:8px;display:flex}.rank-guide-link{border:1px solid var(--line);background:var(--surface);min-width:92px;height:42px;color:var(--text);justify-content:center;align-items:center;gap:7px;padding:0 12px;font-weight:900;text-decoration:none;display:flex}.rank-guide-link:hover,.rank-guide-link:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}.language-switch{border:1px solid var(--line);background:var(--surface);gap:4px;padding:4px;display:flex}.language-switch button{min-height:36px;color:var(--muted);background:0 0;border:0;align-items:center;gap:7px;padding:7px 10px;font-size:13px;font-weight:800;display:flex}.language-switch button.selected{background:var(--panel-strong);color:var(--text)}.flag-icon{flex:none;width:22px;height:22px;display:block}.settings-button{border:1px solid var(--line);background:var(--surface);width:42px;height:42px;color:var(--text);place-items:center;display:grid}.icon-link{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--text);flex:none;place-items:center;text-decoration:none;display:grid}.icon-link:hover,.icon-link:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}.rank-guide-page{gap:18px;display:grid}.rank-guide-page-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;gap:16px;padding:18px 0 20px;display:flex}.rank-guide-page-head h1{margin-top:6px;font-size:clamp(30px,4vw,48px);line-height:1.05}.rank-guide-page-head p{max-width:680px;color:var(--muted);margin:10px 0 0;font-size:15px;font-weight:800;line-height:1.7}.rank-guide{gap:14px;padding-bottom:36px;display:grid}.score-guide{grid-template-columns:minmax(260px,.85fr) 1.5fr;gap:10px;display:grid}.score-formula,.practice-score-mode{border:1px solid var(--line);background:var(--surface-2)}.score-formula{padding:16px}.score-formula span,.practice-score-mode span{color:var(--muted);font-size:12px;font-weight:900;display:block}.score-formula strong{color:var(--gold);margin-top:12px;font-size:clamp(20px,3vw,30px);line-height:1.25;display:block}.score-formula p,.practice-score-mode p{color:var(--muted);margin:12px 0 0;font-size:13px;font-weight:800;line-height:1.65}.practice-score-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.practice-score-mode{align-content:start;gap:10px;padding:14px;display:grid}.practice-score-mode strong{color:var(--text);font-size:18px;line-height:1.25}.practice-score-mode dl{grid-template-columns:1fr 1fr;gap:6px;display:grid}.practice-score-mode dl div{border:1px solid var(--line);background:var(--surface-deep);padding:8px}.practice-score-mode dt{font-size:11px}.practice-score-mode dd{margin-top:5px;font-size:16px}.rank-guide-summary{grid-template-columns:1fr 1fr 1.4fr;gap:8px;display:grid}.rank-guide-summary div{border:1px solid var(--line);background:var(--surface-2);min-height:92px;padding:14px}.rank-guide-summary span{color:var(--muted);font-size:12px;font-weight:800;display:block}.rank-guide-summary strong{color:var(--text);margin-top:10px;font-size:clamp(22px,4vw,36px);line-height:1;display:block}.rank-guide-current-canvas{margin-top:12px}.rank-guide-columns{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;display:grid}.rank-guide-column{gap:8px;min-width:0;display:grid}.rank-guide-column h2{color:var(--text);margin:0;font-size:18px;font-weight:900;line-height:1.1}.rank-guide-table-head,.rank-guide-row{grid-template-columns:minmax(112px,1fr) 104px 108px;align-items:center;gap:8px;display:grid}.rank-guide-table-head{color:var(--muted);padding:8px 12px 0;font-size:12px;font-weight:800}.rank-guide-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.rank-guide-row{border:1px solid var(--line);background:var(--surface-2);min-height:52px;padding:9px 12px}.rank-guide-row.reached{border-color:#56d6a457}.rank-guide-row.current{border-color:var(--gold);background:var(--surface-active)}.rank-guide-band{align-items:center;gap:10px;min-width:0;display:flex}.rank-guide-band small{min-width:0;color:var(--muted);font-size:12px;font-weight:800}.rank-guide-score,.rank-guide-state{font-size:14px;font-weight:900}.rank-guide-score{color:var(--text);text-align:right}.rank-guide-state{color:var(--muted);text-align:right}.rank-guide-row.reached .rank-guide-state{color:var(--accent-2)}.rank-guide-row.current .rank-guide-state{color:var(--gold)}.mode-select-screen{align-content:center;gap:22px;min-height:calc(100vh - 150px);padding:28px 0 42px;display:grid}.mode-select-heading{text-align:center;width:min(920px,100%);margin:0 auto}.mode-select-heading .panel-heading{justify-content:center;margin-bottom:8px}.mode-select-heading p{color:var(--muted);margin-bottom:0;font-size:15px;font-weight:700}.mode-select-group{gap:34px;width:min(1040px,100%);margin:0 auto;display:grid}.mode-select-section{gap:12px;display:grid}.production-section{padding-top:28px}.mode-select-section-heading{color:var(--muted);text-align:center;justify-content:center;align-items:baseline;gap:10px;display:flex}.mode-select-section-heading span{color:var(--text);letter-spacing:0;text-transform:uppercase;font-size:13px;font-weight:900}.mode-select-section-heading small{font-size:13px;font-weight:800}.alpha-lock-note{border:1px solid color-mix(in srgb, var(--warn) 42%, var(--line));background:color-mix(in srgb, var(--warn) 10%, transparent);color:var(--text);margin:0;padding:10px 12px;font-size:12px;font-weight:800;line-height:1.5}.mode-select-grid{gap:12px;display:grid}.practice-modes{grid-template-columns:repeat(3,minmax(0,1fr))}.production-modes{grid-template-columns:repeat(2,minmax(0,1fr));width:min(700px,100%);margin:0 auto}.mode-select-card{border:1px solid var(--line);background:var(--surface-2);min-height:176px;color:var(--text);text-align:center;align-content:center;justify-items:center;gap:9px;padding:20px 18px;text-decoration:none;display:grid;position:relative}.mode-select-card:hover:not(:disabled),.mode-select-card:focus-visible{border-color:var(--accent);background:var(--surface-active);outline:none}.mode-select-card:disabled{opacity:.5}.mode-icon{background:var(--panel-strong);width:50px;height:50px;color:var(--accent);border:1px solid #d7ff5f3d;place-items:center;display:grid}.mode-select-card .mode-code{background:var(--surface-deep);width:auto;min-width:46px;height:auto;color:var(--accent-2);padding:4px 8px;font-size:12px}.mode-select-card strong{font-size:22px;line-height:1.2}.mode-select-card small{color:var(--muted);font-size:13px;line-height:1.55}.mode-lock{color:var(--muted);align-items:center;gap:5px;font-size:12px;font-weight:900;display:flex;position:absolute;top:12px;right:12px}.mode-select-duration{border-top:0;width:min(360px,100%);margin:0 auto 4px;padding-top:0}.settings-screen{gap:18px;width:min(920px,100%);margin:0 auto;padding:28px 0 42px;display:grid}.settings-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;gap:16px;padding-bottom:18px;display:flex}.settings-head h2{font-size:clamp(36px,7vw,72px)}.settings-list{gap:22px;display:grid}.settings-category{gap:10px;display:grid}.settings-category-title{color:var(--accent);letter-spacing:0;margin:0;font-size:13px;font-weight:900}.settings-category-list{gap:10px;display:grid}.settings-row{border:1px solid var(--line);background:var(--panel);grid-template-columns:1fr auto;align-items:center;gap:16px;padding:16px;display:grid}.settings-row h4{color:var(--text);letter-spacing:0;margin:0;font-size:17px}.settings-row p{color:var(--muted);margin:6px 0 0;font-size:13px;font-weight:700}.toggle-control{align-items:center;width:58px;height:34px;display:inline-flex;position:relative}.toggle-control input{opacity:0;position:absolute;inset:0}.toggle-control span{border:1px solid var(--line);background:var(--surface-deep);width:100%;height:100%}.toggle-control span:after{background:var(--muted);content:"";width:24px;height:24px;margin:4px;transition:transform .14s,background .14s;display:block}.toggle-control input:checked+span{border-color:var(--accent-2)}.toggle-control input:checked+span:after{background:var(--accent-2);transform:translate(24px)}.toggle-control input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.number-control{border:1px solid var(--line);background:var(--surface);align-items:center;min-width:132px;display:flex}.number-control input{width:82px;color:var(--text);font:inherit;appearance:textfield;background:0 0;border:0;outline:none;padding:10px 6px 10px 12px;font-weight:900}.number-control input::-webkit-inner-spin-button{appearance:none;margin:0}.number-control input::-webkit-outer-spin-button{appearance:none;margin:0}.number-control input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.number-control span{color:var(--muted);padding-right:8px;font-size:13px;font-weight:800}.number-stepper{border-left:1px solid var(--line);align-self:stretch;width:34px;display:grid}.number-stepper button{background:var(--surface-deep);min-height:21px;color:var(--text);border:0;place-items:center;padding:0;display:grid}.number-stepper button:first-child{border-bottom:1px solid var(--line)}.number-stepper button:hover:not(:disabled),.number-stepper button:focus-visible{background:var(--surface-active);color:var(--accent);outline:none}.number-stepper button:disabled{color:var(--soft);opacity:.45}.theme-segmented{grid-template-columns:1fr 1fr;gap:6px;min-width:220px;display:grid}.theme-segmented button{border:1px solid var(--line);background:var(--surface);min-height:42px;color:var(--text);justify-content:center;align-items:center;gap:7px;padding:9px 12px;font-weight:900;display:flex}.theme-segmented button.selected{border-color:var(--accent);color:var(--accent)}.sound-settings-row{align-items:start}.sound-settings-controls{gap:12px;width:min(520px,46vw);display:grid}.sound-volume-control{border:1px solid var(--line);background:var(--surface);grid-template-columns:auto minmax(160px,1fr) 52px;align-items:center;gap:12px;min-height:44px;padding:8px 12px;display:grid}.sound-volume-control span,.sound-toggle-item>span:first-child{color:var(--text);font-size:13px;font-weight:900}.sound-volume-control input{width:100%;accent-color:var(--accent-2)}.sound-volume-control input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.sound-volume-control strong{color:var(--accent-2);text-align:right;font-size:14px}.sound-toggle-list{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sound-toggle-item{border:1px solid var(--line);background:var(--surface);justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:6px 8px 6px 12px;display:flex}.danger-row{border-color:#ff675f6b}.danger-row h4{color:var(--warn)}.danger-button{min-height:42px;color:var(--warn);background:#ff675f1a;border:1px solid #ff675f9e;justify-content:center;align-items:center;gap:7px;padding:9px 14px;font-weight:900;display:inline-flex}.danger-button:hover,.danger-button:focus-visible{background:var(--warn);color:var(--ink);outline:none}.romaji-method-row,.sokuon-method-row{align-items:start}.romaji-method-controls{gap:12px;width:min(560px,48vw);display:grid}.sokuon-setting-controls{gap:10px;width:min(560px,48vw);display:grid}.sokuon-split-toggle{border:1px solid var(--line);background:var(--surface);justify-content:space-between;align-items:center;gap:12px;min-height:42px;padding:5px 8px 5px 12px;display:flex}.sokuon-split-toggle>span:first-child{color:var(--text);font-size:13px;font-weight:900}.romaji-preset-segmented{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.romaji-preset-segmented button{border:1px solid var(--line);background:var(--surface);min-height:42px;color:var(--text);padding:9px 10px;font-size:13px;font-weight:900}.romaji-preset-segmented button.selected{border-color:var(--accent);color:var(--accent)}.romaji-custom-list{border:1px solid var(--line);background:var(--surface-deep);max-height:420px;display:grid;overflow:auto}.romaji-custom-item{border-bottom:1px solid var(--line);grid-template-columns:minmax(92px,.5fr) minmax(190px,1.4fr) minmax(118px,.7fr);align-items:center;gap:10px;padding:10px;display:grid}.romaji-custom-item:last-child{border-bottom:0}.romaji-custom-item>span,.romaji-preferred-select span{color:var(--muted);font-size:13px;font-weight:900}.romaji-choice-list{flex-wrap:wrap;gap:6px;min-width:0;display:flex}.romaji-choice-list label{border:1px solid var(--line);background:var(--surface);min-height:32px;color:var(--text);align-items:center;gap:5px;padding:6px 8px;font-size:13px;font-weight:800;display:inline-flex}.romaji-choice-list input{margin:0}.romaji-preferred-select{align-items:center;gap:6px;min-width:0;display:flex}.romaji-preferred-select select{border:1px solid var(--line);background:var(--surface);width:100%;min-width:0;color:var(--text);padding:7px 8px;font-weight:900}.workspace{grid-template-columns:340px 1fr;align-items:stretch}.side-panel,.practice-panel,.analysis-panel,.history-panel{border:1px solid var(--line);background:#191814eb}.side-panel{padding:16px}.panel-heading{color:var(--muted);text-transform:uppercase;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:800;display:flex}.mode-list{gap:8px;display:grid}.mode-button{border:1px solid var(--line);background:var(--surface-2);width:100%;min-height:82px;color:var(--text);text-align:left;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:12px;display:grid}.mode-button.active{border-color:var(--accent);background:var(--surface-active)}.mode-button:disabled{opacity:.48}.mode-code{background:var(--panel-strong);width:52px;height:52px;color:var(--accent);place-items:center;font-size:14px;font-weight:900;display:grid}.mode-button strong,.mode-button small{display:block}.mode-button small{color:var(--muted);margin-top:5px;font-size:12px;line-height:1.45}.duration-block{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.duration-block>span{color:var(--muted);margin-bottom:8px;font-size:13px;font-weight:700;display:block}.segmented{grid-template-columns:1fr 1fr;gap:6px;display:grid}.segmented button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:10px 12px}.segmented .selected{border-color:var(--accent-2);color:var(--accent-2)}.practice-panel{min-height:680px;padding:18px}.practice-panel.direct-panel{min-height:auto}.meter-row{grid-template-columns:repeat(6,minmax(100px,1fr));gap:8px;display:grid}.metric{border:1px solid var(--line);background:var(--surface-2);min-height:74px;padding:10px}.metric span{color:var(--muted);align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.metric strong{color:var(--text);margin-top:8px;font-size:28px;line-height:1;display:block}.progress-track{background:var(--surface-deep);height:8px;margin:14px 0 20px;overflow:hidden}.progress-track span{background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--gold));height:100%;transition:width .16s linear;display:block}.session-head{justify-content:space-between;align-items:start;gap:16px;margin-bottom:24px;display:flex}.actions{gap:8px;display:flex}.correction-debt{background:linear-gradient(90deg, #ff675f29, transparent), var(--surface-deep);min-height:60px;color:var(--warn);border:1px solid #ff675f85;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 0;padding:12px 14px;display:flex}.keycap{background:var(--surface);color:var(--text);text-transform:uppercase;border:1px solid;flex:none;padding:5px 9px;font-size:15px;font-weight:900;line-height:1}.debt-count{flex:none;font-size:20px;font-weight:900}.debt-dots{flex-wrap:wrap;flex:1;align-items:center;gap:8px;min-width:0;display:flex}.debt-dots span{background:currentColor;flex:none;width:20px;height:20px}.debt-dots em{color:var(--muted);font-size:16px;font-style:normal;font-weight:900}.icon-button{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--text);place-items:center;display:grid}.icon-button.primary{border-color:var(--accent);background:var(--accent);color:var(--ink)}.target-view{border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:202px;padding:22px 0}.target-view p{margin:0;font-size:clamp(23px,3vw,38px);line-height:1.45}.target-view .display-text{margin-bottom:6px}.target-view .reading-text{color:var(--muted);margin-bottom:10px;font-size:clamp(18px,2.25vw,28px);line-height:1.4}.target-view .input-target{color:var(--soft);font-family:Segoe UI,Arial,sans-serif;font-size:clamp(16px,1.8vw,23px);line-height:1.45}.char{color:#6f695b;border-bottom:2px solid #0000}.char.correct{color:var(--accent-2)}.char.wrong{color:var(--warn);background:#ff675f38}.char.mistake-flash{animation:.26s ease-out mistake-character-flash}.char.current{color:var(--text);border-color:var(--accent)}.char.correct.current{color:var(--accent-2)}.visual-space{white-space:pre}@keyframes mistake-character-flash{0%{color:var(--warn);background:#ff675f5c;box-shadow:0 0 0 1px #ff675f29}to{color:var(--text);background:0 0;box-shadow:0 0 #ff675f00}}.typing-input{border:1px solid var(--line);resize:vertical;background:var(--surface-deep);width:100%;min-height:138px;color:var(--text);outline:none;margin-top:18px;padding:16px;font-size:18px;line-height:1.7;display:block}.challenge-analysis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;display:grid}.challenge-analysis-title{color:var(--muted);text-transform:uppercase;grid-column:1/-1;font-size:12px;font-weight:900}.analysis-column{border:1px solid var(--line);background:var(--surface-2);align-content:start;gap:10px;min-height:178px;padding:12px;display:grid}.analysis-heading{grid-template-columns:1fr auto;align-items:baseline;gap:6px 10px;display:grid}.analysis-heading span{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:900}.analysis-heading strong{color:var(--text);font-size:30px;line-height:1}.analysis-heading small{color:var(--muted);grid-column:1/-1;font-size:12px;font-weight:900}.correctness-tiles{grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;min-height:62px;display:grid}.correctness-tile{background:var(--soft);min-width:0;height:28px;color:var(--ink);text-transform:uppercase;place-items:center;font-size:11px;font-weight:900;line-height:1;display:grid;overflow:hidden}.correctness-tile.correct{background:var(--accent-2)}.correctness-tile.wrong{background:var(--warn)}.correctness-tile.correction{background:var(--panel-strong);color:var(--muted)}.correctness-tile.neutral{background:var(--soft)}.analysis-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.analysis-metrics div{border:1px solid var(--line);background:var(--surface-deep);min-width:0;padding:9px}.analysis-metrics span{color:var(--muted);font-size:11px;font-weight:900;display:block}.analysis-metrics strong{color:var(--text);margin-top:6px;font-size:18px;line-height:1;display:block}.stability-mini-chart{border:1px solid var(--line);background:var(--surface-deep);align-items:end;gap:3px;height:58px;padding:8px;display:flex;overflow:hidden}.stability-mini-bar{background:var(--soft);flex:3px;min-width:3px}.stability-mini-bar.stable{background:var(--accent-2)}.stability-mini-bar.fast{background:var(--accent)}.stability-mini-bar.slow{background:var(--gold)}.stability-mini-bar.wrong{background:var(--warn)}.stability-mini-bar.correction{background:var(--panel-strong)}.analysis-empty{min-height:48px;color:var(--muted);grid-column:1/-1;place-items:center;font-size:13px;font-weight:900;display:grid}.typing-input:focus{border-color:var(--accent)}.typing-input::placeholder{color:var(--soft)}.error-line{color:var(--warn);margin:10px 0 0;font-size:14px;font-weight:700}.locked-panel{border:1px solid var(--line);min-height:360px;color:var(--muted);text-align:center;place-items:center;display:grid}.locked-panel p{max-width:360px;margin:12px 0 0}.result-band{color:var(--accent-2);background:#56d6a41f;border:1px solid #56d6a480;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;font-weight:800;display:flex}.result-band.retired{color:var(--warn);background:#ff675f1f;border-color:#ff675f80}.lower-grid{grid-template-columns:1fr 1fr;margin-top:18px}.analysis-panel,.history-panel{padding:16px}dl{grid-template-columns:repeat(4,1fr);gap:8px;margin:0;display:grid}dl div,.history-panel li{border:1px solid var(--line);background:var(--surface-2);padding:12px}dt{color:var(--muted);font-size:12px;font-weight:700}dd{margin:8px 0 0;font-size:24px;font-weight:900}.flow-stability{border-top:1px solid var(--line);gap:12px;margin-top:14px;padding-top:14px;display:grid}.flow-stability-head{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.flow-stability-head div{border:1px solid var(--line);background:var(--surface-deep);min-width:0;padding:10px}.flow-stability-head span{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:900;display:block}.flow-stability-head strong{color:var(--text);margin-top:7px;font-size:22px;line-height:1;display:block}.stability-empty{border:1px dashed var(--line);min-height:142px;color:var(--muted);place-items:center;font-size:13px;font-weight:900;display:grid}.stability-chart{border:1px solid var(--line);background:linear-gradient(180deg, transparent 24%, #ffffff09 25%, transparent 26%), linear-gradient(180deg, transparent 49%, #ffffff0e 50%, transparent 51%), linear-gradient(180deg, transparent 74%, #ffffff09 75%, transparent 76%), var(--surface-deep);align-items:end;gap:3px;height:128px;padding:10px;display:flex;overflow:hidden}.stability-bar{background:var(--soft);flex:3px;min-width:3px;transition:height .12s,background .12s,opacity .12s}.stability-bar.stable,.character-sample.stable{background:var(--accent-2)}.stability-bar.fast,.character-sample.fast{background:var(--accent)}.stability-bar.slow,.character-sample.slow{background:var(--gold)}.stability-bar.miss,.character-sample.miss{background:var(--warn)}.stability-bar.correction,.character-sample.correction{background:var(--panel-strong);color:var(--muted)}.stability-bar.neutral,.character-sample.neutral{background:var(--soft)}.character-rail{grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;display:grid}.character-sample{background:var(--soft);min-width:0;height:26px;color:var(--ink);text-transform:uppercase;place-items:center;font-size:11px;font-weight:900;line-height:1;display:grid;overflow:hidden}.history-panel ol{grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;list-style:none;display:grid}.history-panel li strong,.history-panel li small,.history-panel li em{display:block}.history-rank-canvas{margin-bottom:8px}.history-panel li small,.history-panel li em,.empty{color:var(--muted)}.history-panel li em{margin-top:4px;font-size:12px;font-style:normal}.empty{margin-bottom:0}.user-page{gap:18px;display:grid}.user-page-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;gap:16px;padding:18px 0 20px;display:flex}.user-page-head h1{margin-top:6px;font-size:clamp(34px,6vw,64px);line-height:1}.user-page-head p{color:var(--muted);margin:10px 0 0;font-size:14px;font-weight:800}.user-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.user-summary div,.user-sessions-panel{border:1px solid var(--line);background:var(--surface-2);padding:16px}.user-summary span{color:var(--muted);font-size:12px;font-weight:900;display:block}.user-summary-rank-canvas{margin-top:12px;display:block}.user-summary strong{color:var(--text);margin-top:8px;font-size:26px;line-height:1;display:block}.user-session-list{grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;list-style:none;display:grid}.user-session-list li{border:1px solid var(--line);background:var(--surface-deep);padding:12px}.user-session-list li strong,.user-session-list li small,.user-session-list li em{display:block}.user-session-list li small,.user-session-list li em{color:var(--muted)}.user-session-list li em{margin-top:4px;font-size:12px;font-style:normal}@media (max-width:1100px){.app-header{flex-direction:column;align-items:flex-start}.header-status{flex-direction:column-reverse;align-items:stretch;width:100%}.header-actions{justify-content:space-between}.language-switch{flex:1}.language-switch button{flex:1;justify-content:center}.workspace,.lower-grid,.challenge-analysis,.user-summary{grid-template-columns:1fr}.mode-select-screen{align-content:start;min-height:auto;padding-top:20px}.practice-modes,.production-modes{grid-template-columns:1fr;width:100%}.meter-row,dl,.history-panel ol,.user-session-list{grid-template-columns:repeat(2,1fr)}}@media (max-width:720px){.shell{width:min(100vw - 20px,680px);padding-top:12px}.rank-strip{width:100%}.rank-badge{flex:1}.rank-guide-link{min-width:64px;padding:0 9px}.rank-guide-summary,.score-guide,.practice-score-modes,.rank-guide-columns{grid-template-columns:1fr}.rank-guide-table-head{display:none}.rank-guide-row{grid-template-columns:minmax(88px,1fr) 94px}.rank-guide-state{text-align:left;grid-column:1/-1}.meter-row,dl,.history-panel ol,.user-session-list,.analysis-metrics{grid-template-columns:1fr}.correctness-tiles{grid-template-columns:repeat(12,minmax(0,1fr))}.flow-stability-head{grid-template-columns:1fr}.character-rail{grid-template-columns:repeat(12,minmax(0,1fr))}.session-head{display:grid}.settings-row{grid-template-columns:1fr}.romaji-method-controls,.sokuon-setting-controls,.sound-settings-controls{width:100%}.sound-toggle-list,.sound-volume-control{grid-template-columns:1fr}.sound-volume-control strong{text-align:left}.romaji-preset-segmented,.romaji-custom-item{grid-template-columns:1fr}.theme-segmented{min-width:0}.target-view p{font-size:22px}}