:root{--ink: #171c1a;--muted: #60706b;--faint: #edf3f0;--paper: #f6f9f7;--surface: #ffffff;--line: #d9e4df;--accent: #d84a31;--accent-dark: #a52f20;--teal: #0d7d74;--teal-soft: #dff3ef;--gold: #c48a18;--green: #278653;--red: #c9362c;--shadow: 0 20px 50px rgba(28, 45, 39, .12);color:var(--ink);background:var(--paper);font-family:Hiragino Sans,Yu Gothic,Noto Sans CJK JP,PingFang SC,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-height:100%}body{min-height:100%;margin:0;background:linear-gradient(90deg,rgba(13,125,116,.06) 1px,transparent 1px),linear-gradient(rgba(13,125,116,.05) 1px,transparent 1px),var(--paper);background-size:36px 36px}button{border:0;font:inherit}button:focus-visible{outline:3px solid rgba(216,74,49,.36);outline-offset:3px}.app{width:min(1460px,calc(100% - 32px));margin:0 auto;padding:28px 0 36px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:18px 0 20px}.eyebrow{margin:0 0 6px;color:var(--teal);font-size:.82rem;font-weight:800}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:3.8rem;font-weight:900;letter-spacing:0}h2{margin-bottom:0;font-size:2rem;font-weight:900;letter-spacing:0}h3{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:1rem}.top-metrics{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:10px;min-width:min(460px,100%)}.metric{min-height:72px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#ffffffd1;box-shadow:0 10px 26px #1c2d270f}.metric span,.metric strong{display:block}.metric span{color:var(--muted);font-size:.82rem;font-weight:700}.metric strong{margin-top:6px;font-size:1.35rem}.mode-tabs{display:flex;gap:10px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#ffffffad;box-shadow:var(--shadow)}.mode-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;flex:1;border-radius:7px;color:var(--muted);background:transparent;cursor:pointer;font-weight:800}.mode-button.is-active{color:var(--surface);background:var(--ink)}.workspace{display:grid;grid-template-columns:180px minmax(0,1fr) 330px;gap:18px;margin-top:18px;align-items:start}.row-rail,.main-panel,.stats-panel{border:1px solid var(--line);border-radius:8px;background:#ffffffdb;box-shadow:var(--shadow)}.row-rail{padding:14px}.rail-title{margin-bottom:12px;color:var(--muted);font-size:.82rem;font-weight:900}.row-list{display:grid;gap:8px}.row-button{display:grid;gap:8px;width:100%;min-height:52px;padding:10px 11px;border:1px solid transparent;border-radius:8px;color:var(--ink);background:var(--faint);cursor:pointer;font-weight:900;text-align:left}.row-button.is-active{border-color:#d84a3161;color:var(--accent-dark);background:#fff1ee}.row-button:disabled{color:#9aa6a2;background:#f1f4f2;cursor:not-allowed}.row-meter,.mini-meter,.wide-meter{display:block;overflow:hidden;height:6px;border-radius:999px;background:#dce6e1}.row-meter span,.mini-meter span,.wide-meter span{display:block;height:100%;border-radius:inherit;background:var(--teal)}.main-panel{min-height:646px;padding:24px}.section-heading,.stats-header{display:flex;align-items:start;justify-content:space-between;gap:18px}.progress-dots{display:flex;gap:8px;padding-top:10px}.progress-dots span{width:13px;height:13px;border:2px solid var(--line);border-radius:50%;background:var(--surface)}.progress-dots .is-done{border-color:var(--teal);background:var(--teal)}.kana-grid{display:grid;grid-template-columns:repeat(5,minmax(112px,1fr));gap:14px;margin-top:26px}.kana-tile{display:grid;grid-template-rows:auto 1fr auto;min-height:264px;padding:20px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface);cursor:pointer;text-align:left;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.kana-tile:hover{transform:translateY(-3px);border-color:#0d7d746b;box-shadow:0 18px 32px #152f281f}.kana-tile.is-listened{border-color:#0d7d7470;background:linear-gradient(180deg,#ffffff 0%,var(--teal-soft) 100%)}.kana-symbol{font-size:6.7rem;font-weight:900;line-height:.98}.kana-hint{align-self:end;min-height:64px;color:var(--muted);font-size:.95rem;font-weight:650;line-height:1.55}.tile-footer{display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:var(--teal)}.action-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.primary-action,.secondary-action,.sound-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:8px;cursor:pointer;font-weight:900}.primary-action{padding:0 18px;color:var(--surface);background:var(--accent)}.primary-action:disabled{color:#f4f4f0;background:#b5bfbb;cursor:not-allowed}.secondary-action,.sound-button{padding:0 16px;color:var(--ink);background:var(--faint)}.sound-button{min-width:118px;color:var(--surface);background:var(--teal)}.icon-button{width:42px;min-height:42px;color:var(--ink);background:var(--faint)}.status-line{min-height:24px;margin:18px 0 0;color:var(--muted);font-size:.94rem;font-weight:800}.status-line.is-playing{color:var(--teal)}.status-line.is-error{color:var(--red)}.practice-view{min-height:596px}.question-stage{display:grid;place-items:center;min-height:220px;margin-top:26px;border:1px dashed rgba(13,125,116,.36);border-radius:8px;background:radial-gradient(circle at center,rgba(13,125,116,.16),transparent 42%),var(--faint)}.speaker-mark{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;color:var(--surface);background:var(--ink)}.answer-grid{display:grid;grid-template-columns:repeat(5,minmax(82px,1fr));gap:12px;margin-top:22px}.answer-tile{min-height:132px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface);cursor:pointer;font-size:4.2rem;font-weight:900;transition:transform .16s ease,border-color .16s ease,background .16s ease}.answer-tile:hover:not(:disabled){transform:translateY(-2px);border-color:var(--teal)}.answer-tile.is-correct{border-color:#27865380;color:#0f5d35;background:#e4f5ec}.answer-tile.is-wrong{border-color:#c9362c80;color:#a01f18;background:#fde7e5}.answer-tile:disabled{cursor:default}.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.feedback{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:8px;font-weight:900}.feedback.is-correct{color:#0f5d35;background:#e4f5ec}.feedback.is-wrong{color:#a01f18;background:#fde7e5}.feedback.is-muted{color:var(--muted);background:var(--faint)}.stats-panel{padding:18px}.stats-content{display:grid;gap:20px}.curve-box{position:relative;min-height:166px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--faint)}.curve{width:100%;height:108px}.curve path{fill:none;stroke:#60706b3d;stroke-width:1}.curve polyline{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;stroke-width:5}.curve-number{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px}.curve-number strong{font-size:1.8rem}.curve-number span{color:var(--muted);font-weight:800}.stat-block{padding-top:2px}.problem-list,.row-mastery-list{display:grid;gap:8px}.problem-row{display:grid;grid-template-columns:36px 54px 1fr;align-items:center;gap:10px;min-height:42px;color:var(--muted);font-weight:800}.problem-row strong{color:var(--ink);font-size:1.45rem}.mini-meter{height:8px}.mastery-row{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px;min-height:34px;color:var(--muted);font-weight:850}.wide-meter{height:8px}@media(max-width:1180px){.workspace{grid-template-columns:160px minmax(0,1fr)}.stats-panel{grid-column:1 / -1}.stats-content{grid-template-columns:1fr 1fr 1fr;align-items:start}}@media(max-width:860px){.app{width:min(100% - 20px,720px);padding-top:14px}.topbar{display:grid;align-items:start}h1{font-size:3rem}.top-metrics{grid-template-columns:repeat(3,1fr);min-width:0}.workspace{grid-template-columns:1fr}.row-rail{overflow-x:auto}.row-list{display:flex;min-width:max-content}.row-button{width:112px}.kana-grid,.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kana-grid .kana-tile:last-child:nth-child(odd),.answer-grid .answer-tile:last-child:nth-child(odd){grid-column:1 / -1}.stats-content{grid-template-columns:1fr}}@media(max-width:540px){.top-metrics{grid-template-columns:1fr}.mode-tabs{gap:6px}.mode-button{min-height:44px}.mode-button span{display:none}.main-panel,.stats-panel{padding:16px}.section-heading{display:grid}.kana-grid,.answer-grid{grid-template-columns:1fr}.kana-tile{min-height:214px}.kana-symbol{font-size:5.4rem}.answer-tile{min-height:106px}.feedback-row{display:grid}}