/* NOCTRA: responsive layer for original markup and original scripts */
:root{--bg:#0a0910;--fg:#fbf7ff;--muted:#b1a9bd;--accent:#b795f8;--border:#ffffff20;--surface:#181321;--safe:env(safe-area-inset-bottom,0px);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;min-width:300px;background:var(--bg);color:var(--fg);font:14px/1.55 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #d3bcff;outline-offset:3px}[hidden]{display:none!important}img,iframe,video{max-width:100%}.skip-link{position:absolute;left:12px;top:-80px;background:#fff;color:#111;padding:12px;z-index:1000}.skip-link:focus{top:10px}
body>header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(20px,4.5vw,72px);border-bottom:1px solid var(--border);background:#0d0b14eb;position:sticky;top:0;z-index:100;backdrop-filter:blur(20px)}.brand{font-weight:850;letter-spacing:.12em;font-size:24px;white-space:nowrap}.brand span,.brand i{color:var(--accent)}.brand i{font-style:normal;margin-left:3px}body>header nav{display:flex;gap:7px;align-items:center}body>header nav button{border:0;background:transparent;color:#c3b7d0;border-radius:9px;padding:12px 14px;min-height:44px;font-size:13px;white-space:nowrap}body>header nav button.active,body>header nav button:hover{color:#fff;background:#b795f825}#count{background:#5d4480;color:#f7eaff;padding:3px 7px;border-radius:20px;font-size:11px}.header-right{display:flex;align-items:center;gap:11px}.header-right .icon,.avatar{display:grid;place-items:center;min-width:43px;min-height:43px;background:transparent;color:#f5eaff;border:0;font-size:25px}.header-right .avatar{min-width:37px;min-height:37px;background:#463254;border-radius:50%;border:1px solid #8165aa;font-size:14px;font-weight:800}.add-top{background:#a786f328;border:1px solid #b390ed54;border-radius:10px;color:#e5d2ff;padding:10px 14px;white-space:nowrap;font-size:12px;font-weight:800}.noctra-mobile-nav{display:none}
.hero{min-height:600px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(90deg,#10101a,#161127 60%,#2b1846)}.hero-image{position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 76% 42%,#9b67e84b 0,transparent 36%),repeating-radial-gradient(circle at 80% 46%,transparent 0 68px,#bc9dff0e 69px 71px)}.hero-content{padding:65px clamp(22px,6vw,96px) 100px;max-width:900px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#c1b2d5}.eyebrow.purple{color:var(--accent)}.hero .eyebrow span{width:7px;height:7px;display:inline-block;border-radius:50%;margin-right:7px;background:var(--accent);box-shadow:0 0 15px var(--accent)}.overline{letter-spacing:.17em;font-size:11px;font-weight:800;color:#ceb8e4;margin:35px 0 4px}.hero h1{font-size:clamp(45px,6vw,90px);font-weight:860;line-height:1.04;letter-spacing:-.06em;margin:12px 0 22px;max-width:780px}.hero-copy{max-width:500px;color:var(--muted);line-height:1.8;font-size:15px}.hero-actions,.button-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.hero-actions{margin-top:27px}.primary,.secondary,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;min-height:45px;padding:10px 18px;font-size:13px;font-weight:750;border:1px solid transparent}.primary{background:#b99af9;color:#170c25}.secondary{background:#ffffff0e;border-color:#ffffff2d;color:#f4eafb}.text-button{background:transparent;color:#c8acff}.primary:hover{filter:brightness(1.1)}.secondary:hover{background:#ffffff1c}.hero-note{display:flex;align-items:center;gap:9px;color:#b8adc8;font-size:12px;margin-top:33px}.hero-caption{position:absolute;right:5%;bottom:95px;display:grid;text-align:right;gap:6px;max-width:225px;color:#c1b4d1}.hero-caption span{font-size:10px;letter-spacing:.1em}.hero-caption b{font-size:15px}.hero-caption small{color:#a69ab6}.hero-bottom{position:absolute;left:clamp(22px,6vw,96px);right:clamp(22px,6vw,96px);bottom:22px;color:#a69bb5;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10px;letter-spacing:.14em}.hero-bottom div{display:flex;align-items:center;gap:9px}.hero-bottom i{height:1px;width:28px;background:#c8adf3}
.catalog,.showcase{padding:58px clamp(20px,5vw,80px) 70px}.drive-panel{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:27px 29px;margin-bottom:40px;border-radius:17px;border:1px solid #9873d93f;background:linear-gradient(115deg,#261832,#13121e)}.drive-panel h3{font-size:clamp(21px,2.5vw,28px);margin:8px 0 11px;letter-spacing:-.035em}.drive-panel p:not(.eyebrow){font-size:13px;color:#b5a8c3;line-height:1.6;margin:0}.drive-panel .button-row{flex-shrink:0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}.section-heading h2{font-size:clamp(27px,3.3vw,43px);line-height:1.13;letter-spacing:-.04em;margin:8px 0 0}.tools{display:flex;align-items:center;gap:9px;min-width:0}.search{display:flex;align-items:center;gap:9px;padding:0 12px;background:#171320;border:1px solid var(--border);border-radius:9px;min-height:44px;min-width:220px}.search span{font-size:22px;color:#b6a3ca}.search input{border:0;outline:0;background:transparent;color:#fff;font-size:13px;min-width:0;width:100%}select{border:1px solid var(--border);border-radius:9px;background:#171320;color:#f1eafb;padding:0 10px;min-height:44px;font-size:13px;max-width:100%}.filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:26px}.chip{background:#1c1625;border:1px solid #ffffff1c;border-radius:50px;padding:8px 15px;color:#c0b4cf;min-height:40px;white-space:nowrap;font-size:12px;font-weight:700}.chip.selected,.chip:hover{border-color:#aa81f781;background:#a37cf12a;color:#f9f2ff}.media-tabs{margin-bottom:27px}.grid,.sample-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:27px 16px;align-items:start}.movie-card{display:block;min-width:0;width:100%;background:transparent;border:0;color:inherit;text-align:left;padding:0}.poster{position:relative;overflow:hidden;aspect-ratio:2/3;border-radius:12px;border:1px solid #ffffff25;background:radial-gradient(circle at 70% 20%,#cf9eff55,transparent 34%),linear-gradient(135deg,#4b3567,#222034 68%,#0d1020);transition:transform .2s,border-color .2s}.movie-card:nth-child(4n+2) .poster{background:radial-gradient(circle at 70% 20%,#ffc9a949,transparent 40%),linear-gradient(135deg,#583b4d,#241d32,#10111d)}.movie-card:nth-child(4n+3) .poster{background:radial-gradient(circle at 70% 20%,#78c4b84a,transparent 40%),linear-gradient(135deg,#38544f,#212f37,#0e111e)}.movie-card:nth-child(4n+4) .poster{background:radial-gradient(circle at 70% 20%,#8ecbd04a,transparent 40%),linear-gradient(135deg,#2a4d6b,#172039,#0e111e)}.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.poster img.failed-media{display:none}.poster::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0002 0%,transparent 39%,#05030dd9 100%)}.movie-card:hover .poster,.movie-card:focus-visible .poster{transform:translateY(-4px);border-color:#b99bf99b}.card-tag{position:absolute;z-index:1;left:10px;top:10px;background:#140f1ad9;border:1px solid #ffffff37;color:#f1eaff;border-radius:5px;padding:5px 7px;font-size:9px;letter-spacing:.05em}.poster-text{position:absolute;z-index:1;left:11px;bottom:14px;right:10px;font-size:clamp(14px,1.6vw,21px);line-height:1.16;font-weight:850;overflow-wrap:anywhere;text-shadow:0 2px 12px #000c}.poster-text small{display:block;font-size:8px;letter-spacing:.09em;margin-top:6px;color:#d1bee8}.card-info{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:11px}.card-info strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.card-info span{color:#ba9df9;font-size:19px;flex-shrink:0}.movie-card>p{font-size:11px;color:#9990a8;margin:3px 0 0}.empty{background:#1b1425;border:1px dashed #ad8ae55d;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:20px;padding:35px 20px}.empty-symbol{font-size:36px;color:#bea1ed}.empty h3{margin:0 0 6px}.empty p{color:#b2a6bd}.local-note{color:#898098;font-size:11px;margin:19px 0}.showcase{padding-top:28px}.demo-label{font-size:11px;color:#9b8cac}.banner{padding:45px clamp(20px,5vw,80px);background:linear-gradient(115deg,#37204d,#21152f,#151320);display:flex;align-items:center;justify-content:space-between;gap:20px}.banner h2{font-size:clamp(25px,3.6vw,40px);margin:12px 0;letter-spacing:-.035em}.banner p:not(.eyebrow){color:#c1b0cd}.banner .primary{flex-shrink:0}body>footer{display:flex;align-items:center;justify-content:space-between;gap:17px;padding:30px clamp(20px,5vw,80px);border-top:1px solid var(--border)}footer .brand{font-size:19px}footer p{font-size:12px;color:#8c8296}footer button{background:none;border:0;color:#bba3d8;font-size:12px}
/* Dialog and playback responsive */
dialog{color:#f9f3ff;background:#171121;border:1px solid #a68add6b;border-radius:18px;box-shadow:0 25px 80px #000c;padding:24px;width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 35px);overflow-y:auto}dialog::backdrop{background:#04030be5;backdrop-filter:blur(7px)}dialog#player{width:min(1050px,calc(100vw - 24px))}dialog#details{width:min(680px,calc(100vw - 24px))}.dialog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}.dialog-top h2{font-size:clamp(24px,3vw,34px);margin:7px 0 0}.close{min-width:44px;min-height:44px;border-radius:50%;border:1px solid #ffffff25;background:#ffffff12;color:#fff;font-size:24px}dialog label{display:block;color:#cabed6;font-weight:700;font-size:13px;margin:13px 0}dialog label input,dialog label textarea,dialog label select{display:block;background:#231a2e;color:#fff;border:1px solid #ffffff30;border-radius:10px;width:100%;min-height:42px;padding:11px;font-size:16px;margin-top:7px}dialog textarea{resize:vertical}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hint,dialog small{font-size:12px;color:#aea2bd;line-height:1.5}.notice{padding:13px;background:#7750b525;border:1px solid #ad85ec52;border-radius:9px;font-size:12px;line-height:1.6;margin:15px 0}.settings-section{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}.settings-section p{font-size:13px;color:#b8afc2}dialog summary{cursor:pointer;color:#dfc9ff;padding:11px 0}#frame-container{width:100%;aspect-ratio:16/9;min-height:270px;overflow:hidden;background:#050409;border-radius:10px;border:1px solid var(--border)}#frame-container iframe,#frame-container video{width:100%;height:100%;aspect-ratio:16/9;border:0;display:block}.player-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.player-tools label{margin:0}.player-tools select{display:inline-block;width:auto;min-width:125px;margin-left:5px}#toast{position:fixed;z-index:500;bottom:20px;left:50%;transform:translateX(-50%);color:white;max-width:calc(100vw - 20px)}.local-preview-alert{position:fixed;left:50%;bottom:15px;transform:translateX(-50%);z-index:120;background:#332044;border:1px solid #bf97fe77;color:#f9efff;border-radius:11px;text-align:center;font-size:12px;padding:12px;max-width:800px;width:calc(100vw - 30px);box-shadow:0 10px 40px #0009;pointer-events:none}
@media(max-width:1150px){body>header{padding-inline:24px}body>header nav button{padding-inline:10px}.brand{font-size:21px}.grid,.sample-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.drive-panel{flex-wrap:wrap}.section-heading{flex-wrap:wrap}.tools{width:100%}.search{flex:1}.hero-caption{display:none}}
@media(max-width:850px){.grid,.sample-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.filters::-webkit-scrollbar{display:none}.hero{min-height:530px}}
@media(max-width:700px){html{scroll-padding-top:70px}body{padding-bottom:calc(70px + var(--safe))}body>header{height:63px;padding:0 13px;gap:6px}.brand{font-size:20px}body>header nav,.add-top{display:none}.header-right{gap:2px}.header-right .icon{min-width:42px}.header-right .avatar{min-height:36px;min-width:36px}.noctra-mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:110;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(67px + var(--safe));padding-bottom:var(--safe);background:#15101df5;border-top:1px solid #c7a5ef42;backdrop-filter:blur(20px)}.noctra-mobile-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:none;border:0;color:#aaa0b8;font-size:10px;font-weight:700;min-width:0;min-height:55px}.noctra-mobile-link.active{color:#d2b3ff}.noctra-mobile-icon{font-size:26px;line-height:1.2}.hero{min-height:0}.hero-content{padding:66px 18px 87px}.hero h1{font-size:clamp(42px,10.2vw,65px)}.overline{margin-top:19px}.hero-copy{font-size:13px}.hero-copy .desktop{display:none}.hero-actions{gap:8px}.hero-actions>*{min-width:125px;flex:1 1 auto;font-size:12px;padding-inline:10px}.hero-note{font-size:11px}.hero-bottom{left:18px;right:18px;font-size:9px;letter-spacing:.05em}.hero-bottom>span{max-width:160px}.hero-bottom div span{display:none}.catalog,.showcase{padding:30px 14px 49px}.drive-panel{padding:18px 15px;gap:15px;border-radius:13px;margin-bottom:25px}.drive-panel h3{font-size:21px}.drive-panel .button-row{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}.drive-panel .button-row>*{width:100%;min-width:0;padding:9px 6px;font-size:11px}.drive-panel #drive-options{grid-column:1/-1;min-height:34px}.section-heading h2{font-size:29px}.section-heading{gap:17px}.tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.search{min-width:0}.search input{font-size:16px}#sort{width:110px;font-size:11px;padding-inline:7px}.filters{gap:8px}.chip{min-height:40px;padding:7px 14px}.grid,.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}.poster{border-radius:10px}.poster-text{font-size:15px;left:9px;right:7px;bottom:12px}.poster-text small{font-size:8px}.card-tag{top:7px;left:7px;font-size:8px;padding:4px 5px}.card-info{margin-top:9px}.card-info strong{font-size:12px}.movie-card>p{font-size:10px}.showcase{padding-top:8px}.demo-label{display:none}.banner{flex-direction:column;align-items:flex-start;padding:35px 15px}.banner h2{font-size:28px}.banner .primary{width:100%}body>footer{padding:21px 14px;flex-wrap:wrap;gap:10px}body>footer button{width:100%;text-align:left}dialog,dialog#player,dialog#details{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100vw;border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;max-height:92dvh;padding:20px 17px calc(19px + var(--safe))}.form-row{grid-template-columns:1fr;gap:1px}#frame-container{min-height:0}.player-tools label{font-size:11px}#toast,.local-preview-alert{bottom:calc(80px + var(--safe))}.local-preview-alert{font-size:11px;padding:9px}}
@media(max-width:385px){body>header{padding-inline:9px}.brand{font-size:18px}.hero h1{font-size:42px}.catalog,.showcase{padding-inline:11px}.section-heading h2{font-size:26px}#sort{width:98px}.poster-text{font-size:14px}.card-info strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Final polish and compatibility */
body.library-mode>header{position:sticky;top:0;z-index:100;background:#0d0b14f7}
body.library-mode .catalog{padding-top:35px}
.noctra-mobile-nav{font-family:'DM Sans',sans-serif}
.card-info strong{overflow-wrap:anywhere}
@media(max-width:700px){
  .hero-image{background:linear-gradient(90deg,#0c0915de,#24113955),url('assets/mountain.jpg') center/cover}
  .hero-content{position:relative;z-index:1}
  .hero-bottom{z-index:2}
  .noctra-mobile-nav{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .movie-card{touch-action:manipulation}
  .card-info{align-items:flex-start}
  .poster-text{letter-spacing:.08em;text-align:left}
  .poster-text small{letter-spacing:.08em}
  .episode-item{min-height:56px}
  #episodes-dialog{max-height:92dvh}
  dialog#player{padding-top:16px}
  #frame-container{aspect-ratio:16/9;max-height:50dvh}
  #frame-container movi-player{display:block;width:100%;height:100%}
  .player-tools{align-items:center}
  .player-tools a{font-size:12px;max-width:155px}
  .detail-bottom{flex-wrap:wrap;gap:12px}
  #toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:701px){.hero-image{background:linear-gradient(90deg,#0a090fe8 0%,#0a090fbb 34%,#0a090f42 79%),url('assets/mountain.jpg') center/cover}}