@font-face { font-display: swap; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; src: url('/assets/fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; src: url('/assets/fonts/dm-sans-variable.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --ink: #101312;
  --panel: #171b19;
  --panel-raised: #1d2320;
  --line: #2b322e;
  --paper: #f3f1e9;
  --muted: #a3aaa2;
  --acid: #d2ff62;
  --orange: #ff8b4b;
  --blue: #7ab8ff;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', 'Avenir Next', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #596158 var(--ink); }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 14px; -webkit-font-smoothing: antialiased; }
::selection { color: var(--ink); background: var(--acid); }
button, input { font: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
svg { display: block; }
.app-shell { min-height: 100vh; }
.rail { align-items: center; background: #0d100f; border-right: 1px solid #252a27; display: flex; flex-direction: column; inset: 0 auto 0 0; padding: 21px 0 16px; position: fixed; width: 78px; z-index: 5; }
.brand-mark { display: grid; height: 42px; place-items: center; width: 42px; }
.brand-mark img { display: block; height: 42px; width: 42px; }
.rail-rule { background: #2a302c; height: 1px; margin: 23px 0 17px; width: 26px; }
.rail-link { align-items: center; color: #707a72; display: grid; height: 48px; justify-items: center; margin: 2px 0; position: relative; transition: color 180ms ease, background 180ms ease; width: 48px; }
.rail-link:hover, .rail-link.is-current { color: var(--acid); }
.rail-link.is-current::before { background: var(--acid); content: ''; height: 20px; left: -15px; position: absolute; width: 2px; }
.rail-link svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 21px; }
.rail-spacer { flex: 1; }
.rail-user { border: 1px solid #343c36; border-radius: 50%; margin-bottom: 4px; }
.main-content { margin-left: 78px; max-width: 1700px; padding: 0 clamp(28px, 6.4vw, 106px); }
.topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; height: 91px; justify-content: space-between; }
.wordmark { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.wordmark-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .075em; line-height: 1; }
.wordmark-name span { color: var(--acid); }
.wordmark-subtitle, .section-label, .service-tag, .service-count, .clock-date, .footer, .art-caption, .art-index, .art-stamp, .note-version { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.wordmark-subtitle { color: #858d84; }
.topbar-tools { align-items: center; display: flex; gap: 29px; }
.account-name { color: var(--muted); font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { background: transparent; border: 0; color: #a3aaa2; cursor: pointer; font-size: 12px; padding: 8px 0; text-underline-offset: 4px; }
.logout-button:hover { color: var(--acid); text-decoration: underline; }
.logout-button:disabled { cursor: wait; opacity: .6; }
.clock-block { align-items: flex-end; display: flex; flex-direction: column; gap: 3px; }
.clock-time { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: .045em; line-height: 1; }
.clock-date { color: #858d84; }
.search-toggle { align-items: center; background: transparent; border: 1px solid #343b36; color: var(--paper); cursor: pointer; display: grid; height: 39px; justify-items: center; transition: border-color 160ms ease, color 160ms ease; width: 39px; }
.search-toggle:hover, .search-toggle[aria-expanded='true'] { border-color: var(--acid); color: var(--acid); }
.search-toggle svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; width: 18px; }
.hero { align-items: center; display: grid; gap: clamp(26px, 6vw, 82px); grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.1fr); min-height: 385px; padding: 40px 0 50px; }
.hero-copy { max-width: 480px; padding: 5px 0; }
.section-label { color: #a6aea6; }
h1, h2, p { margin-top: 0; }
h1 { font-family: var(--font-display); font-size: clamp(56px, 6.4vw, 88px); font-weight: 600; letter-spacing: -.035em; line-height: .9; margin: 21px 0 19px; }
h1 em { color: var(--acid); font-style: normal; }
.hero-copy > p { color: #a7aea6; font-size: 14px; line-height: 1.75; margin: 0 0 25px; max-width: 350px; }
.button { align-items: center; display: inline-flex; font-size: 12px; font-weight: 700; gap: 23px; justify-content: space-between; letter-spacing: .01em; min-height: 45px; padding: 0 17px; text-decoration: none; transition: background 170ms ease, color 170ms ease, transform 170ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--acid); color: #151910; }
.button-primary:hover { background: #e0ff8b; }
.button svg, .text-link svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.hero-art { background: var(--panel-raised); border: 1px solid #323c35; height: 294px; overflow: hidden; padding: 12px; position: relative; }
.hero-art::after { border: 1px solid #39443c; content: ''; inset: 22px; pointer-events: none; position: absolute; }
.art-grid { background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px); background-size: 30px 30px; inset: 12px; opacity: .45; position: absolute; }
.art-frame { border: 1px solid #d2ff6233; inset: 34px 76px 35px 76px; position: absolute; }
.frame-corner { background: var(--acid); height: 6px; position: absolute; width: 6px; }
.corner-tl { left: -3px; top: -3px; }.corner-tr { right: -3px; top: -3px; }.corner-bl { bottom: -3px; left: -3px; }.corner-br { bottom: -3px; right: -3px; }
.screen-object { height: 190px; left: 50%; position: absolute; top: 47px; transform: translateX(-50%); width: min(44%, 220px); }
.screen-glow { background: #d2ff6213; border: 1px solid #d2ff6225; height: 150px; left: 50%; position: absolute; top: 5px; transform: translateX(-50%); width: 100%; }
.screen-beam { background: var(--acid); height: 1px; opacity: .75; position: absolute; top: 18px; transform-origin: center; width: 144%; }
.beam-a { left: -22%; transform: rotate(28deg); }.beam-b { left: -22%; top: 133px; transform: rotate(-28deg); }
.screen-face { align-items: center; background: #101513; border: 7px solid #101513; outline: 1px solid #879e5c; display: grid; height: 117px; left: 50%; place-items: center; position: absolute; top: 20px; transform: translateX(-50%); width: 147px; }
.screen-face img { height: 61px; image-rendering: auto; width: 61px; }
.screen-base { border-bottom: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 28px solid #6f7d5a; bottom: 14px; height: 0; left: calc(50% - 18px); position: absolute; width: 0; }
.screen-base::after { background: #a4b47f; bottom: -31px; content: ''; height: 3px; left: -37px; position: absolute; width: 74px; }
.art-stamp { color: var(--acid); left: 28px; position: absolute; top: 25px; }
.art-stamp span + span { color: #727d70; margin-left: 6px; }
.art-caption { bottom: 23px; color: #c3cbbd; display: flex; gap: 14px; left: 29px; position: absolute; }
.art-caption span:last-child { color: var(--acid); }
.art-index { bottom: 22px; color: #d6dbd1; position: absolute; right: 28px; }
.art-index span { color: #798276; padding: 0 3px; }
.services-section { border-top: 1px solid var(--line); padding: 28px 0 33px; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 13px; }
.section-heading h2 { font-family: var(--font-display); font-size: 29px; font-weight: 600; letter-spacing: .005em; line-height: 1.1; margin: 7px 0 0; }
.service-count { color: #a3aaa2; padding-bottom: 4px; }
.service-count span { color: var(--paper); font-size: 13px; margin-right: 5px; }
.service-list { border-top: 1px solid var(--line); padding-top: 8px; }
.service-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 17px; grid-template-columns: 40px 34px minmax(170px, 1fr) auto 30px; min-height: 77px; padding: 0 7px 0 0; text-decoration: none; transition: background 160ms ease; }
.service-row:hover { background: #1a201c; }
.service-glyph { align-items: center; display: grid; height: 40px; justify-items: center; width: 40px; }
.service-glyph svg { fill: none; height: 28px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 28px; }
.glyph-scout { color: var(--acid); }.glyph-jellyfin { color: var(--blue); }.glyph-plex { color: var(--orange); }
.service-number { color: #727b72; font-family: var(--font-display); font-size: 12px; letter-spacing: .09em; }
.service-main { display: flex; flex-direction: column; gap: 2px; }
.service-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1; }
.service-description { color: #9ba39a; font-size: 12px; }
.service-tag { color: #a3aaa2; justify-self: end; }
.service-open { align-items: center; color: #8d968c; display: grid; height: 28px; justify-items: center; width: 28px; }
.service-open svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 15px; }
.service-row:hover .service-open { color: var(--acid); }
.search-panel { background: var(--panel); border: 1px solid #303931; margin-top: 16px; padding: 16px; }
.search-panel label { color: #abb3aa; display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; margin-bottom: 9px; text-transform: uppercase; }
.search-field { align-items: center; border-bottom: 1px solid #515a51; display: flex; gap: 11px; padding: 8px 0; }
.search-field svg { fill: none; flex: 0 0 18px; height: 18px; stroke: #9fa79e; stroke-linecap: round; stroke-width: 1.7; width: 18px; }
.search-field input { background: transparent; border: 0; color: var(--paper); flex: 1; min-width: 0; outline: none; }
.search-field input::placeholder { color: #788078; }
.search-field button { background: transparent; border: 0; color: #9fa79e; cursor: pointer; font-size: 24px; line-height: 1; }
.search-empty { color: #a3aaa2; font-size: 12px; margin: 13px 0 0; }
.lower-band { align-items: stretch; border-top: 1px solid var(--line); display: grid; gap: 34px; grid-template-columns: 1.4fr .8fr; padding: 22px 0 28px; }
.invite-panel { align-items: center; background: var(--panel); border: 1px solid #313a32; display: grid; gap: 18px; grid-template-columns: 43px 1fr auto; min-height: 120px; padding: 18px 20px; }
.invite-symbol { align-items: center; border: 1px solid #47543c; color: var(--acid); display: grid; height: 43px; justify-items: center; width: 43px; }
.invite-symbol svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 22px; }
.invite-copy h2 { font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1; margin: 7px 0 5px; }
.invite-copy p { color: #9ba39b; font-size: 12px; line-height: 1.5; margin: 0; max-width: 270px; }
.text-link { align-items: center; color: var(--acid); display: inline-flex; font-size: 12px; font-weight: 600; gap: 9px; text-decoration: none; white-space: nowrap; }
.text-link:hover { color: #e5ff9c; }
.text-link svg { height: 14px; width: 14px; }
.system-note { align-items: center; display: flex; gap: 16px; padding: 0 5px; }
.note-mark { color: var(--acid); font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.note-mark span { color: #788077; }
.system-note .section-label { color: #a3aaa2; }
.system-note p { color: #c3c9c0; font-size: 12px; margin: 6px 0 0; }
.note-version { color: #8d958c; margin-left: auto; writing-mode: vertical-rl; }
.footer { align-items: center; border-top: 1px solid var(--line); color: #8d958c; display: flex; justify-content: space-between; min-height: 53px; }
.footer a { align-items: center; color: #a6aea5; display: inline-flex; gap: 6px; text-decoration: none; }.footer a:hover { color: var(--acid); }.footer a svg { fill: none; height: 12px; stroke: var(--acid); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 12px; }

@media (min-width: 1500px) {
  .main-content { margin-left: max(78px, calc((100vw - 1510px) / 2)); }
  .hero { min-height: 425px; }
  .hero-art { height: 328px; }
  .screen-object { top: 62px; }
}
@media (max-width: 1050px) {
  .main-content { padding-left: 42px; padding-right: 42px; }
  .hero { gap: 30px; grid-template-columns: minmax(275px, .85fr) minmax(330px, 1.15fr); }
  .hero-art { height: 265px; }
  .art-frame { left: 44px; right: 44px; }
  .lower-band { gap: 20px; grid-template-columns: 1fr; }
  .system-note { min-height: 55px; }
}
@media (min-width: 721px) and (max-width: 790px) {
  .hero { gap: 22px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  h1 { font-size: clamp(44px, 7.6vw, 60px); }
  .hero-art { height: 240px; }
}
@media (max-width: 720px) {
  .rail { border-bottom: 1px solid #252a27; border-right: 0; bottom: auto; flex-direction: row; height: 66px; justify-content: space-between; padding: 0 13px; right: 0; top: 0; width: 100%; }
  .brand-mark { flex: 0 0 40px; height: 40px; width: 40px; }
  .brand-mark img { height: 38px; width: 38px; }
  .rail-rule { height: 25px; margin: 0 3px; width: 1px; }
  .rail-link { height: 42px; margin: 0; width: 42px; }
  .rail-link.is-current::before { bottom: -12px; height: 2px; left: calc(50% - 10px); width: 20px; }
  .rail-spacer { display: none; }
  .rail-user { margin: 0; }
  .main-content { margin-left: 0; padding: 0 22px; }
  .topbar { height: 112px; padding-top: 46px; }
  .topbar-tools { gap: 15px; }
  .account-name { max-width: 92px; }
  .logout-button { font-size: 11px; }
  .clock-time { font-size: 18px; }
  .search-toggle { height: 35px; width: 35px; }
  .hero { gap: 25px; grid-template-columns: 1fr; padding: 35px 0 34px; }
  h1 { font-size: clamp(58px, 14vw, 80px); }
  .hero-copy > p { max-width: 390px; }
  .hero-art { height: clamp(225px, 61vw, 280px); }
  .art-frame { inset: 28px 38px; }
  .screen-object { height: 175px; top: 38px; width: 44%; }
  .screen-face { height: 103px; width: 128px; }
  .screen-face img { height: 53px; width: 53px; }
  .services-section { padding: 24px 0 26px; }
  .service-row { gap: 9px; grid-template-columns: 34px 25px minmax(100px, 1fr) 28px; min-height: 72px; }
  .service-glyph { height: 33px; width: 33px; }
  .service-glyph svg { height: 25px; width: 25px; }
  .service-number { font-size: 12px; }
  .service-name { font-size: 19px; }
  .service-description { font-size: 12px; }
  .service-tag { display: none; }
  .lower-band { padding: 17px 0 21px; }
  .invite-panel { align-items: start; gap: 12px; grid-template-columns: 37px 1fr; padding: 16px; }
  .invite-symbol { height: 37px; width: 37px; }
  .invite-copy h2 { font-size: 21px; }
  .invite-copy p { font-size: 12px; }
  .text-link { grid-column: 2; margin-top: 2px; }
  .system-note { gap: 13px; padding: 0 2px; }
  .system-note p { font-size: 12px; }
  .footer { flex-wrap: wrap; gap: 9px 14px; justify-content: space-between; padding: 13px 0; }
  .footer > span:nth-child(2) { display: none; }
}
@media (max-width: 390px) {
  .main-content { padding: 0 16px; }
  .rail { padding: 0 8px; }
  .rail-link { width: 38px; }
  .wordmark-name { font-size: 18px; }
  .topbar-tools { gap: 11px; }
  .art-caption { gap: 7px; left: 19px; }
  .art-index { right: 19px; }
  .service-row { grid-template-columns: 30px 21px minmax(100px, 1fr) 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Jellyfin-backed portal sign-in */
.login-page { background: var(--ink); min-height: 100svh; }
.login-shell { display: flex; flex-direction: column; margin: 0 auto; max-width: 1240px; min-height: 100svh; padding: 28px clamp(22px, 6vw, 84px) 23px; }
.login-brand { align-items: center; align-self: flex-start; color: inherit; display: flex; gap: 13px; text-decoration: none; }
.login-brand img { height: 48px; width: 48px; }
.login-brand > span { display: flex; flex-direction: column; gap: 2px; }
.login-brand strong { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .075em; line-height: 1; }
.login-brand strong span { color: var(--acid); }
.login-brand small { color: #858d84; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.login-content { align-items: center; display: grid; flex: 1; gap: clamp(36px, 9vw, 132px); grid-template-columns: minmax(0, 1fr) minmax(300px, 410px); margin: 26px auto; max-width: 1030px; width: 100%; }
.login-copy { max-width: 490px; }
.login-overline { color: var(--acid); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.login-copy h1 { font-size: clamp(54px, 7vw, 88px); margin-top: 19px; }
.login-copy h1 em { color: var(--acid); font-style: normal; }
.login-copy p { color: #a7aea6; font-size: 15px; line-height: 1.75; max-width: 390px; }
.login-form { background: var(--panel); border: 1px solid #303931; display: flex; flex-direction: column; padding: clamp(20px, 3vw, 32px); }
.login-form label { color: #c1c8be; font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.login-form input { background: #101513; border: 1px solid #39423b; border-radius: 0; color: var(--paper); font-size: 16px; min-height: 48px; padding: 11px 13px; width: 100%; }
.login-form input + label { margin-top: 20px; }
.login-form input:focus-visible { border-color: var(--acid); outline: 2px solid var(--acid); outline-offset: 2px; }
.login-submit { border: 0; cursor: pointer; font-size: 13px; margin-top: 22px; min-height: 49px; width: 100%; }
.login-submit:disabled { cursor: wait; opacity: .65; }
.login-error { background: #2d1c18; border: 1px solid #78452f; color: #ffc19f; font-size: 13px; line-height: 1.5; margin: 16px 0 0; padding: 11px 12px; }
.login-privacy { color: #919a90; font-size: 12px; line-height: 1.6; margin: 15px 0 0; }
.login-foot { align-items: center; border-top: 1px solid var(--line); color: #8d968c; display: flex; font-family: var(--font-display); font-size: 11px; font-weight: 600; justify-content: space-between; letter-spacing: .07em; padding-top: 15px; }
.login-foot > span:first-child { color: var(--paper); font-size: 15px; }
.login-foot > span:first-child span { color: var(--acid); }
@media (max-width: 720px) {
  .login-shell { padding: 20px 22px 18px; }
  .login-content { align-content: center; gap: 24px; grid-template-columns: 1fr; margin: 34px auto; max-width: 430px; }
  .login-copy h1 { font-size: clamp(52px, 13vw, 72px); margin-bottom: 14px; }
  .login-copy p { font-size: 14px; margin-bottom: 0; }
  .login-form { padding: 20px; }
}
@media (max-width: 390px) {
  .login-shell { padding-inline: 16px; }
  .login-content { margin-block: 24px; }
}