.cs-page{--bg:#07090c;--pink:#ff3fa4;--teal:#29e6e0;--text:#e9f1f2;--dim:#8fa3a8;--mist:#0d2a2e;--background:var(--bg);--foreground:var(--text);--gradient-neon:linear-gradient(90deg, var(--pink), #c58cff 50%, var(--teal));--glow-pink:0 0 6px var(--pink), 0 0 18px color-mix(in oklab, var(--pink) 70%, transparent), 0 0 40px color-mix(in oklab, var(--pink) 40%, transparent);--glow-teal:0 0 6px var(--teal), 0 0 18px color-mix(in oklab, var(--teal) 70%, transparent), 0 0 40px color-mix(in oklab, var(--teal) 40%, transparent)}html:has(.cs-page){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;cursor:auto;background:#07090c;overflow-x:clip}body:has(.cs-page){color:#e9f1f2;cursor:auto;background-color:#07090c;background-image:radial-gradient(60vw 40vh at 15% 20%,oklab(26.5061% -.0310844 -.0162341/.9),#0000 70%),radial-gradient(50vw 50vh at 85% 55%,oklab(31.9276% -.0456412 -.0159249/.7),#0000 70%),radial-gradient(70vw 40vh at 50% 100%,oklab(21.5186% .0541232 -.0203808/.55),#0000 70%),none;background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;min-height:100vh;margin:0;font-family:Kanit,system-ui,sans-serif;font-weight:300;line-height:1.6;overflow-x:clip}body:has(.cs-page):after{content:"";pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:fixed;inset:0}.cs-page *{box-sizing:border-box}.cs-page button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.cs-page button:disabled{cursor:not-allowed}.cs-page :focus-visible{outline:2px solid var(--teal);outline-offset:3px}.cs-page .th{font-family:Kanit,sans-serif}.cs-page .cs{max-width:1100px;margin:0 auto;padding:12px 16px 40px}.cs-page .cs-top{z-index:40;padding:calc(10px + env(safe-area-inset-top)) max(16px, calc(50vw - 534px)) 10px;background:color-mix(in oklab, var(--bg) 85%, transparent);-webkit-backdrop-filter:blur(12px)saturate(140%);backdrop-filter:blur(12px)saturate(140%);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.cs-page .cs-top:after{content:"";background:linear-gradient(90deg, var(--pink), var(--teal));height:1px;box-shadow:0 0 8px color-mix(in oklab, var(--pink) 45%, transparent), 0 0 14px color-mix(in oklab, var(--teal) 35%, transparent);position:absolute;bottom:-1px;left:0;right:0}.cs-page .hero,.cs-page .intro,.cs-page .player,.cs-page .socials{scroll-margin-top:calc(72px + env(safe-area-inset-top))}.cs-page .cs-mark{letter-spacing:.2em;color:var(--text);text-shadow:0 0 10px color-mix(in oklab, var(--teal) 60%, transparent);font-family:Audiowide,sans-serif;font-size:13px}.cs-page .lang{border:1px solid color-mix(in oklab, var(--teal) 40%, transparent);border-radius:999px;padding:2px;display:flex}.cs-page .lang button{color:var(--dim);border-radius:999px;padding:4px 12px;font-family:Audiowide,sans-serif;font-size:12px}.cs-page .lang button[aria-pressed=true]{color:var(--bg);background:var(--teal);box-shadow:var(--glow-teal)}.cs-page .hero{aspect-ratio:4;background:radial-gradient(60% 90% at 50% 50%, color-mix(in oklab, var(--mist) 85%, transparent), transparent 75%), var(--bg);margin:0 -16px;position:relative;overflow:hidden}.cs-page .hero img{object-fit:cover;object-position:50% 50%;width:100%;max-width:100%;height:100%;display:block}.cs-page .hero:after{content:"";background:linear-gradient(transparent, var(--bg));pointer-events:none;height:28%;position:absolute;inset:auto 0 0}@media (width>=768px){.cs-page .hero{aspect-ratio:3.5;border-radius:18px;width:100%;max-height:30vh;margin:0}}.cs-page .intro{text-align:center;margin-top:4px;position:relative}.cs-page .neon-heading{background:var(--gradient-neon);color:#0000;filter:drop-shadow(0 0 10px color-mix(in oklab, var(--pink) 55%, transparent)) drop-shadow(0 0 22px color-mix(in oklab, var(--teal) 35%, transparent));-webkit-box-reflect:below -6px linear-gradient(transparent 55%, #ffffff2e);-webkit-background-clip:text;background-clip:text;margin:0;padding-top:.1em;font-family:Audiowide,sans-serif;font-size:clamp(30px,8vw,52px);font-weight:400;line-height:1.3}.cs-page .neon-heading .th{font-family:Kanit,sans-serif;font-weight:500}.cs-page .neon-heading .sep{opacity:.6}.cs-page .soon{color:var(--teal);text-shadow:var(--glow-teal);margin:10px 0 8px;font-size:16px}.cs-page .soon .dim{color:var(--dim);text-shadow:none;font-size:14px}.cs-page .intro-th{max-width:680px;margin:0 auto 6px;font-size:15px;line-height:1.6}.cs-page .intro-en{max-width:640px;color:var(--dim);margin:0 auto;font-size:12px;line-height:1.5}.cs-page .player{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid color-mix(in oklab, var(--teal) 30%, transparent);max-width:640px;box-shadow:0 0 30px color-mix(in oklab, var(--teal) 15%, transparent), inset 0 0 30px color-mix(in oklab, var(--pink) 6%, transparent);background:oklab(18.3512% -.0118993 -.0118975/.8);border-radius:22px;margin:18px auto 0;padding:16px 18px}.cs-page .now{text-align:left;justify-content:center;align-items:center;gap:14px;min-height:52px;display:flex}.cs-page .now strong{font-size:20px;font-weight:500;display:block}.cs-page .now small,.cs-page .trk small{color:var(--dim);font-size:12px}.cs-page .now-n{color:var(--pink);text-shadow:var(--glow-pink);font-family:Audiowide,sans-serif;font-size:30px}.cs-page .is-empty .now{text-align:center}.cs-page .viz{align-items:flex-end;gap:3px;height:48px;margin:10px 0 8px;display:flex}.cs-page .viz i{background:var(--gradient-neon);background-size:calc(var(--n,28) * 100%) 100%;transform-origin:bottom;height:100%;transform:scaleY(var(--h,.15));opacity:.45;box-shadow:0 0 8px color-mix(in oklab, var(--pink) 40%, transparent);border-radius:3px;flex:1}.cs-page .viz i:nth-child(odd){box-shadow:0 0 8px color-mix(in oklab, var(--teal) 40%, transparent)}.cs-page .is-playing .viz i{opacity:1;animation:1.1s ease-in-out infinite alternate cs-bar}.cs-page .is-playing .viz.live i{transition:transform 80ms linear;animation:none}.cs-page .tube-row{align-items:center;gap:10px;display:flex}.cs-page .time{color:var(--dim);text-align:center;min-width:34px;font-family:Audiowide,sans-serif;font-size:11px}.cs-page .tube{cursor:pointer;touch-action:none;flex:1;height:22px;position:relative}.cs-page .tube:before{content:"";background:color-mix(in oklab, var(--teal) 14%, #0a1012);border:1px solid color-mix(in oklab, var(--teal) 25%, transparent);border-radius:6px;height:6px;position:absolute;top:8px;left:0;right:0}.cs-page .tube-fill{height:6px;width:var(--p,0%);background:var(--gradient-neon);box-shadow:0 0 8px var(--pink), 0 0 16px color-mix(in oklab, var(--teal) 60%, transparent);border-radius:6px;position:absolute;top:8px;left:0}.cs-page .tube[aria-disabled=true]{cursor:not-allowed;opacity:.5}.cs-page .controls{grid-template-columns:repeat(5,auto);justify-content:center;align-items:center;gap:18px;margin:14px 0 6px;display:grid}.cs-page .repeat-ctl{min-width:44px;min-height:44px;color:var(--dim)}.cs-page .repeat-ctl[aria-pressed=true]{color:var(--teal);filter:drop-shadow(0 0 6px var(--teal))}.cs-page .ctl{width:40px;height:40px;color:var(--text);border-radius:50%;place-items:center;display:grid}.cs-page .ctl svg{width:20px;height:20px}.cs-page .ctl[aria-pressed=true]{color:var(--teal);filter:drop-shadow(0 0 6px var(--teal))}.cs-page .ctl:disabled{opacity:.35}.cs-page .play-btn{width:68px;height:68px;color:var(--text);border:2px solid var(--pink);box-shadow:var(--glow-pink), inset 0 0 14px color-mix(in oklab, var(--pink) 45%, transparent);border-radius:50%;place-items:center;display:grid}.cs-page .play-btn svg{width:26px;height:26px}.cs-page .is-playing .play-btn{animation:2.4s ease-in-out infinite cs-pulse}.cs-page .play-btn:disabled{opacity:.4;box-shadow:none;border-color:var(--dim)}.cs-page .tracklist{border-top:1px solid color-mix(in oklab, var(--teal) 15%, transparent);margin:18px 0 0;padding:0;list-style:none}.cs-page .trk{text-align:left;border-bottom:1px solid color-mix(in oklab, var(--teal) 8%, transparent);border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 6px;display:flex}.cs-page .trk:not(:disabled):hover{background:color-mix(in oklab, var(--teal) 7%, transparent)}.cs-page .trk-n{color:var(--dim);width:22px;font-family:Audiowide,sans-serif;font-size:12px}.cs-page .trk-t{flex-direction:column;flex:1;min-width:0;line-height:1.4;display:flex}.cs-page .trk-t .th{font-size:15px;font-weight:400}.cs-page .trk:disabled{opacity:.5}.cs-page .trk.active .trk-t .th{color:var(--pink);text-shadow:var(--glow-pink)}.cs-page .trk.active .trk-n{color:var(--teal);text-shadow:var(--glow-teal)}.cs-page .trk-d{color:var(--dim);flex-shrink:0;font-family:Audiowide,sans-serif;font-size:11px}.cs-page .trk.active .trk-d{color:var(--teal)}.cs-page .soon-tag{color:var(--teal);border:1px solid color-mix(in oklab, var(--teal) 45%, transparent);border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:10px}.cs-page .socials{justify-content:center;gap:16px;margin:36px 0 0;display:flex}.cs-page .social{width:48px;height:48px;color:var(--text);border:1.5px solid var(--teal);box-shadow:0 0 10px color-mix(in oklab, var(--teal) 50%, transparent), inset 0 0 10px color-mix(in oklab, var(--teal) 25%, transparent);border-radius:50%;place-items:center;transition:box-shadow .2s,border-color .2s,color .2s;display:grid}.cs-page .social:nth-child(2n){border-color:var(--pink);box-shadow:0 0 10px color-mix(in oklab, var(--pink) 50%, transparent), inset 0 0 10px color-mix(in oklab, var(--pink) 25%, transparent)}.cs-page .social:hover{color:var(--teal);box-shadow:var(--glow-teal)}.cs-page .social svg{width:22px;height:22px}.cs-page .story{max-width:1100px;margin:44px auto 0}.cs-page .story-h{text-align:center;font-size:clamp(22px,5vw,30px)}.cs-page .story-body{scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px;margin:10px -16px 0;padding:6px 16px 16px;scroll-padding-inline:16px;display:flex;overflow-x:auto}.cs-page .story-body::-webkit-scrollbar{display:none}.cs-page .beat{scroll-snap-align:center;flex-direction:column;flex:0 0 min(78%,340px);gap:10px;margin:0;display:flex}.cs-page .beat-img{aspect-ratio:1376/768;background:color-mix(in oklab, var(--mist,#0a1216) 70%, #07090c);border:1px solid color-mix(in oklab, var(--teal) 30%, transparent);width:100%;box-shadow:0 0 14px color-mix(in oklab, var(--pink) 22%, transparent), 0 0 26px color-mix(in oklab, var(--teal) 16%, transparent);border-radius:14px;overflow:hidden}.cs-page .beat:nth-child(2n) .beat-img{border-color:color-mix(in oklab, var(--pink) 35%, transparent)}.cs-page .beat-img img{object-fit:contain;width:100%;height:100%;display:block}.cs-page .beat-txt{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.cs-page .beat-cap{color:var(--text);font-size:14px;line-height:1.5}.cs-page .story-p{color:var(--dim);margin:0;font-size:14px;line-height:1.7}@media (width>=768px){.cs-page .story-body{grid-template-columns:repeat(3,1fr);gap:22px;margin:10px 0 0;padding:0;display:grid;overflow:visible}.cs-page .beat{scroll-snap-align:auto;flex:none}.cs-page .beat-txt{text-align:left;align-items:flex-start}.cs-page .beat-cap,.cs-page .story-p{font-size:15px}}.cs-page .cs-foot{text-align:center;color:var(--dim);letter-spacing:.05em;margin-top:30px;font-size:12px}.cs-page .cs-simple{text-align:center;place-content:center;gap:24px;min-height:100vh;display:grid}.cs-page .neon-btn{color:var(--text);border:1.5px solid var(--pink);box-shadow:var(--glow-pink);border-radius:999px;padding:10px 22px;text-decoration:none}@media (width>=768px){.cs-page .intro{margin-top:36px}.cs-page .intro-th{font-size:18px}.cs-page .player{padding:28px 30px}}@media (prefers-reduced-motion:reduce){.cs-page .viz i,.cs-page .is-playing .viz i{transform:scaleY(var(--s,.4));transition:none!important;animation:none!important}.cs-page .viz i:nth-child(3n){--s:.7}.cs-page .viz i:nth-child(4n){--s:.25}.cs-page .is-playing .play-btn{animation:none}}.cs-page .dock{z-index:50;padding:8px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in oklab, var(--bg) 94%, var(--mist));border-top:1px solid color-mix(in oklab, var(--teal) 45%, transparent);box-shadow:0 -2px 12px color-mix(in oklab, var(--pink) 30%, transparent), 0 -1px 24px color-mix(in oklab, var(--teal) 20%, transparent);position:fixed;bottom:0;left:0;right:0}.cs-page .dock-viz{margin:0 0 6px;max-width:1100px;height:18px;margin-inline:auto}.cs-page .dock-row,.cs-page .dock .tube-row{max-width:1100px;margin:0 auto}.cs-page .dock-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.cs-page .dock-info{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.cs-page .dock-info .trk-t .th{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.cs-page .dock-info small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.cs-page .dock-info>.trk-t{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.cs-page .dock-n{color:var(--pink);text-shadow:var(--glow-pink);font-family:Audiowide,sans-serif;font-size:16px}.cs-page .dock-ctl{flex-shrink:0;align-items:center;gap:2px;display:flex}.cs-page .dock .ctl{width:36px;height:36px}.cs-page .dock .ctl svg{width:18px;height:18px}.cs-page .dock-play{width:44px;height:44px}.cs-page .dock-play svg{width:18px;height:18px}.cs-page .dock-close{color:var(--dim)}@keyframes cs-bar{0%{transform:scaleY(.15)}50%{transform:scaleY(.85)}to{transform:scaleY(.35)}}@keyframes cs-pulse{50%{box-shadow:0 0 10px var(--pink), 0 0 30px var(--pink), 0 0 60px color-mix(in oklab, var(--teal) 40%, transparent)}}body.cs-docked:has(.cs-page){padding-bottom:calc(150px + env(safe-area-inset-bottom))}.cs-page .story-beat{max-width:720px;color:var(--dim);text-align:center;margin:18px auto;font-size:15px;line-height:1.8}.cs-page .story-beat+.story-beat{border-top:1px solid #0000;border-image:linear-gradient(90deg,#0000,#ff3fa480,#29e6e080,#0000) 1;padding-top:18px}.cs-page .story .story-body{margin:22px 0}.cs-page .tk{font:inherit;cursor:pointer;color:#29e6e0;text-shadow:0 0 8px #29e6e08c;background:0 0;border:0;padding:0}.cs-page .tk:hover,.cs-page .tk:focus-visible{color:#ff3fa4;text-shadow:0 0 10px #ff3fa4b3;outline:none}.cs-page .story-beat.dim{color:#8f979e;border-top:1px solid #0000;border-image:linear-gradient(90deg,#0000,#8f979e73,#8f979e73,#0000) 1}.cs-page .story-beat:has(+.story-beat.dim){border-image:linear-gradient(90deg,#0000,#8f979e73,#8f979e73,#0000) 1}.cs-page div:has(>.story-beat.dim)+div>.story-beat{border-image:linear-gradient(90deg,#0000,#8f979e73,#8f979e73,#0000) 1}.cs-page .story-track-ref{white-space:nowrap}
