@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('static/fonts/Barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('static/fonts/Barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('static/fonts/Barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('static/fonts/BarlowCondensed-500.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('static/fonts/BarlowCondensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('static/fonts/BarlowCondensed-700.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0B0B14;--surface:#14141F;--surface2:#1C1C2B;
  --border:#2A2A40;--fg:#F4F4F8;--fg2:#A8A8BE;--fg3:#8686A0;
  --accent:#FFE24A;--accent-dim:#C9AF25;--on-accent:#14100A;
  --series:#FF3D7F;--focus:#8AB4FF;
  --r:10px;--r-lg:16px;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;--sp8:64px;
  --dur:200ms;--ease-out:cubic-bezier(.22,.61,.36,1);--ease-in:cubic-bezier(.55,.06,.68,.19);
}
html{-webkit-text-size-adjust:100%;color-scheme:dark;
  -webkit-tap-highlight-color:rgba(255,226,74,.18)}
*{touch-action:manipulation}
.num{font-variant-numeric:tabular-nums}
body{
  background:var(--bg);color:var(--fg);
  font:400 16px/1.6 Barlow,'Noto Sans JP',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3{text-wrap:balance;scroll-margin-top:88px}
h1,h2,h3,.disp{font-family:'Barlow Condensed',Barlow,'Noto Sans JP',sans-serif;
  font-weight:700;letter-spacing:.01em;line-height:1.08;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--sp5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);
  color:var(--on-accent);padding:var(--sp3) var(--sp4);font-weight:600}
.skip:focus{left:var(--sp4);top:var(--sp4)}

/* ---------- entrance ---------- */
/* Two elements only, per the excessive-motion rule. Plays once per session,
   skips on any input, and is skipped entirely under reduced-motion. */
#intro{position:fixed;inset:0;z-index:120;background:var(--bg);display:grid;
  place-items:center;pointer-events:none}
#intro.done{opacity:0;visibility:hidden;transition:opacity 420ms var(--ease-in),visibility 0s 420ms}
#intro .bar{position:absolute;left:0;right:0;height:50%;background:#000;
  transition:transform 640ms var(--ease-out)}
#intro .bar.top{top:0;transform:translateY(-100%)}
#intro .bar.bot{bottom:0;transform:translateY(100%)}
#intro.seal .bar.top,#intro.seal .bar.bot{transform:translateY(0)}
#intro .mark{position:relative;z-index:1;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:clamp(2.5rem,9vw,5.5rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);opacity:0;transform:scale(.94);
  transition:opacity 520ms var(--ease-out),transform 640ms var(--ease-out);
  text-shadow:0 0 28px rgba(255,226,74,.35)}
#intro.reveal .mark{opacity:1;transform:scale(1)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(11,11,20,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.hd{display:flex;align-items:center;gap:var(--sp5);height:64px}
.logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;white-space:nowrap}
.logo-mark{display:block;width:26px;height:26px;color:var(--accent);flex:none}
.logo-mark svg{display:block;width:100%;height:100%}
.logo-txt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.34rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--fg)}
.logo-a{color:var(--accent)}
.logo:hover .logo-txt{color:var(--accent)}
nav{display:flex;gap:var(--sp5);font-size:.94rem;font-weight:500}
nav a{color:var(--fg2);display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 var(--sp2);transition:color var(--dur) var(--ease-out);
  border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current=page]{color:var(--fg);border-bottom-color:var(--accent)}
.search{margin-left:auto;position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:12px;width:17px;height:17px;color:var(--fg3);pointer-events:none}
#q{background:var(--surface);border:1px solid var(--border);color:var(--fg);
  border-radius:999px;padding:0 16px 0 38px;min-height:44px;width:230px;font-size:.92rem;
  transition:border-color var(--dur) var(--ease-out),width var(--dur) var(--ease-out)}
#q::placeholder{color:var(--fg3)}
#q:focus{outline:none;border-color:var(--accent);width:280px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(76vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,var(--bg) 4%,rgba(11,11,20,.82) 38%,rgba(11,11,20,.25) 72%),
  linear-gradient(to right,var(--bg) 0%,rgba(11,11,20,.55) 42%,transparent 78%)}
.hero-in{position:relative;padding:var(--sp8) 0 var(--sp7);max-width:660px}
.kicker{display:inline-flex;align-items:center;gap:var(--sp2);color:var(--accent);
  font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:var(--sp3)}
.kicker::before{content:'';width:26px;height:2px;background:var(--accent)}
.hero h1{font-size:clamp(2.2rem,6.5vw,4.2rem);margin-bottom:var(--sp3)}
.hero .jp{color:var(--fg3);font-size:.95rem;margin-bottom:var(--sp3);text-transform:none;
  font-family:Barlow,'Noto Sans JP',sans-serif;font-weight:400}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3);color:var(--fg2);
  font-size:.9rem;margin-bottom:var(--sp4)}
.meta .score{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--fg3);flex:none}
.meta .pair{display:inline-flex;align-items:center;gap:var(--sp3)}
.hero p.syn{color:var(--fg2);margin-bottom:var(--sp5);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);
  min-height:48px;padding:0 var(--sp5);border-radius:var(--r);font-weight:600;
  font-size:.96rem;transition:transform var(--dur) var(--ease-out),
  background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#FFEA75;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--border);background:var(--surface);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg3);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- rails ---------- */
section.rail{padding:var(--sp7) 0 var(--sp2)}
.rail-hd{display:flex;align-items:baseline;gap:var(--sp3);margin-bottom:var(--sp4)}
.rail-hd h2{font-size:1.5rem}
.rail-hd .count{color:var(--fg3);font-size:.86rem;font-variant-numeric:tabular-nums}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:172px;gap:var(--sp4);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp4);
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.track::-webkit-scrollbar{height:6px}
.track::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.track>*{scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp4);
  grid-auto-flow:dense}
