/* spwn.stream — one stylesheet for landing, viewer and error pages.
   Dark-first terminal identity; light mode via prefers-color-scheme. */

:root {
  --bg: #0a0d12;
  --bg2: #0d1117;
  --panel: #10151d;
  --panel2: #141a24;
  --border: #1e2734;
  --border-hi: #2c3949;
  --text: #e7eef6;
  --dim: #8b98a9;
  --faint: #5a6675;
  --acc: #a8f05a;          /* signal lime */
  --acc-dim: #6fae35;
  --acc-ink: #0c1200;      /* text on accent */
  --live: #43d17c;
  --ended: #93a1b3;
  --warn: #f0b429;
  --err: #f2555a;
  --link: #7fd0ff;

  /* ANSI palette (viewer) */
  --ansi-black: #3b4252;
  --ansi-red: #f2555a;
  --ansi-green: #43d17c;
  --ansi-yellow: #f0b429;
  --ansi-blue: #6aaef7;
  --ansi-magenta: #d97af1;
  --ansi-cyan: #56d4dd;
  --ansi-white: #d8dee9;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --bg2: #ffffff;
    --panel: #ffffff;
    --panel2: #f2f4f7;
    --border: #dde3ea;
    --border-hi: #c3ccd8;
    --text: #17202b;
    --dim: #5a6878;
    --faint: #8b98a9;
    --acc: #4d8f0f;
    --acc-dim: #6fae35;
    --acc-ink: #ffffff;
    --live: #178a4c;
    --ended: #64748b;
    --link: #0b69a3;
    --ansi-black: #4b5563;
    --ansi-white: #374151;
  }
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Let UA widgets (scrollbars, form controls, canvas) follow the active
     scheme — without this, dark pages get light scrollbars and a subtly
     different feel page-to-page. */
  color-scheme: dark light;
}
/* Explicit scrollbar skin so every page matches even where color-scheme
   support is patchy. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border-hi); border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

::selection { background: rgba(168, 240, 90, .25); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--mono); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 60px;
}
.wordmark {
  font-family: var(--mono); font-weight: 700; font-size: 19px;
  letter-spacing: -.02em; color: var(--text);
}
.wordmark .tld { color: var(--faint); font-weight: 400; }
.wordmark:hover { text-decoration: none; }
.wordmark .dot { color: var(--acc); }
nav .links { display: flex; gap: 22px; margin-left: auto; }
nav .links a { color: var(--dim); font-size: 14.5px; }
nav .links a:hover { color: var(--text); text-decoration: none; }
nav .cta {
  font-family: var(--mono); font-size: 13.5px;
  padding-left: 5px; padding-right: 5px; border-radius: 8px;
  background: var(--acc); color: var(--acc-ink); font-weight: 600;
}
nav .cta:hover { filter: brightness(1.08); text-decoration: none; }

/* ---------- hero ---------- */
.hero { padding: 84px 0 40px; text-align: center; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0 0 18px;
  font-weight: 800;
}
.hero h1 .accent {
  color: var(--acc);
  white-space: nowrap;
}
.hero .sub {
  color: var(--dim);
  font-size: clamp(16px, 2vw, 20px);
  max-width: 640px; margin: 0 auto 34px;
}
.hero .sub strong { color: var(--text); font-weight: 600; }

