:root{--accent:#67e5ff;--bg:#080d25;--panel:rgba(11,17,38,.78);--line:rgba(255,255,255,.11);--muted:#8794b4;--text:#f8fbff}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#070b18;color:var(--text);font-family:Inter,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;overflow-x:hidden}button,input{font:inherit}.skip-link{position:fixed;left:16px;top:-50px;z-index:100;background:#fff;color:#07101f;padding:8px 12px;border-radius:10px;text-decoration:none}.skip-link:focus{top:12px}.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(circle at 17% 8%,rgba(27,97,148,.36),transparent 30%),radial-gradient(circle at 88% 16%,rgba(119,30,100,.27),transparent 26%),linear-gradient(180deg,#080d25 0,#060914 62%,#090c19 100%)}.ambient .orb{position:absolute;border-radius:50%;filter:blur(85px);opacity:.18}.orb-cyan{width:42vw;height:42vw;background:#3adfff;left:-18vw;top:27vh}.orb-pink{width:38vw;height:38vw;background:#ff55b4;right:-17vw;top:43vh}.ambient .beam{position:absolute;left:28%;top:-25%;width:14%;height:135%;transform:rotate(27deg);background:linear-gradient(90deg,transparent,rgba(89,219,255,.045),transparent);filter:blur(5px)}.ambient .grid{position:absolute;inset:0;opacity:.07;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 75%,transparent)}
.music-statusbar{height:78px;padding:0 clamp(18px,3vw,48px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(6,10,23,.78);backdrop-filter:blur(22px);position:sticky;top:0;z-index:20}.music-brand{text-decoration:none;color:#fff;display:flex;align-items:baseline;gap:15px}.music-brand strong{font-size:clamp(23px,2vw,32px);font-weight:950;letter-spacing:.055em;background:linear-gradient(90deg,#fff 0,#d9f8ff 38%,#55dcff 58%,#ff76bd 100%);-webkit-background-clip:text;color:transparent}.music-brand span{font-size:9px;letter-spacing:.24em;color:#8d9abc}.header-status{display:flex;align-items:center;gap:12px;color:#8391b1;font-size:10px;letter-spacing:.12em}.header-status b{color:#73e5ff;font-size:13px}.header-status i{width:1px;height:17px;background:#ffffff22}
.glass-panel{background:linear-gradient(180deg,rgba(17,24,51,.82),rgba(10,15,35,.76));border:1px solid var(--line);box-shadow:0 22px 70px rgba(0,0,0,.35);backdrop-filter:blur(18px)}.music-app{width:min(1580px,calc(100% - 34px));margin:0 auto;padding:22px 0 52px;display:grid;grid-template-columns:minmax(270px,310px) minmax(480px,1fr) minmax(330px,390px);gap:20px;align-items:start}.panel-heading{display:flex;align-items:center;justify-content:space-between}.eyebrow{margin:0;color:#63ddff;font-size:9px;font-weight:800;letter-spacing:.22em}.panel-heading h2{margin:5px 0 0;font-size:21px}.panel-count{font-size:30px;color:#ffffff33;font-weight:800}
.library-panel{position:sticky;top:100px;height:calc(100vh - 122px);border-radius:22px;padding:18px 12px 12px;overflow:hidden;display:flex;flex-direction:column}.library-heading{padding:3px 8px 13px}.region-index{display:flex;gap:5px;overflow-x:auto;padding:0 5px 10px;scrollbar-width:none}.region-index::-webkit-scrollbar{display:none}.region{flex:none;border:1px solid #ffffff16;background:#ffffff07;color:#9ba8c5;padding:7px 9px;border-radius:999px;font-size:9px;cursor:pointer;transition:.2s}.region:hover{color:#fff;border-color:#64dcff66;background:#ffffff0e}.unit-list{overflow:auto;padding:0 2px 18px;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}.unitBtn{--accent:#67e5ff;width:100%;border:0;border-bottom:1px solid #ffffff0d;background:transparent;color:inherit;display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;text-align:left;padding:9px 7px;cursor:pointer;border-radius:13px;transition:.18s}.unitBtn:hover,.unitBtn.isActive{background:#ffffff0b}.unitBtn.isActive{box-shadow:inset 3px 0 var(--accent)}.thumb{width:58px;height:46px;object-fit:cover;border-radius:9px;background:#151b30}.unitMeta{min-width:0}.unitMeta b{display:block;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unitMeta span{display:block;margin-top:4px;color:#7f8dac;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.liveDot{width:8px;height:8px;border-radius:50%;background:#54e5ad;box-shadow:0 0 11px rgba(84,229,173,.78)}.liveDot.off{background:#526078;box-shadow:none}
.player-stage{min-width:0}.stage-topline{height:24px;display:flex;align-items:center;gap:10px;color:#8290af;font-size:8px;font-weight:800;letter-spacing:.19em;margin:1px 3px 9px}.stage-topline i{height:1px;flex:1;background:linear-gradient(90deg,#57deff55,#ff62b855)}.artwork-shell{position:relative}.artwork-glow{position:absolute;inset:-4% 5% 2%;background:radial-gradient(circle at 55% 45%,var(--accent),transparent 65%);filter:blur(38px);opacity:.16}.artwork-frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:#0e1530;box-shadow:0 26px 70px rgba(0,0,0,.42)}.artwork-main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.artwork-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,19,.76) 0,transparent 38%),linear-gradient(90deg,transparent 50%,rgba(4,9,22,.22))}.artwork-logo{position:absolute;left:20px;bottom:16px;width:min(38%,230px);max-height:92px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 5px 15px rgba(0,0,0,.85))}.playback-wave{position:absolute;right:16px;bottom:17px;height:31px;display:flex;align-items:center;gap:4px;opacity:0;transition:.2s}.playback-wave.isPlaying{opacity:.9}.playback-wave i{width:3px;height:9px;background:#fff;border-radius:999px;box-shadow:0 0 8px var(--accent);animation:wave .7s ease-in-out infinite alternate}.playback-wave i:nth-child(2){animation-delay:.1s;height:19px}.playback-wave i:nth-child(3){animation-delay:.2s;height:27px}.playback-wave i:nth-child(4){animation-delay:.3s;height:15px}.playback-wave i:nth-child(5){animation-delay:.4s;height:22px}@keyframes wave{to{height:6px;opacity:.45}}
.track-info{display:flex;justify-content:space-between;gap:18px;align-items:end;padding:18px 8px 14px}.track-copy{min-width:0}.prefecture-label{margin:0 0 5px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.08em}.track-info h1{margin:0;font-size:clamp(27px,2.5vw,43px);line-height:1.08;letter-spacing:-.035em}.track-submeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}.unit-name{margin:0;color:#e6ebfb;font-size:13px;font-weight:800}.genre-label{max-width:100%;color:#8795b3;font-size:9px;line-height:1.5;border-left:2px solid var(--accent);padding-left:9px}.preview-chip{flex:none;border:1px solid #ffffff16;color:#8290ad;border-radius:999px;padding:7px 9px;font-size:8px;letter-spacing:.13em;white-space:nowrap}
.transport{border-radius:20px;padding:16px 18px 14px}.timeline-row{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:10px;color:#7886a4;font-size:9px}.range{appearance:none;background:transparent;cursor:pointer}.range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#ffffff17}.range::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;margin-top:-4px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent),0 0 12px var(--accent)}.range::-moz-range-track{height:4px;border-radius:999px;background:#ffffff17}.range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent),0 0 12px var(--accent)}.transport-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.track-step{display:flex;align-items:center;gap:10px}.icon-button,.volume-button{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff17;background:#ffffff08;color:#c6d1ea;display:grid;place-items:center;cursor:pointer;transition:.2s}.icon-button:hover,.volume-button:hover{border-color:#ffffff35;background:#ffffff12;color:#fff}.icon-button svg,.volume-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.play-button{width:58px;height:58px;border-radius:50%;border:1px solid #ffffff35;background:linear-gradient(135deg,#63e8ff,#9d78ff 52%,#ff68b4);color:#06101f;box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 30%,transparent);font-size:20px;font-weight:900;cursor:pointer;transition:.18s}.play-button:hover{transform:scale(1.04)}.play-button:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed;transform:none}.volume-control{display:flex;align-items:center;gap:8px}.range-volume{width:92px}.preview-status{display:flex;align-items:center;gap:7px;margin-top:12px;color:#94a3c2;font-size:9px}.preview-status .live-dot{width:6px;height:6px}.ai-note{margin:9px 0 0;padding-top:9px;border-top:1px solid #ffffff0c;color:#63708d;font-size:8px;line-height:1.55}.unavailable{border-radius:20px;padding:18px 20px;margin-top:4px;display:flex;flex-direction:column;gap:5px}.unavailable b{font-size:14px}.unavailable span{font-size:10px;color:#8190ae}
.lyrics-panel{position:sticky;top:100px;height:calc(100vh - 122px);border-radius:22px;padding:18px 16px 13px;display:flex;flex-direction:column;overflow:hidden}.lyrics-heading{padding:2px 2px 12px}.live-chip{border:1px solid #ffffff17;border-radius:999px;padding:6px 9px;color:#94a2c1;font-size:8px;letter-spacing:.12em}.live-chip i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#5be6b2;margin-right:5px;box-shadow:0 0 9px #5be6b2}.lyrics-track-label{display:flex;align-items:center;gap:9px;color:#687694;font-size:8px;letter-spacing:.14em;padding:0 2px 7px}.lyrics-track-label i{height:1px;flex:1;background:#ffffff12}.lyrics-viewport{flex:1;min-height:0;overflow:auto;padding:18px 4px 38px;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent)}.lyrics-viewport::-webkit-scrollbar{width:6px}.lyrics-viewport::-webkit-scrollbar-thumb{background:#ffffff20;border-radius:999px}.lyrics-list{list-style:none;margin:0;padding:46px 3px;display:grid;gap:3px}.lyricLine{position:relative;margin:0;padding:10px 12px 10px 18px;border-radius:11px;color:#71809f;font-size:12px;line-height:1.75;opacity:.56;transition:.23s;cursor:default}.lyricLine::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;border-radius:50%;background:#596782;transform:translateY(-50%);transition:.23s}.lyricLine[role="button"]{cursor:pointer}.lyricLine[role="button"]:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.lyricLine.isNear{color:#afbad0;opacity:.82}.lyricLine.isActive{color:#fff;opacity:1;background:#ffffff09;box-shadow:inset 3px 0 var(--accent);transform:translateX(4px);font-weight:700}.lyricLine.isActive::before{width:5px;height:17px;border-radius:999px;background:var(--accent);box-shadow:0 0 16px var(--accent)}.lyricSection{display:block;margin-bottom:3px;color:var(--accent);font-size:8px;letter-spacing:.15em;font-weight:900}.lyricText{display:block}.lyrics-footer{padding:9px 2px 0;border-top:1px solid #ffffff0c;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#63708e;font-size:8px}.lyrics-footer span{display:flex;align-items:center;gap:6px}.lyrics-footer span i{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.8}.lyrics-footer button{border:0;background:transparent;color:#9aa8c7;font-size:8px;cursor:pointer}.lyrics-footer button:hover{color:#fff}footer{text-align:center;color:#4d5a76;font-size:8px;letter-spacing:.15em;padding:0 20px 34px}
@media(max-width:1180px){.music-app{grid-template-columns:minmax(250px,285px) minmax(440px,1fr) minmax(290px,340px);gap:14px}.track-info{padding-inline:4px}.transport{padding-inline:14px}.lyrics-panel{padding-inline:13px}.unitBtn{grid-template-columns:50px 1fr auto}.thumb{width:50px;height:40px}}
@media(max-width:980px){.music-statusbar{height:70px}.header-status{display:none}.music-app{width:calc(100% - 24px);display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);padding-top:14px}.library-panel{top:84px;height:calc(100vh - 100px)}.lyrics-panel{position:relative;top:auto;height:520px;grid-column:2;margin-top:0}.player-stage{grid-column:2}.artwork-frame{border-radius:18px}.track-info{padding-top:14px}.preview-chip{display:none}}
@media(max-width:720px){.music-statusbar{padding:0 15px}.music-brand strong{font-size:22px}.music-brand span{font-size:7px}.music-app{display:block;width:calc(100% - 20px);padding-top:10px}.library-panel{position:relative;top:auto;height:auto;max-height:350px;margin-bottom:12px}.stage-topline{margin-top:8px}.artwork-frame{border-radius:17px}.track-info{display:block;padding:15px 4px 12px}.track-info h1{font-size:clamp(29px,8vw,42px)}.track-submeta{display:block}.genre-label{display:block;margin-top:8px}.transport{border-radius:17px}.lyrics-panel{height:500px;margin-top:13px;border-radius:17px}.range-volume{width:70px}.ai-note{font-size:7.5px}.artwork-logo{width:43%;left:14px;bottom:12px}}

/* v5.3: original-style full header restored */
.music-statusbar{position:sticky;top:0;z-index:30;height:86px;padding:0 clamp(18px,2.5vw,42px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(170,206,255,.12);background:linear-gradient(90deg,rgba(5,9,26,.96),rgba(8,16,44,.91));backdrop-filter:blur(22px);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.music-statusbar::after{content:"";position:absolute;right:0;bottom:-1px;width:min(46vw,620px);height:1px;background:linear-gradient(90deg,transparent,rgba(89,219,255,.75));box-shadow:0 0 13px rgba(89,219,255,.42)}
.music-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#fff;min-width:0}.brand__wordmark{font-size:clamp(24px,2.15vw,35px);font-weight:950;letter-spacing:.055em;line-height:1;white-space:nowrap;background:linear-gradient(90deg,#fff 0,#e8fbff 53%,#58dcff 74%,#ff75bd 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(89,219,255,.15))}.brand__wordmark span{font-size:1.12em;letter-spacing:-.02em}.brand__copy{display:flex;align-items:center;gap:10px;min-width:0}.brand__copy small{color:#67e5ff;padding:6px 9px 5px 10px;border:1px solid rgba(103,229,255,.3);border-radius:999px;background:rgba(103,229,255,.07);font-size:8px;font-style:normal;font-weight:900;letter-spacing:.22em;white-space:nowrap}.brand__copy em{color:#667594;font-size:8px;font-style:normal;font-weight:700;letter-spacing:.13em;white-space:nowrap}.header-status{display:flex;align-items:center;gap:13px;color:#8794b4;font-size:9px;font-weight:700;letter-spacing:.14em;white-space:nowrap}.header-status b{margin-right:3px;color:#f8fbff;font-size:13px}.header-status i{width:3px;height:3px;background:#ff6db5;border-radius:50%;box-shadow:0 0 7px #ff6db5}.header-status .autoplay-status{color:#9ba8c5}.header-status .autoplay-status b{color:#54e5ad;text-shadow:0 0 10px rgba(84,229,173,.45)}
@media(max-width:1100px){.brand__copy em{display:none}.header-status .autoplay-status{display:none}}
@media(max-width:980px){.music-statusbar{height:72px}.brand__wordmark{font-size:26px}.brand__copy small{font-size:7px}.header-status{display:none}}
@media(max-width:720px){.music-statusbar{height:66px;padding:0 14px}.music-brand{gap:9px}.brand__wordmark{font-size:22px}.brand__copy small{padding:5px 7px;font-size:6.5px;letter-spacing:.16em}}

/* v5.4 precise lyric sync */
.lyricLine{transition:color .10s,opacity .10s,background .10s,transform .10s,box-shadow .10s}
.lyricLine.isActive{will-change:transform}


/* v5.5 — fixed header control anchor + stricter lyric follow */
@media (min-width:981px){
  .music-statusbar .music-brand{display:grid;grid-template-columns:300px 132px;align-items:center;gap:14px;width:446px;min-width:446px;position:relative;contain:layout}
  .music-statusbar .brand__wordmark{display:block;width:300px;min-width:300px;max-width:300px;overflow:visible}
  .music-statusbar .brand__copy{display:flex;width:132px;min-width:132px;justify-content:flex-start;align-items:center}
  .music-statusbar .brand__copy small{display:inline-flex;width:118px;min-width:118px;text-align:center;justify-content:center}
}
@media (min-width:721px) and (max-width:980px){
  .music-statusbar .music-brand{display:grid;grid-template-columns:226px 112px;align-items:center;gap:10px;width:348px;min-width:348px;position:relative;contain:layout}
  .music-statusbar .brand__wordmark{display:block;width:226px;min-width:226px;max-width:226px}
  .music-statusbar .brand__copy{display:flex;width:112px;min-width:112px}
  .music-statusbar .brand__copy small{display:inline-flex;width:104px;min-width:104px;justify-content:center;text-align:center}
}
@media (max-width:720px){
  .music-statusbar .music-brand{display:grid;grid-template-columns:184px 94px;align-items:center;gap:8px;width:286px;min-width:286px;position:relative;contain:layout}
  .music-statusbar .brand__wordmark{display:block;width:184px;min-width:184px;max-width:184px}
  .music-statusbar .brand__copy{display:flex;width:94px;min-width:94px}
  .music-statusbar .brand__copy small{display:inline-flex;width:90px;min-width:90px;justify-content:center;text-align:center}
}
.lyricLine{position:relative;transition:none!important}
.lyricLine.isActive{transition:none!important}
.lyricLine::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--lyric-progress,0)*100%);border-radius:999px;background:linear-gradient(90deg,var(--accent),#ff6db5);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 45%,transparent);opacity:0;pointer-events:none}
.lyricLine.isActive::after{opacity:.72}
.lyrics-viewport{scroll-behavior:auto!important;overscroll-behavior:contain}

/* v5.8 readability and fixed-header adjustments */
:root{--fixed-player-header-height:86px}
.music-statusbar{position:fixed!important;top:0;left:0;right:0;height:var(--fixed-player-header-height)!important;z-index:1000}
body{padding-top:var(--fixed-player-header-height)!important}
@media(max-width:980px){:root{--fixed-player-header-height:72px}}
@media(max-width:720px){:root{--fixed-player-header-height:66px}}
.region-index{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible!important;padding:0 5px 10px}
.region{width:100%;min-width:0;flex:none;text-align:center;padding:7px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-note{font-size:9.5px!important;line-height:1.6}
.unitBtn{grid-template-columns:50px minmax(0,1fr) auto;min-height:64px}
.unitMeta{display:grid;gap:1px;align-content:center;min-width:0}
.unitMeta .unitPref{display:block;margin:0;color:#9ba8c5;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unitMeta .unitNameStack{display:flex;flex-direction:column;gap:0;min-width:0;margin:0;color:inherit}
.unitMeta .unitReading{display:block;margin:0;color:#7686a7;font-size:8px;line-height:1.1;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unitMeta b.unitNameText{display:block;margin:0;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unitMeta .unitSongTitle{display:block;margin:1px 0 0;color:#7f8dac;font-size:9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-reading{display:block;margin:0 0 3px;color:#8a98b5;font-size:9px;line-height:1.1;letter-spacing:.06em}
.unit-name{margin-top:0}


/* Shared KIRAMEKI47 site header and status rail */
body { padding-top:88px; padding-bottom:0; }
.music-statusbar { position:sticky; top:88px; z-index:35; }
.mobile-dock { display:none!important; }
@media (max-width:1000px) { body { padding-top:111px; } .music-statusbar { top:111px; } }
@media (max-width:680px) {
  body { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
  .mobile-dock { position:fixed!important; z-index:1001; left:8px; right:8px; bottom:max(7px,env(safe-area-inset-bottom)); height:58px; padding:4px; display:grid!important; grid-template-columns:repeat(5,1fr); border:1px solid rgba(255,255,255,.17); border-radius:16px; background:rgba(7,16,30,.94); color:#fff; box-shadow:0 15px 40px rgba(0,0,0,.3); backdrop-filter:blur(14px); }
  .mobile-dock a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; border-radius:11px; color:rgba(255,255,255,.65); text-decoration:none; }
  .mobile-dock a[aria-current="page"] { color:#78edda; background:rgba(255,255,255,.09); }
  .mobile-dock b { font:900 15px/1 Arial,sans-serif; }
  .mobile-dock span { font:700 7px/1 Arial,sans-serif; letter-spacing:.04em; }
}
