:root{
  --ls-navy:#16245D;
  --ls-blue:#3F6BFF;
  --ls-sky:#EAF2FF;
  --ls-cyan:#20B8F7;
  --ls-mint:#28D7A1;
  --ls-bg:#F7F9FC;
  --ls-card:#FFFFFF;
  --ls-border:#E6ECF5;
  --ls-text:#1A1F36;
  --ls-muted:#667085;
  --ls-shadow:0 16px 45px rgba(22,36,93,.10);
}
*{box-sizing:border-box}
body.listen-page{margin:0;background:linear-gradient(180deg,#F7FBFF 0%,#F7F9FC 48%,#FFFFFF 100%);color:var(--ls-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{text-decoration:none;color:inherit}.ls-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(16px,4vw,48px);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--ls-border)}
.ls-brand{display:flex;align-items:center;gap:10px}.ls-brand img{width:44px;height:44px;object-fit:contain}.ls-brand b{display:block;color:var(--ls-navy);font-size:18px}.ls-brand small{display:block;color:var(--ls-muted);font-size:12px}.ls-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ls-nav a{padding:10px 13px;border-radius:999px;color:var(--ls-muted);font-weight:800;font-size:13px}.ls-nav a:hover,.ls-nav a.active{background:var(--ls-sky);color:var(--ls-navy)}
.ls-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 70px}.ls-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:34px;border-radius:32px;background:radial-gradient(circle at 85% 20%,rgba(32,184,247,.22),transparent 34%),linear-gradient(135deg,#16245D 0%,#2C5CFF 60%,#20B8F7 100%);box-shadow:var(--ls-shadow);color:#fff}.ls-hero:before{content:"";position:absolute;inset:auto -80px -110px auto;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.13)}.ls-hero-copy{position:relative;z-index:1}.ls-pill{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);font-weight:900;font-size:13px}.ls-hero h1{margin:18px 0 12px;font-size:clamp(34px,6vw,64px);letter-spacing:-.04em;line-height:.95}.ls-hero p{max-width:640px;margin:0;color:rgba(255,255,255,.88);font-size:17px;line-height:1.7}.ls-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.ls-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:16px;font-weight:900}.ls-btn.primary{background:#fff;color:var(--ls-navy)}.ls-btn.white{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.ls-player-card{position:relative;z-index:1;background:rgba(255,255,255,.94);color:var(--ls-text);border-radius:30px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.18)}.ls-player-top{display:flex;align-items:center;justify-content:space-between;gap:14px}.ls-player-top small{display:block;color:var(--ls-muted);font-weight:800}.ls-player-top b{display:block;color:var(--ls-navy);font-size:28px;font-family:"Noto Sans JP",system-ui,sans-serif}.ls-player-top span{padding:8px 12px;border-radius:999px;background:var(--ls-sky);color:var(--ls-blue);font-weight:900}.ls-play{width:76px;height:76px;border:0;border-radius:50%;display:grid;place-items:center;margin:22px auto 18px;background:linear-gradient(135deg,var(--ls-blue),var(--ls-cyan));color:#fff;font-size:28px;box-shadow:0 15px 30px rgba(63,107,255,.3);cursor:pointer}.ls-play.is-playing{background:linear-gradient(135deg,#22C55E,#20B8F7)}.ls-wave{height:76px;display:flex;align-items:center;justify-content:center;gap:7px}.ls-wave i{display:block;width:8px;border-radius:99px;background:linear-gradient(180deg,var(--ls-cyan),var(--ls-blue));height:22px;opacity:.78}.ls-wave i:nth-child(2n){height:44px}.ls-wave i:nth-child(3n){height:62px}.ls-play.is-playing + .ls-wave i{animation:wave 850ms ease-in-out infinite}.ls-wave i:nth-child(2){animation-delay:.08s}.ls-wave i:nth-child(3){animation-delay:.16s}.ls-wave i:nth-child(4){animation-delay:.24s}.ls-wave i:nth-child(5){animation-delay:.32s}@keyframes wave{50%{transform:scaleY(.45);opacity:.45}}.ls-time{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--ls-muted);font-size:12px;font-weight:800}.ls-time b{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--ls-blue) 38%,#E9EEF8 38%)}.ls-speed{display:flex;justify-content:center;gap:8px;margin-top:16px}.ls-speed button{border:1px solid var(--ls-border);background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;color:var(--ls-muted)}.ls-speed button.active{background:var(--ls-navy);color:#fff}
.ls-dashboard{display:grid;grid-template-columns:280px 1fr;gap:22px;margin-top:24px}.ls-sidebar{display:flex;flex-direction:column;gap:16px}.ls-level-card,.ls-practice-card,.ls-progress-card,.ls-main{background:var(--ls-card);border:1px solid var(--ls-border);box-shadow:0 8px 24px rgba(22,36,93,.06);border-radius:24px}.ls-level-card,.ls-practice-card,.ls-progress-card{padding:18px}.ls-level-card>b{display:block;font-size:42px;color:var(--ls-navy);line-height:1}.ls-level-card>span{color:var(--ls-muted);font-weight:800}.ls-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}.ls-levels a{display:grid;place-items:center;height:38px;border-radius:13px;background:#F3F6FC;color:var(--ls-muted);font-weight:900}.ls-levels a.active{background:var(--ls-blue);color:#fff}.ls-practice-card h3{margin:0 0 12px;color:var(--ls-navy)}.ls-practice-card ol{margin:0;padding-left:20px;color:var(--ls-muted);line-height:1.9;font-weight:700}.ls-progress-card small{color:var(--ls-muted);font-weight:800}.ls-progress-card strong{display:block;margin:6px 0 10px;font-size:30px;color:var(--ls-navy)}.ls-track{height:10px;border-radius:999px;background:#EEF3FB;overflow:hidden}.ls-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ls-blue),var(--ls-cyan));border-radius:999px}.ls-main{padding:22px}.ls-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ls-stats article{padding:18px;border-radius:20px;background:linear-gradient(180deg,#fff,#F8FBFF);border:1px solid var(--ls-border)}.ls-stats b{display:block;color:var(--ls-navy);font-size:24px}.ls-stats span{color:var(--ls-muted);font-weight:800;font-size:13px}.ls-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding:12px;border-radius:20px;background:#F8FBFF;border:1px solid var(--ls-border)}.ls-filterbar button{border:0;border-radius:999px;padding:10px 14px;background:#fff;color:var(--ls-muted);font-weight:900;box-shadow:0 4px 12px rgba(22,36,93,.05);cursor:pointer}.ls-filterbar button.active{background:var(--ls-navy);color:#fff}.ls-filterbar input{flex:1;min-width:220px;border:1px solid var(--ls-border);border-radius:14px;padding:12px 14px;font-weight:800;color:var(--ls-text)}.ls-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:24px 0 14px}.ls-section-title h2{margin:0;color:var(--ls-navy);font-size:22px}.ls-section-title p{margin:0;color:var(--ls-muted);font-size:13px;max-width:620px}.ls-section-title code{background:#EEF3FF;color:var(--ls-blue);padding:2px 6px;border-radius:8px}.ls-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ls-topic{position:relative;overflow:hidden;padding:18px;border-radius:22px;border:1px solid var(--ls-border);background:#fff;box-shadow:0 8px 22px rgba(22,36,93,.05);transition:.2s ease}.ls-topic:hover{transform:translateY(-4px);box-shadow:var(--ls-shadow)}.ls-topic i{display:grid;place-items:center;width:46px;height:46px;border-radius:17px;background:var(--ls-sky);font-style:normal;font-size:24px}.ls-topic b{display:block;margin-top:12px;color:var(--ls-navy);font-size:17px}.ls-topic span{display:block;margin-top:5px;color:var(--ls-muted);font-weight:800;font-size:13px}.ls-topic small{display:inline-flex;margin-top:12px;padding:6px 10px;border-radius:999px;background:#ECFDF5;color:#16A34A;font-weight:900}.ls-lessons{display:grid;gap:12px}.ls-lesson{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px;border-radius:22px;background:#fff;border:1px solid var(--ls-border);box-shadow:0 7px 18px rgba(22,36,93,.04);transition:.2s ease}.ls-lesson:hover{transform:translateY(-2px);border-color:#C9D8FF}.ls-lesson-no{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ls-blue),var(--ls-cyan));color:#fff;font-weight:1000}.ls-lesson h3{margin:0;color:var(--ls-navy);font-size:17px}.ls-lesson p{margin:4px 0 0;color:var(--ls-muted);font-weight:700;font-size:13px}.ls-lesson-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.ls-lesson-meta span{padding:5px 8px;border-radius:999px;background:#F3F6FC;color:var(--ls-muted);font-size:12px;font-weight:900}.ls-lesson-action{display:flex;align-items:center;gap:8px}.ls-badge{padding:7px 9px;border-radius:999px;font-size:11px;font-weight:1000}.ls-badge.free{background:#ECFDF5;color:#16A34A}.ls-badge.vip{background:#FFF7ED;color:#EA580C}.ls-open{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:var(--ls-navy);color:#fff;font-weight:1000}
@media(max-width:920px){.ls-hero,.ls-dashboard{grid-template-columns:1fr}.ls-stats,.ls-topic-grid{grid-template-columns:repeat(2,1fr)}.ls-nav{display:none}}@media(max-width:560px){.ls-wrap{width:min(100% - 22px,1180px);padding-top:16px}.ls-hero{padding:24px;border-radius:26px}.ls-stats,.ls-topic-grid{grid-template-columns:1fr}.ls-lesson{grid-template-columns:auto 1fr}.ls-lesson-action{grid-column:1/-1;justify-content:space-between}.ls-filterbar input{min-width:100%}.ls-hero h1{font-size:42px}}