@import url("sound.css");
@import url("player.css");


:root { --sys-edge: max(var(--gut), calc(13.73vw - 103.6px)); --max: min(1360px, calc(100vw - 2 * var(--sys-edge))); }


:root {
  
  --sys-ease-in: var(--ease-inout);            
  --sys-t-s: var(--t-move);                    
  --sys-t-m: var(--t-reveal);                  
  --sys-t-l: var(--t-mask);                    
  --sys-land: .8;
  --sys-step: 80ms;                            
  --sys-steps: 3;                              
  --sys-relay-max: 1200ms;                     
  --sys-at: 80;                                
  
  --sys-r-text-max: 8px;
  --sys-r-art-k: .006; --sys-r-art-min: 2; --sys-r-art-max: 4;
  --sys-r-img-k: .017; --sys-r-img-min: 6; --sys-r-img-max: 24;
  --sys-r-person: 2.5;                           
  --sys-r-point: 3;
  
  --sys-ease: var(--ease-inout);
  --sys-ease-light: var(--ease-inout);
  --sys-ease-exit: var(--ease-inout);
  --sys-focus-ease: var(--ease-inout);
  --sys-focus-ease-l3: var(--ease-inout);
  --sys-l1: var(--sys-t-s); --sys-l2: var(--sys-t-l); --sys-hold: 0ms; --sys-sharpen: var(--sys-t-m);
  --sys-ring: var(--sys-t-s); --sys-ring-weight: 0ms; --sys-dot-after: 0ms; --sys-stroke: 0ms;
  --reveal-at: 80%; --reveal-v-quick: 2600; --reveal-v-skip: 4000; --line-stagger-cap: 3;
  
  --sys-dot: 7px;
  --sys-dot-halo: 0 0 1.5px .5px rgba(33,107,255,.5), 0 0 6px 1px rgba(33,107,255,.2), 0 0 16px 2px rgba(33,107,255,.08);
  --sys-glow-r: 40%; --sys-glow-mid: 45%; --sys-glow-k: .66;
  --sys-night: #0d1119;
}
@media (max-width: 860px) { :root { --sys-r-text-max: 5px; } }

:root { --shadow-window: 0 0 0 .5px rgba(12,15,23,.12); }


:root {
  --sys-fs-h1: clamp(34px, calc(24.343px + 2.4762vw), 60px);   
  --sys-fs-quote: clamp(28px, calc(26.5px + .38vw), 32px);
}
html:root:root .t-display { font-size: var(--font-size-display); line-height: 1.02; letter-spacing: -.042em; font-weight: 400; text-wrap: balance; }
html:root:root .t-h1 { font-size: var(--sys-fs-h1); line-height: 1.04; letter-spacing: -.036em; font-weight: 400; text-wrap: balance; }
html:root:root .t-h2 { font-size: var(--font-size-title); line-height: 1.08; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
html:root:root .t-quote { font-size: var(--sys-fs-quote); line-height: 1.22; letter-spacing: -.02em; text-wrap: pretty; }
html:root:root .t-h3 { font-size: var(--font-size-heading); line-height: 1.25; letter-spacing: -.014em; }
html:root:root .t-lead { font-size: var(--font-size-lead); line-height: 1.42; letter-spacing: -.006em; text-wrap: pretty; }
html:root:root .t-body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
html:root:root .t-small { font-size: var(--font-size-small); line-height: var(--line-height-small); }
html:root:root :is(.t-caption, .t-cap) { font-size: var(--font-size-caption); line-height: 1.35; color: var(--color-text-muted); }
html:root:root .t-label { font: var(--font-weight-regular) var(--font-size-label)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
html:root:root .t-attrib { font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text); }
html:root:root .t-quote.hang { text-indent: -.42em; }
html:root:root .t-quote.hang.bl, html:root:root .t-quote.hang.bl .line { text-indent: 0; }
html:root:root .t-quote.hang.bl .line:first-child { margin-left: -.42em; }
html:root:root .t-muted, html:root:root .t-lead.t-muted { color: var(--color-text-muted); }

.kt { white-space: nowrap; }
@media (max-width: 359px) { .kt { white-space: normal; } }   

html.js main :is(.rise, .sys-rise):not(.bl) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js main :is(.rise, .sys-rise):not(.bl) { opacity: 1; } }
html.sys-still main :is(.rise, .sys-rise):not(.bl) { opacity: 1; }

html:root:root :is(.phead, .ap-head, .ahead) h1, html:root:root .closing h2.display {
  font-size: var(--sys-fs-h1); line-height: 1.04; letter-spacing: -.036em; }
html:root:root :is(.ap-sec blockquote .title, .a-au blockquote .h, .a-co blockquote .h) {
  font-size: var(--sys-fs-quote); line-height: 1.22; letter-spacing: -.02em; text-wrap: pretty; }
html:root:root :is(h2.h, h2.a-h) { font-size: var(--font-size-title); line-height: var(--line-height-title); letter-spacing: -.03em; max-width: 24ch; }
html:root:root .a-au .ahead h1:is(.display, .title) { max-width: 16ch; }

