/*
 * CustomEdition theme for the OpenCE web launcher: the site's "sleek next-gen HUD", as the game's menus are.
 *
 * Loaded after the launcher's own style.css, which is left untouched. Dark frosted glass over a near-black navy,
 * 1px hairlines lit from the top-left, one cyan accent (the site's), amber for warnings and rank alone, green
 * and red for success and failure alone. Panels, rows, readouts and buttons are cut at 45° on the top-left and
 * bottom-right corners (14px a panel, 8px a button or a row), never rounded. A motion-tracker ring and a live
 * system readout sit in the masthead. Depth comes from layering glass; motion is quick, and still for reduced
 * motion. All drawn here in CSS and SVG. Fonts: Orbitron, Exo 2 and JetBrains Mono in the site's default look
 * (Rajdhani and Noto Sans in its other designs), each under the SIL Open Font License 1.1 (fonts/README.md).
 */

@font-face { font-family: "Rajdhani"; font-weight: 600; font-display: swap; src: url("fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url("fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-display: swap; src: url("fonts/noto-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-display: swap; src: url("fonts/noto-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
/* (the site's default look: Orbitron for the wordmark and titles, Exo 2 for the rest; each one variable font) */
@font-face { font-family: "Orbitron"; font-weight: 400 900; font-display: swap; src: url("fonts/orbitron-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 100 900; font-display: swap; src: url("fonts/exo-2-latin-wght-normal.woff2") format("woff2"); }

/* (registered, so that an edge lighting up is a quick fade rather than a jump) */
@property --ce-lit { syntax: '<color>'; inherits: false; initial-value: rgba(191, 234, 255, 0.4); }

:root {
  --ce-ink: #05080e;
  --ce-ink-2: #0b1220;
  --ce-glass: rgba(13, 22, 36, 0.6);
  --ce-glass-2: rgba(9, 15, 26, 0.78);
  /* the site's accent (customedition.js has its old default stand for the new one, as the site's pages do) */
  --ce-cyan: var(--ce-site-accent, #39c6ff);
  --ce-cyan-soft: color-mix(in oklab, var(--ce-cyan) 65%, #ffffff);
  --ce-good: #3ddc97;
  --ce-amber: #ffb000;
  --ce-red: #ff5d6c;
  --ce-text: #a6b4c6;
  --ce-muted: #8696aa;
  --ce-bright: #ebf2fa;
  --ce-line: rgba(191, 234, 255, 0.1);
  --ce-line-2: rgba(191, 234, 255, 0.22);
  --ce-glow: color-mix(in oklab, var(--ce-cyan) 35%, transparent);
  --ce-display: "Rajdhani", Tahoma, Arial, sans-serif;
  --ce-body: "Noto Sans", "Trebuchet MS", Arial, sans-serif;
  --ce-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ce-cut: 14px;
  --ce-cut-sm: 8px;

  /* the launcher's own variables, re-pointed */
  --ground: var(--ce-ink);
  --navy: #0e1828;
  --navy-deep: #070c15;
  --row: rgba(255, 255, 255, 0.025);
  --edge: var(--ce-line-2);
  --edge-bright: var(--ce-cyan);
  --edge-dim: var(--ce-line);
  --label: var(--ce-cyan);
  --text: var(--ce-bright);
  --soft: var(--ce-text);
  --glow: var(--ce-glow);
  --bad: var(--ce-amber);
  --bad-text: #ffd27a;
  --bad-ground: rgba(255, 176, 0, 0.08);
  --label-font: var(--ce-display);
  --title-font: var(--ce-display);
}

/* ---------- ground: the navy lit from above; nothing else */

html { background: var(--ce-ink); color-scheme: dark; }
html, body { font-family: var(--ce-body); font-weight: 400; }
body {
  position: relative;
  color: var(--ce-text);
  background:
    radial-gradient(70rem 30rem at 50% -8rem, color-mix(in oklab, var(--ce-cyan) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ce-ink-2), var(--ce-ink) 44rem) no-repeat,
    var(--ce-ink);
}
.ce-sweep-band { display: none; }
#launcher, .ce-bar, .ce-foot { position: relative; z-index: 1; }
a { color: var(--ce-cyan); text-underline-offset: 3px; }
a:hover { color: var(--ce-cyan-soft); }
.help, .menu-note, .tagline, .sheet-body > p, .ce-foot { font-family: var(--ce-body); font-weight: 400; }

/* when the game runs, the launcher is hidden and the canvas fills the window: our chrome goes too */
body:has(#launcher[hidden]) .ce-bar, body:has(#launcher[hidden]) .ce-foot { display: none; }

/* ---------- the site bar: frosted, a hairline under it */

.ce-bar {
  background: rgba(5, 8, 14, 0.74);
  border-bottom: 1px solid var(--ce-line);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.ce-bar-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ce-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.ce-brand img { width: 36px; height: 36px; object-fit: contain; }
.ce-brand span { font: 600 21px/1 var(--ce-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-bright); }
.ce-links { display: flex; flex-wrap: wrap; }
.ce-links a { position: relative; padding: 20px 12px 17px; font: 600 15px/1 var(--ce-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-text); text-decoration: none; transition: color 0.15s; }
.ce-links a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 2px; background: var(--ce-cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease-out; }
.ce-links a:hover, .ce-links a.ce-here { color: #fff; }
.ce-links a:hover::after, .ce-links a.ce-here::after { transform: scaleX(1); }
.ce-hud { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--ce-line); font: 400 11px/1 var(--ce-mono); letter-spacing: 0.12em; color: var(--ce-muted); }
.ce-dot { width: 7px; height: 7px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--ce-good); animation: ce-blink 2.4s ease-in-out infinite; }
.ce-hud .ce-uplink { color: var(--ce-good); text-transform: uppercase; }
.ce-hud.ce-down .ce-dot { background: var(--ce-amber); }
.ce-hud.ce-down .ce-uplink { color: var(--ce-amber); }

/* ---------- masthead: tracker, title, readout */

.masthead {
  position: relative;
  border: 0;
  border-bottom: 1px solid var(--ce-line);
  background: radial-gradient(56rem 20rem at 20% -4rem, color-mix(in oklab, var(--ce-cyan) 11%, transparent), transparent 70%);
}
.masthead::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: min(28rem, 60%); background: linear-gradient(90deg, var(--ce-cyan), transparent); }
.masthead-inner {
  position: relative;
  max-width: 1180px;
  display: grid;
  align-items: center;
  gap: 24px 32px;
  padding: 30px 32px 28px;
  text-align: left;
}
.masthead-inner > img { display: none; }
.masthead h1 {
  margin: 0;
  font: 600 52px/0.95 var(--ce-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ce-bright);
}
.masthead h1::after { content: " in your browser"; color: var(--ce-cyan); }
.tagline { margin: 10px 0 0; font: 400 11px/1.6 var(--ce-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ce-muted); }
.tagline::before { content: "// "; color: var(--ce-cyan); opacity: 0.6; }

.ce-tracker { position: relative; width: 112px; height: 112px; flex: none; }
.ce-tracker svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ce-tracker .ce-ring { fill: none; stroke: rgba(191, 234, 255, 0.16); stroke-width: 1; }
.ce-tracker .ce-ring-outer { stroke: color-mix(in oklab, var(--ce-cyan) 70%, transparent); stroke-width: 1; }
.ce-tracker .ce-tick { stroke: var(--ce-cyan); stroke-width: 1.5; opacity: 0.7; }
.ce-tracker .ce-sweep { fill: url(#ce-sweep-grad); opacity: 0.7; transform-origin: 60px 60px; transform-box: view-box; will-change: transform; animation: ce-rotate 5s linear infinite; }
.ce-tracker .ce-blip { fill: var(--ce-cyan); animation: ce-blip 5s linear infinite; }
.ce-tracker .ce-blip.g { fill: var(--ce-good); animation-delay: -1.6s; }
.ce-tracker .ce-blip.b { animation-delay: -3.2s; }
.ce-tracker img { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); filter: saturate(0.7); }

/* the readout: a cut glass panel, mono micro-caps names over tabular values */
.ce-readout {
  margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; padding: 13px 16px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(191, 234, 255, 0.4), rgba(191, 234, 255, 0.12) 35%, rgba(191, 234, 255, 0.05)) 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), var(--ce-glass-2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 400 11.5px/1.3 var(--ce-mono); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.ce-readout dt { margin: 0; color: var(--ce-muted); text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; }
.ce-readout dd { margin: 0; color: var(--ce-bright); text-align: right; min-width: 7ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-readout dd.ce-hot { color: var(--ce-good); }
.ce-readout dd:empty::before { content: "——"; color: var(--ce-line-2); }
/* the rank cell's link: to sign in (the site's page, in a tab of its own), or to the member's page */
.ce-readout dd a { color: var(--ce-cyan-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ce-line-2); }
.ce-readout dd a:hover { color: #fff; text-decoration-color: currentColor; }
.ce-readout dd.ce-hot a { color: var(--ce-good); }

/*
 * The masthead keeps its shape while the script fills it: the tracker's column, the title's and the readout's
 * are fixed, and the readout's row is held for it, so nothing moves when they arrive.
 */
.masthead-inner { grid-template-columns: 112px minmax(0, 1fr) 17.5rem; grid-template-rows: minmax(11rem, auto); }
.masthead-inner > div:not(.ce-tracker) { grid-column: 2; grid-row: 1; }
.masthead-inner > .ce-tracker { grid-column: 1; grid-row: 1; }
.masthead-inner > .ce-readout { grid-column: 3; grid-row: 1; }

/* ---------- stage, menu */

.stage { background: transparent; }

.menu { gap: 3px; counter-reset: ce-menu; }
.menu > a {
  position: relative;
  padding: 11px 18px 11px 30px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  color: var(--ce-text);
  font: 600 17px/1.25 var(--ce-display);
  letter-spacing: 0.12em;
  transition: color 0.15s, background-color 0.15s;
}
.menu > a::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  background: var(--ce-line-2);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: background-color 0.15s;
}
.menu > a:hover, .menu > a:focus-visible, .menu > a.menu-current {
  border: 0;
  background: linear-gradient(90deg, color-mix(in oklab, var(--ce-cyan) 16%, transparent), transparent 85%);
  color: #fff;
  text-shadow: none;
}
.menu > a:hover::before, .menu > a:focus-visible::before, .menu > a.menu-current::before { background: var(--ce-cyan); }
.menu > a.menu-current { box-shadow: inset 2px 0 0 var(--ce-cyan); }
.menu > a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ce-cyan); }
.menu-note { font: 400 12px/1.6 var(--ce-mono); letter-spacing: 0.02em; color: var(--ce-muted); }

/* ---------- screens: numbered, cut glass panels lit from the top-left */

.screens { counter-reset: ce-screen; }
.screen {
  position: relative;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(191, 234, 255, 0.4), rgba(191, 234, 255, 0.12) 30%, rgba(191, 234, 255, 0.05) 72%) 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 5rem), var(--ce-glass);
  clip-path: polygon(var(--ce-cut) 0, 100% 0, 100% calc(100% - var(--ce-cut)), calc(100% - var(--ce-cut)) 100%, 0 100%, 0 var(--ce-cut));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  animation: ce-in 0.3s ease-out both;
}
.screen:nth-child(2) { animation-delay: 0.04s; }
.screen:nth-child(3) { animation-delay: 0.08s; }
.screen:nth-child(4) { animation-delay: 0.12s; }
.screen h2 {
  position: relative;
  margin: 0;
  padding: 22px 26px 12px;
  font: 600 22px/1.05 var(--ce-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-bright);
  text-shadow: none;
  /* a 2px accent bar at the title's left edge */
  background: linear-gradient(var(--ce-cyan), var(--ce-cyan)) 0 23px / 2px 20px no-repeat;
}
.screen h2::before {
  counter-increment: ce-screen;
  content: counter(ce-screen, decimal-leading-zero) " / ";
  color: var(--ce-cyan);
  font-family: var(--ce-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  vertical-align: 3px;
}
.screen h2::after { content: ""; display: block; margin-top: 12px; height: 1px; background: linear-gradient(to right, var(--ce-cyan), var(--ce-line) 35%, transparent); }
#play-panel { --ce-glass: rgba(10, 26, 38, 0.66); }

.help { color: var(--ce-text); }
.help.note { font-family: var(--ce-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ce-muted); }

/* rows: cut strips of glass, a semantic tick down the left when they carry news */
.row, .checks li, .servers li {
  border: 0;
  border-radius: 0;
  background: var(--row);
  box-shadow: inset 0 0 0 1px var(--ce-line);
  clip-path: polygon(var(--ce-cut-sm) 0, 100% 0, 100% calc(100% - var(--ce-cut-sm)), calc(100% - var(--ce-cut-sm)) 100%, 0 100%, 0 var(--ce-cut-sm));
  transition: box-shadow 0.15s, background-color 0.15s;
}
.row:hover, .servers li:hover { box-shadow: inset 0 0 0 1px var(--ce-line-2); }
.row.selected { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ce-cyan) 70%, transparent), inset 2px 0 0 var(--ce-cyan); background: color-mix(in oklab, var(--ce-cyan) 8%, transparent); }
.row-label { font: 600 13px/1.3 var(--ce-display); letter-spacing: 0.14em; color: var(--ce-text); }
.row-value { font: 400 12px/1.4 var(--ce-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ce-bright); }
.row.good { box-shadow: inset 0 0 0 1px var(--ce-line), inset 2px 0 0 var(--ce-good); }
.row.good .row-value { color: var(--ce-good); text-shadow: none; }
.row.bad { box-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.45), inset 2px 0 0 var(--ce-amber); background: var(--bad-ground); }
.row.bad .row-label { color: var(--ce-amber); }
.row-value:is(:empty)::after { content: "▮"; color: var(--ce-cyan); animation: ce-cursor 1s steps(2) infinite; }

.checks li { font: 600 14px/1.3 var(--ce-display); letter-spacing: 0.08em; color: var(--ce-text); }
.checks li:not(.good):not(.bad):not(.warn)::after { content: "▮"; color: var(--ce-cyan); animation: ce-cursor 1s steps(2) infinite; }
.checks li::after { font: 400 11px/1 var(--ce-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.checks li.good { box-shadow: inset 0 0 0 1px var(--ce-line), inset 2px 0 0 var(--ce-good); }
.checks li.good::after { content: "OK"; color: var(--ce-good); text-shadow: none; }
.checks li.bad { box-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.45), inset 2px 0 0 var(--ce-amber); background: var(--bad-ground); color: var(--ce-amber); }
.checks li.bad::after { content: "MISSING"; color: var(--ce-amber); }
.checks li.warn::after { content: "MAYBE"; color: var(--ce-muted); }
.checks .detail { font-family: var(--ce-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ce-text); }

.servers li.dedicated { box-shadow: inset 0 0 0 1px var(--ce-line), inset 2px 0 0 var(--ce-cyan); }
.servers .name { font: 600 15px/1.3 var(--ce-display); letter-spacing: 0.08em; color: var(--ce-bright); }
.servers .detail { font: 400 12px/1.5 var(--ce-mono); color: var(--ce-muted); }

.button-bar { background: rgba(0, 0, 0, 0.2); border-top: 1px solid var(--ce-line); }
.button-bar.links a { font-family: var(--ce-mono); font-size: 11px; letter-spacing: 0.14em; }

/* progress: a thin track, a bright leading edge */
.progress-bar { height: 4px; border-radius: 0; background: rgba(191, 234, 255, 0.1); box-shadow: none; }
.progress-bar > div {
  position: relative;
  border-radius: 0;
  background: linear-gradient(90deg, color-mix(in oklab, var(--ce-cyan) 25%, transparent), var(--ce-cyan));
  box-shadow: none;
}
.progress-bar > div::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #ecfaff; box-shadow: 0 0 6px var(--ce-cyan); }

/*
 * Buttons: cut glass on two corners at 44px; primary (and Play) the cyan, its ink dark; danger red. The edge
 * lights up on hover and a thin bar of light sweeps across once; pressed sinks 1px; focus is a 2px ring along
 * the cuts; disabled is at 40%.
 */
button, .button {
  --ce-lit: rgba(191, 234, 255, 0.4);
  --ce-fill: rgba(20, 34, 54, 0.62);
  position: relative;
  isolation: isolate;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--ce-lit), color-mix(in oklab, var(--ce-lit) 32%, transparent) 35%, rgba(191, 234, 255, 0.06)) 1;
  border-radius: 0;
  clip-path: polygon(var(--ce-cut-sm) 0, 100% 0, 100% calc(100% - var(--ce-cut-sm)), calc(100% - var(--ce-cut-sm)) 100%, 0 100%, 0 var(--ce-cut-sm));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%), var(--ce-fill);
  color: var(--ce-bright);
  font: 600 14px/1 var(--ce-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: --ce-lit 0.18s ease-out, color 0.15s, transform 0.08s;
}
button::before, .button::before { content: none; }
button::after, .button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.26) 50%, transparent 60%);
  transform: translateX(-120%);
}
button:hover:not(:disabled), .button:hover { --ce-lit: color-mix(in oklab, var(--ce-cyan) 85%, #ffffff); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%), var(--ce-fill); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
button:hover:not(:disabled)::after, .button:hover::after { transform: translateX(120%); transition: transform 0.24s ease-out; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, .button:focus-within { outline: none; --ce-lit: var(--ce-cyan); border-image: linear-gradient(var(--ce-cyan), var(--ce-cyan)) 1; box-shadow: inset 0 0 0 1px var(--ce-cyan); }
button:disabled, .button.disabled { opacity: 0.4; box-shadow: none; }
button:disabled::after { display: none; }
button.primary, button.play:not(:disabled) {
  --ce-lit: color-mix(in oklab, var(--ce-cyan) 35%, #ffffff);
  --ce-fill: var(--ce-cyan);
  background: linear-gradient(180deg, color-mix(in oklab, var(--ce-cyan) 50%, #ffffff), var(--ce-cyan) 52%, color-mix(in oklab, var(--ce-cyan) 80%, #000000));
  color: #04121c;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
button.primary:hover:not(:disabled), button.play:not(:disabled):hover { --ce-lit: #ffffff; background: linear-gradient(180deg, color-mix(in oklab, var(--ce-cyan) 50%, #ffffff), var(--ce-cyan) 52%, color-mix(in oklab, var(--ce-cyan) 80%, #000000)); color: #04121c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
button.primary::after, button.play::after { background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%); }
button.primary:focus-visible, button.play:focus-visible { box-shadow: inset 0 0 0 1px var(--ce-cyan), inset 0 0 0 3px var(--ce-ink); }
button.play { min-height: 56px; min-width: 260px; font-size: 22px; letter-spacing: 0.2em; }
button.danger { --ce-lit: rgba(255, 93, 108, 0.6); --ce-fill: rgba(255, 93, 108, 0.1); color: #ffb8c0; }
button.danger:hover:not(:disabled) { --ce-lit: var(--ce-red); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%), var(--ce-fill); color: #fff; }

/* ---------- dialogs: cut glass, hairline-lit */

.sheet { background: rgba(3, 6, 11, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-body {
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--ce-cyan), rgba(191, 234, 255, 0.12) 35%, rgba(191, 234, 255, 0.05)) 1;
  border-radius: 0;
  background: var(--ce-glass-2);
  box-shadow: none;
  clip-path: polygon(var(--ce-cut) 0, 100% 0, 100% calc(100% - var(--ce-cut)), calc(100% - var(--ce-cut)) 100%, 0 100%, 0 var(--ce-cut));
}
.sheet h2 {
  border-bottom: 1px solid var(--ce-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  color: var(--ce-bright);
  font: 600 22px/1.05 var(--ce-display);
  letter-spacing: 0.06em;
  text-shadow: none;
}
.sheet pre { font-family: var(--ce-mono); font-size: 12px; }

/* ---------- starting screen and footer */

.starting { background: var(--ce-ink); font-family: var(--ce-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce-cyan); }

.ce-foot { max-width: 1180px; margin: 0 auto; padding: 20px 32px 36px; border-top: 1px solid var(--ce-line); text-align: center; font: 400 11px/1.6 var(--ce-mono); letter-spacing: 0.08em; color: var(--ce-muted); }
.ce-foot a { color: var(--ce-text); }

/* ---------- motion: quick, and still when asked */

@keyframes ce-rotate { to { transform: rotate(360deg); } }
@keyframes ce-blip { 0% { opacity: 0; } 4% { opacity: 1; } 60% { opacity: 0.25; } 100% { opacity: 0; } }
@keyframes ce-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ce-cursor { to { opacity: 0; } }
@keyframes ce-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ce-tracker .ce-sweep, .ce-tracker .ce-blip, .ce-dot, .screen, .row-value::after, .checks li::after { animation: none !important; }
  .screen { opacity: 1; }
  button::after, .button::after { transition: none !important; transform: translateX(-120%) !important; }
}

@media (max-width: 939px) {
  .masthead-inner { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto minmax(7.25rem, auto); }
  .masthead-inner > .ce-readout { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, auto minmax(0, 1fr)); align-self: start; }
  .masthead h1 { font-size: 40px; }
}
@media (max-width: 720px) {
  .ce-bar-inner { padding: 6px 16px; }
  .ce-links a { padding: 10px 8px 12px; font-size: 13px; }
  .ce-links a::after { bottom: 4px; left: 8px; right: 8px; }
  .ce-hud { display: none; }
  .ce-tracker { width: 84px; height: 84px; }
  .ce-tracker img { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .masthead-inner { grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto minmax(11.25rem, auto); padding-left: 16px; padding-right: 16px; }
  .masthead h1 { font-size: 32px; }
  .masthead-inner > .ce-readout { grid-template-columns: auto minmax(0, 1fr); }
  .screen h2 { font-size: 20px; }
  button.play { min-width: 0; width: 100%; }
}

/* the controller aim-assist and connection privacy selectors on the Settings panel (customedition.js) */
#ce-aim-assist, #ce-relay {
  font: 400 12px/1.4 var(--ce-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ce-bright); background: rgba(5, 8, 14, 0.7); border: 1px solid var(--ce-line-2); border-radius: 0;
  padding: 6px 10px; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
#ce-aim-assist:focus-visible, #ce-relay:focus-visible { outline: none; border-color: var(--ce-cyan); box-shadow: inset 0 0 0 1px var(--ce-cyan); }
.ce-aim-help, .ce-relay-help { margin-top: 8px; }

/* the Play button while the menus are being checked or copied into the browser's storage */
#play.ce-held { cursor: progress; opacity: 0.55; filter: saturate(0.4); pointer-events: none; animation: ce-held-pulse 1.6s ease-in-out infinite; }
@keyframes ce-held-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.8; } }

/* keyboard focus on the site's links in the bar, the readout and the footer */
.ce-links a:focus-visible, .ce-brand:focus-visible, .ce-foot a:focus-visible, .ce-readout a:focus-visible, .help a:focus-visible { outline: 2px solid var(--ce-cyan); outline-offset: 2px; }

/*
 * The site's default design (resources/css/designs.css: sleek's colours on the rail layout, with a bar along the
 * bottom): on a laptop's or a tablet's screen the site bar becomes a rail on the screen's left edge, and its uplink
 * light and clock a status bar along the bottom of the page; on a phone the site's links are tabs along the bottom.
 * A page marked with one of the other designs (below) leaves all this to that design.
 */
html:not([data-ce-design]) { --ce-rail: 12.5rem; --ce-status: 40px; }
@media (min-width: 768px) {
  html:not([data-ce-design]) .ce-bar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--ce-rail); border-bottom: 0; border-right: 1px solid var(--ce-line); background: rgba(5, 8, 14, 0.95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:not([data-ce-design]) .ce-bar::after { content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: min(20rem, 45%); background: linear-gradient(180deg, var(--ce-cyan), transparent); }
  html:not([data-ce-design]) .ce-bar-inner { height: 100%; max-width: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 20px 12px 16px; }
  html:not([data-ce-design]) .ce-brand { margin: 0 0 18px; padding: 4px 8px; }
  html:not([data-ce-design]) .ce-brand span { font-size: 18px; }
  html:not([data-ce-design]) .ce-links { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  html:not([data-ce-design]) .ce-links a { padding: 13px 12px; font-size: 14px; }
  html:not([data-ce-design]) .ce-links a::after { inset: 8px auto 8px -12px; width: 2px; height: auto; transform: scaleY(0); }
  html:not([data-ce-design]) .ce-links a:hover { background: color-mix(in oklab, var(--ce-cyan) 7%, transparent); }
  html:not([data-ce-design]) .ce-links a.ce-here { background: linear-gradient(90deg, color-mix(in oklab, var(--ce-cyan) 16%, transparent), transparent 85%); }
  html:not([data-ce-design]) .ce-links a.ce-here::after { transform: none; }
  html:not([data-ce-design]) .ce-hud { position: fixed; right: 0; bottom: 0; left: var(--ce-rail); z-index: 30; min-height: var(--ce-status); padding: 0 32px; border-left: 0; border-top: 1px solid var(--ce-line); background: rgba(5, 8, 14, 0.9); }
  html:not([data-ce-design]) .ce-hud::before { content: ""; position: absolute; top: -1px; left: 0; width: min(28rem, 60%); height: 1px; background: linear-gradient(90deg, var(--ce-cyan), transparent); }
  html:not([data-ce-design]) body:has(#launcher:not([hidden])) { padding-left: var(--ce-rail); padding-bottom: var(--ce-status); }
}
@media (min-width: 1280px) { html:not([data-ce-design]) { --ce-rail: 15rem; } }
@media (max-width: 767px) {
  html:not([data-ce-design]) .ce-bar { position: fixed; inset: auto 0 0 0; z-index: 30; border-bottom: 0; border-top: 1px solid var(--ce-line-2); background: rgba(5, 8, 14, 0.96); }
  html:not([data-ce-design]) .ce-bar-inner { min-height: 0; padding: 0 0 env(safe-area-inset-bottom); gap: 0; }
  html:not([data-ce-design]) :is(.ce-brand, .ce-hud) { display: none; }
  html:not([data-ce-design]) .ce-links { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html:not([data-ce-design]) .ce-links a { padding: 20px 2px 18px; text-align: center; font-size: 11px; letter-spacing: 0.06em; }
  html:not([data-ce-design]) .ce-links a::after { inset: 0 22% auto; width: auto; height: 2px; transform: scaleX(0); }
  html:not([data-ce-design]) .ce-links a.ce-here::after { transform: none; }
  html:not([data-ce-design]) body:has(#launcher:not([hidden])) { padding-bottom: 64px; }
}
html:not([data-ce-design]) :is(.layout, .masthead-inner, .site-footer, .ce-foot) { max-width: none; margin-inline: 0; padding-inline: clamp(16px, 2.8vw, 60px); }
html:not([data-ce-design]) .screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 38rem), 1fr)); align-items: start; }

/*
 * The default look's finish, as the site's pages have it (resources/css/hud.css): Orbitron for the wordmark and the
 * title, Exo 2 for the rest; brighter lit edges, glowing accents and a bloom on the title and the readout's figures;
 * a hairline grid, corner brackets and tick marks; a living background, and light sweeping across what the pointer
 * or the keyboard is on. The motion stops under prefers-reduced-motion, with the site's effects switched off
 * (<html data-fx="off">, customedition.js), and all of it, background and all, while the game runs. The background
 * moves by transform alone, in steps; the panels over it are not blurred (their glass is fuller), so it costs no blur.
 */
html:not([data-ce-design]) {
  --ce-display: "Exo 2", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ce-body: "Exo 2", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ce-title: "Orbitron", "Exo 2", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ce-glass: rgba(13, 23, 38, 0.86);
  --ce-glass-2: rgba(10, 17, 29, 0.94);
  --ce-bracket: color-mix(in oklab, var(--ce-cyan) 65%, transparent);
  --ce-bloom: 0 0 1px rgba(255, 255, 255, 0.35), 0 0 18px color-mix(in oklab, var(--ce-cyan) 34%, transparent), 0 0 44px color-mix(in oklab, var(--ce-cyan) 16%, transparent);
  --ce-brackets:
    linear-gradient(var(--ce-bracket), var(--ce-bracket)) right 5px top 5px / 14px 1px no-repeat,
    linear-gradient(var(--ce-bracket), var(--ce-bracket)) right 5px top 5px / 1px 14px no-repeat,
    linear-gradient(var(--ce-bracket), var(--ce-bracket)) left 5px bottom 5px / 14px 1px no-repeat,
    linear-gradient(var(--ce-bracket), var(--ce-bracket)) left 5px bottom 5px / 1px 14px no-repeat;
}
html:not([data-ce-design]) :is(.ce-brand span, .masthead h1, .starting) { font-family: var(--ce-title); }
html:not([data-ce-design]) .ce-brand span { font-weight: 800; font-size: 17px; letter-spacing: 0.05em; text-shadow: var(--ce-bloom); }
html:not([data-ce-design]) .ce-brand img { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--ce-cyan) 30%, transparent)); }
html:not([data-ce-design]) .masthead h1 { font-weight: 800; font-size: clamp(23px, 0.9rem + 2.6vw, 60px); line-height: 1.04; letter-spacing: 0.015em; overflow-wrap: anywhere; text-shadow: var(--ce-bloom); }
@media (min-width: 768px) { html:not([data-ce-design]) .ce-links a { font-size: 13.5px; letter-spacing: 0.11em; } }
@media (max-width: 767px) { html:not([data-ce-design]) .ce-links a { font-size: 10px; letter-spacing: 0.04em; } }
html:not([data-ce-design]) .ce-links a.ce-here { text-shadow: 0 0 14px color-mix(in oklab, var(--ce-cyan) 30%, transparent); }
html:not([data-ce-design]) .ce-links a.ce-here::after { box-shadow: 0 0 10px var(--ce-cyan); }
html:not([data-ce-design]) .menu > a { font-size: 16px; letter-spacing: 0.1em; overflow: hidden; }
html:not([data-ce-design]) .menu > a.menu-current { text-shadow: 0 0 14px color-mix(in oklab, var(--ce-cyan) 30%, transparent); }
html:not([data-ce-design]) .menu > a:is(:hover, :focus-visible, .menu-current)::before { box-shadow: 0 0 8px var(--ce-cyan); }
html:not([data-ce-design]) :is(button, .button) { font-size: 13.5px; letter-spacing: 0.1em; }
html:not([data-ce-design]) button.play { font-size: 20px; letter-spacing: 0.18em; }
html:not([data-ce-design]) :is(button.primary, button.play:not(:disabled)) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 18px rgba(255, 255, 255, 0.18); }
html:not([data-ce-design]) button:focus-visible::after { transform: translateX(120%); transition: transform 0.5s ease-out; }

/* (the ground: lit and drifting, a hairline grid over it, a scan passing down now and then) */
html:not([data-ce-design]) body { isolation: isolate; background: none; }
html:not([data-ce-design]) body::before {
  content: ""; position: fixed; inset: -14vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42vmax 26vmax at 22% 10%, color-mix(in oklab, var(--ce-cyan) 17%, transparent), transparent 70%),
    radial-gradient(34vmax 28vmax at 86% 20%, rgba(70, 96, 255, 0.11), transparent 70%),
    radial-gradient(52vmax 30vmax at 58% 104%, color-mix(in oklab, var(--ce-cyan) 8%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ce-ink-2), var(--ce-ink) 55%);
  animation: ce-drift 64s steps(640) infinite alternate;
}
html:not([data-ce-design]) body::after {
  content: ""; position: fixed; inset: -56px 0 0 -56px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(191, 234, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(191, 234, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(90% 75% at 35% 0%, #000 10%, transparent 80%);
  mask-image: radial-gradient(90% 75% at 35% 0%, #000 10%, transparent 80%);
  animation: ce-grid 36s steps(360) infinite;
}
html:not([data-ce-design]) .ce-sweep-band {
  display: block; position: fixed; top: 0; right: 0; left: 0; z-index: -1; height: 5rem; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--ce-cyan) 5%, transparent) 85%, color-mix(in oklab, var(--ce-cyan) 30%, transparent) 99%, transparent);
  transform: translateY(-6rem);
  animation: ce-scan 15s linear infinite;
}

/* (glass: fuller, lit from the top left, a bracket at each square corner) */
html:not([data-ce-design]) :is(.screen, .ce-readout) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-ce-design]) .screen {
  border-image: linear-gradient(135deg, rgba(191, 234, 255, 0.6), rgba(191, 234, 255, 0.16) 30%, rgba(191, 234, 255, 0.06) 72%) 1;
  background:
    var(--ce-brackets),
    radial-gradient(120% 85% at 0% 0%, color-mix(in oklab, var(--ce-cyan) 8%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 5rem),
    var(--ce-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -40px 60px -40px rgba(0, 0, 0, 0.5);
}
html:not([data-ce-design]) #play-panel { --ce-glass: rgba(10, 28, 42, 0.88); }
html:not([data-ce-design]) .screen h2 { font-weight: 700; letter-spacing: 0.08em; }
html:not([data-ce-design]) .screen h2::after { box-shadow: 0 0 8px color-mix(in oklab, var(--ce-cyan) 50%, transparent); }
html:not([data-ce-design]) .ce-readout {
  border-image: linear-gradient(135deg, rgba(191, 234, 255, 0.6), rgba(191, 234, 255, 0.16) 35%, rgba(191, 234, 255, 0.06)) 1;
  background: var(--ce-brackets), linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 60%), var(--ce-glass-2);
}
html:not([data-ce-design]) .ce-readout dd { text-shadow: 0 0 12px color-mix(in oklab, var(--ce-cyan) 24%, transparent); }
html:not([data-ce-design]) .ce-tracker .ce-ring-outer { filter: drop-shadow(0 0 4px var(--ce-cyan)); }

/* (the masthead's line: lit at its start, ticked, glowing) */
html:not([data-ce-design]) .masthead::after {
  bottom: -6px; width: min(40rem, 72%); height: 6px;
  background:
    linear-gradient(90deg, var(--ce-cyan), color-mix(in oklab, var(--ce-cyan) 35%, transparent) 45%, transparent) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--ce-cyan) 75%, transparent) 0 1px, transparent 1px 12px) 0 1px / 100% 4px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent);
  mask-image: linear-gradient(90deg, #000 35%, transparent);
  filter: drop-shadow(0 0 4px var(--ce-cyan));
}
html:not([data-ce-design]) .masthead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(191, 234, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191, 234, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 120% at 10% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 120% at 10% 0%, #000, transparent 75%);
}

