.space-intro{z-index:190;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;position:fixed;inset:0}.space-intro__door{background:var(--background);will-change:transform;height:50%;position:absolute;left:0;right:0;overflow:hidden}.space-intro__door[data-door=top]{top:0}.space-intro__door[data-door=bottom]{bottom:0}.space-intro__door:after{content:"";background:var(--accent-line);height:1px;box-shadow:0 0 18px 1px color-mix(in oklab, var(--accent-line) 70%, transparent);opacity:0;transition:opacity .16s ease-out .3s;position:absolute;left:0;right:0}.space-intro__door[data-door=top]:after{bottom:0}.space-intro__door[data-door=bottom]:after{top:0}.space-intro[data-phase=opening] .space-intro__door:after{opacity:1}.space-intro__face{background:radial-gradient(56% 38% at 50% 50%, color-mix(in oklab, var(--accent-line) 11%, transparent), transparent 72%);grid-template-rows:1fr auto 1fr;justify-items:center;height:200%;padding-inline:1.25rem;display:grid;position:absolute;left:0;right:0}.space-intro__door[data-door=top] .space-intro__face{top:0}.space-intro__door[data-door=bottom] .space-intro__face{bottom:0}.space-intro__brand{align-self:end;padding-bottom:clamp(2.25rem,7svh,4rem);font-size:1.25rem}.space-intro__foot{align-self:start;justify-items:center;gap:.875rem;padding-top:clamp(2rem,6svh,3.25rem);display:grid}.space-intro__prompt{color:color-mix(in oklab, var(--foreground) 64%, transparent);text-align:center;margin:0;font-size:.9375rem;line-height:1.4}.space-intro__timer{background:color-mix(in oklab, var(--foreground) 14%, transparent);width:5.5rem;height:1px;overflow:hidden}.space-intro__timer>span{background:color-mix(in oklab, var(--foreground) 48%, transparent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.space-intro[data-live] .space-intro__timer>span{animation:space-intro-timer var(--space-intro-auto,9s) linear forwards}.space-intro[data-phase=opening] .space-intro__timer>span{animation-play-state:paused}.space-key{width:min(32rem,80vw);height:5.75rem;color:inherit;cursor:pointer;background:0 0;border:0;outline:none;padding:0;display:block;position:relative}.space-key__glow{background:radial-gradient(closest-side, color-mix(in oklab, var(--accent-line) 34%, transparent), transparent);opacity:.45;pointer-events:none;border-radius:50%;position:absolute;inset:30% -14% -55%}.space-key__skirt{background:linear-gradient(180deg, var(--surface-2), var(--surface-sunken) 75%);box-shadow:inset 0 0 0 1px var(--hairline-strong), inset 0 -1px 0 color-mix(in oklab, var(--accent-line) 55%, transparent), 0 26px 44px -20px color-mix(in oklab, var(--accent-line) 38%, transparent);border-radius:1.25rem;position:absolute;inset:.875rem 0 0}.space-key__cap{background:linear-gradient(180deg, color-mix(in oklab, var(--foreground) 7%, transparent), transparent 38%, transparent 72%, color-mix(in oklab, var(--foreground) 4%, transparent)), var(--surface-3);box-shadow:inset 0 1px 0 color-mix(in oklab, var(--foreground) 26%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent), 0 1px 0 var(--surface-sunken);border-radius:1.25rem;place-items:center;transition:transform .11s cubic-bezier(.3,.7,.4,1),background-color .14s ease-out;display:grid;position:absolute;inset:0 0 .875rem;overflow:hidden}.space-key__cap:after{content:"";background:linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--foreground) 9%, transparent) 50%, transparent 70%);position:absolute;inset:0;transform:translate(-110%)}.space-key__lit{background:var(--accent-line);opacity:0;transition:opacity .14s ease-out;position:absolute;inset:0}.space-key__label{font-family:var(--font-display,var(--font-heading));letter-spacing:.36em;text-transform:uppercase;color:color-mix(in oklab, var(--foreground) 82%, transparent);margin-right:-.36em;font-size:1.0625rem;font-weight:800;transition:color .14s ease-out;position:relative}.space-intro[data-live] .space-key__cap{animation:3.6s cubic-bezier(.3,.7,.4,1) .9s infinite space-key-hint}.space-intro[data-live] .space-key__cap:after{animation:3.6s ease-in-out .9s infinite space-key-sheen}.space-intro[data-live] .space-key__glow{animation:3.6s ease-in-out .9s infinite space-key-glow}.space-intro[data-pressed] .space-key__cap,.space-intro[data-phase=opening] .space-key__cap{animation:none;transform:translateY(.6875rem)}.space-intro[data-pressed] .space-key__glow,.space-intro[data-phase=opening] .space-key__glow{opacity:1;animation:none}.space-intro[data-phase=opening] .space-key__cap{transition-duration:.26s;transform:none}.space-intro[data-phase=opening] .space-key__lit{opacity:1}.space-intro[data-phase=opening] .space-key__label{color:var(--primary-foreground)}.space-intro[data-focus] .space-key__skirt{box-shadow:inset 0 0 0 1px var(--hairline-strong), 0 0 0 2px var(--background), 0 0 0 4px var(--accent-line)}.space-intro__seam{background:var(--accent-line);height:1px;box-shadow:0 0 22px 2px color-mix(in oklab, var(--accent-line) 75%, transparent);pointer-events:none;margin-top:-.5px;position:absolute;top:50%;left:0;right:0;transform:scaleX(0)}.space-intro__ring{border:1px solid var(--accent-line);width:16rem;height:16rem;box-shadow:0 0 30px color-mix(in oklab, var(--accent-line) 45%, transparent), inset 0 0 30px color-mix(in oklab, var(--accent-line) 25%, transparent);opacity:0;pointer-events:none;border-radius:50%;margin:-8rem 0 0 -8rem;position:absolute;top:50%;left:50%}@keyframes space-key-hint{0%,78%,to{transform:none}83%{transform:translateY(.375rem)}90%{transform:none}}@keyframes space-key-sheen{0%,45%{transform:translate(-110%)}75%,to{transform:translate(110%)}}@keyframes space-key-glow{0%,76%,to{opacity:.45}84%{opacity:.85}}@keyframes space-intro-timer{to{transform:scaleX(1)}}.space-intro.accent-amber[data-phase=opening] .space-key__label{color:var(--background)}
