/* Pavilion Labs: a centered gateway. Lockup and updates at the top, the headline and products in the sky,
   the day landscape under them, and the team's past work along the foot. Same tokens, type and button as the next
   Wallet and Bridge sites. Content sits on the ground or the sky, never in a box. */

@font-face{font-family:Newsreader;src:url('../fonts/newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --ink:#1B2B41;--mineral:#8DB1C1;--paper:#F4F2EC;--ink-soft:#2E405A;--paper-soft:#E9EAE4;--line:#C9D1D4;--muted:#4A5A6E;
  --paper-72:rgb(244 242 236 / .72);
  --font-display:Newsreader,'Iowan Old Style',Georgia,serif;
  --font-body:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --press:120ms;--hover-in:140ms;--hover-out:200ms;
  --gutter:clamp(20px,4.5vw,64px);
  --wrap:1440px;
  /* One factor for wide screens, as on the product sites: 1 up to 2400px wide, then growing with the viewport. */
  --k:max(1,calc(100vw / 2182px));
  /* The headline answers to height as well as width, so the landscape always keeps its share of the screen. */
  --size-hero:clamp(36px,min(7.5vw,9vh),160px);
  --size-body:clamp(17px,16px + .28vw,20px);
}
@media (min-width:2400px){:root{--wrap:2720px;--gutter:clamp(64px,4.5vw,160px);--size-body:clamp(20px,.917vw,36px)}}
@supports not (width:calc(1px * (100vw / 1px))){:root{--k:1}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
html,body{min-height:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--size-body);line-height:1.5;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{margin:0;padding:0;border:0;background:none;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
::selection{background:var(--mineral);color:var(--ink)}
.skip-link{position:fixed;top:12px;left:12px;z-index:70;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--ink);color:var(--paper);font-weight:600;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Header, words, full-width landscape and alumni marks. Leave room for the complete lower scene. */
.page{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow:hidden}

/* Header. */
.masthead{position:relative;z-index:5;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(var(--wrap) + 2 * var(--gutter),100%);margin-inline:auto;padding:calc(16px * var(--k)) var(--gutter);padding-top:max(calc(16px * var(--k)),env(safe-area-inset-top))}
.brand{display:inline-flex;align-items:center;gap:calc(12px * var(--k));flex:none;min-height:44px}
.brand-mark{display:block;width:calc(40px * var(--k));height:calc(40px * var(--k));background:currentColor;-webkit-mask:url('../img/pavilion-mark-mono.svg') center / contain no-repeat;mask:url('../img/pavilion-mark-mono.svg') center / contain no-repeat}
@media (forced-colors:active){.brand-mark{forced-color-adjust:none;background:CanvasText}}
.brand-type{display:flex;flex-direction:column;gap:2px}
.brand-name{font-size:calc(24px * var(--k));line-height:1;font-weight:700;letter-spacing:-.04em}
.brand-product{font-size:calc(12px * var(--k));line-height:1.34;font-weight:500;letter-spacing:.08em}
.nav-links{position:relative;display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);font-size:calc(16px * var(--k));line-height:1.375;font-weight:500}
.nav-links>a,.signup-toggle{position:relative;display:flex;align-items:center;min-height:44px;font-weight:500;white-space:nowrap}
.nav-links>a::after,.signup-toggle::after{content:'';position:absolute;inset:auto 0 8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--hover-out) var(--ease-out)}
.signup-toggle[aria-expanded="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .nav-links>a:hover::after,.signup-toggle:hover::after{transform:scaleX(1);transition-duration:var(--hover-in)}
}
.label-short{display:none}

/* Updates: a small panel under its link. The form says honestly what happened to the address. */
.signup{display:flex}
.signup-panel{zoom:var(--k);position:absolute;top:calc(100% + 4px);right:0;z-index:10;width:min(400px,100vw - 2 * var(--gutter));padding:20px;border-radius:12px;background:var(--ink);color:var(--paper);box-shadow:0 18px 48px rgb(27 43 65 / .22);transform-origin:top right;animation:panel-in 200ms var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:scale(.97)}}
.signup-form label{display:block;font-size:16px;line-height:24px;font-weight:500;text-wrap:pretty}
.signup-row{display:flex;gap:8px;margin-top:14px}
.signup-row input{flex:1 1 0;min-width:0;min-height:56px;padding:12px 16px;border:0;border-radius:8px;background:var(--ink);box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5);color:var(--paper);caret-color:var(--paper);font-size:17px;line-height:24px;appearance:none;-webkit-appearance:none;transition:box-shadow var(--hover-out) var(--ease-out)}
.signup-row input::placeholder{color:var(--paper-72);opacity:1}
.signup-row input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--paper)}
.signup-row input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--mineral)}
.signup-row .button{flex:none;min-height:56px;padding-inline:20px;font-size:17px}
.signup-status{margin-top:10px;font-size:15px;line-height:22px;font-weight:500;color:var(--paper)}
.signup-status:empty{display:none}

