:root{color-scheme:light;--bg:#f5f3ed;--panel:#fffdf7;--line:#243b3819;--ink:#283e3a;--muted:#67716a;--accent:#b56b43;--sage:#dce4da}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;padding-bottom:120px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #477365;outline-offset:4px}[hidden]{display:none!important}
header{height:84px;display:flex;align-items:center;gap:32px;padding:0 36px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#f5f3edf5;backdrop-filter:blur(14px);z-index:10}.brand{display:flex;align-items:center;gap:5px;font-size:20px;font-weight:650;letter-spacing:-.7px;white-space:nowrap}.brand>span:not(.brand-mark){font-weight:450}.brand-mark{display:grid;place-items:center;background:var(--sage);color:#3c6255;border-radius:12px;width:34px;height:34px;font-size:20px;margin-right:5px}.search{display:flex;align-items:center;gap:10px;max-width:400px;width:100%;margin:auto;background:#eaece5;border-radius:24px;padding:12px 17px;color:var(--muted)}.search>span{font-size:24px;line-height:16px}.search input{border:0;background:none;outline:none;color:var(--ink);width:100%;font-size:13px}.search kbd{font-size:11px;color:var(--muted)}.ghost{background:transparent;border:1px solid #283e3a30;border-radius:22px;padding:10px 16px;font-size:12px;white-space:nowrap}.ghost:hover{background:#283e3a08}
.layout{display:grid;grid-template-columns:190px minmax(0,1fr)}aside{padding:35px 16px;position:sticky;top:84px;height:calc(100svh - 204px);display:flex;flex-direction:column}.aside-label{padding:0 14px;margin-bottom:17px;font-size:12px;color:var(--muted)}.nav-item{display:flex;gap:11px;align-items:center;background:none;width:100%;padding:12px;border-radius:12px;color:var(--muted);font-size:12px;margin-bottom:6px;text-align:left}.nav-item.active{background:var(--sage);color:var(--ink)}.nav-item small{margin-left:auto;font-size:10px}.aside-note{margin-top:42px;padding:0 14px;font-size:11px;color:#536a5f}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#be8352;margin-right:5px}.aside-note p{font-size:11px;line-height:1.9;color:var(--muted);margin-top:10px}.intro-replay{margin-top:auto;text-align:left;background:none;color:var(--muted);font-size:11px;padding:15px 14px}.edition{font-size:10px;color:var(--muted);padding:12px 14px}main{padding:28px 36px 0;max-width:1480px;width:100%;margin:auto}
.hero{position:relative;min-height:330px;overflow:hidden;border-radius:20px;background:#e9e5d7;display:flex;align-items:center}.hero-copy{padding:36px 40px;position:relative;z-index:2}.eyebrow{font-size:12px;font-weight:450;color:var(--muted);letter-spacing:0}.hero .eyebrow{color:#5c6a5c}h1{font-size:clamp(34px,3.7vw,54px);font-weight:550;line-height:1.13;letter-spacing:-2px;margin:19px 0}h1 em{font-style:normal;font-weight:550;color:#527362}.hero p{font-size:13px;line-height:1.9;color:#5e675b}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:22px}.primary{background:#355b4f;color:#fffdf7;border-radius:24px;padding:13px 19px;font-weight:500;font-size:12px}.primary:hover{background:#294a40}.text-link{font-size:12px;color:#526353}.hero-meta{display:flex;gap:8px;align-items:center;margin-top:23px;font-size:10px;color:#65705f}.hero-meta strong{font-weight:500}.hero-meta i{width:3px;height:3px;background:#9aab94;border-radius:50%;margin:0 5px}.hero-art{position:absolute;right:0;top:0;width:43%;height:100%;overflow:hidden;background:linear-gradient(120deg,transparent,#dce2d442)}.sun-disc{position:absolute;width:210px;height:210px;border-radius:50%;background:#e6bb79;right:15%;top:14%;opacity:.7;filter:blur(1px)}.sound-wave{position:absolute;left:4%;top:48%;width:110%;height:95px;border-radius:45%;border:2px solid #66837680;transform:rotate(-13deg)}.sound-wave:after{content:'';position:absolute;inset:12px -6px;border:1px solid #66837640;border-radius:45%}.wave-two{top:57%;left:-2%;transform:rotate(12deg);border-color:#b68c5c88}.wave-two:after{border-color:#b68c5c55}.art-caption{position:absolute;bottom:30px;right:32px;font-size:11px;color:#6c745d}
.collection{margin-top:33px}.section-heading{display:flex;align-items:center;justify-content:space-between}h2{font-size:23px;font-weight:550;letter-spacing:-.6px;margin:9px 0 0}h2>span{font-size:11px;font-weight:400;color:var(--muted);margin-left:10px;vertical-align:middle}.collection-note{font-size:12px;color:var(--muted)}.filters{display:flex;gap:8px;margin:23px 0;flex-wrap:wrap}.chip{border:1px solid var(--line);background:transparent;border-radius:20px;padding:9px 14px;color:#5c6a61;font-size:11px}.chip.selected{background:#dce4da;border-color:#dce4da;color:#294b3e}.chip:hover{background:#e7eadf}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}.card{min-width:0}.cover-button{width:100%;display:block;position:relative;padding:0;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--cover);text-align:left;color:#29463e}.cover-art{position:absolute;inset:0}.cover-art:before{content:'';position:absolute;width:42%;aspect-ratio:1;border-radius:50%;background:#f9ecc9a0;right:-3%;top:-10%}.cover-art:after{content:'';position:absolute;width:140%;height:85%;border:1px solid #355b4f32;border-radius:50%;left:-20%;top:39%;transform:rotate(-14deg)}.cover-number{position:absolute;top:15px;left:18px;font-size:10px;color:#3c584f}.cover-title{position:absolute;bottom:31px;left:19px;right:22px;font-size:clamp(21px,2.1vw,29px);letter-spacing:-.9px;line-height:1.13;font-weight:550;max-width:83%}.cover-by{position:absolute;bottom:13px;left:20px;font-size:9px;color:#516b60}.cover-play{position:absolute;right:12px;top:12px;background:#fffdf795;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;font-size:10px;transition:transform .2s}.cover-button:hover .cover-play{transform:scale(1.1);background:#fffdf7}.card-head{display:flex;align-items:start;gap:7px;margin-top:12px}.card-head h3{font-size:13px;line-height:1.5;margin:0;font-weight:550}.card-head .icon-button{margin:-7px -6px 0 auto}.card p{font-size:11px;color:var(--muted);margin:5px 0}.version-label{font-size:9px;color:#647463;display:block;margin-top:8px;line-height:1.5}.card.current .cover-button{outline:2px solid #4a7963;outline-offset:3px}.empty{padding:40px 0;color:var(--muted)}
.listening{border-top:1px solid var(--line);margin-top:35px;padding:25px 0;display:flex;align-items:center;gap:25px;flex-wrap:wrap}.listening h2{font-size:20px}.listening p{font-size:12px;color:var(--muted)}.listening label{margin-left:auto;font-size:11px;color:var(--muted)}select{display:block;margin-top:8px;max-width:100%;border:1px solid #283e3a30;padding:10px;border-radius:10px;background:var(--panel);font-size:12px}#version-note{width:100%;margin:0}.video-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%}.video-actions>span{font-size:11px;color:var(--muted)}.attach-video{cursor:pointer;margin:0!important;color:var(--ink)!important}footer{display:flex;gap:20px;margin-top:38px;padding:22px 0 26px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}footer>span:last-child{margin-left:auto}
.player{position:fixed;z-index:15;bottom:0;left:0;right:0;padding:16px 30px calc(16px + env(safe-area-inset-bottom));min-height:96px;background:#fffdf7f5;backdrop-filter:blur(20px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr .7fr;align-items:center;gap:30px}.now{display:flex;align-items:center;gap:12px;min-width:0}.mini-art{width:48px;height:48px;border-radius:12px;background:#d5dfcc;display:grid;place-items:center;flex-shrink:0;font-size:25px;color:#426451}.now>div:nth-child(2){min-width:0}.now strong,.now span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now strong{font-size:12px;font-weight:550}.now span{font-size:10px;color:var(--muted);margin-top:5px}.icon-button{background:none;color:#5b7265;min-width:34px;min-height:34px;font-size:15px;border-radius:50%}.icon-button[aria-pressed=true]{color:#a3583b}.transport-buttons{display:flex;justify-content:center;align-items:center;gap:18px;position:relative}.play-button{border-radius:50%;width:36px;height:36px;background:#355b4f;color:#fffdf7;font-size:11px}.autoplay{position:absolute;right:0;font-size:9px;color:var(--muted);display:flex;align-items:center;gap:3px}.autoplay input{accent-color:#355b4f;width:12px}.timeline{display:flex;align-items:center;gap:10px;margin-top:10px}.timeline>span{font-size:9px;color:var(--muted);width:28px;text-align:center}input[type=range]{accent-color:#587662;height:12px;cursor:pointer;min-width:0}.timeline input{width:100%}.volume{display:flex;align-items:center;justify-content:end;gap:12px;color:var(--muted)}.volume input{width:80px}.quality{font-size:9px;color:var(--muted)}.notice{position:fixed;z-index:60;bottom:130px;left:50%;transform:translateX(-50%);padding:15px 20px;background:#355b4f;color:#fffdf7;border-radius:12px;max-width:90vw;width:max-content;font-size:12px;box-shadow:0 5px 25px #283e3a15}.skip-link{position:fixed;top:-70px;left:20px;z-index:99;background:var(--sage);padding:15px}.skip-link:focus{top:10px}dialog{border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);padding:30px;max-width:min(90vw,480px)}dialog::backdrop{background:#283e3a65;backdrop-filter:blur(8px)}dialog p{line-height:1.8;color:var(--muted)}dialog .ghost{float:right;margin-bottom:20px}dialog h2{clear:both}#video-dialog{max-width:min(94vw,1100px);width:100%;padding:18px}#video-dialog video{display:block;width:100%;max-height:75svh;margin-top:15px;border-radius:10px}#video-dialog .ghost{float:none;display:block;margin-left:auto}
.intro{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 65% 38%,#f0dcad,#eee9da 45%,#e2e7db);overflow:hidden}.intro-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}.intro-title>span{font-size:13px;color:#566e5d;animation:reveal 1.6s both}.intro-title strong{font-size:clamp(42px,8vw,88px);letter-spacing:-3px;font-weight:550;animation:reveal 2s .4s both}.intro-title strong span{font-weight:400;color:#56725f;margin-left:9px}.intro-title small{font-size:12px;color:#657060;margin-top:18px;animation:reveal 2s 1s both}#intro-canvas{position:absolute;inset:0}#intro-canvas canvas{display:block;width:100%;height:100%}.intro-skip{position:absolute;bottom:35px;right:35px;z-index:2}.intro-progress{position:absolute;bottom:0;left:0;height:2px;background:#7a956d;animation:intro-progress 6s linear forwards}@keyframes intro-progress{from{width:0}to{width:100%}}@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){header{gap:20px;padding:0 24px}.layout{grid-template-columns:165px minmax(0,1fr)}aside{padding:30px 10px}main{padding:24px}.hero-copy{padding:30px}.hero-art{opacity:.6}.hero-actions{gap:15px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.player{grid-template-columns:1fr 1fr;gap:20px}.volume{display:none}.autoplay{position:static}.collection-note{display:none}}
@media(max-width:700px){body{padding-bottom:145px}header{height:auto;min-height:108px;flex-wrap:wrap;gap:12px;padding:15px 18px}.brand{font-size:19px}.brand-mark{width:28px;height:28px;font-size:18px}header>.ghost{margin-left:auto;font-size:10px;padding:8px}.search{order:3;max-width:none;padding:9px 12px}.search kbd{display:none}.layout{display:block}aside{position:static;height:auto;padding:12px 18px 0;display:block}.aside-label,.aside-note,.edition{display:none}nav{display:flex;gap:8px}.nav-item{width:auto;padding:10px 12px;font-size:11px}.nav-item small{margin-left:5px}.intro-replay{position:absolute;right:18px;top:129px;padding:0;font-size:10px}main{padding:14px 18px 0}.hero{min-height:320px;align-items:start;border-radius:16px}.hero-copy{padding:27px 24px}.hero h1{font-size:37px;letter-spacing:-1.6px;margin:18px 0}.hero p{font-size:12px}.hero-art{width:60%;right:-23%;top:26%;opacity:.35;pointer-events:none}.sun-disc{width:170px;height:170px}.art-caption{display:none}.hero-actions{align-items:start;flex-direction:column;gap:15px}.hero-meta{font-size:10px;margin-top:20px}.hero .eyebrow{font-size:12px}.collection{margin-top:27px}.section-heading h2{font-size:22px}.filters{gap:6px;margin:19px 0}.chip{font-size:10px;padding:8px 11px}.grid{gap:23px 13px}.cover-title{font-size:23px;left:13px;bottom:28px;letter-spacing:-.8px}.cover-number{top:12px;left:13px;font-size:9px}.cover-by{left:13px;font-size:8px}.cover-play{right:9px;top:9px;width:27px;height:27px;font-size:9px}.cover-button{aspect-ratio:1.2}.card-head h3{font-size:12px}.card p{font-size:10px;line-height:1.5}.version-label{font-size:9px}.card-head .icon-button{min-width:28px}.player{grid-template-columns:1fr;padding:12px 18px calc(10px + env(safe-area-inset-bottom));gap:8px}.now{padding-right:115px}.now .mini-art{height:36px;width:36px;font-size:23px}.now strong{font-size:11px}.now span{font-size:9px}.now>.icon-button{margin-left:auto}.transport-buttons{position:absolute;right:16px;top:13px;gap:7px}.transport-buttons .autoplay{display:none}.transport-buttons>.icon-button{font-size:12px;min-width:26px}.timeline{margin-top:3px}.notice{bottom:135px}.listening{gap:16px}.listening label{margin-left:0;width:100%}select{width:100%}footer{font-size:10px;flex-wrap:wrap;gap:9px}footer>span:last-child{margin-left:0;width:100%}.intro-title strong{font-size:43px;letter-spacing:-2px}.intro-title>span{font-size:12px}.intro-title small{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Integrated watch page */
body{padding-bottom:0}.layout{display:block}.layout>aside{position:static;height:auto;padding:14px 32px;flex-direction:row;align-items:center;gap:20px}.layout>aside nav{display:flex}.aside-label,.aside-note,.edition{display:none}.intro-replay{margin:0 0 0 auto}.nav-item{margin:0;width:auto}.hero{display:none}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;max-width:1600px;padding:12px 32px}.watch{min-width:0;scroll-margin-top:100px}.video-stage{background:#111916;border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.video-stage video{display:block;width:100%;height:100%;object-fit:contain}.video-stage:fullscreen{border-radius:0;aspect-ratio:auto}.player{position:static;background:transparent;backdrop-filter:none;border:0;padding:18px 0;display:flex;flex-direction:column;align-items:stretch;gap:15px;min-height:0}.now{padding:0}.now strong{font-size:24px;white-space:normal;letter-spacing:-.5px}.now span{font-size:13px}.mini-art{display:none}.now>.icon-button{margin-left:auto;font-size:24px}.transport{display:flex;flex-direction:column-reverse;gap:10px}.transport-buttons{position:static;justify-content:flex-start}.autoplay{position:static;margin-left:auto;font-size:12px}.timeline{margin:0}.timeline>span{font-size:11px;min-width:38px}.volume{display:none}.watch-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.watch-tools label{display:flex;gap:8px;align-items:center;font-size:12px;margin-left:auto}.watch-tools select{margin:0;width:auto}.collection{margin:0}.collection-note,.collection .eyebrow{display:none}.collection h2{font-size:18px;margin:0}.filters{gap:5px;margin:16px 0}.chip{padding:7px 9px;font-size:10px}.grid{display:flex;flex-direction:column;gap:18px}.card{display:grid;grid-template-columns:140px minmax(0,1fr);column-gap:12px;align-content:start}.cover-button{grid-row:1/4;aspect-ratio:16/10;border-radius:9px}.cover-title{font-size:18px;left:10px;bottom:24px}.cover-number{font-size:8px;left:10px;top:9px}.cover-by{left:10px;bottom:10px}.cover-play{width:24px;height:24px}.card-head{margin-top:3px}.card-head h3{font-size:12px}.card p{margin:4px 0;line-height:1.5}.version-label{margin:3px 0;font-size:9px}.listening{display:none!important}footer{grid-column:1/-1;margin-top:20px}.notice{bottom:24px}.cinema main{grid-template-columns:1fr}.cinema .video-stage{max-height:78svh}.cinema .grid{display:grid;grid-template-columns:repeat(3,1fr)}.cinema .card{display:block}
@media(max-width:1050px){main{grid-template-columns:minmax(0,1fr) 290px;padding:12px 20px;gap:20px}.card{grid-template-columns:115px minmax(0,1fr)}.cover-title{font-size:16px}.watch-tools .ghost{font-size:10px;padding:9px 11px}}
@media(max-width:800px){main{display:block;padding:8px 16px}.layout>aside{padding:12px 16px}.intro-replay{position:static;font-size:10px}.video-stage{border-radius:12px;aspect-ratio:1/1;max-height:65svh}.player{padding:16px 0}.now strong{font-size:21px}.transport-buttons .autoplay{display:flex}.watch-tools{margin-bottom:28px}.watch-tools label{margin-left:0}.collection{margin-top:28px}.card{grid-template-columns:155px minmax(0,1fr)}.cover-title{font-size:20px}.card-head h3{font-size:14px}.card p{font-size:12px}.grid{gap:20px}.cinema .grid{display:flex}.cinema .card{display:grid}.watch{scroll-margin-top:120px}}