@media (max-width: 899px) { html:root .nav .menu { height: 44px; padding: 0 var(--space-12); margin-right: calc(-1 * var(--space-8)); } }
html.sys-tap .nav .lockup { height: 44px; }
html:root footer .credits { max-width: 70ch; text-wrap: pretty; }


@property --color-bg { syntax: "<color>"; inherits: true; initial-value: #eef0f2; }
@property --color-text { syntax: "<color>"; inherits: true; initial-value: #0c0f17; }
@property --color-text-muted { syntax: "<color>"; inherits: true; initial-value: rgba(12,15,23,.62); }
@property --color-rule { syntax: "<color>"; inherits: true; initial-value: rgba(12,15,23,.12); }
@property --color-surface-panel { syntax: "<color>"; inherits: true; initial-value: #f3f4f7; }
@property --color-surface-window { syntax: "<color>"; inherits: true; initial-value: #fbfbfc; }
@property --color-surface-window-bar { syntax: "<color>"; inherits: true; initial-value: #f3f4f7; }
@property --color-surface-placeholder { syntax: "<color>"; inherits: true; initial-value: #e1e5ea; }
@property --color-surface-film-fallback { syntax: "<color>"; inherits: true; initial-value: #c9cdd2; }
@property --color-accent { syntax: "<color>"; inherits: true; initial-value: #0c0f17; }
@property --color-accent-hover { syntax: "<color>"; inherits: true; initial-value: #262a33; }
@property --color-on-accent { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --color-focus { syntax: "<color>"; inherits: true; initial-value: #0c0f17; }
@property --sys-stage-a { syntax: "<color>"; inherits: true; initial-value: #e9ecef; }
@property --sys-stage-b { syntax: "<color>"; inherits: true; initial-value: #e1e5ea; }
:root { --sys-stage-a: var(--p-grey-250); --sys-stage-b: var(--p-grey-300); --sys-ink: var(--p-ink); --sys-white: var(--p-white); }
.nsx-stage { background: linear-gradient(180deg, var(--sys-stage-a), var(--sys-stage-b)); }   

html[data-theme="dark"], html[data-theme="mix"].dusk {
  color-scheme: dark;
  --color-bg: #0f1115;                          
  --color-text: #eceef1;                        
  --color-text-muted: rgba(236,238,241,.62);    
  --color-rule: rgba(236,238,241,.08);         
  --color-surface-panel: #15181d;
  --color-surface-window: #1a1d23;              
  --color-surface-window-bar: #15181d;
  --color-surface-placeholder: #1d2127;
  --color-surface-film-fallback: #1d2127;
  --color-accent: #eceef1;                      
  --color-accent-hover: #ffffff;
  --color-on-accent: #0c0f17;
  --color-focus: #eceef1;
  --sys-stage-a: #17191e; --sys-stage-b: #111317;   
  --window-bar-rule: rgba(236,238,241,.07);
  --window-dot-fill: rgba(236,238,241,.18);
  --ring-menu: inset 0 0 0 1px rgba(236,238,241,.2);   
  --ring-capsule: inset 0 0 0 1px rgba(236,238,241,.08), inset 0 1px 0 rgba(236,238,241,.05);
  --shadow-capsule: 0 10px 30px -18px rgba(0,0,0,.9);
  --shadow-window: 0 0 0 .5px rgba(236,238,241,.12);   
}

html[data-theme="dark"] { --p-field-top: #12151a; --p-field-bottom: #141a25; --p-light-a: rgba(120,160,245,.24); --p-light-b: rgba(185,201,243,.07); }
html[data-theme="dark"] .field::after { opacity: .28; }

html[data-theme="mix"] { transition: --color-bg 700ms var(--ease-std), --color-text 700ms var(--ease-std), --color-text-muted 700ms var(--ease-std),
  --color-rule 700ms var(--ease-std), --color-surface-panel 700ms var(--ease-std), --color-surface-window 700ms var(--ease-std),
  --color-surface-window-bar 700ms var(--ease-std), --color-surface-placeholder 700ms var(--ease-std), --color-surface-film-fallback 700ms var(--ease-std),
  --color-accent 700ms var(--ease-std), --color-on-accent 700ms var(--ease-std), --color-focus 700ms var(--ease-std),
  --sys-stage-a 700ms var(--ease-std), --sys-stage-b 700ms var(--ease-std); }
html.sys-instant, html.sys-instant body { transition: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme="mix"] { transition: none; } }


.sys-light:not(.w, .b, .m), html[data-theme="dark"] .sys-light:not(.w, .b, .m), html.dusk .sys-light:not(.w, .b, .m) {   
  --color-bg: #eef0f2; --color-text: #0c0f17; --color-text-muted: rgba(12,15,23,.62); --color-rule: rgba(12,15,23,.12);
  --color-surface-panel: #f3f4f7; --color-surface-window: #fbfbfc; --color-surface-window-bar: #f3f4f7; --color-surface-placeholder: #e1e5ea;
  --color-surface-film-fallback: #c9cdd2; --color-accent: #0c0f17; --color-accent-hover: #262a33; --color-on-accent: #fff; --color-focus: #0c0f17;
  color: var(--color-text); }

:root {
  --sys-field-guess: var(--field-bg);
  --sys-field-g1: radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(55% 75% at 50% 112%, rgba(120,160,245,.30), rgba(185,201,243,.18) 45%, transparent 75%), linear-gradient(180deg, #f4f5f8, #e9edf6);
}


html[data-theme="dark"] .nsx-win, html.dusk .nsx-win {
  --color-surface-window: #fbfbfc; --color-surface-window-bar: #f3f4f7; --color-text: #0c0f17; --color-text-muted: rgba(12,15,23,.62);
  --window-bar-rule: rgba(12,15,23,.07); --window-dot-fill: rgba(12,15,23,.13); color: var(--color-text); }

.nav.onfilm .btn, .playx { color: var(--sys-ink); }

html[data-theme="dark"] .lockup, html.dusk .lockup { color: var(--sys-white); }



html:root:root .closing.band { position: relative; padding-top: var(--space-block); padding-bottom: var(--space-block); }
.next + .closing.band { padding-top: var(--space-block); }
html:root:root .closing.band::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: var(--color-rule); }
html:root:root .closing.band .row { margin-top: 0; align-items: center; gap: var(--space-24) var(--space-48); }
html:root:root .closing.band h2.display { font-size: var(--font-size-title); line-height: var(--line-height-title); letter-spacing: var(--letter-spacing-title); max-width: none; }
html:root:root .closing.band + footer.wrap { margin-top: 0; }
@media (max-width: 860px) {
  html:root:root .closing.band .row { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
  html:root:root .closing.band .doors { gap: var(--space-8) var(--space-12); }
}

html[data-theme="dark"] :is(.plate img, .g1card, .sys-light:not(.nsx-win, .w, .b, .m)), html.dusk :is(.plate img, .g1card, .sys-light:not(.nsx-win, .w, .b, .m)) {
  border-radius: var(--radius-media); box-shadow: 0 0 0 .5px rgba(236,238,241,.16); }   


.sys-theme { position: fixed; z-index: var(--z-nav); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--color-surface-window); box-shadow: var(--ring-menu); color: var(--color-text-muted);
  font: var(--font-weight-regular) var(--font-size-caption)/1 var(--font-sans);
  opacity: 1; visibility: visible; transition: opacity var(--t-move) var(--ease-std), visibility 0s; }
.sys-theme.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-exit) var(--ease-in-exit), visibility 0s linear var(--t-exit); }
.sys-theme button { position: relative; height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; color: inherit; cursor: pointer;
  transition: color var(--t-base) var(--ease-std); }
.sys-theme button::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }   
.sys-theme span { pointer-events: none; }
.sys-theme button:hover, .sys-theme button[aria-pressed="true"] { color: var(--color-text); }
.sys-theme button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sys-theme span { opacity: .6; }
html.embed .sys-theme, html.opening .sys-theme { display: none; }   

.sys-theme.inline { position: static; flex: none; box-shadow: var(--ring-menu); }
footer .cols > :first-child:has(> .sys-theme) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
@media print { .sys-theme { display: none; } }

.sys-theme.sys-theme-text { position: static; display: inline-flex; height: auto; padding: 0; gap: 2px; border-radius: 0; background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font: inherit; color: var(--color-text-muted); opacity: 1; visibility: visible; }
.sys-theme.sys-theme-text button { height: auto; padding: 0 4px; font: inherit; }
.sys-theme.sys-theme-text button:first-child { padding-left: 0; }



html.sys-on .rv { transform: none; }

html.sys-on .rv, html.sys-on .rv * { --m: 200% !important; --sys-m: 200% !important; }

html.sys-on .rv:is([data-focus="text"], [data-focus="art"], [data-focus="point"]):not(.in) { opacity: 0; filter: blur(var(--sys-fr, 2px)); }
html.sys-on .rv:is([data-focus="text"], [data-focus="art"], [data-focus="point"]):not(.sys-done) {
  transition: opacity var(--sys-t-s) var(--sys-ease-in) var(--d, 0ms), filter var(--sys-tr, var(--sys-t-m)) var(--sys-ease-in) var(--d, 0ms) !important; }
html.sys-on .rv:is([data-focus="text"], [data-focus="art"], [data-focus="point"]).in:not(.sys-done) { opacity: 1; filter: blur(0); }
html.sys-on .rv:is([data-focus="text"], [data-focus="art"], [data-focus="point"]).sys-done { opacity: 1; filter: none; }

html.sys-on main :is([data-focus="text"], [data-focus="art"], [data-focus="point"]):not(.rv):not([data-sentence] *, [data-pair] *) { opacity: 0; }
html.sys-on main [data-focus="image"]:not(.rv):not([data-sentence] *, [data-pair] *) img, html.sys-on main img[data-focus="image"]:not(.rv) { filter: blur(12px); }
html.sys-on main [data-focus="film"]:not(.rv):not([data-sentence] *, [data-pair] *) video { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.sys-on main [data-focus]:not(.rv), html.sys-on main [data-focus]:not(.rv) :is(img, video) { opacity: 1 !important; filter: none !important; } }
html.sys-still.sys-on main [data-focus]:not(.rv), html.sys-still.sys-on main [data-focus]:not(.rv) :is(img, video) { opacity: 1 !important; filter: none !important; }

html.sys-on .rv:is([data-focus="image"], [data-focus="film"], [data-focus="none"]) { opacity: 1; filter: none; }
.sys-soft { position: absolute; z-index: auto; pointer-events: none; margin: 0 !important; padding: 0; max-width: none !important; max-height: none !important; box-sizing: border-box;
  filter: blur(var(--sys-fr, 12px)); will-change: filter; }
html.sys-on .rv.in .sys-soft { filter: blur(0); transition: filter var(--sys-t-l) var(--sys-ease-in) var(--d, 0ms); }
html.sys-on .rv.quick .sys-soft, html.sys-on .rv.now .sys-soft { transition: none !important; filter: none; }

html.sys-on .rv.sys-live:is([data-focus="image"], [data-focus="film"]):not(.in) { filter: blur(var(--sys-fr, 12px)); }
html.sys-on .rv.sys-live:is([data-focus="image"], [data-focus="film"]):not(.sys-done) { transition: filter var(--sys-t-l) var(--sys-ease-in) var(--d, 0ms) !important; }
html.sys-on .rv.sys-live:is([data-focus="image"], [data-focus="film"]).in:not(.sys-done) { filter: blur(0); }

html.sys-on .rv[data-focus="film"]:not(.sys-done) video { opacity: 0; }
html.sys-on .rv[data-focus="film"].sys-done video { opacity: 1; }

html.sys-on .rv.rp.rp[data-focus="film"] video { opacity: 1; }
html.sys-on .rv.rp:is([data-focus="image"], [data-focus="film"]):not(.in) :is(img, video), html.sys-on .rv.rp:is(img, video):not(.in) { filter: blur(var(--sys-fr, 12px)); }
html.sys-on .rv.rp:is([data-focus="image"], [data-focus="film"]).in:not(.sys-done) :is(img, video), html.sys-on .rv.rp:is(img, video).in:not(.sys-done) {
  filter: blur(0); transition: filter var(--sys-t-l) var(--sys-ease-in) var(--d, 0ms); }
html.sys-on .rv.rp:is(.quick, .now) :is(img, video), html.sys-on .rv.rp:is(img, video):is(.quick, .now) { filter: none; transition: none; }

.sys-stack { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sys-stack > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: center / cover no-repeat; object-fit: cover; }


html.sys-on .rv.quick:not(.sys-done) { filter: none !important; transition: opacity var(--sys-t-s) var(--sys-ease-in) 0s !important; }
html.sys-on .rv.now, html.sys-on .rv.now *, html.sys-on .bl.now .line, html.sys-on .now .line { transition: none !important; }

html:root.sys-on .bl .line { display: inline-block; opacity: 0; filter: blur(min(.1em, var(--sys-r-text-max))); transform: none; will-change: auto;
  transition: opacity var(--sys-t-s) var(--sys-ease-in), filter var(--sys-t-m) var(--sys-ease-in);
  transition-delay: calc(min(var(--i, 0) + var(--sys-k, 0), var(--sys-steps)) * var(--sys-step) + var(--d, 0ms)); }
html:root.sys-on .bl.in .line { opacity: 1; filter: blur(0); transform: none; }
html:root.sys-on .bl.quick .line { filter: none; transition: opacity var(--sys-t-s) var(--sys-ease-in) 0s; }
html:root.sys-on .bl.sys-done .line { filter: none; transition: none; }
html:root.sys-on .bl:is(.rv) { opacity: 1; filter: none; }

html.sys-on .rv.sys-leave { opacity: 0 !important; filter: blur(10px) !important; transition: opacity var(--sys-t-m) var(--sys-ease-in), filter var(--sys-t-m) var(--sys-ease-in) !important; }
@media (max-width: 860px) { html.sys-on .rv.sys-leave { filter: blur(6px) !important; } }

[data-focus-group] [data-focus-item] :is(img, svg:not(svg svg), canvas), [data-focus-group] [data-focus-item]:is(img, svg) {
  transition: filter var(--t-base) var(--ease-std), opacity var(--t-base) var(--ease-std); }
[data-focus-group]:has([data-focus-item]:is(:focus-within, [aria-selected="true"], [aria-current="true"], .is-on)) [data-focus-item]:not(:focus-within, [aria-selected="true"], [aria-current="true"], .is-on) :is(img, svg:not(svg svg), canvas) {
  filter: blur(1px); opacity: .72; }
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  [data-focus-group]:has([data-focus-item]:hover) [data-focus-item]:not(:hover) :is(img, svg:not(svg svg), canvas) { filter: blur(1px); opacity: .72; }
}


html.sys-on [data-sentence] [data-s="subject"] { filter: blur(var(--sys-l3-r, 3px)); transition: filter var(--sys-t-m) var(--sys-ease-in); }
html.sys-on [data-sentence]:is([data-state="sharp"], [data-state="drawn"], [data-state="lit"]) [data-s="subject"] { filter: blur(0); }
html.sys-on [data-sentence].sys-done[data-state="lit"] [data-s="subject"] { filter: none; }
html.sys-on [data-sentence] [data-s="fill"] { opacity: 0; transition: opacity var(--sys-t-s) var(--sys-ease-in) calc(var(--sys-t-m) * .35); }
html.sys-on [data-sentence]:is([data-state="sharp"], [data-state="drawn"], [data-state="lit"]) [data-s="fill"] { opacity: 1; }
html.sys-on [data-sentence] :is([data-s="line"], [data-s="note"]) { opacity: 0; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transform: none !important;
  transition: opacity var(--sys-t-s) var(--sys-ease-in); }
html.sys-on [data-sentence]:is([data-state="sharp"], [data-state="drawn"], [data-state="lit"]) :is([data-s="line"], [data-s="note"]) { opacity: 1; }
html.sys-on [data-sentence] [data-s="ring"] { opacity: 0; filter: blur(2px); stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  transition: opacity var(--sys-t-s) var(--sys-ease-in), filter var(--sys-t-s) var(--sys-ease-in) !important; }
html.sys-on [data-sentence]:is([data-state="drawn"], [data-state="lit"]) [data-s="ring"] { opacity: 1; filter: blur(0); }
html.sys-on :is([data-sentence], [data-pair]) [data-s="dot"] { opacity: 0; filter: blur(var(--sys-r-point-px, 3px)); transform: none !important;
  transition: opacity var(--sys-t-s) var(--sys-ease-in), filter var(--sys-t-m) var(--sys-ease-in) !important; }
html.sys-on :is([data-sentence], [data-pair]) [data-s="field"] { opacity: 0; transition: opacity var(--sys-t-m) var(--sys-ease-in) !important; }
html.sys-on :is([data-sentence], [data-pair])[data-state="lit"] :is([data-s="dot"], [data-s="field"]) { opacity: 1; filter: none; }
html.sys-on :is([data-sentence], [data-pair])[data-state="lit"] [data-s="dot"] { filter: blur(0); }
html.sys-on [data-sentence].now *, html.sys-on [data-pair].now, html.sys-on [data-pair].now * { transition: none !important; }

html.sys-on [data-sentence][data-state="lit"][data-state] :is([data-s="subject"], [data-s="ring"]) { filter: none; }


@property --pair { syntax: "<number>"; inherits: true; initial-value: 0; }
:where([data-pair]) { position: relative; display: block; }
:where([data-pair] > [data-plane]) { display: block; width: 100%; }
:where([data-pair] > [data-plane="a"]) { position: relative; }
:where([data-pair] > [data-plane="b"]) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
:where([data-pair] > img[data-plane], [data-pair] > [data-plane] img) { object-fit: cover; }
:where([data-pair] > [data-plane] img) { display: block; width: 100%; height: 100%; }
:where([data-pair] > :not([data-plane], .sys-pa, .sys-pb, .sys-glow, .sys-dot)) { position: relative; z-index: 4; }
.sys-pa, .sys-pb { position: absolute; pointer-events: none; margin: 0; max-width: none; object-fit: cover; }
.sys-pa { filter: blur(var(--sys-pair-peak, 8px)); opacity: var(--pa, 0); }
.sys-pb { filter: blur(var(--sys-pair-peak, 8px)); opacity: calc(var(--pbo, 0) * var(--pbs, 1)); }
[data-pair] > [data-plane="b"] { opacity: var(--pbo, 0); }
[data-pair] [data-pair-note] { opacity: var(--pn, 1); }
[data-pair] > .sys-dot.at { z-index: 2; }


.sys-dot { display: inline-block; flex: none; width: var(--sys-dot); height: var(--sys-dot); border-radius: 50%; vertical-align: middle;
  background: var(--color-signal); box-shadow: var(--sys-dot-halo); }
html[data-blue="point"] .sys-dot { box-shadow: none; }

.sys-dot.at { position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); margin: calc(var(--sys-dot) / -2) 0 0 calc(var(--sys-dot) / -2); z-index: 2; }

.sys-glow { position: absolute; inset: 0; z-index: auto; pointer-events: none; display: block; }   
.sys-glow::before { content: ""; position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); width: calc(var(--gr, var(--sys-glow-r)) * 2); aspect-ratio: 1;
  margin: 0; transform: translate(-50%, -50%); border-radius: 50%; opacity: var(--sys-glow-k);
  background: radial-gradient(closest-side, var(--p-light-a), var(--p-light-b) var(--sys-glow-mid), transparent 100%); }
html[data-blue="point"] .sys-glow { display: none !important; }

html[data-blue="tint"][data-theme="dark"], html[data-blue="tint"][data-theme="mix"].dusk { --color-bg: var(--sys-night); }
html[data-blue="tint"] { --sys-frost-ink: rgba(13,17,25,.55); }
html:not([data-blue="tint"]) .sys-tint-only, html[data-blue="tint"] .sys-tint-off { display: none !important; }


.sys-note { display: block; margin-top: var(--space-12); font: var(--font-weight-regular) var(--font-size-caption)/var(--line-height-small) var(--font-sans);
  letter-spacing: 0; text-transform: none; color: var(--color-text-muted); text-align: left; text-wrap: pretty; }

html:not(.review) :is([data-meta], .hcap) { display: none !important; }


.sys-badges { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: var(--z-dev); pointer-events: none; }
.sys-badge { position: absolute; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--color-surface-window); box-shadow: var(--ring-menu);
  font: 11px/1.4 var(--font-mono); color: var(--color-text); white-space: nowrap; }
.sys-badge.over { text-decoration: underline; }


.sys-pic { display: block; }
.sys-pic > :is(.clip, figure, .bleed, picture, img, video):first-child { min-height: 70vh; }
.sys-pic .clip { aspect-ratio: auto; }
.sys-word { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-content: center; min-height: 70vh; }
.sys-word > :not(.sys-field) { grid-column: 1 / span 8; }
.sys-detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--space-24); align-items: center; }
.sys-detail > :first-child { grid-column: 1 / span 7; }
.sys-detail > :not(:first-child, .sys-field) { grid-column: 8 / span 5; }
.sys-detail[data-flip] > :first-child { grid-column: 6 / span 7; order: 2; }
.sys-detail[data-flip] > :not(:first-child) { grid-column: 1 / span 5; order: 1; }
@media (max-width: 860px) {
  .sys-word > *, .sys-detail > *, .sys-detail[data-flip] > * { grid-column: 1 / -1 !important; order: 0 !important; }
  .sys-word { min-height: 60svh; } .sys-pic > :is(.clip, figure, .bleed, picture, img, video):first-child { min-height: 0; }
}




footer[data-sys-footer].sys-foot-wrap { display: block; width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); box-sizing: border-box; }
footer[data-sys-footer] .sys-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--space-40);
  padding: var(--space-48) 0 var(--space-32); border-top: 1px solid var(--color-rule); font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-muted); }
