/* Hallmark · v2.0.0 · scope: app · theme: W1 Video · shape: app screen · signature: framed film still flowing into the watch queue */
/* Critique: keep the art in the feature and the lime accent for action, selection and focus. */
@font-face{font-family:Manrope;src:url("assets/manrope-latin.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
:root{
  color-scheme:dark;
  --paper:#101111;--surface:#171a19;--raised:#202322;--hover:#272b29;--rule:#343935;
  --ink:#f1eee7;--muted:#b2b8b0;--accent:#dcff75;--accent-hover:#e7ff9e;--ink-on-accent:#151a0f;
  --shade:#0a0c0b;--clear:transparent;--veil:rgba(5,8,7,.74);--hero-ink:#fffdf4;
  --hero-shadow:rgba(5,10,8,.86);--hero-mid:rgba(5,10,8,.46);--hero-soft:rgba(5,10,8,.10);
  --glass:rgba(20,23,21,.69);--glass-line:rgba(244,247,234,.30);
  --font:Manrope,"PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC",system-ui,sans-serif;
  --max:1360px;--gutter:clamp(20px,4vw,64px);--radius:16px;--motion:160ms ease-out;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:500 15px/1.5 var(--font)}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:var(--clear)}
a{color:inherit;text-decoration:none}
button{color:inherit;cursor:pointer}
button:active{transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.55}
:where(a,button,input):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
img{display:block;max-width:100%}
.symbol-library{position:absolute;width:0;height:0}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.shell{width:min(calc(100% - var(--gutter) * 2),var(--max));margin-inline:auto}
.skip{position:absolute;z-index:3;left:var(--gutter);top:8px;transform:translateY(-150%);padding:8px 16px;background:var(--accent);color:var(--ink-on-accent)}
.skip:focus-visible{transform:translateY(0)}
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.header-inner{height:76px;display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;justify-self:start;margin-left:-12px}
.brand img{height:60px;width:auto}
.primary-nav{display:flex;gap:32px;align-items:center;min-width:0;height:100%}
.primary-nav a{position:relative;display:grid;align-items:center;min-height:44px;height:100%;white-space:nowrap;color:var(--muted);font-weight:700}
.primary-nav a:hover,.primary-nav a[aria-current=page]{color:var(--ink)}
.primary-nav a[aria-current=page]::after{content:"";height:2px;position:absolute;left:0;right:0;bottom:-1px;background:var(--accent)}
.header-tools{display:flex;align-items:center;gap:8px}
.search-trigger,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid var(--rule);border-radius:9px;background:var(--surface)}
.search-trigger{padding:0 12px 0 12px;color:var(--muted)}
.search-trigger:hover,.icon-button:hover{color:var(--ink);background:var(--hover)}
.icon-button{width:44px}
kbd{display:inline-grid;place-items:center;min-width:20px;height:22px;border-radius:4px;border:1px solid var(--rule);color:var(--muted);font:600 12px/1 var(--font)}
.feature{position:relative;isolation:isolate;display:flex;align-items:end;min-height:clamp(400px,37.5vw,520px);margin-top:24px;overflow:clip;border:1px solid var(--rule);border-radius:var(--radius);background:var(--raised);color:var(--hero-ink)}
.feature-image,.feature::after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-image{z-index:-2;object-position:50% 48%}
.feature::after{content:"";z-index:-1;background:linear-gradient(90deg,var(--hero-shadow) 0%,var(--hero-mid) 43%,var(--clear) 76%),linear-gradient(0deg,var(--hero-shadow),var(--clear) 54%)}
.feature-copy{min-width:0;padding:40px clamp(24px,4.3vw,64px) 48px;max-width:620px}
.feature h1{margin:0;font-size:clamp(60px,6.5vw,100px);line-height:1.04;letter-spacing:-.08em;font-weight:750;overflow-wrap:break-word;min-width:0;text-wrap:balance}
.feature-meta{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 12px;color:var(--ink);font-size:14px}
.feature-meta span+span{border-left:1px solid var(--glass-line);padding-left:12px}
.feature-summary{margin:0;max-width:27em;font-size:16px;color:var(--ink);line-height:1.7}
.feature-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--clear);border-radius:9px;font-weight:750;background:var(--surface);transition:background-color var(--motion),border-color var(--motion)}
.primary{background:var(--accent);color:var(--ink-on-accent)}
.primary:hover{background:var(--accent-hover)}
.feature .secondary{background:transparent}
.secondary{border-color:var(--glass-line);background:var(--glass);color:var(--ink)}
.secondary:hover{background:var(--hover);border-color:var(--muted)}
.feature-index{position:absolute;right:26px;bottom:25px;display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px}
.feature-rule{width:32px;height:1px;background:var(--glass-line)}
.shelf{margin-top:32px}
.shelf-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.shelf h2,.modal h2{font-size:24px;line-height:1.3;margin:0;font-weight:750;min-width:0;overflow-wrap:break-word}
.text-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;color:var(--muted);font-weight:650}
.text-button:hover{color:var(--ink)}
.text-button .icon{width:16px;height:16px}
.resume-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.resume-card{min-width:0;display:grid;grid-template-columns:126px minmax(0,1fr) 32px;align-items:center;gap:16px;padding:8px 16px 8px 8px;text-align:left;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:12px;transition:background-color var(--motion),border-color var(--motion)}
.resume-card:hover{background:var(--raised);border-color:var(--muted)}
.resume-art{height:75px;overflow:clip;border-radius:7px}
.resume-art img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.resume-copy{display:grid;gap:4px;min-width:0}
.resume-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.resume-copy span,.poster-meta{color:var(--muted);font-size:13px}
progress{appearance:none;width:min(190px,100%);height:3px;border:0;border-radius:10px;background:var(--rule);margin-top:4px}
progress::-webkit-progress-bar{background:var(--rule);border-radius:10px}
progress::-webkit-progress-value{background:var(--accent);border-radius:10px}
progress::-moz-progress-bar{background:var(--accent);border-radius:10px}
.resume-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--rule);border-radius:50%}
.resume-icon .icon{width:17px;height:17px}
.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.poster-card{min-width:0}
.poster-button{width:100%;height:100%;display:flex;flex-direction:column;align-items:start;gap:4px;padding:0;text-align:left;background:none;border:0;border-radius:11px}
.poster-button strong{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.poster-art{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:2/2.7;background:var(--raised);overflow:clip;border-radius:11px;margin-bottom:4px}
.poster-art img{width:100%;height:100%;object-fit:cover}
.poster-button:hover .poster-art{outline:1px solid var(--glass-line);outline-offset:-1px}
.poster-play{position:absolute;bottom:10px;right:10px;border:1px solid var(--glass-line);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;background:var(--glass);opacity:0;transition:opacity var(--motion)}
.poster-button:hover .poster-play,.poster-button:focus-visible .poster-play{opacity:1}
.site-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:16px 0 20px;margin-top:40px;color:var(--muted);font-size:13px}
.site-foot nav{display:flex;gap:20px}
.site-foot a{min-height:44px;display:flex;align-items:center}
.site-foot a:hover,.site-foot a[aria-current=page]{color:var(--ink)}
.modal{width:min(620px,calc(100% - 32px));max-height:calc(100% - 32px);padding:24px;margin:auto;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.modal::backdrop{background:var(--veil)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.search-field{min-height:50px;display:flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:9px;background:var(--paper);padding:0 12px}
.search-field:focus-within{border-color:var(--accent)}
.search-field input{width:100%;padding:12px 0;background:none;border:0;color:var(--ink);outline:0}
.result-list{display:grid;gap:8px;margin-top:12px}
.result-list>p{margin:12px 0;color:var(--muted)}
.result{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:8px;text-align:left;background:none;border:1px solid var(--clear);border-radius:9px}
.result:hover{background:var(--hover)}
.result img{width:40px;height:52px;object-fit:cover;border-radius:4px}
.result span{display:grid}
.result small,.detail-meta,.detail-copy{color:var(--muted)}
.detail-main{display:grid;grid-template-columns:134px minmax(0,1fr);align-items:start;gap:20px}
.detail-main>img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:9px}
.detail-meta{margin:0 0 8px}
.detail-copy{margin:0 0 16px}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.episode-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.episode-list button{background:var(--raised);border-color:var(--rule)}
.episode-list button:hover{background:var(--hover)}
.playback-modal{width:min(820px,calc(100% - 32px))}
.player-preview{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:clip;border-radius:9px;background:var(--shade)}
.player-preview img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.30}
.preview-message{position:relative;text-align:center;display:grid;justify-items:center;gap:8px;padding:16px}
.preview-message .icon{width:38px;height:38px;color:var(--accent)}
.preview-message strong{font-size:21px}
.preview-message span,.preview-footer{color:var(--muted)}
.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.toast{position:fixed;z-index:5;bottom:20px;right:var(--gutter);max-width:calc(100% - var(--gutter) * 2);padding:12px 16px;color:var(--ink);background:var(--raised);border:1px solid var(--rule);border-radius:9px}
@media(max-width:850px){
  .header-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:16px}
  .primary-nav{gap:16px}
  .feature-index{display:none}
  .resume-card{grid-template-columns:78px minmax(0,1fr);gap:8px}
  .resume-art{height:64px}
  .resume-icon{display:none}
}
@media(max-width:580px){
  .header-inner{height:auto;grid-template-columns:minmax(0,1fr) auto;gap:0 8px}
  .primary-nav{grid-column:1/-1;grid-row:2;justify-content:space-between}
  .search-trigger span,kbd{display:none}
  .feature{margin-top:16px;min-height:410px}
  .feature-image{object-position:61% center}
  .feature-copy{padding:24px}
  .feature h1{font-size:58px}
  .feature::after{background:linear-gradient(0deg,var(--hero-shadow) 13%,var(--hero-mid) 55%,var(--hero-soft) 85%)}
  .feature-summary{font-size:14px}
  .resume-grid{grid-template-columns:minmax(0,1fr)}
  .poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-main{grid-template-columns:85px minmax(0,1fr);gap:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}