:root{--ink:#141219;--panel:#1d1923;--line:#3b3344;--green:#c9ef83;--text:#f5efdc;--muted:#aaa1b2}body{background:var(--ink)}main{max-width:1440px;padding-top:24px}header{border-color:#4c4256;padding-top:15px}.brand-home{font-weight:bold;font-size:14px;letter-spacing:-.4px;color:var(--text)}.brand-home span{color:var(--green);font-size:10px;letter-spacing:1px;margin-left:8px}.brand-nav{display:flex;gap:32px;align-items:center}.brand-nav>a{font:11px ui-monospace,monospace;color:var(--text)}.brand-hero{position:relative;overflow:hidden;margin:28px 0 20px;border:1px solid #4a3d57;border-radius:22px;background:#19151f}.hero-topline{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px 28px;font:9px ui-monospace,monospace;letter-spacing:2px;color:#bcaacc}.hero-topline button{color:#c7b6d5;background:#221c2c;border:1px solid #574565;border-radius:20px;padding:9px 12px;font:10px ui-monospace,monospace;letter-spacing:0}.logo-art{display:block;width:100%;height:auto;max-height:590px;overflow:visible;margin:-24px auto -22px}.hero-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:8px 35px 30px}.hero-bottom p{font-size:24px;line-height:1.1;letter-spacing:-.7px;font-weight:bold;margin:0}.hero-bottom em{font-style:normal;color:#ff99ca}.archive-cta{display:flex;align-items:center;gap:26px;background:#c9ef83;color:#17151b;font:11px ui-monospace,monospace;font-weight:bold;padding:17px 21px;border-radius:5px;box-shadow:4px 4px 0 #746d46;transform:rotate(-2deg);transition:transform .2s}.archive-cta:hover{transform:rotate(1deg) translateY(-2px);text-decoration:none}.archive-cta span{font:24px Arial}.hero-aside{font:9px/1.8 ui-monospace,monospace;letter-spacing:1px;color:#b1a2bb;text-align:right}.archive-line{padding:2px 0 18px;margin-bottom:24px}.screen{border-radius:12px;overflow:hidden}.screen-top{background:#25202d}.film-info h2{color:#f4edd8}.film-info a{font:12px ui-monospace,monospace;color:#ff9ccb}.library-heading h2{font-size:42px}.tabs button[aria-pressed=true]{color:#ff9ccb;border-color:#ff9ccb}.filters{grid-template-columns:1fr;padding-top:18px}.filters input{border-radius:7px;background:#1d1923}.card .thumb{border-radius:9px;border-color:#45394e}.card h3{margin-top:12px}.card[aria-current=true]{outline-color:#ff9ccb;border-radius:8px}.grid{gap:30px 24px}footer b{color:#ff9ccb}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.letter-bob{animation:letter-swim 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.letter-0-1 .letter-bob,.letter-1-2 .letter-bob{animation-delay:-1s}.letter-0-2 .letter-bob,.letter-1-3 .letter-bob{animation-delay:-2s}.letter-1-0 .letter-bob,.letter-1-4 .letter-bob{animation-delay:-3s}.letter-1-1 .letter-bob{animation-delay:-4s}.sun-rays{transform-box:fill-box;transform-origin:center;animation:spin 38s linear infinite}.pupil{animation:look-around 9s ease-in-out infinite}.orbit-lines{transform-origin:550px 300px;animation:orbit 18s ease-in-out infinite alternate}.star{transform-box:fill-box;transform-origin:center;animation:twinkle 7s ease-in-out infinite}.star-b{animation-delay:-3s}.star-c{animation-delay:-5s}.ribbon-tail{animation:ribbon 8s ease-in-out infinite;transform-origin:150px 450px}.motion-paused .logo-art *{animation-play-state:paused!important}@keyframes letter-swim{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(2deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes look-around{0%,20%,100%{transform:translateX(0)}35%,55%{transform:translateX(12px)}70%,85%{transform:translateX(-12px)}}@keyframes orbit{to{transform:rotate(8deg) scale(.96)}}@keyframes twinkle{50%{transform:rotate(20deg) scale(.8)}}@keyframes ribbon{50%{transform:rotate(-5deg)}}@media(max-width:800px){.hero-aside{display:none}.hero-topline{padding:18px;font-size:8px;letter-spacing:1px}.hero-bottom{padding:10px 20px 25px}.hero-bottom p{font-size:20px}.logo-art{margin:-8px auto 4px}.brand-nav .signal{display:none}.brand-home span{display:block;margin:3px 0 0}.film-info{display:flex;gap:12px}.library-heading h2{font-size:34px}}@media(max-width:480px){.hero-topline>span{max-width:130px;line-height:1.8}.hero-bottom{gap:15px;align-items:flex-start;flex-direction:column}.hero-bottom p{font-size:23px}.archive-cta{padding:12px 16px;font-size:10px;gap:32px;align-self:flex-end;margin-top:-12px}.brand-hero{margin-top:20px;border-radius:13px}.hero-topline button{font-size:9px;padding:7px 9px}.brand-nav>a{font-size:9px}.logo-art{width:112%;max-width:none;margin-left:-6%}.hero-bottom{padding-bottom:24px}.hero-aside{display:none}.archive-line>.eyebrow{font-size:8px}}@media(prefers-reduced-motion:reduce){.archive-cta{transition:none}}

/* Logo-only hero: breathing room beneath the illustration. */
.brand-hero{padding-bottom:28px}.logo-art{margin-bottom:0}.hero-topline{min-height:53px}

/* Green UI surrounds the technicolor logo. */
:root{--ink:#090e0b;--panel:#101a13;--line:#304435;--green:#9afa9c;--text:#e7eddf;--muted:#9cafa1}
header{border-color:#354d3c}.brand-hero{background:#101913;border-color:#354d3c}.hero-topline{color:#a2b8a7}.screen-top{background:#17251b}.film-info h2{color:var(--text)}.film-info a{color:var(--green)}.tabs button[aria-pressed=true]{color:var(--green);border-color:var(--green)}.filters input{background:#0d1710;border-color:#354d3c}.card .thumb{border-color:#354d3c}.card[aria-current=true]{outline-color:var(--green)}footer b{color:var(--green)}

/* A little more life: staggered lettering and gently drifting characters. */
.letter-bob{animation-duration:4.8s}
@keyframes letter-swim{0%,100%{transform:translateY(2px) rotate(-2deg) scale(1,.98)}50%{transform:translateY(-14px) rotate(3deg) scale(.99,1.025)}}
.planet{animation:planet-drift 8s ease-in-out infinite}
@keyframes planet-drift{0%,100%{transform:translate(941px,469px) rotate(-18deg)}50%{transform:translate(934px,456px) rotate(-10deg)}}
.watcher{animation:eye-drift 7s ease-in-out infinite}
@keyframes eye-drift{0%,100%{transform:translate(177px,132px) rotate(-14deg)}50%{transform:translate(181px,122px) rotate(-8deg)}}
.sun-creature{animation:sun-drift 9s ease-in-out infinite}
@keyframes sun-drift{0%,100%{transform:translate(900px,112px) rotate(-3deg)}50%{transform:translate(900px,120px) rotate(5deg)}}
.sun-rays{animation-duration:26s}
.orbit-lines{animation-duration:13s}


/* A brief double blink punctuates the slow drift. */
.eye-blink{transform-origin:0 0;animation:buddy-blink 11s ease-in-out infinite}
@keyframes buddy-blink{0%,43%,48%,51%,56%,100%{transform:scaleY(1)}45%,46%,53%,54%{transform:scaleY(.06)}}


/* Compact introduction and a clear, truthful selected-video marker. */
header{justify-content:flex-end;padding-top:10px}.brand-hero{margin-top:14px;padding:8px 0 14px}.logo-art{max-height:465px;margin:0 auto}.archive-line{padding-bottom:12px;margin-bottom:16px}#library{margin-top:32px}.film-info>.film-meta{margin-bottom:0}.film-info>#selected-description[hidden]+p{margin-top:auto;padding-top:22px}.selected-badge{display:none;position:absolute;left:10px;bottom:10px;background:#9afa9c;color:#102016;border:1px solid #c9ffca;border-radius:4px;padding:7px 10px;font:bold 10px/1 ui-monospace,monospace;letter-spacing:1px;box-shadow:0 2px 12px #0008}.selected-badge:before{content:'▶';margin-right:7px}.card[aria-current=true] .selected-badge{display:block}.card[aria-current=true]{outline:2px solid var(--green);outline-offset:7px;background:#16271a;box-shadow:0 0 22px #9afa9c12}.card[aria-current=true] h3{color:var(--green)}
@media(max-width:800px){.film-info>#selected-description[hidden]+p{padding-top:4px}.brand-hero{padding-bottom:10px}.logo-art{max-height:400px}}@media(max-width:480px){.brand-hero{margin-top:12px}.logo-art{width:100%;margin-left:0}.selected-badge{font-size:9px}#library{margin-top:26px}}

/* The upper lid closes over the stationary eyeball; lashes follow its edge. */
.eye-blink{animation:none}
.upper-eyelid{animation:lid-close 10s ease-in-out infinite}
.eyelashes{animation:lashes-close 10s ease-in-out infinite}
@keyframes lid-close{
  0%,44%,50%,100%{d:path('M-96 0Q0-92 96 0Q0-92-96 0Z')}
  46%,47%{d:path('M-96 0Q0-92 96 0Q0 90-96 0Z')}
}
@keyframes lashes-close{
  0%,44%,50%,100%{d:path('M-65-25L-79-50M-25-43L-30-71M20-44L25-72M62-27L78-52')}
  46%,47%{d:path('M-65 24L-79 49M-25 42L-30 70M20 43L25 71M62 26L78 51')}
}


/* Let the illustrated logo live directly on the page. */
.brand-hero{border:0;border-radius:0;background:transparent;overflow:visible;padding:0;margin-top:14px}
.archive-line{align-items:center}.videos-link{font:11px ui-monospace,monospace;color:var(--text);white-space:nowrap}
.archive-line{justify-content:flex-end}
.film-info>.transport{display:flex;justify-content:flex-end;margin-bottom:16px;grid-column:1/-1}.film-info>.transport button{width:38px;height:32px;border-radius:4px}
.comet-sparks{animation:comet-spark-drift 5s ease-in-out infinite;transform-origin:100px 470px}
@keyframes comet-spark-drift{0%,100%{opacity:.65;transform:translate(0,0)}50%{opacity:1;transform:translate(-4px,-3px)}}


/* Full-width player, with all video details and controls underneath. */
.cinema{display:flex;flex-direction:column}
.film-info{border-left:0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:22px 24px}
.film-info>.transport{margin-bottom:2px}
.film-info>.eyebrow,.film-info h2,.film-info>.film-meta{margin:0}
.film-info>#selected-description[hidden]+p{margin:6px 0 0;padding-top:0}
@media(max-width:480px){.film-info{padding:18px}}


/* Artwork is interactive, so repeated presses should never select its text. */
.logo-art,.logo-art *{-webkit-user-select:none;user-select:none}

/* Interactive wrappers preserve the ambient transforms beneath them. */
.logo-toy{transform-box:fill-box;transform-origin:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.logo-toy:hover{filter:brightness(1.12)}
.logo-toy:focus{outline:none}
.logo-toy:focus-visible{filter:brightness(1.12)}
.logo-toy[data-toy="space"]:focus-visible,.logo-toy[data-toy="orbit"]:focus-visible{filter:none}
.logo-focus-hint{display:none;position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;max-width:calc(100% - 32px);padding:8px 12px;border:1px solid var(--green);border-radius:5px;background:var(--ink);color:var(--green);font:11px ui-monospace,monospace;text-align:center;pointer-events:none}
.brand-hero:has(.logo-toy:focus-visible) .logo-focus-hint{display:block}

/* Full-screen opening: fit the complete artwork without changing its proportions. */
main{padding-top:0}
.brand-hero{width:calc(100vw - 32px);max-width:none;margin:0 0 0 calc(50% - 50vw + 16px);min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.brand-hero .logo-art{width:100%;height:auto;max-height:calc(100svh - 48px);margin:0;aspect-ratio:1100/610}
@media(max-width:600px){.brand-hero{width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px)}}

.brand-hero{padding-bottom:64px}
.brand-hero .logo-art{max-height:calc(100svh - 88px)}
.intro-videos{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid var(--line);border-radius:4px;color:var(--green);background:var(--ink);z-index:2}
.intro-videos:hover{border-color:var(--green);text-decoration:none}

/* Flying artwork must not expand the page or move the scroll position. */
.brand-hero{overflow:clip}

/* One continuous cosmic canvas reveals more atmosphere in tall windows. */
.brand-hero{isolation:isolate;width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px)}
.brand-hero::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:url('/assets/nebula-painted-v1.webp') center / cover no-repeat;
 opacity:.64;
 mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 82%,transparent 100%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 82%,transparent 100%);
}
.brand-hero .logo-art{width:calc(100% - 32px)}
@media(max-width:600px){.brand-hero .logo-art{width:calc(100% - 16px)}}
/* Prevent viewport-width rounding from introducing horizontal scrolling. */
body{overflow-x:clip}

/* Dracula Flow soundboard entry points. */
.soundboard-entry{position:absolute;top:22px;right:24px;z-index:3;background:#0a100cf0;color:var(--green);border:1px solid #536c4b;border-radius:4px;padding:12px 15px;font:10px ui-monospace,monospace;letter-spacing:.5px}.soundboard-entry:focus-visible,.soundboard-banner:focus-visible{outline:2px solid var(--green);outline-offset:5px}.soundboard-banner{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:32px;padding:22px 24px;border:1px solid #475b3e;background:#132010;color:var(--green)}.soundboard-banner span:first-child{font-weight:800;font-size:18px}.soundboard-banner span:last-child{font:11px ui-monospace,monospace}.soundboard-banner:hover{border-color:var(--green);text-decoration:none;background:#1c2d17}@media(max-width:600px){.soundboard-entry{top:16px;right:12px;font-size:9px;padding:10px}.soundboard-banner{align-items:flex-start;flex-direction:column;padding:20px;gap:10px}.soundboard-banner span:first-child{font-size:16px}}