footer[data-sys-footer] .sys-foot-top { grid-column: 1 / span 3; display: grid; align-content: start; justify-items: start; gap: var(--space-16); min-height: 44px; }
footer[data-sys-footer] .sys-foot-tag { margin: 0; max-width: 16em; font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-muted); }
footer[data-sys-footer] .sys-foot-cols { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--space-32); }

footer[data-sys-footer] .sys-foot-col { grid-column: span 2; } footer[data-sys-footer] .sys-foot-col:last-child { grid-column: span 3; }
footer[data-sys-footer] .sys-foot-col { display: grid; align-content: start; gap: 10px; }
footer[data-sys-footer] .sys-foot-h { margin: 0 0 4px; font-size: var(--font-size-caption); line-height: 1.35; color: var(--color-text-muted); }
footer[data-sys-footer] .lockup { color: var(--color-text); }
footer[data-sys-footer] .sys-foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-24); margin: 0; padding-top: var(--space-24);
  border-top: 1px solid var(--color-rule); font-size: var(--font-size-caption); }
footer[data-sys-footer] .sys-foot-base > a:last-child { margin-left: auto; }
footer[data-sys-footer] .sys-social { display: inline-flex; gap: var(--space-24); }
footer[data-sys-footer] a { color: var(--color-text-muted); white-space: nowrap; transition: color var(--t-base) var(--ease-std); justify-self: start; }
footer[data-sys-footer] .sys-foot-col a { color: var(--color-text); }
footer[data-sys-footer] a:hover, footer[data-sys-footer] a[aria-current="page"] { color: var(--color-text); }
footer[data-sys-footer] .sys-foot-col a:hover { color: var(--color-text-muted); }
@media (max-width: 1100px) { footer[data-sys-footer] .sys-foot-top { grid-column: 1 / -1; } footer[data-sys-footer] .sys-foot-cols { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  footer[data-sys-footer] .sys-foot-col, footer[data-sys-footer] .sys-foot-col:last-child { grid-column: span 3; } }
@media (max-width: 860px) {
  footer[data-sys-footer] .sys-foot { row-gap: var(--space-32); padding-top: var(--space-40); }
  footer[data-sys-footer] .sys-foot-cols { grid-template-columns: 1fr 1fr; row-gap: var(--space-24); }
  footer[data-sys-footer] .sys-foot-col { grid-column: auto; }
  footer[data-sys-footer] .sys-foot-col { gap: 0; }
  footer[data-sys-footer] .sys-foot-col a { display: flex; align-items: center; min-height: 44px; }
  footer[data-sys-footer] .sys-foot-col:last-child { grid-column: 1 / -1; }
  footer[data-sys-footer] .lockup { height: 44px; }
  footer[data-sys-footer] .sys-foot-base > a:last-child { margin-left: 0; }
}

.sys-copy { position: relative; margin: 0 0 0 var(--space-12); padding: 0; border: 0; background: none; font: inherit; font-size: var(--font-size-caption); line-height: inherit;
  color: var(--color-text-muted); white-space: nowrap; cursor: pointer; transition: color var(--t-base) var(--ease-std); }
.sys-copy::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.sys-copy:hover, .sys-copy.is-done { color: var(--color-text); }
footer[data-sys-footer] .sys-foot-mail { display: inline-flex; align-items: baseline; justify-self: start; }
footer[data-sys-footer] .sys-legal { display: inline-flex; gap: var(--space-24); }
@media (max-width: 860px) { footer[data-sys-footer] .sys-foot-mail { display: flex; align-items: center; } }

.lg11 { padding-bottom: var(--s11-sec); }
.lg11-rows { margin: 0; border-bottom: 1px solid var(--s11-rule); }
.lg11-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: var(--space-24) 0; border-top: 1px solid var(--s11-rule); }
.lg11-row dt { grid-column: 1 / span 3; margin: 0; color: var(--color-text); }
.lg11-row dd { grid-column: 4 / span 6; margin: 0; color: var(--color-text-muted); }
.lg11-row dd a { color: var(--color-text); }
@media (max-width: 860px) { .lg11-row dt, .lg11-row dd { grid-column: 1 / -1; } .lg11-row dd { margin-top: var(--space-8); } }

