@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{--bone:#EDEAE3;--dim:#A29E94;--slate:#A8B9D3;--cyan:#05E1F9;--ink:#12110E;--hair:rgba(255,248,230,.08);--hair2:rgba(255,248,230,.13)}
*{box-sizing:border-box}
body{margin:0;background:#050506;color:var(--bone);font:16px/1.5 'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased}
.frame{position:relative;width:1440px;height:900px;overflow:hidden;background:#060607}
/* near-black environment: localized light pools + grain */
.pool{position:absolute;border-radius:50%;pointer-events:none}
.pool.cyan{width:900px;height:900px;left:-340px;top:-380px;background:radial-gradient(closest-side,rgba(5,225,249,.13),rgba(18,160,120,.06) 45%,rgba(0,0,0,0))}
.pool.warm{width:760px;height:760px;right:-300px;bottom:-360px;background:radial-gradient(closest-side,rgba(255,140,70,.085),rgba(255,106,43,.03) 50%,rgba(0,0,0,0))}
.pool.react{width:260px;height:260px;background:radial-gradient(closest-side,rgba(5,225,249,.10),rgba(5,225,249,0))}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55));pointer-events:none}
.grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* nav */
.nav{position:absolute;inset:0 0 auto 0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 80px;z-index:20}
.nav svg{height:26px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;color:var(--dim);font-size:15px}
.nav .r{display:flex;gap:18px;align-items:center;color:var(--dim);font-size:15px}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:10px;font:600 15px 'Instrument Sans';background:var(--bone);color:var(--ink)}
.btn.sm{height:38px;padding:0 15px;font-size:14px}
.btn.ghost{background:transparent;border:1px solid var(--hair2);color:var(--bone)}
.eyebrow{font:500 12px/16px 'Geist Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
h1{font:700 56px/1.03 'Space Grotesk';letter-spacing:-.035em;margin:14px 0 12px}
/* orbit system */
.orbit{position:absolute;left:0;top:0;width:1440px;height:900px}
.lane{position:absolute;border-radius:50%;border:1px solid rgba(237,234,227,.07)}
.lane.c{border-color:rgba(5,225,249,.13)}
.emblem{position:absolute;filter:drop-shadow(0 0 40px rgba(5,225,249,.12))}
/* asset cards */
.card{position:absolute;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,248,230,.07)}
.card .band{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:11px;line-height:1.25}
.card .band b{display:block;font-weight:600;font-size:12px}
.card .band i{font-style:normal;color:rgba(237,234,227,.62)}
.mono{font-family:'Geist Mono'}
.tc{position:absolute;left:10px;top:8px;font:500 10px 'Geist Mono';color:rgba(255,255,255,.8);letter-spacing:.04em}
.far{filter:saturate(.75) brightness(.72)}
.wave{background:#121210;border:1px solid var(--hair2);display:flex;align-items:center;gap:10px;padding:0 12px}
.wave .pl{width:26px;height:26px;border-radius:50%;background:#1F1F1C;display:grid;place-items:center;flex:none}
.wave svg{flex:1;height:30px}
.wave .t{white-space:nowrap;font:500 11px 'Geist Mono';color:var(--dim)}
.folder{background:#121210;border:1px solid var(--hair2);display:flex;align-items:center;gap:12px;padding:0 14px}
.folder b{font-weight:600;font-size:13px;display:block}
.folder i{font-style:normal;color:var(--dim);font-size:11px}
/* product fragment */
.frag{position:absolute;border-radius:16px;background:#0D0D0C;border:1px solid var(--hair2);box-shadow:0 40px 90px rgba(0,0,0,.65);overflow:hidden;font-size:13px;line-height:1.35}
.frag .bar{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-bottom:1px solid var(--hair)}
.frag .bar b{font-weight:600;font-size:14px}.frag .bar i{font-style:normal;color:var(--dim)}
.frag .body{padding:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile .th{aspect-ratio:16/9;border-radius:9px;position:relative;overflow:hidden}
.tile b{display:block;margin-top:8px;font-weight:600}
.tile i{font-style:normal;color:var(--dim);font-size:12px}
.frow{display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 12px;border-radius:10px;background:#141412;border:1px solid var(--hair)}
.frow div{flex:1}.frow b{display:block;font-weight:600}.frow i{font-style:normal;color:var(--dim);font-size:12px}
.label{position:absolute;left:24px;bottom:20px;z-index:30;font:500 12px 'Geist Mono';letter-spacing:.06em;color:rgba(237,234,227,.5)}

.imAct{position:absolute;display:flex;align-items:center;gap:12px}
.imAct .hs{display:flex;padding:3px;border-radius:10px;border:1px solid rgba(255,248,230,.13);background:#121210}
.imAct button{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;-webkit-appearance:none;appearance:none;pointer-events:none}
.imAct.live button{pointer-events:auto;cursor:pointer}
.imAct .hs button{position:relative;width:38px;height:32px;display:grid;place-items:center;border-radius:7px;font:600 13px 'Instrument Sans';color:#A29E94;border:1px solid transparent}
.imAct .hs button.on{color:#EDEAE3;background:rgba(168,185,211,.14);border-color:rgba(168,185,211,.45)}
/* the selected host's 2 px underline, in its ring colour from the app's tokens (hostAe.ring, hostPr.ring) */
.imAct .hs button::after{content:'';position:absolute;left:50%;bottom:4px;width:12px;height:2px;margin-left:-6px;border-radius:1px;background:#7D5AA6;opacity:0}
.imAct .hs button[data-h=ae]::after{background:#5A5AE0}
.imAct .hs button.on::after{opacity:1}
.imAct .bt{height:40px;padding:0 18px;border-radius:10px;display:inline-flex;align-items:center;font:600 14px 'Instrument Sans';background:#EDEAE3;color:#12110E;text-align:left}
.imAct .bt.down{background:#D9D5CC;transform:translateY(1px)}
/* live at the Import rest: a choice cross-fades (the site's 120 ms control timing); a press takes the approved pressed look */
.imAct.live .hs button{transition:color .12s ease,background-color .12s ease,border-color .12s ease}
.imAct.live .hs button::after{transition:opacity .12s ease}
.imAct.live .bt{transition:background-color .1s ease,transform .1s ease}
.imAct.live .bt:active{background:#D9D5CC;transform:translateY(1px)}
.imAct button:focus{outline:none}
.imAct button:focus-visible{outline:2px solid rgba(168,185,211,.95);outline-offset:3px}
.imAct button:focus-visible{outline-width:round(up, calc(2px / var(--im-sc,1)), 1px);outline-offset:calc(3px / var(--im-sc,1))}
.imOk{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,248,230,.05);border:1px solid rgba(255,248,230,.08);font-size:13px;color:#EDEAE3}
.imCopy .lh{text-wrap:balance}
body.mob .imAct .bt{font-size:13.5px;padding:0 14px}

.pvP{position:absolute;overflow:hidden}
.pvP>div{position:absolute;left:0;top:0;width:220px;height:124px;transform-origin:0 0}
.pvT{position:absolute;font-weight:600;font-size:16px;line-height:1.5;transform-origin:0 0;white-space:nowrap}
.pvM{position:absolute;font-size:12px;line-height:1.5;color:#A29E94;white-space:nowrap}
.pvR{position:absolute;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:7px;align-items:baseline}
.pvR span{font:500 11px 'Geist Mono';letter-spacing:.06em;color:#A29E94;text-transform:uppercase}
.pvR b{font-weight:400;font-size:13px;color:#EDEAE3}
.kc{position:absolute;right:10px;top:50%;margin-top:-12px;font:500 11px 'Geist Mono';color:#EDEAE3;border:1px solid rgba(168,185,211,.6);background:#1B1D21;border-radius:6px;padding:4px 9px;opacity:0}
.kc.down{transform:translateY(1px);background:#23262B}

.ccS{position:absolute;left:0;right:0;top:0;display:none}
.sf{display:none;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(168,185,211,.55);background:#141412;box-sizing:border-box}
.sf .q{font-size:16px;color:#EDEAE3;letter-spacing:-.01em;white-space:pre}
.sf .cr{width:1.5px;height:19px;background:#05E1F9;margin-left:-8px;box-shadow:0 0 8px rgba(5,225,249,.6);opacity:0}
.sf .k{margin-left:auto;font:500 11px 'Geist Mono';color:#A29E94;border:1px solid rgba(255,248,230,.13);border-radius:6px;padding:3px 7px}
.sgs{display:none}
.sg .gl{font:500 11px 'Geist Mono';letter-spacing:.08em;color:#A29E94;margin:0 0 6px 2px}
.sr{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;border:1px solid transparent}
.sr.sel{background:rgba(168,185,211,.10);border-color:rgba(168,185,211,.45)}
.sr .tx{flex:1;min-width:0}.sr b{display:block;font-weight:600;font-size:13.5px}.sr i{font-style:normal;color:#A29E94;font-size:12px}
.sr .len{font:500 12px 'Geist Mono';color:#A29E94}
.sr .pb{width:30px;height:30px;border-radius:50%;background:#1F1F1C;display:grid;place-items:center;flex:none}
.sr .pt{width:64px;height:36px;border-radius:6px;overflow:hidden;position:relative;flex:none}
.sr .pt>div{position:absolute;left:0;top:0;width:220px;height:124px;transform:scale(.2909);transform-origin:0 0}
body.mob .sf{height:42px}body.mob .sr b{font-size:13px}

html{overscroll-behavior-y:none}
body{margin:0;background:#060607}
#run{position:relative;height:100vh;height:100svh}
body.rm #run{height:600vh;height:600svh}
#vp{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden;background:#060607;transition:opacity .17s linear}
#vp.fade{opacity:0}
#stage{position:absolute!important;left:0;top:0;transform-origin:0 0}
#poLayer{position:absolute;inset:0;z-index:30;pointer-events:none}
#poLayer .poRings{position:absolute;left:0;top:0;overflow:visible}
.poGlow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(5,225,249,.32),rgba(5,225,249,.08) 55%,rgba(5,225,249,0));opacity:0}
.poEm{position:absolute;transform-origin:50% 50%;opacity:0}
.poAp{position:absolute;height:1.5px;border-radius:1px;background:linear-gradient(90deg,rgba(160,242,252,0),rgba(160,242,252,.55) 28%,rgba(240,253,255,.95) 50%,rgba(160,242,252,.55) 72%,rgba(160,242,252,0));box-shadow:0 0 10px rgba(5,225,249,.35);opacity:0}
.poPulse{position:absolute;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(160,242,252,.8);opacity:0}
.poText{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px}
.poH{font:700 60px/1.04 'Space Grotesk';letter-spacing:-.035em;color:var(--bone);text-wrap:balance;opacity:0}
.poS{margin-top:16px;max-width:500px;font:400 17px/1.5 'Instrument Sans';color:var(--dim);text-wrap:balance;opacity:0}
.poB{margin-top:28px;opacity:0;text-decoration:none;pointer-events:none;transition:background-color .12s ease,scale .1s ease}
.poB.live{pointer-events:auto;cursor:pointer}
.poB.live:hover{background:#F7F5F0}
.poB.live:active{scale:.98}
.poB:focus{outline:none}
.poB:focus-visible{outline:2px solid rgba(168,185,211,.95);outline-offset:3px}
.poC{margin-top:18px;font:500 12px/16px 'Geist Mono';letter-spacing:.02em;color:rgba(162,158,148,.75);opacity:0}
body.mob .poH{font-size:33px}
body.mob .poS{font-size:15px;max-width:350px;margin-top:12px}
body.mob .poB{margin-top:24px}
#after{display:flex;align-items:center;justify-content:space-between;gap:24px;height:120px;padding:0 80px;box-sizing:border-box;background:#060607;border-top:1px solid rgba(255,248,230,.06);font:400 14px 'Instrument Sans';color:var(--dim)}
#after .fmark svg{height:22px;width:auto;display:block}
#after nav{display:flex;gap:24px}
#after .fc{color:rgba(162,158,148,.6)}
body.mob #after{flex-direction:column;align-items:flex-start;justify-content:center;height:auto;padding:28px 16px 36px;gap:14px}
/* narrow screens: same world, copy and Library re-seated in screen space */
body.mob .nav{position:absolute;height:56px;padding:0 16px}
body.mob .nav ul{display:none}
body.mob .nav svg{height:20px}
body.mob .nav .r{gap:12px;font-size:14px}
body.mob .btn{height:42px;padding:0 16px;font-size:14px}
body.mob .btn.sm{height:34px;padding:0 12px;font-size:13px}
body.mob .vignette,body.mob .grain{z-index:40}
body.mob #stage{overflow:visible;background:transparent}
body.mob #heroText{top:78px;padding:0 16px}
body.mob #heroText h1{font-size:30px!important;margin:10px 0 10px}
body.mob #heroText>div:nth-child(3){font-size:15px!important;line-height:22px!important}
body.mob #lib{left:16px;right:16px;width:auto;top:auto;bottom:calc(5vh + 8px)}
body.mob #lib .lh{font-size:27px}
body.mob #lib .ls{font-size:14px}
body.mob .frag .bar{height:44px}
body.mob .frag .body{padding:12px}
body.mob .grid{gap:8px}
body.mob .tile b{font-size:12px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mob .tile i{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
body.mob .tile .th [style*="26px Space"]{font-size:14px!important}
body.mob .tile .th [style*="11px Instrument"]{font-size:7px!important;padding:2px 5px!important}
body.mob .tile .th [style*="width:46px"]{transform:scale(.6)}
body.mob .tile .th .tc{font-size:7.5px;left:6px;top:5px}
body.mob .tile .th .nd{width:6px;height:6px;right:5px;top:5px}
body.mob .frow{margin-top:10px;padding:9px 10px}

html,body{background:#060607}
#stage{position:relative;width:1440px;height:900px;overflow:hidden;background:#060607}
#root{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0}
.layer{position:absolute;left:0;top:0;width:1440px;height:900px;pointer-events:none;overflow:visible}
.ac{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.ac.wave{display:flex}.ac.folder{display:flex}
#emb{position:absolute;left:0;top:0}
#hub{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(5,225,249,.12),rgba(18,160,120,.04) 55%,rgba(0,0,0,0))}
#heroText{position:absolute;left:0;right:0;top:100px;text-align:center;z-index:30}
#lib{position:absolute;left:780px;top:118px;width:580px;z-index:30}
#lib .lh{font:700 34px/1.08 'Space Grotesk';letter-spacing:-.03em;margin:8px 0 6px}
#lib .ls{color:#A29E94;font-size:15px}
#lib .frag .bar svg{flex:none}
.pool{will-change:transform}
.tile .th .nd{position:absolute;right:8px;top:8px;width:8px;height:8px;border-radius:50%;background:#05E1F9;box-shadow:0 0 0 3px rgba(5,225,249,.18)}
.tile.added .th{box-shadow:inset 0 0 0 1px rgba(5,225,249,.45)}
.card .band b,.card .band i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absw{position:absolute;left:0;top:0}
.mask{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;transform-origin:0 0}
.cin{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:12px}
.sl{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 50%}
.cin:not(.ing) .sl{display:none}.cin.ing .solid{display:none}.cin.ing{box-shadow:none}
.si{position:absolute;top:0;margin:0;box-shadow:none!important;border-radius:0!important}
#tglow{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:radial-gradient(closest-side,rgba(5,225,249,.3),rgba(5,225,249,0));opacity:0;z-index:4}

/* ---- WEB-1 additions: links, focus, the eyebrow's macOS, the seat (was an injected <style>), the static document */
.keep-case{text-transform:none}
.nav a:not(.btn),#after a{color:inherit;text-decoration:none}
.nav .brand{display:flex;align-items:center}
a.btn{text-decoration:none}
a:focus{outline:none}
a:focus-visible{outline:2px solid rgba(168,185,211,.95);outline-offset:3px;border-radius:6px}
a.btn:focus-visible{border-radius:10px}
#lib.flowSeat{left:340px!important;top:96px!important;width:760px!important}
body.mob #lib.flowSeat{left:16px!important;right:16px!important;width:auto!important;bottom:auto!important;top:var(--seat-top,66px)!important}
/* the Preview/Import clones carry the Library copy invisibly (opacity 0, aria-hidden) as a layout spacer, so its line count
   positions the approved composition. Omar's longer privacy sentence wraps earlier than r3's (one line from 668.7 px instead
   of 563.4 px at 15 px), which would lift Preview and Import by a line. The spacer keeps r3's line count: one line exactly
   where r3's sentence was one line. The visible Library sentence is untouched. */
.pvClone,.imClone{container-type:inline-size}
@container (min-width: 563.4px){.pvClone > .ls,.imClone > .ls{white-space:nowrap}}
/* the readable copy for assistive tech, visually hidden; pinned to the top so a #section address never makes the browser
   scroll the page (which would end the story) before the story seeks to that rest itself */
#doc{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#doc .docHead{display:none}
/* the payoff scales with the story on desktop; its focus ring stays at least 2 px on screen at any scale */
#poLayer.sc .poB:focus-visible{outline-width:calc(2px / var(--po-s,1));outline-offset:calc(3px / var(--po-s,1))}
/* outline widths snap to whole device pixels: round up first, so the scaled ring is never thinner than 2 px on screen */
#poLayer.sc .poB:focus-visible{outline-width:round(up, calc(2px / var(--po-s,1)), 1px)}
/* the motion script is deferred: nothing of the story is laid out or painted until it has set the layout (mobile
   browsers would otherwise widen the layout viewport to the desktop-sized stage) */
html:not(.motion) #run{display:none}
html:not(.motion) #after{visibility:hidden}