/* Buttons: the product sites' one size. */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:calc(56px * var(--k));padding:12px calc(24px * var(--k));border-radius:8px;background:var(--paper);color:var(--ink);font-size:calc(17px * var(--k));line-height:1.42;font-weight:600;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform var(--press) var(--ease-out),background-color var(--hover-out) var(--ease-out)}
.button:active{transform:scale(.97)}
.button-ink{background:var(--ink);color:var(--paper)}
.button:disabled{opacity:.6;cursor:default}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:var(--paper-soft);transition-duration:var(--press),var(--hover-in)}
  .button-ink:hover{background:var(--ink-soft)}
}

/* The words, centred in the sky. */
.hero{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;align-items:center;width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto;padding-top:clamp(4px,2vh,40px);text-align:center}
.hero:focus{outline:none}
h1{font-family:var(--font-display);font-optical-sizing:auto;font-weight:400;font-size:var(--size-hero);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
h1 span{display:block;white-space:nowrap}
.lead{max-width:34em;margin-top:clamp(12px,2.2vh,28px);font-size:clamp(17px,min(1.55vw,2.5vh),calc(22px * var(--k)));line-height:1.45;color:var(--muted);text-wrap:balance}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16px * var(--k));width:min(100%,calc(1080px * min(var(--k),1.25)));margin-top:clamp(18px,3.2vh,40px);text-align:left}
.products li{display:flex}
/* Product cards: Ink on the day sky, so they carry clearly over the clouds. The open slot stays an outline. */
.card{flex:1;display:flex;flex-direction:column;gap:calc(8px * var(--k));min-height:calc(176px * var(--k));padding:calc(22px * var(--k)) calc(24px * var(--k)) calc(20px * var(--k));border-radius:12px;background:var(--ink);color:var(--paper);box-shadow:0 10px 28px rgb(27 43 65 / .16);transition:background-color var(--hover-out) var(--ease-out),transform var(--press) var(--ease-out)}
.card-name{font-family:var(--font-display);font-size:calc(32px * var(--k));line-height:1.05;letter-spacing:-.02em}
.card-text{font-size:calc(16px * var(--k));line-height:1.45;color:var(--paper-72);text-wrap:pretty}
.card-status{margin-top:auto;padding-top:calc(10px * var(--k));font-size:calc(14px * var(--k));line-height:1.4;font-weight:600}
.card-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;white-space:nowrap}
.card-go{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.card-more{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.card-more .card-text,.card-more .card-status{color:var(--muted)}
a.card:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){a.card:hover{background:var(--ink-soft);transition-duration:var(--hover-in)}}

/* The scene keeps its natural proportions. The source's quiet upper sky can sit behind the hero;
   desktop rules below bound the artwork by both the available width and landscape row height. */
.scene{position:relative;z-index:1;flex:1 0 auto;min-height:30vw;pointer-events:none}
.scene img{position:absolute;left:0;bottom:0;width:100%;max-width:100%;height:auto;image-rendering:auto}

/* The foot: where the team has worked. */
.team{position:relative;z-index:3;flex:none;background:var(--paper)}
.team::before{content:'';position:absolute;inset:auto 0 calc(100% - 1px);height:calc(56px * var(--k));background:url('../art/edge-paper.webp') repeat-x 0 100% / auto 100%;image-rendering:pixelated;pointer-events:none}
.team-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto;padding-block:clamp(24px,2.6vh,40px) calc(clamp(20px,2vh,32px) + 44px * var(--k))}
.team p{flex:none;font-size:calc(15px * var(--k));line-height:1.5;font-weight:500;color:var(--muted);white-space:nowrap}
.team-logos{min-width:0;max-width:1000px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px clamp(32px,3.2vw,64px);zoom:var(--logo-zoom,1)}
.team-logos li{display:flex;align-items:center;gap:6px;height:32px}
.team-logos img{height:24px;width:auto;filter:brightness(0) saturate(100%) invert(13%) sepia(15%) saturate(1731%) hue-rotate(174deg) brightness(94%) contrast(91%)}
.team-logos .opensea img{height:26px}
.team-logos .okx img{height:20px}
.team-logos .wormhole img{height:11px}
.team-logos .venus img{height:22px}
.team-logos .olympus img{height:24px}
.team-logos .aethir img{height:22px}
.team-logos span{font-size:19px;line-height:24px;font-weight:600;letter-spacing:-.04em}
@media (min-width:1101px) and (max-width:1560px){.team-logos{--logo-zoom:.9}}
@media (min-width:2400px){.team-logos{--logo-zoom:1.2}}
@media (min-width:3200px){.team-logos{--logo-zoom:1.6}}

