/* Palette variables and the .vis frame of the Websites page visuals. Copied by extract_sources.py from page mockups/visuals/websites-visuals.html, lines 9 to 22. Edits: lines 9 to 12 (glow, frame, easing and font variables) are wrapped in :root{}; lines 14 to 22 are copied as they are. Do not edit by hand; rerun extract_sources.py. */
:root{
  --glow-blue:#2F6BFF;--glow-violet:#7A3CFF;--glow-magenta:#FF2E9A;--glow-orange:#FF6A2B;--glow-cyan:#2FE6FF;
  --frame-1:#111111;--frame-2:#0A0A0A;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.45,0,.25,1);
  --f-display:"Inter Tight",Inter,system-ui,sans-serif;--f-text:Inter,system-ui,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
.vis{position:relative;overflow:hidden;isolation:isolate;border-radius:16px;
  background:radial-gradient(120% 95% at 50% 42%,var(--frame-1) 0%,#0D0D0D 55%,var(--frame-2) 100%);
  border:1px solid var(--color-line-black);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 40px 80px -40px rgba(0,0,0,.9)}
.vis>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vis-wide{aspect-ratio:16/9;width:100%}
.vis-band{width:100%;height:clamp(160px,calc(130px + 7.62vw),240px);border-radius:0;border-left:0;border-right:0}
.vis-label{font:500 14px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-on-black-muted)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}