/* ---------- terminal window ---------- */
.term {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  text-align: left;
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-hi); }
.term-title {
  margin-left: 8px;
  font-family: var(--mono); font-size: 12.5px; color: var(--faint);
}
.term-body {
  padding: 18px 20px 22px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  min-height: 300px;
  max-height: 340px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 860px) {
  .term-body.demo-split { grid-template-columns: 1.15fr .95fr; gap: 26px; }
}
.term-pane { min-width: 0; overflow: hidden; }
.pane-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--faint); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pane-label .pill {
  font-size: 10px; padding: 1px 8px; border-radius: 99px;
  border: 1px solid var(--border-hi); color: var(--dim);
  text-transform: none; letter-spacing: 0;
}
.tline { white-space: pre-wrap; word-break: break-all; color: var(--dim); }
.tline.cmd { color: var(--text); }
.tline .p { color: var(--acc); }        /* prompt symbol */
.tline .u { color: var(--link); }       /* url chip */
.cursor {
  display: inline-block; width: 8px; height: 15px;
  background: var(--acc); vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.browser-chrome {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); overflow: hidden;
}
.browser-url {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  background: var(--panel2); border-bottom: 1px solid var(--border);
  padding: 7px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-lines {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  padding: 10px 14px; min-height: 210px;
}

/* ---------- install strip ---------- */
.install { padding: 34px 0 10px; }
.strip {
  display: flex; align-items: stretch; gap: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.strip code {
  flex: 1;
  padding: 15px 20px;
  font-size: 14px; color: var(--text);
  overflow-x: auto; white-space: nowrap;
}
.strip code .c{color:var(--faint)}
.strip button {
  border: 0; cursor: pointer;
  background: var(--panel2); color: var(--dim);
  font-family: var(--mono); font-size: 13px;
  padding: 0 20px; border-left: 1px solid var(--border);
}
.strip button:hover { color: var(--acc); }
.install-alt {
  text-align: center; margin-top: 14px;
  font-family: var(--mono); font-size: 13px; color: var(--faint);
}
.install-alt a { color: var(--dim); }

/* ---------- sections ---------- */
section.block { padding: 64px 0 8px; }
.kicker {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--acc); letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 10px;
}
h2.sec {
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -.025em; margin: 0 0 30px; font-weight: 750;
}

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card .n {
  font-family: var(--mono); color: var(--acc); font-size: 13px;
  display: inline-flex; width: 26px; height: 26px;
  border: 1px solid var(--acc-dim); border-radius: 50%;
  align-items: center; justify-content: center; margin-bottom: 14px;
}
.card h3 { margin: 0 0 8px; font-size: 16.5px; }
.card p { margin: 0; color: var(--dim); font-size: 14.5px; }
.card pre {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.8px; overflow-x: auto; color: var(--text);
}
.card pre .cm { color: var(--faint); }

.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.example pre {
  margin: 0 0 12px; padding: 13px 15px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.8px; overflow-x: auto;
}
.example p { margin: 0; color: var(--dim); font-size: 14px; }
.example .etitle { font-weight: 650; color: var(--text); margin-bottom: 10px; font-size: 15px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.feature { padding: 18px 20px; }
.feature .fi { font-size: 20px; margin-bottom: 8px; }
.feature h3 { margin: 0 0 6px; font-size: 15.5px; }
.feature p { margin: 0; color: var(--dim); font-size: 13.8px; }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 20px;
  font-weight: 600; font-size: 15.5px;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); color: var(--acc);
  font-size: 18px; transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 20px 18px; color: var(--dim); font-size: 14.5px; max-width: 760px; }
.faq .a code {
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px; font-size: 13px;
}

footer {
  margin-top: 80px;
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
  color: var(--faint); font-size: 13.5px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
footer .mono { font-family: var(--mono); }
.foot-tag { margin-top: 6px; }
.foot-right { text-align: right; padding-top: 3px; }

/* ---------- download page ---------- */
.dl-page { padding-top: 56px; max-width: 860px; }
.dl-title { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.03em; margin: 0 0 12px; }
.dl-title .accent { color: var(--acc); }
.dl-sub { color: var(--dim); font-size: 17px; max-width: 620px; margin: 0 0 8px; }
.dl-block { padding: 34px 0 4px; }
.dl-block .sec { margin-bottom: 16px; }
.dl-note { color: var(--dim); font-size: 14px; margin: 10px 0 14px; }
.dl-note code {
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
}
.dl-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-btn { text-decoration: none; font-size: 13px; padding: 9px 16px; }
.dl-btn:hover { text-decoration: none; color: var(--acc); border-color: var(--acc-dim); }

/* ---------- admin console ---------- */
.admin-scroll { overflow-y: auto; }
.admin-wrap { padding: 26px 24px 60px; width: 100%; max-width: 1200px; }
.admin-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.tile .tk {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.tile .tv { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.tile .tv i { font-style: normal; font-weight: 400; color: var(--faint); font-size: 12.5px; }

.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  font-family: var(--mono); font-size: 12.8px;
}
.admin-table th, .admin-table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-table td:nth-child(2) { white-space: normal; min-width: 160px; }
.admin-table th {
  background: var(--panel2); color: var(--faint);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--panel2) 55%, transparent); }
.admin-table .why { color: var(--faint); font-size: 11.5px; }
.admin-table .acts { text-align: right; }
.admin-table .acts .btn { padding: 4px 9px; font-size: 11.5px; }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, var(--border)); }
.btn.danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
.admin-empty {
  color: var(--faint); font-family: var(--mono); font-size: 13.5px;
  text-align: center; padding: 40px 0;
}

/* ---------- status page ---------- */
.status-page {
  max-width: 760px; margin: 0 auto; padding: 72px 24px 40px;
}
.status-hero {
  display: flex; align-items: center; gap: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.status-hero h1 {
  font-size: 26px; letter-spacing: -.02em; margin: 0; font-weight: 750;
}
.status-sub { color: var(--dim); font-size: 14px; margin: 4px 0 0; font-family: var(--mono); }
.bigdot {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--faint);
}
.bigdot.ok {
  background: var(--live);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--live) 18%, transparent);
  animation: pulse 2s ease infinite;
}
.bigdot.bad {
  background: var(--err);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--err) 18%, transparent);
}
.status-page .admin-tiles { margin-bottom: 14px; }
.status-foot {
  color: var(--faint); font-size: 13px; font-family: var(--mono);
  text-align: center; margin-top: 8px;
}

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 9px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   VIEWER PAGE
   ============================================================ */
body.viewer { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.vtop {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex: none;
}
.vtop-inner {
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 16px;
  max-width: none;
}
.v-id {
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  white-space: nowrap;
}
.v-title { color: var(--dim); font-size: 13.5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.status {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-hi); color: var(--dim);
  flex: none;
}
.status.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.status.live .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.v-stats {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  white-space: nowrap;
  margin-left: auto;
}
.v-actions { display: flex; gap: 8px; flex: none; }
.btn {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--dim); background: var(--panel2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { color: var(--text); border-color: var(--border-hi); }
.btn.on { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); font-weight: 600; }
.btn.icon { padding: 6px 10px; }

.vsearch {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; flex: none;
}
.vsearch input {
  flex: 1; max-width: 480px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--mono); font-size: 13px;
  padding: 7px 12px; outline: none;
}
.vsearch input:focus { border-color: var(--acc-dim); }
.vsearch .count { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.vsearch label {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
  margin-left: auto;
}
.vsearch input[type=checkbox] { accent-color: var(--acc); }

/* log viewport */
#log-viewport { position: relative; flex: 1; min-height: 0; }
#log {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 14px 0 90px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.62;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}
#log.wraplines .ln-text { white-space: pre-wrap; word-break: break-all; }
#log:not(.wraplines) .ln-text { white-space: pre; }

.lrow { display: flex; }
.lrow.flash > .ln-text { animation: rowflash 1s ease; }
@keyframes rowflash { 0% { background: rgba(168,240,90,.13); } 100% { background: transparent; } }
.lnum {
  flex: none; width: 58px; text-align: right;
  padding-right: 16px; color: var(--faint);
  user-select: none; opacity: .55;
}
.ln-text { flex: 1; padding-right: 18px; min-width: 0; }
.ln-text span.e { white-space: inherit; }

/* ANSI classes */
.c-b{color:var(--ansi-black)} .c-r{color:var(--ansi-red)} .c-g{color:var(--ansi-green)}
.c-y{color:var(--ansi-yellow)} .c-bl{color:var(--ansi-blue)} .c-m{color:var(--ansi-magenta)}
.c-c{color:var(--ansi-cyan)} .c-w{color:var(--ansi-white)}
.b{font-weight:700} .u{text-decoration:underline} .i{font-style:italic}
.dimtxt{opacity:.55}
mark { background: rgba(240,180,41,.4); color: inherit; border-radius: 2px; }

/* jump-to-live chip */
#jump {
  position: absolute; right: 22px; bottom: 18px;
  display: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  background: var(--acc); color: var(--acc-ink);
  border: 0; border-radius: 99px;
  padding: 8px 16px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  z-index: 20;
}
#jump.show { display: block; animation: risein .18s ease; }
@keyframes risein { from { transform: translateY(8px); opacity: 0; } }