/* Narrower: the label sits above the marks, and the marks wrap, centred. */
@media (max-width:1100px){
  .products{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
  .card{min-height:0}
  .team-inner{gap:20px}
  .team-logos{flex:none;flex-wrap:wrap;justify-content:center;max-width:720px}
}
@media (max-width:700px){
  .masthead{padding-block:max(10px,env(safe-area-inset-top)) 10px}
  .brand{gap:10px}
  .brand-mark{width:34px;height:34px}
  .brand-name{font-size:20px}
  .nav-links{font-size:15px}
  .signup-panel{padding:16px}
  .lead{max-width:22em}
  .card{min-height:0;padding:16px 16px 14px}
  .card-name{font-size:23px}
  .card-text{font-size:14.5px}
  .team-logos{--logo-zoom:.8;gap:20px 36px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
  .products li:last-child{grid-column:1/-1;width:calc((100% - 16px * var(--k)) / 2);justify-self:center}

}
@media (max-width:420px){
  .label-long{display:none}
  .label-short{display:inline}
  .button{font-size:16px}
  .signup-row .button{padding-inline:16px}
}
/* Desktop is one viewport. The final grid row always reserves room for every alumni mark.
   Height can shrink the panorama to fit, but can never zoom it beyond the available width. */
@media (min-width:761px){
  .page{
    --k:.85;
    --size-hero:clamp(32px,min(5.8vw,6.2dvh),128px);
    --logo-scale:clamp(.9,var(--k),1.4);
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    height:100vh;
    height:100dvh;
    min-height:0;
  }
  .page .masthead{padding-block:clamp(8px,1dvh,20px)}
  .page .brand{gap:calc(10px * var(--k))}
  .page .brand-mark{width:calc(36px * var(--k));height:calc(36px * var(--k))}
  .page .brand-name{font-size:calc(22px * var(--k))}
  .page .nav-links{font-size:max(13px,calc(16px * var(--k)));gap:clamp(16px,2vw,36px)}
  .page .hero{padding-top:clamp(4px,.8dvh,16px)}
  .page .lead{max-width:42em;margin-top:clamp(8px,1.2dvh,16px);font-size:clamp(14px,calc(18px * var(--k)),26px);line-height:1.4}
  .page .products{width:min(100%,calc(1080px * var(--k)));gap:calc(12px * var(--k));margin-top:clamp(12px,1.6dvh,24px)}
  .page .card{min-height:0;padding:clamp(12px,1.2dvh,24px) calc(20px * var(--k));gap:calc(6px * var(--k))}
  .page .card-name{font-size:clamp(22px,calc(30px * var(--k)),45px)}
  .page .card-text{font-size:clamp(13px,calc(15px * var(--k)),22px);line-height:1.4}
  .page .card-status{padding-top:4px;font-size:max(12px,calc(13px * var(--k)))}
  .page .scene{min-height:0;container-type:size;container-name:landscape}
  .page .scene img{left:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
  .page .team-inner{width:min(var(--wrap),100% - 2 * var(--gutter));gap:clamp(10px,1.1dvh,18px);padding-block:clamp(12px,1.2dvh,24px) clamp(16px,1.5dvh,30px)}
  .page .team p{font-size:clamp(13px,calc(15px * var(--k)),22px)}
  .page .team-logos{zoom:1;width:100%;max-width:1800px;gap:calc(12px * var(--logo-scale)) calc(32px * var(--logo-scale))}
  .page .team-logos li{flex:none;height:calc(32px * var(--logo-scale));justify-content:center}
  .page .team-logos img{height:calc(24px * var(--logo-scale))}
  .page .team-logos .opensea img{height:calc(26px * var(--logo-scale))}
  .page .team-logos .okx img{height:calc(20px * var(--logo-scale))}
  .page .team-logos .wormhole img{height:calc(11px * var(--logo-scale))}
  .page .team-logos .venus img,.page .team-logos .aethir img{height:calc(22px * var(--logo-scale))}
  .page .team-logos span{font-size:calc(19px * var(--logo-scale));line-height:calc(24px * var(--logo-scale))}
}
@supports (width:calc(1px * (100vw / 1px))){
  @media (min-width:761px){
    .page{--k:clamp(.8,min(calc(100vw / 1920px),calc(100dvh / 1080px)),1.5)}
  }
}
@supports (width:1cqh){
  @media (min-width:761px){
    .page .scene img{left:50%;width:min(100cqw,312.5cqh);height:auto;transform:translateX(-50%)}
  }
}
@container landscape (min-aspect-ratio:25/8){
  .scene img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
}
@media (min-width:761px) and (max-height:700px){
  .page .lead{font-size:14px;max-width:44em}
  .page .card{padding:10px 14px}
  .page .card-name{font-size:22px}
  .page .team-inner{gap:8px;padding-block:10px 14px}
  .page .team-logos{--logo-scale:.9}
}
@media (min-width:761px) and (max-height:600px){
  .page .card-text{display:none}
  .page .card{padding:10px 14px}
  .page .products{margin-top:10px}
  .page .hero{padding-top:4px}
  .page .team-logos{row-gap:8px}
}
@media (min-width:761px) and (max-height:420px){
  .page{--size-hero:clamp(24px,7dvh,30px)}
  .page .masthead{padding-block:4px}
  .page .lead{display:none}
  .page .card-status{display:none}
  .page .card{min-height:40px;justify-content:center;padding:8px 12px}
  .page .card-name{font-size:20px}
  .page .team-inner{gap:6px;padding-block:8px}
  .page .team-logos{--logo-scale:.8;gap:6px 20px}
}
@media (min-width:761px) and (max-height:320px){
  .page{--size-hero:20px}
  .page .masthead{padding-block:2px}
  .page .hero{padding-top:0}
  .page .products{margin-top:6px}
  .page .card{min-height:32px;padding:6px 10px}
  .page .card-name{font-size:16px}
  .page .team-inner{gap:4px;padding-block:4px}
  .page .team p{font-size:12px;line-height:16px}
  .page .team-logos{--logo-scale:.7;gap:4px 12px}
}
@media (min-width:761px){
  .page .team-inner{padding-bottom:calc(clamp(8px,3dvh,56px) + 8px)}
  .page + .about::before{height:clamp(8px,3dvh,56px)}
}

/* About: the night ground under the first screen. Mission, the case for Pearl in four plain statements, and the foot. */
.about{position:relative;background:var(--ink);color:var(--paper)}
.about::before{content:'';position:absolute;inset:auto 0 calc(100% - 1px);z-index:4;height:calc(40px * var(--k));background:url('../art/edge-ink.webp') repeat-x 0 100% / auto 100%;image-rendering:pixelated;pointer-events:none}
.about-inner{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto;padding-block:clamp(72px,9vw,calc(144px * var(--k))) clamp(28px,3vw,calc(40px * var(--k)))}
.about h2{font-family:var(--font-display);font-optical-sizing:auto;font-weight:400;font-size:clamp(40px,5.4vw,calc(86px * var(--k)));line-height:.98;letter-spacing:-.025em}
.mission{max-width:26em;margin-top:clamp(20px,2.4vw,calc(36px * var(--k)));font-family:var(--font-display);font-size:clamp(24px,2.5vw,calc(38px * var(--k)));line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.team-background{max-width:52em;margin-top:clamp(20px,2.4vw,calc(32px * var(--k)));color:var(--paper-72);line-height:1.6;text-wrap:pretty}
.about-rows{margin-top:clamp(40px,5vw,calc(80px * var(--k)));border-top:1px solid rgb(244 242 236 / .22)}
.about-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px clamp(32px,6vw,120px);padding-block:clamp(28px,3vw,calc(44px * var(--k)));border-bottom:1px solid rgb(244 242 236 / .22)}
.about-row h3{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,2.3vw,calc(34px * var(--k)));line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.about-row p{max-width:36em;color:var(--paper-72);line-height:1.6;text-wrap:pretty}
.about-note{max-width:52em;margin-top:clamp(20px,2vw,32px);font-size:calc(14px * var(--k));line-height:1.5;color:var(--paper-72)}
.about-note a{text-decoration:underline;text-underline-offset:3px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;margin-top:clamp(56px,7vw,calc(112px * var(--k)));font-size:calc(15px * var(--k));line-height:1.4;color:var(--paper-72)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2vw,28px)}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--paper)}
@media (hover:hover) and (pointer:fine){.foot a:hover{text-decoration:underline;text-underline-offset:4px}}
.about :focus-visible{outline-color:var(--paper)}
/* Charts: one series each, Mineral on Ink, thin marks, quiet grid. Dots carry the values on hover or focus. */
.charts{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(32px,6vw,120px);margin-top:clamp(20px,2.4vw,36px)}
.chart{margin:0;min-width:0}
.chart figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:calc(22px * var(--k))}
.chart figcaption strong{font-size:calc(17px * var(--k));line-height:1.4;font-weight:600}
.chart figcaption span{font-size:calc(14px * var(--k));line-height:1.4;color:var(--paper-72)}
.about-row .power-share{display:flex;align-items:center;gap:calc(20px * var(--k));margin-top:calc(24px * var(--k))}
.power-share strong{flex:none;font-family:var(--font-display);font-size:calc(56px * var(--k));line-height:1;font-weight:400;color:var(--paper)}
.power-share span{font-size:calc(14px * var(--k));line-height:1.5}
.about-row .chart-note{margin-top:calc(20px * var(--k));font-size:calc(13px * var(--k));line-height:1.5}
.line-chart{position:relative;padding:8px calc(36px * var(--k)) calc(30px * var(--k)) calc(38px * var(--k));font-size:calc(13px * var(--k));line-height:1;color:var(--paper-72);font-variant-numeric:tabular-nums}
.plot{position:relative;height:clamp(180px,17vw,calc(250px * var(--k)))}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot .grid line{stroke:rgb(244 242 236 / .14);stroke-width:1;vector-effect:non-scaling-stroke}
.plot .grid .base{stroke:rgb(244 242 236 / .4)}
.plot .area{fill:rgb(141 177 193 / .16)}
.plot .series{fill:none;stroke:var(--mineral);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dots{position:absolute;inset:0}
.dots li{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;cursor:default}
.dots li::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--mineral);box-shadow:0 0 0 2px var(--ink)}
.dots li span{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:6px;background:var(--paper);color:var(--ink);font-size:13px;line-height:1.3;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--hover-in) var(--ease-out)}
.dots li:nth-last-child(-n+2) span{left:auto;right:-8px;transform:none}
.dots li:first-child span{left:-8px;transform:none}
.dots li:hover span,.dots li:focus-visible span{opacity:1}
.dots li:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
.end-label,.start-label{position:absolute;transform:translate(12px,-50%);font-weight:600;color:var(--paper)}
.start-label{transform:translate(-100%,-50%) translateX(-12px)}
.y-axis{position:absolute;left:0;top:8px;width:calc(26px * var(--k));height:clamp(180px,17vw,calc(250px * var(--k)))}
.y-axis span{position:absolute;right:0;transform:translateY(-50%)}
.y-axis span:last-child{display:none}
.x-axis{position:relative;height:0}
.x-axis span{position:absolute;top:calc(12px * var(--k));transform:translateX(-50%)}
.bar-chart{display:grid;gap:calc(18px * var(--k));margin:0;padding-top:8px}
.bar-chart dt{font-size:calc(15px * var(--k));line-height:1.4;color:var(--paper-72)}
.bar-chart dd{display:flex;align-items:center;gap:10px;margin:6px 0 0}
.bar-chart i{display:block;flex:none;width:calc((100% - 96px) * var(--v));min-width:1px;height:calc(14px * var(--k));border-radius:0 4px 4px 0;background:var(--mineral)}
.bar-chart b{font-size:calc(15px * var(--k));line-height:1;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar-chart .is-pearl dt{color:var(--paper)}
.bar-chart .is-pearl i{background:var(--paper)}
@media (max-width:760px){
  .about-row{grid-template-columns:minmax(0,1fr)}
  .charts{grid-template-columns:minmax(0,1fr)}
  .plot,.y-axis{height:200px}
}

@media (prefers-reduced-motion:reduce){
  .signup-panel{animation:none}
  .button:active{transform:none}
}