.nav.solid:not(.onfilm)::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--nav-inset); background: var(--color-bg); pointer-events: none; }



html.s7-opening .nav, html.s7-opening [data-hero-word] { opacity: 0; }
html.s7-opening [data-hero-shade] { opacity: 0; }
html.s7-opening .sys-theme { display: none; }
[data-hero-mark] { visibility: hidden; }
html[data-intro="b"].s7-opening [data-hero-mark], html[data-intro="c"].s7-opening [data-hero-mark] { visibility: visible; }

[data-hero-veil] { opacity: 0; pointer-events: none; }
html[data-intro="c"].s7-opening [data-hero-veil] { opacity: 1; }
html.s7-opening [data-hero-mark]:not(.rv) { opacity: 0; }   



@media (prefers-reduced-motion: reduce) {
  html.sys-on .rv, html.sys-on .rv * { transition: none !important; }
  html.sys-on .rv:not([data-focus="none"]) { opacity: 1 !important; filter: none !important; }
  html.sys-on .bl .line { opacity: 1 !important; filter: none !important; transition: none !important; }
  .sys-soft, .sys-pa, .sys-pb, .sys-stack { display: none !important; }
  html.sys-on [data-sentence], html.sys-on [data-sentence] * { transition: none !important; }
  html.sys-on [data-sentence] [data-s="subject"] { filter: none !important; }
  html.sys-on :is([data-sentence], [data-pair]) :is([data-s="fill"], [data-s="dot"], [data-s="field"], [data-s="note"], [data-s="ring"], [data-s="line"]) { opacity: 1 !important; filter: none !important; }
  [data-pair] { --pair: 1 !important; --pa: 0 !important; --pbo: 1 !important; --pbs: 0 !important; --pn: 0 !important; }
  [data-pair] [data-pair-note] { display: none !important; }
  [data-focus-group] *, [data-focus-group] [data-focus-item] { filter: none !important; }
}
html.sys-still.sys-on .rv:not([data-focus="none"]), html.sys-still.sys-on .bl .line { opacity: 1 !important; filter: none !important; transition: none !important; }
html.sys-still .sys-soft, html.sys-still .sys-stack { display: none !important; }



