/* North Star Theater — Blue Sentinel AI / AISPG™ cinematic film viewer (V7)
   Self-contained, CSP-strict (no inline styles/scripts). Scoped under .ns-theater. */
.ns-theater{
  --ns-bg:#05060b;--ns-panel:#0b0d15;--ns-panel-2:#10131d;--ns-line:rgba(255,255,255,.08);--ns-line-2:rgba(255,255,255,.14);
  --ns-text:#f3f5f9;--ns-mute:#9aa3b5;--ns-dim:#6b7486;--ns-accent:#e5484d;--ns-accent-2:#ff6b70;
  --ns-l:#3a1520;--ns-r:#15203a;
  --ns-display:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ns-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ns-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --ns-radius:14px;
  position:relative;isolation:isolate;color:var(--ns-text);background:var(--ns-bg);font-family:var(--ns-body);
  padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px);overflow:hidden;
}
.ns-theater[data-ns-site="aispg"]{--ns-accent:#e83b63;--ns-accent-2:#ff6c8c}
.ns-theater *,.ns-theater *::before,.ns-theater *::after{box-sizing:border-box}
.ns-theater button{font:inherit;color:inherit}
.ns-theater{scroll-margin-top:72px}
.ns-wrap{width:min(1360px,calc(100% - 32px));margin:0 auto;position:relative;z-index:2}

/* ambient field: crisp architectural grid + edge light, no blur filters */
.ns-theater::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent)}
.ns-theater::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ns-accent),transparent);opacity:.7}

/* header */
.ns-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:28px}
.ns-kicker{display:flex;align-items:center;gap:12px;font:600 11px/1 var(--ns-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ns-accent-2);margin:0 0 14px}
.ns-kicker i{display:block;width:44px;height:1px;background:var(--ns-accent)}
.ns-kicker b{width:7px;height:7px;border-radius:50%;background:var(--ns-accent);box-shadow:0 0 0 4px rgba(229,72,77,.18)}
.ns-title{font:700 clamp(30px,4.2vw,58px)/1.02 var(--ns-display);letter-spacing:-.025em;margin:0;color:#fff}
.ns-title em{font-style:normal;color:var(--ns-accent-2)}
.ns-sub{margin:14px 0 0;max-width:720px;color:var(--ns-mute);font-size:clamp(15px,1.3vw,17px);line-height:1.6}
.ns-count{font:500 12px/1.4 var(--ns-mono);color:var(--ns-dim);text-align:right;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ns-count strong{display:block;font:700 34px/1 var(--ns-display);color:#fff;letter-spacing:-.02em;margin-bottom:6px}

/* stage */
.ns-main{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:stretch}
.ns-theater.is-wide .ns-main{grid-template-columns:minmax(0,1fr)}
.ns-theater.is-wide .ns-side{display:none}
.ns-stage-shell{position:relative}
/* backlight: two colour planes sampled from the film, cut with hard edges */
.ns-bl{position:absolute;top:6%;bottom:6%;width:58%;z-index:0;pointer-events:none;transition:background-color .9s ease,opacity .6s ease;opacity:.0}
.ns-bl-l{left:-6%;background-color:var(--ns-l);clip-path:polygon(0 8%,100% 0,100% 100%,0 92%)}
.ns-bl-r{right:-6%;background-color:var(--ns-r);clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)}
.ns-bl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ns-bg) 0%,transparent 55%,transparent 100%)}
.ns-bl-r::after{background:linear-gradient(270deg,var(--ns-bg) 0%,transparent 55%,transparent 100%)}
.ns-theater.is-lit .ns-bl{opacity:.55}
.ns-stage{position:relative;z-index:1;aspect-ratio:16/9;background:#000;border-radius:var(--ns-radius);overflow:hidden;
  box-shadow:0 0 0 1px var(--ns-line-2),0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6) inset}
.ns-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.04)}
.ns-stage::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ns-l),var(--ns-accent),var(--ns-r),transparent);transition:opacity .6s;opacity:.0}
.ns-theater.is-lit .ns-stage::after{opacity:.9}
.ns-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.ns-video::cue{background:transparent;color:transparent}

/* poster/title overlay */
.ns-cover{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(12px,2vw,22px);cursor:pointer;
  background:radial-gradient(closest-side at 50% 50%,rgba(3,4,8,.28),rgba(3,4,8,0));transition:opacity .35s ease}
.ns-cover[hidden]{display:flex;opacity:0;pointer-events:none}
.ns-cover-meta{display:flex;gap:8px;align-items:center;background:rgba(5,6,11,.78);border:1px solid var(--ns-line-2);border-radius:999px;padding:7px 12px}
.ns-cover-title,.ns-cover-hook{display:none}
.ns-cover-num{font:600 11px/1 var(--ns-mono);letter-spacing:.24em;color:var(--ns-accent-2);text-transform:uppercase}
.ns-cover-title{font:700 clamp(20px,2.6vw,36px)/1.08 var(--ns-display);letter-spacing:-.02em;margin:10px 0 8px;color:#fff}
.ns-cover-hook{color:#d4d9e3;font-size:clamp(13px,1.2vw,16px);line-height:1.5;margin:0}
.ns-play-big{position:absolute;left:50%;top:50%;width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);margin:calc(clamp(64px,8vw,96px)/-2) 0 0 calc(clamp(64px,8vw,96px)/-2);
  border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(10,12,20,.55);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 8px rgba(255,255,255,.06),0 0 0 1px rgba(0,0,0,.4) inset;transition:transform .2s ease,background-color .2s ease,border-color .2s}
.ns-play-big:hover,.ns-play-big:focus-visible{background:var(--ns-accent);border-color:var(--ns-accent-2);transform:scale(1.05)}
.ns-play-big svg{width:34%;height:34%;margin-left:8%}

/* captions overlay */
.ns-caption{position:absolute;left:50%;bottom:clamp(54px,9%,84px);transform:translateX(-50%);z-index:2;max-width:86%;text-align:center;pointer-events:none;transition:bottom .25s}
.ns-caption span{display:inline;background:rgba(5,6,11,.82);color:#fff;font:600 clamp(14px,1.6vw,21px)/1.55 var(--ns-body);padding:.18em .55em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:4px;box-shadow:inset 3px 0 0 var(--ns-accent)}
.ns-theater.no-cc .ns-caption{display:none}
.ns-stage.is-idle .ns-caption{bottom:clamp(18px,4%,34px)}

/* controls */
.ns-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:28px clamp(12px,2vw,20px) clamp(10px,1.6vw,16px);
  background:linear-gradient(0deg,rgba(3,4,8,.92),rgba(3,4,8,0));transition:opacity .3s ease,transform .3s ease}
.ns-stage.is-cover .ns-controls{opacity:0;pointer-events:none}
.ns-stage.is-idle .ns-controls{opacity:0;transform:translateY(8px);pointer-events:none}
.ns-stage.is-idle{cursor:none}
.ns-scrub{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.ns-scrub-track{position:absolute;left:0;right:0;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;transition:height .15s}
.ns-scrub:hover .ns-scrub-track,.ns-scrub.is-drag .ns-scrub-track{height:5px}
.ns-scrub-buf{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.22);width:0}
.ns-scrub-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--ns-accent),var(--ns-accent-2));width:0}
.ns-scrub-knob{position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;margin-left:-6.5px;left:0;box-shadow:0 0 0 4px rgba(229,72,77,.35);opacity:0;transition:opacity .15s}
.ns-scrub:hover .ns-scrub-knob,.ns-scrub.is-drag .ns-scrub-knob,.ns-scrub:focus-visible .ns-scrub-knob{opacity:1}
.ns-scrub-tip{position:absolute;bottom:20px;padding:3px 7px;border-radius:4px;background:#000;border:1px solid var(--ns-line-2);font:600 11px/1 var(--ns-mono);opacity:0;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.ns-scrub:hover .ns-scrub-tip{opacity:1}
.ns-bar{display:flex;align-items:center;gap:6px;margin-top:6px}
.ns-btn{appearance:none;border:0;background:transparent;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:#e9ecf3;transition:background-color .15s,color .15s}
.ns-btn:hover{background:rgba(255,255,255,.10);color:#fff}
.ns-btn:focus-visible,.ns-card:focus-visible,.ns-scrub:focus-visible,.ns-line-btn:focus-visible,.ns-chip:focus-visible{outline:2px solid var(--ns-accent-2);outline-offset:2px}
.ns-btn svg{width:20px;height:20px}
.ns-btn[aria-pressed="true"]{color:var(--ns-accent-2)}
.ns-time{font:500 12px/1 var(--ns-mono);color:#cfd5e1;margin:0 8px;letter-spacing:.02em;white-space:nowrap}
.ns-spacer{flex:1}
.ns-vol{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:var(--ns-accent);height:4px}
.ns-volgroup:hover .ns-vol,.ns-volgroup:focus-within .ns-vol{width:84px;opacity:1}
.ns-volgroup{display:flex;align-items:center}
.ns-brand-tag{font:600 10px/1 var(--ns-mono);letter-spacing:.2em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-right:6px}

/* up next */
.ns-next{position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(70px,12%,96px);z-index:6;width:min(340px,70%);background:rgba(10,12,20,.94);
  border:1px solid var(--ns-line-2);border-radius:12px;padding:12px;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.ns-next[hidden]{display:none}
.ns-next img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block}
.ns-next small{font:600 10px/1 var(--ns-mono);letter-spacing:.18em;color:var(--ns-accent-2);text-transform:uppercase}
.ns-next strong{display:block;font:600 14px/1.3 var(--ns-display);margin:6px 0 8px}
.ns-next-actions{display:flex;gap:8px}
.ns-next-actions button{border:1px solid var(--ns-line-2);background:transparent;border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer}
.ns-next-actions button.is-primary{background:var(--ns-accent);border-color:var(--ns-accent)}
.ns-next-ring{height:2px;background:rgba(255,255,255,.12);margin-top:8px;border-radius:2px;overflow:hidden;grid-column:1/-1}
.ns-next-ring i{display:block;height:100%;width:0;background:var(--ns-accent)}
.ns-next.is-counting .ns-next-ring i{width:100%;transition:width 6s linear}

/* side panel */
.ns-side{background:linear-gradient(180deg,var(--ns-panel),var(--ns-bg));border:1px solid var(--ns-line);border-radius:var(--ns-radius);display:flex;flex-direction:column;height:0;min-height:100%;overflow:hidden;position:relative;z-index:1}
.ns-now{padding:20px 20px 16px;border-bottom:1px solid var(--ns-line)}
.ns-now-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.ns-chip{font:600 10px/1 var(--ns-mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:999px;border:1px solid var(--ns-line-2);color:#d7dce6;background:rgba(255,255,255,.03)}
.ns-chip.is-accent{border-color:rgba(229,72,77,.5);color:var(--ns-accent-2);background:rgba(229,72,77,.08)}
.ns-now h3{font:700 20px/1.2 var(--ns-display);letter-spacing:-.015em;margin:0 0 8px;color:#fff}
.ns-now p{margin:0;color:var(--ns-mute);font-size:14px;line-height:1.55}
.ns-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--ns-line)}
.ns-tab{appearance:none;border:0;background:transparent;padding:10px 10px 12px;font:600 11px/1 var(--ns-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ns-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ns-tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--ns-accent)}
.ns-pane{flex:1;min-height:0;overflow:auto;padding:8px 8px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.ns-pane[hidden]{display:none}
.ns-search{margin:6px 6px 8px;display:flex;align-items:center;gap:8px;border:1px solid var(--ns-line-2);border-radius:9px;padding:0 10px;background:rgba(255,255,255,.02)}
.ns-search input{flex:1;background:transparent;border:0;color:#fff;font:inherit;font-size:13px;padding:9px 0;outline:none}
.ns-search svg{width:14px;height:14px;color:var(--ns-dim)}
.ns-line-btn{appearance:none;display:grid;grid-template-columns:48px 1fr;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ns-mute);font-size:14px;line-height:1.5;transition:background-color .15s,color .15s}
.ns-line-btn:hover{background:rgba(255,255,255,.05);color:#fff}
.ns-line-btn time{font:500 11px/1.9 var(--ns-mono);color:var(--ns-dim)}
.ns-line-btn.is-active{background:rgba(229,72,77,.10);color:#fff;box-shadow:inset 2px 0 0 var(--ns-accent)}
.ns-line-btn.is-active time{color:var(--ns-accent-2)}
.ns-line-btn[hidden]{display:none}
.ns-about{padding:12px 14px;color:var(--ns-mute);font-size:14px;line-height:1.65}
.ns-about h4{font:600 11px/1 var(--ns-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ns-dim);margin:14px 0 8px}
.ns-about h4:first-child{margin-top:4px}
.ns-share{display:flex;gap:8px;margin-top:6px}
.ns-share button{border:1px solid var(--ns-line-2);background:transparent;border-radius:8px;padding:8px 12px;font-size:12px;cursor:pointer;color:#e6e9f0}
.ns-share button:hover{border-color:var(--ns-accent);color:#fff}

/* disclosure */
.ns-disclosure{margin:14px 2px 0;font-size:12px;line-height:1.55;color:var(--ns-dim);display:flex;gap:10px;align-items:flex-start;max-width:1000px}
.ns-disclosure b{font:600 10px/1.9 var(--ns-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ns-mute);white-space:nowrap}

/* rails */
.ns-rails{margin-top:clamp(36px,5vw,64px);display:grid;gap:clamp(28px,4vw,44px)}
.ns-rail-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;border-bottom:1px solid var(--ns-line);padding-bottom:12px}
.ns-rail-head span{font:600 11px/1 var(--ns-mono);color:var(--ns-accent-2);letter-spacing:.2em}
.ns-rail-head h3{font:700 clamp(18px,1.8vw,24px)/1.1 var(--ns-display);margin:0;letter-spacing:-.015em;color:#fff}
.ns-rail-head small{margin-left:auto;font:500 11px/1 var(--ns-mono);color:var(--ns-dim);letter-spacing:.1em;text-transform:uppercase}
.ns-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 3*18px)/4));gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.ns-card{appearance:none;border:0;padding:0;margin:0;background:transparent;text-align:left;cursor:pointer;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-start;align-self:start;color:inherit;width:100%;min-width:0;line-height:normal}
.ns-thumb{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#0a0b12;box-shadow:0 0 0 1px var(--ns-line-2);transition:box-shadow .25s ease,transform .25s ease}
.ns-thumb img,.ns-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ns-thumb video{opacity:0;transition:opacity .35s ease}
.ns-card.is-previewing .ns-thumb video{opacity:1}
.ns-card:hover .ns-thumb,.ns-card:focus-visible .ns-thumb{box-shadow:0 0 0 1px var(--ns-accent),0 18px 40px -18px rgba(229,72,77,.55);transform:translateY(-3px)}
.ns-card.is-current .ns-thumb{box-shadow:0 0 0 2px var(--ns-accent)}
.ns-badge{position:absolute;z-index:2;right:8px;bottom:8px;font:600 11px/1 var(--ns-mono);padding:5px 7px;border-radius:5px;background:rgba(0,0,0,.78);color:#fff}
.ns-now-tag{position:absolute;z-index:2;left:8px;top:8px;font:600 10px/1 var(--ns-mono);letter-spacing:.16em;padding:5px 7px;border-radius:5px;background:var(--ns-accent);color:#fff;display:none}
.ns-card.is-current .ns-now-tag{display:block}
.ns-prog{position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14)}
.ns-prog i{display:block;height:100%;background:var(--ns-accent);width:0}
.ns-card-meta{padding:12px 2px 0}
.ns-card-meta small{display:block;line-height:1.5;font:600 10px/1 var(--ns-mono);letter-spacing:.16em;color:var(--ns-dim);text-transform:uppercase}
.ns-card-meta strong{display:block;font:600 15px/1.3 var(--ns-display);margin-top:7px;color:#f2f4f8}

/* notice / errors */
.ns-toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:7;background:rgba(10,12,20,.94);border:1px solid var(--ns-line-2);border-radius:999px;padding:8px 14px;font:600 12px/1 var(--ns-mono);opacity:0;transition:opacity .25s;pointer-events:none}
.ns-toast.is-on{opacity:1}
.ns-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ns-foot{margin-top:28px;font:500 11px/1.6 var(--ns-mono);color:var(--ns-dim);letter-spacing:.06em}

/* fullscreen */
.ns-stage:fullscreen{border-radius:0;aspect-ratio:auto}
.ns-stage:fullscreen .ns-caption span{font-size:clamp(18px,2.2vw,30px)}

/* responsive */
@media (max-width:1100px){.ns-main{grid-template-columns:minmax(0,1fr)}.ns-side{height:auto;min-height:0;max-height:520px}.ns-rail{grid-auto-columns:minmax(240px,calc((100% - 2*18px)/3))}}
@media (max-width:720px){.ns-side{max-height:380px}.ns-head{grid-template-columns:1fr}.ns-count{text-align:left}.ns-rail{grid-auto-columns:78%}
  .ns-volgroup .ns-vol{display:none}.ns-brand-tag{display:none}.ns-bl{display:none}.ns-time{margin:0 4px}.ns-btn{width:34px;height:34px}
  .ns-wide-btn{display:none}}
@media (prefers-reduced-motion:reduce){.ns-theater *{transition:none!important}.ns-thumb video{display:none}}
