@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');
:root{color-scheme:dark;--bg:#101114;--panel:#191b20;--text:#f7f7f8;--muted:#9a9ca5;--line:rgba(255,255,255,.11);--green:#35e073;--yellow:#f6d365;--pad:clamp(20px,5vw,34px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;padding-bottom:148px;background:radial-gradient(circle at 50% -10%,#263c37 0,#15181d 32%,var(--bg) 70%);color:var(--text);font-family:"DM Sans","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}.page-shell{width:min(100%,760px);margin:auto}.page-header{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,var(--green),#1c8d67);color:#07100c;font:800 12px/1 Manrope,sans-serif}.brand b{display:block;font:800 14px/1 Manrope,sans-serif;letter-spacing:.08em}.brand small{display:block;margin-top:5px;color:#969aa3;font-size:7px;letter-spacing:.14em}.lesson-pill{padding:7px 10px;border:1px solid rgba(246,211,101,.55);border-radius:999px;color:var(--yellow);font:700 9px/1 Manrope,sans-serif;letter-spacing:.14em}.hero{padding:56px var(--pad) 42px}.eyebrow{margin:0 0 10px;color:var(--green);font:800 10px/1 Manrope,sans-serif;letter-spacing:.2em}.hero h1{margin:0;font:800 clamp(48px,13vw,92px)/.95 Manrope,sans-serif;letter-spacing:-.08em}.subtitle{margin:20px 0 0;color:#dadbe0;font-size:clamp(16px,4.5vw,21px);line-height:1.4}.intro{max-width:520px;margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.8}.lyrics-section{padding:24px var(--pad) 54px;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 260px)}.section-heading{margin-bottom:22px}.section-heading h2{margin:0;font:800 30px/1.2 Manrope,sans-serif;letter-spacing:-.05em}.section-heading>p:last-child{margin:10px 0 0;color:var(--muted);font-size:12px}.lyrics{margin:0;padding:0;list-style:none}.lyrics li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:17px 10px;border-bottom:1px solid var(--line);border-left:2px solid transparent;opacity:.32;transform:scale(.985);transform-origin:left center;transition:opacity .25s,background .25s,border-color .25s,transform .25s;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(53,224,115,.14)}.lyrics li>span{color:var(--green);font:700 9px/1.7 Manrope,sans-serif}.lyrics li p{margin:0;color:#b9bbc2;font:600 clamp(15px,4.6vw,20px)/1.45 Manrope,"Noto Sans JP",sans-serif;letter-spacing:-.02em}.lyrics li.is-current{opacity:1;transform:scale(1);border-left-color:var(--green);background:linear-gradient(90deg,rgba(53,224,115,.12),transparent 80%)}.lyrics li.is-current p{color:#fff;text-shadow:0 0 18px rgba(53,224,115,.22)}.lyrics li.is-past{opacity:.43}.player{position:fixed;z-index:10;right:0;bottom:0;left:0;min-height:124px;padding:12px max(14px,calc((100vw - 730px)/2)) calc(11px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.16);background:rgba(21,22,26,.96);box-shadow:0 -12px 30px rgba(0,0,0,.35);backdrop-filter:blur(18px)}.progress{position:absolute;top:-2px;left:0;width:100%;height:4px;appearance:none;background:linear-gradient(90deg,var(--green) var(--progress,0%),#4c4e55 var(--progress,0%));cursor:pointer}.progress::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}.player-inner{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;align-items:center;gap:10px}.cover{display:flex;flex-direction:column;justify-content:space-between;width:46px;aspect-ratio:1;padding:6px;border-radius:6px;background:linear-gradient(145deg,var(--yellow),#ef476f 52%,#8a70ff);color:#121318}.cover span{font:800 6px/1 Manrope,sans-serif;letter-spacing:.12em}.cover b{font:800 13px/.8 Manrope,sans-serif;letter-spacing:-.08em}.track-meta{min-width:0}.track-meta b,.track-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-meta b{font-size:12px}.track-meta small{margin-top:4px;color:var(--muted);font-size:8px}.controls{display:flex;align-items:center;gap:8px}.controls button{border:0;background:transparent;color:#d5d6dc;cursor:pointer}.play{display:grid;place-items:center;width:42px;height:42px;padding-left:3px;border-radius:50%;background:var(--green)!important;color:#07100c!important;font-size:13px}.skip{position:relative;width:30px;height:34px;padding:0;font-size:22px;line-height:1}.skip small{position:absolute;inset:0;display:grid;place-items:center;padding-top:1px;color:#fff;font:800 7px/1 Manrope,sans-serif}.time{display:flex;gap:4px;color:#a0a2aa;font-size:8px;white-space:nowrap}@media(max-width:520px){.player-inner{grid-template-columns:44px minmax(0,1fr) auto}.time{grid-column:2/4;grid-row:2;justify-content:flex-end;margin-top:-5px}.player{min-height:132px}.lyrics-section{padding-bottom:64px}}