@charset "UTF-8";
@layer base, layout, components, accent; @layer base { :root { color-scheme: light dark; --bg: light-dark(#f6f7f9, #0e1014); --surface: light-dark(#eceef2, #171a21); --surface-2: light-dark(#e0e3e9, #222630); --txt: light-dark(#14161b, #eceef3); --dim: light-dark(#545a66, #9ea4af); --line: light-dark(rgb(20 22 27 / .12), rgb(236 238 243 / .1)); --acc: light-dark(#0b57d0, #8ab4f8); --font: system-ui, -apple-system, "Segoe UI", "Adwaita Sans", Cantarell, Ubuntu, Roboto, "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(.2, .7, .3, 1); --t: .2s var(--ease); --r: .75rem; --gutter: clamp(1rem, 4vw, 2.5rem); --wide: 80rem; --stage: 68rem; --text: 44rem; --glow: .3; interpolate-size: allow-keywords; } @media (prefers-color-scheme: light) { :root { --glow: .2; } } *, ::before, ::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first; } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); background: var(--bg); color: var(--txt); font: 400 clamp(1rem, .96rem + .18vw, 1.0625rem)/1.6 var(--font); overflow-wrap: break-word; overflow-x: clip; } body > * { width: 100%; max-width: var(--wide); margin-inline: auto; } main { flex: 1; } h1, h2, h3 { line-height: 1.15; text-wrap: balance; } p { text-wrap: pretty; } img, video, svg { vertical-align: middle; } img, video { max-width: 100%; height: auto; } ol, ul { margin: 0; padding: 0; list-style: none; } a { color: var(--acc); text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-decoration-thickness: from-font; text-underline-offset: .2em; transition: color var(--t), text-decoration-color var(--t), background-color var(--t); } @media (hover: hover){a:hover{ text-decoration-color: currentColor; }} :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: .3rem; } ::selection { background: color-mix(in oklab, var(--acc) 30%, transparent); } time, .dur, .num { font-variant-numeric: tabular-nums; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } .tui { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dim { color: var(--dim); } } @layer layout { body > nav.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: max(.5rem, env(safe-area-inset-top)) .25rem; } .back { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; max-width: 100%; padding-inline: .2rem .8rem; margin-inline-start: -.4rem; border-radius: 999px; color: var(--dim); text-decoration: none; font-size: .92rem; font-weight: 500; } .back .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .back svg { flex: none; transition: translate var(--t); } @media (hover: hover){.back:hover{ color: var(--txt); }} @media (hover: hover){.back:hover svg{ translate: -3px 0; }} .p-video > * { max-width: var(--stage); } .p-text > * { max-width: var(--text); } body > header { padding-block: clamp(1rem, 4vw, 2.5rem) .5rem; } .p-home > header { padding-top: max(clamp(2rem, 6vw, 4rem), env(safe-area-inset-top)); } .p-video > header { padding-block: .5rem .9rem; } body > header h1 { margin: 0; font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.3rem); font-weight: 750; letter-spacing: -.028em; line-height: 1.04; } .p-video > header h1 { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .logo { display: block; margin-bottom: 1rem; } .logo img { max-width: min(100%, 14rem); height: auto; } .lede { max-width: 42rem; margin: .7rem 0 0; color: var(--dim); font-size: 1.06rem; } .hmeta { margin: .6rem 0 0; color: var(--dim); font-size: .92rem; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.3rem 0 0; } .also { margin: 0; color: var(--dim); font-size: .88rem; } .also a { color: var(--txt); text-decoration-color: var(--line); } @media (hover: hover){.also a:hover{ color: var(--acc); }} .also .tui { display: inline; } .label { margin: 2.75rem 0 1.1rem; color: var(--dim); font-size: .76rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; } main > :first-child > .label:first-child { margin-top: 1.25rem; } .label a { display: inline-block; padding-block: .9rem; margin-block: -.9rem; color: inherit; text-decoration-color: var(--line); } @media (hover: hover){.label a:hover{ color: var(--txt); }} .label .num { margin-inline-start: .45em; font-weight: 500; letter-spacing: .04em; } body > footer { margin-top: 4.5rem; padding-block: 1.6rem max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--dim); font-size: .86rem; text-align: center; } body > footer p { margin: .35rem 0; } body > footer a { color: inherit; } @media (hover: hover){body > footer a:hover{ color: var(--txt); }} } @layer components { .pill { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--txt); font-size: .88rem; font-weight: 550; text-decoration: none; transition: border-color var(--t), background-color var(--t), color var(--t); } .pill svg { color: var(--acc); } @media (hover: hover){.pill:hover{ border-color: color-mix(in oklab, var(--acc) 55%, transparent); background: color-mix(in oklab, var(--acc) 9%, var(--surface)); }} .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 2.1rem 1.35rem; } .card > a { display: grid; grid-template-areas: "p" "t" "m"; isolation: isolate; color: inherit; text-decoration: none; border-radius: var(--r); outline-offset: 5px; } .poster { grid-area: p; position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border-radius: var(--r); background: var(--surface); } .poster picture { display: contents; } .poster img, .ph { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease), filter .6s var(--ease); } .ph { display: grid; place-items: center; color: var(--dim); } @media (hover: hover){.card > a:hover .poster img{ scale: 1.04; }} .dur { grid-area: p; z-index: 1; align-self: end; justify-self: end; margin: .5rem; padding: .28rem .45rem; border-radius: .4rem; background: rgb(10 12 16 / .78); color: #fff; font-size: .72rem; font-weight: 650; line-height: 1; letter-spacing: .02em; } .card .title { grid-area: t; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .7rem; color: var(--txt); font-weight: 600; line-height: 1.35; transition: color var(--t); } @media (hover: hover){.card > a:hover .title{ color: var(--acc); }} .card .meta { grid-area: m; margin-top: .2rem; color: var(--dim); font-size: .84rem; } .new { color: var(--acc); font-weight: 600; } .playlist > a { padding-top: .8rem; } .playlist > a::before, .playlist > a::after { content: ""; grid-area: p; z-index: -1; border-radius: var(--r); transition: translate .35s var(--ease); } .playlist > a::before { background: var(--tint, var(--surface-2)); translate: 0 -.45rem; scale: .93 1; } .playlist > a::after { z-index: -2; background: color-mix(in oklab, var(--tint, var(--surface-2)) 50%, var(--bg)); translate: 0 -.85rem; scale: .86 1; } @media (hover: hover){.playlist > a:hover::before{ translate: 0 -.55rem; }} @media (hover: hover){.playlist > a:hover::after{ translate: 0 -1.05rem; }} .feature { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "p ." "p t" "p m" "p x" "p ."; column-gap: clamp(1.5rem, 4vw, 3.25rem); } .feature > a { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; isolation: isolate; color: inherit; text-decoration: none; border-radius: var(--r); outline-offset: 5px; } .feature > a::before { content: ""; grid-area: p; z-index: -1; border-radius: var(--r); background: center / cover no-repeat; filter: blur(40px) saturate(1.3); opacity: var(--glow); translate: 0 5%; scale: .94; pointer-events: none; } .feature .poster::after { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(3.2rem, 6vw, 4.6rem); aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgb(255 255 255 / .28); border-radius: 50%; background: rgb(10 12 16 / .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6.6v10.8l8.6-5.4z'/%3E%3C/svg%3E") 54% 50% / 44% no-repeat; backdrop-filter: blur(8px); transition: scale .3s var(--ease), background-color .3s var(--ease); } @media (hover: hover){.feature > a:hover .poster::after{ scale: 1.08; background-color: color-mix(in oklab, var(--acc) 55%, rgb(10 12 16 / .5)); }} @media (hover: hover){.feature > a:hover .poster img{ scale: 1.025; }} .feature .title { grid-area: t; font-size: clamp(1.45rem, 1rem + 1.7vw, 2.25rem); font-weight: 720; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; transition: color var(--t); } @media (hover: hover){.feature > a:hover .title{ color: var(--acc); }} .feature .meta { grid-area: m; margin-top: .6rem; color: var(--dim); font-size: .92rem; } .feature .excerpt { grid-area: x; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: .9rem 0 0; color: var(--dim); } @media (max-width: 52rem) { .feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "p" "t" "m" "x"; } .feature .title { margin-top: 1rem; } } .stage { position: relative; } .frame { position: relative; isolation: isolate; margin-inline: auto; } .frame::before { content: ""; position: absolute; inset: 3% 4%; z-index: -1; background: center / cover no-repeat; filter: blur(44px) saturate(1.3); opacity: var(--glow); transition: opacity 1.6s var(--ease); pointer-events: none; } html.playing .frame::before { opacity: calc(var(--glow) / 2); } .frame video { display: block; width: 100%; max-height: 84svh; border-radius: var(--r); background: #000; } .frame.tall { width: fit-content; max-width: 100%; } .frame.tall video { width: auto; height: min(80svh, 52rem); } .frame audio { display: block; width: 100%; margin-top: 1rem; } .frame .cover { display: block; max-width: min(100%, 26rem); margin-inline: auto; } .frame .cover img { display: block; border-radius: var(--r); } .vmeta { margin: 1rem 0 0; color: var(--dim); font-size: .92rem; } .vmeta a { color: var(--txt); text-decoration-color: var(--line); } @media (hover: hover){.vmeta a:hover{ color: var(--acc); text-decoration-color: currentColor; }} @media (max-width: 40rem) { .stage { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left))) calc(-1 * max(var(--gutter), env(safe-area-inset-right))); } .frame:not(.tall) video { border-radius: 0; } .frame.tall video { border-radius: 0; } } .below { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "d" "c" "s"; margin-top: 1.4rem; } .below.has-chapters { column-gap: clamp(2rem, 5vw, 4rem); } @media (min-width: 60rem) { .below.has-chapters { grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); grid-template-rows: auto 1fr; grid-template-areas: "d c" "s c"; } } .desc { grid-area: d; max-width: var(--text); } .desc p { margin: 0 0 1em; } .chap { grid-area: c; } .chap .label { margin-top: 1rem; } .below > .stats { grid-area: s; max-width: var(--text); align-self: start; } .chapters a { display: grid; grid-template-columns: 4.3em 1fr; align-items: baseline; gap: .7rem; min-height: 2.75rem; margin-inline: -.75rem; padding: .55rem .75rem; border-radius: .55rem; color: var(--txt); text-decoration: none; } .chapters time { color: var(--acc); font-size: .86rem; font-weight: 600; } @media (hover: hover){.chapters a:hover{ background: var(--surface); }} .chapters a[aria-current] { background: color-mix(in oklab, var(--acc) 13%, transparent); box-shadow: inset 3px 0 0 var(--acc); } details.stats { margin-top: 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color var(--t); } details.stats[open] { border-color: color-mix(in oklab, var(--acc) 30%, var(--line)); } details.stats > summary { display: flex; align-items: center; gap: .9rem; min-height: 3.25rem; padding: .6rem 1.1rem; border-radius: var(--r); cursor: pointer; list-style: none; color: var(--txt); font-size: .9rem; font-weight: 550; } details.stats > summary svg { flex: none; color: var(--acc); } details.stats .peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; color: var(--dim); font-size: .82rem; font-weight: 400; font-variant-numeric: tabular-nums; } details.stats > summary::-webkit-details-marker { display: none; } details.stats > summary::after { content: ""; width: .45rem; height: .45rem; margin-inline-end: .3rem; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; translate: 0 -25%; transition: rotate .3s var(--ease), translate .3s var(--ease); } details.stats[open] > summary::after { rotate: -135deg; translate: 0 25%; } details.stats[open] .peek { opacity: 0; } details.stats > summary::after { flex: none; color: var(--dim); } @media (hover: hover){details.stats > summary:hover::after{ color: var(--txt); }} details.stats::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s var(--ease) allow-discrete; } details.stats[open]::details-content { block-size: auto; } .stats dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.6rem; margin: 0 1.1rem; padding: .9rem 0 1.1rem; border-top: 1px solid var(--line); font-size: .88rem; } .stats dt { color: var(--dim); } .stats dd { margin: 0; font-variant-numeric: tabular-nums; } .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .pager .pg > a { display: grid; grid-template-columns: 8rem minmax(0, 1fr); grid-template-areas: "p x"; align-items: center; gap: 1rem; padding: .6rem; border-radius: var(--r); color: var(--txt); text-decoration: none; } .pager .older { margin-inline-start: -.6rem; } .pager .newer { grid-column: 2; margin-inline-end: -.6rem; text-align: end; } .pager .newer > a { grid-template-columns: minmax(0, 1fr) 8rem; grid-template-areas: "x p"; } @media (hover: hover){.pager .pg > a:hover{ background: var(--surface); }} .pager .poster { border-radius: .5rem; } .pager .x { grid-area: x; min-width: 0; } .pager small { display: block; color: var(--dim); font-size: .72rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; } .pager .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .2rem; font-weight: 600; font-size: .94rem; line-height: 1.35; } @media (hover: hover){.pager .pg > a:hover .title{ color: var(--acc); }} @media (max-width: 40rem) { .pager { grid-template-columns: 1fr; gap: .25rem; } .pager .newer { grid-column: auto; margin-inline: -.6rem 0; text-align: start; } .pager .pg > a, .pager .newer > a { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "p x"; } } .prose p { margin: 0 0 1em; } .feeds { display: grid; gap: .7rem; margin: 1.5rem 0; } .feed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .85rem 1rem .85rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); scroll-margin-top: 2rem; } .feed:target { border-color: var(--acc); } .feed .name { font-weight: 600; } .feed .name a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: var(--txt); text-decoration: none; } @media (hover: hover){.feed .name a:hover{ color: var(--acc); }} .feed-links { display: flex; gap: .5rem; } .feed-links a { padding-inline: .95rem; background: var(--bg); } .feed-links a.copied { border-color: var(--acc); color: var(--acc); } .feed-links a.copied::after { content: "Copied"; font-weight: 500; color: var(--dim); } .index { margin: .5rem 0 0; } .index li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1.5rem; border-bottom: 1px solid var(--line); } .index li > a { padding-block: .72rem; color: var(--txt); text-decoration: none; font-weight: 500; } @media (hover: hover){.index li > a:hover{ color: var(--acc); }} .index .meta { padding-bottom: .5rem; color: var(--dim); font-size: .86rem; } .lost { margin-top: 2rem; } .top-anchor { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 1.5rem auto 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--dim); } @media (hover: hover){.top-anchor:hover{ color: var(--acc); border-color: var(--acc); }} html.js .top-anchor { position: fixed; z-index: 5; inset: auto max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto; margin: 0; box-shadow: 0 6px 20px -8px rgb(0 0 0 / .35); opacity: 0; visibility: hidden; translate: 0 .6rem; transition: opacity .25s var(--ease), translate .25s var(--ease), visibility 0s linear .25s; } html.js.scrolled .top-anchor { opacity: 1; visibility: visible; translate: none; transition-delay: 0s; } } @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } html { scroll-behavior: smooth; } ::view-transition-group(*) { animation-duration: .32s; animation-timing-function: var(--ease); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media (forced-colors: active) { .dur, .pill, .feed { border: 1px solid; } .frame::before, .feature > a::before { display: none; } }