/* (rows and the menu: a sweep of light across what the pointer or the keyboard is on) */
html:not([data-ce-design]) :is(.row, .servers li) { position: relative; }
html:not([data-ce-design]) :is(.menu > a, .row, .servers li)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.07) 47%, color-mix(in oklab, var(--ce-cyan) 20%, transparent) 50%, rgba(255, 255, 255, 0.07) 53%, transparent 62%);
  transform: translateX(-100%); opacity: 0;
}
html:not([data-ce-design]) :is(.menu > a, .row, .servers li):is(:hover, :focus-visible, :focus-within)::after { transform: translateX(100%); opacity: 1; transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s; }
html:not([data-ce-design]) .progress-bar > div::after { box-shadow: 0 0 10px var(--ce-cyan), 0 0 3px #ffffff; }

/* (the rail and the status bar: deeper glass, their lines of light glowing) */
@media (min-width: 768px) {
  html:not([data-ce-design]) .ce-bar { background: linear-gradient(180deg, rgba(9, 15, 25, 0.95), rgba(5, 8, 14, 0.97)); box-shadow: 18px 0 40px -18px rgba(0, 0, 0, 0.7); }
  html:not([data-ce-design]) .ce-bar::after { box-shadow: 0 0 10px var(--ce-cyan); }
  html:not([data-ce-design]) .ce-hud { background: linear-gradient(180deg, rgba(9, 15, 25, 0.86), rgba(5, 8, 14, 0.92)); }
  html:not([data-ce-design]) .ce-hud::before { box-shadow: 0 0 10px var(--ce-cyan); }
}

/* (still: on a phone the scan and the grid's drift; with the effects off, or less motion asked, all of it) */
@media (max-width: 767px) {
  html:not([data-ce-design]) body::after { animation: none; }
  html:not([data-ce-design]) .ce-sweep-band { display: none; }
}
html:not([data-ce-design])[data-fx='light'] .ce-sweep-band { display: none; }
html:not([data-ce-design])[data-fx='off'] body::before, html:not([data-ce-design])[data-fx='off'] body::after { animation: none; }
html:not([data-ce-design])[data-fx='off'] .ce-sweep-band, html:not([data-ce-design])[data-fx='off'] :is(.menu > a, .row, .servers li)::after { display: none; }
/* (the game running: the launcher hidden, the canvas the whole window; nothing of ours drawn or moving behind it) */
html:not([data-ce-design]) body:has(#launcher[hidden])::before, html:not([data-ce-design]) body:has(#launcher[hidden])::after, html:not([data-ce-design]) body:has(#launcher[hidden]) .ce-sweep-band { display: none; }
@keyframes ce-drift { from { transform: translate3d(-1.5vmax, -1vmax, 0) scale(1); } to { transform: translate3d(1.5vmax, 1.25vmax, 0) scale(1.05); } }
@keyframes ce-grid { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(56px, 56px, 0); } }
@keyframes ce-scan { 0% { transform: translateY(-6rem); } 40%, 100% { transform: translateY(calc(100vh + 1rem)); } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-ce-design]) body::before, html:not([data-ce-design]) body::after { animation: none; }
  html:not([data-ce-design]) .ce-sweep-band { display: none; }
  html:not([data-ce-design]) :is(.menu > a, .row, .servers li)::after { display: none; }
  html:not([data-ce-design]) button:focus-visible::after { transition: none; }
}

/*
 * The site's other designs (resources/css/designs.css), on this page. A local copy of the site leaves the design it
 * shows in this browser's storage and customedition.js marks the page with it (<html data-ce-design="…">); the
 * public site never does, so everything above stays as it is there. Each design brings its colours and shapes, the
 * page's full width, and its own place for the site's links: a slim bar of chips (dashboard), a rail on the screen's
 * left edge (rail), a bar floating at the bottom centre (command), a Menu button opening a full-screen menu (split).
 * On a phone the rail and the command bar are bars of tabs along the bottom.
 */

html[data-ce-design] {
  --ce-cut: 0px;
  --ce-cut-sm: 0px;
  --ce-gutter: clamp(16px, 2.8vw, 60px);
}
html[data-ce-design] :is(.ce-readout, .menu > a, .screen, .row, .checks li, .servers li, button, .button, .sheet-body, #ce-aim-assist, #ce-relay, .ce-tracker img) { clip-path: none; border-image: none; }
html[data-ce-design] :is(button, .button)::after, html[data-ce-design] .masthead::after { display: none; }
html[data-ce-design] :is(.layout, .masthead-inner, .site-footer, .ce-foot) { max-width: none; margin-inline: 0; padding-inline: var(--ce-gutter); }
html[data-ce-design] .ce-bar-inner { max-width: none; padding-inline: var(--ce-gutter); }
html[data-ce-design] .screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 38rem), 1fr)); align-items: start; }
html[data-ce-design] .stage { background: transparent; }
html[data-ce-design] .masthead h1 { text-wrap: balance; overflow-wrap: break-word; }

/* ---------- dashboard: charcoal, warm white, orange; rounded tiles, no hairlines, a soft inner glow for focus */

html[data-ce-design~='dashboard'] {
  --ce-ink: #0e0f12; --ce-ink-2: #121418; --ce-glass: #16181d; --ce-glass-2: #1c1f25;
  --ce-cyan: #ff7a1a; --ce-cyan-soft: #ffb47a; --ce-good: #4fd18b; --ce-amber: #ffc857; --ce-red: #ff6b6b;
  --ce-text: #d2cbc1; --ce-muted: #a39d94; --ce-bright: #f5f0e8;
  --ce-line: rgba(255, 240, 225, 0.06); --ce-line-2: rgba(255, 240, 225, 0.14);
  --ce-display: "Noto Sans", "Trebuchet MS", Arial, sans-serif;
  --row: #1c1f25; --navy: #16181d; --navy-deep: #0e0f12;
  --ce-glow: inset 0 0 0 2px #ff7a1a, inset 0 0 22px rgba(255, 122, 26, 0.34);
}
html[data-ce-design~='dashboard'] body { background: radial-gradient(1400px 700px at 88% -18%, rgba(255, 122, 26, 0.09), transparent 62%), #0e0f12; }
html[data-ce-design~='dashboard'] .ce-bar { border-bottom: 0; background: rgba(14, 15, 18, 0.88); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
html[data-ce-design~='dashboard'] .ce-bar-inner { min-height: 56px; }
html[data-ce-design~='dashboard'] .ce-brand span { font: 700 18px/1 var(--ce-display); letter-spacing: 0; text-transform: none; }
html[data-ce-design~='dashboard'] .ce-links { gap: 6px; }
html[data-ce-design~='dashboard'] .ce-links a { padding: 10px 14px; border-radius: 999px; background: #1c1f25; font: 700 13px/1 var(--ce-display); letter-spacing: 0.01em; text-transform: none; }
html[data-ce-design~='dashboard'] .ce-links a::after { display: none; }
html[data-ce-design~='dashboard'] .ce-links a:hover { background: #262a32; }
html[data-ce-design~='dashboard'] .ce-links a.ce-here { background: #ff7a1a; color: #1f0d00; }
html[data-ce-design~='dashboard'] .ce-hud { border-left: 0; }
html[data-ce-design~='dashboard'] .masthead { border-bottom: 0; background: none; }
html[data-ce-design~='dashboard'] .masthead-inner { margin: 16px var(--ce-gutter) 0; padding: clamp(20px, 3vw, 44px); border-radius: 14px; background: radial-gradient(120% 140% at 100% 0%, rgba(255, 122, 26, 0.16), transparent 55%), linear-gradient(160deg, #1d2027, #16181d 70%); }
html[data-ce-design~='dashboard'] .masthead h1 { font: 700 clamp(28px, 4vw, 60px)/1.02 var(--ce-display); letter-spacing: -0.03em; text-transform: none; }
html[data-ce-design~='dashboard'] .tagline::before { content: none; }
html[data-ce-design~='dashboard'] .ce-readout { border: 0; border-radius: 14px; background: rgba(14, 15, 18, 0.6); }
html[data-ce-design~='dashboard'] .menu > a { border: 0; border-radius: 12px; background: #1c1f25; font-family: var(--ce-display); letter-spacing: 0.01em; text-transform: none; }
html[data-ce-design~='dashboard'] .menu > a.menu-current { background: linear-gradient(150deg, rgba(255, 122, 26, 0.26), rgba(255, 122, 26, 0.08) 70%), #1c1f25; box-shadow: none; }
html[data-ce-design~='dashboard'] .menu > a:focus-visible { box-shadow: var(--ce-glow); }
html[data-ce-design~='dashboard'] .screen { border: 0; border-radius: 14px; background: #16181d; box-shadow: none; }
html[data-ce-design~='dashboard'] .screen h2 { font-family: var(--ce-display); letter-spacing: -0.01em; text-transform: none; }
html[data-ce-design~='dashboard'] .screen h2::after { display: none; }
html[data-ce-design~='dashboard'] :is(.row, .checks li, .servers li) { border: 0; border-radius: 12px; background: #1c1f25; }
html[data-ce-design~='dashboard'] .button-bar { border-top: 0; background: transparent; }
html[data-ce-design~='dashboard'] :is(button, .button) { border: 0; border-radius: 12px; background: #262a32; font-family: var(--ce-display); letter-spacing: 0.01em; text-transform: none; box-shadow: none; }
html[data-ce-design~='dashboard'] :is(button, .button):focus-visible { box-shadow: var(--ce-glow); }
html[data-ce-design~='dashboard'] :is(button.primary, button.play:not(:disabled)) { background: #ff7a1a; color: #1f0d00; }
html[data-ce-design~='dashboard'] button.play { border-radius: 14px; letter-spacing: 0.04em; }
html[data-ce-design~='dashboard'] :is(.sheet-body, #ce-aim-assist, #ce-relay) { border-radius: 14px; }

/* ---------- rail: blue-black, cool grey, mint; square edges, a 2px bar on the active item, the links on a rail */

html[data-ce-design~='rail'] {
  --ce-ink: #0b1016; --ce-ink-2: #0e141c; --ce-glass: #0f151d; --ce-glass-2: #121a24;
  --ce-cyan: #2ee6a8; --ce-cyan-soft: #8ff0cf; --ce-good: #5fd793; --ce-amber: #f5c451; --ce-red: #ff6b7a;
  --ce-text: #b4bfcb; --ce-muted: #8b98a7; --ce-bright: #e6ecf2;
  --ce-line: #1d2734; --ce-line-2: #2a3644;
  --row: transparent; --navy: #0f151d; --navy-deep: #0b1016;
  --ce-rail: 13.5rem;
}
html[data-ce-design~='rail'] body { background: #0b1016; }
html[data-ce-design~='rail'] .masthead { background: none; }
html[data-ce-design~='rail'] .masthead h1 { letter-spacing: 0; text-transform: none; }
html[data-ce-design~='rail'] .ce-readout { border: 1px solid #1d2734; background: #0f151d; }
html[data-ce-design~='rail'] .menu > a { border: 0; background: transparent; letter-spacing: 0.04em; text-transform: none; }
html[data-ce-design~='rail'] .menu > a.menu-current { background: #131c26; box-shadow: inset 2px 0 0 #2ee6a8; }
html[data-ce-design~='rail'] .screen { border: 1px solid #1d2734; background: #0f151d; }
html[data-ce-design~='rail'] .screen h2 { letter-spacing: 0.02em; text-transform: none; }
html[data-ce-design~='rail'] :is(.row, .checks li, .servers li) { border: 0; border-bottom: 1px solid #1d2734; }
html[data-ce-design~='rail'] :is(button, .button) { border: 1px solid #2a3644; background: transparent; box-shadow: none; letter-spacing: 0.06em; }
html[data-ce-design~='rail'] :is(button, .button):focus-visible { outline: 2px solid #2ee6a8; outline-offset: 2px; box-shadow: none; }
html[data-ce-design~='rail'] :is(button.primary, button.play:not(:disabled)) { border-color: #2ee6a8; background: #2ee6a8; color: #03140d; }
@media (min-width: 768px) {
  html[data-ce-design~='rail'] .ce-bar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--ce-rail); border-bottom: 0; border-right: 1px solid #18212c; background: #0e141c; }
  html[data-ce-design~='rail'] .ce-bar-inner { height: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 20px 12px 16px; }
  html[data-ce-design~='rail'] .ce-brand { margin: 0 0 16px; padding: 4px 12px; }
  html[data-ce-design~='rail'] .ce-brand span { font-size: 18px; }
  html[data-ce-design~='rail'] .ce-links { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  html[data-ce-design~='rail'] .ce-links a { padding: 13px 12px; font: 500 15px/1 var(--ce-body); letter-spacing: 0; text-transform: none; }
  html[data-ce-design~='rail'] .ce-links a::after { inset: 8px auto 8px -12px; width: 2px; height: auto; transform: scaleY(0); }
  html[data-ce-design~='rail'] .ce-links a:hover, html[data-ce-design~='rail'] .ce-links a.ce-here { background: #131c26; }
  html[data-ce-design~='rail'] .ce-links a.ce-here::after { transform: none; }
  html[data-ce-design~='rail'] .ce-hud { margin-top: auto; padding: 14px 12px 0; border-left: 0; border-top: 1px solid #18212c; flex-wrap: wrap; }
  html[data-ce-design~='rail'] body:has(#launcher:not([hidden])) { padding-left: var(--ce-rail); }
}

/* ---------- command: black, white, lime; no boxes, brackets and thin underlines, the links in a bar at the bottom */

html[data-ce-design~='command'] {
  --ce-ink: #050505; --ce-ink-2: #050505; --ce-glass: transparent; --ce-glass-2: #0a0a0a;
  --ce-cyan: #c6ff3d; --ce-cyan-soft: #dcff8f; --ce-good: #6be38f; --ce-amber: #ffc23d; --ce-red: #ff6464;
  --ce-text: #c8c8c8; --ce-muted: #9a9a9a; --ce-bright: #ffffff;
  --ce-line: rgba(255, 255, 255, 0.16); --ce-line-2: rgba(255, 255, 255, 0.42);
  --row: transparent; --navy: #050505; --navy-deep: #050505;
}
html[data-ce-design~='command'] body { background: #050505; }
html[data-ce-design~='command'] .masthead { background: none; }
html[data-ce-design~='command'] .masthead h1 { font: 700 clamp(30px, 6vw, 110px)/0.88 var(--ce-display); }
html[data-ce-design~='command'] .ce-readout { border: 0; border-left: 1px solid rgba(255, 255, 255, 0.42); background: none; }
html[data-ce-design~='command'] .menu > a { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: none; font-family: var(--ce-mono); font-size: 13px; }
html[data-ce-design~='command'] .menu > a.menu-current { box-shadow: none; color: #c6ff3d; }
html[data-ce-design~='command'] .menu > a::before { content: '['; width: auto; height: auto; clip-path: none; background: none; color: #c6ff3d; }
html[data-ce-design~='command'] .menu > a.menu-current::before { background: none; }
html[data-ce-design~='command'] .menu > a::after { content: ']'; margin-left: 0.5em; color: #c6ff3d; }
html[data-ce-design~='command'] .screen { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.42); background: none; padding-inline: 0; }
html[data-ce-design~='command'] .screen h2 { font: 400 13px/1.3 var(--ce-mono); letter-spacing: 0.2em; }
html[data-ce-design~='command'] .screen h2::after { display: none; }
html[data-ce-design~='command'] :is(.row, .checks li, .servers li) { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: none; box-shadow: none; }
html[data-ce-design~='command'] .button-bar { border-top: 0; background: none; padding-inline: 0; }
html[data-ce-design~='command'] :is(button, .button) { border: 0; background: none; box-shadow: none; font: 400 13px/1 var(--ce-mono); letter-spacing: 0.14em; color: #fff; }
html[data-ce-design~='command'] :is(button, .button)::before { content: '[ '; color: #c6ff3d; }
html[data-ce-design~='command'] :is(button, .button):not(.ce-menu-button)::after { content: ' ]'; display: inline; position: static; background: none; transform: none; color: #c6ff3d; }
html[data-ce-design~='command'] :is(button, .button):focus-visible { outline: 2px solid #c6ff3d; outline-offset: 2px; box-shadow: none; }
html[data-ce-design~='command'] :is(button.primary, button.play:not(:disabled)) { background: #c6ff3d; color: #0b1000; }
html[data-ce-design~='command'] :is(button.primary, button.play:not(:disabled))::before, html[data-ce-design~='command'] :is(button.primary, button.play:not(:disabled))::after { color: #0b1000; }
html[data-ce-design~='command'] .ce-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 30; width: max-content; max-width: calc(100vw - 32px); translate: -50% 0; border: 0;
  background:
    linear-gradient(#c6ff3d, #c6ff3d) left top / 12px 2px no-repeat, linear-gradient(#c6ff3d, #c6ff3d) left top / 2px 12px no-repeat,
    linear-gradient(#c6ff3d, #c6ff3d) right top / 12px 2px no-repeat, linear-gradient(#c6ff3d, #c6ff3d) right top / 2px 12px no-repeat,
    linear-gradient(#c6ff3d, #c6ff3d) left bottom / 12px 2px no-repeat, linear-gradient(#c6ff3d, #c6ff3d) left bottom / 2px 12px no-repeat,
    linear-gradient(#c6ff3d, #c6ff3d) right bottom / 12px 2px no-repeat, linear-gradient(#c6ff3d, #c6ff3d) right bottom / 2px 12px no-repeat,
    rgba(10, 10, 10, 0.94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 50px rgba(0, 0, 0, 0.75);
}
html[data-ce-design~='command'] .ce-bar-inner { min-height: 0; justify-content: center; gap: 4px 10px; padding: 6px 10px; }
html[data-ce-design~='command'] .ce-brand { margin: 0; }
html[data-ce-design~='command'] .ce-brand img { width: 26px; height: 26px; }
html[data-ce-design~='command'] .ce-brand span { display: none; }
html[data-ce-design~='command'] .ce-links a { padding: 12px 10px; font: 400 12px/1 var(--ce-mono); letter-spacing: 0.14em; }
html[data-ce-design~='command'] .ce-links a::after { left: 10px; right: 10px; bottom: 6px; height: 1px; }
html[data-ce-design~='command'] .ce-links a.ce-here { color: #c6ff3d; }
html[data-ce-design~='command'] body:has(#launcher:not([hidden])) { padding-bottom: 96px; }

/* ---------- split: violet-navy, cream, coral; big soft panels and pill buttons; the links behind Menu */

html[data-ce-design~='split'] {
  --ce-ink: #151229; --ce-ink-2: #18142f; --ce-glass: #1d1938; --ce-glass-2: #231e42;
  --ce-cyan: #ff6f61; --ce-cyan-soft: #ffb3aa; --ce-good: #7be0b0; --ce-amber: #ffd38a; --ce-red: #ff8a80;
  --ce-text: #ddd3c6; --ce-muted: #b5abc4; --ce-bright: #f6eee3;
  --ce-line: rgba(246, 238, 227, 0.08); --ce-line-2: rgba(246, 238, 227, 0.2);
  --ce-display: "Noto Sans", "Trebuchet MS", Arial, sans-serif;
  --row: #231e42; --navy: #1d1938; --navy-deep: #151229;
}
html[data-ce-design~='split'] body { background: radial-gradient(1200px 800px at 0% 0%, rgba(255, 111, 97, 0.07), transparent 60%), radial-gradient(1100px 900px at 100% 100%, rgba(132, 104, 255, 0.08), transparent 60%), #151229; }
html[data-ce-design~='split'] .ce-bar { border-bottom: 0; background: rgba(21, 18, 41, 0.86); }
html[data-ce-design~='split'] .ce-bar-inner { min-height: 76px; }
html[data-ce-design~='split'] .ce-brand span { font: 700 19px/1 var(--ce-display); letter-spacing: 0; text-transform: none; }
html[data-ce-design~='split'] .ce-links { display: none; }
html[data-ce-design~='split'] .ce-hud { border-left: 0; }
html[data-ce-design~='split'] .ce-menu-button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #231e42; font: 700 16px/1 var(--ce-display); letter-spacing: 0; text-transform: none; color: #f6eee3; }
html[data-ce-design~='split'] .ce-menu-button::before { content: none; }
html[data-ce-design~='split'] .ce-menu-button:focus-visible { outline: 3px solid #ff6f61; outline-offset: 3px; box-shadow: none; }
html[data-ce-design~='split'] dialog.ce-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 18px var(--ce-gutter) 48px; border: 0; background: #151229; color: #f6eee3; }
html[data-ce-design~='split'] dialog.ce-menu::backdrop { background: #151229; }
html[data-ce-design~='split'] .ce-menu-close { float: right; }
html[data-ce-design~='split'] .ce-menu-links { display: grid; gap: 4px; padding-top: 72px; }
html[data-ce-design~='split'] .ce-menu-links a { justify-self: start; padding: 4px; border-radius: 12px; font: 700 clamp(36px, 6vw, 76px)/1.05 var(--ce-display); letter-spacing: -0.035em; color: #f6eee3; text-decoration: none; }
html[data-ce-design~='split'] .ce-menu-links a:hover, html[data-ce-design~='split'] .ce-menu-links a.ce-here { color: #ff6f61; }
html[data-ce-design~='split'] .ce-menu-links a:focus-visible { outline: 3px solid #ff6f61; outline-offset: 2px; }
html:has(dialog.ce-menu[open]) { overflow: hidden; }
html[data-ce-design~='split'] .masthead { border-bottom: 0; background: none; }
html[data-ce-design~='split'] .masthead-inner { margin: 8px var(--ce-gutter) 0; padding: clamp(24px, 3vw, 52px); border-radius: 32px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 111, 97, 0.2), transparent 55%), linear-gradient(175deg, #2a2350, #1d1938 60%); }
html[data-ce-design~='split'] .masthead h1 { font: 700 clamp(28px, 4vw, 64px)/1 var(--ce-display); letter-spacing: -0.035em; text-transform: none; }
html[data-ce-design~='split'] .tagline::before { content: none; }
html[data-ce-design~='split'] .ce-readout { border: 0; border-radius: 22px; background: rgba(21, 18, 41, 0.45); }
html[data-ce-design~='split'] .menu > a { border: 0; border-radius: 999px; background: transparent; font-family: var(--ce-display); letter-spacing: 0; text-transform: none; }
html[data-ce-design~='split'] .menu > a.menu-current { background: #231e42; box-shadow: none; }
html[data-ce-design~='split'] .screen { border: 0; border-radius: 28px; background: #1d1938; }
html[data-ce-design~='split'] .screen h2 { font-family: var(--ce-display); letter-spacing: -0.015em; text-transform: none; }
html[data-ce-design~='split'] .screen h2::after { display: none; }
html[data-ce-design~='split'] :is(.row, .checks li, .servers li) { border: 0; border-radius: 18px; background: #231e42; }
html[data-ce-design~='split'] .button-bar { border-top: 0; background: transparent; }
html[data-ce-design~='split'] :is(button, .button) { border: 1.5px solid rgba(246, 238, 227, 0.38); border-radius: 999px; background: transparent; box-shadow: none; font-family: var(--ce-display); letter-spacing: 0; text-transform: none; }
html[data-ce-design~='split'] :is(button, .button):focus-visible { outline: 3px solid #ff6f61; outline-offset: 3px; box-shadow: none; }
html[data-ce-design~='split'] :is(button.primary, button.play:not(:disabled)) { border-color: #ff6f61; background: #ff6f61; color: #2a0b07; }
html[data-ce-design~='split'] :is(.sheet-body, #ce-aim-assist, #ce-relay) { border-radius: 20px; }

/* ---------- a phone: the rail and the command bar are bars of tabs along the bottom */

@media (max-width: 767px) {
  html[data-ce-design~='rail'] .ce-bar, html[data-ce-design~='command'] .ce-bar { position: fixed; inset: auto 0 0 0; z-index: 30; width: auto; max-width: none; translate: none; border: 0; border-top: 1px solid var(--ce-line-2); background: var(--ce-ink-2); box-shadow: none; }
  html[data-ce-design~='rail'] .ce-bar-inner, html[data-ce-design~='command'] .ce-bar-inner { min-height: 0; padding: 0 0 env(safe-area-inset-bottom); gap: 0; }
  html[data-ce-design~='rail'] :is(.ce-brand, .ce-hud), html[data-ce-design~='command'] :is(.ce-brand, .ce-hud) { display: none; }
  html[data-ce-design~='rail'] .ce-links, html[data-ce-design~='command'] .ce-links { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-ce-design~='rail'] .ce-links a, html[data-ce-design~='command'] .ce-links a { padding: 20px 2px 18px; text-align: center; font-size: 11px; letter-spacing: 0.04em; }
  html[data-ce-design~='rail'] .ce-links a::after, html[data-ce-design~='command'] .ce-links a::after { inset: 0 22% auto; width: auto; height: 2px; transform: scaleX(0); }
  html[data-ce-design~='rail'] .ce-links a.ce-here::after, html[data-ce-design~='command'] .ce-links a.ce-here::after { transform: none; }
  html[data-ce-design~='rail'] body:has(#launcher:not([hidden])), html[data-ce-design~='command'] body:has(#launcher:not([hidden])) { padding-bottom: 64px; }
  html[data-ce-design~='split'] .ce-hud { display: none; }
}