@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap";:root{--ink:#202721;--muted:#788078;--paper:#f7f8f5;--card:#fff;--line:#e4e8e1;--green:#467b5d;--green-soft:#e7f0e7;--sand:#e9e7dc;--accent:#c77d5f;--shadow:0 12px 32px rgba(38,54,43,.06)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:DM Sans,Noto Sans JP,sans-serif}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#f0f3ee;border-right:1px solid var(--line);padding:34px 20px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;font-weight:700;font-size:17px;letter-spacing:-.03em}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:400;letter-spacing:.03em;margin-top:3px}.brand-mark{background:var(--ink);color:#fff;width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-size:12px;letter-spacing:-.08em}nav{margin-top:70px;display:grid;gap:8px}.nav-item{text-align:left;padding:13px 15px;border-radius:10px;color:var(--muted);font-size:14px;display:flex;gap:12px;align-items:center}.nav-item span{font-size:19px;width:20px;text-align:center}.nav-item.active{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}.sidebar-note{margin-top:auto;border-top:1px solid var(--line);padding:18px 4px;display:flex;gap:9px;align-items:flex-start;font-size:12px}.sidebar-note small{color:var(--muted);font-size:11px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:4px}.main-content{max-width:1100px;width:100%;margin:0 auto;padding:48px 68px 70px}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:38px}.eyebrow,.tag{font-size:10px;letter-spacing:.13em;color:var(--green);font-weight:700;margin:0 0 9px}.page-header h1{font-family:Noto Sans JP;font-size:29px;line-height:1.35;letter-spacing:-.06em;margin:0}.lead{color:var(--muted);font-size:13px;margin:10px 0 0}.profile{border:1px solid var(--line);border-radius:20px;background:#fff;padding:7px 11px 7px 7px;display:flex;gap:8px;align-items:center;font-size:11px}.profile:first-letter{background:var(--sand)}.profile span{color:var(--muted)}.hero-card{min-height:300px;background:#e7eee5;border-radius:20px;padding:40px 45px;display:flex;justify-content:space-between;overflow:hidden;position:relative}.hero-copy{position:relative;z-index:1}.hero-copy h2{font-family:Noto Sans JP;font-size:26px;letter-spacing:-.07em;margin:15px 0 12px}.hero-copy p{font-size:13px;line-height:1.9;color:#657066}.primary{margin-top:23px;padding:13px 19px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;display:inline-flex;gap:20px;align-items:center;transition:.2s}.primary:hover{transform:translateY(-2px);background:#3b5847}.primary span{font-size:18px}.vowel-orbit{width:300px;height:250px;position:absolute;right:32px;top:23px}.orbit{position:absolute;border:1px solid rgba(70,123,93,.25);border-radius:50%;width:230px;height:230px;top:10px;left:35px}.orbit-two{width:160px;height:160px;top:45px;left:70px;border-color:#c77d5f4d}.vowel-pill{position:absolute;left:105px;top:82px;background:var(--green);color:#fff;width:75px;height:75px;border-radius:50%;display:grid;place-content:center;text-align:center;box-shadow:0 8px 20px #467b5d55}.vowel-pill b{font-size:20px}.vowel-pill small{font-size:9px;opacity:.8}.vowel-pill.second{left:190px;top:135px;background:#fff;color:var(--accent);width:52px;height:52px;box-shadow:0 6px 16px #3331}.vowel-pill.second b{font-size:15px}.section-head{display:flex;align-items:baseline;gap:13px;margin:38px 0 14px}.section-head h2{font-size:15px;margin:0}.muted{font-size:11px;color:var(--muted)}.metric-grid,.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{background:#fff;border:1px solid var(--line);padding:19px 20px;border-radius:12px;display:flex;flex-direction:column;gap:6px}.metric span{font-size:11px;color:var(--muted)}.metric strong{font-size:25px;letter-spacing:-.05em}.metric strong.green{color:var(--green)}.metric small{font-size:10px;color:#a0a79f}.flow-card{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px 28px}.flow-step{display:flex;align-items:center;gap:11px;flex:1}.flow-step>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;border:1px solid #ced8ce;color:var(--muted);font-size:10px}.flow-step.done>span{background:var(--green);border-color:var(--green);color:#fff}.flow-step b{font-size:12px}.flow-step small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.flow-line{height:1px;background:var(--line);width:26px}.disclaimer{font-size:10px;color:#9aa19a;margin-top:30px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr);gap:20px}.practice-card,.sense-card,.feedback-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}.progress{height:3px;background:#ebeee9;border-radius:5px;margin-bottom:30px}.progress span{height:100%;display:block;background:var(--green);border-radius:5px}.phase-label{font-size:10px;letter-spacing:.14em;color:var(--green);font-weight:700}.phase-label i{font-style:normal;color:#c9d2c8;margin-left:6px}.word-display{text-align:center;padding:30px 0 25px}.pair-label{color:var(--muted);font-size:12px}.word-display h2{font-family:DM Sans;font-size:60px;letter-spacing:-.08em;margin:10px 0 3px}.word-display p{font-size:12px;color:var(--green);margin:0}.listen-row{display:flex;justify-content:center;align-items:center;gap:13px;margin:8px 0 23px}.round-button{width:41px;height:41px;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:15px}.round-button.pulse{animation:pulse .7s}.listen-row b{font-size:12px;display:block}.listen-row small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.record-button{width:100%;border:1px solid #d6e1d6;border-radius:9px;padding:14px;background:#f5f8f4;color:var(--green);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:9px}.record-button span{font-size:16px}.record-button.recording{background:#f9ece7;border-color:#ebc9b9;color:var(--accent)}.privacy-hint{text-align:center;color:#a2aaa2;font-size:10px;margin:16px 0 0}.sense-card{background:#eff3ed;position:relative;overflow:hidden}.sense-card h3{font-family:Noto Sans JP;font-size:21px;letter-spacing:-.06em;margin:20px 0 8px}.sense-card>p{font-size:12px;line-height:1.8;color:#637065}.mouth-diagram{height:155px;background:#e6ebe4;border-radius:10px;margin:22px 0;display:grid;place-items:center;position:relative}.mouth-line{width:100px;height:38px;border:2px solid #aebcae;border-top:0;border-radius:0 0 50% 50%;position:relative}.mouth-line:before{content:"";position:absolute;width:35px;height:10px;background:#c77d5f55;border-radius:50%;left:30px;top:-4px}.mouth-diagram span{position:absolute;bottom:12px;font-size:10px;color:var(--muted)}.avoid-score{border-top:1px solid #dbe3d9;padding-top:15px;display:flex;flex-direction:column;gap:7px}.avoid-score span{font-size:10px;color:var(--muted)}.avoid-score b{font-size:12px}.result-hero{background:#e7eee5;border-radius:18px;padding:36px 42px;display:flex;align-items:center;justify-content:space-between}.result-hero h2{font-family:Noto Sans JP;font-size:28px;line-height:1.45;letter-spacing:-.07em;margin:13px 0}.result-hero p{font-size:12px;color:#647064;line-height:1.8}.result-ring{width:145px;height:145px;border-radius:50%;border:9px solid #b8d0b9;display:grid;place-content:center;text-align:center;color:var(--green);margin-right:40px}.result-ring strong{font-size:38px;letter-spacing:-.08em}.result-ring strong small{font-size:16px}.result-ring span{font-size:10px;color:var(--muted)}.result-grid{margin-top:18px}.feedback-card{display:flex;gap:20px;align-items:flex-start;margin-top:18px;background:#fbfcfa}.feedback-icon{width:42px;height:42px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:22px;flex:none}.feedback-card h3{font-family:Noto Sans JP;font-size:16px;margin:9px 0}.feedback-card p{font-size:12px;line-height:1.9;color:#5f695f;margin:0}.feedback-card small{display:block;font-size:10px;color:#a0a79f;margin-top:15px}.full{width:100%;justify-content:center;margin-top:18px}.history-summary{background:#e8eee6;border-radius:18px;padding:30px 36px;display:flex;align-items:center;justify-content:space-between}.history-summary h2{font-family:Noto Sans JP;font-size:22px;line-height:1.5;letter-spacing:-.06em;margin:12px 0 0}.mini-chart{width:280px}.bars{height:125px;display:flex;gap:19px;align-items:flex-end;border-bottom:1px solid #cbd8cb;padding:0 12px}.bars i{width:27px;background:#8caf91;border-radius:5px 5px 0 0;display:block}.bars i:nth-child(1),.bars i:nth-child(2){background:#c5d4c5}.chart-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:10px}.history-list{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}.history-row{padding:19px 23px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 90px;align-items:center}.history-row:last-child{border-bottom:0}.history-row b{display:block;font-size:12px}.history-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.history-row strong{color:var(--green);font-size:18px}.history-row>span{color:var(--muted);font-size:10px;text-align:right}.empty{text-align:center;padding:55px 20px;color:var(--muted)}.empty span{font-size:30px;display:block;color:#c4cec4}.empty b{display:block;margin-top:10px;color:var(--ink);font-size:13px}.empty p{font-size:11px}.settings-list{background:#fff;border:1px solid var(--line);border-radius:13px}.setting-row{padding:21px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.setting-row:last-child{border-bottom:0}.setting-row b{display:block;font-size:13px}.setting-row small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.switch{width:42px;height:23px;border-radius:14px;background:#d9dfd8;padding:3px;transition:.2s}.switch span{display:block;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s}.switch.on{background:var(--green)}.switch.on span{transform:translate(19px)}.outline{border:1px solid #ccd8cb;border-radius:7px;padding:8px 13px;color:var(--green);font-size:11px}.privacy-box{margin-top:22px;padding:20px 22px;border-radius:13px;background:#eef3ed;display:flex;gap:14px}.privacy-box>span{font-size:20px;color:var(--green)}.privacy-box b{font-size:12px}.privacy-box p{font-size:11px;color:var(--muted);line-height:1.7;margin:7px 0}.privacy-box a{font-size:11px;color:var(--green);text-decoration:none}.version{text-align:center;color:#a7aea7;font-size:10px;margin-top:28px}@keyframes pulse{50%{transform:scale(1.15);box-shadow:0 0 0 8px #467b5d22}}@media(max-width:800px){.sidebar{width:75px;padding:25px 12px}.brand span:not(.brand-mark),.nav-item:not(.active):after,.nav-item{font-size:0}.nav-item{justify-content:center;padding:13px 0}.nav-item span{font-size:21px}.sidebar-note{display:none}.main-content{padding:32px 25px}.hero-card{padding:30px;min-height:340px}.vowel-orbit{right:-55px;opacity:.65}.lesson-layout{grid-template-columns:1fr}.sense-card{display:none}}@media(max-width:520px){.main-content{padding:25px 16px}.page-header{margin-bottom:25px}.page-header h1{font-size:24px}.profile{display:none}.hero-copy h2{font-size:22px}.metric-grid,.result-grid{grid-template-columns:1fr}.flow-card{padding:18px 12px}.flow-step{display:block;text-align:center}.flow-step>span{margin:0 auto 7px}.flow-step small{font-size:9px}.flow-line{width:13px}.result-hero{padding:28px 24px;display:block}.result-ring{margin:25px auto 0}.history-summary{padding:24px;display:block}.mini-chart{width:100%;margin-top:25px}.history-row{grid-template-columns:1fr auto}.history-row>span{display:none}}