/* Luna web — the same quiet, cinematic space as the TV app. */
:root{--bg:#080b14;--panel:#121725;--text:#f3f4fb;--muted:#9ba5b9;--accent:#c2a8ff;--line:#b5bed21c;--content-x:clamp(20px,4.4vw,88px);--shadow:0 20px 65px #0005}
body{background:var(--bg);isolation:isolate;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button,a,input,select,textarea{outline-offset:4px}:focus-visible{outline:2px solid var(--accent);box-shadow:0 0 0 5px #c2a8ff12}
.space{z-index:0;background:radial-gradient(ellipse at 85% 0,#39235730,transparent 48%),radial-gradient(ellipse at 5% 55%,#18344922,transparent 46%),#080b14}
.stars{opacity:.55;background-size:510px 470px;background-image:radial-gradient(1px 1px at 23px 35px,#dcd9ff 95%,transparent),radial-gradient(1px 1px at 163px 158px,#b2c7e8 95%,transparent),radial-gradient(1.5px 1.5px at 280px 75px,#f5eaff 95%,transparent),radial-gradient(1px 1px at 370px 302px,#c7b9f0 95%,transparent),radial-gradient(1px 1px at 80px 380px,#c6b9e5 95%,transparent);animation:star-breathe 7s ease-in-out infinite alternate}
.stars:after{content:"";position:absolute;inset:0;background:inherit;background-size:730px 610px;background-position:140px 210px;opacity:.5}
.shooting-star{position:absolute;width:180px;height:2px;left:90%;top:5%;border-radius:50%;background:linear-gradient(90deg,#f5eeff,#bca4ff70 25%,transparent);box-shadow:0 0 8px #c2a8ff40;opacity:0;transform:rotate(-35deg);animation:shoot-across 11s linear infinite;will-change:transform,opacity}
.shooting-star:before{content:"";position:absolute;left:0;top:-1px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 12px #d7c1ff}
.shooting-star-2{left:64%;top:-5%;width:110px;animation-duration:14s;animation-delay:-6s}.shooting-star-3{left:110%;top:42%;width:220px;animation-duration:17s;animation-delay:-10s}.shooting-star-4{left:38%;top:8%;width:130px;animation-duration:19s;animation-delay:-14s}.shooting-star-5{left:94%;top:74%;width:100px;animation-duration:13s;animation-delay:-3s}.shooting-star-6{left:73%;top:25%;width:150px;animation-duration:23s;animation-delay:-18s}
@keyframes shoot-across{0%{transform:translate3d(80px,-55px,0) rotate(-35deg);opacity:0}1%{opacity:.85}9%{opacity:.6}13%,100%{transform:translate3d(-1000px,700px,0) rotate(-35deg);opacity:0}}
@keyframes star-breathe{from{opacity:.35}to{opacity:.65}}
.paused .shooting-star,.paused .stars{animation-play-state:paused}.effects-off .shooting-star{display:none}.effects-off .stars{animation:none}
main,body>footer{position:relative;z-index:1}.header{height:86px;padding:0 var(--content-x);gap:clamp(20px,3vw,52px);background:#080b14d9;backdrop-filter:blur(24px);z-index:10;border-color:#ffffff0c}.brand img{width:110px;height:55px;filter:brightness(1.4)}.header nav{gap:5px;height:auto}.header nav a{font-size:13px;font-weight:600;min-height:41px;height:auto;border:1px solid transparent;padding:.55rem 1rem}.header nav a.active{background:linear-gradient(135deg,#c2a8ff20,#ffffff04);border-color:#c2a8ff30;color:var(--text)}.header nav a.active:after{display:none}.header-actions{gap:22px}.header-actions a{font-size:12px}.avatar{width:34px;height:34px;background:linear-gradient(145deg,#a28bde,#c2a8ff);color:#171222;font-weight:800;border:0}.profile{gap:9px}.header a:hover{color:var(--text)}
.home-welcome{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:35px var(--content-x) 22px}.home-welcome h2{font-size:clamp(24px,2.2vw,36px);margin-bottom:9px;letter-spacing:-.045em}.home-welcome .eyebrow{margin-bottom:10px}.home-welcome .muted{font-size:13px}.community-invite{display:flex;align-items:center;gap:15px;padding:13px 18px;border:1px solid var(--line);background:linear-gradient(130deg,#c2a8ff0c,#ffffff03);border-radius:15px;flex-shrink:0;font-size:12px;font-weight:650}.community-invite>span:first-child{color:var(--accent);font-size:23px}.community-invite small{display:block;font-weight:400;font-size:10px;color:var(--muted);margin-top:3px}.community-invite>span:last-child{color:var(--accent);margin-left:12px}.community-invite:hover{border-color:#c2a8ff66}
.hero{height:clamp(400px,38vw,570px);min-height:400px;margin:0 var(--content-x) 36px;padding:clamp(28px,4vw,64px);align-items:center;border-radius:26px;border:1px solid #ffffff12;background:#101625;box-shadow:var(--shadow)}.hero-art{width:100%;opacity:.82;object-position:center 28%}.hero:before{background:linear-gradient(90deg,#0a101cf5 0%,#0a101ce8 24%,#0a101c70 60%,#0a101c16),linear-gradient(0deg,#080b1480,transparent 65%)}.hero-copy{max-width:560px;width:58%}.hero h1{font-size:clamp(36px,4.2vw,64px);line-height:1.02;letter-spacing:-.05em;text-shadow:0 4px 24px #0005;margin:17px 0}.hero .description{color:#c3cbd9;font-size:14px;line-height:1.7;margin-top:17px}.eyebrow{font-size:10px;letter-spacing:.21em;color:var(--accent);font-weight:800}.eyebrow:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px #c2a8ff70;margin-right:9px;vertical-align:2px}.metadata{color:#c2cad8;font-size:12px}.metadata .rating{color:var(--accent)}.pill{border-radius:5px;color:#d2d8e4;border-color:#ffffff25}.actions{gap:12px;margin-top:25px}.button{min-height:46px;border-radius:12px;border-color:#ffffff20;background:#ffffff0a;font-size:12px;font-weight:700;transition:background .16s,border-color .16s,transform .16s}.button.primary{background:var(--accent);border-color:transparent;color:#151222;box-shadow:0 7px 24px #c2a8ff14}.button.primary:hover{background:color-mix(in srgb,var(--accent) 80%,white)}.button:hover{border-color:#ffffff40;background:#ffffff12}.button:active{transform:translateY(1px)}
.section{margin:0 var(--content-x) 34px}.section-head{margin-bottom:13px}.section-head h2{font-size:21px;font-weight:750;letter-spacing:-.025em}.section-head>a{font-size:11px}.rail{gap:16px;padding:6px 4px 20px;margin-left:-4px;scroll-snap-type:x proximity;scrollbar-width:thin}.rail .card{flex-basis:168px}.card{isolation:isolate;border:1px solid #ffffff13;border-radius:14px;overflow:hidden;background:#121725;transition:transform .2s,border-color .2s,box-shadow .2s;scroll-snap-align:start}.poster{border:0;border-radius:0;background:linear-gradient(140deg,#232139,#101725)}.poster:after{content:"";position:absolute;inset:44% 0 0;background:linear-gradient(0deg,#070b12fa,#070b1270 50%,transparent);pointer-events:none}.poster img{transition:transform .35s}.card h3{position:absolute;bottom:32px;left:12px;right:12px;margin:0;font-size:12px;font-weight:750;z-index:1;color:#f6f5fb;text-shadow:0 2px 7px #000;line-height:1.3}.card .card-meta{position:absolute;bottom:13px;left:12px;right:12px;margin:0;font-size:10px;z-index:1;color:#b5bfd0}.card:hover,.card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px #c2a8ff30,0 10px 30px #0005;transform:translateY(-3px)}.card:hover .poster img{transform:scale(1.04)}.card:focus-visible .poster{outline:none;box-shadow:none}.card progress{z-index:2;bottom:5px;left:10px;width:calc(100% - 20px);height:3px;border-radius:3px;overflow:hidden}.continue-card .poster{aspect-ratio:16/9}.rail .continue-card{flex-basis:285px}.continue-card h3{bottom:36px}.continue-card .card-meta{bottom:17px}.continue-card .poster:after{inset:15% 0 0}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 17px}.page{padding:35px var(--content-x) 30px}.page-heading{margin-bottom:29px;align-items:center}.page-heading h1{font-size:clamp(30px,3.3vw,46px);letter-spacing:-.05em;margin-top:6px}.filters{gap:8px}.filters button{border-radius:999px;padding:9px 16px;border-color:var(--line);background:#101624;color:#a5b0c3;font-size:11px;font-weight:650}.filters button[aria-pressed=true]{background:var(--accent);color:#161322;border-color:transparent}.filters button:hover{border-color:var(--accent)}
.detail{padding:48px var(--content-x);gap:35px;min-height:490px}.detail .hero-art{opacity:.3;object-position:center 25%}.detail:before{background:linear-gradient(90deg,#080b14eb,#080b1470),linear-gradient(0deg,var(--bg),transparent 75%)}.detail-poster{width:190px;border-radius:16px;box-shadow:var(--shadow);border-color:#ffffff22}.detail-copy{max-width:750px}.detail h1{font-size:clamp(31px,3.8vw,55px);line-height:1.04;letter-spacing:-.05em}.detail .description{font-size:14px;color:#b7c1d2;line-height:1.8}.back-link{color:#a6b0c1}.tagline{color:var(--accent);font-size:14px}.cast{gap:22px}.person{flex-basis:100px;text-align:center}.person img{width:78px;height:78px;border:1px solid var(--line)}.person h3{font-size:11px;color:#dfe4ef}.person p{color:var(--muted);font-size:10px}.episode{border-radius:15px;border-color:var(--line);background:#121725b3;padding:17px;transition:border-color .2s,background .2s}.episode:hover{border-color:#c2a8ff66;background:#1a2032}.episode img{border-radius:9px;width:155px}.episode p{color:var(--muted)}
.panel{border-radius:22px;border-color:var(--line);background:linear-gradient(140deg,#171c2be8,#101522e8);box-shadow:0 20px 55px #0002;padding:28px}.account-grid{max-width:1400px;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);align-items:start;gap:24px}.panel h2{font-size:23px}.panel p{color:var(--muted)}.setting{border-color:var(--line);gap:28px}.setting small{color:#8591a6}.setting label{color:#d6ddeb}.setting select{background:#090e19;border-color:var(--line);border-radius:10px;max-width:220px}.profile-form input,.chat-compose textarea,input,select{background:#090e19;border-color:var(--line);border-radius:11px;color:var(--text)}.profile-form{border-color:var(--line)}form label{color:#c2cadd}.search-form{max-width:800px}.search-form input{border-radius:14px;padding:17px 20px;font-size:17px;min-height:56px;background:#121725c9}.search-form .button{border-radius:14px;padding-inline:25px}.empty{background:linear-gradient(140deg,#141a28c0,#10152270);border:1px solid var(--line);border-radius:20px}.empty h2{color:var(--text);letter-spacing:-.035em}.empty p{color:var(--muted)}.loading-moon{filter:drop-shadow(0 0 16px #c2a8ff33)}
.community-page{max-width:1400px}.community-lounge{padding:24px}.chat-message{border-radius:15px;border-color:#ffffff0b;background:#ffffff03}.chat-message-head strong{color:var(--accent)}.chat-message time{color:#8793a8}.chat-message p{color:#d1d8e5}.chat-compose small{color:#8e9ab0}.chat-signin{border-color:var(--line)}.chat-compose textarea{background:#090e19}.chat-messages{height:clamp(280px,48vh,600px)}
body>footer{border-color:var(--line);margin:28px var(--content-x) 0;padding:25px 0 30px;color:#7e8ba1}body>footer>a{color:#b8a6da}.sync-state:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#8ac5b0;vertical-align:2px;margin-right:8px}.sync-error:before{background:#eaa9a9}dialog{border-radius:24px;background:linear-gradient(145deg,#181c2a,#0d1220);border-color:#c2a8ff30;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#04070dd9;backdrop-filter:blur(12px)}.dialog-inner{padding:36px}.dialog-inner h1{letter-spacing:-.045em}.tabs button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.fine-print{color:#8490a5}#toast{border-radius:14px;background:#1c2234;border-color:#c2a8ff33;color:var(--text);box-shadow:var(--shadow)}.player-bar{background:#0d1220;border-bottom:1px solid #ffffff14}.player-note{background:#080b14;color:#93a0b5}
@media(min-width:1600px){.header{height:98px}.header nav a{font-size:15px}.brand img{width:130px;height:65px}.rail .card{flex-basis:200px}.rail .continue-card{flex-basis:330px}.card h3{font-size:14px}.card .card-meta{font-size:11px}.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.section-head h2{font-size:25px}.hero .description{font-size:16px}.button{font-size:14px;min-height:49px}}
@media(max-width:1100px){.header{gap:16px}.header nav{gap:2px}.header nav a{padding:.55rem .7rem}.header-actions{gap:14px}.hero-copy{width:65%}.account-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}}
@media(max-width:800px){.header{height:auto;min-height:80px;flex-wrap:wrap;padding-top:10px;gap:0 20px}.header nav{order:3;width:100%;height:52px;overflow-x:auto;justify-content:flex-start;gap:8px;scrollbar-width:none}.header nav a{font-size:12px;padding:.5rem .9rem;min-height:36px}.header-actions{margin-left:auto}.brand img{height:48px;width:100px}.home-welcome{padding-top:27px}.community-invite{padding:10px 13px}.community-invite small{display:none}.community-invite>span:last-child{margin:0}.hero{min-height:400px;border-radius:21px;padding:30px}.hero-copy{width:75%}.hero h1{font-size:42px}.hero .description{font-size:13px}.detail-poster{width:150px}.detail{gap:25px;min-height:420px}.detail h1{font-size:36px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 13px}.page-heading{display:block}.filters{margin-top:20px}.panel{padding:24px}}
@media(max-width:580px){:root{--content-x:20px}.header{position:sticky}.header-actions .profile>span:last-child{display:none}.header-actions>a:first-child>span:first-child{font-size:25px}.header nav{gap:3px}.header nav a{padding:.5rem .7rem;font-size:11px}.home-welcome{align-items:start;padding-top:24px;gap:16px}.home-welcome h2{font-size:25px;max-width:230px}.home-welcome .muted{font-size:11px;max-width:235px}.home-welcome .eyebrow{font-size:8px}.community-invite{font-size:0;padding:10px;border-radius:12px;gap:0}.community-invite>span:first-child{font-size:21px}.community-invite>span:last-child{display:none}.hero{height:480px;min-height:0;align-items:end;padding:25px;border-radius:21px;margin-bottom:27px}.hero-art{height:100%;opacity:.75;object-position:60% top}.hero:before{background:linear-gradient(0deg,#0a101cfa 0%,#0a101ce3 30%,#0a101c30 85%)}.hero-copy{width:100%;max-width:none}.hero h1{font-size:35px;max-width:100%}.hero .eyebrow{font-size:9px}.hero .description{-webkit-line-clamp:2;font-size:12px;line-height:1.65}.hero .actions{margin-top:19px}.hero .button{padding:11px 16px;min-height:43px;font-size:11px}.metadata{font-size:10px}.section-head h2{font-size:19px}.rail{gap:12px}.rail .card{flex-basis:136px}.rail .continue-card{flex-basis:250px}.card h3{font-size:11px;left:10px;right:10px;bottom:29px}.card .card-meta{font-size:9px;left:10px;right:10px;bottom:12px}.card{border-radius:11px}.continue-card h3{bottom:34px}.continue-card .card-meta{bottom:17px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 10px}.grid .card h3{font-size:10px;left:8px;right:8px}.grid .card .card-meta{font-size:8px;left:8px;right:8px}.page{padding-top:27px}.page-heading h1{font-size:32px}.filters{gap:6px}.filters button{font-size:10px;padding:8px 12px}.detail{padding-top:32px;gap:0;min-height:420px}.detail-poster{display:none}.detail h1{font-size:36px}.detail .description{font-size:12px}.detail .hero-art{height:100%;opacity:.25}.episode{padding:12px;gap:12px}.episode img{width:85px}.episode h3{font-size:12px}.panel{padding:21px;border-radius:19px}.panel h2{font-size:21px}.setting{gap:16px}.setting label{font-size:12px}.setting select{min-width:100px;max-width:145px;font-size:10px}.setting small{font-size:10px}.community-lounge{padding:17px}.chat-message{padding:12px}.chat-compose-actions .button{width:100%}.chat-message-head{gap:7px}.chat-message time{font-size:10px}.search-form input{width:100%;font-size:14px;padding:13px 14px}.search-form .button{padding:12px}.dialog-inner{padding:27px}.player-bar .button{padding:8px 11px;font-size:10px}}
@media(max-width:350px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header nav a{font-size:10px;padding:.45rem .55rem}.hero h1{font-size:30px}.setting{display:block}.setting select{width:100%;max-width:none;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.shooting-star{display:none}.stars{animation:none}.card,.poster img,.button{transition:none}}