@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-vietnamese.woff2?v=864c709d407b) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-latin-ext.woff2?v=f8ec026d88a2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500-latin.woff2?v=31ff5e6e96a0) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-vietnamese.woff2?v=50c25f3210bc) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin-ext.woff2?v=a2f92ada1d0e) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600-latin.woff2?v=5bc49d41f328) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-vietnamese.woff2?v=960aaed3bedc) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin-ext.woff2?v=0c1655655b5a) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700-latin.woff2?v=e3e520cb7468) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/cabin-italic-vietnamese.woff2?v=4eda80f7183b) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/cabin-italic-latin-ext.woff2?v=ba63c18af413) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cabin'; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/cabin-italic-latin.woff2?v=d792ce3d8557) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/cabin-vietnamese.woff2?v=a4d251c1b3e4) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/cabin-latin-ext.woff2?v=6437941c7965) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/cabin-latin.woff2?v=3912b808ba0a) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-cyrillic-ext.woff2?v=9343de2ca5d9) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-cyrillic.woff2?v=4995a9a43ac6) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-greek.woff2?v=49c3da6c9a2b) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-vietnamese.woff2?v=d44eb1936043) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-latin-ext.woff2?v=9c38cb2d0d2d) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2?v=2c32b9b3ee35) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-cyrillic-ext.woff2?v=9343de2ca5d9) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-cyrillic.woff2?v=4995a9a43ac6) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-greek.woff2?v=49c3da6c9a2b) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-vietnamese.woff2?v=d44eb1936043) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-latin-ext.woff2?v=9c38cb2d0d2d) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2?v=2c32b9b3ee35) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{--bg:#F4F6F8;--bg2:#EAEEF2;--card:#FFFFFF;--card2:#EEF1F5;--line:#DCE1E7;--line2:#748491;--ink:#0F1A2B;--ink2:#2E3947;--ink3:#62717E;--navy:#001F5B;--navy2:#0B3477;--navy3:#E6ECF5;--teal:#0091B3;--link:#007996;--orange:#CE5E16;--amber:#B95000;--red:#B4221C;--green:#1E7A4D;--slate:#748491;--radius:4px;
/* The palette (brand/README.md): teal is primary; orange and navy secondary; red the highlight, for what is live, sparingly; grey the neutral.
   --link, --amber and --ink3 are the teal, the orange and the grey darkened to 4.5:1 for small text on the light grounds; the brand hexes
   themselves are for large type, rules and graphics. On navy, text and outlines take the lifted shades: --hi-teal, --hi-orange, --hi-red
   (graphics only, 3.4:1; --hi-redt for text).
   The grey itself (--slate, and --line2, which is it) draws what is not text but must still be seen: the edges of fields and quiet
   buttons, the chevrons, the waiting dot, the neutral step of a diagram. It clears 3:1 on white, as a control's edge must; --line,
   much paler, is only for the hairlines between things. */
--hi-teal:#39AED0;--hi-orange:#EF7C3C;--hi-red:#D24337;--hi-redt:#ED5B4E;
/* The gradients run as the mark does. Deep: navy into teal, for dark bands; -t stops at the teal's text shade, under small white text
   (white there is 5:1 at the teal end, so quieter white on it is never below .94 opacity, which keeps 4.6:1).
   Warm: orange into red, for what is live. The mark's: all four, for hairlines and underlines, never under text. */
