@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--muted:rgba(255,255,255,.6);--line:rgba(255,255,255,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:#000;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;line-height:1.5}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:5px}button{border:0}header{height:80px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);padding:0 4.5vw}.brand{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700}.brand-icon{width:32px;height:32px;display:block}.header-label{color:var(--muted);font-size:12px}.header-link{margin-left:auto;font-size:12px}.skip{position:fixed;top:-100px;left:16px;background:#fff;color:#000;z-index:20;padding:12px}.skip:focus{top:12px}main{max-width:1440px;margin:auto;padding:0 4.5vw}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;padding:72px 0 80px}.eyebrow{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 20px}.hero h1{font-size:clamp(36px,4.3vw,60px);line-height:1.2;font-weight:500;margin:0 0 24px}.intro{font-size:16px;line-height:1.65;color:var(--muted);max-width:440px;margin-bottom:32px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:#f2f2f2;color:#000;border-radius:8px;padding:14px 20px;font-weight:600}.primary:hover{background:#dadada}.hero-note{display:flex;flex-direction:column;gap:4px;margin-top:40px;font-size:12px;color:var(--muted)}.hero-note strong{color:white;font-weight:500}.reference{position:relative;aspect-ratio:1;overflow:hidden;background:#1b1b1b}.reference img{position:absolute;width:200%;height:200%;max-width:none;left:calc(var(--col)*-100%);top:calc(var(--row)*-100%);object-fit:fill}.reference.wide{aspect-ratio:1.5}.reference.wide img{width:100%;height:100%;left:0;top:0}.hero-reference .reference{border-radius:8px 8px 0 0}.hero-caption{display:flex;align-items:center;gap:20px;padding:20px;background:#0f0f0f;border-radius:0 0 8px 8px}.number{font-variant-numeric:tabular-nums;color:var(--muted)}.hero-caption .number{font-size:24px}.hero-caption h2{font-size:16px;font-weight:500;margin:0 0 4px}.hero-caption p{font-size:12px;color:var(--muted);margin:0}.hero-caption button{margin-left:auto;background:rgba(255,255,255,.08);width:40px;height:40px;border-radius:8px}.library{border-top:1px solid var(--line);padding-top:48px;scroll-margin-top:24px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.section-heading h2,.how h2{font-size:30px;line-height:38px;font-weight:500;margin:0}.section-heading .eyebrow{margin-bottom:12px}.section-heading>p{font-size:12px;color:var(--muted);margin:0}.filters{display:flex;flex-wrap:wrap;gap:8px}.filter{border-radius:8px;background:rgba(255,255,255,.08);padding:12px 16px;font-size:12px;min-height:44px}.filter span{margin-left:8px;opacity:.6}.filter:hover{background:rgba(255,255,255,.16)}.filter.active{background:#f2f2f2;color:#000}.result-count{font-size:12px;color:var(--muted);margin:24px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}.card{background:#0f0f0f;border-radius:8px;overflow:hidden;scroll-margin-top:24px}.card[hidden]{display:none}.image-button{display:block;width:100%;padding:0;position:relative;background:none;text-align:left}.view{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.8);color:#fff;padding:8px 12px;border-radius:8px;font-size:11px;opacity:0;transition:opacity .15s}.image-button:hover .view,.image-button:focus-visible .view{opacity:1}.card-copy{padding:20px}.meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin-bottom:12px}.meta .number{font-size:14px}.card h3{font-size:20px;line-height:30px;font-weight:500;margin:0 0 12px}.card h3 button{background:none;padding:0;text-align:left}.sequence{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 16px}.shows{font-size:12px;margin:0;line-height:1.7}.shows span{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}.card:last-child .reference.wide{aspect-ratio:1}.card:last-child .reference.wide img{object-fit:contain;background:#c5b49f}.how{border-top:1px solid var(--line);margin:72px 0 0;padding:48px 0;max-width:760px}.how h2{margin-bottom:20px}.how>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.8}.how .reference-note{font-size:12px!important;margin-top:28px}footer{border-top:1px solid var(--line);padding:28px 4.5vw;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}dialog{padding:0;border:1px solid var(--line);border-radius:20px;background:#0f0f0f;color:#fff;width:min(1050px,94vw);max-height:92vh;overflow:auto}dialog[open]{display:grid;grid-template-columns:1.15fr 1fr;align-items:start}dialog::backdrop{background:rgba(0,0,0,.85)}dialog .reference{width:100%}.dialog-copy{padding:56px 32px 32px}.dialog-copy h2{font-size:30px;line-height:38px;margin:0 0 20px;font-weight:500}.dialog-copy h3{font-size:12px;color:var(--muted);font-weight:500;margin-top:24px}.dialog-copy>p{font-size:14px;line-height:1.8}.dialog-copy .primary{margin-top:16px}.close{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;background:#1b1b1b;border-radius:8px;font-size:24px}.dialog-copy #copy-status{display:block;font-size:12px;margin-top:12px;color:var(--muted)}
@media(max-width:1000px){.hero{gap:32px}.hero h1{font-size:44px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-label{display:none}}@media(max-width:650px){header{height:64px;padding:0 20px}.brand{font-size:18px}.header-link{font-size:11px}main{padding:0 20px}.hero{grid-template-columns:1fr;padding:40px 0;gap:32px}.hero h1{font-size:40px;line-height:48px}.intro{font-size:14px}.hero-note{margin-top:24px}.section-heading{display:block}.section-heading>p{margin-top:16px}.section-heading h2,.how h2{font-size:24px;line-height:32px}.grid{grid-template-columns:1fr;gap:24px}.filters{gap:6px}.filter{padding:10px 12px;font-size:11px}.library{padding-top:32px}.view{opacity:1}.card h3{font-size:20px}.how{margin-top:48px;padding:32px 0}footer{padding:24px 20px;font-size:11px}dialog[open]{display:block}.dialog-copy{padding:28px 24px}.dialog-copy h2{font-size:24px;line-height:32px}dialog .reference{max-height:60vh}.close{background:#000}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
