:root { --ink:#2f2a2b; --muted:#807879; --paper:#fffdf8; --pink:#ff7985; --pink-dark:#ec5f6c; --line:#eee5de; --peach:#fff0e8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 8% 18%,#ffe6d7 0 5%,transparent 19%),radial-gradient(circle at 93% 8%,#ffe4c8 0 5%,transparent 19%),#fff9f2; font-family:"Noto Sans JP","Microsoft YaHei",sans-serif; }
body::before,body::after { content:"✿"; position:fixed; z-index:-1; color:#ffc4ba; opacity:.6; font-size:60px; } body::before{left:4%;top:62%;transform:rotate(-15deg)} body::after{right:5%;top:67%;transform:rotate(20deg)}
.page-shell { width:min(860px,calc(100% - 32px)); margin:auto; padding:26px 0 54px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; letter-spacing:.03em; }.brand-mark { display:grid; place-items:center; width:34px;height:34px;border-radius:11px;color:#fff;background:var(--pink);font-family:"Noto Serif JP";font-size:19px;box-shadow:0 5px 12px #ffb8b8; }
.streak { font-size:13px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:99px; padding:8px 12px; }.streak span{color:#ffae45}.streak strong{color:var(--pink-dark)}
.hero { text-align:center; padding:58px 10px 31px; }.eyebrow { font-size:11px; color:#bc9890; letter-spacing:.17em; margin:0 0 14px; }.hero h1{font-family:"Noto Serif JP","Microsoft YaHei",serif;font-size:clamp(30px,7vw,45px);line-height:1.35;margin:0;letter-spacing:.03em}.hero em{color:var(--pink-dark);font-style:normal}.hero-sub{color:var(--muted);font-size:14px;margin:15px 0 18px}.date-pill { display:inline-block;color:#a99088;background:#fff4eb;border-radius:99px;padding:7px 14px;font-size:12px; }
.lesson-card { background:rgba(255,255,255,.96); border:1px solid #f1e5dc; border-radius:28px; padding:34px clamp(24px,6vw,58px) 30px; box-shadow:0 18px 48px rgba(135,88,70,.12); }.card-top{display:flex;justify-content:space-between;align-items:center}.lesson-no{font-size:12px;color:#d2a29a;font-weight:bold;letter-spacing:.12em}.category{font-size:12px;background:#fff0ec;color:var(--pink-dark);border-radius:99px;padding:6px 12px}.label{margin:34px 0 9px;font-size:12px;color:#ac9690;font-weight:700;letter-spacing:.08em}.sentence-row{display:flex;align-items:center;gap:17px}.sentence-row h2{font-family:"Noto Serif JP";font-size:clamp(31px,6vw,46px);letter-spacing:.055em;line-height:1.25;margin:0}.sound-btn{flex:0 0 auto;border:0;cursor:pointer;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#ffe8e6;font-size:22px;transition:.2s}.sound-btn:hover,.sound-btn.playing{background:var(--pink);transform:scale(1.07)}.pronunciation{margin:18px 0 26px;padding:12px 15px;border-left:3px solid #ffd1ca;background:#fffaf7;border-radius:0 11px 11px 0}.kana{font-size:17px;margin:0 0 5px;color:#625959;font-weight:500}.romaji{font-family:Georgia,serif;font-style:italic;font-size:16px;color:#a98f89;margin:0;letter-spacing:.02em}.meaning-box{display:flex;gap:16px;align-items:center;background:var(--peach);border:1px solid #f9e1d5;border-radius:15px;padding:17px 19px}.meaning-box span{font-size:12px;color:#be7b73;border-right:1px solid #e8c7bb;padding-right:16px;white-space:nowrap}.meaning-box strong{font-size:18px}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:16px 0}.details-grid article{display:flex;gap:12px;padding:16px 14px;background:#fffdfa;border:1px solid var(--line);border-radius:14px}.detail-icon{display:grid;place-items:center;width:29px;height:29px;flex:0 0 auto;border-radius:9px;background:#fff3df;font-size:16px;color:#f5a16c}.details-grid article:nth-child(2) .detail-icon{background:#fff0ef}.details-grid p{font-size:12px;color:#a9938d;margin:0 0 6px}.details-grid strong{display:block;font-size:14px;line-height:1.62;font-weight:500;color:#51494a}.tip{font-size:13px;color:#806f69;margin:15px 0 0;padding:13px 15px;background:#fffbdf;border-radius:11px;line-height:1.55}.tip span:first-child{color:#d69e3f;font-weight:700;margin-right:9px}
.actions{display:flex;justify-content:center;gap:12px;margin-top:22px}.actions button{font-family:inherit;border-radius:12px;padding:12px 18px;font-size:14px;cursor:pointer;transition:.2s}.secondary-btn{background:#fff;border:1px solid #eadcd4;color:#806f6c}.primary-btn{border:1px solid var(--pink);background:var(--pink);color:#fff;box-shadow:0 6px 13px #ffc4c4}.primary-btn:hover{background:var(--pink-dark);transform:translateY(-2px)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,25px);opacity:0;background:#3d3534;color:#fff;border-radius:99px;padding:10px 17px;font-size:13px;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:520px){.page-shell{width:min(100% - 22px,760px);padding-top:15px}.streak{font-size:11px;padding:7px 9px}.hero{padding:48px 8px 28px}.lesson-card{border-radius:21px;padding:25px 20px}.details-grid{grid-template-columns:1fr}.actions button{padding:11px 13px}.sentence-row h2{font-size:28px}.pronunciation{margin-bottom:20px}.meaning-box strong{font-size:16px}}