--g-deep:linear-gradient(135deg,#001F5B 0%,#0091B3 100%);--g-deep-t:linear-gradient(135deg,#001F5B 0%,#007996 100%);
--g-warm:linear-gradient(135deg,#CE5E16 0%,#B4221C 100%);--g-mark:linear-gradient(90deg,#001F5B 0%,#0091B3 38%,#CE5E16 72%,#B4221C 100%);
--stripe:var(--g-mark);
--font:'Komet','Cabin',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--sans:var(--font);--display:'Barlow Condensed','Arial Narrow',sans-serif;--label:'Barlow Condensed','Arial Narrow',sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
/* A jump to an anchor stops below the menu bar. app.js marks the page .folds when it folds the bar (header.compact,
   below), and the bar is folded by the time the jump lands, so the gap is the folded bar's height and a little. */
html.folds{scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
/* The menu bar: the lockup, the links, and the one button (Choose a plan; Sign out). Its contents line up with the page's
   1080 px column, as the footer's do. At the top of a page the lockup is the supplied picture at 88 px, LIVE's orange contour
   and all; once the page moves, app.js folds the bar (.compact) and the lockup draws at 48 px without the contour.
   The contour only reads from 168 device pixels tall (brand/README.md, Size): 88 CSS px reach that from 1.91 dppx, so the
   full drawing is the <picture>'s from there, and on a screen below that both drawings are the -small one. The -small
   drawing lies under the full one and the full one fades out as the bar folds; the two are the same but for the contour.
   Folding takes 40 px off the bar, and the same 40 px go on below it as margin: the page under it does not move, so a fold
   can never scroll the page back past the point that folded it. */
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:10px max(32px,calc(50% - 508px));border-bottom:1px solid var(--line);background:var(--stripe) top/100% 3px no-repeat,rgba(255,255,255,.96);backdrop-filter:blur(10px);transition:margin-bottom .2s ease}
header.compact{margin-bottom:40px}
.brand{display:grid;flex:0 0 auto;line-height:0}.brand:hover{text-decoration:none}
.brand img{grid-area:1/1;display:block;height:88px;width:auto;transition:height .2s ease,opacity .2s ease}.brand picture{display:contents}
header.compact .brand img{height:48px}header.compact .brand .lk-full{opacity:0}
.brand:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
/* The links keep to one line, and scroll sideways before they would wrap and change the bar's height (an admin's, on a narrow
   screen). The padding keeps a focused link's ring inside what the scrolling clips. */
nav{margin-left:auto;min-width:0;display:flex;align-items:center;gap:20px;padding:4px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--ink2)}nav a.on,nav a:hover{color:var(--navy);text-decoration:none}nav a.on{box-shadow:0 2px 0 var(--teal)}
header .cta{flex:0 0 auto}header .cta form{display:inline}
.who{text-transform:none;letter-spacing:0;font-weight:400;padding:4px 10px;border:1px solid var(--line);border-radius:99px;color:var(--ink3);font-size:12px;max-width:220px;min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans)}
main{width:100%;max-width:1080px;margin:0 auto;padding:36px 32px 70px;flex:1}
h1{font-family:var(--display);font-size:42px;line-height:1.02;letter-spacing:.005em;margin:0 0 10px;font-weight:700;text-transform:uppercase;color:var(--navy)}
h2{font-family:var(--display);font-size:30px;line-height:1.05;letter-spacing:.005em;color:var(--navy);margin:38px 0 14px;font-weight:700;text-transform:uppercase}
h3{font-family:var(--font);font-size:18px;margin:0 0 6px;font-weight:700;color:var(--ink)}
/* Headings break into lines of even length rather than leave one word on the last; paragraphs avoid a last line of one word. */
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}.nw{white-space:nowrap}
.eyebrow{font-family:var(--label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);font-weight:700;margin:0 0 12px}
.lede{color:var(--ink2);margin:0 0 22px;max-width:640px;font-size:17px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:14px}
.card.hero{padding:30px 32px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.grow{flex:1;min-width:0}.right{margin-left:auto}
.stack{display:flex;flex-direction:column;gap:10px}
input,select,textarea{background:var(--card);border:1px solid var(--line2);color:var(--ink);border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--link);box-shadow:0 0 0 3px rgba(0,145,179,.25)}
label.f{display:flex;flex-direction:column;gap:6px;font-family:var(--label);font-size:13px;color:var(--ink3);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
label.f input,label.f select{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--font)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--card);border:1px solid var(--navy);color:var(--navy);border-radius:var(--radius);padding:10px 18px;font:inherit;font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s;line-height:1.2}
button:hover,.btn:hover{background:var(--navy3);text-decoration:none}button:active,.btn:active{transform:translateY(1px)}
/* The primary button runs navy into the teal's text shade, so its white label stays above 5:1 end to end. */
button.hot,.btn.hot{background:var(--g-deep-t) border-box;color:#fff;border-color:transparent}button.hot:hover,.btn.hot:hover{background:linear-gradient(135deg,#00184A 0%,#00657E 100%) border-box;border-color:transparent}
button.danger,.btn.danger{border-color:rgba(180,34,28,.45);color:var(--red);background:transparent}button.danger:hover{background:rgba(180,34,28,.06)}
button.ghost,.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink2)}button.ghost:hover{border-color:var(--ink3)}
button:disabled,.btn.off{opacity:.45;cursor:not-allowed;pointer-events:none}
button.sm,.btn.sm{padding:6px 11px;font-size:14px}
.muted{color:var(--ink3);font-size:14px}.mono{font-family:var(--mono);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-family:var(--label);font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;border:1px solid transparent}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.healthy{background:rgba(30,122,77,.1);color:var(--green)}.pill.healthy i{animation:pulse 1.8s infinite}
.pill.unhealthy,.pill.stopped,.pill.absent{background:rgba(180,34,28,.08);color:var(--red)}
.pill.unknown,.pill.starting{background:var(--card2);color:var(--ink2)}.pill.live{background:rgba(180,34,28,.1);color:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
table{width:100%;border-collapse:collapse;font-size:15px}td,th{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-family:var(--label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:700}tr:last-child td{border-bottom:0}
.flash{padding:12px 14px;border-radius:var(--radius);margin:0 0 16px;font-size:15px;border:1px solid}
.flash.err{background:rgba(180,34,28,.06);border-color:rgba(180,34,28,.3);color:var(--red)}.flash.ok{background:rgba(30,122,77,.07);border-color:rgba(30,122,77,.3);color:var(--green)}
.notice{padding:10px max(32px,calc(50% - 508px));font-size:15px;line-height:1.5;border-bottom:1px solid rgba(0,31,91,.15);background:var(--navy3);color:var(--navy);overflow-wrap:anywhere}
.notice.warn{background:#FDF5EF;border-color:rgba(206,94,22,.35);color:var(--amber)}
@media (max-width:640px){.notice{padding:10px 16px}}
code.k{background:var(--bg);border:1px solid var(--line);padding:5px 12px;border-radius:var(--radius);font-size:16px;letter-spacing:.16em;font-family:var(--mono)}
.addr{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;font-family:var(--mono);font-size:13px;overflow:hidden}
.addr span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr b{font-family:var(--label);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:700;min-width:120px}
.copy{background:var(--card);border:1px solid var(--line2);color:var(--ink2);border-radius:var(--radius);padding:4px 9px;font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}.copy.done{color:var(--green);border-color:rgba(30,122,77,.5)}
pre{background:var(--bg);border:1px solid var(--line);padding:12px 14px;border-radius:var(--radius);overflow:auto;font-size:12px;max-height:420px;line-height:1.5;font-family:var(--mono)}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-width:120px}
.stat b{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:0;color:var(--navy)}.stat span{font-family:var(--label);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.ev{font-family:var(--mono);font-size:12px;padding:5px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px 52px 130px 1fr;gap:10px;color:var(--ink2)}
.ev.warn{color:var(--amber)}.ev.error{color:var(--red)}.ev:last-child{border-bottom:0}
.check{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.check:last-child{border-bottom:0}
.check i{flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--ink3)}
.check.ok i{background:var(--green)}.check.warn i{background:var(--amber)}.check.fail i{background:var(--red)}
.check b{display:block;font-family:var(--label);font-size:14px;letter-spacing:.06em;text-transform:uppercase}.check .fix{color:var(--amber);font-size:14px;margin-top:4px}
.empty{padding:34px;text-align:center;color:var(--ink3);border:1px dashed var(--line2);border-radius:var(--radius)}
.plan{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 28px;border-radius:10px;background:var(--g-mark) top/100% 3px no-repeat,var(--card)}.plan.popular{background:var(--g-deep-t);color:#fff;border-color:transparent;box-shadow:0 18px 40px -22px rgba(0,31,91,.5)}
.plan.popular .muted,.plan.popular .feat{color:rgba(255,255,255,.94)}.plan.popular .pill{background:rgba(255,255,255,.14);color:#fff}
.plan .kicker{font-family:var(--label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--amber)}.plan.popular .kicker{color:#fff}
.plan .price b{font-family:var(--display);font-size:48px;font-weight:700;letter-spacing:0}.plan .price .muted{font-size:14px}
.plan .feat{margin:4px 0 12px;padding:0 0 0 2px;list-style:none;color:var(--ink2);line-height:1.8;flex:1;border-top:1px solid var(--line);padding-top:12px}.plan.popular .feat{border-color:rgba(255,255,255,.2)}
.plan .feat li{padding-left:20px;text-indent:-20px}.plan .feat li::before{content:'\2713';display:inline-block;width:20px;text-indent:0;color:var(--green);font-weight:700}.plan.popular .feat li::before{color:#fff}
.plan .btn,.plan button{width:100%}.plan.popular .btn,.plan.popular button{background:#fff;color:var(--navy);border-color:#fff}
/* The human check sits above the plan's button with room between; on the navy card it is drawn dark (turnstileWidget). */
.plan .cf-turnstile{min-height:65px;margin:0 0 14px}
/* Paying by the year: a line under the price, and a quieter second button under the first. */
.plan .yearly{margin-top:-4px}.plan .yearly .save{font-weight:700;color:var(--green)}.plan.popular .yearly .save{color:#fff}
.plan form button+button{margin-top:10px}
.plan.popular button.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.plan.popular button.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.plans-note{margin-top:26px}
.howto h2{font-size:22px}.steps{padding-left:20px;line-height:1.7}.steps li{margin:4px 0}.toc a{font-size:14px}
/* The manual's card is as wide as the page; its lines are not, past about 68 characters a line is hard to follow back. */
.howto p,.howto ol,.howto ul{max-width:68ch}
/* A page's first card - sign-in, the how-to, a desk - opens with the mark's gradient as a hairline, as the menu bar does. */
.card.hero{background:var(--g-mark) top/100% 3px no-repeat,var(--card)}
/* Each part of the manual is marked by a hexagon in the deep gradient, the brand's shape. */
.card.howto{border-radius:8px}.howto h2::before{content:'';display:inline-block;width:15px;height:17px;margin-right:10px;vertical-align:-1px;background:var(--g-deep);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.card.howto-hero{background:var(--g-mark) top/100% 3px no-repeat,var(--g-deep-t);color:#fff;border:0;border-radius:10px;padding:34px 34px 28px}.howto-hero h1{color:#fff}.howto-hero .lede{color:rgba(255,255,255,.94)}
.howto-hero .toc{gap:8px}.howto-hero .toc a{color:#fff;border:1px solid rgba(255,255,255,.32);border-radius:99px;padding:4px 12px}.howto-hero .toc a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.wizard .wiz-step{padding:18px 0}.wizard .wiz-step.active .wiz-body>b{font-size:19px}.wizard .wiz-step.active .muted{font-size:15px;line-height:1.55}.wizard .wiz-num{width:34px;height:34px;font-size:15px}
.wiz-head{margin-bottom:16px}
.wiz-bar{height:6px;background:var(--card2);border-radius:99px;overflow:hidden}
.wiz-bar i{display:block;height:100%;background:var(--teal);border-radius:99px;transition:width .4s}
.wiz-count{margin-top:8px;font-family:var(--label);font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink3)}
.wiz{display:flex;flex-direction:column;gap:8px}
.wiz-step{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.wiz-step.active{border-color:var(--navy);background:var(--navy3);box-shadow:0 0 0 1px var(--navy) inset}
.wiz-step.done{opacity:.75;padding:9px 14px}
.wiz-step.todo{opacity:.6}
.wiz-num{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:13px;background:var(--card2);color:var(--ink2);border:1px solid var(--line2)}
.wiz-step.active .wiz-num{background:var(--navy);color:#fff;border-color:var(--navy)}
.wiz-num.ok{background:rgba(30,122,77,.12);color:var(--green);border-color:transparent}
.wiz-body{flex:1;min-width:0}
.wiz-body b{font-size:16px}
.wiz-step.done .wiz-body b,.wiz-step.todo .wiz-body b{font-size:14.5px;font-weight:700}
.wiz-opt{font-family:var(--label);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--line2);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle;font-weight:700}
.wiz .fix{color:var(--amber);font-size:14px;margin-top:6px}
.btn.twitch,button.twitch{background:#9146FF;border-color:#9146FF;color:#fff}.btn.twitch:hover,button.twitch:hover{background:#772CE8;border-color:#772CE8}
.btn.youtube,button.youtube{background:#FF0033;border-color:#FF0033;color:#fff}.btn.youtube:hover,button.youtube:hover{background:#CC0029;border-color:#CC0029}
.btn.x,button.x{background:#000;border-color:#000;color:#fff}.btn.x:hover,button.x:hover{background:#272C30;border-color:#272C30}
.xid{display:inline-flex;align-items:center;gap:10px}.xid img{width:40px;height:40px;border-radius:50%;background:var(--card2)}.xid .xlogo{vertical-align:-2px}
.xbudget{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
/* ── the documents ── */
main.doc{max-width:820px}.legal h1{font-size:42px;margin-bottom:22px}.legal h2{font-size:25px;margin:32px 0 8px}.legal h3{font-size:16px;margin:22px 0 4px}.legal p,.legal li{font-size:16px;line-height:1.7}.legal ul{padding-left:22px}.legal li{margin:6px 0}
.legal .summary{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);padding:14px 18px;margin:18px 0}.legal .summary ul{margin:6px 0 0}
.legal .toc{background:var(--card);border:1px solid var(--line);padding:14px 18px;margin:0 0 10px}.legal .toc ol{margin:6px 0 0;padding-left:22px;columns:2;column-gap:28px}.legal .toc li{margin:3px 0;font-size:15px;break-inside:avoid}
.legal .tbl{overflow-x:auto;margin:10px 0 14px}.legal table{background:var(--card);border:1px solid var(--line);font-size:14px}.legal td,.legal th{padding:9px 10px;vertical-align:top;line-height:1.55}.legal td:first-child{font-weight:700;min-width:150px}
/* On a phone four columns are four slivers: each row stands as a block, each cell under its column's name (data-th, legal.js). */
@media (max-width:640px){.legal .tbl table,.legal .tbl tbody,.legal .tbl tr,.legal .tbl td{display:block;width:auto}.legal .tbl thead{display:none}.legal .tbl tr{border-top:1px solid var(--line);padding:6px 0}.legal .tbl tr:first-child{border-top:0}.legal .tbl td{padding:3px 12px;border:0}.legal .tbl td:first-child{min-width:0}.legal .tbl td[data-th]::before{content:attr(data-th);display:block;font:700 13px/1.4 var(--label);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}}
.legal .mono,.land .mono{overflow-wrap:anywhere}
/* A link written out as its address (the Google Account's permissions page) breaks rather than push a phone's page sideways. */
.legal a{overflow-wrap:break-word}
/* ── the home page: full-width bands, light and navy in turn, each with its content in .wrap ── */
main.land{max-width:none;padding:0}
.land .wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 32px}
/* Clipped, not hidden: overflow:hidden would make each section a scroll container, and a jump to one would then land
   under the menu bar (html's scroll-padding is what keeps it clear). clip cuts the honeycombs at the band's edge all the same. */
.land>section{position:relative;padding:76px 0;overflow:hidden;overflow:clip}
.land h2{font-size:40px;line-height:1.02;margin:0 0 14px}
.land h2::after{content:'';display:block;width:64px;height:3px;margin-top:14px;background:var(--g-mark);border-radius:2px}
.land h2 .k{color:var(--amber)}
/* A heading's tail as the marketer cased it ("FOUR STEPS: From Chat to Stage"): only its prefix is in capitals. */
.land h2 .as-set{text-transform:none;white-space:nowrap}
.land .sec-head{margin:0 0 34px;max-width:720px}.land .sec-head h2{margin:0 0 14px}.land .sec-head p{margin:0;color:var(--ink2);font-size:17px}
/* Honeycomb corners, as the link preview has them: outline only, and never under text. They stand in the margins beside
   the 1080 px column (whose text ends 508 px either side of the middle), so they show only where those margins are wide
   enough to hold a useful part of one; below 1200 px they are gone. */
.deco{position:absolute;z-index:0;pointer-events:none;fill:none;stroke-width:2}
.deco.tr{top:-30px;left:calc(50% + 516px);width:300px}.deco.bl{bottom:-50px;right:calc(50% + 516px);width:260px}
@media (max-width:1199px){.deco{display:none}}
/* Text in a gradient, as the logo sets LOBBY and LIVE: the category in navy into teal, the promise in orange into red. Large type only. */
.hero-l h1{color:var(--navy)}.hero-l h2.hero-sub{color:var(--red)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero-l h1{background:var(--g-deep);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-l h2.hero-sub{background:var(--g-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}
/* Forced colours (Windows High Contrast) drop the gradient but not the transparent fill: hand the text back its colour. */
@media (forced-colors:active){.hero-l h1,.hero-l h2.hero-sub{background:none;-webkit-text-fill-color:currentColor}}
.land>.hero-l{padding:60px 0 0;background:radial-gradient(900px 460px at 88% 8%,rgba(0,145,179,.12),transparent 62%),radial-gradient(700px 420px at 0% 100%,rgba(206,94,22,.08),transparent 60%),linear-gradient(180deg,#FFFFFF 0%,#F4F6F8 100%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero-l h1{font-size:64px;line-height:.95;letter-spacing:0;margin:0 0 18px}
.hero-l h2.hero-sub{font-size:31px;line-height:1.08;margin:0 0 22px}.hero-l h2.hero-sub::after{display:none}
.hero-l .lede{font-size:18px;line-height:1.6;margin:0 0 12px;max-width:600px}.hero-l .lede b{color:var(--ink)}
.hero-links{margin:0 0 26px;font-size:15px;font-weight:600}
.hero-l .row{gap:10px}
.hero-l .fine{margin-top:14px;font-size:13px;color:var(--ink2)}
.hero-art{position:relative;z-index:1}
.mock{background:var(--card);border:1px solid var(--line);padding:12px;border-radius:10px;box-shadow:0 30px 60px -24px rgba(0,31,91,.32)}
.mock .screen{background:#00133A;aspect-ratio:16/9;position:relative;padding:8px 8px 30px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;border-radius:4px;overflow:hidden}
.mock .screen i{display:block;background:linear-gradient(160deg,#0B2D66,#06204F);position:relative;overflow:hidden}
.mock .screen i::before{content:'';position:absolute;left:50%;top:38%;width:22%;aspect-ratio:1;border-radius:50%;background:#2C5390;transform:translate(-50%,-50%)}
.mock .screen i::after{content:'';position:absolute;left:50%;top:78%;width:44%;aspect-ratio:2/1;border-radius:50% 50% 0 0;background:#2C5390;transform:translate(-50%,-50%)}
.mock .screen i b{position:absolute;z-index:1;left:8px;bottom:8px;background:rgba(0,19,58,.92);color:#fff;font:600 10px/1 var(--sans);padding:4px 6px;letter-spacing:.02em}
.mock .screen i.host{box-shadow:inset 0 0 0 2px var(--hi-teal)}.mock .screen i.host b{background:var(--g-deep-t)}
.mock .screen .bar{position:absolute;left:0;right:0;bottom:0;height:22px;background:var(--g-mark) top/100% 2px no-repeat,#000D29;color:#fff;font:600 11px/22px var(--label);letter-spacing:.08em;text-transform:uppercase;padding:0 10px;display:flex;justify-content:space-between}
.mock .cap{font-size:13px;color:var(--ink2);margin:10px 4px 0;border:0;background:none;width:auto}
.promise{margin:16px 0 0;padding:12px 14px 12px 16px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 6px 6px 0;font-size:14px;color:var(--ink2)}
.hero-l h3.pull{position:relative;z-index:1;margin:64px auto 0;padding:36px 0 50px;max-width:900px;text-align:center;font:600 32px/1.22 var(--display);color:var(--navy);border-top:1px solid var(--line)}
.hero-l h3.pull em{font-style:normal;background:linear-gradient(transparent 80%,rgba(0,145,179,.28) 80%)}
/* The numbers: a navy band, each number in a hexagon outlined in a palette colour and filled navy. The colours run warm to
   cool along the band as it runs navy to teal: red only reads on the navy end and white best on the teal one. */
.land>.stats{padding:46px 0;background:var(--g-deep-t);color:#fff}
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.strip li{display:flex;align-items:center;gap:16px;min-width:0}
.hxn{position:relative;flex:0 0 74px;width:74px;height:85px;display:grid;place-items:center}
.hxn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hxn svg path{fill:var(--navy);stroke:var(--hc);stroke-width:2.5}
.hxn b{position:relative;font:700 40px/1 var(--display);color:#fff}
.strip .st{min-width:0}.strip .st b{display:block;font:700 21px/1.05 var(--label);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.strip .st span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.94)}
.c-teal{--hc:var(--hi-teal)}.c-orange{--hc:var(--hi-orange)}.c-red{--hc:var(--hi-red)}.c-white{--hc:#FFFFFF}
/* Line icons in a small hexagon: the cards' and the accordions' */
.ico{display:block;width:44px;height:50px;flex:0 0 auto}
.ico .o{fill:var(--navy3);stroke:var(--teal);stroke-width:2}.ico .i{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.what3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.what3 .card{margin:0;padding:28px 26px 26px;border-radius:8px;background:var(--g-mark) top/100% 3px no-repeat,var(--card)}
.what3 .ico{margin-bottom:16px}.what3 h3{font-size:19px;margin:0 0 8px}.what3 p{margin:0;color:var(--ink2);font-size:15px}
/* The navy band: the four steps. How a show works, after it, is on the light ground, so the page keeps its light and
   dark in turn rather than run two navy bands of zig-zags back to back. */
.land>.dark{background:var(--navy);color:#fff}
.land>.dark h2,.land>.dark h3{color:#fff}.land>.dark h2 .k{color:var(--hi-orange)}.land>.dark h2::after{background:linear-gradient(90deg,var(--hi-teal),var(--hi-orange) 60%,var(--hi-red))}
.land>.dark .sec-head p{color:rgba(255,255,255,.86)}.land>.dark a{color:var(--hi-teal)}
.land>#watch{background:radial-gradient(1000px 560px at 100% 0%,rgba(0,145,179,.30),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(206,94,22,.10),transparent 60%),var(--navy)}
.land>#how{background:var(--bg)}
/* The process diagram: hexagons in outline stacked down the middle and nested like a honeycomb, each step's text on the
   side its hexagon leans to, so the sides alternate. The rows are a fixed half step, 48 px, and each step spans three, so
   the hexagons keep one pitch however long a step's words are. Words longer than their three rows run on beside the next
   hexagon, where nothing else is: the next step's words are on the other side, and the one after starts four rows down,
   which leaves room for a title and five lines (the longest step, Open the door, is five at 1080 px). Below 1080 px a
   column is too narrow for that, and the diagram is one column (below). */
.hexflow{list-style:none;margin:48px 0 0;padding:0 0 30px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:48px;position:relative}
.hexflow>li{position:relative;grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) 148px minmax(0,1fr);column-gap:26px;align-items:start}
.hexflow>li:nth-child(1){grid-row:1/span 3}.hexflow>li:nth-child(2){grid-row:3/span 3}.hexflow>li:nth-child(3){grid-row:5/span 3}
.hexflow>li:nth-child(4){grid-row:7/span 3}.hexflow>li:nth-child(5){grid-row:9/span 3}.hexflow>li:nth-child(6){grid-row:11/span 3}
.hx{grid-column:2;grid-row:1;justify-self:start;position:relative;width:96px;height:111px;color:var(--hc)}
.hexflow>li:nth-child(even) .hx{justify-self:end}
.hx svg{display:block;width:100%;height:100%;overflow:visible}
/* Both diagrams take their steps' colours in one order - teal, white, orange, red, and round again - and so does the line
   that joins the hexagons in one column. On the light ground a hexagon is white, outlined in the brand colour (the white
   step in the neutral grey), its number in that colour's text shade; on navy it is navy, outlined in the lifted shade. */
.hexflow .c-teal{--hc:var(--teal);--ht:var(--link)}.hexflow .c-orange{--hc:var(--orange);--ht:var(--amber)}.hexflow .c-red{--hc:var(--red);--ht:var(--red)}.hexflow .c-white{--hc:var(--slate);--ht:var(--ink3)}
.dark .hexflow .c-teal{--hc:var(--hi-teal);--ht:var(--hi-teal)}.dark .hexflow .c-orange{--hc:var(--hi-orange);--ht:var(--hi-orange)}.dark .hexflow .c-red{--hc:var(--hi-red);--ht:var(--hi-redt)}.dark .hexflow .c-white{--hc:#FFFFFF;--ht:#FFFFFF}
.hx .o{fill:var(--card);stroke:currentColor;stroke-width:2.5;filter:drop-shadow(0 8px 12px rgba(0,31,91,.12))}
.dark .hx .o{fill:var(--navy);filter:drop-shadow(0 0 7px color-mix(in srgb,currentColor 50%,transparent))}
.hx .i{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hexflow .hx b{position:absolute;left:0;right:0;top:20%;text-align:center;font:700 15px/1 var(--display);letter-spacing:.1em;color:var(--ht)}
.hexflow .tx{grid-column:1;grid-row:1;text-align:right;padding-top:16px}
.hexflow>li:nth-child(even) .tx{grid-column:3;text-align:left}
.hexflow h3{font:700 23px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--navy);margin:0 0 6px}
.hexflow p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}.hexflow p b{color:var(--ink)}
.dark .hexflow p{color:rgba(255,255,255,.86)}.dark .hexflow p b,.dark .hexflow .mono{color:#fff}
/* ── the explainer: chat, then the queue, then the stage, drawn in CSS, on a twenty-second loop ── */
.xp{--xpd:20s;margin:0}
.xp-panes{display:grid;grid-template-columns:1fr 1.1fr 1.7fr;gap:12px;background:var(--card);padding:14px;border-radius:10px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);color:var(--ink)}
.xp-pane{background:var(--bg);border:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.xp-h{font:700 12px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--card)}
.xp-sub{font:700 12px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:10px 12px 0}
.xp-list{list-style:none;margin:0;padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.35}
.xp-chat li{color:var(--ink2);padding:3px 5px;border-radius:3px}.xp-chat li b{color:var(--link)}
.xp-chat li.xp-cmd{animation:xp-cmd var(--xpd) linear infinite}
.xp-q li{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);padding:6px 8px;border-radius:3px;overflow:hidden}
.xp-q li i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.xp-q li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-q li em{font:600 11px/1 var(--sans);font-style:normal;border:1px solid var(--navy);color:var(--navy);padding:4px 6px;border-radius:3px;white-space:nowrap}
.xp-q li.xp-new{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0;animation:xp-row var(--xpd) linear infinite}
.xp-q li.xp-new i{animation:xp-dot var(--xpd) linear infinite}.xp-q li.xp-new em{animation:xp-btn var(--xpd) linear infinite}
.xp-seat b{font:800 11px/1 var(--sans);color:#fff;background:var(--navy);padding:4px 6px;border-radius:3px}
.xp-swap{display:grid}.xp-swap>span{grid-area:1/1}
.xp-swap .xp-empty{color:var(--ink3);opacity:0;animation:xp-out var(--xpd) linear infinite}.xp-swap .xp-in{animation:xp-in var(--xpd) linear infinite}
.xp-screen{position:relative;aspect-ratio:16/9;background:#00133A;overflow:hidden;margin:10px 12px 12px}
.xp-t{position:absolute;background:#0B2D66;overflow:hidden;border-radius:2px}
.xp-t::before{content:'';position:absolute;left:50%;top:38%;width:24%;aspect-ratio:1;border-radius:50%;background:#2C5390;transform:translate(-50%,-50%)}
.xp-t::after{content:'';position:absolute;left:50%;top:80%;width:46%;aspect-ratio:2/1;border-radius:50% 50% 0 0;background:#2C5390;transform:translate(-50%,-50%)}
.xp-t b{position:absolute;z-index:1;left:6%;bottom:7%;background:rgba(0,19,58,.92);color:#fff;font:600 10px/1 var(--sans);padding:3px 5px;white-space:nowrap}
.xp-t.host b{background:var(--navy)}
.xp-t.host{left:27%;top:7%;width:46%;height:74%;animation:xp-host var(--xpd) ease-in-out infinite}
.xp-t.dana{left:3%;top:24%;width:21%;height:40%;animation:xp-dana var(--xpd) ease-in-out infinite}
.xp-t.sam{left:76%;top:24%;width:21%;height:40%;animation:xp-sam var(--xpd) ease-in-out infinite}
.xp-bar{position:absolute;left:0;right:0;bottom:0;height:13%;background:var(--g-mark) top/100% 2px no-repeat,#000D29;color:#fff;font:600 11px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;white-space:nowrap}
.xp-ovl .xp-h{display:flex;justify-content:space-between;gap:10px}.xp-lay-n{display:inline-flex;gap:5px;white-space:nowrap}
.xp-lay{display:inline-grid}.xp-lay>span{grid-area:1/1;color:var(--navy)}
.xp-lay .l1{animation:xp-l1 var(--xpd) linear infinite}.xp-lay .l2{opacity:0;animation:xp-l2 var(--xpd) linear infinite}.xp-lay .l3{opacity:0;animation:xp-l3 var(--xpd) linear infinite}
.xp figcaption{margin-top:14px}
/* While the drawing plays, the step it is at lights up in the diagram beneath it: its hexagon fills with a little of its
   colour and its number turns white, which clears 6:1 on every lit fill where the colour itself would not. */
.xp-steps>li:nth-child(1) .hx .o{animation:xp-s1 var(--xpd) linear infinite}.xp-steps>li:nth-child(2) .hx .o{animation:xp-s2 var(--xpd) linear infinite}
.xp-steps>li:nth-child(3) .hx .o{animation:xp-s3 var(--xpd) linear infinite}.xp-steps>li:nth-child(4) .hx .o{animation:xp-s4 var(--xpd) linear infinite}
.xp-steps>li:nth-child(1) .hx b{animation:xp-n1 var(--xpd) linear infinite}.xp-steps>li:nth-child(2) .hx b{animation:xp-n2 var(--xpd) linear infinite}
.xp-steps>li:nth-child(3) .hx b{animation:xp-n3 var(--xpd) linear infinite}.xp-steps>li:nth-child(4) .hx b{animation:xp-n4 var(--xpd) linear infinite}
.xp.still .xp-steps .hx .o,.xp.still .xp-steps .hx b{animation:none}
.xp-video{aspect-ratio:16/9;background:#00133A;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,0,0,.6)}.xp-video video,.xp-video iframe{display:block;width:100%;height:100%;border:0}
.xp-pause{position:absolute;width:1px;height:1px;opacity:0;margin:0}
/* The pause control is a button to anyone using it, so it is set as the small buttons are. */
.xp-ctl{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;font:600 14px/1.2 var(--label);letter-spacing:.05em;text-transform:uppercase;color:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);padding:6px 11px;cursor:pointer;background:var(--card);transition:background .15s}
.xp-ctl:hover{background:var(--navy3)}
.dark .xp-ctl{color:#fff;background:transparent;border-color:rgba(255,255,255,.7)}.dark .xp-ctl:hover{background:rgba(255,255,255,.1)}
.xp-ctl .p2{display:none}.xp-pause:checked+.xp-ctl .p1{display:none}.xp-pause:checked+.xp-ctl .p2{display:inline}
.xp-pause:focus-visible+.xp-ctl{outline:2px solid var(--hi-teal);outline-offset:2px}
.xp-pause:checked~.xp *{animation-play-state:paused!important}
@keyframes xp-cmd{0%,6%{opacity:0;transform:translateY(8px);background:transparent}9%,23%{opacity:1;transform:none;background:rgba(206,94,22,.18)}27%,100%{opacity:1;transform:none;background:transparent}}
@keyframes xp-row{0%,23%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0}27%,49%{opacity:1;max-height:40px;padding-top:6px;padding-bottom:6px;border-width:1px}53%,100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0}}
@keyframes xp-dot{0%,31%{background:var(--line2)}34%,100%{background:var(--green)}}
@keyframes xp-btn{0%,43%{background:transparent;color:var(--navy);box-shadow:none}45%,50%{background:var(--navy);color:#fff;box-shadow:0 0 0 3px rgba(0,31,91,.25)}52%,100%{background:transparent;color:var(--navy);box-shadow:none}}
@keyframes xp-in{0%,52%{opacity:0}55%,100%{opacity:1}}
@keyframes xp-out{0%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes xp-host{0%,67%{left:27%;top:7%;width:46%;height:74%}71%,80%{left:34.5%;top:17%;width:31%;height:52%}84%,94%{left:2%;top:5%;width:64%;height:76%}98%,100%{left:27%;top:7%;width:46%;height:74%}}
@keyframes xp-dana{0%,67%{left:3%;top:24%;width:21%;height:40%}71%,80%{left:2%;top:17%;width:31%;height:52%}84%,94%{left:68%;top:5%;width:30%;height:37%}98%,100%{left:3%;top:24%;width:21%;height:40%}}
@keyframes xp-sam{0%,53%{left:76%;top:24%;width:21%;height:40%;opacity:0}57%,67%{left:76%;top:24%;width:21%;height:40%;opacity:1}71%,80%{left:67%;top:17%;width:31%;height:52%;opacity:1}84%,94%{left:68%;top:44%;width:30%;height:37%;opacity:1}97%,100%{left:76%;top:24%;width:21%;height:40%;opacity:0}}
@keyframes xp-l1{0%,67%{opacity:1}70%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes xp-l2{0%,68%{opacity:0}71%,81%{opacity:1}84%,100%{opacity:0}}
@keyframes xp-l3{0%,81%{opacity:0}84%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes xp-s1{0%,23%{fill:color-mix(in srgb,currentColor 30%,#001F5B)}25%,100%{fill:#001F5B}}
@keyframes xp-s2{0%,23%{fill:#001F5B}25%,43%{fill:color-mix(in srgb,currentColor 30%,#001F5B)}45%,100%{fill:#001F5B}}
@keyframes xp-s3{0%,43%{fill:#001F5B}45%,53%{fill:color-mix(in srgb,currentColor 30%,#001F5B)}55%,100%{fill:#001F5B}}
@keyframes xp-s4{0%,53%{fill:#001F5B}55%,97%{fill:color-mix(in srgb,currentColor 30%,#001F5B)}99%,100%{fill:#001F5B}}
@keyframes xp-n1{0%,23%{color:#FFFFFF}25%,100%{color:var(--ht)}}
@keyframes xp-n2{0%,23%{color:var(--ht)}25%,43%{color:#FFFFFF}45%,100%{color:var(--ht)}}
@keyframes xp-n3{0%,43%{color:var(--ht)}45%,53%{color:#FFFFFF}55%,100%{color:var(--ht)}}
@keyframes xp-n4{0%,53%{color:var(--ht)}55%,97%{color:#FFFFFF}99%,100%{color:var(--ht)}}
@media (prefers-reduced-motion:reduce){.xp *{animation:none!important}.xp-pause,.xp-ctl{display:none}}
/* What the audience sees */
.land>#screen{background:var(--card)}
.layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.layouts .lay{background:var(--card);border:1px solid var(--line);padding:12px;border-radius:8px;transition:transform .2s,box-shadow .2s,border-color .2s}
.layouts .lay:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 16px 30px -14px rgba(0,31,91,.22)}
.layouts .art{aspect-ratio:16/10;display:grid;gap:4px;padding:7px;background:linear-gradient(150deg,#001F5B,#0B3A7A);border-radius:4px}
.layouts .art i{display:block;background:rgba(255,255,255,.2);border-radius:2px}.layouts .art i.h{background:linear-gradient(135deg,var(--teal),var(--hi-teal))}
.layouts .art.stage{grid-template-columns:1fr 4fr 1fr;align-items:center}.layouts .art.stage i{height:45%}.layouts .art.stage i.h{height:80%}
.layouts .art.side{grid-template-columns:3fr 1fr;grid-template-rows:repeat(3,1fr)}.layouts .art.side i.h{grid-row:1/4}
.layouts .art.grid2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.layouts .art.solo{grid-template-columns:1fr}
.layouts .art.tall{grid-template-columns:repeat(3,1fr)}
.layouts .art.spot{grid-template-columns:repeat(6,1fr);grid-template-rows:2.4fr 1fr}.layouts .art.spot i{grid-column:span 2}.layouts .art.spot i.h{grid-column:span 3}
.layouts b{display:block;font-family:var(--display);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);margin:12px 0 2px}.layouts span{font-size:13px;color:var(--ink2);line-height:1.45;display:block}
.land .note{margin:18px 0 0;color:var(--ink3);font-size:14px;max-width:860px}
/* Accordions: the crew's tools and the questions. Plain <details>, so they open from the keyboard and read as
   buttons to a screen reader with no script; the chevron turns to say which way. */
.acc{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.acc.one{grid-template-columns:1fr;max-width:860px}.acc-col{display:grid;gap:12px}
.acc details{background:var(--card);border:1px solid var(--line);border-radius:8px;transition:border-color .2s,box-shadow .2s}
.acc details:hover{border-color:var(--line2)}.acc details[open]{border-color:var(--teal);box-shadow:0 14px 30px -18px rgba(0,31,91,.3)}
.acc summary{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;list-style:none;font:700 17px/1.35 var(--font);color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'';flex:0 0 auto;width:9px;height:9px;margin:-5px 4px 0 auto;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:rotate(45deg);transition:transform .2s}
.acc details[open]>summary::after{transform:rotate(-135deg);margin-top:5px}
.acc summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}
.acc summary .ico{width:36px;height:41px}
.acc .acc-b{padding:0 22px 18px 18px;color:var(--ink2);font-size:15px}.acc.icons .acc-b{padding-left:68px}.acc .acc-b p{margin:0}
/* An odd one out closes the two columns from the middle, rather than leave a hole under the shorter one. */
.acc>.acc-last{grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}
.land>#plans{background:var(--card)}
.land>#faq{background:var(--bg)}
.land>#data{background:var(--card);border-top:1px solid var(--line)}
.land .compare{margin-top:72px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.what3.data-more{margin-top:14px}
.cap{width:100%;border:1px solid var(--line);background:var(--card);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}
.cap th{background:var(--navy);color:#fff;border-bottom:0}.cap th.pop{background:var(--link)}
.cap tbody tr:nth-child(even) td{background:#F8FAFB}.cap td:not(:first-child),.cap th:not(:first-child){text-align:center;width:22%}
.cap td .no{color:var(--ink3);font-size:14px}.cap td .yes{color:var(--green);font-weight:700}
.card.data{padding:24px 26px;border-radius:8px;background:var(--g-mark) top/100% 3px no-repeat,var(--card)}.card.data h3{font-size:20px;margin-bottom:10px}.card.data ul{margin:0;padding-left:20px}.card.data li{margin:7px 0;color:var(--ink2);font-size:15px}.card.data li b{color:var(--ink)}
.card.data .limited{margin:16px 0 8px;padding:10px 12px;background:var(--navy3);border:1px solid rgba(0,31,91,.2);font-size:15px}
/* The teal's text shade is 4.2:1 on this box: the policy's name is navy here, underlined so it still reads as a link. */
.card.data .limited a{color:var(--navy);text-decoration:underline}
footer{position:relative;background:var(--stripe) top/100% 3px no-repeat,var(--navy);color:#fff}
footer a{color:#fff}footer .brand{padding:0}footer .brand img{height:56px}
footer .cols{max-width:1080px;margin:0 auto;padding:40px 32px 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
footer .cols .brand{margin-bottom:14px}footer .tag{font-size:14px;color:rgba(255,255,255,.8);max-width:340px}
footer h4{font-family:var(--label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--hi-teal);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}footer ul a{color:rgba(255,255,255,.88)}
/* The rule above the base runs exactly as wide as the columns' text: the margin, not padding, holds it in. */
footer .base{margin:0 max(32px,calc(50% - 508px));padding:16px 0 26px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:rgba(255,255,255,.66);font-family:var(--sans)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}header,.brand img,.layouts .lay,.acc details,.acc summary::after{transition:none}.layouts .lay:hover{transform:none}}
/* The links to the home page's sections. Beside the lockup above 1080 px, and in a tablet's links row, all four; from 901
   to 1080 px the bar has room for How it works and Pricing beside the Privacy Policy, the Terms and Sign in, at the top and
   folded alike. A phone's row has room for one of them, How it works, from 360 px: its way to the plans is the button
   beside the lockup. Below 360 px the row is the Privacy Policy, the Terms and Sign in. */
@media (min-width:901px) and (max-width:1080px){nav a.nav-x{display:none}}
/* A name beside an admin's two extra links leaves the menu bar no room: below 1280 px the name is on the Account page only. */
@media (max-width:1279px){.who{display:none}}
@media (max-width:900px){.hero-grid,.plans{grid-template-columns:1fr}.hero-grid{gap:40px}.hero-l h1{font-size:54px}.strip{grid-template-columns:1fr 1fr;row-gap:28px}.what3,.layouts{grid-template-columns:1fr 1fr}.what3>.card:last-child:nth-child(odd){grid-column:1/-1}.acc{grid-template-columns:1fr}.acc>.acc-last{width:auto;justify-self:stretch}.xp-panes{grid-template-columns:1fr 1fr}.xp-ovl{grid-column:1/-1}footer .cols{grid-template-columns:1fr 1fr}footer .cols>div:first-child{grid-column:1/-1}.legal .toc ol{columns:1}}
/* Below 1080 px a side of the zig-zag is too narrow for a step's words: the diagram is one column, every hexagon on the
   left, each joined to the next by a line in its own colour, and the words at a length that still reads easily. */
@media (max-width:1079px){.hexflow{max-width:720px;margin-top:34px;padding-bottom:0;grid-auto-rows:auto}
.hexflow>li:nth-child(n){grid-row:auto;grid-template-columns:64px minmax(0,1fr);column-gap:18px;padding-bottom:22px}
.hexflow>li:not(:last-child)::before{content:'';position:absolute;left:31px;top:72px;bottom:0;width:2px;background:var(--hc)}
.hexflow>li:nth-child(n) .hx{grid-column:1;justify-self:start;width:64px;height:74px}.hexflow .hx b{font-size:12px;top:19%}
.hexflow>li:nth-child(n) .tx{grid-column:2;text-align:left;padding-top:4px}.hexflow h3{font-size:21px}}
/* A tablet or a phone: the menu bar is two rows, the lockup at 48 px (40 on a phone) and the button, then the links in a
   row of their own that scrolls sideways if it must. Folded, the links row goes (its 34 px move below the bar, as on a
   desktop): the Privacy Policy and the Terms are still at the top of every page and in the footer, and the bar stays short. */
@media (max-width:900px){header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:0;transition:none}
.brand{grid-row:1;grid-column:1}header .cta{grid-row:1;grid-column:2;justify-self:end}
.brand img,header.compact .brand img{height:48px;transition:none}.brand picture{display:none}
nav{grid-row:2;grid-column:1/-1;margin:0 -4px;height:34px;padding:0 4px;gap:18px}
header.compact{margin-bottom:34px}header.compact nav{height:0;visibility:hidden}
html{scroll-padding-top:114px}html.folds{scroll-padding-top:80px}}
@media (max-width:640px){main{padding:24px 16px 50px}header{padding:8px 16px;column-gap:12px}.brand img,header.compact .brand img{height:40px}nav{gap:16px;font-size:15px}nav a.nav-x,nav a.nav-p{display:none}.addr b{display:none}
html{scroll-padding-top:102px}html.folds{scroll-padding-top:68px}
.land .wrap{padding:0 16px}.land>section{padding:54px 0}.land>.hero-l{padding-top:34px}.hero-l h1{font-size:42px}.hero-l h2.hero-sub{font-size:25px}.land h2{font-size:33px}.land .sec-head p{font-size:16px}
.hero-l h3.pull{font-size:25px;margin-top:44px;padding:28px 0 38px}
.what3,.xp-panes,footer .cols{grid-template-columns:1fr}.layouts{grid-template-columns:1fr 1fr;gap:10px}.layouts span{font-size:12.5px}
.strip{gap:24px 14px}.strip li{flex-direction:column;align-items:flex-start;gap:10px}.hxn{flex-basis:auto;width:58px;height:67px}.hxn b{font-size:30px}.strip .st b{font-size:19px}
.acc summary{padding:13px 14px;font-size:16px}.acc.icons .acc-b{padding-left:14px}.acc .acc-b{padding:0 16px 16px 14px}
.card.data{padding:18px 16px}footer .cols{padding-left:16px;padding-right:16px}footer .base{margin:0 16px;flex-direction:column}}
@media (max-width:359px){nav a.nav-h{display:none}}
/* Spacing and the odd touch, as classes. Until 0.2.50 these were style="" attributes, which the policy now refuses
   (style-src 'self', cspFor); each is a class that wins as the attribute did, over every rule above (!important), so no
   page moved. Named for what they set: mt and mb a top or bottom margin; mA-B-C or mA-B a margin as written out
   (m10-0-0 is margin:10px 0 0); mw a max-width, mh a max-height; fs a font size; t- a text colour, bc- a border's. */
.m0{margin:0!important}.mt0{margin-top:0!important}.mt4{margin-top:4px!important}.mt6{margin-top:6px!important}
.mt8{margin-top:8px!important}.mt10{margin-top:10px!important}.mt12{margin-top:12px!important}.mt14{margin-top:14px!important}
.mt18{margin-top:18px!important}.mt22{margin-top:22px!important}.mt30{margin-top:30px!important}
.mb0{margin-bottom:0!important}.mb6{margin-bottom:6px!important}.mb8{margin-bottom:8px!important}.mb10{margin-bottom:10px!important}
.mb14{margin-bottom:14px!important}
.m4-0-0{margin:4px 0 0!important}.m6-0-0{margin:6px 0 0!important}.m8-0-0{margin:8px 0 0!important}.m10-0-0{margin:10px 0 0!important}
.m12-0-0{margin:12px 0 0!important}.m0-0-4{margin:0 0 4px!important}.m0-0-6{margin:0 0 6px!important}.m0-0-8{margin:0 0 8px!important}
.m0-0-10{margin:0 0 10px!important}.m4-0-8{margin:4px 0 8px!important}.m18-0-8{margin:18px 0 8px!important}
.m8-0{margin:8px 0!important}.m10-0{margin:10px 0!important}.m12-0{margin:12px 0!important}
.m24-auto{margin:24px auto!important}.m30-auto{margin:30px auto!important}.m40-auto{margin:40px auto!important}
.mw80{max-width:80px!important}.mw110{max-width:110px!important}.mw220{max-width:220px!important}.mw280{max-width:280px!important}
.mw420{max-width:420px!important}.mw440{max-width:440px!important}.mw460{max-width:460px!important}.mw480{max-width:480px!important}
.mw520{max-width:520px!important}.mw560{max-width:560px!important}.mw600{max-width:600px!important}.mw640{max-width:640px!important}
.mh320{max-height:320px!important}.mh640{max-height:640px!important}.minw140{min-width:140px!important}
.pt4{padding-top:4px!important}.pl18{padding-left:18px!important}.pl20{padding-left:20px!important}.pl26{padding-left:26px!important}
.inline{display:inline!important}.block{display:block!important}.iblock{display:inline-block!important}
.fwrap{flex-wrap:wrap!important}.as-end{align-self:flex-end!important}.ai-start{align-items:flex-start!important}.ai-end{align-items:flex-end!important}
.gap6{gap:6px!important}.gap8{gap:8px!important}.gap10{gap:10px!important}.flex220{flex:1 1 220px!important}.flex-none{flex:0 0 auto!important}
.ta-c{text-align:center!important}.ta-r{text-align:right!important}.pre-wrap{white-space:pre-wrap!important}.ow-any{overflow-wrap:anywhere!important}
.break-all{word-break:break-all!important}.break-word{word-break:break-word!important}.select-all{user-select:all!important}.pointer{cursor:pointer!important}
.fs12{font-size:12px!important}.fs13{font-size:13px!important}.fs14{font-size:14px!important}.fs16{font-size:16px!important}
.fs17{font-size:17px!important}.fs26{font-size:26px!important}.ls05{letter-spacing:.05em!important}
.t-red{color:var(--red)!important}.t-green{color:var(--green)!important}.t-amber{color:var(--amber)!important}.t-inherit{color:inherit!important}
.bc-link{border-color:var(--link)!important}.bc-red{border-color:var(--red)!important}.dashed{border-style:dashed!important}
/* A field's label is in capitals; the word beside it (optional) is not. */
.aside{text-transform:none!important;letter-spacing:0!important;font-weight:400!important}
/* A row of filter chips (the audit log's, the inbox's, People's). */
.chips{gap:6px!important;flex-wrap:wrap!important;margin-bottom:12px!important}
/* The age box beside its sentence on sign-up and on the Terms page: the row does not wrap (agreeLine). */
.agree{gap:8px!important;align-items:flex-start!important;flex-wrap:nowrap!important;font-size:14px!important;color:var(--ink2)!important}
/* A card within a card (People's welcome and administrator boxes), and a part of a person's account card. */
.inset{margin:0!important;padding:14px 16px!important;background:var(--bg)!important}
.part{border-top:1px solid var(--line)!important;padding-top:12px!important;margin-top:12px!important}
/* A desk's card on My desks is one link, and does not read as one. */
.desk-card{display:block!important;color:inherit!important;text-decoration:none!important}
/* The big button on the Connect pages. */
.big{font-size:16px!important;padding:12px 22px!important}
/* Two-factor's setup key, its recovery codes, and a desktop key shown once. */
.setup-key{font-size:20px!important;letter-spacing:.12em!important;margin:8px 0!important;word-break:break-all!important}
.codes{columns:2!important;font-size:15px!important;letter-spacing:.06em!important;line-height:2!important}
.fresh-key{margin-top:10px!important;padding:12px!important;background:var(--bg)!important;border:1px solid var(--line2)!important;border-radius:var(--radius)!important;word-break:break-all!important;user-select:all!important}
/* An X application's secret on Settings: a text box drawn as dots, not a password box, which a browser offered to save as
   the owner's own password (viewSettings). */
input.secret{-webkit-text-security:disc}
/* A gift's picture beside its name on the page a viewer sends one from (viewGift). */
.gift-emoji{font-size:1.6em!important}
/* That page's gifts, as cards a press anywhere on chooses, each saying what the show gets; one a viewer may not send yet, faded. */
.gift-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:10px!important}
.gift-card{margin:0!important}
.gift-gets{display:block!important;font-size:13px!important;color:var(--ink2)!important;margin-top:4px!important}
.gift-off{opacity:.55!important;cursor:not-allowed!important}
/* A tap's count in the tray, and the tally beside the tray's button. */
.gift-tap input{width:5.5em!important;flex:none!important}
/* Where a gift stands, back from Checkout (viewGiftSent). */
.gift-track{margin:0 0 10px!important;padding:0!important;list-style:none!important}
.gift-step{color:var(--ink2)!important}
.gift-step::before{content:'\25CB';display:inline-block;width:22px}
.gift-step-on{font-weight:600!important}
.gift-step-on::before{content:'\2713';display:inline-block;width:22px;color:var(--green)}
/* Who a gift is sent as, on the gift page (viewGift): a group of choices with no box drawn round it. */
.gift-as{border:0!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important}
.gift-as legend{font-weight:600!important;padding:0!important;margin:0 0 6px!important}
/* Surprise me beside its price range. */
.gift-surprise{align-items:flex-end!important}
.gift-surprise select{width:auto!important}
/* A desk's gifts as boxes to tick, on its gift settings (viewGiftSettings). */
.gift-items{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:6px 14px!important}
.look-livelobby{border-left:4px solid #001F5B!important}.look-editorial{border-left:4px solid #1F3A5F!important}.look-broadcast{border-left:4px solid #FFB020!important}.look-chamber{border-left:4px solid #C8A951!important}.look-newsroom{border-left:4px solid #4C8DFF!important}.look-arena{border-left:4px solid #E5484D!important}.look-dusk{border-left:4px solid #A78BFA!important}