/* ended banner + notices — floats over the log viewport */
.banner {
  position: absolute;
  top: 12px; left: 16px; right: 16px;
  z-index: 15;
  border: 1px solid var(--border-hi);
  background: var(--panel2);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.banner b { color: var(--text); }
.banner .exit-ok { color: var(--live); font-weight: 700; }
.banner .exit-bad { color: var(--err); font-weight: 700; }

.truncated-note {
  color: var(--faint); font-style: italic;
  padding: 4px 0 10px 74px; font-size: 12px;
}

.connecting {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  color: var(--faint); font-family: var(--mono); font-size: 13.5px;
  z-index: 10;
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-hi); border-top-color: var(--acc);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- gone / error page ---------- */
.gone-page {
  min-height: 100dvh;
  display: grid; place-items: center;
  text-align: center; padding: 24px;
}
.gone-card { max-width: 460px; }
.gone-card .glyph { font-size: 44px; margin-bottom: 8px; }
.gone-card h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; }
.gone-card p { color: var(--dim); margin: 0 0 22px; }
.btn-cta {
  font-family: var(--mono); font-size: 13.5px;
  padding: 9px 18px; border-radius: 8px;
  background: var(--acc); color: var(--acc-ink);
  font-weight: 600; display: inline-block;
}
.btn-cta:hover { filter: brightness(1.08); text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  nav .links a.hide-m { display: none; }
  .hero { padding-top: 56px; }
  .term-body { max-height: none; min-height: 0; }
  .term-body.demo-split { grid-template-columns: 1fr; }
  .browser-chrome { max-height: 220px; overflow: hidden; }
  .vtop-inner { flex-wrap: wrap; height: auto; padding: 10px 12px; row-gap: 8px; }
  .v-stats { order: 5; width: 100%; margin-left: 0; }
  .lnum { width: 44px; padding-right: 10px; }
  section.block { padding: 46px 0 6px; }
}

