/* Two shared text styles: regular 15/22.5 and 20/30. */
@font-face{font-family:"Archive SF Text Light";font-style:normal;font-weight:300;src:local("SFProText-Light"),local("SF Pro Text Light")}
:root{--type-family:"SF Pro Text","SF Pro",system-ui,sans-serif;--type-small:15px;--type-title:20px;--type-leading:1.5;--type-weight:400;--type-tracking:-.016em}
:root{font-family:var(--type-family);font-size:var(--type-small);font-weight:var(--type-weight);line-height:var(--type-leading);letter-spacing:var(--type-tracking);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{--page:#000;--ink:#f7f7f4;--muted:#777671;--stroke-width:.5px;--stroke-color:rgb(255 255 255 / 12%);background:var(--page);color:var(--ink)}
body,button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
body{background:var(--page);color:var(--ink)}
.brand,header .brand{font-family:var(--type-family);font-size:var(--type-title);line-height:var(--type-leading);font-weight:var(--type-weight);letter-spacing:var(--type-tracking);color:var(--muted)}
.brand span{color:var(--ink)}
.archive-intro h1{margin:0 0 16px}
header h1.brand{margin:0}
.archive-intro{max-width:none;margin-bottom:72px}
.archive-intro p:not(.archive-actions){max-width:calc((100% - 32px)/2)}
.archive-intro p{color:var(--muted);margin:0 0 32px;font-weight:var(--type-weight)}
.archive-intro p:last-child{display:flex;margin-bottom:0}
.archive-intro a,.header-repo{color:var(--ink);text-decoration:none;text-underline-offset:3px}
.repo-button,.archive-intro a.repo-button{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#000;height:36px;box-sizing:border-box;padding:8px 16px;border:1px solid transparent;border-radius:980px;font-family:var(--type-family);font-size:14px;line-height:18px;font-weight:var(--type-weight);letter-spacing:var(--type-tracking);white-space:nowrap;text-decoration:none}
.archive-intro a.repo-button{font-size:var(--type-small)}
.repo-button.secondary-button,.archive-intro a.secondary-button{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 var(--stroke-width) var(--stroke-color)}
.secondary-button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.header-repo:focus-visible,.intro-repo:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
header>span:last-child{line-height:var(--type-leading)}
.series h2,figcaption{font-size:var(--type-small);line-height:var(--type-leading);font-weight:var(--type-weight);letter-spacing:var(--type-tracking)}
.series h2{color:var(--muted);margin-bottom:16px}
figcaption{color:var(--ink);margin-top:10px}
header .brand{color:var(--muted);font-weight:var(--type-weight)}
header{color:var(--muted)}
header .brand span{color:var(--ink)}
/* Shared hairlines for the archive chrome and study frames. */
header{border-bottom:var(--stroke-width) solid var(--stroke-color)}
iframe{border:var(--stroke-width) solid var(--stroke-color)}
header{padding:16px max(32px,calc((100% - 1216px)/2));flex-wrap:nowrap}
main{padding:32px;padding-top:48px}
.all-grid{gap:32px}
/* Archive is a gallery; demo transport and recording selectors are hidden. */
button:not([data-sound-toggle]),[class*="controls"],.viz-controls{display:none!important}
.animation-card{min-height:240px;border:var(--stroke-width) solid var(--stroke-color);background:#000;overflow:hidden;contain:layout paint}
.collection-card{min-height:320px}
.animation-card:not([data-ready]){visibility:hidden}
/* Exit is the time-reversed entrance curve: (1-x2,1-y2,1-x1,1-y1). */
body>header{display:flex!important;position:fixed;top:0;left:0;right:0;z-index:10;background:var(--page);visibility:hidden;transform:translateY(-100%);opacity:1;transition:transform 220ms cubic-bezier(.68,0,.77,0),visibility 0s linear 220ms;border-color:var(--stroke-color)}
body>header[data-visible]{visibility:visible;transform:translateY(0);transition-timing-function:cubic-bezier(.23,1,.32,1),linear;transition-delay:0s}
@media(prefers-reduced-motion:reduce){body>header{transform:none;transition:none}}
@media(max-width:620px){header{gap:12px}.archive-intro p:not(.archive-actions){max-width:100%}}
button,.btn,[class*="controls"] button,canvas,svg.vh-scene{border-width:var(--stroke-width)!important;border-color:var(--stroke-color)!important}

:root[data-font-preview="fallback"]{--type-tracking:normal}
/* SF titles use Light; the system preview retains Regular. */
:root:not([data-font-preview="fallback"]) .brand,:root:not([data-font-preview="fallback"]) header .brand{font-family:"Archive SF Text Light","SF Pro Text","SF Pro",system-ui,sans-serif!important;font-weight:300}
/* Reset inherited browser and legacy styles to the shared small style. */
body,header,button,input,select,textarea,.sound-toggle,.sound-status{font-family:var(--type-family);font-size:var(--type-small);font-weight:var(--type-weight);line-height:var(--type-leading);letter-spacing:var(--type-tracking)}