/* Static editorial image treatment and lightweight navigation for SakiNagi. */
.site-header{
    position:sticky;top:0;min-height:68px;margin:0 var(--edge) -68px;padding:12px 0;
  border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;gap:clamp(18px,3vw,44px);z-index:100
}
.site-header .wordmark{font-size:24px;letter-spacing:-1px;flex:0 0 auto;color:#f4f0e5;text-shadow:0 1px 8px #0008}
.site-header .wordmark span{display:none}
.site-header nav{margin-left:auto;gap:clamp(14px,2.5vw,34px)}
.site-header nav a{position:relative;min-height:42px;font-size:12px;letter-spacing:.015em;color:#f4f0e5;text-shadow:0 1px 8px #0008}
.site-header nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:3px;height:1px;background:var(--gold)}
.site-header nav a:hover:after,.site-header nav a:focus-visible:after{left:0;right:0}
.site-header nav a:after{display:none}
.theme-toggle{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;color:#f4f0e5}
.theme-toggle:hover{background:transparent}
.theme-toggle{transform:none!important}
.theme-toggle span{display:grid;place-items:center;font-size:0;line-height:1}
.theme-toggle svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6}
.menu-toggle{border-radius:999px;padding:0 14px}
.site-header .menu-toggle{display:none}
.site-header nav a{gap:0}

.film-hero.cinematic-hero{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;isolation:isolate;overflow:hidden;
  width:100%;min-height:100svh;padding:clamp(100px,14vh,150px) var(--edge) 84px;background:#17231f;color:#f2eee3
}
.hero-backdrop{position:absolute;z-index:-2;inset:0;overflow:hidden;background:#17231f}
.hero-photo,.hero-backdrop video{position:absolute;inset:-2%;width:104%;height:104%;max-width:none;object-fit:cover;object-position:62% 48%;transform:scale(1.045)}
.hero-photo{filter:sepia(.23) saturate(.72) contrast(.94) brightness(.8)}
.hero-backdrop video{opacity:.32;mix-blend-mode:screen;filter:sepia(.15) saturate(.72) contrast(.92) brightness(.84)}
.cinematic-hero .visual-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,22,19,.84) 0%,rgba(18,27,23,.65) 34%,rgba(18,27,23,.17) 74%,rgba(18,27,23,.14) 100%),linear-gradient(0deg,rgba(13,20,17,.72),transparent 38%,rgba(13,20,17,.16));pointer-events:none}
.cinematic-hero .hero-copy{position:relative;z-index:1;width:min(820px,78vw);padding:0;align-items:flex-start}
.cinematic-hero .eyebrow{color:#e5d8b5}
.cinematic-hero .live-dot{background:#d4b982;box-shadow:0 0 15px #ddc78b88}
.cinematic-hero .hero-copy h1{font-size:clamp(76px,12vw,166px);letter-spacing:-.09em;margin:27px 0 14px;text-shadow:0 3px 34px #0005}
.cinematic-hero .hero-copy h1>span{font-size:clamp(32px,4.2vw,60px);line-height:1.34;letter-spacing:-.055em;margin-top:18px;color:#f1ecde}
.cinematic-hero .hero-copy h1 em{color:#ddc58e}
.cinematic-hero .hero-intro{color:rgba(246,241,229,.84);font-size:15px;line-height:1.85;margin:12px 0 20px}
.cinematic-hero .hero-proof{gap:8px;margin-bottom:22px}
.cinematic-hero .hero-proof li{border-color:rgba(244,238,221,.38);border-radius:999px;background:rgba(20,28,24,.28);backdrop-filter:blur(8px);color:#f3eddd;padding:7px 12px}
.cinematic-hero .hero-links{gap:15px}
.cinematic-hero .hero-links .primary{border:1px solid rgba(245,239,221,.68);border-radius:999px;background:rgba(241,235,218,.88);color:#1d2923;padding:13px 21px;box-shadow:inset 0 1px 0 #fff9,0 8px 24px #0002}
.cinematic-hero .hero-links .primary:hover{background:#fff8e9}
.cinematic-hero .hero-links .text-link{border:0;color:#f4eedf;opacity:.9}
.cinematic-hero .hero-caption{position:absolute;left:var(--edge);right:var(--edge);bottom:24px;width:auto;margin:0;padding:0;border:0;color:rgba(242,238,225,.74);font-size:9px;z-index:1}
.cinematic-hero .hero-caption button{min-height:34px;padding:0 12px;border:1px solid rgba(244,238,221,.38);border-radius:999px;color:#f4eedf;background:rgba(18,27,23,.26);backdrop-filter:blur(12px);font-size:10px}
.scroll-cue{position:absolute;right:var(--edge);bottom:76px;z-index:2;display:flex;align-items:center;gap:12px;color:rgba(244,238,221,.84);font:9px 'DM Mono',monospace;letter-spacing:.12em}
.scroll-cue b{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(244,238,221,.55);border-radius:50%;font:15px sans-serif}

/* Full-bleed image headers make each chapter change legible without stacking more paper-like rules. */
.chapter{position:relative;isolation:isolate;scroll-margin-top:82px;padding:0 var(--edge) clamp(76px,9vw,118px);overflow:hidden;background:#202a24;color:#f4f0e5;--ink:#f4f0e5;--muted:rgba(244,240,229,.68);--line:rgba(244,240,229,.2);--gold:#dfc48d;opacity:1;transform:none;filter:none}
.film-hero.cinematic-hero,.about-note,.profile-highlights{opacity:1;transform:none;filter:none}
.chapter:before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(180deg,rgba(12,18,15,.7),rgba(17,24,20,.68) 34%,rgba(17,24,20,.78)),var(--chapter-image);background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none}
.chapter .section-heading{--chapter-image:none;position:relative;isolation:isolate;align-items:flex-end;min-height:clamp(250px,40svh,460px);margin:0 calc(-1 * var(--edge)) 40px;padding:42px var(--edge);overflow:hidden;color:#f4f0e5}
.chapter .section-heading:before,.chapter .section-heading:after{display:none}
.chapter .section-heading>div,.chapter .section-heading>p{position:relative;z-index:1}
.chapter .section-heading h2{max-width:760px;color:#f4f0e5;font-size:clamp(36px,5vw,70px);line-height:1.28;margin-top:16px;text-shadow:0 2px 22px #0004}
.chapter .section-heading h2 em{color:#e1c894}
.chapter .section-heading .eyebrow{color:#e3d2a9}
.chapter .section-heading>p{max-width:310px;color:rgba(247,242,231,.82);line-height:1.85;text-shadow:0 1px 8px #0005}
.work-chapter{--chapter-image:url("https://images.unsplash.com/photo-1739296385343-ff091bca6203?auto=format&fit=crop&w=2200&q=82");--section-paper:#f1ebdf}
.tools-chapter{--chapter-image:url("https://images.unsplash.com/photo-1558975169-1d6b623fc557?auto=format&fit=crop&w=2200&q=82");background:#26382f}
.interests-chapter{--chapter-image:url("https://images.unsplash.com/photo-1608294620764-e17a03b05640?auto=format&fit=crop&w=2200&q=82");--paper:#e9e3d6}
.contact-chapter{--chapter-image:url("https://images.unsplash.com/photo-1739296385343-ff091bca6203?auto=format&fit=crop&w=2200&q=82");background:#25332c;color:#eee9dd;--ink:#eee9dd;--muted:#c4c4b7;--line:rgba(234,232,215,.2);--gold:#d2b47e}
.contact-chapter:before{background-position:center 56%}
.contact-chapter .section-heading h2 em{color:#dbc18c}
.contact-chapter .contact-links small{color:#d2b47e}
.contact-chapter .guestbook{border-color:rgba(234,232,215,.24)}
.contact-chapter .guestbook input,.contact-chapter .guestbook textarea{color:#f3eddf;background:rgba(255,255,255,.08);border-color:rgba(234,232,215,.36)}
.contact-chapter .guestbook input::placeholder,.contact-chapter .guestbook textarea::placeholder{color:rgba(244,239,225,.54)}
.contact-chapter .guestbook .primary{background:#e3d0a6;color:#25332c;border-color:#e3d0a6}
.contact-chapter .author-badge{background:#6e7a63}
.contact-chapter .empty-note,.contact-chapter .notice{border-color:rgba(234,232,215,.3);color:#d1d0c3}
.interests-chapter .rank-card{color:#26332e;--ink:#26332e;--muted:#687068;--gold:#9e7747;--line:rgba(44,57,48,.2)}
.interests-chapter .compare-panel,.interests-chapter .music-library{background:rgba(238,233,221,.9);color:#26332e;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.about-note,.profile-highlights{background-image:linear-gradient(rgba(16,24,20,.79),rgba(16,24,20,.79)),url("https://images.unsplash.com/photo-1739296385343-ff091bca6203?auto=format&fit=crop&w=2200&q=82");background-color:#202a24;background-size:cover;background-position:center;background-attachment:fixed;color:#f4f0e5;--ink:#f4f0e5;--muted:rgba(244,240,229,.72);--line:rgba(244,240,229,.2);--gold:#dfc48d}
.about-note{border:0}
.about-note p span,.profile-highlights p,.profile-highlights .highlight-label{color:rgba(244,240,229,.75)}
.profile-highlights article{background:rgba(24,34,28,.5);border-color:rgba(244,240,229,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chapter .section-heading{animation:none}

.site-footer{min-height:72px;padding:18px var(--edge) 88px;align-items:center;gap:16px;background:#1d2923;color:#e4decc;border-top:1px solid rgba(236,228,206,.16)}
.site-footer .wordmark{font-size:20px}
.site-footer .wordmark span{display:none}
.site-footer p{margin:0;font-size:10px;color:#bfc0b2}
.site-footer small{font-size:9px;color:#bfc0b2}

:root[data-theme="dark"] .site-header{background:transparent;border-color:transparent;box-shadow:none}
:root[data-theme="dark"] .site-header nav a,:root[data-theme="dark"] .theme-toggle{color:#eee9dd}
:root[data-theme="dark"] .theme-toggle{background:transparent;border-color:transparent}
:root[data-theme="dark"] .work-chapter,:root[data-theme="dark"] .interests-chapter{background:#202a24}
:root[data-theme="dark"] .contact-chapter{background:#1d2923}

@media(max-width:760px){
  .site-header{top:0;min-height:58px;margin:0 var(--edge) -58px;padding:8px 0;border-radius:0;gap:10px}
  .site-header .wordmark{font-size:21px}
  .site-header .menu-toggle{display:block;margin-left:auto;margin-right:44px;min-height:38px;padding:0 10px;font-size:11px;color:#f4f0e5;background:transparent;border:1px solid rgba(244,240,229,.45);box-shadow:none}
  .site-header .theme-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;min-width:36px;min-height:36px}
  .site-header nav{display:none;order:5;width:100%;margin:3px 0 0;padding:8px 0 0;border:0;gap:0;flex-wrap:wrap;background:rgba(20,28,24,.88)}
  .site-header nav.open{display:flex}
  .site-header nav a{width:50%;min-height:42px;padding:0 4px;font-size:12px}
  .film-hero.cinematic-hero{min-height:100svh;padding:100px var(--edge) 100px}
  .hero-photo,.hero-backdrop video{object-position:58% center;transform:scale(1.045)}
  .cinematic-hero .visual-overlay{background:linear-gradient(90deg,rgba(14,22,19,.76),rgba(18,27,23,.33)),linear-gradient(0deg,rgba(13,20,17,.75),transparent 74%)}
  .cinematic-hero .hero-copy{width:100%;max-width:620px}
  .cinematic-hero .hero-copy h1{font-size:clamp(72px,16vw,118px);margin:24px 0 10px}
  .cinematic-hero .hero-copy h1>span{font-size:clamp(30px,7vw,42px);margin-top:16px}
  .cinematic-hero .hero-intro{font-size:13px}
  .cinematic-hero .hero-proof li{font-size:9px;padding:6px 9px}
  .cinematic-hero .hero-links{align-items:flex-start;flex-direction:column;gap:4px}
  .cinematic-hero .hero-caption{bottom:18px;flex-direction:row;align-items:center;font-size:7px}
  .cinematic-hero .hero-caption button{font-size:9px;min-height:32px}
  .scroll-cue{right:var(--edge);bottom:64px;font-size:8px}
  .chapter{scroll-margin-top:72px;padding-bottom:72px}
  .chapter .section-heading{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:13px;min-height:48svh;margin-bottom:30px;padding-block:28px}
  .chapter .section-heading h2{font-size:clamp(33px,9vw,47px);margin-top:12px}
  .chapter .section-heading>p{font-size:12px;margin:0;max-width:95%}
  .contact-chapter .contact-links a,.contact-chapter .contact-links>div{border-color:rgba(234,232,215,.22)}
  .site-footer{min-height:62px;padding:14px var(--edge) 92px;flex-direction:row;align-items:center;flex-wrap:nowrap}
  .site-footer .wordmark{width:auto}
  .site-footer p{margin:0 0 0 auto}
}
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}

/* Compact, readable footer signature instead of a viewport-wide strip. */
.site-footer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;width:min(420px,calc(100% - 2 * var(--edge)));min-height:0;margin:0 auto 88px;padding:12px 18px;border:1px solid rgba(236,228,206,.2);border-top:1px solid rgba(236,228,206,.2);border-radius:999px;background:rgba(29,41,35,.88);box-sizing:border-box;gap:18px;flex-wrap:unset}
.site-footer .wordmark{width:auto;white-space:nowrap}
.site-footer p{justify-self:stretch;margin:0;text-align:center;white-space:nowrap}

/* Give wide desktop canvases room to breathe while keeping readable line lengths. */
:root{--edge:max(30px,calc((100vw - 1680px)/2))}
@media(min-width:1600px){
  .cinematic-hero .hero-copy{width:min(900px,70vw)}
  .chapter .section-heading{min-height:clamp(320px,38svh,500px)}
  .chapter .section-heading h2{max-width:900px;font-size:clamp(52px,4.1vw,82px)}
  .chapter .section-heading>p{max-width:420px;font-size:15px}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,76px)}
  .highlights-grid{gap:clamp(28px,3vw,56px)}
}
@media(min-width:761px) and (max-width:1100px){
  :root{--edge:clamp(28px,5vw,56px)}
  .site-header{gap:18px}
  .site-header nav{gap:clamp(10px,1.8vw,20px)}
  .site-header nav a{font-size:11px}
  .cinematic-hero .hero-copy{width:min(720px,78vw)}
  .chapter .section-heading{min-height:clamp(250px,34svh,360px);gap:30px}
  .chapter .section-heading h2{font-size:clamp(38px,5.2vw,58px)}
  .chapter .section-heading>p{max-width:270px;font-size:12px}
  .work-grid{gap:24px}
}
.poster-collection{margin-top:38px;min-width:0}.poster-toolbar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 0;font-size:14px}.poster-toolbar small{opacity:.6}.poster-toolbar button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:inherit;margin-left:8px;font-size:20px}.poster-toolbar button:disabled{opacity:.25}
.poster-window{position:relative;min-width:0}.poster-window:before,.poster-window:after{content:"";position:absolute;top:0;bottom:16px;width:32px;z-index:2;pointer-events:none;opacity:0}.poster-window:before{left:0;background:linear-gradient(90deg,#e9e3d6,transparent)}.poster-window:after{right:0;background:linear-gradient(270deg,#e9e3d6,transparent)}.poster-window.fade-left:before,.poster-window.fade-right:after{opacity:1}
.poster-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 3px 18px;scrollbar-width:none;scrollbar-color:transparent transparent}.poster-rail::-webkit-scrollbar{display:none}.poster-card{flex:0 0 210px;min-width:0;background:none;border:0;padding:0;text-align:left;color:inherit;scroll-snap-align:start;cursor:pointer;align-self:flex-start}.poster-picture{aspect-ratio:2/3;position:relative;overflow:hidden;background:#d5cebd;border-radius:3px;box-shadow:0 6px 16px #302b1914}.poster-picture img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.poster-card:hover img{transform:scale(1.035)}.poster-number{position:absolute;z-index:1;top:10px;left:10px;background:#22392ee8;color:#fff7e8;padding:5px 8px;font-size:12px}
.poster-progress{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;margin:-6px 0 2px}.poster-progress button{position:relative;width:26px;height:30px;min-width:26px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.poster-progress button:before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--progress-dot,#8f805f);opacity:var(--dot-opacity,.18);transform:translate(-50%,-50%) scale(.92);transition:opacity .28s ease,transform .28s ease,background .28s ease}.poster-progress button[aria-current=step]:before{width:15px;height:15px;background:transparent;border:1.5px solid var(--progress-current,#85764f);border-right-color:transparent;box-shadow:0 0 9px color-mix(in srgb,var(--progress-current,#85764f) 32%,transparent);transform:translate(-50%,-50%) rotate(-35deg);opacity:1}.poster-progress button:hover:before{transform:translate(-50%,-50%) scale(1.25)}.poster-progress button[aria-current=step]:hover:before{transform:translate(-50%,-50%) rotate(-35deg) scale(1.08)}.poster-progress button:focus-visible{outline:2px solid var(--progress-current,#85764f);outline-offset:-2px}.tools-chapter .poster-progress{--progress-dot:#d3d8bd;--progress-current:#f2ead4}
.poster-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:20px;background:linear-gradient(145deg,#d8d0bb,#b9bdac);text-align:center}.poster-placeholder span{font-size:20px;font-family:serif}.poster-placeholder small{font-size:11px;opacity:.65}.poster-card h3{font-size:16px;line-height:1.5;margin:14px 0 5px;overflow-wrap:anywhere}.poster-card p{font-size:12px;line-height:1.6;margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.poster-card:focus-visible,.poster-toolbar button:focus-visible{outline:2px solid #334c39;outline-offset:2px}
@media(max-width:760px){.poster-card{flex-basis:160px}.poster-rail{gap:16px}}
@media(prefers-reduced-motion:reduce){.poster-picture img{transition:none}}

/* Square collection sleeves, consistent across all five interest categories. */
.interests-chapter .rank-art,.interests-chapter .rank-0 .rank-art{aspect-ratio:1/1;max-height:none}
.interests-chapter .rank-art img:not(.brand-icon){object-fit:cover}
.interests-chapter .rank-art img.brand-icon{width:100%;height:100%;max-width:100%;object-fit:contain;padding:20px;background:#e0ddcf}
.poster-picture{aspect-ratio:1/1}.poster-picture>img{position:absolute;inset:0}
.poster-rail{gap:0;padding-top:28px;padding-bottom:30px;isolation:isolate}
.poster-card{position:relative;background:#e9e3d6;border-radius:5px;padding:8px;flex-basis:230px;box-shadow:-8px 0 16px #3e372019;transition:transform .25s,box-shadow .25s;z-index:1}
.poster-card+.poster-card{margin-left:-45px}
.poster-card:hover:not(:disabled),.poster-card:focus-visible{z-index:20;transform:translateY(-16px) rotate(-1deg);box-shadow:0 15px 30px #3e372030}
.poster-card h3,.poster-card p{padding-inline:4px}
.poster-card:disabled{cursor:default;border:1px dashed #b7af9c;box-shadow:none}
@media(hover:none){.poster-card+.poster-card{margin-left:0}.poster-rail{gap:12px}.poster-card:hover:not(:disabled){transform:none}}
@media(max-width:760px){.poster-card{flex-basis:174px}.poster-card+.poster-card{margin-left:0}.poster-rail{gap:12px}}
@media(prefers-reduced-motion:reduce){.poster-card{transition:none}.poster-card:hover:not(:disabled),.poster-card:focus-visible{transform:none}}

.poster-progress button[aria-current=step]:before{width:22px;height:7px;border:0;border-radius:999px;background:var(--progress-current,#85764f);box-shadow:none;transform:translate(-50%,-50%);opacity:1;transition:width .28s ease,opacity .28s ease,transform .28s ease,background .28s ease}.poster-progress button[aria-current=step]:hover:before{transform:translate(-50%,-50%) scale(1.08)}
.poster-window::before,.poster-window::after{display:none!important;content:none!important}
.poster-window{border:0!important;box-shadow:none!important;background:none!important}
.film-site .poster-rail{position:relative;scroll-snap-type:none;}
/* The shared acrylic sheet supplies the real backdrop blur for these cards. */
/* Native touch/trackpad scrolling: avoid Safari's masked scroll-layer repaint,
   overlapping hit targets, and sticky synthetic hover states during a swipe. */
html.native-touch-scroll{scroll-behavior:auto;}
.film-site .poster-rail.is-native-scroll{
 overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y pinch-zoom;
 -webkit-overflow-scrolling:touch;scroll-behavior:auto;scroll-snap-type:none;
 mask-image:none!important;-webkit-mask-image:none!important;gap:12px;
}
.film-site .poster-rail.is-native-scroll>.poster-card,
.film-site .poster-rail.is-native-scroll>.poster-card:hover,
.film-site .poster-rail.is-native-scroll>.poster-card:focus-visible{
 margin-left:0!important;transform:none;transition:none;z-index:1!important;
}
.film-site .poster-rail.is-native-scroll .poster-picture img{
 transform:none!important;transition:none!important;-webkit-user-drag:none;user-select:none;
}
.film-site .poster-rail.is-native-scroll .poster-main{touch-action:pan-x pan-y pinch-zoom;}
.film-site .poster-window:has(>.poster-rail.is-native-scroll):before,
.film-site .poster-window:has(>.poster-rail.is-native-scroll):after{display:block!important;}
@media(any-hover:hover) and (any-pointer:fine){
 .film-site .poster-rail>.poster-card:not(.poster-hover-layer),
 .film-site .poster-rail>.poster-card:not(.poster-hover-layer):hover,
 .film-site .poster-rail>.poster-card:not(.poster-hover-layer):focus-within{
  transform:translateY(0) rotate(0deg);z-index:1!important;
  transition:transform .45s cubic-bezier(.16,1,.3,1)!important;
 }
 .film-site .poster-rail>.poster-card.is-pointer-wave:not(.poster-hover-layer){
  z-index:1!important;
  transform:translate(var(--poster-wave-x,-36px),-6px) rotate(-3deg);
  transition:transform .32s cubic-bezier(.16,1,.3,1)!important;
 }
 .film-site .poster-rail .poster-picture img{transform:none;}
 .film-site .poster-rail.is-layered>.poster-card:not(.poster-hover-layer):hover{box-shadow:-8px 0 16px #3e372019;}
 .film-site .poster-rail>.poster-card.poster-hover-layer{
  position:absolute;margin:0!important;z-index:30;opacity:0;
  transform:translateY(0) rotate(0deg) scale(1);scroll-snap-align:none;
  transition:opacity .48s ease .08s,transform .52s cubic-bezier(.16,1,.3,1) .08s!important;
  box-shadow:0 10px 24px #17251e24;
 }
 .film-site .poster-rail>.poster-card.poster-hover-layer.is-shown{
  opacity:1;transform:translateY(-6px) rotate(-1deg) scale(1.01);
  /* Dwell is handled separately; reveal the front layer gently. */
  transition:opacity .5s ease,transform .45s cubic-bezier(.16,1,.3,1)!important;
 }
 @starting-style{
  .film-site .poster-rail>.poster-card.poster-hover-layer.is-shown{opacity:0;transform:translateY(0) rotate(0deg) scale(1);}
 }
}
/* The leading card has no neighbour to uncover: preserve its wave without
   shifting it through the scroll viewport's left clipping boundary. */
.film-site .poster-rail>.poster-card:first-child{--poster-wave-x:-16px;}
.film-site .poster-window:not(.fade-left) .poster-card:first-child .poster-picture{mask-image:none;-webkit-mask-image:none;}
@media(prefers-reduced-motion:reduce){
 .film-site .poster-rail>.poster-card.is-pointer-wave:not(.poster-hover-layer){transform:none!important;}
 .film-site .poster-rail>.poster-card:not(.poster-hover-layer){transition:none!important;}
 .film-site .poster-rail>.poster-card.poster-hover-layer{transition:none!important;transform:none!important;}
}
/* Mask each complete sleeve at the viewport edges, including its border and
   like button. Never mask the common parent: that blocks descendant acrylic
   backdrops from sampling the page. The card itself keeps its backdrop blur. */
.film-site .poster-window{
 --poster-fade-width:clamp(28px,5vw,64px);
 --poster-fade-left:transparent;
 --poster-fade-right:transparent;
}
.film-site .poster-window.fade-left{--poster-fade-left:transparent;}
.film-site .poster-window.fade-right{--poster-fade-right:transparent;}
.film-site .poster-window>.poster-rail>.poster-card{
 /* Inverse-rotate the gradient, so its screen-space boundary stays vertical.
    Stops are measured from the transformed sleeve's projected left edge. */
 -webkit-mask-image:linear-gradient(var(--poster-fade-angle,90deg),transparent var(--poster-fade-start,-64px),#000 calc(var(--poster-fade-start,-64px) + var(--poster-fade-width)),#000 calc(var(--poster-fade-end,2000px) - var(--poster-fade-width)),transparent var(--poster-fade-end,2000px));
 mask-image:linear-gradient(var(--poster-fade-angle,90deg),transparent var(--poster-fade-start,-64px),#000 calc(var(--poster-fade-start,-64px) + var(--poster-fade-width)),#000 calc(var(--poster-fade-end,2000px) - var(--poster-fade-width)),transparent var(--poster-fade-end,2000px));
 -webkit-mask-size:100% 100%;
 mask-size:100% 100%;
 -webkit-mask-position:0 0;
 mask-position:0 0;
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
}
/* Follow 70% of the real featured-card slot, including responsive columns.
   No transforms or masks here: material and pointer animation stay separate. */
.film-site .poster-collection .poster-window>.poster-rail>.poster-card{
 flex-basis:calc(var(--collection-card-width,230px) * .7);
 width:calc(var(--collection-card-width,230px) * .7);
 height:auto;
 align-self:flex-start;
 min-height:0;
 padding:8.4px;
}
.film-site .poster-collection .poster-window>.poster-rail>.poster-card h3{
 margin:7px 0 2.8px;
 font-size:9.8px;
 padding-inline:0;
}
.film-site .poster-collection .poster-window>.poster-rail>.poster-card p{font-size:8.4px;padding-right:29.4px;}

/* Every more-collection uses a compact two-line footer: metadata left,
   like right. Keep the shared width without a separate empty voting row. */
.film-site .poster-collection .poster-window>.poster-rail>.poster-card :is(h3,p){padding-right:33.6px;}
.film-site .poster-collection .poster-window>.poster-rail>.poster-card>.collection-heart{
 right:7px;
 bottom:8.4px;
 width:28px!important;
 min-width:28px!important;
 max-width:28px!important;
 height:28px!important;
 min-height:28px!important;
 padding:4.9px 6.3px;
 gap:3.5px;
 font-size:7.7px;
}
:root[data-theme] .film-site .poster-collection .poster-window .poster-card>.collection-heart svg{width:11.9px;height:11.9px;}
:root[data-theme] .film-site .poster-collection .poster-window .poster-card>.collection-heart>.like-count{font-size:7.7px;}
@media(hover:hover) and (pointer:fine){
 .film-site .poster-window>.poster-rail.is-layered>.poster-card+.poster-card{margin-left:-31.5px;}
}
/* One shared action style for featured and more cards; only reveal timing differs. */
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart{
 top:auto!important;left:auto!important;right:8px!important;bottom:8px!important;
 display:inline-flex!important;align-items:center;justify-content:center;
 width:auto!important;min-width:32px!important;max-width:calc(100% - 26px)!important;
 height:32px!important;min-height:32px!important;padding:0 9px!important;gap:5px!important;
 border-radius:999px!important;border:1px solid #ffffff52!important;
 background:rgba(22,30,26,.82)!important;color:#f8f3e9!important;
 box-shadow:0 2px 8px #0002!important;
 transition:opacity .18s ease,transform .18s ease!important;
}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart svg{
 width:14px;height:14px;flex:0 0 14px;stroke-width:1.6;fill:none;
}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart>.like-count{
 position:static;inset:auto;display:block!important;width:auto;height:auto;min-width:0;
 padding:0;font-size:10px;line-height:1;font-weight:500;letter-spacing:0;text-shadow:none;
}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart[aria-pressed=true]{
 color:#ffc4d0!important;border-color:#ffc4d080!important;
}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart[aria-pressed=true]>svg{fill:currentColor;}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart[aria-pressed=true]>.like-count{color:inherit;text-shadow:none;}
/* Reserve space even while hidden so revealing the pill never moves text. */
.film-site .poster-collection .poster-window>.poster-rail>.poster-card :is(h3,p){padding-right:48px;}
.film-site .music-top-five>.music-top-card :is(h4,p){padding-right:48px;}
@media(any-hover:hover) and (any-pointer:fine){
 :root[data-theme] .film-site .poster-collection .poster-window .poster-card>.collection-heart{opacity:0;pointer-events:none;transform:translateY(3px);}
 :root[data-theme] .film-site .poster-collection .poster-window .poster-card:is(:hover,:focus-within,.is-pointer-wave)>.collection-heart{opacity:1;pointer-events:auto;transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce){
 :root[data-theme] .film-site .poster-collection .poster-window .poster-card>.collection-heart{transition:none!important;transform:none!important;}
}

/* Titles use the full sleeve width; only the metadata row reserves the pill.
   Its minimum height also prevents the action overlapping a two-line title. */
:root .film-site .poster-collection .poster-window>.poster-rail>.poster-card h3{
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
 white-space:normal;overflow:hidden;text-overflow:ellipsis;
 padding-right:0;height:3em;min-height:3em;max-height:3em;line-height:1.5;
 overflow-wrap:anywhere;
}
:root .film-site .poster-collection .poster-window>.poster-rail>.poster-card p{
 box-sizing:border-box;height:32px;min-height:32px;max-height:32px;
 padding-right:42px;padding-top:4px;line-height:1.45;
}

:root .film-site .poster-collection .poster-window>.poster-rail>.poster-card p{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.music-top-heading{display:flex;align-items:baseline;gap:16px;margin:28px 0 18px;font-size:24px}.music-top-heading small{font-size:12px;font-weight:400;opacity:.65}.music-top-five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:34px}.music-top-card{position:relative;min-width:0;border:1px solid #ffffff30;border-radius:20px;background:#ffffff0b;padding:14px 14px 36px}.music-top-card>button{width:100%;text-align:left;color:inherit;padding:0}.music-top-card>button:disabled{opacity:.65}.music-top-art{aspect-ratio:1;border-radius:14px;background:#ffffff0c;overflow:hidden;display:grid;place-items:center}.music-top-art>span{font-size:32px;opacity:.4}.music-top-art img{width:100%;height:100%;object-fit:cover}.music-top-rank{display:block;margin-bottom:8px;font-size:12px;opacity:.7}.music-top-card h4{margin:12px 0 5px;font-size:15px;line-height:1.5}.music-top-card p{margin:0;font-size:12px;opacity:.6}.music-top-card.is-unassigned{border-style:dashed}.music-top-card .collection-heart{bottom:6px}@media(max-width:760px){.music-top-five{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.music-top-card{padding:10px 10px 20px}.music-top-card h4{font-size:12px}.music-top-card p{font-size:10px}}@media(max-width:420px){.music-top-five{grid-template-columns:repeat(2,minmax(0,1fr))}}
.music-top-card>.music-secret-star{position:absolute;right:12px;top:8px;width:28px;height:28px;min-width:28px;min-height:28px;padding:5px;border:0;background:none;color:var(--gold,#aa8c52);opacity:.65;cursor:pointer;text-align:center;border-radius:50%;transition:opacity .2s,transform .2s}
.music-secret-star svg{display:block;width:18px;height:18px;fill:currentColor}
.music-top-card>.music-secret-star:hover,.music-top-card>.music-secret-star:focus-visible{opacity:1;transform:scale(1.12);outline:1px solid currentColor;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.music-top-card>.music-secret-star{transition:none}}
.collection-order-extras{display:flex;align-items:center;gap:8px;flex-shrink:0}
.collection-order-extras>.music-secret-star{position:static;display:grid;place-items:center;width:28px;min-width:28px;height:28px;min-height:28px;padding:5px;border:0;border-radius:50%;background:none;color:var(--gold,#aa8c52);opacity:.65;cursor:pointer}
.collection-order-extras>.music-secret-star:hover,.collection-order-extras>.music-secret-star:focus-visible{opacity:1;outline:1px solid currentColor;outline-offset:2px}
.music-secret-slot{display:flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:48px;flex:0 0 40px}
.music-secret-slot>.music-secret-star{display:grid;place-items:center;width:40px;min-width:40px;height:44px;min-height:44px;padding:6px;border:0;border-radius:12px;background:none;opacity:1;cursor:pointer;transition:transform .2s}
.music-secret-slot .music-secret-star svg{width:27px;height:31px;filter:drop-shadow(0 2px 3px #0002)}
.music-secret-slot .music-secret-star:hover{transform:rotate(-8deg) scale(1.08)}
.music-secret-slot .music-secret-star:focus-visible{outline:2px solid var(--gold,#aa8c52);outline-offset:1px}
.interactive-map{position:relative;overflow:hidden}.interactive-map svg{height:460px;touch-action:none;cursor:grab}.interactive-map svg:active{cursor:grabbing}
.map-controls{display:flex;align-items:center;gap:8px;padding:12px;background:#22352c}.map-controls button{height:44px;min-width:44px;border:1px solid #9ea99166;border-radius:5px;padding:0 12px;color:#f2ecdb;background:#3a4c40}.map-controls button:disabled{opacity:.35}.map-controls span{font-size:12px;margin-left:auto}
.country-shape{fill:#667b66;stroke:#c0c7a7;stroke-width:.7}.province-shape{fill:#7c8d73;stroke:#dedcc0;stroke-width:.8}
.travel-marker{cursor:pointer}.marker-dot{fill:#f0c77e;stroke:#302a1d;stroke-width:1.5}.marker-line{stroke:#f3e4bc;stroke-width:.7;fill:none}.travel-marker text{fill:#fff4d7;stroke:#293b32;stroke-width:3px;paint-order:stroke;stroke-linejoin:round;font-weight:600;pointer-events:auto}.travel-marker.shared .marker-dot{fill:#89ece0}.travel-marker.selected .marker-dot,.travel-marker:focus .marker-dot{fill:#fff;stroke:#ffe0a6;stroke-width:3}.travel-marker:focus{outline:none}.map-controls button:focus-visible{outline:2px solid #fff0c9;outline-offset:2px}.map-status{padding:10px;font-size:12px}
@media(max-width:760px){.interactive-map svg{height:360px}.map-controls{gap:6px;padding:8px}}
.travel-marker{pointer-events:visiblePainted}.travel-marker text{pointer-events:auto}
.map-country-label,.map-province-label{fill:#fff1d0;stroke:#293b32;stroke-width:3px;paint-order:stroke;stroke-linejoin:round;text-anchor:middle;font-weight:700;pointer-events:none}.map-province-label{fill:#25382f;stroke:#f1e8cc;stroke-width:2px;font-weight:600}
.interactive-map{overscroll-behavior:contain;touch-action:none}.interactive-map svg{touch-action:none;overscroll-behavior:contain}.map-controls{display:none}
.country-shape.visited-region,.province-shape.visited-region{fill:#d6b97d;stroke:#f2dfad;cursor:pointer}
.visited-region:hover,.visited-region:focus{fill:#ead5a7;outline:none;stroke:#fff6db;stroke-width:1.6}
.province-shape:not(.visited-region){fill:#72836e}
.film-site .map-country-label,.film-site .map-province-label{stroke:none!important;paint-order:normal;fill:#fff3d5!important;filter:drop-shadow(0 1px 1px rgba(10,20,15,.75));font-weight:600}
.map-region-popover{position:absolute;left:18px;bottom:72px;width:min(260px,calc(100% - 36px));padding:20px;border:1px solid #b8ab8566;border-radius:20px;background:var(--surface,#202923);color:var(--text,#f3eee2);box-shadow:0 12px 35px #0004;z-index:4}
.map-region-popover p{font-size:13px;line-height:1.7;margin:12px 0}
.map-region-close{position:absolute;right:10px;top:8px;background:none;border:0;color:inherit;font-size:22px;cursor:pointer}
.map-vote-action{display:flex;align-items:center;justify-content:space-between}
.map-vote-action .collection-heart{position:static!important;transform:none!important}
.travel-chart-scroll{overflow-x:auto;padding:30px 0 12px}
.travel-bar-chart{display:flex;gap:16px;min-width:max-content;border-bottom:1px solid #b8ab8544}
.travel-chart-column{flex:1;min-width:44px;background:none;border:0;color:inherit;padding:0;text-align:center;cursor:pointer}
.travel-chart-track{height:150px;display:flex;align-items:flex-end;justify-content:center}
.travel-chart-bar{display:block;position:relative;width:22px;min-height:3px;border-radius:7px 7px 0 0;background:linear-gradient(#d6b97d,#9c8454);transition:height .35s ease}
.travel-chart-count{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:11px}
.travel-chart-name{display:block;font-size:12px;padding:12px 0;white-space:nowrap}
.resource-choice-trigger{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.resource-choice-popover{position:fixed;inset:auto;margin:0;width:min(320px,calc(100vw - 24px));padding:16px;border:1px solid #ffffff66;border-radius:20px;background:rgba(245,241,230,.96);color:#26382f;box-shadow:0 12px 42px #0003;backdrop-filter:blur(18px);font:13px/1.5 sans-serif}
.resource-choice-popover>strong{display:block;font-size:14px;margin-bottom:12px}
.resource-choice-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.resource-choice-columns>span{display:flex;flex-direction:column;gap:8px}
.resource-choice-columns small,.resource-choice-empty{font-size:11px;opacity:.65}
.resource-choice-columns a{display:block;border-radius:10px;padding:8px;background:#344f3c0a;text-decoration:none;color:inherit}
.resource-choice-columns a:hover{background:#344f3c18}
:root[data-theme=dark] .resource-choice-popover{background:rgba(35,46,39,.96);color:#eee9dc;border-color:#ffffff30}
@media(prefers-reduced-motion:no-preference){.resource-choice-popover:popover-open{animation:resource-reveal .18s ease-out}@keyframes resource-reveal{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}}
.film-site .detail-dialog .detail-title{text-align:left;text-indent:0}
.film-site .detail-dialog .detail-title-stacked{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.film-site .detail-dialog .detail-title-stacked>span,.film-site .detail-dialog .detail-title-stacked>small{display:block;margin:0;padding:0;width:100%;text-align:left;text-indent:0}
.film-site .detail-dialog .detail-title .resource-choice{display:inline;margin:0;padding:0;text-align:left}
.film-site .detail-dialog .detail-title .resource-choice-trigger{display:inline-block;margin:0!important;padding:0!important;width:auto;min-width:0;height:auto;min-height:0;border:0;vertical-align:baseline;text-align:left;text-indent:0;font:inherit;line-height:inherit;letter-spacing:inherit;box-shadow:none}
.detail-cover-trigger{float:left;position:relative;border:0;padding:0;margin:0 24px 16px 0;border-radius:20px;background:none;cursor:zoom-in;overflow:hidden;}
.detail-dialog .detail-cover-trigger .detail-album-cover{float:none;display:block;margin:0;width:150px;height:150px;}
.detail-cover-trigger>span{position:absolute;bottom:0;left:0;right:0;padding:6px;font-size:10px;color:white;background:linear-gradient(transparent,#0009);text-align:center;}
.detail-cover-trigger:focus-visible{outline:2px solid #bd9f62;outline-offset:4px;}
.cover-preview-dialog{width:min(900px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:48px 24px 16px;border:1px solid #ffffff35;border-radius:28px;background:#1b1d1de8;color:#fff;box-shadow:0 30px 100px #0008;overflow:hidden;backdrop-filter:blur(16px);}
.cover-preview-dialog::backdrop{background:#080b0dde;backdrop-filter:blur(6px);}
.cover-preview-close{position:absolute;top:10px;right:14px;width:34px;height:34px;border:1px solid #fff3;border-radius:50%;background:#ffffff12;color:#fff;font-size:26px;cursor:pointer;z-index:1;}
.cover-preview-stage{display:flex;align-items:center;justify-content:center;perspective:1100px;min-height:160px;}
.cover-preview-stage img{display:block;max-width:100%;max-height:calc(100svh - 170px);width:auto;height:auto;object-fit:contain;border-radius:0;border:0;outline:0;background:transparent;box-shadow:none;filter:none;padding:0;transition:transform .18s ease-out;will-change:transform;}
.cover-preview-dialog>p{text-align:center;font-size:13px;margin:18px 0 0;color:#eee;}
@media(max-width:600px){.detail-dialog .detail-cover-trigger .detail-album-cover{width:88px;height:88px;}.detail-cover-trigger{margin:0 14px 14px 0;}.cover-preview-dialog{padding:48px 14px 16px;border-radius:20px;}}
@media(prefers-reduced-motion:reduce){.cover-preview-stage img{transition:none;}}
.detail-dialog:has(.game-version-picker){position:fixed;}
.game-version-picker{position:absolute;top:55px;right:34px;width:220px;margin:0;padding:0;border:0;}
.game-version-picker legend{font-size:11px;opacity:.65;margin-bottom:9px;letter-spacing:.08em;}
.game-version-picker>div{display:flex;flex-wrap:wrap;gap:6px;}
.game-version-picker button{border:1px solid var(--line,#9995);border-radius:12px;background:transparent;color:inherit;padding:7px 10px;font-size:12px;cursor:pointer;transition:background .18s,transform .18s;}
.game-version-picker button[aria-pressed=true]{background:var(--accent,#b6a57c);color:#141817;border-color:transparent;}
.detail-dialog:has(.game-version-picker) .detail-title{margin-right:235px;}
.game-selected-version{clear:both;display:block;font-size:12px;opacity:.72;margin:12px 0 0;}
@media(max-width:680px){.game-version-picker{position:static;clear:both;width:auto;margin:14px 0;}.detail-dialog:has(.game-version-picker) .detail-title{margin-right:0;}}
.detail-dialog .music-detail-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
.music-detail-facts>div{min-width:0;}
.music-detail-facts dd{overflow-wrap:anywhere;}
.music-credit-stack{display:grid;gap:5px;}
.music-credit-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:7px;align-items:baseline;}
.music-credit-row>small{font-size:10px;color:var(--muted);white-space:nowrap;}
.music-associations{clear:both;padding:12px 0 14px;border-bottom:1px solid var(--line,rgba(177,168,137,.4));margin:0 0 12px;}
.music-associations h3{font:10px 'DM Mono',sans-serif;color:var(--muted,#7f8067);letter-spacing:.08em;margin:0 0 8px;}
.music-associations ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.music-associations li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;line-height:1.6;font-size:13px;}
.music-association-role{color:var(--muted,#737568);font-size:12px;}
@media(max-width:480px){.detail-dialog .music-detail-facts{column-gap:10px;}.music-detail-facts dd{font-size:12px;}.music-associations li{gap:3px 8px;}}
/* Explicit paired surface/text colors prevent photo chapters leaking white text
   onto light collection cards. Fixed text slots keep every sleeve the same size. */
.film-site .chapter .poster-card,
.film-site .chapter .music-top-card,
.film-site .chapter .collection-podium .rank-card {
  --ink:#25332c; --muted:#536158; --gold:#76592e;
  color:var(--ink); background:#eee9de; border-color:#d2ccbe;
  text-shadow:none;
}
:root[data-theme="dark"] .film-site .chapter .poster-card,
:root[data-theme="dark"] .film-site .chapter .music-top-card,
:root[data-theme="dark"] .film-site .chapter .collection-podium .rank-card {
  --ink:#f5f0e6; --muted:#c8cdc5; --gold:#e3c690;
  color:var(--ink); background:#24332c; border-color:#556259;
}
.film-site .poster-main,.film-site .music-top-card>button {
  display:block; width:100%; min-width:0; max-width:100%; color:inherit;
  background:transparent; text-align:left;
}
.film-site .poster-card,.film-site .music-top-card {overflow:hidden;box-sizing:border-box;align-self:stretch;}
.film-site .poster-card h3,.film-site .music-top-card h4 {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere; white-space:normal;
  font-size:14px; line-height:1.5; height:3em; min-height:3em;
  color:var(--ink); margin:12px 0 6px; text-shadow:none;
}
.film-site .poster-card p,.film-site .music-top-card p {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere; white-space:normal;
  font-size:12px;line-height:1.5;height:3em;min-height:3em;
  color:var(--muted);opacity:1;margin:0;text-shadow:none;
}
.film-site .poster-card {padding-bottom:44px;}
.film-site .music-top-card {padding-bottom:44px;}
.film-site .music-top-art,.film-site .poster-picture {width:100%;aspect-ratio:1;}
.film-site .music-top-art img {display:block;min-width:0;}
.film-site .music-top-art {position:relative;display:block;}
.film-site .music-top-art img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.detail-dialog .detail-album-cover {float:left;width:180px;height:180px;object-fit:cover;border-radius:20px;margin:0 26px 24px 0;box-shadow:0 12px 30px #0003;}
.detail-dialog .detail-facts,.detail-dialog .detail-description {clear:both;}
@media(max-width:600px){.detail-dialog .detail-album-cover {float:none;display:block;width:min(220px,75%);height:auto;aspect-ratio:1;margin:8px auto 24px;}}
.film-site .music-top-rank {color:var(--gold);opacity:1;}
.simple-player .lyric-lines {overscroll-behavior:contain;touch-action:pan-y;}
.simple-player .lyric-lines p {position:relative;padding-inline:24px;}
.simple-player .lyric-play-marker {position:absolute;left:0;top:0;width:22px;min-width:22px;height:100%;min-height:22px;padding:0;border:0;background:transparent;color:inherit;font-size:10px;opacity:.6;display:grid;place-items:center;}
.simple-player .lyric-play-marker:hover,.simple-player .lyric-play-marker:focus-visible {opacity:1;background:#ffffff14;}
.simple-player .lyric-lines:hover p {opacity:max(var(--lyric-opacity),.6);}
.film-site .poster-placeholder {color:#25332c;}
.film-site .chapter .collection-heart {color:#334438;background:#f4efe5;border-color:#bcb7aa;}
:root[data-theme="dark"] .film-site .chapter .collection-heart {color:#f5f0e6;background:#34473c;border-color:#657269;}
.film-site .chapter .collection-heart[aria-pressed="true"] {color:#b6314c;background:#ffe9ec;}
.film-site .chapter .collection-heart {
  width:32px;min-width:32px;max-width:32px;height:32px;min-height:32px;
  padding:7px;border-radius:50%;right:8px;bottom:8px;gap:0;
}
.film-site .chapter .collection-heart svg {width:15px;height:15px;flex:0 0 15px;}
.film-site .chapter .collection-heart span {display:none;}
@media(pointer:coarse){.film-site .chapter .collection-heart {width:40px;min-width:40px;max-width:40px;height:40px;min-height:40px;}}
.film-site .chapter:before {background-image:linear-gradient(180deg,rgba(12,18,15,.82),rgba(17,24,20,.82) 34%,rgba(17,24,20,.9)),var(--chapter-image);}
.film-site .chapter .section-heading>p {color:#eee9df;}
.film-site .music-top-heading small,.film-site .poster-toolbar small {opacity:1;color:#d6d9cf;}
@media(max-width:760px){
 .film-site .poster-card h3,.film-site .music-top-card h4 {font-size:13px;}
 .film-site .poster-card p,.film-site .music-top-card p {font-size:11px;}
}
.detail-dialog{width:min(840px,calc(100vw - 48px));max-height:calc(100svh - 48px);padding:30px 34px;scrollbar-width:thin;scrollbar-color:#aa9975 transparent;overflow-x:hidden;}
.detail-dialog .detail-album-cover{width:150px;height:150px;margin:0 24px 16px 0;}
.detail-dialog h2{font-size:clamp(24px,3vw,32px);margin-top:12px;}
.detail-dialog .detail-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;margin:16px 0;}
.detail-dialog .detail-facts>div{padding:9px 0;min-width:0;}
.detail-dialog .detail-facts dd{overflow-wrap:anywhere;line-height:1.5;}
.detail-dialog .detail-description{line-height:1.75;margin-bottom:0;}
/* Match the visible window to the viewport, not a small fixed desktop width. */
@media(min-width:761px){
 .film-site .detail-dialog{width:min(1400px,max(840px,68vw),calc(100vw - 48px));max-height:calc(100svh - 48px);padding:clamp(30px,2.2vw,46px) clamp(34px,2.6vw,54px);}
 .film-site .detail-dialog h2{font-size:clamp(32px,1.85vw,40px);}
 .film-site .detail-dialog .detail-artist{font-size:clamp(14px,.85vw,18px);}
 .film-site .detail-dialog .detail-facts{gap:0 clamp(22px,1.8vw,38px);}
 .film-site .detail-dialog .detail-facts>div{padding:clamp(9px,.65vw,14px) 0;}
 .film-site .detail-dialog .detail-facts dt{font-size:clamp(10px,.58vw,12px);}
 .film-site .detail-dialog .detail-facts dd,.film-site .detail-dialog .detail-description{font-size:clamp(14px,.8vw,17px);}
 .film-site .detail-dialog .detail-album-cover{width:clamp(150px,9vw,190px);height:clamp(150px,9vw,190px);}
}
html{scrollbar-width:thin;scrollbar-color:#a79776 #202b27;}
:root[data-theme="light"]{scrollbar-color:#a79776 #e9e3d6;}
html::-webkit-scrollbar{width:8px;}
html::-webkit-scrollbar-track{background:#202b27;}
:root[data-theme="light"]::-webkit-scrollbar-track{background:#e9e3d6;}
html::-webkit-scrollbar-thumb{background:#a79776;border:2px solid #202b27;border-radius:999px;}
:root[data-theme="light"]::-webkit-scrollbar-thumb{border-color:#e9e3d6;}
html::-webkit-scrollbar-thumb:hover{background:#c6b38b;}
.detail-dialog::-webkit-scrollbar{width:5px;}
.detail-dialog::-webkit-scrollbar-thumb{background:#aa9975;border-radius:999px;}
@media(max-width:600px){.detail-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:24px 20px;}.detail-dialog .detail-album-cover{float:left;width:88px;height:88px;margin:0 14px 14px 0;}.detail-dialog .detail-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin:12px 0;}.detail-dialog .detail-facts>div{padding:7px 0;}.detail-dialog .detail-description{font-size:13px;line-height:1.65;}}
.film-site .music-collection .poster-card h3,
.film-site .music-collection .music-top-card h4 {
 display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 overflow-wrap:normal;-webkit-line-clamp:unset;height:1.5em;min-height:1.5em;
 width:100%;max-width:100%;box-sizing:border-box;
}
.detail-resource-link{color:#89662e;text-decoration:none;border-radius:3px;transition:color .2s ease;}
.detail-resource-link span{font-size:.72em;margin-left:3px;color:#a28d60;}
.detail-resource-link:hover{color:#b48b43;text-decoration:none;}
:root[data-theme="dark"] .detail-resource-link{color:#e5c88e;}
:root[data-theme="dark"] .detail-resource-link:hover{color:#fff0cd;}
.detail-resource-link:focus-visible{outline:2px solid #a28d60;outline-offset:3px;}
.simple-player .utility-controls .mute-toggle[aria-pressed="true"]{color:#ffe1a0;background:rgba(255,213,139,.18);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,225,160,.5);}
.simple-player .utility-controls .mute-toggle svg{width:17px;height:17px;stroke-width:2.1;}
.simple-player .utility-controls .mute-toggle[aria-pressed="true"] svg{stroke:#ffe1a0;}
.travel-votes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:24px 0;}
.travel-votes article{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 48px 16px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(128,140,125,.12);}
.travel-place-name{text-align:left;color:inherit;font-size:15px;}
.travel-votes small{color:var(--muted);font-size:12px;}
.travel-votes .collection-heart{bottom:50%;transform:translateY(50%);}
.game-official-link{display:inline-block;margin:4px 0 12px;padding:8px 15px;border:1px solid rgba(164,143,99,.45);border-radius:999px;background:rgba(164,143,99,.08);font-size:13px;}
.detail-credit-list{display:flex;flex-direction:column;gap:8px}
.game-download-list{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.detail-dialog .game-detail-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.game-detail-facts>div{grid-column:auto}
.game-detail-gameplay{clear:both;margin:14px 0;font-size:13px;line-height:1.65}
.game-detail-gameplay strong{display:block;margin-bottom:5px;font-size:11px;opacity:.65}
@media(max-width:480px){.detail-dialog .game-detail-facts{column-gap:10px}.game-detail-facts dd{font-size:11px}}
.detail-title.anime-title-trilingual{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left}
.detail-title.anime-title-trilingual>span{font-size:1em;line-height:1.25}
.detail-title.anime-title-trilingual>small{display:block;margin:0;padding:0;font-size:.52em;line-height:1.45;letter-spacing:0;opacity:.75;text-align:left}
.detail-credit-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55em}
.detail-credit-row .detail-cast-role{margin:0}
.anime-format-filter{flex-shrink:0;gap:5px}
.anime-format-filter .music-chip{white-space:nowrap}
.detail-series{clear:both;margin:16px 0;padding:14px 16px;border:1px solid #b8ab8544;border-radius:16px}
.detail-series summary{cursor:pointer;font-size:13px}
.detail-series ul{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.detail-series li{display:flex;flex-direction:column;gap:4px;font-size:12px}
.detail-series li span{opacity:.7;font-size:11px}
@media(max-width:600px){.detail-series ul{grid-template-columns:1fr}}
.poster-picture img[src*="game-stable-"][src$=".png"],.music-top-art img[src*="game-stable-"][src$=".png"],.detail-album-cover[src*="game-stable-"][src$=".png"]{background:#172422;padding:12px;box-sizing:border-box;object-fit:contain!important}
.music-top-art img[src$="league-official.png"],.detail-album-cover[src$="league-official.png"]{background:radial-gradient(ellipse at center,#315359 0%,#182c30 58%,#775a2c 100%);padding:10px;box-sizing:border-box;object-fit:contain!important}
.film-site dialog.cover-preview-dialog{width:100vw!important;height:100svh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;overflow:hidden;}
.film-site .cover-preview-dialog:before,.film-site .cover-preview-dialog:after{display:none!important;}
.cover-preview-stage{width:100%;height:100%;min-height:0;}
.cover-preview-stage img{width:min(80vw,1000px);height:auto;max-width:calc(100vw - 48px);max-height:calc(100svh - 72px);object-fit:contain;border-radius:0;border:0;outline:0;background:transparent;box-shadow:none;filter:none;padding:0;}
.cover-preview-close{position:fixed;top:20px;right:20px;}
.lyric-play-marker{opacity:0!important;pointer-events:none;transition:opacity .15s;}
.lyric-lines p.lyric-selected .lyric-play-marker{opacity:1!important;pointer-events:auto;}

.section-subline{justify-content:flex-end;}
.simple-player .lyric-lines p:hover,.simple-player .lyric-lines p:focus-within{opacity:1!important;filter:brightness(1.12)!important;transform:scale(1.045);color:#fff;text-shadow:0 1px 10px #0009;animation:none;}
.simple-player .lyric-lines p{transform-origin:center;transition:opacity .2s ease,filter .2s ease,transform .2s ease;}
@media(prefers-reduced-motion:reduce){.simple-player .lyric-lines p:hover,.simple-player .lyric-lines p:focus-within{transform:none;}.simple-player .lyric-lines p{transition:none;}}
.interactive-map svg{height:auto;aspect-ratio:2/1;min-height:340px;max-height:650px;}
.province-shape{fill:none;stroke:#e6d7b6;stroke-width:.85;}
@media(max-width:600px){.interactive-map svg{min-height:300px;aspect-ratio:1.35/1;}}
.simple-player .lyric-original-group{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
.simple-player .lyric-original-group .lyric-play-marker{left:auto;right:calc(100% + .35em);top:50%;transform:translateY(-50%);width:18px;min-width:18px;height:24px;min-height:24px;border-radius:6px}
/* Temporary suit textures distinguish chapters in both themes. */
:root{--suit-paper:#eee8dc;--suit-ink:#242825;--suit-muted:#5e625d;--suit-accent:#886532;--suit-line:#282b2529;}
:root[data-theme="dark"]{--suit-paper:#151b1a;--suit-ink:#eee9dd;--suit-muted:#b2b6ad;--suit-accent:#d7b878;--suit-line:#e9e6d22b;}
.film-site .chapter,.film-site .film-hero.cinematic-hero,.film-site .about-note,.film-site .profile-highlights{background-color:var(--suit-paper)!important;color:var(--suit-ink)!important;--ink:var(--suit-ink);--muted:var(--suit-muted);--gold:var(--suit-accent);--line:var(--suit-line);}
.film-site .chapter:before{background:none!important;}
.film-site .hero-backdrop{display:none;}
.film-site .chapter .section-heading,.film-site .chapter .section-heading h2,.film-site .cinematic-hero .hero-copy h1,.film-site .cinematic-hero .hero-copy h1>span{color:var(--suit-ink)!important;text-shadow:none;}
.film-site .chapter .section-heading p,.film-site .cinematic-hero .hero-intro,.film-site .cinematic-hero .hero-caption,.film-site .scroll-cue{color:var(--suit-muted)!important;}
.film-site .cinematic-hero .hero-copy h1 em,.film-site .eyebrow,.film-site .chapter .section-heading em{color:var(--suit-accent)!important;}
.film-site .hero-proof li{background:var(--suit-paper)!important;color:var(--suit-ink)!important;border-color:var(--suit-line)!important;}
.film-site .site-header{background:color-mix(in srgb,var(--suit-paper) 90%,transparent);backdrop-filter:blur(14px);}
.film-site .site-header a,.film-site .site-header .theme-toggle,.film-site .cinematic-hero .hero-links .text-link{color:var(--suit-ink)!important;text-shadow:none;}
.film-site .section-heading{min-height:240px;}
.film-site .tabs button,.film-site .music-chip{color:var(--suit-ink);}
.film-site .tabs button[aria-pressed="true"],.film-site .music-chip[aria-pressed="true"]{background:var(--suit-ink);color:var(--suit-paper);}
#about,.about-note,.profile-highlights{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23242825%22%20opacity%3D%22.12%22%3E%E2%99%A0%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23242825%22%20opacity%3D%22.07%22%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E")!important;background-size:180px 180px!important;}
#works{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%239c4a48%22%20opacity%3D%22.12%22%3E%E2%99%A5%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%239c4a48%22%20opacity%3D%22.07%22%3E%E2%99%A5%3C%2Ftext%3E%3C%2Fsvg%3E")!important;background-size:180px 180px!important;}
#tools{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23242825%22%20opacity%3D%22.12%22%3E%E2%99%A3%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23242825%22%20opacity%3D%22.07%22%3E%E2%99%A3%3C%2Ftext%3E%3C%2Fsvg%3E")!important;background-size:180px 180px!important;}
#interests{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%239c4a48%22%20opacity%3D%22.12%22%3E%E2%99%A6%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%239c4a48%22%20opacity%3D%22.07%22%3E%E2%99%A6%3C%2Ftext%3E%3C%2Fsvg%3E")!important;background-size:180px 180px!important;}
#contact{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23886532%22%20opacity%3D%22.12%22%3E%E2%99%9B%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23886532%22%20opacity%3D%22.07%22%3E%E2%99%9B%3C%2Ftext%3E%3C%2Fsvg%3E")!important;background-size:180px 180px!important;}
:root[data-theme="dark"] #about,:root[data-theme="dark"] #works,:root[data-theme="dark"] #tools,:root[data-theme="dark"] #interests,:root[data-theme="dark"] #contact{background-blend-mode:screen;}
.film-site .site-footer{background:var(--suit-paper);color:var(--suit-ink);border-color:var(--suit-line);}
.collection-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 0;}.film-site .collection-heading-row .music-top-heading{margin:0;padding:0;}.collection-heading-row .ranking-order{margin:0;position:static;}.collection-heading-row .ranking-order>span{white-space:nowrap;}.collection-heading-row .ranking-switch{flex-shrink:0;}
:root[data-theme="dark"] #about{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23d9d4c5%22%20opacity%3D%22.1%22%3E%E2%99%A0%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23d9d4c5%22%20opacity%3D%22.06%22%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E")!important;}
:root[data-theme="dark"] #works{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23d7a69c%22%20opacity%3D%22.1%22%3E%E2%99%A5%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23d7a69c%22%20opacity%3D%22.06%22%3E%E2%99%A5%3C%2Ftext%3E%3C%2Fsvg%3E")!important;}
:root[data-theme="dark"] #tools{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23d9d4c5%22%20opacity%3D%22.1%22%3E%E2%99%A3%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23d9d4c5%22%20opacity%3D%22.06%22%3E%E2%99%A3%3C%2Ftext%3E%3C%2Fsvg%3E")!important;}
:root[data-theme="dark"] #interests{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23d7a69c%22%20opacity%3D%22.1%22%3E%E2%99%A6%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23d7a69c%22%20opacity%3D%22.06%22%3E%E2%99%A6%3C%2Ftext%3E%3C%2Fsvg%3E")!important;}
:root[data-theme="dark"] #contact{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2278%22%20font-size%3D%2248%22%20fill%3D%22%23d7b878%22%20opacity%3D%22.1%22%3E%E2%99%9B%3C%2Ftext%3E%3Ctext%20x%3D%22118%22%20y%3D%22156%22%20font-size%3D%2225%22%20fill%3D%22%23d7b878%22%20opacity%3D%22.06%22%3E%E2%99%9B%3C%2Ftext%3E%3C%2Fsvg%3E")!important;}

.interests-chapter .collection-heading-row{min-height:48px;flex-wrap:nowrap;gap:16px}
.collection-heading-row>.music-filters{flex:1;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
.collection-heading-row .music-filter-row{display:flex;gap:8px;min-width:0}
.collection-heading-row .music-filter-label{display:none}
.collection-heading-row .music-chip-group{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.collection-heading-row .music-chip{white-space:nowrap;flex-shrink:0}
.collection-heading-row .music-top-heading{white-space:nowrap;flex-shrink:0}
.collection-heading-row .ranking-order{flex-shrink:0}
.collection-heading-row .ranking-order>span{display:none}
@media(max-width:760px){.interests-chapter .collection-heading-row{gap:8px}.collection-heading-row .music-top-heading{font-size:15px}.collection-heading-row .music-chip{padding:5px 7px;font-size:11px}.collection-heading-row .ranking-switch button{padding:6px 8px;font-size:11px}}
.film-site .animated-ranking-switch{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:0;width:152px;height:48px;box-sizing:border-box;padding:4px;isolation:isolate}
.film-site .animated-ranking-switch .ranking-indicator{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/2);border-radius:999px;background:linear-gradient(135deg,#26382fee,#394c3ecc);box-shadow:inset 0 1px 0 #ffffff4d,0 3px 9px #19251d2e;z-index:-1}
.film-site .animated-ranking-switch button{min-width:0;min-height:0;padding:7px 5px;font-size:12px}
.film-site .animated-ranking-switch button[aria-pressed=true]{background:transparent;box-shadow:none;color:#f2eddf}
:root[data-theme=dark] .film-site .animated-ranking-switch .ranking-indicator{background:#ddd0ac}
:root[data-theme=dark] .film-site .animated-ranking-switch button[aria-pressed=true]{background:transparent;color:#253329;box-shadow:none}
.film-site .animated-tabs{position:relative;isolation:isolate}
.film-site .animated-tabs .tab-fluid-indicator{position:absolute;z-index:-1;border-radius:999px;background:var(--suit-ink);pointer-events:none;box-shadow:inset 0 1px 0 #ffffff30}
.film-site .animated-tabs button[aria-pressed=true]{background:transparent!important;box-shadow:none;border-color:transparent}
.collection-heart .heart-like-motion{animation:heart-like .38s ease-out}
.collection-heart .heart-unlike-motion{animation:heart-unlike .28s ease-out}
@keyframes heart-like{0%{transform:scale(.8)}45%{transform:scale(1.3)}75%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes heart-unlike{0%{transform:scale(1)}45%{transform:scale(.75)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.collection-heart svg{animation:none!important}}
/* Shared translucent surfaces; 50% tint, not 50% text opacity. */
.detail-dialog,.cover-preview-dialog{position:fixed;}
:root{--glass-tint:rgba(255,255,255,.5);--glass-edge:rgba(255,255,255,.65);--glass-shadow:0 8px 28px rgba(29,37,40,.09),inset 0 1px 0 rgba(255,255,255,.8);}
.episode-index>button{cursor:pointer;color:var(--gold);padding:0;}
.episode-index-popover{position:fixed;margin:0;width:min(440px,calc(100vw - 24px));padding:18px;border-radius:22px;border:1px solid var(--glass-edge);background:var(--glass-tint);backdrop-filter:blur(28px);color:var(--ink);box-shadow:var(--glass-shadow);}
.episode-index-popover::backdrop{background:transparent;}
.episode-index ol{list-style:none;padding:0;display:grid;gap:8px;max-height:310px;overflow:auto;}
.episode-index a{display:grid;grid-template-columns:60px 1fr 60px;gap:8px;text-decoration:none;color:inherit;padding:6px 0;border-bottom:1px solid var(--line);}
.episode-index strong{font-size:12px;font-weight:500;}
.episode-index small{font-size:10px;opacity:.7;}
:root[data-theme="dark"]{--glass-tint:rgba(30,36,43,.5);--glass-edge:rgba(255,255,255,.2);--glass-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);}
.film-site .site-header,.film-site .site-footer,.film-site .work-cover,.film-site .tabs button,.film-site .ranking-switch,.film-site .music-filters button,.film-site .dialog-close,.film-site .detail-play-button,.film-site .resource-choice-popover,.film-site .detail-dialog{background:var(--glass-tint)!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow)!important;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);}
.film-site .site-header,.film-site .site-footer{border-radius:999px;}
.film-site .site-footer{margin:12px 18px;padding:12px 24px;}
.film-site .tabs button,.film-site .music-filters button{border-radius:999px;}
.film-site .tabs button[aria-pressed=true],.film-site .music-filters button[aria-pressed=true]{background:rgba(42,65,56,.8)!important;color:#fff!important;border-color:rgba(255,255,255,.45)!important;}
:root[data-theme="dark"] .film-site .tabs button[aria-pressed=true],:root[data-theme="dark"] .film-site .music-filters button[aria-pressed=true]{background:rgba(211,192,148,.65)!important;color:#171f1b!important;}
.film-site .music-top-card,.film-site .poster-card{border-radius:20px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;}
/* Solid collection cards keep reactions readable in the lower-right corner. */
.film-site .chapter .music-top-card>.collection-heart,
.film-site .chapter .poster-card>.collection-heart{left:auto;right:8px;bottom:8px;transform:none;display:flex;align-items:center;justify-content:center;text-align:center;}
.film-site .chapter .poster-rail.is-layered .poster-card>.collection-heart{right:56px;}
@media(hover:hover){.film-site .music-top-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 16px 36px rgba(20,28,38,.16),inset 0 1px 0 rgba(255,255,255,.7)!important;}}
.film-site .poster-window:before,.film-site .poster-window:after{display:none!important;}
.film-site .poster-rail{padding-inline:30px;scroll-padding-inline:30px;mask-image:linear-gradient(to right,transparent,black 26px,black calc(100% - 26px),transparent);}
.film-site .poster-rail:has(.poster-card:first-child:hover){mask-image:none;}
.film-site .detail-dialog:has(.music-detail-facts) .detail-title{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:clamp(17px,2.5vw,32px);}
.film-site .detail-dialog:has(.music-detail-facts) .detail-title>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.film-site .detail-dialog:has(.music-detail-facts) .detail-title .resource-choice-trigger{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.film-site .detail-dialog .detail-songline{display:flex!important;justify-content:space-between;align-items:center;min-width:0;}
.film-site .detail-songline .detail-play-button{margin-left:auto;}
.film-site .detail-songline .detail-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.film-site .screen-detail-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
.film-site .screen-detail-facts .detail-credit-row{display:flex;flex-wrap:wrap;gap:4px;}
@media(max-width:600px){.film-site .screen-detail-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;}.screen-detail-facts dd{font-size:11px;}.film-site .site-footer{border-radius:24px;}}
@media(prefers-reduced-motion:reduce){.film-site .music-top-card:hover{transform:none;}}
/* Shared controls: the selection moves, while the label gently grows on hover. */
.film-site .ranking-switch button{transition:transform .4s cubic-bezier(.16,1,.3,1),color .25s;}
@media(hover:hover){.film-site .ranking-switch button:not(:disabled):hover{transform:scale(1.045);transition-duration:.15s;}}
.film-site .music-filters .tabs.music-chip-group{margin:0;padding:2px 0;gap:6px;border:0;box-shadow:none;background:none;}
.film-site .music-filters .tabs.music-chip-group button{padding:6px 11px;min-height:32px;font-size:12px;}
.film-site .music-filters .animated-tabs button[aria-pressed=true]{background:transparent!important;box-shadow:none!important;}
.film-site .music-filters .tab-fluid-indicator{background:#2a4138;}
:root[data-theme=dark] .film-site .music-filters .tab-fluid-indicator{background:#d3c094;}
:root[data-theme=dark] .film-site .collection-heading-row>.music-filters{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;}
.film-site .detail-songline .detail-play-button,.film-site .simple-controls .simple-play{background:#2b4839!important;color:#fff7e9!important;border:1px solid #668574!important;box-shadow:0 3px 10px #10251e33!important;opacity:1;}
:root[data-theme=dark] .film-site .detail-songline .detail-play-button,:root[data-theme=dark] .film-site .simple-controls .simple-play{background:#e4d3a9!important;color:#182a21!important;border-color:#fff1cd!important;}
.collection-heart .like-star-burst{position:absolute;inset:0;pointer-events:none;overflow:visible;}
.collection-heart .like-star-burst svg{position:absolute;left:50%;top:30%;width:10px;height:10px;color:#e7b459;fill:currentColor;stroke:currentColor;opacity:0;animation:like-stars .65s ease-out forwards!important;--spark-x:-23px;--spark-y:-22px;}
.collection-heart .like-star-burst svg:nth-child(2){--spark-x:0px;--spark-y:-32px;animation-delay:.03s!important;}
.collection-heart .like-star-burst svg:nth-child(3){--spark-x:23px;--spark-y:-20px;animation-delay:.06s!important;}
@keyframes like-stars{0%{opacity:0;transform:translate(-50%,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) rotate(45deg) scale(.8)}}
@media(prefers-reduced-motion:reduce){.film-site .ranking-switch button:hover{transform:none}.collection-heart .like-star-burst{display:none;}}
/* Perspective makes small pointer tilts visible without changing layout. */
.film-site .detail-dialog[open],.film-site .resource-choice-popover:popover-open,
.film-site .episode-index-popover:popover-open,.film-site .map-region-popover,
.film-site .simple-player.is-open .simple-details,.film-site .record-panel.is-open{
 /* Small popovers use their native rounded outline: no shallow raster cuts. */
 clip-path:none;
 mask-image:none;
 -webkit-mask-image:none;
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
}
.film-site .resource-choice-popover:popover-open,.film-site .episode-index-popover:popover-open{will-change:transform;}
.film-site .detail-dialog[open],.film-site .detail-dialog.portfolio-video-dialog[open]{mask-image:none;clip-path:var(--dialog-soft-outline,none);border-color:transparent;}
.film-site .dialog-curved-edge{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;overflow:visible;}
.film-site .dialog-curved-edge path{stroke:color-mix(in srgb,var(--ink,#17382b) 48%,transparent);stroke-width:2.2px;}
:root[data-theme] .film-site .detail-dialog[open]{border-color:transparent!important;}
.page-corner-optics{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0;transition:opacity .28s ease;}
.page-corner-optics>span{position:absolute;width:46%;height:46%;pointer-events:none;}
.page-corner-optics>span:nth-child(1){top:0;left:0;mask-image:radial-gradient(ellipse at 0 0,#000 12%,#000b 36%,transparent 84%);}
.page-corner-optics>span:nth-child(2){top:0;right:0;mask-image:radial-gradient(ellipse at 100% 0,#000 12%,#000b 36%,transparent 84%);}
.page-corner-optics>span:nth-child(3){bottom:0;left:0;mask-image:radial-gradient(ellipse at 0 100%,#000 12%,#000b 36%,transparent 84%);}
.page-corner-optics>span:nth-child(4){bottom:0;right:0;mask-image:radial-gradient(ellipse at 100% 100%,#000 12%,#000b 36%,transparent 84%);}
body:has(.film-site .detail-dialog[open]):not(:has(.cover-preview-dialog[open])) .page-corner-optics{opacity:1;}
body:has(.film-site .detail-dialog[open]):not(:has(.cover-preview-dialog[open])) .page-corner-optics>span:nth-child(1){backdrop-filter:url(#page-corner-rgb-1);}
body:has(.film-site .detail-dialog[open]):not(:has(.cover-preview-dialog[open])) .page-corner-optics>span:nth-child(2){backdrop-filter:url(#page-corner-rgb-2);}
body:has(.film-site .detail-dialog[open]):not(:has(.cover-preview-dialog[open])) .page-corner-optics>span:nth-child(3){backdrop-filter:url(#page-corner-rgb-3);}
body:has(.film-site .detail-dialog[open]):not(:has(.cover-preview-dialog[open])) .page-corner-optics>span:nth-child(4){backdrop-filter:url(#page-corner-rgb-4);}
.film-site .detail-dialog::backdrop{
 background:radial-gradient(ellipse at 50% 50%,#17251e65 28%,#090f15c7 100%);
 backdrop-filter:blur(2px);
}
.detail-dialog,.resource-choice-popover,.episode-index-popover,.map-region-popover,.simple-details,.record-panel{
 transform-origin:50% 50%;
 transition:transform .16s ease-out;
}
.film-site .detail-dialog{transform:translate(-50%,-50%) perspective(950px) rotateX(calc(var(--card-rotate-x,0deg) + var(--position-rotate-x,0deg))) rotateY(calc(var(--card-rotate-y,0deg) + var(--position-rotate-y,0deg)));}
.film-site .resource-choice-popover,.film-site .episode-index-popover,
.film-site .map-region-popover,.film-site .simple-details{transform:perspective(650px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg));}
.film-site .record-panel.is-open{transform:translateY(0) perspective(650px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg));}
.film-site .detail-dialog[open],.film-site .cover-preview-dialog[open],.film-site .resource-choice-popover:popover-open,.film-site .episode-index-popover:popover-open{translate:var(--dialog-drag-x,0px) var(--dialog-drag-y,0px);}
.film-site .detail-dialog[open] .dialog-curved-content{filter:var(--dialog-content-curve,none);overflow:visible;}
.film-site .cover-preview-dialog[open] .cover-preview-stage{filter:none;overflow:visible;}
.film-site .portfolio-image-stage,.film-site .portfolio-video-player,.film-site .cover-preview-stage{clip-path:var(--media-soft-outline,none);}
.film-site :fullscreen .portfolio-image-stage,.film-site :fullscreen .portfolio-video-player,.film-site .is-image-fullscreen .portfolio-image-stage{clip-path:none;}
.curved-copy{display:block;position:relative;padding-bottom:4px;overflow:visible;}
.curved-copy>span{display:inline-block;white-space:pre;transform:translateY(var(--text-bow,0px));}
.film-site .dialog-curved-content .curved-copy>span{transform:none;}
.film-site .dialog-curved-content .portfolio-image-stage,.film-site .dialog-curved-content .portfolio-video-player{clip-path:none;}
.film-site .dialog-curved-content .portfolio-video-seek{height:36px;min-height:36px;margin:0;}
/* The decoded-frame mesh and SVG seek path live beside (not inside) the
   expensive static-content displacement filter. Both inherit dialog motion. */
.dialog-live-media-plane{position:absolute;pointer-events:none;z-index:3;overflow:visible;color:var(--surface-ink,var(--ink));}
.dialog-live-media-plane[hidden]{display:none;}
.dialog-live-video,.dialog-live-seek{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.dialog-live-seek{overflow:visible;shape-rendering:geometricPrecision;}
/* If WebGL is unavailable/lost, prefer clean native video with a curved vector
   outline, never send every decoded frame back through SVG displacement. */
.film-site .dialog-curved-content .portfolio-video-player{clip-path:var(--media-soft-outline,none);}
.film-site .detail-description{overflow:visible;white-space:normal;display:block;max-height:none;-webkit-line-clamp:unset;}
.film-site .detail-dialog:has(:fullscreen) .dialog-curved-content,.film-site .detail-dialog.is-image-fullscreen .dialog-curved-content{filter:none;}
.film-site .portfolio-dialog-heading{cursor:grab;}
.film-site .detail-dialog::before,.film-site .cover-preview-dialog::before{content:"";position:absolute;top:0;left:0;right:52px;height:28px;cursor:grab;z-index:12;}
.film-site .resource-choice-popover>strong,.film-site .episode-index-popover>header{cursor:grab;}
.film-site .is-dialog-dragging{cursor:grabbing;animation-play-state:paused!important;transition:none!important;user-select:none;}
.film-site dialog:focus{outline:none;}
.device-tilt-control{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;}
.device-tilt-control button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;}
.device-tilt-control small{width:100%;line-height:1.5;}
.spatial-curve-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:12px;font-size:10px;color:var(--muted);}
.film-site .spatial-curve-options button{padding:5px 9px;min-height:26px;border:1px solid var(--line);border-radius:999px;background:transparent;color:inherit;font-size:10px;cursor:pointer;}
.film-site .spatial-curve-options button[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--gold) 20%,transparent);border-color:var(--gold);}
.spatial-curve-options button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
:root[data-spatial-curve=classic] .film-site .detail-dialog{transform:translate(-50%,-50%) perspective(650px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg));}
body[data-mobile-motion] .film-site .detail-dialog{transition:none;}
body[data-mobile-motion] .film-site .detail-dialog.portfolio-motion-dialog{--portfolio-media-height:min(66svh,calc(94svh - 266px));}
body[data-mobile-motion] .film-site .detail-dialog.portfolio-image-dialog{--portfolio-media-height:min(76svh,calc(94svh - 180px));}
body[data-mobile-motion] .film-site .cover-preview-dialog{transform:perspective(650px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg));}
body[data-mobile-motion] .film-site .dialog-close:focus:not(:focus-visible),body[data-mobile-motion] .film-site .cover-preview-close:focus:not(:focus-visible){outline:none;}
@media(prefers-reduced-motion:no-preference){
 .detail-dialog[open],.resource-choice-popover:popover-open,.episode-index-popover:popover-open,.map-region-popover,.simple-player.is-open .simple-details,.record-panel.is-open{
  /* The legacy chapter reset disables animations globally. Opt in only here. */
  animation:floating-card-breathe 6s ease-in-out infinite!important;
 }
 .detail-dialog:has(.cover-preview-dialog[open]){animation-play-state:paused;}
 @keyframes floating-card-breathe{0%,100%{translate:var(--dialog-drag-x,0px) var(--dialog-drag-y,0px)}50%{translate:var(--dialog-drag-x,0px) calc(var(--dialog-drag-y,0px) - 3px)}}
}
@media(prefers-reduced-motion:reduce){
 :root[data-spatial-curve] .film-site .detail-dialog{transform:translate(-50%,-50%);}
 .detail-dialog,.resource-choice-popover,.episode-index-popover,.map-region-popover,.simple-details,.record-panel{
  animation:none!important;transition:none!important;rotate:none!important;scale:none!important;translate:none!important;
 }
 .film-site .detail-dialog{transform:translate(-50%,-50%);}
 .film-site .resource-choice-popover,.film-site .episode-index-popover,.film-site .map-region-popover,.film-site .simple-details{transform:none;}
 .film-site .record-panel.is-open{transform:translateY(0);}
 .film-site .detail-dialog,.film-site .cover-preview-dialog,.film-site .resource-choice-popover,.film-site .episode-index-popover{translate:var(--dialog-drag-x,0px) var(--dialog-drag-y,0px)!important;}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .film-site .music-top-card,.film-site .poster-card,.film-site .work-cover{
  transition:transform .7s cubic-bezier(.16,1,.3,1) .07s,box-shadow .7s ease-out .07s,z-index 0s .75s;
 }
 .film-site .music-top-card:hover,.film-site .poster-card:hover,.film-site .work-cover:hover{
  transition-duration:.22s,.25s,0s;transition-delay:0s;
 }
 .film-site .poster-picture img{transition:transform .7s cubic-bezier(.16,1,.3,1) .07s;}
 .film-site .poster-card:hover img{transition-duration:.22s;transition-delay:0s;}
 .film-site .tabs button,.film-site .music-filters button,.film-site .collection-heart{
  transition:transform .5s cubic-bezier(.16,1,.3,1) .05s,background-color .3s,color .3s;
 }
 .film-site .tabs button:hover,.film-site .music-filters button:hover,.film-site .collection-heart:hover{transition-duration:.18s;transition-delay:0s;}
}
:root .film-site .portfolio-works .collection-scene>.portfolio-filters{display:flex;flex-direction:column;grid-template-rows:none;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;margin:14px 0 12px;gap:0;}
.film-site .portfolio-works .collection-scene>.portfolio-filters .portfolio-secondary-filters:empty{display:none;}
.film-site .project-collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-block:4px 18px;}
.film-site .project-link-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:10px 10px 18px;border:1px solid var(--surface-edge,var(--line));border-radius:22px;box-shadow:var(--surface-shadow);color:var(--surface-ink,var(--ink));background:var(--surface-fill);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);text-decoration:none;transition:transform .32s ease,border-color .25s,box-shadow .25s;}
.project-link-art{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:linear-gradient(135deg,#76877930,#bca47736);}
.project-link-art img{width:100%;height:100%;object-fit:cover;}
.project-platform{position:absolute;left:14px;top:12px;font-size:10px;letter-spacing:.12em;opacity:.7;}
.project-monogram{font-family:var(--font-editorial),serif;font-size:clamp(30px,3.4vw,52px);letter-spacing:.08em;opacity:.85;}
.project-type-icon{position:absolute;right:14px;bottom:12px;width:17px;height:17px;opacity:.55;}
.project-link-copy{padding:14px 28px 0 6px;}
.project-link-category{font-size:10px;opacity:.65;}
.film-site .project-link-copy h3{font-size:16px;line-height:1.5;margin:5px 0 4px;font-weight:500;overflow-wrap:anywhere;}
.project-link-copy p{font-size:11px;line-height:1.65;margin:0;opacity:.75;}
.project-link-arrow{position:absolute;right:16px;bottom:20px;width:17px;height:17px;opacity:.7;}
@media(any-hover:hover) and (any-pointer:fine){.film-site .project-link-card:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--gold);}}
@media(max-width:1100px){.film-site .project-collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}}
@media(max-width:760px){.film-site .project-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.project-link-copy{padding:10px 16px 0 2px;}.film-site .project-link-copy h3{font-size:13px;}.project-link-copy p{font-size:10px;}.project-link-arrow{right:10px;bottom:16px;width:14px;}.project-platform{font-size:9px;left:10px;}.project-link-art{aspect-ratio:1.2;}}
@media(prefers-reduced-motion:reduce){.film-site .project-link-card{transition:none;}.film-site .project-link-card:hover{transform:none;}}

.project-link-art.is-avatar{aspect-ratio:4/3;isolation:isolate;}
.project-link-art.is-avatar .project-avatar-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;filter:blur(18px) saturate(.85);transform:scale(1.18);opacity:.65;z-index:-2;}
.project-link-art.is-avatar::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.14);z-index:-1;pointer-events:none;}
:root[data-theme=dark] .project-link-art.is-avatar::after{background:rgba(0,0,0,.18);}
.project-link-art.is-avatar .project-avatar-portrait{width:58%;height:auto;aspect-ratio:1;object-fit:contain;padding:0;border-radius:12px;box-shadow:0 8px 28px #00000022;}
.film-site .detail-dialog.floating-info-dialog{width:min(520px,calc(100vw - 28px));max-height:86svh;padding:28px;overflow-x:hidden;box-sizing:border-box}
.floating-info-dialog .portfolio-dialog-heading{position:relative;min-height:40px;margin:0 0 18px;cursor:grab}
.floating-info-dialog .portfolio-dialog-heading:active{cursor:grabbing}
.film-site .floating-info-dialog h2{font-size:24px;line-height:1.4;margin:0 42px 0 0;overflow-wrap:anywhere}
.film-site .detail-dialog.floating-info-dialog .portfolio-dialog-heading .dialog-close{position:absolute;inset:-4px 0 auto auto;margin:0}
.info-dialog-kicker{font:10px/1.5 system-ui,sans-serif;letter-spacing:.12em;color:var(--muted);margin:0 0 14px}
.info-dialog-qr{display:grid;place-items:center;width:min(240px,100%);aspect-ratio:1;margin:12px auto 16px;border-radius:16px;background:#fff;overflow:hidden;color:#26382e}
.info-dialog-qr img{display:block;width:100%;height:100%;object-fit:contain}
.info-dialog-qr-placeholder{width:min(240px,100%);aspect-ratio:1;margin:12px auto 16px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.info-dialog-qr-placeholder svg{width:48px;height:48px;opacity:.5}.info-dialog-qr-placeholder span{font-size:12px}
.info-dialog-note{font-size:12px;line-height:1.8;color:var(--muted);text-align:center;margin:12px 0}
.info-dialog-account{font-size:16px;text-align:center;overflow-wrap:anywhere;margin:12px 0}
.info-dialog-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 8px}
.info-dialog-actions>a,.info-dialog-actions>button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink);background:color-mix(in srgb,var(--paper) 85%,transparent);text-decoration:none}
.info-dialog-actions>a:hover,.info-dialog-actions>button:hover{border-color:var(--gold)}
.info-dialog-actions :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.info-dialog-link{display:block;text-align:center;font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:var(--muted);margin-top:10px}
.info-project-cover{display:block;width:100%;max-height:38svh;object-fit:contain;border-radius:14px;margin:4px 0 18px}
.info-project-description{font-size:14px;line-height:1.85;color:var(--muted)}
@media(max-width:600px){.film-site .detail-dialog.floating-info-dialog{padding:24px 20px}.film-site .floating-info-dialog h2{font-size:22px}.info-dialog-qr,.info-dialog-qr-placeholder{width:min(220px,100%)}}
.portfolio-works{min-width:0}.portfolio-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:30px 0 18px}.portfolio-section-heading h3{margin:0;font-size:20px;font-weight:600}.portfolio-section-heading small{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}.portfolio-more-heading{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}.portfolio-video-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 16px;margin:20px 0}.portfolio-video-card{min-width:0;border:1px solid var(--line);border-radius:20px;padding:8px;background:var(--suit-paper,var(--paper));color:var(--ink)}.portfolio-video-open{width:100%;padding:0;text-align:left;display:block}.portfolio-video-art{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:14px;background:#25382f}.portfolio-video-art img{width:100%;height:100%;object-fit:cover;object-position:center;}.portfolio-video-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#14251ecf;color:#fff;border:1px solid #fff9;box-shadow:0 2px 12px #0005;padding-left:3px}.portfolio-video-number{position:absolute;left:10px;top:8px;color:#fff;font:13px system-ui;text-shadow:0 1px 4px #000;background:#15241eba;border-radius:6px;padding:2px 6px}.portfolio-video-duration{position:absolute;right:8px;bottom:7px;background:#15241edb;color:#fff;font:11px system-ui;padding:2px 6px;border-radius:5px}.portfolio-video-card h3{font-size:14px;font-weight:600;margin:12px 4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portfolio-video-kind{display:block;font-size:10px;color:var(--muted);margin:0 4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portfolio-empty{padding:36px 20px;border:1px dashed var(--line);border-radius:20px;color:var(--muted)}.portfolio-video-dialog h2{margin:14px 42px 18px 0;font-size:clamp(20px,3vw,32px)}.portfolio-video-player{display:block;width:100%;max-height:55svh;aspect-ratio:16/9;object-fit:contain;background:#101512;border-radius:16px}.portfolio-video-dialog .portfolio-video-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.portfolio-video-facts dt{font-size:11px;color:var(--muted)}.portfolio-video-facts dd{margin:5px 0;font-size:13px}.portfolio-works>.tabs{margin-bottom:20px}
.portfolio-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin:20px 0;align-items:start}.portfolio-mini-card{border-radius:14px;padding:6px}.portfolio-mini-card .portfolio-video-art{border-radius:9px}.portfolio-mini-card h3{font-size:11px;margin:8px 2px 4px}.portfolio-mini-card .portfolio-video-kind{font-size:9px;margin:0 2px 3px}.portfolio-mini-card .portfolio-video-play{width:28px;height:28px;font-size:10px}.portfolio-mini-card .portfolio-video-duration{font-size:9px;right:5px;bottom:5px;padding:2px 4px}.portfolio-mini-grid:not(:has(>.portfolio-mini-card:nth-child(6))){grid-template-columns:repeat(5,minmax(0,140px))}.portfolio-expand{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px auto 0;border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:12px;background:var(--suit-paper,var(--paper));color:var(--ink)}.portfolio-expand span{font-size:18px}.portfolio-expand small{color:var(--muted);font-size:10px}.portfolio-full-image{display:block;width:100%;height:auto;max-height:64svh;object-fit:contain;border-radius:12px}.portfolio-video-open:focus-visible,.portfolio-expand:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(hover:hover) and (pointer:fine){html:not(.native-touch-scroll) .portfolio-video-card{transition:transform .45s cubic-bezier(.16,1,.3,1)}html:not(.native-touch-scroll) .portfolio-video-card:hover{transform:translateY(-5px);transition-duration:.15s}}
@media(max-width:1000px){.portfolio-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.portfolio-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.portfolio-section-heading{gap:12px}.portfolio-section-heading h3{font-size:18px}.portfolio-video-dialog .portfolio-video-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-video-player{max-height:48svh}}
@media(prefers-reduced-motion:reduce){.portfolio-video-card{transition:none!important;transform:none!important}}
@media(max-width:600px){.portfolio-mini-grid,.portfolio-mini-grid:not(:has(>.portfolio-mini-card:nth-child(6))){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.portfolio-full-image{max-height:60svh}}
.portfolio-works .collection-heading-row{flex-wrap:nowrap;align-items:center;min-height:48px}.portfolio-works .portfolio-filters{display:flex;flex-direction:column;gap:4px;min-width:0}.portfolio-works .portfolio-filters .music-filter-row{justify-content:flex-start}.film-site .portfolio-works .portfolio-filters .music-chip-group{margin:0;border:0;padding:2px 0;box-shadow:none;background:none;justify-content:flex-start;width:100%}.portfolio-works .poster-picture{aspect-ratio:1}.portfolio-works .music-top-card h4,.portfolio-works .music-top-card p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.portfolio-works .collection-heading-row{flex-wrap:wrap;gap:10px}.portfolio-works .collection-heading-row>.portfolio-filters{order:3;flex-basis:100%}.portfolio-works .collection-heading-row>.ranking-order{margin-left:auto}}
.portfolio-works .portfolio-filters{align-items:stretch}
/* Fit the panel to the media, not the media to a fixed 16:9 frame. */
.film-site .detail-dialog.portfolio-video-dialog{--portfolio-pad:24px;--portfolio-media-height:min(56svh,calc(92svh - 220px));box-sizing:border-box;width:min(calc(100vw - 32px),calc(var(--portfolio-media-height) * var(--portfolio-ratio) + var(--portfolio-pad) * 2 + 2px));max-width:1400px;max-height:92svh;padding:var(--portfolio-pad);overflow-x:hidden;clip-path:none}
.film-site .portfolio-video-dialog h2{font-size:clamp(18px,2vw,26px);line-height:1.35;margin:10px 42px 16px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-site .portfolio-video-dialog .portfolio-video-player{width:100%;height:auto;max-height:none;aspect-ratio:auto var(--portfolio-ratio);object-fit:contain;object-position:center;background:transparent;border-radius:12px}
.portfolio-image-stage{width:100%;aspect-ratio:var(--portfolio-ratio);position:relative;overflow:hidden;border-radius:12px;background:transparent;touch-action:pan-y}
.portfolio-image-stage.is-zoomed{cursor:grab;touch-action:none}.portfolio-image-stage.is-zoomed:active{cursor:grabbing}
.portfolio-image-stage{touch-action:none;user-select:none;cursor:zoom-in;}
.film-site .portfolio-image-viewer .portfolio-image-stage .portfolio-full-image{transition:none;}
.film-site .portfolio-image-stage .portfolio-full-image{display:block;width:100%;height:100%;max-height:none;object-fit:contain;transform-origin:center;transition:transform .12s ease-out;border-radius:0}
.portfolio-image-controls{display:flex;justify-content:center;gap:8px;margin:8px 0}.portfolio-image-controls button{min-width:36px;min-height:32px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px}.portfolio-image-controls button:disabled{opacity:.35}
.film-site .portfolio-video-dialog .portfolio-video-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0;gap:10px}
.film-site .portfolio-video-dialog .detail-description{font-size:12px;line-height:1.65;margin:10px 0 0}
@media(max-width:600px){.film-site .detail-dialog.portfolio-video-dialog{--portfolio-pad:16px;max-height:94svh;width:min(calc(100vw - 24px),calc(var(--portfolio-media-height) * var(--portfolio-ratio) + var(--portfolio-pad) * 2 + 2px))}}
@media(prefers-reduced-motion:reduce){.portfolio-image-stage .portfolio-full-image{transition:none}}
.film-site .detail-dialog.portfolio-video-dialog.portfolio-portrait{--portfolio-pad:24px;--portfolio-media-height:min(66svh,calc(94svh - 248px));max-height:94svh}
.portfolio-media-player{position:relative;outline:none;border-radius:12px}
.portfolio-media-player:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.portfolio-video-controls{padding:5px 0 0;color:var(--ink)}
.film-site .portfolio-video-controls .portfolio-video-seek{display:block;box-sizing:border-box;width:100%;height:12px;min-height:0;margin:0;padding:0;border:0;background:transparent;accent-color:var(--ink);cursor:pointer}
.portfolio-video-control-row{display:flex;align-items:center;gap:6px;min-height:34px}
.film-site .portfolio-video-control-row button{display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:6px;border-radius:8px;color:inherit;flex:none}
.portfolio-video-control-row button:hover{background:var(--line)}
.portfolio-video-control-row svg{width:19px;height:19px;stroke-width:1.8}
.portfolio-video-volume{position:relative;flex:none;}
.portfolio-video-volume-panel{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;display:flex;flex-direction:column;align-items:center;gap:6px;width:48px;padding:12px 8px 10px;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:var(--paper,#ede7d9);color:var(--ink,#26382e);box-shadow:0 6px 24px #0003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;z-index:4;}
.portfolio-video-volume:hover .portfolio-video-volume-panel,.portfolio-video-volume:focus-within .portfolio-video-volume-panel,.portfolio-video-volume.is-volume-open .portfolio-video-volume-panel{opacity:1;visibility:visible;pointer-events:auto;}
.portfolio-volume-slider{position:relative;width:24px;height:108px;flex:none;}
.portfolio-volume-rail{position:absolute;left:10px;top:6px;bottom:6px;width:4px;border-radius:999px;background:color-mix(in srgb,currentColor 22%,transparent);}
.portfolio-volume-rail i{position:absolute;bottom:0;left:0;width:100%;height:var(--volume-level);border-radius:inherit;background:currentColor;}
.portfolio-volume-rail b{position:absolute;bottom:var(--volume-level);left:50%;transform:translate(-50%,50%);width:12px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 1px 3px #0003;}
.film-site .portfolio-video-volume-panel .portfolio-volume-slider input{position:absolute;inset:0;writing-mode:vertical-lr;direction:rtl;width:24px;height:108px;min-width:0;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;opacity:0;cursor:pointer;}
.portfolio-volume-slider:has(input:focus-visible){outline:1px solid currentColor;outline-offset:3px;border-radius:8px;}
.portfolio-video-volume-panel>span{font:11px system-ui;min-width:32px;text-align:center;font-variant-numeric:tabular-nums;}
.portfolio-media-player:fullscreen .portfolio-video-volume-panel{background:#19241e;color:#fff;border-color:#fff4;}
.portfolio-video-time{font:10px/1.3 system-ui;white-space:nowrap;font-variant-numeric:tabular-nums}
.portfolio-video-speed{margin-left:auto;position:relative;}
.film-site .portfolio-video-control-row .portfolio-speed-trigger{width:auto;min-width:42px;height:32px;padding:4px 2px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;font:500 12px system-ui;letter-spacing:.02em;}
.portfolio-speed-menu{position:absolute;right:0;bottom:100%;margin:0;width:96px;box-sizing:border-box;padding:6px;border:1px solid var(--line,#bbb8a9);border-radius:14px;background:var(--paper,#ede7d9);color:var(--ink,#26382e);box-shadow:0 6px 24px #0003;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;z-index:4;}
.is-speed-open .portfolio-speed-menu{opacity:1;visibility:visible;pointer-events:auto;}
.film-site .portfolio-speed-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px;min-height:32px;padding:6px 10px;border:0;border-radius:8px;font:12px system-ui;background:transparent;color:inherit;}
.film-site .portfolio-speed-menu button:hover,.film-site .portfolio-speed-menu button:focus-visible{background:color-mix(in srgb,currentColor 9%,transparent);outline:none;}
.film-site .portfolio-speed-menu button[aria-checked=true]{background:color-mix(in srgb,currentColor 12%,transparent);font-weight:600;}
.portfolio-media-player:fullscreen .portfolio-speed-menu{background:#19241e;color:#fff;border-color:#fff4;}
.portfolio-video-speed .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-video-speed option{color:#17241d;background:#fff}
.portfolio-video-message{font-size:12px;margin:4px 0}
.film-site .portfolio-portrait h2{font-size:22px;margin:6px 42px 10px 0}
.film-site .portfolio-portrait .portfolio-video-facts{margin:8px 0;gap:6px}
.film-site .portfolio-portrait .detail-description{font-size:11px;line-height:1.5;margin-top:6px}
.portfolio-media-player:fullscreen{width:100vw;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:16px;box-sizing:border-box;background:#080d0a;border-radius:0;color:#fff}
.film-site .portfolio-media-player:fullscreen .portfolio-video-player{width:100%;height:calc(100% - 60px);min-height:0;object-fit:contain;aspect-ratio:auto;border-radius:0;flex:1}
.portfolio-media-player:fullscreen .portfolio-video-controls{color:#fff;flex:none}
.portfolio-media-player:fullscreen .portfolio-video-seek{accent-color:#fff}
@media(max-width:600px){.film-site .detail-dialog.portfolio-video-dialog.portfolio-portrait{--portfolio-pad:14px;--portfolio-media-height:min(68svh,calc(94svh - 200px))}.portfolio-video-control-row{gap:3px}.portfolio-video-time{font-size:9px}}
/* One compact title row; dimensions are known before the panel is opened. */
.film-site .detail-dialog.portfolio-video-dialog{--portfolio-pad:20px;--portfolio-media-height:min(66svh,calc(94svh - 220px));max-height:94svh;transition-property:opacity,transform}
.film-site .detail-dialog.portfolio-motion-dialog.portfolio-portrait{--portfolio-pad:20px;--portfolio-media-height:min(70svh,calc(94svh - 226px))}
.portfolio-dialog-heading{display:flex;align-items:center;gap:12px;margin:0 0 10px;min-height:32px}
.film-site .portfolio-video-dialog .portfolio-dialog-heading h2{flex:1;min-width:0;margin:0;font-size:clamp(18px,2vw,24px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-site .portfolio-dialog-heading .dialog-close{position:static;inset:auto;flex:none;width:32px;height:32px;min-height:32px;padding:0;font-size:23px;line-height:1}
.film-site .detail-dialog.portfolio-video-dialog.portfolio-image-dialog{--portfolio-media-height:min(78svh,calc(94svh - 134px));--portfolio-pad:16px;max-width:1600px}
.film-site .portfolio-image-dialog .portfolio-image-controls{margin:8px 0 0}
.portfolio-image-viewer{position:relative;}
.film-site .portfolio-image-viewer .portfolio-image-controls{position:absolute;right:8px;bottom:8px;margin:0;z-index:3;}
.film-site .portfolio-image-controls .portfolio-image-fullscreen{display:grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:7px;border:1px solid #fff5;border-radius:8px;background:#101a14a6;color:#fff;box-shadow:0 2px 8px #0002;}
.portfolio-image-fullscreen svg{width:20px;height:20px;stroke-width:1.8;}
.film-site .portfolio-image-viewer:fullscreen .portfolio-image-controls,.film-site .is-image-fullscreen .portfolio-image-controls{right:20px;bottom:20px;}
.portfolio-image-viewer:fullscreen,.is-image-fullscreen .portfolio-image-viewer{width:100vw;height:100svh;display:flex;flex-direction:column;padding:12px;box-sizing:border-box;background:#080d0a;color:#fff;}
.film-site .portfolio-image-viewer:fullscreen .portfolio-image-stage,.film-site .is-image-fullscreen .portfolio-image-stage{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;border-radius:0;background:transparent;}
.portfolio-image-viewer:fullscreen .portfolio-image-controls,.is-image-fullscreen .portfolio-image-controls{flex:none;color:#fff;}
.portfolio-image-viewer:fullscreen .portfolio-image-controls button,.is-image-fullscreen .portfolio-image-controls button{border-color:#ffffff50;}
.film-site .detail-dialog.portfolio-image-dialog.is-image-fullscreen[open]{width:100vw;height:100svh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;clip-path:none;animation:none!important;transform:translate(-50%,-50%);}
.is-image-fullscreen .portfolio-dialog-heading,.is-image-fullscreen .detail-description,.is-image-fullscreen .dialog-curved-edge{display:none;}
.film-site .portfolio-video-dialog .portfolio-video-facts{margin:10px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.film-site .detail-dialog.portfolio-video-dialog.portfolio-motion-dialog{--portfolio-pad:14px;--portfolio-media-height:min(70svh,calc(94svh - 206px))}.film-site .detail-dialog.portfolio-video-dialog.portfolio-image-dialog{--portfolio-pad:12px;--portfolio-media-height:min(80svh,calc(94svh - 126px))}.portfolio-dialog-heading{gap:8px;margin-bottom:8px}}
.portfolio-video-stage{position:relative;isolation:isolate;border-radius:12px;overflow:hidden;}
.portfolio-poster-composite{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:#101512;}
.portfolio-poster-composite img{position:absolute;width:100%;height:100%;max-width:none;border-radius:0;}
.portfolio-poster-backdrop{inset:0;object-fit:cover;transform:scale(1.16);filter:blur(36px) brightness(.38);}
.portfolio-poster-sharp{inset:0;object-fit:contain;}
.portfolio-media-player:fullscreen .portfolio-video-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:0;}
.film-site .portfolio-media-player:fullscreen .portfolio-video-stage .portfolio-video-player{height:100%;flex:none;}
.portfolio-works .collection-heading-row{justify-content:flex-start;}
.portfolio-works .portfolio-filters{display:grid;grid-template-rows:minmax(44px,auto) minmax(36px,auto);gap:6px;width:100%;margin:0 0 12px;}
.portfolio-works .portfolio-main-filters,.portfolio-works .portfolio-secondary-filters{display:flex;min-width:0;margin:0;align-items:center;}
.portfolio-works .portfolio-main-filters{min-height:44px;}
.portfolio-works .portfolio-secondary-filters{min-height:36px;}
.film-site .portfolio-works .portfolio-filters .portfolio-secondary-filters .music-chip-group button{font-size:10px;padding:5px 10px;min-height:28px;}
.portfolio-works .portfolio-secondary-filters .music-chip-group{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.portfolio-works .portfolio-secondary-filters .music-chip-group button{flex-shrink:0;}
.portfolio-works .music-top-art img,.portfolio-works .poster-picture img{filter:brightness(.9);}
.portfolio-works [data-tool-icon="graphic-design"] :is(.music-top-art,.poster-picture){background:transparent!important;}
.portfolio-works [data-tool-icon="graphic-design"] .poster-picture:has(>img:not([hidden]))>.poster-placeholder{visibility:hidden;}
.portfolio-works [data-tool-icon="graphic-design"] :is(.music-top-art,.poster-picture) img{filter:none;}
.portfolio-poster-sharp{filter:brightness(.9);}
.portfolio-works .music-top-card h4,.portfolio-works .poster-card h3{font-weight:600;}
.portfolio-works .music-top-card p,.portfolio-works .poster-card p{color:var(--muted);font-size:12px;}
.portfolio-works .collection-heading-row>.portfolio-filters{flex:1;min-width:0;width:auto;}
.portfolio-works .collection-heading-row>.ranking-order{flex:none;margin-left:auto;}
.portfolio-video-seek-control{position:relative;height:28px;isolation:isolate;}
.portfolio-video-seek-rail{position:absolute;left:6px;right:6px;top:50%;height:3px;transform:translateY(-50%);border-radius:999px;background:color-mix(in srgb,currentColor 24%,transparent);pointer-events:none;filter:blur(.3px);}
.portfolio-video-seek-rail i{display:block;width:var(--seek-progress);height:100%;border-radius:inherit;background:currentColor;}
.portfolio-video-seek-rail b{position:absolute;left:var(--seek-progress);top:50%;width:11px;height:11px;transform:translate(-50%,-50%);border-radius:50%;background:currentColor;}
.film-site .portfolio-video-seek-control .portfolio-video-seek{position:absolute;inset:0;width:100%;height:28px;min-height:28px;margin:0;opacity:0;cursor:pointer;}
.portfolio-video-seek-control:has(input:focus-visible){outline:2px solid currentColor;outline-offset:2px;border-radius:8px;}
.portfolio-project-card{position:relative;padding:10px 10px 54px}.portfolio-project-link{display:block;color:inherit;text-decoration:none}.portfolio-project-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 4px}.portfolio-project-visit{display:inline-block;font-size:12px;margin:6px 4px}.portfolio-project-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:14px}
.portfolio-project-card button.portfolio-project-link{display:block;width:100%;padding:0;background:none;border:0;text-align:left;color:inherit;cursor:pointer}

/* More-collection sleeves use one square artwork frame. */
.film-site .portfolio-works .poster-collection .poster-picture{aspect-ratio:1 / 1;}
.film-site #works.work-chapter{position:relative;isolation:isolate;background-image:none!important;background-blend-mode:normal;}
#works>.portfolio-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;background:#263f34 url('/assets/works-tree/background.webp') center/cover no-repeat;}
.portfolio-backdrop-frame{position:absolute;left:50%;top:50%;width:max(107%,calc(100vh * 1.44));height:107%;transform:translate(-50%,-50%);}
.portfolio-backdrop canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;backface-visibility:hidden;}
.portfolio-backdrop[data-active=true] canvas{will-change:transform;}
.portfolio-backdrop[data-ready=true] canvas{opacity:1;}
.portfolio-backdrop-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,246,239,.8),rgba(247,246,239,.55) 35%,rgba(247,246,239,.62) 70%,rgba(247,246,239,.85));}
:root[data-theme=dark] .portfolio-backdrop-shade{background:linear-gradient(180deg,rgba(13,24,20,.85),rgba(13,24,20,.56) 35%,rgba(13,24,20,.65) 70%,rgba(13,24,20,.88));}
@media(prefers-reduced-motion:reduce){.portfolio-backdrop canvas{will-change:auto;}}
.film-site #tools.tools-chapter{position:relative;isolation:isolate;background-image:none!important;background-blend-mode:normal;}
#tools>.tools-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;background:#718eaa url('/assets/tools-cathedral/background.webp') center/cover no-repeat;}
.film-site #interests.interests-chapter{position:relative;isolation:isolate;background-image:none!important;background-blend-mode:normal;}
#interests>.interests-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;background:#8ba7bd url('/assets/interests-stargates/background.webp') center/cover no-repeat;}
.film-site #contact.contact-chapter{position:relative;isolation:isolate;background-image:none!important;background-blend-mode:normal;}
#contact>.contact-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;background:#c4b5a4 url('/assets/contact-desk/background.webp') center/cover no-repeat;}
/* Keep the existing compact footer; filing information has no glass container. */
:root[data-theme] .film-site footer.site-footer.site-footer--filing{flex-direction:row;gap:0;width:max-content;max-width:calc(100% - 24px);padding:8px 0;}
.film-site footer.site-footer .site-filing.site-filing-line{font-size:clamp(10px,2.5vw,12px);line-height:1.6;white-space:nowrap;}
.film-site footer.site-footer .site-filing-line small{font:inherit;color:inherit;}
.film-site footer.site-footer .site-filing a{display:inline;max-width:100%;padding:0;color:var(--surface-muted);font:inherit;text-decoration:none!important;border:0;background:none;box-shadow:none;transition:color .18s ease,text-shadow .18s ease;}
.film-site footer.site-footer .site-filing a:is(:hover,:focus-visible){color:var(--surface-ink);text-shadow:0 0 8px color-mix(in srgb,currentColor 25%,transparent);text-decoration:none!important;}
.film-site footer.site-footer .site-filing a:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:5px;}
@media(prefers-reduced-motion:reduce){.film-site footer.site-footer .site-filing a{transition:none;}}
/* A compact closing note, not another full-height chapter. */
.film-site #contact.contact-compact{min-height:0;padding-block:40px 32px}
#contact .contact-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
#contact .contact-heading .eyebrow{font-size:9px}
#contact .contact-heading h2{font-size:32px;line-height:1.2;margin:7px 0 0;font-weight:500;letter-spacing:-.04em}
#contact .contact-heading>p{font-size:12px;color:var(--muted);margin:0}
#contact .contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
#contact .contact-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
#contact .contact-links>a,#contact .contact-links>div{position:relative;display:flex;flex-direction:column;gap:4px;grid-column:auto;min-width:0;min-height:88px;padding:12px 30px 12px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 50%,transparent);text-decoration:none;color:var(--ink);transition:border-color .2s ease,background .2s ease}
#contact .contact-links>a:hover{border-color:var(--gold);background:color-mix(in srgb,var(--paper) 80%,transparent)}
#contact .contact-links>a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#contact .contact-links small{font-size:8px;line-height:1.3}
#contact .contact-links strong{font-size:15px;font-weight:500;line-height:1.4}
#contact .contact-links .contact-account{font:11px/1.4 system-ui,sans-serif;color:var(--muted);overflow-wrap:anywhere}
#contact .contact-links .contact-arrow{position:absolute;right:12px;top:50%;font-size:14px;transform:translateY(-50%)}
#contact .contact-account-pending{border-style:dashed}
#contact .contact-links>.contact-entry{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;min-height:76px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 50%,transparent);color:var(--ink);text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease}
#contact .contact-links>.contact-entry:hover{border-color:var(--gold);background:color-mix(in srgb,var(--paper) 80%,transparent)}
#contact .contact-links>.contact-entry:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#contact .guestbook{width:100%;min-width:0;max-width:none;margin:0;padding:0;border:0}
#contact .guestbook .panel-heading{gap:12px;align-items:center}
#contact .guestbook .panel-heading .eyebrow{display:none}
#contact .guestbook .panel-heading h3{font-size:19px;margin:0;line-height:1.4}
#contact .guestbook .panel-heading .text-link{min-height:32px;display:inline-flex;align-items:center;font-size:12px}
#contact .guestbook>.muted{font-size:12px;line-height:1.6;margin:7px 0 10px}
#contact .guestbook label{font-size:11px;margin:0 0 7px}
#contact .guestbook textarea{min-height:72px;height:72px;padding:10px 12px;font-size:13px;border-radius:12px;line-height:1.6}
#contact .guestbook .form-bottom{margin-top:8px;align-items:center;gap:10px}
#contact .guestbook .primary{font-size:12px;min-height:36px;padding:8px 14px}
#contact .guestbook .privacy-note{font-size:10px;line-height:1.55;margin:9px 0 0}
#contact .guestbook .empty-note,#contact .guestbook .notice{padding:10px 12px;margin-top:10px;font-size:11px;border-radius:12px}
#contact .guestbook .message-list{margin-top:14px;max-height:240px;overflow-y:auto;overscroll-behavior:contain}
#contact .guestbook .message-list article{padding:12px 0}
@media(max-width:760px){
 .film-site #contact.contact-compact{padding-block:30px 24px}
 #contact .contact-heading{align-items:flex-start;gap:12px;margin-bottom:18px}
 #contact .contact-heading h2{font-size:28px}
 #contact .contact-heading>p{font-size:11px;max-width:150px;line-height:1.6}
 #contact .contact-layout{grid-template-columns:1fr;gap:22px}
 #contact .contact-links{gap:8px}
 #contact .contact-links>a,#contact .contact-links>div{min-height:84px;padding:11px 24px 11px 12px}
 #contact .contact-links .contact-account{font-size:10px}
 #contact .guestbook{border-top:1px solid var(--line);padding-top:18px}
}
@media(prefers-reduced-motion:reduce){#contact .contact-links>a{transition:none}}
/* Keep real layout slots stable; the fluid indicator and hover motion still animate. */
html{scrollbar-gutter:stable}
.film-site #works,.film-site #tools,.film-site #interests{overflow-anchor:none}
.film-site #interests>.tabs,.film-site .portfolio-works>.tabs,.film-site #tools>.tabs{min-height:48px;align-items:center}
.film-site #interests>.tabs button,.film-site .portfolio-works>.tabs button{box-sizing:border-box;min-width:64px;min-height:44px;flex-shrink:0}
.film-site .music-top-card h4,.film-site .poster-card h3{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow-wrap:normal;-webkit-line-clamp:unset;height:1.5em;min-height:1.5em;max-width:100%;box-sizing:border-box}
.film-site .music-top-card p,.film-site .poster-card p{height:3em;min-height:3em}
.film-site .music-top-card .music-top-rank{height:18px;line-height:18px}
.film-site #interests .collection-heading-row,.film-site #tools .collection-heading-row{height:48px;min-height:48px;margin-block:20px;box-sizing:border-box}
.film-site #interests .collection-heading-row>.ranking-order{margin-left:auto}
.film-site .portfolio-works .collection-heading-row{min-height:102px;margin-block:20px;align-items:center}
.film-site .portfolio-works .portfolio-filters{grid-template-rows:44px 36px;gap:6px;margin:0;align-content:center}
.film-site .portfolio-works .portfolio-main-filters .music-chip-group{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.film-site .portfolio-works .portfolio-main-filters .music-chip-group button{flex-shrink:0}
.film-site .poster-main>p:empty:after{content:'\00a0'}
@media(max-width:760px){
 .film-site #interests>.tabs,.film-site .portfolio-works>.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .film-site #interests>.tabs button,.film-site .portfolio-works>.tabs button{min-width:58px}
 .film-site #interests .collection-heading-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 36px;height:90px;min-height:90px;gap:6px 8px}
 .film-site #interests .collection-heading-row>.music-top-heading{grid-column:1;grid-row:1}
 .film-site #interests .collection-heading-row>.ranking-order,.film-site #interests .collection-heading-row>.collection-order-extras{grid-column:2;grid-row:1;margin:0;justify-self:end}
 .film-site #interests .collection-heading-row>.music-filters{grid-column:1/-1;grid-row:2;width:100%;margin:0}
}
@media(max-width:600px){
 .film-site .portfolio-works .collection-heading-row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:48px 86px;min-height:144px;gap:10px}
 .film-site .portfolio-works .collection-heading-row>.ranking-order{grid-row:1;justify-self:end;margin:0}
 .film-site .portfolio-works .collection-heading-row>.portfolio-filters{grid-row:2;width:100%;margin:0}
}
/* Shared responsive surfaces: CSS pixels, native gestures and explicit contrast. */
html{ -webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px; }
body{min-width:0;}
.film-site .site-header{display:flex;align-items:center;flex-wrap:nowrap;padding:10px 18px;gap:16px;box-sizing:border-box;max-width:calc(100% - 24px);margin-inline:auto;color:var(--ink);}
.film-site .site-header .wordmark,.film-site .site-header nav a{color:var(--ink);text-shadow:none;}
.film-site .site-header button.theme-mode-control{display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;box-sizing:border-box;aspect-ratio:1;padding:10px;border:1px solid var(--line);border-radius:50%!important;clip-path:none!important;mask-image:none!important;-webkit-mask-image:none!important;background:transparent;color:var(--ink);cursor:pointer;}
.theme-mode-control svg{width:18px;height:18px;pointer-events:none;}
.theme-mode-control select{min-height:44px;width:100px;max-width:100%;padding:8px 6px;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer;}
.theme-mode-control select option{background:var(--paper);color:var(--ink);}
.film-site{--acrylic-panel:rgba(247,244,235,.8);}
:root[data-theme=dark] .film-site{--acrylic-panel:rgba(24,34,29,.8);}
.film-site .detail-dialog{background:var(--acrylic-panel)!important;--ink:#20352a;--muted:#536358;color:var(--ink);backdrop-filter:blur(28px) saturate(140%)!important;-webkit-backdrop-filter:blur(28px) saturate(140%)!important;}
:root[data-theme=dark] .film-site .detail-dialog{--ink:#f6f1e5;--muted:#c1cbbf;color:var(--ink);}
.film-site .detail-dialog::backdrop{background:rgba(10,17,15,.64);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}
.film-site .detail-dialog :is(p,dd,.resource-choice-trigger){color:inherit;}
.film-site .detail-dialog :is(dt,.info-dialog-note,.detail-artist){color:var(--muted);opacity:1;}
.film-site .detail-dialog>.dialog-close,.film-site .detail-dialog .portfolio-dialog-heading .dialog-close{z-index:30;pointer-events:auto;}
.film-site .detail-facts dd{line-height:1.7;overflow-wrap:anywhere;}
.film-site .dialog-curved-content{position:relative;}
.film-site .resource-choice-popover{background:var(--acrylic-panel)!important;color:var(--ink);max-width:calc(100vw - 24px);max-height:70dvh;overflow:auto;}
.film-site .music-top-card{padding:12px;display:block;}
.film-site .music-top-card>.collection-heart{position:absolute!important;left:auto!important;right:8px!important;bottom:10px!important;width:44px;min-width:44px;max-width:none;height:44px;min-height:44px;margin:0!important;transform:none!important;}
.film-site .music-top-card>button:not(.collection-heart){padding-bottom:0!important;}
.film-site .music-top-card p{height:1.6em;min-height:1.6em;line-height:1.6;opacity:1;color:var(--muted);padding-right:42px;}
.film-site .music-top-card h4{margin:10px 0 4px;padding-right:42px;}
.film-site .music-top-five{margin-bottom:18px;}
.film-site .poster-collection{margin-top:18px;}
.film-site .poster-card p{height:1.6em;min-height:1.6em;opacity:1;color:var(--muted);}
.film-site .poster-rail.is-native-scroll{contain:layout style;overscroll-behavior-x:contain;scroll-snap-type:none!important;}
.film-site .poster-rail.is-native-scroll .poster-card{content-visibility:auto;contain-intrinsic-size:180px 300px;box-shadow:none!important;}
.film-site .poster-rail.is-native-scroll .poster-picture{mask:none!important;-webkit-mask:none!important;filter:none!important;box-shadow:none!important;}
.lyric-source-note{font-size:11px;line-height:1.6;color:var(--muted);margin:6px 0;text-align:center;}
.screen-destinations{clear:both;border-block:1px solid var(--line);padding:14px 0;margin-block:12px;}
.screen-destinations h3{font-size:14px;margin:0 0 10px;}
.screen-destinations>div,.screen-destinations details>div{display:flex;flex-wrap:wrap;gap:8px;}
.screen-destinations a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:13px;text-decoration:none;}
.screen-destinations details{margin-top:12px;font-size:12px;}
.screen-destinations details p{line-height:1.7;color:var(--muted)!important;}
@media(max-width:900px){
 .film-site .site-header{position:sticky;top:max(6px,env(safe-area-inset-top));display:grid;grid-template-columns:minmax(0,1fr) auto auto;min-height:60px;margin:6px 12px -66px;padding:8px 12px;gap:8px;border-radius:22px;}
 .film-site .site-header .wordmark{font-size:20px;min-width:0;}
 .film-site .site-header .menu-toggle{position:static;display:block;grid-column:2;grid-row:1;margin:0;min-height:44px;padding:6px 10px;color:var(--ink);border:1px solid var(--line);}
 .film-site .theme-mode-control{grid-column:3;grid-row:1;gap:3px;}
 .film-site .theme-mode-control select{width:88px;}
 .film-site .site-header nav{grid-column:1/-1;display:none;width:100%;margin:0;padding:8px 0 0;gap:4px;background:transparent;}
 .film-site .site-header nav.open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
 .film-site .site-header nav a{width:auto;min-height:44px;justify-content:center;padding:8px 4px;}
 .film-site .detail-dialog{max-width:calc(100vw - 24px)!important;width:calc(100vw - 24px);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:28px 18px;overflow:auto;overscroll-behavior:contain;}
 .film-site .detail-dialog :is(.detail-facts,.screen-detail-facts,.game-detail-facts,.music-detail-facts){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;}
 .film-site .detail-dialog dd{font-size:13px;}
 .film-site .detail-dialog .detail-title{white-space:normal!important;flex-wrap:wrap!important;padding-right:30px;line-height:1.5;}
 .film-site .detail-dialog .detail-title>span,.film-site .detail-dialog .detail-title .resource-choice-trigger{white-space:normal!important;overflow-wrap:anywhere;}
 .film-site .chapter{padding-inline:max(16px,env(safe-area-inset-left));}
 .film-site .poster-rail.is-native-scroll{gap:12px;padding:8px 4px 16px;mask:none!important;-webkit-mask:none!important;}
 .film-site .poster-rail.is-native-scroll>.poster-card{flex-basis:clamp(145px,42vw,210px);}
 .film-site .poster-window:has(.is-native-scroll)::before,.film-site .poster-window:has(.is-native-scroll)::after{display:none!important;}
}
@media(max-width:360px){.film-site .site-header{gap:4px;padding-inline:8px}.film-site .site-header .wordmark{font-size:17px}}
@media(any-pointer:coarse){
 .film-site .poster-card,.film-site .music-top-card,.film-site .poster-picture img{will-change:auto!important;}
 .film-site .music-top-card:hover{transform:none!important;}
 .film-site .poster-progress button{min-height:32px;min-width:32px;}
}
/* Keep the song browser above, never covering lyrics or playback controls. */
.film-site .simple-player.record-panel{overflow:visible;background:#18221e;color:#faf5e9;backdrop-filter:none;-webkit-backdrop-filter:none;}
.film-site .simple-player.record-panel::before,.film-site .simple-player.record-panel::after{border-radius:inherit;inset:1px;transform:none;}
.film-site .simple-player.record-panel::after{background:linear-gradient(180deg,rgba(8,17,12,.78),rgba(8,17,12,.86));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.film-site .simple-player.record-panel.has-queue{height:min(420px,42dvh);max-height:min(420px,42dvh);aspect-ratio:auto;}
.film-site .simple-player .simple-details{inset:auto 0 calc(100% + 12px);width:100%;height:min(34dvh,360px);max-height:calc(100dvh - min(420px,42dvh) - 170px);margin:0;box-sizing:border-box;background:#18221ef5;border-radius:22px;overflow:hidden;}
.film-site .simple-details .music-queue{flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;margin:0;padding:0;list-style:none;}
.film-site .simple-details .music-queue li,.film-site .simple-details .music-queue button>span{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;}
.film-site .simple-details .music-queue button{width:100%;text-align:left;min-height:50px;border:0;border-radius:12px;padding:10px 12px;background:transparent;color:#faf5e9;}
.film-site .simple-details .music-queue button[aria-current=true]{background:#ffffff16;box-shadow:inset 3px 0 #dbc795;}
.film-site .simple-details .music-queue small{display:block;color:#c0c9c1;margin-top:4px;}
.film-site .simple-details .queue-scope{flex:none;margin:0 2px 8px;font-size:11px;color:#c0c9c1;}
.film-site .simple-player .player-action-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.film-site .simple-player :is(.transport-controls,.utility-controls) button{min-width:32px;min-height:36px;color:#faf5e9;}
.film-site .simple-player .utility-controls .mode-toggle{min-width:38px;gap:3px;}
.film-site .simple-player .utility-controls button small{font-size:9px;color:#e6e8df;}
.film-site .simple-player .translation-toggle[aria-pressed=true]{background:#faf5e91c;color:#f3d99c;}
.film-site .simple-player .lyric-source-note{font-size:10px;line-height:1.4;color:#dce2d8;position:absolute;top:62px;bottom:auto;left:14px;right:14px;margin:0;}
.film-site .simple-player>.simple-lyrics{margin:26px 12px 78px;}
.film-site .simple-player .lyric-lines{padding-block:clamp(45px,8dvh,90px);}
.film-site .simple-player .simple-song small{color:#dce2d8;}
@media(max-width:360px){.film-site .simple-player :is(.transport-controls,.utility-controls) button{min-width:29px}.film-site .simple-player .utility-controls .mode-toggle{min-width:34px}.film-site .simple-player .player-action-icon{width:16px;height:16px;}}
/* Equal hit areas and icon sizes on both sides of the transport bar. */
.film-site .simple-player .simple-player-bottom .control-row{gap:8px;padding-inline:12px;}
.film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls){gap:4px;}
.film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls)>button,
.film-site .simple-player .simple-player-bottom .player-control-popover>button{width:36px;min-width:36px;max-width:36px;height:36px;min-height:36px;padding:8px;border-radius:50%;font-size:17px;line-height:1;display:grid;place-items:center;color:#faf5e9;}
.film-site .simple-player .simple-player-bottom .player-action-icon{width:20px;height:20px;stroke-width:1.8;}
.film-site .simple-player .player-control-popover{position:relative;display:flex;align-items:center;}
.film-site .simple-player .player-control-flyout{position:absolute;bottom:calc(100% + 12px);right:0;z-index:8;padding:10px;border:1px solid #ffffff36;border-radius:18px;background:rgba(28,39,33,.75);box-shadow:inset 0 1px #ffffff20,0 12px 32px #0005;backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .16s,transform .16s,visibility .16s;color:#faf5e9;}
.film-site .simple-player .player-control-flyout[data-open=true]{opacity:1;visibility:visible;transform:none;}
.film-site .simple-player .player-control-flyout::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px;}
.film-site .simple-player .volume-flyout{width:56px;right:-10px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.film-site .simple-player .volume-flyout output{font-size:11px;font-variant-numeric:tabular-nums;}
.film-site .simple-player .volume-flyout input{writing-mode:vertical-lr;direction:rtl;appearance:auto;-webkit-appearance:auto;width:26px;height:112px;min-height:0;padding:0;margin:0;background:transparent;border:0;accent-color:#e4d3a9;cursor:pointer;}
.film-site .simple-player .mode-flyout{width:170px;display:grid;gap:3px;}
.film-site .simple-player .simple-player-bottom .mode-flyout button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:40px;padding:8px;border-radius:10px;white-space:nowrap;font-size:12px;}
.film-site .simple-player .mode-flyout button[aria-pressed=true]{background:#ffffff18;color:#f5dfa9;}
.film-site .simple-player .mode-flyout button>svg:last-child:not(:first-child){margin-left:auto;width:14px;height:14px;}
.film-site .simple-player .simple-details{background:rgba(28,39,33,.73);backdrop-filter:blur(30px) saturate(145%);-webkit-backdrop-filter:blur(30px) saturate(145%);border:1px solid #ffffff38;box-shadow:inset 0 1px #ffffff26,0 18px 48px #09140d45;}
@media(max-width:360px){
 .film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls){gap:1px;}
 .film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls)>button,.film-site .simple-player .simple-player-bottom .player-control-popover>button{width:32px;min-width:32px;max-width:32px;height:32px;min-height:32px;padding:6px;}
}
@supports not (backdrop-filter:blur(1px)){.film-site .simple-player :is(.simple-details,.player-control-flyout){background:rgba(28,39,33,.96);}}
.film-site :is(.cover-preview-dialog,.resource-choice-popover,.episode-index-popover,.map-region-popover){background:var(--acrylic-panel)!important;backdrop-filter:blur(28px) saturate(140%)!important;-webkit-backdrop-filter:blur(28px) saturate(140%)!important;}
.film-site .simple-player :is(.simple-details,.player-control-flyout){background:rgba(28,39,33,.8)!important;backdrop-filter:blur(28px) saturate(140%)!important;-webkit-backdrop-filter:blur(28px) saturate(140%)!important;}
/* Children share their parent's single motion clock; no independent breathing. */
.film-site :is(.detail-dialog,.record-panel) :is(.simple-details,.player-control-flyout,.portfolio-video-volume-panel,.portfolio-speed-options),
.film-site [data-bound-panel]{animation:none!important;translate:none!important;}
.film-site .record-panel .simple-details{transform:none!important;scale:1!important;}
.film-site [data-bound-panel]{transition:none!important;transform-origin:0 0;}
.film-site .dialog-curved-content{text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;}
/* Icons glow directly; no circular hover/active fill behind player controls. */
.film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls)>button,
.film-site .simple-player .simple-player-bottom .player-control-popover>button{background:transparent!important;box-shadow:none!important;border:0!important;transition:color .18s,opacity .18s;}
.film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls)>button:is(:hover,:focus-visible),
.film-site .simple-player .simple-player-bottom .player-control-popover>button:is(:hover,:focus-visible){background:transparent!important;box-shadow:none!important;transform:none!important;color:#fff7dc;opacity:1;}
.film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls)>button:is(:hover,:focus-visible) .player-action-icon,
.film-site .simple-player .simple-player-bottom .player-control-popover>button:is(:hover,:focus-visible) .player-action-icon{filter:drop-shadow(0 0 4px #fff0bda6) drop-shadow(0 0 8px #fff4d24d);}
.film-site .simple-player .translation-toggle:is(:hover,:focus-visible){text-shadow:0 0 5px #fff0bdaa,0 0 10px #fff4d266;}
/* Floating header capsule: a visible gap, without moving the content on hover. */
.film-site .site-header{top:calc(16px + env(safe-area-inset-top,0px));margin-top:16px;transition:background-color .25s ease,border-color .25s ease,box-shadow .3s ease;}
.film-site .site-header nav a{transition:color .2s ease,text-shadow .2s ease,transform .2s ease;}
.film-site .site-header nav a:is(:hover,:focus-visible){color:var(--ink);text-shadow:0 0 9px color-mix(in srgb,var(--gold) 65%,transparent);transform:translateY(-2px);}
@media(hover:hover){
 .film-site .site-header:hover{background:rgba(249,246,237,.84)!important;border-color:rgba(255,255,255,.9)!important;box-shadow:0 12px 34px #15271e26,inset 0 1px 0 #ffffffed,inset 0 -1px 0 #ffffff75!important;}
 :root[data-theme=dark] .film-site .site-header:hover{background:rgba(32,44,37,.84)!important;border-color:rgba(244,232,198,.5)!important;box-shadow:0 12px 34px #0005,0 0 18px #e2cc8d18,inset 0 1px 0 #ffffff40!important;}
 .film-site .site-header .theme-mode-control:hover{filter:drop-shadow(0 0 5px #e4d3a975);}
}
@media(max-width:900px){.film-site .site-header{top:calc(12px + env(safe-area-inset-top,0px));margin-top:12px;}}
@media(prefers-reduced-motion:reduce){.film-site .site-header,.film-site .site-header nav a{transition:none}.film-site .site-header nav a:hover{transform:none;}}
/* The header is the single material reference, including its 50% resting tint. */
.film-site{--surface-fill:var(--glass-tint);--surface-edge:var(--glass-edge);--surface-shadow:var(--glass-shadow);--surface-blur:blur(20px) saturate(145%);--surface-ink:#25332c;--surface-muted:#536158;--surface-hover:rgba(249,246,237,.84);--surface-hover-edge:rgba(255,255,255,.9);--surface-hover-shadow:0 12px 34px #15271e26,inset 0 1px #ffffffed,inset 0 -1px #ffffff75;}
:root[data-theme=dark] .film-site{--surface-ink:#f5f0e6;--surface-muted:#c8cdc5;--surface-hover:rgba(32,44,37,.84);--surface-hover-edge:rgba(244,232,198,.5);--surface-hover-shadow:0 12px 34px #0005,0 0 18px #e2cc8d18,inset 0 1px #ffffff40;}
:root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.highlights-grid>article,.contact-entry,.message-list>article,.detail-dialog,.cover-preview-dialog,.resource-choice-popover,.episode-index-popover,.map-region-popover,.record-panel.simple-player,.simple-details,.player-control-flyout,.portfolio-video-volume-panel,.portfolio-speed-menu,.collection-heart,.ranking-switch){
 background:var(--surface-fill)!important;border:1px solid var(--surface-edge)!important;box-shadow:var(--surface-shadow)!important;backdrop-filter:var(--surface-blur)!important;-webkit-backdrop-filter:var(--surface-blur)!important;color:var(--surface-ink);--ink:var(--surface-ink);--muted:var(--surface-muted);
}
/* Leave media, QR codes and text opaque. Only the surrounding material changes. */
:root[data-theme] .film-site .simple-player.record-panel::before,
:root[data-theme] .film-site .simple-player.record-panel::after{content:none!important;}
/* Put the player's frost on its own backing plane, so an above-player song
   list can still sample the page instead of a clipped parent backdrop root. */
:root[data-theme] .film-site .simple-player.record-panel{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
:root[data-theme] .film-site .simple-player.record-panel::before{content:''!important;background:var(--surface-fill)!important;filter:none!important;backdrop-filter:var(--surface-blur)!important;-webkit-backdrop-filter:var(--surface-blur)!important;border-radius:inherit;inset:1px;transform:none;z-index:-1;}
:root[data-theme] .film-site .simple-player :is(.simple-song strong,.simple-song small,.simple-lyrics p,.simple-lyrics .active,.lyric-translation,.lyric-source-note,.simple-time,.simple-details-heading,.queue-scope,.music-queue button,.music-queue small,.player-control-flyout,.player-control-flyout button,.simple-song>button){color:var(--surface-ink)!important;text-shadow:none;}
:root[data-theme] .film-site .simple-player :is(.simple-song small,.queue-scope,.music-queue small,.lyric-source-note){color:var(--surface-muted)!important;}
:root[data-theme] .film-site .simple-player .simple-details-heading button{color:var(--surface-ink)!important;background:transparent!important;}
:root[data-theme] .film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls) button{color:var(--surface-ink)!important;}
:root[data-theme] .film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls) button:is(:hover,:focus-visible){color:var(--gold)!important;}
:root[data-theme] .film-site .simple-player .lyric-translation{color:var(--gold)!important;}
:root[data-theme] .film-site .simple-player .simple-song>button{background:transparent!important;}
:root[data-theme] .film-site .simple-player .simple-details{max-height:max(72px,calc(100dvh - min(420px,42dvh) - 240px));}
:root[data-theme] .film-site :is(.portfolio-speed-menu,.portfolio-video-volume-panel) :is(button,span){color:var(--surface-ink)!important;}
:root[data-theme] .film-site .simple-player .mode-flyout button[aria-pressed=true],
:root[data-theme] .film-site .simple-details .music-queue button[aria-current=true]{background:color-mix(in srgb,var(--surface-ink) 10%,transparent);}
:root[data-theme] .film-site .simple-player .simple-seek::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--gold) 0,var(--progress,0%),color-mix(in srgb,var(--surface-ink) 28%,transparent) var(--progress,0%),color-mix(in srgb,var(--surface-ink) 28%,transparent) 100%);}
:root[data-theme] .film-site .simple-player .simple-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);box-shadow:0 1px 5px color-mix(in srgb,var(--surface-ink) 22%,transparent);transition:box-shadow .18s ease;}
:root[data-theme] .film-site .simple-player .simple-seek:hover::-webkit-slider-thumb{width:12px;height:12px;box-shadow:0 0 7px color-mix(in srgb,var(--gold) 45%,transparent);}
:root[data-theme] .film-site .simple-player .simple-seek::-moz-range-thumb{width:12px;height:12px;box-sizing:border-box;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);box-shadow:0 1px 5px color-mix(in srgb,var(--surface-ink) 22%,transparent);}
:root[data-theme] .film-site .simple-player .simple-seek::-moz-range-track{background:color-mix(in srgb,var(--surface-ink) 28%,transparent);}
:root[data-theme] .film-site .simple-player .simple-seek::-moz-range-progress{background:var(--gold);}
@media(hover:hover){
 :root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.highlights-grid>article,.contact-entry):hover{background:var(--surface-hover)!important;border-color:var(--surface-hover-edge)!important;box-shadow:var(--surface-hover-shadow)!important;}
}
.film-site .simple-player .simple-details-heading{margin:0 0 6px;padding:0 0 6px;min-height:30px;}
.film-site .simple-details .queue-title{display:flex;align-items:baseline;gap:10px;min-width:0;}
.film-site .simple-details .queue-scope{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
.film-site .simple-details .music-queue button{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;min-height:48px;padding:6px 8px;}
.film-site .simple-details .queue-art{position:relative;display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border-radius:7px;flex:none;background:color-mix(in srgb,var(--surface-ink) 9%,transparent);font-size:14px;}
.film-site .simple-details .queue-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.film-site .simple-details .queue-art img[hidden]{display:none;}
.film-site .simple-details .queue-copy{display:block;min-width:0;}
.film-site .simple-details .queue-copy strong,.film-site .simple-details .queue-copy small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.4;}
.film-site .simple-details .queue-copy strong{font-size:13px;}
.film-site .simple-details .queue-copy small{font-size:11px;margin-top:2px;}
/* Frost needs an unobstructed backdrop, not just a translucent paint layer.
   A mask on the scrolling rail creates a separate backdrop root and prevents
   its cards from sampling the chapter artwork underneath. */
.film-site{--surface-blur:blur(32px) saturate(135%);--frost-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");}
:root[data-theme] .film-site .poster-rail{mask-image:none!important;-webkit-mask-image:none!important;filter:none!important;}
:root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.highlights-grid>article,.contact-entry,.message-list>article,.detail-dialog,.resource-choice-popover,.episode-index-popover,.map-region-popover,.simple-details,.player-control-flyout,.guestbook form){background-image:var(--frost-grain)!important;backdrop-filter:var(--surface-blur)!important;-webkit-backdrop-filter:var(--surface-blur)!important;}
:root[data-theme] .film-site .simple-player.record-panel::before{background-image:var(--frost-grain)!important;}
:root[data-theme] .film-site :is(.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.highlights-grid>article,.contact-entry,.message-list>article,.guestbook form,.notice){border-radius:22px!important;}
:root[data-theme] .film-site :is(.music-top-art,.poster-picture,.rank-art,.hero-visual,.hero-board){border-radius:16px!important;overflow:hidden;}
:root[data-theme] .film-site :is(textarea,input:not([type=range]):not([type=checkbox]),.primary,.secondary,.hero-links>a,.info-dialog-actions>a,.info-dialog-actions>button){border-radius:16px!important;}
:root[data-theme] .film-site .guestbook form{padding:18px;background-color:var(--surface-fill);border:1px solid var(--surface-edge);box-shadow:var(--surface-shadow);}
:root[data-theme] .film-site .guestbook textarea{background:color-mix(in srgb,var(--surface-fill) 75%,transparent);color:var(--surface-ink);border:1px solid var(--surface-edge);}
.film-site .poster-card{content-visibility:auto;contain-intrinsic-size:230px 320px;}
.film-site .site-header{width:min(1120px,calc(100% - 2 * var(--edge)));max-width:calc(100% - 32px);margin-inline:auto!important;}
:root[data-theme] .film-site footer.site-footer{display:flex;justify-content:center;align-items:center;grid-template-columns:none;width:min(760px,calc(100% - 32px));min-height:0;max-width:100%;margin:8px auto 16px;padding:10px 16px;gap:0;box-sizing:border-box;background:none!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-align:center;color:var(--surface-muted);}
.film-site footer.site-footer p{margin:0!important;text-align:center;white-space:normal;line-height:1.6;}
.film-site footer.site-footer small{color:var(--surface-muted);font-size:10px;}
@media(max-width:900px){.film-site .site-header{width:calc(100% - 32px);}}
/* Keep like feedback distinct from neutral acrylic controls in both themes. */
.film-site{--like-red:#bd304d;}
:root[data-theme=dark] .film-site{--like-red:#ff7184;}
:root[data-theme] .film-site .collection-heart{color:var(--like-red)!important;overflow:visible;}
:root[data-theme] .film-site .collection-heart>svg{transition:filter .18s ease,scale .18s ease;}
:root[data-theme] .film-site .collection-heart[aria-pressed=true]>svg{fill:currentColor;}
:root[data-theme] .film-site .collection-heart:not(:disabled):is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--like-red) 60%,transparent)!important;box-shadow:0 0 14px color-mix(in srgb,var(--like-red) 25%,transparent),var(--surface-shadow)!important;}
:root[data-theme] .film-site .collection-heart:not(:disabled):is(:hover,:focus-visible)>svg{scale:1.16;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--like-red) 50%,transparent));}
:root[data-theme] .film-site .collection-heart .like-star-burst{display:block!important;}
:root[data-theme] .film-site .collection-heart .like-star-burst svg{color:var(--like-red);}
:root[data-theme] .film-site .chapter .collection-heart{width:auto!important;min-width:54px!important;max-width:none!important;gap:5px;padding-inline:9px;}
:root[data-theme] .film-site .collection-heart>.like-count{display:inline-block!important;min-width:1ch;font-size:11px;line-height:1;font-variant-numeric:tabular-nums;}
@media(prefers-reduced-motion:no-preference){:root[data-theme] .film-site .collection-heart>.heart-like-motion{animation:heart-like .38s ease-out!important;}}
@media(prefers-reduced-motion:reduce){:root[data-theme] .film-site .collection-heart .like-star-burst{display:none!important;}:root[data-theme] .film-site .collection-heart>svg{transition:none;scale:1!important;}}
/* Locally served Noto families share proportions across our six writing systems.
   Generic fallback is only a last-resort safety net, not the intended UI font. */
:root{--font-body:'Noto Sans','Noto Sans SC','Noto Sans TC','Noto Sans JP','Noto Sans KR',sans-serif;--font-editorial:'Noto Serif SC','Noto Sans','Noto Sans TC','Noto Sans JP','Noto Sans KR',serif;--font-label:'DM Mono','Noto Sans','Noto Sans SC','Noto Sans JP','Noto Sans KR',monospace;}
html,body{font-family:var(--font-body);font-synthesis:none;text-rendering:optimizeLegibility;}
.film-site,.film-site :is(button,input,textarea,select,p,small,strong,span,a,li,dt,dd,h3,h4),.cover-editor{font-family:var(--font-body)!important;}
.film-site :is(span,em,strong){font-family:inherit!important;}
.film-site :is(.hero-copy h1,.hero-copy h1>span,.section-heading h2,.detail-dialog h2,.highlights-grid h3,.panel-heading h3,.music-top-heading){font-family:var(--font-editorial)!important;font-style:normal;letter-spacing:-.025em;}
.film-site :is(.wordmark,.hero-copy h1 em,.highlights-grid h3 strong){font-family:'Space Grotesk',var(--font-body)!important;}
.film-site :is(.eyebrow,.section-index,.music-top-rank,.rank-number,.simple-time,.detail-facts dt,.tool-short){font-family:var(--font-label)!important;font-variant-numeric:tabular-nums;}
.film-site :is(p,dd,.detail-description,.lyric-original,.lyric-translation){font-weight:400;}
.film-site :is(.site-header nav,.tabs,.music-filters,.queue-copy strong,.music-top-card h4,.poster-card h3){font-weight:500;}
.film-site :is(h3,h4,.simple-song-copy strong,.queue-copy strong){line-height:1.5;}
.film-site :is(.lyric-original,.lyric-translation){line-height:1.65;letter-spacing:0;}
.film-site :is(.simple-time,.like-count){font-variant-numeric:tabular-nums;}
.film-site :is([lang|=ja],[lang|=ja] *){font-family:'Noto Sans','Noto Sans JP','Noto Sans SC','Noto Sans KR',sans-serif!important;}
.film-site :is([lang|=ko],[lang|=ko] *){font-family:'Noto Sans','Noto Sans KR','Noto Sans SC',sans-serif!important;}
.film-site :is([lang=zh-TW],[lang=zh-HK],[lang=zh-Hant],[lang=zh-TW] *,[lang=zh-HK] *,[lang=zh-Hant] *){font-family:'Noto Sans','Noto Sans TC','Noto Sans SC','Noto Sans KR',sans-serif!important;}
@media(max-width:600px){.film-site :is(.hero-copy h1,.section-heading h2){letter-spacing:-.015em;}}
/* Small, functional scrollbars. Horizontal touch-first rails keep their own UI. */
:root{--scroll-thumb:#9c8c6a8f;--scroll-thumb-hover:#8d754c;--scroll-track:transparent;}
:root[data-theme=dark]{--scroll-thumb:#d4c29680;--scroll-thumb-hover:#e3c88c;}
html,body,.film-site *,.cover-editor *{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track);}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:6px;height:6px;}
.film-site *::-webkit-scrollbar,.cover-editor *::-webkit-scrollbar{width:5px;height:5px;}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track,.film-site *::-webkit-scrollbar-track,.cover-editor *::-webkit-scrollbar-track{background:transparent;}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,.film-site *::-webkit-scrollbar-thumb,.cover-editor *::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:1px solid transparent;background-clip:padding-box;border-radius:999px;min-height:28px;}
html::-webkit-scrollbar-thumb:hover,.film-site *::-webkit-scrollbar-thumb:hover,.cover-editor *::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover);}
html::-webkit-scrollbar-corner,.film-site *::-webkit-scrollbar-corner{background:transparent;}
html::-webkit-scrollbar-button,body::-webkit-scrollbar-button,.film-site *::-webkit-scrollbar-button,.cover-editor *::-webkit-scrollbar-button{display:none;width:0;height:0;}
@supports selector(::-webkit-scrollbar){html,body,.film-site *,.cover-editor *{scrollbar-width:auto;scrollbar-color:auto;}.film-site .simple-player .lyric-lines{scrollbar-width:auto;}}
.film-site .simple-player .lyric-lines{scrollbar-width:thin;}
.film-site .simple-player .lyric-lines::-webkit-scrollbar{display:block;width:4px;}
.film-site :is(.poster-rail,.music-chip-group),.film-site #interests>.tabs,.film-site .portfolio-works>.tabs{scrollbar-width:none;}

/* One heart and a compact count, never a second icon or particle copy. */
:root[data-theme] .film-site .chapter .collection-heart{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;display:grid;place-items:center;isolation:isolate;}
:root[data-theme] .film-site .collection-heart>svg{width:17px;height:17px;flex:none;stroke-width:1.5;fill:color-mix(in srgb,var(--like-red) 9%,transparent);}
:root[data-theme] .film-site .collection-heart[aria-pressed=true]>svg{fill:var(--like-red);}
/* Count is a foreground overlay, not a constraint on the heart's icon size.
   Four-character labels may extend beyond the small heart inside its hit area. */
:root[data-theme] .film-site .collection-heart>.like-count{position:absolute;inset:0;z-index:1;display:flex!important;align-items:center;justify-content:center;padding-top:1px;min-width:0;overflow:visible;white-space:nowrap;font-size:9px;font-weight:600;letter-spacing:-.25px;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 0 2px var(--surface-hover),0 0 2px var(--surface-hover);}
:root[data-theme] .film-site .collection-heart[aria-pressed=true]>.like-count{color:#fff6ed;text-shadow:0 0 2px #94243c,0 1px 1px #94243c;}
.film-site .mode-flyout button{display:flex;gap:9px;border:1px solid transparent;border-radius:10px;}
:root[data-theme] .film-site .simple-player .mode-flyout button[aria-pressed=true]{background:color-mix(in srgb,var(--gold) 18%,transparent);border-color:color-mix(in srgb,var(--gold) 60%,transparent);color:var(--gold)!important;}

/* Keep every message inside its card; only the scrollport edges fade. */
.film-site #contact.contact-compact{padding-bottom:calc(42px + env(safe-area-inset-bottom));}
.film-site #contact .guestbook{min-width:0;position:relative;}
.film-site #contact .guestbook form{box-sizing:border-box;padding:16px;}
.film-site #contact .guestbook .form-bottom{flex-wrap:wrap;}
.film-site #contact .guestbook .form-bottom small{flex:1 1 140px;}
.film-site #contact .guestbook textarea{resize:vertical;max-height:220px;}
.film-site #contact .message-scroll-frame{position:relative;margin-top:12px;min-width:0;border-radius:18px;isolation:isolate;background:color-mix(in srgb,var(--surface-fill) 25%,transparent);backdrop-filter:var(--surface-blur);-webkit-backdrop-filter:var(--surface-blur);}
.film-site #contact .guestbook .message-list{max-height:300px;margin:0;padding:18px 8px;overflow-y:auto;overflow-x:hidden;scroll-padding-block:20px;overscroll-behavior:contain;touch-action:pan-y;mask-image:linear-gradient(to bottom,transparent,#000 20px,#000 calc(100% - 20px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20px,#000 calc(100% - 20px),transparent);}
.film-site #contact .guestbook .message-list article{padding:14px 16px;margin:0 0 10px;border-radius:18px;overflow-wrap:anywhere;}
.film-site #contact .guestbook .message-list article:last-child{margin-bottom:0;}
.film-site #contact .message-scroll-frame[data-at-top=true] .message-list{--message-fade-top:#000;}
.film-site #contact .message-scroll-frame[data-at-bottom=true] .message-list{--message-fade-bottom:#000;}
.film-site #contact .guestbook .message-list{mask-image:linear-gradient(to bottom,var(--message-fade-top,transparent),#000 20px,#000 calc(100% - 20px),var(--message-fade-bottom,transparent));-webkit-mask-image:linear-gradient(to bottom,var(--message-fade-top,transparent),#000 20px,#000 calc(100% - 20px),var(--message-fade-bottom,transparent));}
.film-site #contact .message-head{gap:6px 12px;line-height:1.5;align-items:baseline;}
.film-site #contact .message-head strong{font-size:12px;overflow-wrap:anywhere;}
.film-site #contact .message-head time{font-size:10px;white-space:nowrap;}
.film-site #contact .message-list article>p{margin:10px 0 4px;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;}
.film-site #contact .message-actions{flex-wrap:wrap;gap:8px;}
@media(max-width:760px){.film-site #contact .guestbook .message-list{max-height:340px;}.film-site #contact.contact-compact{padding-bottom:calc(108px + env(safe-area-inset-bottom));}}
@media(forced-colors:active){html,body,.film-site *{scrollbar-color:auto;}.film-site #contact .guestbook .message-list{mask-image:none;-webkit-mask-image:none;}}
/* Keep the acrylic material; avoid needlessly large live blur kernels. */
.film-site{--surface-blur:blur(24px) saturate(135%);--action-glow:color-mix(in srgb,var(--gold) 35%,transparent);}
/* The message viewport already has one shared frosted backing plane. */
:root[data-theme] .film-site #contact .message-list>article{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* Highlight real interactive targets, never ordinary labels or paragraphs.
   Paint-only feedback does not move surrounding text or restart card waves. */
@media(hover:hover) and (pointer:fine){
 .film-site :is(a[href],button:not(:disabled),summary){transition-property:color,background-color,border-color,box-shadow,transform,opacity;}
 .film-site :is(a[href],button:not(:disabled),summary):hover{color:var(--gold);text-shadow:0 0 12px var(--action-glow);cursor:pointer;}
 .film-site :is(.resource-choice-trigger,.detail-resource-link,.text-link,.info-dialog-link,.screen-destinations a,.detail-facts a):hover{color:var(--gold)!important;text-decoration:none!important;}
 .film-site :is(.tabs button,.music-chip,.ranking-switch button,.contact-entry,.info-dialog-actions>a,.info-dialog-actions>button,.resource-choice-columns a,.episode-index-popover button):hover{color:var(--gold)!important;border-color:color-mix(in srgb,var(--gold) 65%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 32%,transparent),0 0 12px color-mix(in srgb,var(--gold) 12%,transparent)!important;}
 .film-site :is(.music-top-card,.poster-card,.work-cover):has(>button:not(:disabled):hover){border-color:color-mix(in srgb,var(--gold) 65%,transparent)!important;}
 .film-site :is(input:not([type=range]),textarea,select):not(:disabled):hover{border-color:var(--gold)!important;}
 /* Icons keep their existing bare-icon treatment, without a hover circle. */
 :root[data-theme] .film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls) button:hover{background:transparent!important;box-shadow:none!important;}
 .film-site .simple-player .simple-player-bottom button:hover .player-action-icon{filter:drop-shadow(0 0 4px var(--action-glow));}
 :root[data-theme] .film-site .simple-player .simple-player-bottom .mode-flyout button[aria-pressed=true]:hover{background:color-mix(in srgb,var(--gold) 18%,transparent)!important;}
 :root[data-theme] .film-site .collection-heart:hover{color:var(--like-red)!important;text-shadow:none;}
}
.film-site :is(a[href],button,summary,input,textarea,select):focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.film-site :is(button:disabled,[aria-disabled=true]){cursor:default;}

/* Every floating page uses the same paint-only highlight. Theme colors differ,
   but hover never adds an underline, changes metrics, or shifts the text. */
:root[data-theme=light] .film-site{--popup-action-color:#79551e;--popup-action-glow:rgba(121,85,30,.24);}
:root[data-theme=dark] .film-site{--popup-action-color:#ffe3a8;--popup-action-glow:rgba(255,227,168,.32);}
.film-site :is(dialog,[role=dialog],[popover],.simple-player) :is(a[href],button:not(:disabled),summary){text-decoration:none!important;}
@media(hover:hover) and (pointer:fine){
 .film-site :is(dialog,[role=dialog],[popover],.simple-player) :is(a[href],button:not(:disabled):not(.collection-heart),summary):hover{
  color:var(--popup-action-color,var(--gold))!important;
  text-decoration:none!important;
  text-shadow:0 0 10px var(--popup-action-glow,var(--action-glow));
 }
}
.film-site :is(dialog,[role=dialog],[popover],.simple-player) :is(a[href],button:not(:disabled):not(.collection-heart),summary):focus-visible{
 color:var(--popup-action-color,var(--gold))!important;
 text-decoration:none!important;
 text-shadow:0 0 10px var(--popup-action-glow,var(--action-glow));
}
@media(prefers-reduced-motion:reduce){.film-site :is(a[href],button,summary){transition:none!important;}}
/* The floating header overlays the CURRENT chapter; do not reserve a strip of
   the PREVIOUS chapter using both scroll-padding and scroll-margin. */
html:has(.film-site){scroll-padding-top:0!important;}
.film-site :is(#about,#works,#tools,#interests,#contact){scroll-margin-top:0!important;}
/* Keep the final chapter's content compact, but extend its background enough
   for a true top-aligned anchor even on tall desktop/tablet viewports. */
:root .film-site #contact.contact-compact{min-height:100svh;}
/* The title band is a real pointer target on iPad, not just a CSS pseudo box. */
.film-site .dialog-drag-handle{position:absolute;left:0;right:54px;top:0;height:30px;z-index:13;touch-action:none;cursor:grab;user-select:none;}
.film-site .portfolio-dialog-heading{touch-action:none;user-select:none;}
/* Album artwork below the SAME acrylic tint/frost, not instead of acrylic. */
:root[data-theme] .film-site .simple-player.record-panel{isolation:isolate;}
:root[data-theme] .film-site .simple-player.record-panel::before{content:''!important;z-index:-2;background-image:var(--player-cover)!important;background-size:cover!important;background-position:center!important;background-color:transparent!important;opacity:1;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
:root[data-theme] .film-site .simple-player.record-panel::after{content:''!important;position:absolute;inset:1px;z-index:-1;pointer-events:none;border-radius:inherit;background:rgba(248,245,234,.65)!important;background-image:var(--frost-grain)!important;backdrop-filter:blur(6px) saturate(1.15)!important;-webkit-backdrop-filter:blur(6px) saturate(1.15)!important;}
:root[data-theme=dark] .film-site .simple-player.record-panel::after{background-color:rgba(15,22,27,.52)!important;}
.film-site .simple-player .lyric-lines{scrollbar-width:none!important;}
.film-site .simple-player .lyric-lines::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
/* Native video gets priority over an endlessly moving acrylic backing plane. */
.film-site .detail-dialog:has(.portfolio-media-player[data-playing=true]){animation-play-state:paused!important;}
@media(any-pointer:coarse){
 :root[data-theme] .film-site .chapter .collection-heart{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
.guestbook .emoji-picker{display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;}
.guestbook .emoji-picker button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:system-ui;cursor:pointer;}
.guestbook .emoji-picker button:hover{background:color-mix(in srgb,var(--gold) 20%,transparent);}
.guestbook .message-reply{margin-top:10px;}
.guestbook .message-reply summary{cursor:pointer;color:var(--gold);font-size:11px;list-style:none;}
.guestbook .message-reply summary::-webkit-details-marker{display:none;}
.guestbook .message-reply form{padding:10px!important;margin:8px 0 0;}
.guestbook .reply-context{font-size:10px;color:var(--muted);}
.guestbook .message-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.guestbook .message-replies>.guestbook-message{margin:10px 0;padding:10px 0 10px 12px;border-left:1px solid color-mix(in srgb,var(--gold) 25%,transparent);}
.guestbook .message-replies .message-replies{margin-left:0;}
.guestbook .emoji-menu{position:relative;width:fit-content;margin:6px 0;}
.guestbook .emoji-menu summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:12px;color:var(--ink);padding:4px 8px;border-radius:20px;}
.guestbook .emoji-menu summary::-webkit-details-marker{display:none;}
.guestbook .emoji-menu summary:hover,.guestbook .emoji-menu[open] summary{color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);}
.guestbook .emoji-menu summary>span:first-child{font-family:system-ui;font-size:22px;line-height:1;}
.guestbook .emoji-menu .emoji-picker{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;width:280px;max-width:calc(100vw - 64px);padding:12px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;border-radius:18px;border:1px solid var(--surface-edge);box-shadow:var(--surface-shadow);background:var(--surface-hover);backdrop-filter:var(--surface-blur);-webkit-backdrop-filter:var(--surface-blur);}
.film-site #about{background-image:none!important;--suit-ink:#f6f1e5;--suit-muted:#e2e4dc;--suit-accent:#e2c78b;--ink:#f6f1e5;--muted:#e2e4dc;--gold:#e2c78b;}
.film-site #about .about-video-backdrop{display:block;z-index:-1;pointer-events:none;}
.film-site #about .about-video-backdrop video{inset:0;width:100%;height:100%;object-position:center;object-fit:cover;opacity:1;mix-blend-mode:normal;filter:none;transform:none;}
.film-site #about .hero-proof li{background:rgba(22,30,27,.46)!important;color:#f6f1e5!important;border-color:#ffffff38!important;}
.film-site #about .hero-links .text-link{color:#f6f1e5!important;}

/* Keep the seek surface inside the rounded player, including at 0% / 100%.
   The range used to be absolutely inset across its padded track, ignoring
   that padding and painting right through the two lower corners. */
.film-site .simple-player .simple-player-bottom{box-sizing:border-box;min-width:0;}
.film-site .simple-player .simple-player-bottom .control-row{box-sizing:border-box;min-width:0;}
.film-site .simple-player .simple-player-bottom .simple-progress{
 box-sizing:border-box;width:100%;min-width:0;
 padding:0 22px 4px;overflow:clip;isolation:isolate;
}
.film-site .simple-player .simple-player-bottom .simple-time{
 box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;
}
.film-site .simple-player .simple-player-bottom .simple-seek-track{
 box-sizing:border-box;position:relative;width:100%;height:26px;padding:0;
}
.film-site .simple-player .simple-player-bottom input.simple-seek{
 position:relative;inset:auto;display:block;width:100%;max-width:100%;
 box-sizing:border-box;transform:none;
}

/* Current timed lyric stays distinct from the surrounding acrylic copy. */
:root[data-theme=light] .film-site .simple-player{--current-lyric:#79501a;--current-lyric-glow:#79501a18;}
:root[data-theme=dark] .film-site .simple-player{--current-lyric:#ffe3a0;--current-lyric-glow:#ffe3a02b;}
:root[data-theme] .film-site .simple-player .lyric-lines p{
 transition:color .4s ease,opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1),filter .48s ease;
}
:root[data-theme] .film-site .simple-player .lyric-lines p.active{
 color:var(--current-lyric)!important;opacity:1!important;filter:none!important;
 font-weight:750;text-shadow:0 0 12px var(--current-lyric-glow);
}
:root[data-theme] .film-site .simple-player .lyric-lines p.active .lyric-translation{
 color:var(--current-lyric)!important;opacity:.9;font-weight:600;
}

/* A quiet, arrow-free queue scrollbar, with the same geometry in both themes. */
:root[data-theme] .film-site .simple-details .music-queue{
 --queue-scroll-thumb:color-mix(in srgb,var(--surface-ink) 32%,transparent);
 --queue-scroll-track:color-mix(in srgb,var(--surface-ink) 5%,transparent);
 scrollbar-width:thin;scrollbar-color:var(--queue-scroll-thumb) var(--queue-scroll-track);
 scrollbar-gutter:stable;padding-right:5px;
}
@supports selector(::-webkit-scrollbar){
 /* Non-auto standard properties override WebKit styling and restore native
    Windows arrow buttons, so explicitly hand rendering to these pseudo parts. */
 :root[data-theme] .film-site .simple-details .music-queue{scrollbar-width:auto;scrollbar-color:auto;}
 :root[data-theme] .film-site .simple-details .music-queue::-webkit-scrollbar{width:6px;height:6px;}
 :root[data-theme] .film-site .simple-details .music-queue::-webkit-scrollbar-track{background:var(--queue-scroll-track);border-radius:999px;margin-block:5px;}
 :root[data-theme] .film-site .simple-details .music-queue::-webkit-scrollbar-thumb{background:var(--queue-scroll-thumb);border:1px solid transparent;background-clip:padding-box;border-radius:999px;min-height:32px;}
 :root[data-theme] .film-site .simple-details .music-queue::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--gold) 75%,var(--surface-ink));}
 :root[data-theme] .film-site .simple-details .music-queue::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;border:0!important;background:none!important;}
 :root[data-theme] .film-site .simple-details .music-queue::-webkit-scrollbar-corner{background:transparent;}
}

/* One custom volume track; do not mix native vertical rendering with a second
   capsule background or horizontal-thumb offsets. Rotation keeps it consistent. */
:root[data-theme] .film-site .simple-player .volume-flyout{
 box-sizing:border-box;width:56px;right:calc(50% - 28px);padding:12px 10px;
 gap:8px;border-radius:18px;overflow:visible;
}
:root[data-theme] .film-site .simple-player .volume-flyout output{
 display:block;line-height:1;font-size:11px;font-weight:600;color:var(--surface-ink);
}
:root[data-theme] .film-site .simple-player .volume-slider{
 position:relative;width:28px;height:104px;flex:none;
}
:root[data-theme] .film-site .simple-player .volume-flyout input{
 position:absolute;left:50%;top:50%;width:104px;height:28px;min-height:0;max-width:none;
 transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;
 writing-mode:horizontal-tb;direction:ltr;appearance:none!important;-webkit-appearance:none!important;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;padding:0!important;margin:0!important;cursor:pointer;touch-action:none;
}
:root[data-theme] .film-site .simple-player .volume-flyout input::-webkit-slider-runnable-track{
 width:100%;height:4px;border:0;border-radius:999px;
 background:linear-gradient(to right,var(--gold) 0%,var(--gold) var(--volume-level),color-mix(in srgb,var(--surface-ink) 22%,transparent) var(--volume-level),color-mix(in srgb,var(--surface-ink) 22%,transparent) 100%);
}
:root[data-theme] .film-site .simple-player .volume-flyout input::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none;width:12px;height:12px;box-sizing:border-box;
 margin: -4px 0 0;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);
 box-shadow:0 1px 4px color-mix(in srgb,var(--surface-ink) 20%,transparent);
}
:root[data-theme] .film-site .simple-player .volume-flyout input::-moz-range-track{
 width:100%;height:4px;border:0;border-radius:999px;background:color-mix(in srgb,var(--surface-ink) 22%,transparent);
}
:root[data-theme] .film-site .simple-player .volume-flyout input::-moz-range-progress{height:4px;border-radius:999px;background:var(--gold);}
:root[data-theme] .film-site .simple-player .volume-flyout input::-moz-range-thumb{
 box-sizing:border-box;width:12px;height:12px;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);
}
:root[data-theme] .film-site .simple-player .volume-flyout input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px!important;}

/* The visual rail is independent of browser range internals. The transparent
   native input retains pointer, touch and keyboard volume control. */
:root[data-theme] .film-site .simple-player .volume-slider-rail{position:absolute;left:12px;top:6px;bottom:6px;width:4px;border-radius:999px;background:color-mix(in srgb,var(--surface-ink) 22%,transparent);pointer-events:none;}
:root[data-theme] .film-site .simple-player .volume-slider-rail i{position:absolute;bottom:0;left:0;width:100%;height:var(--volume-level);border-radius:inherit;background:var(--gold);}
:root[data-theme] .film-site .simple-player .volume-slider-rail b{position:absolute;bottom:var(--volume-level);left:50%;transform:translate(-50%,50%);box-sizing:border-box;width:12px;height:12px;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);box-shadow:0 1px 4px color-mix(in srgb,var(--surface-ink) 20%,transparent);}
:root[data-theme] .film-site .simple-player .volume-flyout input{opacity:0;}
:root[data-theme] .film-site .simple-player .volume-slider:has(input:focus-visible){outline:1px solid var(--gold);outline-offset:3px;border-radius:8px;}

/* Secondary work filters stay mounted outside the collection snapshots so the
   same sliding selection stays live during rapid category changes. */
.film-site .portfolio-works>.portfolio-filters{margin:0 0 14px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;}
.film-site .portfolio-works .collection-heading-row:empty{display:none;}
:root[data-theme] .film-site .portfolio-filters .animated-tabs{position:relative;isolation:isolate;gap:6px;padding:3px 0;overflow:visible;flex-wrap:wrap;}
:root[data-theme] .film-site .portfolio-filters .animated-tabs .music-chip{position:relative;min-height:34px;padding:7px 13px;border-radius:999px;font-size:12px;line-height:1.2;color:var(--surface-ink);transition:color .32s ease,border-color .32s ease,box-shadow .32s ease;background:color-mix(in srgb,var(--surface-ink) 4%,transparent);}
:root[data-theme] .film-site .portfolio-filters .animated-tabs .music-chip[aria-pressed=true]{color:var(--surface-paper,var(--suit-paper));border-color:transparent;background:transparent!important;transform:none;}
:root[data-theme=light] .film-site .portfolio-filters .animated-tabs .music-chip[aria-pressed=true]{color:#f5f0e6;}
:root[data-theme=dark] .film-site .portfolio-filters .animated-tabs .music-chip[aria-pressed=true]{color:#202c25;}
:root[data-theme] .film-site .portfolio-filters .animated-tabs .tab-fluid-indicator{border-radius:999px;}
@media(max-width:600px){:root[data-theme] .film-site .portfolio-filters .animated-tabs .music-chip{min-height:32px;padding:6px 10px;font-size:11px;}}

/* Viewport subtitles use CSS pixels and fluid type so OS DPI scaling remains
   native. Portalled outside the curved player and its inert/transform surface. */
.desktop-lyrics{position:fixed;z-index:65;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(1120px,calc(100% - 64px));box-sizing:border-box;padding:0 24px;pointer-events:none;text-align:center;}
.desktop-lyrics-copy{display:flex;flex-direction:column;align-items:center;gap:5px;animation:desktop-lyric-arrive .45s ease both;}
.desktop-lyric-original,.desktop-lyric-translation{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;text-wrap:pretty;}
.desktop-lyric-original{font:600 clamp(17px,1.45vw,25px)/1.5 system-ui,sans-serif;letter-spacing:.025em;color:#fff8e6;text-shadow:0 1px 3px #000,0 2px 12px #000b,-1px 0 2px #0008,1px 0 2px #0008;}
.desktop-lyric-translation{font:500 clamp(12px,1vw,16px)/1.5 system-ui,sans-serif;color:#f2dfb3;text-shadow:0 1px 3px #000,0 2px 10px #000b;}
:root[data-theme=light] .desktop-lyric-original{color:#fffdf5;}
:root[data-theme] .film-site .simple-player .desktop-lyrics-toggle{font-size:16px;line-height:1;flex:none;}
:root[data-theme] .film-site .simple-player .desktop-lyrics-toggle[aria-pressed=true]{color:var(--gold)!important;text-shadow:0 0 10px color-mix(in srgb,var(--gold) 30%,transparent);}
@keyframes desktop-lyric-arrive{from{opacity:.35}to{opacity:1}}
@media(max-width:1024px){.desktop-lyrics{width:calc(100% - 48px);padding-inline:28px;bottom:max(22px,env(safe-area-inset-bottom));}.desktop-lyric-original{font-size:clamp(17px,2.3vw,22px);}}
@media(max-width:600px){.desktop-lyrics{width:100%;padding:0 72px 0 16px;bottom:max(18px,env(safe-area-inset-bottom));}.desktop-lyric-original{font-size:16px;line-height:1.45;}.desktop-lyric-translation{font-size:12px;}.desktop-lyrics-copy{gap:3px;}.film-site .simple-player .utility-controls{gap:2px;}.film-site .simple-player .utility-controls>button,.film-site .simple-player .utility-controls>.player-control-popover>button{min-width:28px;width:28px;}}
@media(max-height:500px) and (orientation:landscape){.desktop-lyrics{bottom:max(10px,env(safe-area-inset-bottom));}.desktop-lyric-original{font-size:15px;}.desktop-lyric-translation{font-size:11px;}}
@media(prefers-reduced-motion:reduce){.desktop-lyrics-copy{animation:none;}}

.desktop-lyrics,.desktop-lyrics *{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none;}
@keyframes desktop-lyric-arrive{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* Align the subtitle block's centre with the album disc, independent of
   translation visibility or line wrapping. Both share one responsive dock. */
:root{--lyrics-dock-bottom:max(26px,env(safe-area-inset-bottom));--lyrics-disc-size:76px;}
.film-site .record-widget{bottom:var(--lyrics-dock-bottom);width:var(--lyrics-disc-size);height:var(--lyrics-disc-size);}
:root .desktop-lyrics{bottom:calc(var(--lyrics-dock-bottom) + var(--lyrics-disc-size)/2);transform:translate(-50%,50%);}
:root[data-theme=light] .desktop-lyric-original{color:#263b33;text-shadow:0 1px 2px #fff,0 0 8px #ffffffe6;}
:root[data-theme=light] .desktop-lyric-translation{color:#705225;text-shadow:0 1px 2px #fff,0 0 7px #ffffffe6;}
:root[data-theme=dark] .desktop-lyric-original{color:#fff4d9;text-shadow:0 1px 3px #101d18,0 2px 10px #101d18cc;}
:root[data-theme=dark] .desktop-lyric-translation{color:#dcc490;text-shadow:0 1px 3px #101d18,0 2px 8px #101d18cc;}
@media(max-width:760px){:root{--lyrics-dock-bottom:calc(18px + env(safe-area-inset-bottom));--lyrics-disc-size:64px;}}

/* The readable original is always stationary. Only its decorative RGB copies
   respond to real frequency bins; translations never enter this layer. */
:root .desktop-lyric-spectrum{position:relative;isolation:isolate;overflow:visible;display:block;max-width:100%;}
.desktop-lyric-readable{position:relative;z-index:2;display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.desktop-lyric-rgb{position:absolute;inset:0;z-index:1;visibility:hidden;opacity:0;pointer-events:none;}
.desktop-lyrics[data-spectrum-active=true] .desktop-lyric-rgb{visibility:visible;opacity:1;}
.lyric-frequency{position:absolute;inset:0;display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;will-change:transform,opacity;text-shadow:0 0 5px currentColor;font:inherit;letter-spacing:inherit;line-height:inherit;}
.lyric-frequency-r{color:#ff465e;transform:translate3d(0,var(--spectrum-r,0px),0);opacity:var(--spectrum-r-opacity,0);}
.lyric-frequency-g{color:#35dc88;transform:translate3d(0,var(--spectrum-g,0px),0);opacity:var(--spectrum-g-opacity,0);}
.lyric-frequency-b{color:#459aff;transform:translate3d(0,var(--spectrum-b,0px),0);opacity:var(--spectrum-b-opacity,0);}
:root[data-theme=light] .lyric-frequency-r{color:#c92b51;}
:root[data-theme=light] .lyric-frequency-g{color:#07885b;}
:root[data-theme=light] .lyric-frequency-b{color:#2564cf;}
@media(prefers-reduced-motion:reduce){.desktop-lyric-rgb{display:none;}}

@media(max-width:600px){.lyric-frequency-r{transform:translate3d(0,calc(var(--spectrum-r,0px)*.72),0);}.lyric-frequency-g{transform:translate3d(0,calc(var(--spectrum-g,0px)*.72),0);}.lyric-frequency-b{transform:translate3d(0,calc(var(--spectrum-b,0px)*.72),0);}}

/* A small, connected colour smear, not a second detached line. */
.desktop-lyrics .lyric-frequency{transform-origin:center 75%;filter:blur(.75px);text-shadow:0 0 4px currentColor,0 2px 4px currentColor;overflow:visible;transition:transform 55ms linear,opacity 55ms linear;}
.desktop-lyrics .lyric-frequency-r{transform:translate3d(0,var(--spectrum-r,0px),0) scaleY(var(--spectrum-r-stretch,1)) skewX(var(--spectrum-r-skew,0deg));}
.desktop-lyrics .lyric-frequency-g{transform:translate3d(0,var(--spectrum-g,0px),0) scaleY(var(--spectrum-g-stretch,1)) skewX(var(--spectrum-g-skew,0deg));}
.desktop-lyrics .lyric-frequency-b{transform:translate3d(0,var(--spectrum-b,0px),0) scaleY(var(--spectrum-b-stretch,1)) skewX(var(--spectrum-b-skew,0deg));}

/* Keep the colour order visible across the whole sentence, regardless of
   which frequency band is strongest. The fine fray has a stable noise field. */
.lyric-spectrum-filter{position:absolute;overflow:hidden;pointer-events:none;}
:root[data-theme] .desktop-lyrics .lyric-frequency{background:linear-gradient(90deg,#ff3d62 0%,#ef9551 24%,#38dd87 50%,#29b8ce 72%,#4c78ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:url(#lyric-spectrum-fray) blur(.45px);}
:root[data-theme=light] .desktop-lyrics .lyric-frequency{background-image:linear-gradient(90deg,#d22d53 0%,#b97a27 24%,#148d60 50%,#168b9f 72%,#365bd8 100%);}

/* Keep three recognisable coloured frequency layers. Repeating the same full
   RGB gradient on all copies visually merged them into one moving sentence. */
/* Red sits in front of the other decorative copies; the readable text stays
   above the entire effect. Cooler bands remain independently audio-driven. */
:root[data-theme] .desktop-lyrics .lyric-frequency-r{z-index:3;opacity:calc(var(--spectrum-r-opacity,0)*1.3);background-image:linear-gradient(90deg,#ff284f,#ff416f 52%,#ff73ae);transform:translate3d(0,calc(var(--spectrum-r,0px)*.5),0) scaleY(var(--spectrum-r-stretch,1));}
:root[data-theme] .desktop-lyrics .lyric-frequency-g{z-index:1;opacity:calc(var(--spectrum-g-opacity,0)*.95);background-image:linear-gradient(90deg,#48dc70,#26cb8b 52%,#29c9c0);transform:translate3d(0,var(--spectrum-g,0px),0) scaleY(var(--spectrum-g-stretch,1));}
:root[data-theme] .desktop-lyrics .lyric-frequency-b{z-index:2;opacity:var(--spectrum-b-opacity,0);background-image:linear-gradient(90deg,#427dff,#6265ed 52%,#9766ec);transform:translate3d(0,calc(var(--spectrum-b,0px)*.75),0) scaleY(var(--spectrum-b-stretch,1));}
:root[data-theme=light] .desktop-lyrics .lyric-frequency-r{background-image:linear-gradient(90deg,#d51f46,#d92c61 52%,#ce4c88);}
:root[data-theme=light] .desktop-lyrics .lyric-frequency-g{background-image:linear-gradient(90deg,#229940,#158f62 52%,#158f95);}
:root[data-theme=light] .desktop-lyrics .lyric-frequency-b{background-image:linear-gradient(90deg,#315bce,#5249c7 52%,#7946c6);}


/* Theme-aware collection captions and a compact shared sleeve footer. */
:root[data-theme] .film-site .poster-toolbar{color:var(--surface-ink);font-size:13px;font-weight:600;letter-spacing:.02em;}
:root[data-theme] .film-site .poster-toolbar small{opacity:1;color:var(--surface-muted);font-size:11px;font-weight:500;letter-spacing:0;margin-left:5px;}
:root[data-theme=light] .film-site .poster-toolbar{color:#253b31;}
:root[data-theme=light] .film-site .poster-toolbar small{color:#45564c;}
:root[data-theme=dark] .film-site .poster-toolbar small{color:#d5dace;}
:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card .poster-copy{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:8px 2px 3px;box-sizing:border-box;}
:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card h3{height:auto;min-height:0;max-height:2.8em;margin:0;padding:0;line-height:1.4;font-size:clamp(10px,.74vw,12px);font-weight:600;color:var(--surface-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;}
:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card p{height:auto;min-height:1.45em;max-height:1.45em;margin:0;padding:0 43px 0 0;line-height:1.45;font-size:clamp(9px,.64vw,10.5px);color:var(--surface-muted);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:600px){:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card .poster-copy{min-height:51px;padding-top:7px;} }
/* Keep translated text in flow, so toggling it never moves the original. */
:root[data-theme] .film-site .simple-player .lyric-translation,.desktop-lyric-translation{transition:opacity .25s ease;}
:root[data-theme] .film-site .simple-player .is-translation-hidden,.desktop-lyrics .is-translation-hidden{visibility:hidden;opacity:0;}
@media(prefers-reduced-motion:reduce){:root[data-theme] .film-site .simple-player .lyric-translation,.desktop-lyric-translation{transition:none;}}
/* Theme is a palette, not a second layout. Keep native control geometry stable. */
html:has(.film-site){scrollbar-width:thin!important;scrollbar-gutter:stable;}
body:has(.film-site){scrollbar-width:thin!important;}
.film-site :is(.simple-player,.detail-dialog,.music-queue,.message-list){scrollbar-width:thin;}
.film-site .simple-player .lyric-lines{scrollbar-width:none!important;}
.film-site .simple-player .volume-flyout input{appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box;}
.film-site .simple-player .volume-flyout input::-webkit-slider-runnable-track{width:3px;border:0;border-radius:999px;background:color-mix(in srgb,var(--surface-ink) 32%,transparent);}
.film-site .simple-player .volume-flyout input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:12px;height:12px;margin-left:-4.5px;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);}
.film-site .simple-player .volume-flyout input::-moz-range-track{width:3px;border:0;border-radius:999px;background:color-mix(in srgb,var(--surface-ink) 32%,transparent);}
.film-site .simple-player .volume-flyout input::-moz-range-thumb{box-sizing:border-box;width:12px;height:12px;border:1px solid var(--surface-edge);border-radius:50%;background:var(--gold);}
.film-site .simple-player input.simple-seek{appearance:none!important;-webkit-appearance:none!important;box-sizing:border-box;height:20px!important;min-height:20px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;}
.film-site .simple-player input.simple-seek::-webkit-slider-runnable-track{height:3px!important;border:0;border-radius:999px;}
.film-site .simple-player input.simple-seek::-moz-range-track{height:3px!important;border:0;border-radius:999px;}
/* No theme-specific border removal on the filter row. */
:root[data-theme] .film-site .collection-heading-row>.music-filters{border:0!important;}

/* A single continuous video chapter, ending exactly where works begins. */
.film-site{overflow-x:clip;overflow-y:visible;}
.film-site #about.about-chapter{position:relative;isolation:isolate;overflow:visible;background:#17231f!important;background-image:none!important;}
.film-site #about.about-chapter>.about-video-backdrop{position:absolute;inset:calc(-1 * var(--opening-background-lift,16px)) 0 0;overflow:clip;z-index:-1;}
.film-site #about.about-chapter>.about-video-backdrop video{position:sticky;top:0;width:100%;height:100svh;display:block;object-fit:cover;}
.film-site #about.about-chapter>.about-video-backdrop .visual-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0c181f9c,#0c181f24 80%),linear-gradient(0deg,#0c181f82,transparent 70%);pointer-events:none;}
.film-site #about.about-chapter>:is(.cinematic-hero,.about-note,.profile-highlights){background:transparent!important;background-image:none!important;}
.film-site #about .cinematic-hero{min-height: min(780px,86svh);padding:100px var(--edge) 60px;}
.film-site #about .hero-copy h1{font-size:clamp(58px,8.5vw,112px);margin:16px 0 12px;}
.film-site #about .hero-copy h1>span{font-size:clamp(27px,3.3vw,44px);margin-top:12px;}
.film-site #about .hero-intro{margin-block:14px;}
.film-site #about .hero-proof{margin-bottom:16px;}
.film-site #about .about-note{padding:26px var(--edge);gap:22px;}
.film-site #about .profile-highlights{padding:28px var(--edge) 32px;}
.film-site #about .highlights-heading h2{margin-block:8px;}
.film-site #about .highlights-heading>p{margin-block:8px;}
.film-site #about .highlights-grid{gap:14px;margin-top:18px;}
.film-site #about .highlights-grid>article{padding:16px;}
.film-site #about .highlights-grid h3{min-height:54px;margin:10px 0 6px;}
.film-site #about .highlights-grid p{margin-block:8px;line-height:1.7;}
.film-site #about .highlights-footnote{margin-top:16px;}
.film-site #about :is(.about-note p,.about-note p span,.about-stamps small,.highlights-heading>p,.highlights-footnote){color:#e0e6e2!important;}
.film-site #about .profile-highlights h2{color:#f6f1e5;}
.film-site #about .highlights-grid>article h3{color:var(--surface-ink)!important;}
.film-site #about .highlights-grid>article :is(p,.highlight-label,.eyebrow){color:var(--surface-muted)!important;}
@media(max-width:760px){.film-site #about .cinematic-hero{min-height:72svh;padding-top:110px;padding-bottom:46px;}.film-site #about .about-note{gap:14px;padding-block:22px;}.film-site #about .profile-highlights{padding-block:22px 28px;}.film-site #about .highlights-grid{gap:12px;}.film-site #about .highlights-grid h3{min-height:0;}}
/* Full-size square covers across every creative-tools category. The shared
   clipping radius also removes the pale corners outside rounded app artwork. */
.film-site #tools :is(.music-top-art,.poster-picture){aspect-ratio:1;overflow:hidden;background:transparent!important;border-radius:18%!important;isolation:isolate;}
.film-site #tools :is(.music-top-art,.poster-picture) img{width:100%;height:100%;box-sizing:border-box;padding:0;object-fit:contain!important;object-position:center!important;background:transparent;border-radius:inherit;image-rendering:auto;}
.film-site :is([data-tool-icon=ai-brand],[data-tool-icon=gear-brand]) .poster-placeholder{display:none;}
/* The existing Codex PNG includes a large transparent margin and a white mark. */
.film-site [data-tool-icon=ai-brand] img[src="/assets/codex-official.png"]{padding:0;background:transparent;filter:brightness(0);transform:scale(3)!important;}

/* A complete app-style tile, rather than a floating logo on acrylic.
   Keep the full-size cover and shared crop; only the backing changes. */
.film-site #tools :is([data-tool-icon=ai-brand],[data-tool-icon=gear-brand]) :is(.music-top-art,.poster-picture){
 background:var(--tool-tile-color,#eeefec)!important;
 box-shadow:inset 0 0 0 1px rgba(30,40,36,.08),0 5px 14px rgba(0,0,0,.09);
}
.film-site #tools :is(.music-top-art,.poster-picture):has(img[src="/assets/ai-tools/claude.svg"]){--tool-tile-color:#f4e9de;}
.film-site #tools :is(.music-top-art,.poster-picture):has(img[src="/assets/ai-tools/gemini.svg"]){--tool-tile-color:#ecf0fa;}
.film-site #tools :is(.music-top-art,.poster-picture):has(img[src="/assets/ai-tools/chatgpt.svg"]){--tool-tile-color:#e4eee9;}
.film-site #tools :is(.music-top-art,.poster-picture):has(img[src="/assets/codex-official.png"]){--tool-tile-color:#eeeae3;}
.film-site #tools :is(.music-top-art,.poster-picture):has(img[src="/assets/ai-tools/suno.svg"]){--tool-tile-color:#f4e6dc;}
/* Wide wordmarks need breathing room inside the full-size tile, not outside it. */
.film-site #tools [data-tool-icon=gear-brand] img:is([src="/assets/sony.svg"],[src="/assets/dji.svg"],[src="/assets/gear-tools/zeniko.svg"]){padding:8%;}
.film-site .site-header .wordmark{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;}
.film-site .site-header .header-logo{display:flex;align-items:center;justify-content:center;flex:none;width:80px;height:44px;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;}
/* Align visible artwork, not the PNG's transparent outer canvas. */
.film-site .site-header .header-logo img{display:block;width:68px;height:68px;max-width:none;object-fit:contain;transform:translateY(-1.15px);}
:root[data-theme=dark] .film-site .site-header .header-logo img{filter:invert(1) hue-rotate(180deg);}
@media(max-width:600px){.film-site .site-header .wordmark{gap:0;}.film-site .site-header .header-logo{width:64px;height:36px;}.film-site .site-header .header-logo img{width:56px;height:56px;transform:translateY(-.95px);}}
/* Content-driven chapter spacing. No changes to card materials or motion. */
.film-site :is(#works,#tools,#interests).chapter{
 padding-bottom:clamp(36px,4vw,60px);
}
.film-site .chapter>.section-heading{
 min-height:0;
 gap:24px;
 padding-block:100px 24px;
 margin-bottom:18px;
}
.film-site .chapter>.section-heading h2{
 font-size:clamp(34px,4.2vw,60px);
 line-height:1.22;
 margin:12px 0 0;
}
.film-site .chapter>.section-heading>p{margin-block:0;}
.film-site :is(#interests,#tools) .collection-heading-row,
.film-site .portfolio-works .collection-heading-row{
 height:auto;
 min-height:0;
 display:flex;
 flex-wrap:wrap;
 gap:10px 16px;
 margin-block:14px 18px;
}
.film-site .collection-heading-row>.music-top-heading{margin:0;}
.film-site .portfolio-works .collection-heading-row>.portfolio-filters{
 width:100%;
 grid-template-rows:none;
 gap:6px;
 margin:0;
}
.film-site .portfolio-works .portfolio-filters .music-chip-group{flex-wrap:wrap;}
.film-site .portfolio-works .portfolio-secondary-filters:empty{display:none;}
.film-site .likes-status{margin-block:12px;}
.film-site .music-top-five{margin-bottom:12px;}
.film-site .poster-collection{margin-top:12px;}
.film-site .poster-collection>.poster-toolbar{padding-block:10px;}
/* Offscreen 320px intrinsic placeholders were taller than the 70% cards,
   stretching the entire horizontal row. Lay out their real compact contents;
   artwork still uses native lazy loading. Keep the hover clearance intact. */
.film-site .poster-collection .poster-window>.poster-rail>.poster-card{
 content-visibility:visible;
 contain-intrinsic-size:none;
}
.film-site #about .cinematic-hero{min-height:0;padding-block:110px 60px;}
.film-site #about .about-note{padding-block:20px;}
.film-site #about .profile-highlights{padding-block:24px 28px;}
:root .film-site #contact.contact-compact{min-height:0;padding-block:100px 32px;}
@media(max-width:760px){
 .film-site .chapter>.section-heading{padding-block:92px 18px;gap:12px;margin-bottom:14px;}
 .film-site .chapter>.section-heading h2{font-size:clamp(32px,7.5vw,46px);margin-top:10px;}
 .film-site #interests .collection-heading-row{display:flex;height:auto;min-height:0;}
 .film-site #interests .collection-heading-row>.music-filters{width:100%;}
 .film-site .portfolio-works .collection-heading-row{display:flex;min-height:0;}
 .film-site .portfolio-works .collection-heading-row>.portfolio-filters{order:initial;}
 .film-site #about .cinematic-hero{min-height:0;padding-block:110px 54px;}
 :root .film-site #contact.contact-compact{padding-block:92px 28px;}
}
/* Shared text row: the eyebrow no longer offsets one column independently. */
:root .film-site .chapter>.section-heading:has(.editorial-description),
:root .film-site #contact .contact-heading{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 align-items:start;column-gap:clamp(28px,4vw,60px);row-gap:18px;
}
:root .film-site .chapter>.section-heading:has(.editorial-description)>div,
:root .film-site #contact .contact-heading>div{display:contents;}
:root .film-site .chapter>.section-heading:has(.editorial-description) .eyebrow,
:root .film-site #contact .contact-heading .eyebrow{grid-column:1/-1;grid-row:1;}
:root .film-site .chapter>.section-heading:has(.editorial-description) h2,
:root .film-site #contact .contact-heading h2{
 grid-column:1;grid-row:2;margin:0;padding:0;
 font-size:clamp(26px,2.1vw,34px);line-height:1.35;
 font-weight:500;letter-spacing:-.035em;text-wrap:balance;
 text-box:trim-start text;
}
:root .film-site .chapter>.section-heading>p.editorial-description,
:root .film-site #contact .contact-heading>p.editorial-description{
 grid-column:2;grid-row:2;margin:0;padding:0;
 /* Noto Serif CJK has a lower visible glyph edge than Noto Sans. */
 padding-top:calc((clamp(26px,2.1vw,34px) - 13px)*.28);
 font-size:13px;line-height:1.8;letter-spacing:0;
 text-box:trim-start text;
}
:root .film-site .editorial-description>span{margin-bottom:6px;}
:root .film-site .editorial-description>span:last-child{margin-bottom:0;}
/* Daytime editorial panels use the same warm paper palette as the chapters. */
:root[data-theme=light] .film-site #about .editorial-panel{
 color:#29382f;background:linear-gradient(90deg,#f7f5eced,#ecefe7e8);
 --suit-ink:#29382f;--suit-muted:#56635a;--suit-accent:#85632c;
 --ink:#29382f;--muted:#56635a;--gold:#85632c;
}
:root[data-theme=light] .film-site #about .editorial-panel :is(h2,h3,p){color:#29382f;}
:root[data-theme=light] .film-site #about .editorial-panel :is(em,.editorial-closing,.personality-mark,.milestone-index,.milestone-label,summary){color:#85632c;}
:root[data-theme=light] .film-site #about .editorial-panel :is(.editorial-footnote,.personality-mark small){color:#56635a;}
:root[data-theme=light] .film-site #about .editorial-milestone-list article{background:#ffffff6b;border-color:#53674b30;}
:root[data-theme=light] .film-site #about .about-intro-tabs button{background:#f7f5ece8;color:#29382f;border-color:#53674b45;}
:root[data-theme=light] .film-site #about .about-intro-tabs button[aria-pressed=true]{background:#e0cda3;border-color:#bd9c61;}
:root[data-theme=light] .film-site .portfolio-backdrop-shade{background:linear-gradient(180deg,#f7f6efd9,#f7f6efa8 35%,#f7f6efb3 70%,#f7f6efd9);}
@media(max-width:760px){
 :root .film-site .chapter>.section-heading:has(.editorial-description),
 :root .film-site #contact .contact-heading{grid-template-columns:1fr;row-gap:14px;}
 :root .film-site .chapter>.section-heading:has(.editorial-description) h2,
 :root .film-site #contact .contact-heading h2{font-size:clamp(25px,5.2vw,32px);}
 :root .film-site .chapter>.section-heading>p.editorial-description,
 :root .film-site #contact .contact-heading>p.editorial-description{grid-column:1;grid-row:3;padding-top:0;font-size:12px;line-height:1.85;}
}
/* Editorial copy belongs to the video, not to another opaque panel. */
.film-site .editorial-panel[hidden]{display:none!important;}
.about-intro-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:24px var(--edge) 12px;scroll-margin-top:88px;}
.about-intro-tabs button{font-size:13px;line-height:1.5;padding:10px 20px;border:1px solid #ffffff38;border-radius:999px;background:#17232b66;color:#f4f0e5;cursor:pointer;backdrop-filter:blur(16px);}
.film-site .about-intro-tabs button[aria-pressed=true]{background:#dfcda2;color:#17232b!important;border-color:#dfcda2;}
.about-intro-tabs button:focus-visible{outline:2px solid #e5ce9b;outline-offset:3px;}
.film-site #about .editorial-panel{padding-block:28px 36px;border-top:0;}
.film-site #about .editorial-milestones header{grid-template-columns:1fr;gap:0;margin-bottom:20px;}
.film-site #about .editorial-milestones header .editorial-prose{max-width:90ch;font-size:14px;line-height:1.85;}
.film-site #about .editorial-milestones header .editorial-prose p{margin-bottom:6px;}
.film-site #about .editorial-milestone-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
.film-site #about .editorial-milestone-list article{display:block;padding:18px;border:1px solid #ffffff30;border-radius:18px;background:#14212b66;}
.film-site #about .milestone-index{display:block;margin-bottom:10px;padding:0;}
.film-site #about .editorial-milestone-list h3{font-size:22px;line-height:1.4;}
.editorial-milestone-list details{margin-top:14px;font-size:12px;line-height:1.9;}
.editorial-milestone-list summary{cursor:pointer;color:#e5ce9b;}
.editorial-milestone-list details p{margin:10px 0 0;}
.film-site #about .editorial-hero{min-height:82svh;display:flex;align-items:center;padding-block:120px 90px;}
.film-site #about .editorial-hero .hero-copy{width:min(780px,76%);}
.film-site #about .editorial-hero .editorial-signature{display:block;font-family:Georgia,serif;font-size:24px;letter-spacing:.02em;margin-top:28px;color:#e5ce9b;}
.film-site #about .editorial-hero h1{font-size:clamp(38px,5.3vw,78px);line-height:1.24;letter-spacing:-.04em;margin:16px 0 24px;font-weight:500;}
.film-site #about .editorial-hero h1 em{font-style:normal;color:#e5ce9b;}
.film-site #about .editorial-hero .hero-intro{font-size:clamp(14px,1.15vw,17px);line-height:1.95;color:#eeeae1;}
.film-site #about .editorial-hero .hero-links{margin-top:26px;}
.editorial-welcome,.editorial-personality,.editorial-milestones{padding:clamp(36px,5vw,72px) var(--edge);color:#f4f0e5;background:linear-gradient(90deg,rgba(12,22,27,.62),rgba(12,22,27,.76));}
.editorial-welcome,.editorial-personality{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,7vw,100px);border-top:1px solid #ffffff24;}
.editorial-prose{max-width:64ch;font-size:14px;line-height:2.05;}
.editorial-prose p{margin:0 0 16px;}
.editorial-prose p:last-child{margin-bottom:0;}
.film-site .editorial-prose p,.film-site .editorial-description{font-weight:400;letter-spacing:.015em;}
.editorial-welcome>.editorial-prose,.editorial-personality>.editorial-prose{padding-top:38px;}
.editorial-label h2,.editorial-personality h2,.editorial-milestones h2{font-weight:500;font-size:clamp(26px,2.6vw,40px);line-height:1.5;margin:14px 0 20px;letter-spacing:-.025em;}
.editorial-personality h2 em{font-style:normal;color:#e5ce9b;}
.personality-mark{display:block;color:#e5ce9b;font:24px Georgia,serif;}
.personality-mark small{font:12px system-ui;color:#d7ded8;margin-left:8px;}
.editorial-closing{color:#e5ce9b;}
.welcome-letter summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-block:1px solid #ffffff30;color:#e5ce9b;font-size:12px;}
.welcome-letter summary::-webkit-details-marker{display:none;}
.welcome-letter>div{padding-top:20px;}
.welcome-letter summary:focus-visible{outline:2px solid #e5ce9b;outline-offset:4px;}
.editorial-milestones header{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,7vw,100px);margin-bottom:30px;}
.editorial-milestone-list article{display:grid;grid-template-columns:40px minmax(200px,.8fr) minmax(0,1.2fr);gap:24px;align-items:start;padding:28px 0;border-top:1px solid #ffffff30;}
.milestone-index{font:12px Georgia,serif;color:#e5ce9b;padding-top:7px;}
.editorial-milestone-list h3{font-size:clamp(21px,2vw,30px);font-weight:500;line-height:1.4;margin:0 0 10px;}
.milestone-label{font-size:11px;color:#e5ce9b;letter-spacing:.04em;}
.editorial-milestone-list article>p{font-size:13px;line-height:1.95;margin:0;max-width:64ch;}
.editorial-footnote{font-size:10px;color:#d7ded8;line-height:1.7;}
.film-site .chapter>.section-heading:has(.editorial-description){align-items:start;gap:clamp(24px,5vw,72px);}
.film-site .chapter>.section-heading:has(.editorial-description)>div{flex:1;min-width:0;}
.film-site .chapter>.section-heading:has(.editorial-description) h2{font-size:clamp(30px,3.4vw,52px);line-height:1.45;max-width:15em;}
.film-site .chapter>.section-heading>p.editorial-description{flex:1;max-width:58ch;font-size:13px;line-height:1.95;padding-top:24px;}
.editorial-description>span{display:block;margin-bottom:12px;}
.editorial-description>span:last-child{margin-bottom:0;}
.film-site #contact .contact-heading{align-items:start;gap:32px;}
.film-site #contact .contact-heading h2{font-size:clamp(26px,3vw,40px);line-height:1.5;max-width:14em;}
.film-site #contact .contact-heading>p{max-width:58ch;line-height:1.95;flex:1;font-size:13px;}
.film-site .editorial-farewell{text-align:center;padding:clamp(42px,6vw,80px) var(--edge) 40px;background:#17231f;color:#eeeae1;}
.editorial-farewell h2{font-size:clamp(23px,2.5vw,36px);font-weight:500;line-height:1.6;margin:18px 0 24px;}
.editorial-farewell p{font-size:13px;line-height:2;margin:12px auto;max-width:65ch;}
.farewell-signature{display:block;font:italic 30px Georgia,serif;color:#e5ce9b;margin-top:26px;}
/* Pair the title's first line with the first prose baseline, not the eyebrow. */
.film-site .chapter>.section-heading:has(.editorial-description),
.film-site #contact .contact-heading{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,72px);
}
.film-site .chapter>.section-heading:has(.editorial-description) h2,
.film-site #contact .contact-heading h2{font-size:clamp(28px,2.8vw,42px);line-height:1.5;font-weight:500;letter-spacing:-.025em;margin:12px 0 0;max-width:none;text-wrap:balance;}
.film-site .chapter>.section-heading>p.editorial-description,
.film-site #contact .contact-heading>p.editorial-description{max-width:none;margin:0;padding-top:32px;font-size:14px;line-height:1.95;}
.film-site .editorial-description>span{margin-bottom:10px;}
:root[data-theme] .film-site #contact footer.site-footer.site-footer--filing{
 display:flex;flex-direction:column;width:100%;max-width:none;gap:6px;margin:24px 0 0;padding:18px 0 0;min-height:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none!important;background-image:none!important;box-shadow:none!important;backdrop-filter:none!important;
}
.film-site #contact .site-footer .footer-note{margin:0;font-size:11px;line-height:1.7;color:var(--muted);text-align:center;}
.film-site #contact .site-footer .site-filing-line{margin:0;font-size:11px;line-height:1.7;white-space:normal;text-align:center;}
@media(max-width:760px){
 .film-site #about .editorial-hero{min-height:76svh;padding-block:120px 86px;}
 .film-site #about .editorial-hero .hero-copy{width:100%;}
 .film-site #about .editorial-hero h1{font-size:clamp(30px,7.3vw,48px);}
 .editorial-welcome,.editorial-personality,.editorial-milestones header{grid-template-columns:1fr;gap:20px;}
 .editorial-welcome>.editorial-prose,.editorial-personality>.editorial-prose{padding-top:0;}
 .editorial-milestone-list article{grid-template-columns:28px minmax(0,1fr);gap:12px;padding-block:22px;}
 .editorial-milestone-list article>p{grid-column:2;}
 .film-site .chapter>.section-heading>p.editorial-description{padding-top:0;max-width:none;}
 .film-site #contact .contact-heading{flex-direction:column;gap:16px;}
 .film-site #contact .contact-heading>p{max-width:none;}
 .desktop-break{display:none;}
 .film-site .chapter>.section-heading:has(.editorial-description),.film-site #contact .contact-heading{grid-template-columns:1fr;gap:14px;}
 .film-site .chapter>.section-heading>p.editorial-description,.film-site #contact .contact-heading>p.editorial-description{padding-top:0;font-size:13px;}
 .film-site #about .editorial-milestone-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .film-site #about .editorial-milestone-list h3{font-size:18px;}
}
@media(max-width:420px){.film-site #about .editorial-milestone-list{grid-template-columns:1fr;}.about-intro-tabs button{font-size:12px;padding:9px 13px;}}
.film-site .record-widget .background-music-toggle{
 position:absolute;right:0;bottom:calc(100% + 9px);width:auto;min-width:76px;
 padding:7px 11px;min-height:30px;display:flex;align-items:center;justify-content:center;
 gap:5px;border:1px solid #ffffff70;border-radius:999px;
 background:#f4f0e8e8;color:#29382f;font-size:11px;line-height:1.2;
 white-space:nowrap;box-shadow:0 3px 14px #10251d20;cursor:pointer;
 backdrop-filter:blur(16px);
}
.film-site .record-widget .background-music-toggle svg{width:12px;height:12px;}
:root[data-theme=dark] .film-site .record-widget .background-music-toggle{background:#23332de8;color:#f4f0e8;border-color:#ffffff45;}
.film-site .background-music-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* The opening video belongs only to About; other chapters own their scenery. */
:root .film-site #about>.about-video-backdrop{display:block;}
/* Extend each incoming scene into the preceding scene: image-to-image,
   rather than fading both images down to a blank theme-colored strip. */
.film-site{--chapter-seam:#17231f;--chapter-blend:clamp(48px,4vw,76px);}
:root[data-theme=light] .film-site{--chapter-seam:#f4f1e7;}
:root .film-site #about.about-chapter{background-color:var(--chapter-seam)!important;}
:root .film-site :is(#works,#tools,#interests,#contact).chapter{overflow:visible;background-color:transparent!important;}
.film-site :is(#works,#tools,#interests,#contact)>.portfolio-backdrop{
 top:calc(-1 * var(--chapter-blend));bottom:0;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--chapter-blend));
 mask-image:linear-gradient(to bottom,transparent,#000 var(--chapter-blend));
}
.film-site #about>.about-video-backdrop{-webkit-mask-image:none;mask-image:none;}
/* A little extra image coverage also keeps parallax movement inside the scene. */
.film-site .portfolio-backdrop-frame{width:max(112%,calc(100vh * 1.44));height:112%;}
:root[data-theme=light] .film-site .portfolio-backdrop-shade{background:linear-gradient(180deg,#f7f6efa8,#f7f6efa0 35%,#f7f6efa8 70%,#f7f6efa8);}
:root[data-theme=dark] .film-site .portfolio-backdrop-shade{background:linear-gradient(180deg,#0d1814a8,#0d18148f 35%,#0d1814a0 70%,#0d1814a8);}
:root .film-site #about .editorial-panel{position:relative;isolation:isolate;background:transparent!important;}
.film-site #about .editorial-panel::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#14272096,#14272070);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);}
:root[data-theme=light] .film-site #about .editorial-panel::before{background:linear-gradient(90deg,#f7f5eccc,#ecefe7b8);}
/* Keep a short identity line under the approved headline, rather than another
   paragraph of greeting copy. */
:root .film-site #about .editorial-hero .hero-copy{width:min(780px,100%);}
:root .film-site #about .editorial-hero h1{margin:12px 0 8px;line-height:1.22;font-size:clamp(38px,5.1vw,74px);}
:root .film-site #about .editorial-hero .hero-intro{margin:18px 0 0;font-size:clamp(14px,1.1vw,17px);letter-spacing:.04em;line-height:1.9;}
:root .film-site #about .editorial-hero .hero-links{margin-top:20px;}
/* Enter with paint-only motion: card transforms, optical curves and the
   independently calibrated horizontal edge masks stay untouched. */
@keyframes scene-reveal{from{opacity:.15}to{opacity:1}}
.film-site .editorial-panel:not([hidden]){animation:scene-reveal .7s cubic-bezier(.22,1,.36,1) both!important;}
.film-site .detail-dialog[open],.film-site .resource-choice-popover:popover-open,.film-site .episode-index-popover:popover-open{animation:scene-reveal .55s cubic-bezier(.22,1,.36,1) both!important;}
.film-site .detail-dialog[open]::backdrop{animation:scene-reveal .55s ease-out both!important;}
/* Concurrent old/new fades never pass through an empty frame. Only named
   collections are captured: no root snapshot, scenery freeze or entrance jump. */
html.collection-view-transition{view-transition-name:none;overflow-anchor:none;}
/* Snapshot layers are visual only; clicks always reach the live tabs beneath. */
html.collection-view-transition::view-transition,
html.collection-view-transition::view-transition-group(*),
html.collection-view-transition::view-transition-image-pair(*),
html.collection-view-transition::view-transition-old(*),
html.collection-view-transition::view-transition-new(*){pointer-events:none;}

html.collection-view-transition::view-transition-group(*){animation-duration:850ms;animation-timing-function:cubic-bezier(.25,.1,.25,1);}
html.collection-view-transition::view-transition-old(*){animation:collection-crossfade-out 850ms cubic-bezier(.25,.1,.25,1) both;mix-blend-mode:normal;}
html.collection-view-transition::view-transition-new(*){animation:collection-crossfade-in 850ms cubic-bezier(.25,.1,.25,1) both;mix-blend-mode:normal;}
@keyframes collection-crossfade-out{from{opacity:1}to{opacity:0}}
@keyframes collection-crossfade-in{from{opacity:0}to{opacity:1}}
.film-site .collection-is-transitioning{overflow-anchor:none;}
.film-site .collection-is-transitioning :is(.scene-enter,.music-top-five,.poster-collection){animation:none!important;}
/* One compact editorial scale for every interest, including books and series. */
:root .film-site #interests>.section-heading h2{font-size:clamp(26px,2.5vw,38px);line-height:1.5;}
:root .film-site #interests>.section-heading>p.editorial-description{font-size:13px;line-height:1.9;}
@media(max-width:760px){:root .film-site #interests>.section-heading h2{font-size:clamp(24px,5.8vw,30px);}:root .film-site #interests>.section-heading>p.editorial-description{font-size:12px;}}
.film-site :is(.about-intro-tabs button,.hero-links a,.project-link-card,summary){transition:color .22s,background-color .22s,border-color .22s,opacity .22s,transform .3s;}
.film-site :is(.hero-links a,.about-intro-tabs button,.project-link-card):active{translate:0 1px;}
@media(max-width:760px){:root .film-site #about .editorial-hero h1{font-size:clamp(34px,8.5vw,52px);}:root .film-site #about .editorial-hero .hero-intro{font-size:13px;}.film-site #about .editorial-hero{padding-bottom:64px;}}
@media(prefers-reduced-motion:reduce){.film-site .scene-enter,.film-site .editorial-panel:not([hidden]),.film-site .music-collection,.film-site .chapter>.music-top-five,.film-site .detail-dialog[open],.film-site .detail-dialog[open]::backdrop,.film-site .resource-choice-popover:popover-open,.film-site .episode-index-popover:popover-open{animation:none!important;}.film-site :is(.about-intro-tabs button,.hero-links a,.project-link-card,summary){transition:none;}.film-site :is(.hero-links a,.about-intro-tabs button,.project-link-card):active{translate:none;}}

html:has(.film-site){scroll-behavior:smooth!important;}
@media(prefers-reduced-motion:reduce){html:has(.film-site){scroll-behavior:auto!important;}}


/* Preserve paragraph boundaries within the small editorial greeting. */
:root .film-site .editorial-description>span{display:block;}

:root .film-site #about .editorial-hero .hero-intro{max-width:32em;text-wrap:pretty;font-weight:400;}
/* Role-based theme palette. Acrylic geometry, media and motion stay shared. */
:root[data-theme=light]{
 --theme-copy:#303030;--theme-secondary:#666666;--theme-emphasis:#414141;
 --suit-paper:#fcfcfc;--suit-ink:#303030;--suit-muted:#666666;
 --suit-accent:#414141;--suit-line:#55555529;
 --glass-tint:rgba(250,250,250,.72);--glass-edge:rgba(255,255,255,.82);
 --glass-shadow:0 8px 28px #00000018,inset 0 1px #ffffffcc;
}
:root[data-theme=dark]{
 --theme-copy:#f3f3f3;--theme-secondary:#bdbdbd;--theme-emphasis:#ededed;
 --suit-paper:#191919;--suit-ink:#f0f0f0;--suit-muted:#bdbdbd;
 --suit-accent:#ededed;--suit-line:#cccccc2e;
 --glass-tint:rgba(30,30,30,.74);--glass-edge:rgba(210,210,210,.24);
 --glass-shadow:0 8px 28px #00000045,inset 0 1px #ffffff26;
}
:root[data-theme=light] .film-site{
 --surface-ink:#303030;--surface-muted:#666666;--surface-hover:rgba(255,225,236,.91);
 --surface-hover-edge:#ffffff;--surface-hover-shadow:0 12px 34px #00000029,inset 0 1px #fff;
 --chapter-seam:#fcfcfc;--paper:#fcfcfc;--header-fill:rgba(255,255,255,.76);
 --selection-fill:#f6dce6;--selection-ink:#303030;--reaction-fill:rgba(250,250,250,.88);
 --reaction-ink:#666666;--reaction-active-fill:rgba(255,224,235,.96);--reaction-active-ink:#60434e;
 --like-red:#60434e;--popup-action-color:#414141;--popup-action-glow:#41414130;
}
:root[data-theme=dark] .film-site{
 --surface-ink:#f0f0f0;--surface-muted:#bdbdbd;--surface-hover:rgba(13,57,39,.93);
 --surface-hover-edge:#9abfab80;--surface-hover-shadow:0 12px 34px #00000059,inset 0 1px #ffffff3d;
 --chapter-seam:#191919;--paper:#191919;--header-fill:rgba(38,38,38,.82);
 --selection-fill:#123e2b;--selection-ink:#f3f3f3;--reaction-fill:rgba(40,40,40,.9);
 --reaction-ink:#d0d0d0;--reaction-active-fill:rgba(13,57,39,.95);--reaction-active-ink:#f0f0f0;
 --like-red:#f0f0f0;--popup-action-color:#f0f0f0;--popup-action-glow:#f0f0f040;
}
/* Neutral resting surfaces. Colour appears in interactive states. */
:root[data-theme] .film-site{--gold:var(--suit-accent);--ink:var(--suit-ink);--muted:var(--suit-muted);--line:var(--suit-line);}
:root[data-theme] .film-site .site-header{--surface-fill:var(--header-fill);background:var(--header-fill)!important;}
:root[data-theme] .film-site .poster-toolbar{color:var(--surface-ink);}
:root[data-theme] .film-site .poster-toolbar small{color:var(--surface-muted);}
:root[data-theme] .film-site .animated-tabs .tab-fluid-indicator{background:var(--selection-fill);}
:root[data-theme] .film-site .tabs.animated-tabs button[aria-pressed=true]{background:transparent!important;box-shadow:none!important;color:var(--selection-ink)!important;}
/* Neutral veils preserve the original media colours. */
:root[data-theme=light] .film-site .portfolio-backdrop-shade{background:linear-gradient(180deg,#ffffffab,#ffffffa3 45%,#ffffffab);}
:root[data-theme=dark] .film-site .portfolio-backdrop-shade{background:linear-gradient(180deg,#161616bd,#161616a8 45%,#161616c2);}
:root[data-theme=light] .film-site #about .editorial-panel::before{background:linear-gradient(90deg,#ffffffcc,#ffffffb8);}
:root[data-theme=dark] .film-site #about .editorial-panel::before{background:linear-gradient(90deg,#1919199c,#19191980);}
/* Identical reaction treatment on large and small collection cards. */
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart{
 background:var(--reaction-fill)!important;color:var(--reaction-ink)!important;border-color:color-mix(in srgb,var(--reaction-ink) 32%,transparent)!important;
}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart[aria-pressed=true]{
 background:var(--reaction-active-fill)!important;color:var(--reaction-active-ink)!important;border-color:color-mix(in srgb,var(--reaction-active-ink) 52%,transparent)!important;
}
/* Neutral readable lyrics, without outlines; RGB spectrum stays independent. */
:root[data-theme=dark] .desktop-lyric-original{color:#f7f7f7;text-shadow:0 1px 3px #00000066;}
:root[data-theme=dark] .desktop-lyric-translation{color:#20543c;text-shadow:0 1px 3px #ffffff88;}
:root[data-theme=light] .desktop-lyric-original{color:#303030;text-shadow:0 1px 2px #ffffff80;}
:root[data-theme=light] .desktop-lyric-translation{color:#ffe9f1;text-shadow:0 1px 3px #00000099;}
:root[data-theme] :is(.desktop-lyric-readable,.desktop-lyric-translation){-webkit-text-stroke:0;}
/* Player lyrics share the desktop colours; timing supplies the emphasis. */
:root[data-theme=dark] .film-site .simple-player{
 --lyric-original-color:#f7f7f7;--lyric-translation-color:#20543c;--lyric-soft-shadow:0 1px 3px #00000066;
}
:root[data-theme=light] .film-site .simple-player{
 --lyric-original-color:#303030;--lyric-translation-color:#ffe9f1;--lyric-soft-shadow:0 1px 2px #ffffff80;
}
:root[data-theme] .film-site .simple-player .lyric-lines p,
:root[data-theme] .film-site .simple-player .lyric-lines p.active{
 color:var(--lyric-original-color)!important;text-shadow:var(--lyric-soft-shadow);-webkit-text-stroke:0;
}
:root[data-theme] .film-site .simple-player .lyric-lines .lyric-original{
 color:var(--lyric-original-color);text-shadow:var(--lyric-soft-shadow);-webkit-text-stroke:0;
}
:root[data-theme] .film-site .simple-player .lyric-lines .lyric-translation,
:root[data-theme] .film-site .simple-player .lyric-lines p.active .lyric-translation{
 color:var(--lyric-translation-color)!important;text-shadow:var(--lyric-soft-shadow);-webkit-text-stroke:0;
}
/* One text palette across chapters, nested cards and dialogs. Local legacy
   gold variables must not override the theme when a collection is mounted. */
:root[data-theme] .film-site,
:root[data-theme] .film-site :is(.chapter,.film-hero,.about-note,.profile-highlights,.section-heading,.editorial-panel,.poster-card,.music-top-card,.rank-card,.detail-dialog,.contact-entry,.simple-player){
 --suit-ink:var(--theme-copy);--suit-muted:var(--theme-secondary);--suit-accent:var(--theme-emphasis);
 --ink:var(--theme-copy);--muted:var(--theme-secondary);--gold:var(--theme-emphasis);--muted-contrast:var(--theme-secondary);
}
:root[data-theme] .film-site #about{
 --suit-ink:var(--theme-copy);--suit-muted:var(--theme-secondary);--suit-accent:var(--theme-emphasis);
 --ink:var(--theme-copy);--muted:var(--theme-secondary);--gold:var(--theme-emphasis);
}
/* The hero always sits over darkened moving footage, so borrow the light
   palette here in either mode to keep its copy readable. */
:root[data-theme] .film-site #about .editorial-hero{
 --suit-ink:#f7f7f7;--suit-muted:#cccccc;--suit-accent:#cccccc;--gold:#cccccc;
}
:root[data-theme] .film-site #about .editorial-hero :is(h1,.hero-intro,.editorial-signature,.hero-caption,.scroll-cue){color:#f7f7f7!important;}
:root[data-theme] .film-site #about .editorial-hero :is(h1 em,.eyebrow){color:#cccccc!important;}
:root[data-theme] .film-site #about .editorial-panel :is(h2,p,small){color:var(--theme-copy)!important;}
:root[data-theme] .film-site #about .editorial-panel :is(em,.editorial-closing,.personality-mark,.milestone-index,.milestone-label,summary,.eyebrow){color:var(--theme-emphasis)!important;}
:root[data-theme] .film-site :is(.editorial-milestone-list summary,.farewell-signature,.music-top-rank,.rank-number,.tool-short,.contact-links small,.contact-entry small,.detail-resource-link,.detail-resource-link span,.detail-facts dt,.detail-title small){color:var(--theme-emphasis)!important;}
:root[data-theme] .film-site :is(.detail-resource-link:hover,.cinematic-badge a:hover){color:var(--theme-copy)!important;}
:root[data-theme] .film-site :is(.disc-fallback,.film-edge,.frame-note button){color:var(--theme-copy);}
:root[data-theme] .film-site .simple-player :is(.translation-toggle,.mode-flyout button,.mute-toggle)[aria-pressed=true]{color:var(--theme-emphasis)!important;}
:root[data-theme] .film-site .simple-player .simple-player-bottom :is(.transport-controls,.utility-controls) button:is(:hover,:focus-visible){color:var(--theme-emphasis)!important;}
:root[data-theme] .film-site :is(.hero-links .primary,.guestbook .primary){background:var(--selection-fill)!important;color:var(--selection-ink)!important;border-color:var(--suit-line)!important;}
/* Interaction tint is shared by pointer, keyboard and touch. No transform or
   layout rules here: keep the existing curved/tilting card motion intact. */
:root[data-theme=light] .film-site{--interaction-ink:#60434e;--interaction-soft:rgba(255,225,236,.86);}
:root[data-theme=dark] .film-site{--interaction-ink:#f0f0f0;--interaction-soft:rgba(13,57,39,.9);}
:root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.contact-entry,.highlights-grid>article,.message-list>article,.simple-details,.player-control-flyout){
 transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
:root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.contact-entry,.highlights-grid>article,.message-list>article):is(:focus-visible,:focus-within,:active){
 background:var(--surface-hover)!important;border-color:var(--surface-hover-edge)!important;box-shadow:var(--surface-hover-shadow)!important;
}
:root[data-theme] .film-site :is(.tabs button,.music-chip,.site-header a,.theme-toggle,.simple-player button,.guestbook button,.detail-resource-link,.contact-entry){
 transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
:root[data-theme] .film-site :is(.tabs button,.music-chip,.site-header a,.theme-toggle,.simple-player button,.guestbook button,.detail-resource-link):is(:focus-visible,:active){
 background-color:var(--interaction-soft)!important;color:var(--interaction-ink)!important;
}
:root[data-theme] .film-site :is(.poster-collection .poster-window .poster-card,.chapter .music-top-five .music-top-card)>.collection-heart:is(:hover,:focus-visible,:active){
 background:var(--interaction-soft)!important;color:var(--interaction-ink)!important;border-color:color-mix(in srgb,var(--interaction-ink) 35%,transparent)!important;
}
:root[data-theme] .film-site .simple-player:is(:hover,:focus-within,:active){--surface-fill:var(--surface-hover);}
@media(hover:hover){
 :root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.contact-entry,.highlights-grid>article,.message-list>article):hover{background:var(--surface-hover)!important;}
 :root[data-theme] .film-site :is(.tabs button,.music-chip,.site-header a,.theme-toggle,.simple-player button,.guestbook button,.detail-resource-link):hover{background-color:var(--interaction-soft)!important;color:var(--interaction-ink)!important;}
}
:root[data-theme] .film-site :is(.music-chip[aria-pressed=true],.mode-flyout button[aria-pressed=true],.music-queue button[aria-current=true]){background-color:var(--selection-fill)!important;color:var(--selection-ink)!important;}
:root[data-theme] .film-site .music-queue button[aria-current=true] :is(strong,small){color:var(--selection-ink)!important;}
:root[data-theme=light] .film-site .simple-player.record-panel::after{background-color:rgba(255,255,255,.22)!important;}
:root[data-theme=dark] .film-site .simple-player.record-panel::after{background-color:rgba(15,15,15,.52)!important;}
@media(prefers-reduced-motion:reduce){
 :root[data-theme] .film-site :is(.site-header,.chapter .music-top-card,.chapter .poster-card,.chapter .rank-card,.work-cover,.contact-entry,.tabs button,.music-chip,.simple-player button){transition-duration:.01ms;}
}
/* Selection and action bubbles use only their own theme's tint. */
:root[data-theme] .film-site :is(.tabs,.music-filters,.about-intro-tabs,.portfolio-filters,.portfolio-secondary-filters) button[aria-pressed=true],
:root[data-theme] .film-site :is(.detail-songline .detail-play-button,.simple-controls .simple-play,.background-music-toggle){
 background:var(--selection-fill)!important;color:var(--selection-ink)!important;border-color:var(--surface-edge)!important;
}
:root[data-theme] .film-site .tabs.animated-tabs button[aria-pressed=true]{background:transparent!important;}
:root[data-theme] .film-site #about .about-intro-tabs button{
 background:var(--surface-fill)!important;color:var(--surface-ink)!important;border-color:var(--surface-edge)!important;
}
:root[data-theme] .film-site #about .about-intro-tabs button[aria-pressed=true]{background:var(--selection-fill)!important;color:var(--selection-ink)!important;}
:root[data-theme] .film-site #about .editorial-panel{background:transparent!important;}
:root[data-theme] .film-site #about .editorial-panel::before{
 --intro-blend:clamp(64px,8vw,120px);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--intro-blend),#000 calc(100% - var(--intro-blend)),transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 var(--intro-blend),#000 calc(100% - var(--intro-blend)),transparent);
}
:root[data-theme=dark] .film-site .simple-player .lyric-lines .lyric-translation,
:root[data-theme=dark] .film-site .simple-player .lyric-lines p.active .lyric-translation{text-shadow:0 1px 3px #ffffff88;}
:root[data-theme] .film-site{--progress-dot:var(--surface-muted);--progress-current:var(--theme-emphasis);}
:root[data-theme] .film-site .animated-ranking-switch .ranking-indicator{background:var(--selection-fill);}
:root[data-theme] .film-site .simple-details .music-queue button[aria-current=true]{box-shadow:inset 3px 0 color-mix(in srgb,var(--selection-fill) 70%,var(--selection-ink));}
:root[data-theme] .film-site .music-queue li{border-color:var(--suit-line);}
:root[data-theme=light] .film-site .simple-player .lyric-lines .lyric-translation,
:root[data-theme=light] .film-site .simple-player .lyric-lines p.active .lyric-translation{text-shadow:0 1px 3px #00000099;}
@media(hover:hover){
 :root[data-theme] .film-site #about .about-intro-tabs button:hover{background:var(--surface-hover)!important;}
}

/* Reading is direct; the backdrop remains continuous behind About. */
:root[data-theme] .film-site #about .editorial-panel::before{content:none!important;}
:root[data-theme] .film-site #about .editorial-milestone-list article{background:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important;}
:root[data-theme] .film-site #about .milestone-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;}
:root[data-theme] .film-site #about .milestone-title h3{margin:0;}
:root[data-theme] .film-site #about .milestone-title .milestone-label{display:inline;}
:root[data-theme] .film-site #about .welcome-letter{border:0;padding:0;}
/* Selection is disabled for editorial content; form fields remain editable. */
.film-site,.film-site *, .desktop-lyrics *{-webkit-user-select:none!important;user-select:none!important;-webkit-text-stroke:0!important;}
.film-site :is(input,textarea,[contenteditable=true]){-webkit-user-select:text!important;user-select:text!important;}
:root[data-theme=light]{--neutral-translation:#737373;}
:root[data-theme=dark]{--neutral-translation:#b7b7b7;}
:root[data-theme] .desktop-lyric-translation{color:var(--neutral-translation)!important;text-shadow:0 2px 10px #00000035!important;}
:root[data-theme] .film-site .simple-player .lyric-lines .lyric-translation,
:root[data-theme] .film-site .simple-player .lyric-lines p.active .lyric-translation{color:var(--neutral-translation)!important;text-shadow:0 2px 10px #00000035!important;}
:root[data-theme] .desktop-lyric-original,:root[data-theme] .film-site .lyric-original{text-shadow:0 2px 10px #00000035!important;}
/* A hovered queue never competes with the currently playing row. */
:root[data-theme] .film-site .simple-player .simple-details .music-queue button:not([aria-current=true]):is(:hover,:focus-visible,:active){background:transparent!important;color:var(--surface-ink)!important;text-shadow:none!important;box-shadow:none!important;}
:root[data-theme] .film-site .simple-player .simple-details{
 --surface-fill:rgba(255,255,255,.88);--surface-ink:#303030;--surface-muted:#686868;
 --queue-scroll-track:#00000009;--queue-scroll-thumb:#88888866;
 background:rgba(255,255,255,.88)!important;color:#303030!important;
 border-color:#ffffffb8!important;
}
:root[data-theme] .film-site .simple-player .simple-details :is(.simple-details-heading,.queue-scope,.music-queue strong){color:#303030!important;}
:root[data-theme] .film-site .simple-player .simple-details .music-queue small{color:#686868!important;}
:root[data-theme] .film-site .simple-player .simple-details .music-queue li{border-color:#00000014;}
:root[data-theme] .film-site .simple-player .simple-details .music-queue button[aria-current=true]{background:#f6dce6!important;color:#303030!important;box-shadow:inset 3px 0 #d9a7ba!important;}
:root[data-theme] .film-site .simple-player .simple-details .music-queue button[aria-current=true] :is(strong,small){color:#303030!important;}
:root[data-theme=dark] .film-site .simple-player .simple-details{
 --surface-fill:rgba(28,28,28,.9);--surface-ink:#f3f3f3;--surface-muted:#b7b7b7;
 background:rgba(28,28,28,.9)!important;color:#f3f3f3!important;border-color:#ffffff30!important;
}
:root[data-theme=dark] .film-site .simple-player .simple-details :is(.simple-details-heading,.queue-scope,.music-queue strong){color:#f3f3f3!important;}
:root[data-theme=dark] .film-site .simple-player .simple-details .music-queue small{color:#b7b7b7!important;}
:root[data-theme=dark] .film-site .simple-player .simple-details .music-queue li{border-color:#ffffff20;}
:root[data-theme=dark] .film-site .simple-player .simple-details .music-queue button[aria-current=true]{background:#123e2b!important;color:#f3f3f3!important;box-shadow:inset 3px 0 #719d85!important;}
:root[data-theme=dark] .film-site .simple-player .simple-details .music-queue button[aria-current=true] :is(strong,small){color:#f3f3f3!important;}
/* Text actions highlight as text, with no extra capsule behind the name. */
:root[data-theme] .film-site :is(.detail-resource-link,.resource-choice-trigger,.info-dialog-link):is(:hover,:focus-visible,:active){background:transparent!important;box-shadow:none!important;color:var(--surface-ink)!important;text-shadow:0 0 12px var(--popup-action-glow)!important;}
:root[data-theme] .film-site :is(.resource-choice-popover,.episode-index-popover){--surface-fill:var(--surface-hover);box-shadow:0 16px 48px #00000040,0 2px 8px #00000020!important;}
:root[data-theme=light] .film-site .guestbook{--ink:#292929;--muted:#555555;color:#292929;}
:root[data-theme=light] .film-site .guestbook :is(p,small,label,.empty-note,.guestbook-meta,.guestbook-notice){color:#555555!important;opacity:1;}
:root[data-theme=light] .film-site .guestbook :is(input,textarea){color:#242424!important;background:rgba(255,255,255,.88)!important;}
:root[data-theme=light] .film-site .guestbook :is(input,textarea)::placeholder{color:#686868!important;opacity:1;}
:root[data-theme] .film-site .detail-dialog{backface-visibility:hidden;-webkit-font-smoothing:antialiased;}

:root[data-theme] .film-site :is(.resource-choice-popover,.episode-index-popover):hover{box-shadow:0 20px 56px #00000050,0 4px 12px #00000028!important;}
:root[data-theme] .film-site .dialog-curved-edge{shape-rendering:geometricPrecision;}
:root[data-theme] .film-site :is(.detail-dialog img,.portfolio-image-stage img){image-rendering:auto;}

/* Text triggers stay unboxed even when the shared button hover rule applies. */
:root[data-theme] .film-site .detail-dialog .resource-choice-trigger:is(:hover,:focus-visible,:active){background:transparent!important;box-shadow:none!important;color:var(--surface-ink)!important;}
/* Popup text actions: visible colour feedback, without capsule backgrounds. */
:root[data-theme=light] .film-site{--popup-text-highlight:#963b5d;--popup-text-glow:#c8789b55;}
:root[data-theme=dark] .film-site{--popup-text-highlight:#a4d9ba;--popup-text-glow:#72bd9355;}
:root[data-theme] .film-site :is(dialog,[role=dialog],[popover]) :is(a[href],.resource-choice-trigger,.detail-resource-link,.info-dialog-actions button){
 background:transparent!important;border-color:transparent!important;box-shadow:none!important;
 text-decoration:none!important;transition:color .2s ease,text-shadow .2s ease;
}
:root[data-theme] .film-site :is(dialog,[role=dialog],[popover]) :is(a[href],.resource-choice-trigger,.detail-resource-link,.info-dialog-actions button):is(:hover,:focus-visible,:active),
:root[data-theme] .film-site .detail-dialog .resource-choice-trigger:is(:hover,:focus-visible,:active){
 color:var(--popup-text-highlight)!important;background:transparent!important;border-color:transparent!important;
 box-shadow:none!important;text-shadow:0 0 14px var(--popup-text-glow)!important;
}
:root[data-theme] .film-site :is(dialog,[role=dialog],[popover]) :is(a[href],.resource-choice-trigger,.detail-resource-link,.info-dialog-actions button):is(:hover,:focus-visible,:active) :is(span,strong,small){color:inherit!important;}
/* The welcome letter sits over dark footage in the light theme too. */
/* Homepage tabs share a stable stage; switching never removes all content. */
:root[data-theme] .film-site #about .about-intro-tabs{position:relative;width:fit-content;max-width:calc(100% - 32px);margin:0 auto;padding:10px 0 12px;gap:clamp(8px,2vw,28px);flex-wrap:nowrap;isolation:isolate;}
:root[data-theme] .film-site #about .about-intro-tabs button,
:root[data-theme] .film-site #about .about-intro-tabs button:is(:hover,:focus-visible,:active,[aria-pressed=true]){background:transparent!important;backdrop-filter:none;box-shadow:none!important;border-color:transparent!important;border-radius:0;color:#dddddd!important;padding:10px 12px;font-size:13px;white-space:nowrap;transition:color .25s ease,opacity .25s ease;}
:root[data-theme] .film-site #about .about-intro-tabs button:is(:hover,:focus-visible,[aria-pressed=true]){color:#ffffff!important;text-shadow:0 0 16px #ffffff40;}
:root[data-theme] .film-site #about .about-tab-line{position:absolute;bottom:7px;height:2px;border-radius:2px;background:#f7f7f7;pointer-events:none;transition:left .45s cubic-bezier(.22,.61,.36,1),width .45s cubic-bezier(.22,.61,.36,1);}
.film-site #about .about-panel-stage{display:grid;position:relative;isolation:isolate;overflow:clip;overflow-anchor:none;}
.film-site #about .about-panel-stage>.editorial-panel{grid-area:1/1;position:relative;align-self:stretch;box-sizing:border-box;width:100%;margin:0;animation:none!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s;}
.film-site #about .about-panel-stage>.editorial-panel[data-active=true]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease,visibility 0s;}
.film-site #about .about-panel-stage :is(.editorial-welcome,.editorial-personality){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start;align-content:center;}
.film-site #about .about-panel-stage .editorial-prose{font-size:clamp(13px,1.05vw,15px);line-height:1.95;max-width:66ch;}
.film-site #about .about-panel-stage :is(.editorial-welcome,.editorial-personality)>.editorial-prose{padding-top:32px;}
.film-site #about .about-panel-stage .welcome-letter>div{padding-top:0;}
@media(max-width:760px){
 .film-site #about .about-panel-stage :is(.editorial-welcome,.editorial-personality){grid-template-columns:1fr;gap:16px;}
 .film-site #about .about-panel-stage :is(.editorial-welcome,.editorial-personality)>.editorial-prose{padding-top:0;}
 :root[data-theme] .film-site #about .about-intro-tabs button{padding:10px 7px;font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
 .film-site #about .about-panel-stage>.editorial-panel,:root[data-theme] .film-site #about .about-tab-line{transition:none!important;}
}
:root[data-theme=light] .film-site #about #about-panel-welcome :is(h2,p,.eyebrow){color:#f7f7f7!important;text-shadow:0 2px 14px #00000045;}
/* Keep link menus inside phone/tablet viewports, including short landscape. */
:root[data-theme] .film-site :is(.resource-choice-popover,.episode-index-popover){box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;}
@media(max-width:480px){
 :root[data-theme] .film-site #about .milestone-title{gap:4px 8px;}
 :root[data-theme] .film-site #about .editorial-milestone-list article{padding:12px 0;}
}
/* All three panels occupy one shared grid cell, so tab selection cannot resize
   the homepage or its background. Hidden text still contributes natural size. */
:root[data-theme] .film-site #about .editorial-hero .hero-copy{width:min(1120px,100%);min-width:0;}
:root[data-theme] .film-site #about .editorial-hero h1{font-size:clamp(32px,4.2vw,64px);line-height:1.4;letter-spacing:-.025em;margin:18px 0 0;text-wrap:balance;}
:root[data-theme] .film-site #about .editorial-hero h1>.hero-title-line{display:block;font:inherit;letter-spacing:inherit;margin:0;}
:root[data-theme] .film-site #about .editorial-hero .hero-title-phrase{display:inline-block;}
:root[data-theme] .film-site #about .editorial-hero .hero-intro{max-width:43em;margin:24px 0 0;font-size:clamp(13px,1.1vw,16px);line-height:1.95;letter-spacing:.015em;text-wrap:pretty;}
@media(max-width:760px){
 :root[data-theme] .film-site #about .editorial-hero h1{font-size:clamp(28px,7.6vw,40px);line-height:1.5;}
 :root[data-theme] .film-site #about .editorial-hero .hero-intro{margin-top:20px;font-size:13px;max-width:32em;}
}
:root[data-theme] .film-site #about .about-intro-tabs{margin-left:var(--edge);margin-right:var(--edge);}
:root[data-theme] .film-site #about .about-panel-stage .editorial-milestones header{margin-bottom:14px;}
:root[data-theme] .film-site #about .about-panel-stage .editorial-milestones header .editorial-prose{font-size:13px;line-height:1.8;}
:root[data-theme] .film-site #about .about-panel-stage .editorial-milestone-list{gap:12px;grid-auto-rows:1fr;align-items:stretch;}
:root[data-theme] .film-site #about .about-panel-stage .editorial-milestone-list article{padding:14px 16px;border:1px solid #ffffff45!important;border-radius:16px;background:rgba(255,255,255,.09)!important;box-shadow:0 8px 24px #0000000d!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;}
:root[data-theme] .film-site #about .about-panel-stage .editorial-milestone-list h3{font-size:20px;margin:0;}
:root[data-theme] .film-site #about .about-panel-stage .editorial-milestone-list article>p{font-size:12px;line-height:1.8;margin-top:9px;}
:root[data-theme] .film-site #about .about-panel-stage .editorial-footnote{margin:12px 0 0;}
@media(max-width:760px){
 :root[data-theme] .film-site #about .about-panel-stage .editorial-milestone-list article{padding:13px;}
 :root[data-theme] .film-site #about .about-panel-stage .editorial-milestone-list h3{font-size:18px;}
 .film-site #about .about-panel-stage :is(.editorial-welcome,.editorial-personality){align-content:start;}
}
:root[data-theme] .film-site #about .editorial-hero .hero-intro>span{display:block;}
/* A lighter version of the navigation glass, kept mounted for reversible fades. */
:root[data-theme] .desktop-lyrics{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s;}
:root[data-theme] .desktop-lyrics[data-visible=false]{opacity:0;visibility:hidden;transition:opacity .85s ease .18s,visibility 0s linear 1.03s;}
:root[data-theme] .desktop-lyrics-bubble{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:112px;max-width:100%;padding:12px 36px;border:1px solid #ffffff30;border-radius:999px;background:rgba(32,32,32,.32);backdrop-filter:blur(18px) saturate(1.12);-webkit-backdrop-filter:blur(18px) saturate(1.12);box-shadow:inset 0 1px 0 #ffffff15,0 8px 28px #00000014;}
:root[data-theme=light] .desktop-lyrics-bubble{background:rgba(255,255,255,.38);border-color:#ffffff70;}
@media(max-width:600px){:root[data-theme] .desktop-lyrics-bubble{height:88px;padding:8px 22px;}}
@media(prefers-reduced-motion:reduce){:root[data-theme] .desktop-lyrics,:root[data-theme] .desktop-lyrics[data-visible=false]{transition:none;}}

/* Stable capsule dimensions; the dock centre is shared with the record icon. */
:root[data-theme] .desktop-lyrics{display:flex;align-items:center;justify-content:center;width:min(1120px,calc(100% - 200px));padding:0;bottom:calc(var(--lyrics-dock-bottom) + var(--lyrics-disc-size)/2);transform:translate(-50%,50%);}
:root[data-theme] .desktop-lyrics-copy{width:100%;min-width:0;}
@media(max-width:760px){:root[data-theme] .desktop-lyrics{left:calc(50% - 38px);width:calc(100% - 112px);}}
/* Feather only the backing glass; keep the lyric text crisp. */
:root[data-theme] .desktop-lyrics-bubble{position:relative;isolation:isolate;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;}
:root[data-theme] .desktop-lyrics-bubble::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(32,32,32,.32);backdrop-filter:blur(18px) saturate(1.12);-webkit-backdrop-filter:blur(18px) saturate(1.12);mask-image:radial-gradient(ellipse at center,#000 0%,#000 28%,#000b 48%,#0004 68%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 28%,#000b 48%,#0004 68%,transparent 85%);}
:root[data-theme=light] .desktop-lyrics-bubble::before{background:rgba(255,255,255,.38);}/* Diffuse tonal haze instead of a masked blur panel: no blur boundary to reveal. */
:root[data-theme] .desktop-lyrics-bubble::before{inset:-28px -48px;background:radial-gradient(ellipse at center,rgba(12,18,20,.58) 0%,rgba(12,18,20,.46) 22%,rgba(12,18,20,.26) 46%,rgba(12,18,20,.08) 70%,transparent 100%);backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;-webkit-mask-image:none;filter:blur(20px);}
:root[data-theme=light] .desktop-lyrics-bubble::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.82) 0%,rgba(255,255,255,.65) 22%,rgba(255,255,255,.36) 46%,rgba(255,255,255,.1) 70%,transparent 100%);}
@media(max-width:760px){:root[data-theme] .desktop-lyrics-bubble::before{inset:-20px -12px;filter:blur(16px);}}
/* Feather the acrylic itself so underlying page content is softly blurred. */
:root[data-theme] .desktop-lyrics-bubble::before{inset:-24px -40px;background:rgba(24,28,30,.54);backdrop-filter:blur(24px) saturate(1.08);-webkit-backdrop-filter:blur(24px) saturate(1.08);filter:none;mask-image:radial-gradient(ellipse closest-side at center,#000 0%,#000e 18%,#0008 40%,#0002 60%,transparent 80%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side at center,#000 0%,#000e 18%,#0008 40%,#0002 60%,transparent 80%,transparent 100%);}
:root[data-theme=light] .desktop-lyrics-bubble::before{background:rgba(255,255,255,.72);}
@media(max-width:760px){:root[data-theme] .desktop-lyrics-bubble::before{inset:-18px -12px;filter:none;}}
/* Shared type rhythm. Geometry, acrylic, colours and motion remain independent. */
/* All introduction panels overlay the same dark video in both themes. */
:root[data-theme] .film-site #about .about-panel-stage .editorial-panel :is(h2,h3,p,span,em,small,strong,summary){color:#f7f7f7!important;text-shadow:0 2px 14px #00000050;}
:root{
 --type-copy:clamp(13px,.92vw + 2px,15px);
 --type-caption:clamp(11px,.65vw + 2px,12px);
}
html,body{font-kerning:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.film-site{font-size:14px;line-height:1.65;}
.film-site :is(button,input,textarea,select){font-family:var(--font-body);letter-spacing:0;}
.film-site :is(p,dd,li){line-break:strict;}
.film-site :is(h1,h2,h3,h4,p,small,a,button),.desktop-lyrics{-webkit-text-stroke:0;}
/* Editorial headings retain their serif character; interface copy is sans serif. */
:root[data-theme] .film-site :is(.editorial-label h2,.editorial-personality h2,.editorial-milestones h2,.contact-heading h2){font-family:var(--font-editorial)!important;font-weight:500;letter-spacing:-.015em;line-height:1.45;text-wrap:pretty;}
:root[data-theme] .film-site .section-heading h2{font-weight:500;letter-spacing:-.015em;line-height:1.4;text-wrap:pretty;}
:root[data-theme] .film-site :is(.editorial-prose,.chapter>.section-heading>p.editorial-description,#contact .contact-heading>p.editorial-description){font-size:var(--type-copy);font-weight:400;line-height:1.9;letter-spacing:.01em;text-wrap:pretty;}
:root[data-theme] .film-site .editorial-prose p{line-height:inherit;}
:root[data-theme] .film-site :is(.eyebrow,.section-index){font-family:var(--font-body)!important;font-size:10px;font-weight:500;letter-spacing:.13em;line-height:1.5;}
:root[data-theme] .film-site :is(.site-header nav a,.tabs button,.music-chip,.about-intro-tabs button){font-weight:500;line-height:1.45;letter-spacing:.01em;}
:root[data-theme] .film-site .poster-toolbar{font-size:14px;line-height:1.6;letter-spacing:0;font-weight:600;}
:root[data-theme] .film-site .poster-toolbar small{font-size:12px;line-height:1.6;font-weight:400;}
:root[data-theme] .film-site .music-top-heading{font-size:19px;line-height:1.5;letter-spacing:0;}
:root[data-theme] .film-site .music-top-card h4{font-size:clamp(13px,1vw,16px);line-height:1.5;font-weight:600;letter-spacing:0;}
:root[data-theme] .film-site .music-top-card p{font-size:var(--type-caption);line-height:1.55;letter-spacing:0;}
/* Small sleeves stay square and keep their existing two-line truncation. */
:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card .poster-copy{min-height:70px;}
:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card h3{font-size:clamp(12px,.8vw,14px);font-weight:600;line-height:1.4;letter-spacing:0;}
:root[data-theme] .film-site .poster-collection .poster-window>.poster-rail>.poster-card p{font-size:11px;line-height:1.45;letter-spacing:0;}
:root[data-theme] .film-site .project-link-copy h3{font-size:clamp(14px,1.05vw,17px);font-weight:600;line-height:1.5;letter-spacing:0;}
:root[data-theme] .film-site .project-link-category{font-size:11px;line-height:1.5;letter-spacing:.015em;opacity:1;color:var(--surface-muted);}
:root[data-theme] .film-site .project-link-copy p{font-size:12px;line-height:1.65;opacity:1;color:var(--surface-muted);}
:root[data-theme] .film-site #about .editorial-milestone-list h3{font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.45;letter-spacing:0;}
:root[data-theme] .film-site #about .editorial-milestone-list article>p{font-size:13px;line-height:1.8;letter-spacing:0;}
:root[data-theme] .film-site .milestone-label{font-size:12px;line-height:1.55;letter-spacing:0;}
/* Popovers and dialogs use the same reading scale, including Japanese titles. */
:root[data-theme] .film-site .detail-dialog h2{font-size:clamp(23px,2.1vw,32px);font-weight:500;line-height:1.4;letter-spacing:-.01em;overflow-wrap:anywhere;}
:root[data-theme] .film-site :is(.detail-description,.detail-facts dd,.info-dialog-note){font-size:14px;line-height:1.85;letter-spacing:0;}
:root[data-theme] .film-site .detail-facts dt{font-family:var(--font-body)!important;font-size:12px;font-weight:500;line-height:1.7;letter-spacing:0;}
:root[data-theme] .film-site :is(.detail-links,.resource-choice-popover,.episode-index-popover,.info-dialog-actions){font-size:13px;line-height:1.65;}
:root[data-theme] .film-site .info-dialog-link{font-size:12px;line-height:1.7;overflow-wrap:anywhere;}
:root[data-theme] .film-site .contact-entry strong{font-size:16px;font-weight:600;line-height:1.5;}
:root[data-theme] .film-site .contact-entry small{font-size:10px;line-height:1.5;letter-spacing:.09em;}
:root[data-theme] .film-site .contact-account{font-size:12px;line-height:1.65;overflow-wrap:anywhere;}
:root[data-theme] .film-site .guestbook{font-size:13px;line-height:1.8;}
:root[data-theme] .film-site .guestbook h3{font-size:20px;font-weight:600;line-height:1.5;letter-spacing:0;}
:root[data-theme] .film-site .guestbook textarea{font-size:16px;line-height:1.7;}
:root[data-theme] .film-site footer.site-footer{font-size:12px;line-height:1.8;letter-spacing:0;}
/* Do not alter lyric line boxes: translation visibility must not move originals. */
:root[data-theme] .film-site .simple-song-copy strong{font-size:16px;font-weight:600;line-height:1.45;letter-spacing:0;}
:root[data-theme] .film-site .simple-song-copy small{font-size:12px;line-height:1.5;letter-spacing:0;}
:root[data-theme] .film-site .queue-copy strong{font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0;}
:root[data-theme] .film-site .queue-copy small{font-size:11px;line-height:1.5;letter-spacing:0;}
:root[data-theme] .film-site .simple-time{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:0;}
:root[data-theme] .film-site :is(.lyric-original,.lyric-translation),:root[data-theme] .desktop-lyrics{font-family:var(--font-body);letter-spacing:0;}
@media(max-width:760px){
 :root[data-theme] .film-site .music-top-heading{font-size:17px;}
 :root[data-theme] .film-site .poster-toolbar{font-size:13px;}
 :root[data-theme] .film-site .poster-toolbar small{font-size:11px;}
 :root[data-theme] .film-site .project-link-copy p{font-size:11px;}
 :root[data-theme] .film-site :is(.detail-description,.detail-facts dd,.info-dialog-note){font-size:13px;}
 :root[data-theme] .film-site .guestbook h3{font-size:18px;}
}