/* xterm-256 palette — generated; keeps CSP free of inline styles */
.ec-16{color:rgb(0,0,0)}.ec-17{color:rgb(0,0,95)}.ec-18{color:rgb(0,0,135)}.ec-19{color:rgb(0,0,175)}
.ec-20{color:rgb(0,0,215)}.ec-21{color:rgb(0,0,255)}.ec-22{color:rgb(0,95,0)}.ec-23{color:rgb(0,95,95)}
.ec-24{color:rgb(0,95,135)}.ec-25{color:rgb(0,95,175)}.ec-26{color:rgb(0,95,215)}.ec-27{color:rgb(0,95,255)}
.ec-28{color:rgb(0,135,0)}.ec-29{color:rgb(0,135,95)}.ec-30{color:rgb(0,135,135)}.ec-31{color:rgb(0,135,175)}
.ec-32{color:rgb(0,135,215)}.ec-33{color:rgb(0,135,255)}.ec-34{color:rgb(0,175,0)}.ec-35{color:rgb(0,175,95)}
.ec-36{color:rgb(0,175,135)}.ec-37{color:rgb(0,175,175)}.ec-38{color:rgb(0,175,215)}.ec-39{color:rgb(0,175,255)}
.ec-40{color:rgb(0,215,0)}.ec-41{color:rgb(0,215,95)}.ec-42{color:rgb(0,215,135)}.ec-43{color:rgb(0,215,175)}
.ec-44{color:rgb(0,215,215)}.ec-45{color:rgb(0,215,255)}.ec-46{color:rgb(0,255,0)}.ec-47{color:rgb(0,255,95)}
.ec-48{color:rgb(0,255,135)}.ec-49{color:rgb(0,255,175)}.ec-50{color:rgb(0,255,215)}.ec-51{color:rgb(0,255,255)}
.ec-52{color:rgb(95,0,0)}.ec-53{color:rgb(95,0,95)}.ec-54{color:rgb(95,0,135)}.ec-55{color:rgb(95,0,175)}
.ec-56{color:rgb(95,0,215)}.ec-57{color:rgb(95,0,255)}.ec-58{color:rgb(95,95,0)}.ec-59{color:rgb(95,95,95)}
.ec-60{color:rgb(95,95,135)}.ec-61{color:rgb(95,95,175)}.ec-62{color:rgb(95,95,215)}.ec-63{color:rgb(95,95,255)}
.ec-64{color:rgb(95,135,0)}.ec-65{color:rgb(95,135,95)}.ec-66{color:rgb(95,135,135)}.ec-67{color:rgb(95,135,175)}
.ec-68{color:rgb(95,135,215)}.ec-69{color:rgb(95,135,255)}.ec-70{color:rgb(95,175,0)}.ec-71{color:rgb(95,175,95)}
.ec-72{color:rgb(95,175,135)}.ec-73{color:rgb(95,175,175)}.ec-74{color:rgb(95,175,215)}.ec-75{color:rgb(95,175,255)}
.ec-76{color:rgb(95,215,0)}.ec-77{color:rgb(95,215,95)}.ec-78{color:rgb(95,215,135)}.ec-79{color:rgb(95,215,175)}
.ec-80{color:rgb(95,215,215)}.ec-81{color:rgb(95,215,255)}.ec-82{color:rgb(95,255,0)}.ec-83{color:rgb(95,255,95)}
.ec-84{color:rgb(95,255,135)}.ec-85{color:rgb(95,255,175)}.ec-86{color:rgb(95,255,215)}.ec-87{color:rgb(95,255,255)}
.ec-88{color:rgb(135,0,0)}.ec-89{color:rgb(135,0,95)}.ec-90{color:rgb(135,0,135)}.ec-91{color:rgb(135,0,175)}
.ec-92{color:rgb(135,0,215)}.ec-93{color:rgb(135,0,255)}.ec-94{color:rgb(135,95,0)}.ec-95{color:rgb(135,95,95)}
.ec-96{color:rgb(135,95,135)}.ec-97{color:rgb(135,95,175)}.ec-98{color:rgb(135,95,215)}.ec-99{color:rgb(135,95,255)}
.ec-100{color:rgb(135,135,0)}.ec-101{color:rgb(135,135,95)}.ec-102{color:rgb(135,135,135)}.ec-103{color:rgb(135,135,175)}
.ec-104{color:rgb(135,135,215)}.ec-105{color:rgb(135,135,255)}.ec-106{color:rgb(135,175,0)}.ec-107{color:rgb(135,175,95)}
.ec-108{color:rgb(135,175,135)}.ec-109{color:rgb(135,175,175)}.ec-110{color:rgb(135,175,215)}.ec-111{color:rgb(135,175,255)}
.ec-112{color:rgb(135,215,0)}.ec-113{color:rgb(135,215,95)}.ec-114{color:rgb(135,215,135)}.ec-115{color:rgb(135,215,175)}
.ec-116{color:rgb(135,215,215)}.ec-117{color:rgb(135,215,255)}.ec-118{color:rgb(135,255,0)}.ec-119{color:rgb(135,255,95)}
.ec-120{color:rgb(135,255,135)}.ec-121{color:rgb(135,255,175)}.ec-122{color:rgb(135,255,215)}.ec-123{color:rgb(135,255,255)}
.ec-124{color:rgb(175,0,0)}.ec-125{color:rgb(175,0,95)}.ec-126{color:rgb(175,0,135)}.ec-127{color:rgb(175,0,175)}
.ec-128{color:rgb(175,0,215)}.ec-129{color:rgb(175,0,255)}.ec-130{color:rgb(175,95,0)}.ec-131{color:rgb(175,95,95)}
.ec-132{color:rgb(175,95,135)}.ec-133{color:rgb(175,95,175)}.ec-134{color:rgb(175,95,215)}.ec-135{color:rgb(175,95,255)}
.ec-136{color:rgb(175,135,0)}.ec-137{color:rgb(175,135,95)}.ec-138{color:rgb(175,135,135)}.ec-139{color:rgb(175,135,175)}
.ec-140{color:rgb(175,135,215)}.ec-141{color:rgb(175,135,255)}.ec-142{color:rgb(175,175,0)}.ec-143{color:rgb(175,175,95)}
.ec-144{color:rgb(175,175,135)}.ec-145{color:rgb(175,175,175)}.ec-146{color:rgb(175,175,215)}.ec-147{color:rgb(175,175,255)}
.ec-148{color:rgb(175,215,0)}.ec-149{color:rgb(175,215,95)}.ec-150{color:rgb(175,215,135)}.ec-151{color:rgb(175,215,175)}
.ec-152{color:rgb(175,215,215)}.ec-153{color:rgb(175,215,255)}.ec-154{color:rgb(175,255,0)}.ec-155{color:rgb(175,255,95)}
.ec-156{color:rgb(175,255,135)}.ec-157{color:rgb(175,255,175)}.ec-158{color:rgb(175,255,215)}.ec-159{color:rgb(175,255,255)}
.ec-160{color:rgb(215,0,0)}.ec-161{color:rgb(215,0,95)}.ec-162{color:rgb(215,0,135)}.ec-163{color:rgb(215,0,175)}
.ec-164{color:rgb(215,0,215)}.ec-165{color:rgb(215,0,255)}.ec-166{color:rgb(215,95,0)}.ec-167{color:rgb(215,95,95)}
.ec-168{color:rgb(215,95,135)}.ec-169{color:rgb(215,95,175)}.ec-170{color:rgb(215,95,215)}.ec-171{color:rgb(215,95,255)}
.ec-172{color:rgb(215,135,0)}.ec-173{color:rgb(215,135,95)}.ec-174{color:rgb(215,135,135)}.ec-175{color:rgb(215,135,175)}
.ec-176{color:rgb(215,135,215)}.ec-177{color:rgb(215,135,255)}.ec-178{color:rgb(215,175,0)}.ec-179{color:rgb(215,175,95)}
.ec-180{color:rgb(215,175,135)}.ec-181{color:rgb(215,175,175)}.ec-182{color:rgb(215,175,215)}.ec-183{color:rgb(215,175,255)}
.ec-184{color:rgb(215,215,0)}.ec-185{color:rgb(215,215,95)}.ec-186{color:rgb(215,215,135)}.ec-187{color:rgb(215,215,175)}
.ec-188{color:rgb(215,215,215)}.ec-189{color:rgb(215,215,255)}.ec-190{color:rgb(215,255,0)}.ec-191{color:rgb(215,255,95)}
.ec-192{color:rgb(215,255,135)}.ec-193{color:rgb(215,255,175)}.ec-194{color:rgb(215,255,215)}.ec-195{color:rgb(215,255,255)}
.ec-196{color:rgb(255,0,0)}.ec-197{color:rgb(255,0,95)}.ec-198{color:rgb(255,0,135)}.ec-199{color:rgb(255,0,175)}
.ec-200{color:rgb(255,0,215)}.ec-201{color:rgb(255,0,255)}.ec-202{color:rgb(255,95,0)}.ec-203{color:rgb(255,95,95)}
.ec-204{color:rgb(255,95,135)}.ec-205{color:rgb(255,95,175)}.ec-206{color:rgb(255,95,215)}.ec-207{color:rgb(255,95,255)}
.ec-208{color:rgb(255,135,0)}.ec-209{color:rgb(255,135,95)}.ec-210{color:rgb(255,135,135)}.ec-211{color:rgb(255,135,175)}
.ec-212{color:rgb(255,135,215)}.ec-213{color:rgb(255,135,255)}.ec-214{color:rgb(255,175,0)}.ec-215{color:rgb(255,175,95)}
.ec-216{color:rgb(255,175,135)}.ec-217{color:rgb(255,175,175)}.ec-218{color:rgb(255,175,215)}.ec-219{color:rgb(255,175,255)}
.ec-220{color:rgb(255,215,0)}.ec-221{color:rgb(255,215,95)}.ec-222{color:rgb(255,215,135)}.ec-223{color:rgb(255,215,175)}
.ec-224{color:rgb(255,215,215)}.ec-225{color:rgb(255,215,255)}.ec-226{color:rgb(255,255,0)}.ec-227{color:rgb(255,255,95)}
.ec-228{color:rgb(255,255,135)}.ec-229{color:rgb(255,255,175)}.ec-230{color:rgb(255,255,215)}.ec-231{color:rgb(255,255,255)}
.ec-232{color:rgb(8,8,8)}.ec-233{color:rgb(18,18,18)}.ec-234{color:rgb(28,28,28)}.ec-235{color:rgb(38,38,38)}
.ec-236{color:rgb(48,48,48)}.ec-237{color:rgb(58,58,58)}.ec-238{color:rgb(68,68,68)}.ec-239{color:rgb(78,78,78)}
.ec-240{color:rgb(88,88,88)}.ec-241{color:rgb(98,98,98)}.ec-242{color:rgb(108,108,108)}.ec-243{color:rgb(118,118,118)}
.ec-244{color:rgb(128,128,128)}.ec-245{color:rgb(138,138,138)}.ec-246{color:rgb(148,148,148)}.ec-247{color:rgb(158,158,158)}
.ec-248{color:rgb(168,168,168)}.ec-249{color:rgb(178,178,178)}.ec-250{color:rgb(188,188,188)}.ec-251{color:rgb(198,198,198)}
.ec-252{color:rgb(208,208,208)}.ec-253{color:rgb(218,218,218)}.ec-254{color:rgb(228,228,228)}.ec-255{color:rgb(238,238,238)}