:root{--ink:#07090b;--paper:#0b0e12;--cream:#151a20;--red:#21d4c2;--gold:#31e981;--muted:#a7b3bd;--blue:#36a8ff;--aqua:#70f0d1;--panel:#11161c;--line:#ffffff18}
html{background:#07090b}
body{background:radial-gradient(circle at 12% 8%,#123a493b 0,transparent 30%),radial-gradient(circle at 88% 18%,#0d633a2e 0,transparent 28%),#080a0d;color:#eefcff;min-height:100vh}
.topbar{height:84px;background:#090c10d9;border-bottom:1px solid #60eacf36;backdrop-filter:blur(18px);box-shadow:0 12px 40px #0008}
.brand{display:grid;grid-template-columns:auto auto;align-items:end;gap:0;color:#fff;font-size:25px;line-height:.8;letter-spacing:-.06em}
.brand>span{display:inline!important;margin:0!important;font-size:25px!important;line-height:.8;color:var(--aqua)!important;letter-spacing:-.06em!important;font-weight:800!important}
.brand small{grid-column:1/3;margin-top:8px;color:#8fa7b3;font-size:8px;letter-spacing:.25em;font-weight:700}
.ghost{border:1px solid #70f0d166;border-radius:999px;color:#eafffb;background:linear-gradient(120deg,#36a8ff18,#31e98118);padding:11px 18px;transition:.2s ease}
.ghost:hover{background:linear-gradient(120deg,#218dff,#20d88a);color:#04100d;border-color:transparent;box-shadow:0 0 28px #21d4c255;transform:translateY(-2px)}
.intro{min-height:470px;padding-top:clamp(70px,9vw,120px);background:linear-gradient(135deg,#080a0d 15%,#0f1720 55%,#09251f);border-bottom:1px solid #62e6d026}
.intro:before{content:'';position:absolute;left:-80px;bottom:-180px;width:420px;height:420px;border:70px solid #36a8ff;border-radius:50%;opacity:.08;filter:blur(2px)}
.intro:after{content:'♫';right:5vw;top:40px;font-family:'DM Sans';font-size:300px;font-style:normal;font-weight:800;color:#53e7c00c;transform:rotate(10deg)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:#75eed5!important;background:#111a20;border:1px solid #51dfc538;border-radius:999px;padding:9px 13px;letter-spacing:.17em!important}
.eyebrow:before{content:'';width:8px;height:8px;border-radius:50%;background:#31e981;box-shadow:0 0 14px #31e981}
.intro h1{font-family:'DM Sans';font-weight:800;letter-spacing:-.07em;line-height:.91;margin-top:30px;position:relative;z-index:1}
.intro h1 em{font-family:'DM Sans';font-style:normal;background:linear-gradient(90deg,#36a8ff,#5fe4d2 48%,#31e981);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro>p:last-child{color:#afbdc6;font-size:18px;max-width:720px;position:relative;z-index:1}
.explore{background:transparent;padding-top:52px}
.searchrow{background:#10151b;border:1px solid #ffffff14;border-radius:18px;padding:5px 18px;box-shadow:0 16px 50px #0005}
.search{border:0}.search span{color:var(--aqua)}.search input{color:#f4ffff}.search input::placeholder{color:#72818c}.searchrow>span{color:#78dec9}
.filters{gap:10px;margin-top:22px}
.filters button{border-color:#ffffff20;color:#aebbc3;background:#0e1318;padding:10px 15px;font-size:13px;transition:.18s ease}
.filters button.active,.filters button:hover{background:linear-gradient(120deg,#238fff,#24d58b);border-color:transparent;color:#03100d;box-shadow:0 7px 22px #25c9aa2d;transform:translateY(-1px)}
.grid{gap:18px}
.card{min-height:320px;border:1px solid #ffffff14;border-radius:22px;padding:25px;background:linear-gradient(145deg,#151a21,#0d1116);box-shadow:0 18px 50px #0004;isolation:isolate}
.card:before{width:170px;height:170px;border:42px solid var(--accent);right:-95px;top:-95px;opacity:.16;filter:blur(1px)}
.card:after{content:'';position:absolute;inset:auto 18px 0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8}
.card:hover{transform:translateY(-7px) rotate(-.3deg);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:linear-gradient(145deg,#19232b,#10161c);box-shadow:0 24px 60px #0008,0 0 28px color-mix(in srgb,var(--accent) 13%,transparent)}
.card:nth-child(even):hover{transform:translateY(-7px) rotate(.3deg)}
.card .num{font-family:'DM Sans';font-style:normal;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);width:max-content;padding:6px 9px;border-radius:9px}
.card h2{font-family:'DM Sans';font-weight:800;letter-spacing:-.045em;line-height:1.02;color:#f4ffff}
.card .meta{color:#7f919d}.card .hook{color:#c4d0d6}.card .open{color:var(--accent);letter-spacing:.05em}
.empty b{font-family:'DM Sans'}.empty{color:#87969f}
dialog{background:#0d1217;color:#effffc;border:1px solid #ffffff20;border-radius:24px;box-shadow:0 30px 130px #000;overflow:auto}
dialog::backdrop{background:#010304d9;backdrop-filter:blur(8px)}
.close{background:#152027;color:#8ff5df;border:1px solid #70f0d14a}.close:hover{background:#21d4c2;color:#04100d}
.detail-head{background:radial-gradient(circle at 90% 20%,#31e98120,transparent 34%),linear-gradient(135deg,#10171e,#0b2423);border-bottom-color:#ffffff16}
.detail-head .era,.section h3,.story h3,.roles h3{color:#55e4ca!important}
.detail-head h2{font-family:'DM Sans';font-weight:800;color:#f1fffc}.detail-head .facts{color:#9eb0b9}
.detail-body{background:#0d1217}.synopsis{font-family:'DM Sans';font-weight:700;color:#ecfffb}
.story{background:linear-gradient(135deg,#121c22,#102823);border:1px solid #5be0c32b;border-left:4px solid #32d9ba;border-radius:0 18px 18px 0}
.story h3,.section h3,.roles h3{border-bottom-color:#ffffff18}.story p,.section p,.section li{color:#c0ccd2}.section small,.range-note{color:#84949d}
.production-list li{border-bottom-color:#ffffff12}.production-list li:before{color:#31e981}
.table-scroll{border-color:#ffffff1f;border-radius:14px}.roles table{background:#11171d}.roles th,.roles td{border-bottom-color:#ffffff10;color:#dce9ed}.roles thead th{background:linear-gradient(90deg,#176db5,#159b78);color:#fff}.roles tbody tr:hover{background:#172128}.roles tbody td:last-child b{color:#59e8ce}
footer{border-top:1px solid #ffffff12;background:#080a0d}footer span{background:linear-gradient(90deg,#36a8ff,#31e981);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:18px}footer p{color:#7f9099}
@media(max-width:720px){.topbar{height:74px}.brand{font-size:21px}.brand>span{font-size:21px!important}.intro{min-height:420px}.searchrow{padding:4px 12px}.card{border-radius:18px}}