/* A browse page holds 60 cards and a genre page up to 120. content-visibility
   lets the browser skip layout and paint for the ones offscreen; the
   contain-intrinsic-size keeps the scrollbar honest so nothing jumps. */
.grid>.card{content-visibility:auto;contain-intrinsic-size:auto 320px}
.track{grid-auto-flow:column dense}

/* ---------- card ---------- */
.card{display:block;border-radius:var(--r);overflow:hidden;background:var(--surface);
  border:1px solid var(--border);transition:transform var(--dur) var(--ease-out),
  border-color var(--dur) var(--ease-out)}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card .art{position:relative;aspect-ratio:2/3;background:var(--surface2)}
.card .art{overflow:hidden}
.card .art img{width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--ease-out)}
.card:hover .art img,.card:focus-visible .art img{transform:scale(1.06)}
.card .badge{position:absolute;top:var(--sp2);left:var(--sp2);
  background:rgba(11,11,20,.86);color:var(--accent);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px}
.card .badge.tv{color:var(--series)}
.card .rate{position:absolute;bottom:var(--sp2);right:var(--sp2);
  background:rgba(11,11,20,.86);color:var(--fg);font-size:.72rem;font-weight:600;
  padding:3px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.card .cap{padding:var(--sp3)}
.card .cap{min-width:0}
.card .t{font-size:.9rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .y{color:var(--fg3);font-size:.78rem;margin-top:3px;font-variant-numeric:tabular-nums}

/* ---------- watch ---------- */
.crumb{font-size:.84rem;color:var(--fg3);padding:var(--sp5) 0 0}
.crumb a:hover{color:var(--accent)}
.stage{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;margin:var(--sp4) 0}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Facade: a hidden iframe still downloads, so the player is only created on
   click. Before that the page ships zero third-party bytes. */
.facade{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;width:100%}
.facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.facade .play{position:relative;display:grid;place-items:center;width:76px;height:76px;
  border-radius:50%;background:var(--accent);color:var(--on-accent);
  transition:transform var(--dur) var(--ease-out)}
.facade:hover .play{transform:scale(1.07)}
.facade .play svg{width:30px;height:30px;margin-left:4px}
.facade .hint{position:absolute;bottom:var(--sp5);color:var(--fg2);font-size:.86rem;
  background:rgba(11,11,20,.8);padding:var(--sp2) var(--sp4);border-radius:999px}
.actionbar{display:flex;gap:var(--sp3);margin-bottom:var(--sp4)}
.actionbar .btn{min-height:44px;padding:0 var(--sp4);font-size:.9rem}
.srcbar{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-bottom:var(--sp4)}
.src{min-height:44px;padding:0 var(--sp4);border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r);font-size:.88rem;font-weight:500;
  display:inline-flex;align-items:center;transition:all var(--dur) var(--ease-out)}
.src:hover{border-color:var(--fg3)}
.src[aria-pressed=true]{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:600}
.warn{color:var(--fg2);font-size:.84rem;margin:-2px 0 16px;line-height:1.5;
  border-left:2px solid var(--series);padding-left:12px}
.warn a{color:var(--accent);text-decoration:underline}
.src.noisy{color:var(--fg3)}
.src.noisy[aria-pressed=true]{background:var(--series);border-color:var(--series);color:#14100A}
.picker{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:center;margin-bottom:var(--sp4)}
.picker label{color:var(--fg2);font-size:.86rem;font-weight:500}
.picker select{min-height:44px;background:var(--surface);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--r);padding:0 var(--sp4);font:inherit;
  font-size:.9rem;cursor:pointer}
.picker select:focus{outline:none;border-color:var(--accent)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp6);
  align-items:start;padding-bottom:var(--sp7)}
.side h3{font-size:1rem;margin-bottom:var(--sp3)}
.side dl{font-size:.88rem}
.side dt{color:var(--fg3);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  margin-top:var(--sp4)}
.side dd{color:var(--fg);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp2)}
.chip{background:var(--surface2);border:1px solid var(--border);color:var(--fg2);
  font-size:.78rem;padding:5px 11px;border-radius:999px}
.note{border-top:1px solid var(--border);margin-top:var(--sp5);padding-top:var(--sp4);
  color:var(--fg3);font-size:.84rem}
.note a{color:var(--accent);text-decoration:underline}

footer{border-top:1px solid var(--border);margin-top:var(--sp8);
  padding:var(--sp6) 0 var(--sp8);color:var(--fg3);font-size:.86rem}
footer a{color:var(--fg2)}
footer a:hover{color:var(--accent)}
.empty{text-align:center;color:var(--fg3);padding:var(--sp8) 0}

@media(max-width:1000px){.layout{grid-template-columns:1fr}}
@media(max-width:720px){
  .wrap{padding:0 var(--sp4)}
  .hd{height:auto;padding:var(--sp3) 0;flex-wrap:wrap;gap:var(--sp3)}
  .search{order:9;width:100%;margin-left:0}
  #q,#q:focus{width:100%}
  nav{gap:var(--sp4);font-size:.88rem}
  .hero{min-height:auto}
  .hero-in{padding:var(--sp7) 0 var(--sp5)}
  .hero-bg::after{background:linear-gradient(to top,var(--bg) 6%,rgba(11,11,20,.86) 46%,rgba(11,11,20,.4) 100%)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--sp3)}
  .track{grid-auto-columns:140px;gap:var(--sp3)}
  .btn{flex:1 1 auto}
}
/* Motion is an enhancement. Under reduced-motion the intro never runs and the
   page is simply there. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  #intro{display:none}
}