/* p9 - two fine data streams into two large solid plates that fill with light. Black, chrome, white; blue only for what is lit. */
.p9-root{position:absolute;inset:0;overflow:hidden}
.p9-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;z-index:4;pointer-events:none}
.p9-root p{margin:0}
.p9-chr{background-image:var(--chrome-n);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* the focus stage: near-solid dark glass, never see-through to the render */
.p9-root .glass{background:rgba(8,10,14,.88);border:1px solid rgba(47,107,255,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.p9-src,.p9-plate,.p9-fl,.p9-front{position:absolute;box-sizing:border-box}
.p9-src{z-index:2;padding:14px 18px 13px;box-shadow:0 0 0 1px rgba(47,107,255,.4),0 0 22px rgba(47,107,255,.14),0 18px 50px rgba(0,0,0,.45)}
.p9-who{color:rgba(238,241,241,.9);font-size:13px;letter-spacing:.14em;line-height:1.35}
.p9-row{display:flex;align-items:center;gap:14px;margin-top:4px}
.p9-big{font-family:var(--display);font-weight:700;font-size:56px;line-height:1.02;letter-spacing:-.01em}
.p9-sub{font-size:14px;letter-spacing:.16em;color:#fff}
/* the two plates: a calm rising light level, a crisp level line, a fine counter bar, one sweep at the payoff */
.p9-plate{z-index:1;padding:0 0 28px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;transform-origin:50% 100%;will-change:transform}
.p9-fill{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(47,107,255,.34),rgba(47,107,255,.12) 75%,rgba(47,107,255,0))}
.p9-lvl{position:absolute;left:0;right:0;height:1px;bottom:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(90,140,255,0),rgba(200,220,255,.9) var(--gl,50%),rgba(90,140,255,.5) calc(var(--gl,50%) + 20%),rgba(90,140,255,0))}
.p9-bar{position:absolute;left:18px;right:18px;bottom:14px;height:3px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5%),rgba(255,255,255,.06)}
.p9-barf{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:repeating-linear-gradient(90deg,rgba(8,10,14,.9) 0 1px,transparent 1px 5%),linear-gradient(90deg,rgba(47,107,255,.7),rgba(170,200,255,1))}
.p9-sw{position:absolute;top:-20%;bottom:-20%;width:90px;margin-left:-45px;left:-200px;opacity:0;pointer-events:none;transform:skewX(-14deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(200,220,255,.07) 35%,rgba(240,246,255,.38) 50%,rgba(200,220,255,.07) 65%,rgba(255,255,255,0))}
.p9-pl{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.5vw,38px);line-height:1.08;letter-spacing:.01em;color:#fff;
  text-align:center;text-wrap:balance;padding:0 22px;text-shadow:0 0 18px rgba(90,140,255,.35),0 2px 10px #000}
/* the finish */
.p9-fl{z-index:5;text-align:center;font-size:14px;letter-spacing:.26em;color:#fff;text-shadow:0 0 14px rgba(0,0,0,.9),0 0 26px rgba(8,10,14,.95);display:flex;align-items:center;justify-content:center}
.p9-front{z-index:3;text-align:center;font-family:var(--tech);font-weight:700;font-size:18px;letter-spacing:.3em;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.25),0 2px 10px #000;
  display:flex;align-items:center;justify-content:center}
/* phone: smaller sources side by side, the plates side by side below, the finish lines under them */
.p9-root.ph .p9-src{padding:8px 10px 8px}
.p9-root.ph .p9-who{font-size:12px;letter-spacing:0;line-height:1.25}
.p9-root.ph .p9-row{gap:8px;margin-top:2px}
.p9-root.ph .p9-big{font-size:34px}
.p9-root.ph .p9-sub{font-size:12px;letter-spacing:.02em}
.p9-root.ph .p9-plate{padding-bottom:16px}
.p9-root.ph .p9-pl{font-size:clamp(22px,6.1vw,26px);padding:0 8px;letter-spacing:0}
.p9-root.ph .p9-bar{left:10px;right:10px;bottom:9px;height:2px}
.p9-root.ph .p9-sw{width:56px;margin-left:-28px}
.p9-root.ph .p9-fl{font-size:12px;letter-spacing:.16em}
.p9-root.ph .p9-front{font-size:13px;letter-spacing:.2em}
.p9-root.ph.tight .p9-src{padding:6px}
.p9-root.ph.tight .p9-who{font-size:10.5px;line-height:1.25;white-space:normal}
.p9-root.ph.tight .p9-row{gap:6px;flex-wrap:wrap}
.p9-root.ph.tight .p9-big,.p9-root.ph.tight .p9-sub{flex-shrink:0;white-space:nowrap}
.p9-root.ph.tight .p9-sub{font-size:10.5px}
.p9-root.ph.short .p9-src{padding:calc(4px * var(--p9-scale,1)) 6px}
.p9-root.ph.short .p9-who{font-size:calc(10.5px * var(--p9-scale,1))}
.p9-root.ph.short .p9-row{gap:4px;margin-top:calc(1px * var(--p9-scale,1))}
.p9-root.ph.short .p9-big{font-size:calc(24px * var(--p9-scale,1))}
.p9-root.ph.short .p9-sub{font-size:calc(10.5px * var(--p9-scale,1))}
.p9-root.ph.short .p9-plate{padding-bottom:calc(8px * var(--p9-scale,1))}
.p9-root.ph.short .p9-pl{font-size:calc(12px * var(--p9-scale,1));flex-shrink:0}
.p9-root.ph.short .p9-bar{bottom:calc(4px * var(--p9-scale,1));height:1px}
.p9-root.ph.short .p9-fl{font-size:calc(10.5px * var(--p9-scale,1));line-height:1.2;letter-spacing:.08em;white-space:nowrap}
.p9-root.ph.short .p9-front{font-size:calc(11px * var(--p9-scale,1));line-height:1.2;letter-spacing:.08em;white-space:nowrap}