html:root :is(.t-body, .t-lead, .t-small, .t-caption, .lead, .say, .what, main p) { text-wrap: pretty; }

html:root :is(.cap, .ccap) { justify-content: flex-start; gap: var(--space-8) var(--space-16); margin-top: var(--space-12); }
html:root .t-caption { color: var(--color-text-muted); }

.tlink:active { opacity: .62; transition: opacity var(--t-press) linear; }
.tlink:active i { transform: translateX(var(--nudge)); }
.tlink i { transition: transform var(--t-move) var(--sys-ease); }

html[data-theme="dark"] .nsx-win, html.dusk .nsx-win { --color-surface-window: #e6e8eb; --color-surface-window-bar: #dfe2e6; }
html[data-theme="dark"] .nsx-win iframe, html.dusk .nsx-win iframe { filter: brightness(.92); }
html[data-theme="dark"] .sys-light:not(.nsx-win, .w, .b, .m), html.dusk .sys-light:not(.nsx-win, .w, .b, .m) { --color-bg: #e6e8eb; --color-surface-panel: #e6e8eb; --color-surface-window: #e6e8eb; --color-surface-window-bar: #dfe2e6; }




:is(button, input, select, textarea, iframe, .sys-note, .btn, .tlink):not(.rv):not(.rv *) { filter: none !important; }
html.sys-on .rv.sys-done :is(button, .btn, .tlink, .sys-note, iframe) { filter: none !important; }


:root { --s11-sec: 128px; --s11-gap: 16px; --s11-media-r: var(--radius-media); --s11-rule: rgba(255,255,255,.08);
  
  --sec: var(--s11-sec); --space-section: var(--s11-sec); --space-media-gap: var(--s11-gap); --nav-safe: 72px;
  
  --s11-nav-light-bg: rgba(250,252,255,.88); --s11-nav-light-edge: inset 0 0 0 1px rgba(255,255,255,.72), 0 0 0 1px rgba(12,15,23,.14);   
  --s11-nav-light-ink: #0c0f17; --s11-nav-light-muted: rgba(12,15,23,.62); --s11-nav-light-rule: rgba(12,15,23,.1); --s11-nav-light-menu: rgba(250,252,255,.94);
  --s11-nav-dark-bg: rgba(11,13,18,.8); --s11-nav-dark-edge: inset 0 0 0 1px rgba(255,255,255,.2);   
  --s11-nav-dark-ink: rgba(255,255,255,.92); --s11-nav-dark-muted: rgba(255,255,255,.62); --s11-nav-dark-rule: rgba(255,255,255,.12); --s11-nav-dark-menu: rgba(11,13,18,.9); }
html[data-theme="light"]:not(.dusk) { --s11-rule: rgba(12,15,23,.08); }
@media (max-width: 1199px) { :root { --s11-sec: 96px; } }
@media (max-width: 640px) { :root { --s11-sec: 72px; } }


.nav .wrap::before, .nav .wrap, .nav .links > a, .nav .btn, .nav .lockup { transition: background-color var(--t-base) var(--ease-std), color var(--t-base) var(--ease-std), box-shadow var(--t-base) var(--ease-std); }
html:root:not(.nav-solid) .nav.solid.on-light:not(.onfilm) .wrap::before { background: var(--s11-nav-light-bg);
  -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6); box-shadow: var(--s11-nav-light-edge); }
html:root:not(.nav-solid) .nav.solid.on-dark:not(.onfilm) .wrap::before { background: var(--s11-nav-dark-bg);
  -webkit-backdrop-filter: blur(32px) saturate(1.4); backdrop-filter: blur(32px) saturate(1.4); box-shadow: var(--s11-nav-dark-edge); }
html:root .nav.solid.on-light:not(.onfilm) .wrap { color: var(--s11-nav-light-ink); --color-text: var(--s11-nav-light-ink); --color-text-muted: var(--s11-nav-light-muted); --color-rule: var(--s11-nav-light-rule);
  --color-accent: var(--s11-nav-light-ink); --color-on-accent: #fff; --color-accent-hover: #2a2f3a; }
html:root .nav.solid.on-dark:not(.onfilm) .wrap { color: var(--s11-nav-dark-ink); --color-text: var(--s11-nav-dark-ink); --color-text-muted: var(--s11-nav-dark-muted); --color-rule: var(--s11-nav-dark-rule);
  --color-accent: #fff; --color-on-accent: #0c0f17; --color-accent-hover: rgba(255,255,255,.86); }
html:root .nav.solid:is(.on-light, .on-dark):not(.onfilm) .links > a { color: var(--color-text-muted); }
html:root .nav.solid:is(.on-light, .on-dark):not(.onfilm) .links > a:hover, html:root .nav.solid:is(.on-light, .on-dark):not(.onfilm) .links > a[aria-current="page"] { color: var(--color-text); }
html:root .nav.solid:is(.on-light, .on-dark):not(.onfilm) .btn { background: var(--color-accent); color: var(--color-on-accent); }
html:root .nav.solid:is(.on-light, .on-dark):not(.onfilm) :is(.lockup, .careers, .menu) { color: var(--color-text); }
@media (max-width: 899px) {
  html:root:not(.nav-solid) .nav.on-light:not(.onfilm) .links { background: var(--s11-nav-light-menu); box-shadow: var(--s11-nav-light-edge); }
  html:root:not(.nav-solid) .nav.on-dark:not(.onfilm) .links { background: var(--s11-nav-dark-menu); box-shadow: var(--s11-nav-dark-edge); }
  html:root .nav:is(.on-light, .on-dark):not(.onfilm) .links > a { color: var(--color-text); border-top-color: var(--color-rule); }
}


@media (min-width: 900px) { .nav .careers.m-bar { display: none; } }
@media (max-width: 899px) { .nav .links .d-only { display: none; } }


@media (min-width: 1101px) { footer[data-sys-footer] .sys-foot-col, footer[data-sys-footer] .sys-foot-col:last-child { grid-column: span 3; } }

@media (max-width: 860px) {
  html:root:root .nav .links > a.m-only.m-only { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: var(--space-16); padding: 0 var(--space-24);
    border-top: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }
}


@media (max-width: 860px) {
  html:root .nav .btn { display: inline-flex; order: 2; margin-left: 0; padding: 0 var(--space-12); }   
  html:root .nav .lockup { flex-shrink: 0; }
  html:root .nav .lockup { margin-right: auto; }   
  html:root .nav .btn i { display: none; }   
  html:root .nav .wrap { gap: var(--space-8); }   
  html:root .nav .menu { order: 3; margin-left: 0; }
  html:root .nav .careers.m-bar { display: none; }
  html:root .nav .links > a.nav-careers.d-only { display: flex; align-items: center; gap: var(--space-8); order: -1; border-top: 0; }
  html:root .nav .links > a:first-child:not(.nav-careers) { border-top: 1px solid var(--color-rule); }
  html:root:root .nav .links > a.m-only.m-only { display: none; }
}

@media (min-width: 390px) and (max-width: 860px) {
  html:root .nav .wrap { gap: 0; padding-left: calc(var(--gut) + var(--space-16)); }
  html:root .nav .careers.m-bar { display: flex; order: 1; margin: 0 var(--space-12) 0 0; }
  html:root .nav .careers.m-bar + .menu { margin-left: 0; }
  html:root .nav .menu { padding-left: var(--space-8); }
  html:root .nav .links > a.nav-careers.d-only { display: none; }
  html:root .nav .links > a:first-child:not(.nav-careers) { border-top: 0; }   
}

.nav .btn, .tlink, .pp-mail a, footer[data-sys-footer] .sys-foot-careers { position: relative; }
.nav .btn::before, .tlink::before, .pp-mail a::before, footer[data-sys-footer] .sys-foot-careers::before {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }