@font-face{font-family:"Interface Kana";src:url("assets/NotoSansJP-Kana.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Handwritten Kana";src:url("assets/KleeOne-Kana.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root {
  --ink:#20231f; --paper:#fffdf7; --cream:#f4eddf; --red:#cf4b35;
  --red-dark:#a93829; --indigo:#263d55; --mint:#a9c8b4; --line:#dcd3c3;
  --shadow:0 18px 50px rgba(41,35,26,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.6}
button,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,22px);position:sticky;top:0;z-index:20;background:rgba(255,253,247,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(220,211,195,.6)}
.brand{color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:.06em}
.brand span{display:inline-grid;place-items:center;width:31px;height:31px;margin-right:7px;background:var(--red);color:white;border-radius:50%}
.hero{min-height:560px;position:relative;overflow:hidden;display:flex;align-items:center;padding:70px max(7vw,24px)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,240,224,.98) 0%,rgba(247,240,224,.86) 38%,rgba(247,240,224,.12) 70%)}
.hero-copy{position:relative;z-index:1;max-width:570px}
.eyebrow{font-size:.76rem;letter-spacing:.18em;font-weight:850;color:var(--red);margin:0 0 8px;text-transform:uppercase}
h1{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(2.7rem,6vw,5.2rem);line-height:1.08;margin:8px 0 22px;letter-spacing:-.04em}
.hero-copy>p:not(.eyebrow){max-width:430px;font-size:1.05rem}
.button{border:0;border-radius:999px;padding:12px 19px;cursor:pointer;font-weight:750;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.primary{background:var(--red);color:white;box-shadow:0 8px 20px rgba(207,75,53,.23)}
.primary:hover{background:var(--red-dark)}
.secondary{background:var(--indigo);color:white}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.small{padding:7px 13px;font-size:.82rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:-38px auto 30px;position:relative;z-index:2;background:white;border-radius:20px;box-shadow:var(--shadow);padding:22px}
.stats div{text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border:0}
.stats strong{display:block;font-family:Georgia,serif;font-size:2rem;color:var(--red)}
.stats span{font-size:.77rem;color:#6f706b}
.section{padding:80px max(7vw,24px);scroll-margin-top:60px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;max-width:1120px;margin:0 auto 30px}
h2{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(1.8rem,4vw,3rem);margin:0;line-height:1.2}
h3{font-size:1.2rem;margin:8px 0}
select{background:white;border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink)}
.today-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;margin:auto}
.paper{position:relative;padding:30px;border:1px solid var(--line);border-radius:16px;background:#fff;min-height:220px;box-shadow:0 8px 24px rgba(41,35,26,.05)}
.paper.accent{background:var(--red);color:white;border-color:var(--red)}
.step-no{font-family:Georgia,serif;font-size:2.8rem;color:var(--line);position:absolute;right:22px;top:12px}
.accent .step-no{color:rgba(255,255,255,.28)}
.text-button{padding:0;border:0;background:none;color:var(--red);font-weight:800;cursor:pointer}
.mission-check{display:flex;align-items:center;gap:10px;margin-top:24px;font-weight:750;cursor:pointer}
.mission-check input{width:20px;height:20px;accent-color:var(--indigo)}
.tinted{background:var(--cream)}
.hint{color:#6c6d68;font-size:.85rem}
.trainer{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:48px;align-items:start;max-width:980px;margin:auto}
.trainer-primary{display:flex;min-width:0;flex-direction:column}
.kana-card{height:450px;border-radius:26px;background:white;box-shadow:var(--shadow);padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:pointer;border:1px solid rgba(220,211,195,.6);transition:transform .2s}
.kana-card:hover{transform:translateY(-3px)}
.card-label,.kana-card small{color:#88877f;font-size:.8rem}
.kana-card>strong{font-family:"Interface Kana","Yu Gothic","YuGothic",sans-serif;font-size:10rem;font-weight:500;line-height:1;font-synthesis:none}
.kana-answer{display:flex;flex-direction:column;text-align:center;opacity:0;transform:translateY(7px);transition:.2s}
.kana-answer.show{opacity:1;transform:none}
.kana-answer b{font-size:1.45rem;color:var(--red)}
.kana-answer span{font-size:.83rem;color:#696a65}
.timer{height:5px;border-radius:10px;background:rgba(38,61,85,.13);overflow:hidden}
.timer span{display:block;height:100%;width:100%;background:var(--red);transform-origin:left}
.timer span.running{animation:timer 2s linear forwards}
@keyframes timer{to{transform:scaleX(0)}}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.voice-compare{margin-top:18px;padding:16px 18px;border:1px solid rgba(38,61,85,.16);border-radius:16px;background:rgba(255,255,255,.42)}
.voice-compare p{margin:0}.voice-compare small{color:#6c6d68}
.voice-compare .actions{margin:12px 0 0}
.voice-b{background:#6e5678;color:white}
.voice-compare button:disabled{opacity:.58;cursor:wait;box-shadow:none}
.native-audio{display:flex;align-items:center;gap:10px;margin-top:10px}
.native-audio span{font-size:.72rem;color:#6c6d68;white-space:nowrap}
.native-audio audio{height:34px;width:100%;max-width:320px}
.local-voice-help{display:block;margin-top:9px;color:#8a543f}
.context-card{margin-top:14px;padding:18px;border-radius:17px;background:#fff;border:1px solid var(--line)}
.context-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}
.context-head>div{display:flex;flex-direction:column}.context-head small{color:#777871}
.context-content{display:grid;gap:8px}
.context-word-list{display:grid;gap:8px}
.context-row{display:grid;grid-template-columns:30px minmax(150px,1fr) minmax(190px,300px);align-items:center;gap:12px;padding:11px;border-radius:12px;background:var(--cream)}
.context-row>div{display:flex;flex-direction:column}.context-row strong{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.25rem}.context-row small{color:#666862}
.context-label{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:white;font-size:.75rem;font-weight:800}
.context-play{width:100%;min-height:38px;border:1px solid rgba(207,75,53,.28);border-radius:10px;background:#fff;color:var(--red);font-weight:800;cursor:pointer}
.context-play:hover:not(:disabled){background:#fff6f1;transform:translateY(-1px)}
.context-play:disabled{cursor:wait;opacity:.68}
.context-target{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.context-kana-link{display:inline;padding:0 1px;border:0;border-bottom:1px dotted rgba(207,75,53,.55);border-radius:3px;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer}
.context-kana-link:hover,.context-kana-link:focus-visible{background:#ffe8dc;color:var(--red);outline:2px solid rgba(207,75,53,.18);outline-offset:1px}
.context-kana-link.context-target{color:var(--red);border-bottom:2px solid var(--red);text-decoration:none}
.kana-lookup{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid rgba(207,75,53,.22);border-radius:12px;background:#fff}
.kana-lookup[hidden]{display:none}.kana-lookup>span{font-size:.76rem;color:#777871}.kana-lookup strong{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:2rem;line-height:1;color:var(--red)}.kana-lookup b{min-width:34px;font-size:1rem}.kana-lookup button{margin-left:auto;padding:8px 12px;border:0;border-radius:9px;background:var(--red);color:#fff;font-weight:800;cursor:pointer}
.context-card.masked .context-row>div{filter:blur(7px);user-select:none}
.deck-chip.current{position:relative;border-color:#176b87;background:#dff5ff;color:#07516b;box-shadow:0 0 0 3px rgba(23,107,135,.16);transform:translateY(-2px)}
.deck-chip.current::after{content:"当前";position:absolute;top:-9px;right:-7px;padding:2px 5px;border-radius:7px;background:#176b87;color:#fff;font-size:.58rem;font-weight:900;line-height:1.2}
.retrieval-tip{margin:11px 0 0;font-size:.78rem;color:#656760}
.answer-actions{margin-top:12px}
.memory-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-tip{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.6);border-radius:15px;padding:14px 18px}
.mini-tip>span{font-size:2.5rem}.mini-tip p{margin:0}
.mini-tip.alternate{background:rgba(169,200,180,.3)}
.glyph-compare{margin-top:12px;padding:16px 18px;border:1px solid rgba(23,107,135,.2);border-radius:16px;background:#f4fbff}
.glyph-compare-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.glyph-compare-head>div{display:flex;flex-direction:column;gap:3px}.glyph-compare-head small{color:#696f72}.glyph-compare-head>span{padding:4px 7px;border-radius:8px;background:#dff5ff;color:#07516b;font-size:.68rem;font-weight:900}
.glyph-samples{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}.glyph-sample{display:flex;min-height:128px;flex-direction:column;align-items:center;justify-content:center;border-radius:13px;background:#fff}.glyph-sample small{color:#6f7477;text-align:center}.glyph-sample strong{font-size:5.2rem;line-height:1.15;color:#263d55;font-synthesis:none}.glyph-sample.print strong{font-family:"Interface Kana",sans-serif;font-weight:500}.glyph-sample.handwriting strong{font-family:"Handwritten Kana",cursive;font-weight:400;transform:rotate(-2deg) scale(1.08)}.glyph-compare>p{margin:10px 0 0;color:#596268;font-size:.8rem;line-height:1.55}
.personal-note{margin-top:12px;padding:16px 18px;border:1px solid rgba(180,126,43,.25);border-radius:16px;background:#fffaf0}
.personal-note-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.personal-note-head>div{display:flex;flex-direction:column;gap:3px}.personal-note-head small,.personal-note-foot small{color:#74756f}.personal-note-head strong{color:var(--red)}.personal-note-head>span{flex:none;padding:4px 7px;border-radius:8px;background:#f0e5ca;color:#76613a;font-size:.68rem;font-weight:800}
.personal-note textarea{box-sizing:border-box;width:100%;margin-top:11px;padding:12px 13px;resize:vertical;border:1px solid #d9caa7;border-radius:11px;background:#fff;color:var(--ink);font-family:"Interface Kana","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:inherit;line-height:1.55;outline:none}.personal-note textarea:focus{border-color:#b47e2b;box-shadow:0 0 0 3px rgba(180,126,43,.13)}
.personal-note-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.personal-note-foot button{border:0;background:transparent;color:#8c5a48;font-size:.74rem;cursor:pointer;text-decoration:underline}
.deck-head{max-width:980px;margin:38px auto 0;display:flex;justify-content:space-between;gap:20px;align-items:flex-end}
.deck-head>div:first-child{display:flex;flex-direction:column;gap:2px}.deck-head span{font-size:.8rem;color:#6c6d68}
.deck-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.deck-controls button{border:1px solid var(--line);border-radius:10px;background:#fff;padding:7px 11px;color:var(--indigo);font-size:.78rem;font-weight:800;cursor:pointer}.deck-controls button[aria-pressed="true"]{border-color:#176b87;background:#dff5ff;color:#07516b}
.kana-deck{max-width:980px;margin:12px auto 0;display:flex;flex-wrap:wrap;gap:8px}
.deck-chip{font-family:"Interface Kana","Yu Gothic","YuGothic",sans-serif}
.deck-chip{border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:10px;padding:7px 11px;cursor:pointer}
.kana-deck.hide-romaji .deck-romaji{display:none}.deck-kana{font-size:1em}.deck-romaji{margin-left:4px;font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;font-size:.82em;color:#6c6d68}
.deck-chip.mastered{background:var(--mint);border-color:var(--mint)}
.speak-card{max-width:900px;margin:auto;background:white;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:clamp(25px,5vw,55px)}
.scene{display:inline-block;background:var(--cream);color:var(--red-dark);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:800}
.phrase h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(1.8rem,5vw,3.5rem);font-weight:500;margin:20px 0 0}
#phraseKana{color:#73746e;margin:0}#phraseZh{font-size:1.1rem}
.speak-controls{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}
.record{color:var(--red);background:#fff;border:1px solid var(--red)}
.record.recording{background:var(--red);color:white;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(207,75,53,.12)}}
.record-panel{background:var(--cream);padding:16px;border-radius:14px}
.record-panel audio{width:100%}
details{border-top:1px solid var(--line);padding-top:18px}summary{cursor:pointer;font-weight:750}
.dark{background:var(--indigo);color:white}
.dark .eyebrow{color:#ef8b72}.route-note{color:#c5cfda}
.week-plan{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;max-width:1120px;margin:auto}
.day-card{border:1px solid rgba(255,255,255,.18);border-radius:15px;padding:18px;min-height:220px;background:rgba(255,255,255,.04);cursor:pointer}
.day-card.active{background:var(--red);border-color:var(--red)}
.day-card span{font:italic 1.35rem Georgia,serif}.day-card h3{font-size:1rem}.day-card p{font-size:.78rem;color:#d3dbe3}
.day-card.active p{color:white}
.bottom-nav{display:none}
@media(max-width:760px){
  .topbar{height:57px}.hero{min-height:540px;align-items:flex-end;padding-bottom:48px}
  .hero>img{object-position:65% center}.hero:after{background:linear-gradient(0deg,rgba(247,240,224,.98) 0%,rgba(247,240,224,.8) 52%,rgba(247,240,224,.08) 85%)}
  .hero-copy>p:not(.eyebrow){font-size:.93rem}.stats{margin:-20px 16px 15px;padding:15px}
  .stats strong{font-size:1.5rem}.stats span{font-size:.68rem}.section{padding:55px 20px}
  .section-head{align-items:flex-start;flex-direction:column}.today-grid{grid-template-columns:1fr}
  .paper{min-height:180px}.trainer{grid-template-columns:1fr;gap:28px}
  .kana-card{height:380px}.kana-card>strong{font-size:8rem}.trainer-primary{width:100%}
  .actions .button{flex:1 1 45%}.week-plan{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .memory-grid{grid-template-columns:1fr}.deck-head{align-items:flex-start;flex-direction:column;gap:10px}.deck-controls{justify-content:flex-start}.personal-note-head,.personal-note-foot,.glyph-compare-head{align-items:flex-start;flex-direction:column}.glyph-sample{min-height:110px}.glyph-sample strong{font-size:4.4rem}
  .native-audio{align-items:flex-start;flex-direction:column}.native-audio audio{max-width:none}
  .context-row{grid-template-columns:30px 1fr}.context-play{grid-column:1/-1}.context-head{align-items:flex-start}.kana-lookup{flex-wrap:wrap}.kana-lookup button{margin-left:0}
  .day-card{min-width:190px;scroll-snap-align:start}.bottom-nav{position:fixed;display:flex;bottom:0;left:0;right:0;z-index:30;background:rgba(255,253,247,.95);backdrop-filter:blur(12px);padding:10px 10px calc(10px + env(safe-area-inset-bottom));justify-content:space-around;border-top:1px solid var(--line)}
  .bottom-nav a{color:var(--ink);font-size:.76rem;text-decoration:none;font-weight:800}.dark{padding-bottom:100px}
}