:root {
  --bg: #fbfbfa; --panel: #f1f1ee; --text: #1f2328; --muted: #5c6370;
  --line: #d9d9d4; --accent: #0b6e4f; --accent-2: #2b6cb0; --code-bg: #eeeeea; --mark: #ffe58a;
  --shadow: 0 10px 30px rgba(20, 30, 40, .12);
}
/* Dark when the visitor's system asks for it, unless they chose light with the button in the
   header; and dark whatever the system says once they chose dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a; --panel: #1c1f23; --text: #e4e6ea; --muted: #9aa1ac;
    --line: #30343a; --accent: #5fd0a5; --accent-2: #7ab8f5; --code-bg: #22262b; --mark: #6b5a12;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
    --bg: #15171a; --panel: #1c1f23; --text: #e4e6ea; --muted: #9aa1ac;
    --line: #30343a; --accent: #5fd0a5; --accent-2: #7ab8f5; --code-bg: #22262b; --mark: #6b5a12;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--accent); }

/* ---- header: brand, tabs, Docs button, search ---- */
header { display: flex; align-items: center; gap: 18px; padding: 10px 24px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 10; transition: box-shadow .25s ease; }
header.scrolled { box-shadow: var(--shadow); }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--accent); text-decoration: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs a { position: relative; padding: 7px 12px; border-radius: 6px; color: var(--text);
  text-decoration: none; font-size: .95rem; transition: background .15s ease, color .15s ease; }
.tabs a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease; }
.tabs a:hover { background: var(--bg); }
.tabs a:hover::after, .tabs a.current::after { transform: scaleX(1); }
.tabs a.current { color: var(--accent); font-weight: 600; }
.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 1 460px; }
.docs-button { padding: 7px 16px; border-radius: 8px; font-weight: 600; font-size: .95rem;
  text-decoration: none; color: var(--bg); background: var(--accent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.docs-button:hover { transform: translateY(-1px); box-shadow: var(--shadow); filter: brightness(1.08); }
.docs-button.current { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

.search { position: relative; flex: 1; }
.search input, .docs-filter input { width: 100%; padding: 8px 64px 8px 12px; font: inherit; font-size: .95rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.search input:focus, .docs-filter input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: .72rem ui-monospace, Consolas, monospace; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; pointer-events: none; }
#search-results { position: absolute; right: 0; top: calc(100% + 6px); width: min(560px, 92vw);
  max-height: 70vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; animation: drop .14s ease-out; }
.search-result { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px;
  align-items: baseline; padding: 8px 10px; border-radius: 6px; color: var(--text);
  text-decoration: none; }
.search-result:hover, .search-result.selected { background: var(--panel); }
.search-kind, .kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.kind-placeholder, .kind-event, .kind-syntax, .kind-script { color: var(--accent); border-color: var(--accent); }
.kind-event { color: var(--accent-2); border-color: var(--accent-2); }
.search-title { font-weight: 600; overflow-wrap: anywhere; }
.search-page { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.search-snippet { grid-column: 1 / -1; font-size: .84rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 12px; color: var(--muted); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---- written pages ---- */
.page { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 20px; }
h2 { font-size: 1.45rem; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.2rem; margin: 34px 0 10px; }
h4 { font-size: 1rem; margin: 26px 0 8px; }
h1, h2, h3, h4, .entry, .topic { scroll-margin-top: 76px; }
code { font: .88em/1.5 ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: var(--code-bg); padding: 2px 5px; border-radius: 4px; }
pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; overflow-x: auto; }
pre code { background: none; padding: 0; font-size: .86rem; }
.table { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; vertical-align: top; padding: 8px 12px; border: 1px solid var(--line); }
th { background: var(--panel); }
tbody tr, tr { transition: background .12s ease; }
tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
blockquote { margin: 16px 0; padding: 4px 16px; border-left: 4px solid var(--accent);
  background: var(--panel); border-radius: 0 6px 6px 0; }
li { margin: 4px 0; }

/* ---- home ---- */
.hero { position: relative; overflow: hidden; margin: 8px 0 32px; padding: 56px 32px; border-radius: 18px;
  border: 1px solid var(--line); text-align: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--panel)),
    var(--panel) 45%, color-mix(in srgb, var(--accent-2) 22%, var(--panel)));
  background-size: 220% 220%; animation: drift 14s ease-in-out infinite alternate; }
.hero-kicker { margin: 0 0 6px; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); margin: 0 0 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; animation: rise .6s ease-out both; }
.hero-lead { max-width: 560px; margin: 0 auto 24px; font-size: 1.12rem; color: var(--muted);
  animation: rise .6s .08s ease-out both; }
.hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; animation: rise .6s .16s ease-out both; }
.button { padding: 10px 20px; border-radius: 10px; font-weight: 600; text-decoration: none; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 32px; }
.card { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--accent); }
.card p { margin: 0; font-size: .93rem; color: var(--muted); }
.card-accent { border-color: var(--accent); }

/* ---- Docs page ---- */
.docs-layout { display: flex; align-items: flex-start; max-width: 1240px; margin: 0 auto; }
.filters { flex: 0 0 250px; position: sticky; top: 61px; max-height: calc(100vh - 61px); overflow-y: auto;
  padding: 24px 12px 24px 24px; }
.filters h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 0; margin: 0 0 8px; padding: 0; }
.filters h2:not(:first-child) { margin-top: 22px; }
.filters label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px;
  font-size: .93rem; cursor: pointer; }
.filters label:hover { background: var(--panel); }
.filters input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.topic-list { display: flex; flex-direction: column; gap: 1px; }
.filter-topic { text-align: left; font: inherit; font-size: .93rem; padding: 5px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); cursor: pointer; transition: background .12s ease, padding-left .12s ease; }
.filter-topic:hover { background: var(--panel); padding-left: 14px; }
.filter-topic.active { background: var(--panel); color: var(--accent); font-weight: 600; }
.docs-main { flex: 1; min-width: 0; padding: 28px 32px 80px; }
.lead { color: var(--muted); margin-top: -8px; }
.docs-filter { position: sticky; top: 61px; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px 0; background: var(--bg); }
.docs-filter input { padding: 11px 14px; font-size: 1rem; }
#docs-count { flex: 0 0 auto; font-size: .85rem; color: var(--muted); white-space: nowrap; }
#docs-empty { padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.topic > h2 { margin-top: 36px; }
.entries { display: grid; gap: 8px; }
.entry { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.entry:hover { transform: translateX(3px); border-color: var(--accent); }
.entry-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.entry-head code { font-size: .92rem; background: none; padding: 0; font-weight: 600; overflow-wrap: anywhere; }
.entry p { margin: 6px 0 0; font-size: .93rem; color: var(--muted); }
.entry.flash { animation: flash 1.6s ease-out; }
details { margin-top: 10px; }
summary { cursor: pointer; font-size: .9rem; color: var(--accent); font-weight: 600; padding: 4px 0;
  transition: color .12s ease; }
summary:hover { color: var(--accent-2); }
details[open] > summary { margin-bottom: 6px; }
details.guide { margin-top: 12px; padding: 4px 14px; border-left: 3px solid var(--line); }
details.guide[open] { border-left-color: var(--accent); }
[hidden] { display: none !important; }

/* ---- entries that open to show an example ---- */
.entry.opens { cursor: pointer; }
.entry.opens:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entry-hint { margin-left: auto; font-size: .72rem; color: var(--muted); white-space: nowrap;
  opacity: 0; transition: opacity .15s ease; }
.entry-hint::after { content: " \25BE"; }
.entry.opens:hover .entry-hint, .entry.opens:focus-visible .entry-hint { opacity: 1; }
.entry.open { border-color: var(--accent); }
.entry.open .entry-hint { opacity: 1; color: var(--accent); }
.entry.open .entry-hint::after { content: " \25B4"; }
.entry-example { position: relative; margin-top: 10px; cursor: auto; animation: drop .16s ease-out; }
.entry-example pre { margin: 0; background: var(--bg); padding-right: 76px; }
.example-copy { position: absolute; top: 8px; right: 8px; font: inherit; font-size: .78rem; padding: 3px 10px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  transition: border-color .12s ease; }
.example-copy:hover { border-color: var(--accent); }

/* ---- changelog ---- */
.release { margin: 0 0 22px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); transition: border-color .18s ease, box-shadow .18s ease; }
.release:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.release:first-of-type { border-color: var(--accent); }
.release-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.release-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.4rem; }
.release-date { color: var(--muted); font-size: .88rem; }
.release-download { margin-left: auto; padding: 6px 14px; font-size: .88rem; }
.badge { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; color: var(--bg); background: var(--accent); }
.release h3 { font-size: 1.05rem; margin: 20px 0 6px; color: var(--accent); }
.release h4 { font-size: .95rem; margin: 16px 0 4px; }
.release ul { margin: 6px 0; padding-left: 22px; }
.release pre, .release code { background: var(--bg); }
.hero-pill { display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: 999px;
  font-size: .85rem; text-decoration: none; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); transition: border-color .15s ease, transform .15s ease;
  animation: rise .6s ease-out both; }
.hero-pill span { color: var(--accent); font-weight: 600; margin-left: 6px; }
.hero-pill span::after { content: " \2192"; }
.hero-pill:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---- "try it" boxes for events ---- */
.playground { margin: 16px 0 8px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); }
.playground-title { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { font: .82rem ui-monospace, 'Cascadia Code', Consolas, monospace; padding: 4px 9px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.chip:focus-visible, .playground-actions button:focus-visible, .filter-topic:focus-visible,
.button:focus-visible, .docs-button:focus-visible, .card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.playground-code { margin: 0 0 10px; min-height: 4.5em; }
.playground-actions { display: flex; gap: 8px; }
.playground-actions button { font: inherit; font-size: .85rem; padding: 4px 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  transition: border-color .12s ease; }
.playground-actions button:hover { border-color: var(--accent); }

/* ---- effects ---- */
/* Content is always visible; an element only plays a short entrance when it first scrolls into
   view. Nothing waits in a hidden state, so a stalled or blocked animation can never hide text. */
.reveal.visible { animation: rise .45s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  header { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .header-tools { flex: 1 1 100%; order: 3; }
  .docs-layout { display: block; }
  .filters { position: static; max-height: none; padding: 16px; border-bottom: 1px solid var(--line); }
  .topic-list { flex-direction: row; flex-wrap: wrap; }
  .docs-main, .page { padding: 20px 16px 60px; }
  .docs-filter { top: 0; }
  .hero { padding: 36px 18px; }
}

/* On the Docs page the filter box stays pinned under the header, so jump targets must clear both. */
.docs-main .entry, .docs-main .topic { scroll-margin-top: 140px; }

/* ---- supported versions, on the home page ---- */
.support { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  animation: rise .6s .24s ease-out both; }
.support-item { padding: 5px 14px; border-radius: 999px; font-size: .88rem; background: var(--bg);
  border: 1px solid var(--line); transition: border-color .15s ease, transform .15s ease; }
.support-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.support-item strong { color: var(--accent); margin-right: 4px; }
.support-note { flex: 1 1 100%; max-width: 620px; margin: 6px auto 0; font-size: .8rem; color: var(--muted); }

/* ---- logo ---- */
.brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-logo { display: block; border-radius: 7px; transition: transform .2s ease; }
.brand-link:hover .brand-logo { transform: rotate(-6deg) scale(1.08); }
.hero-logo { display: block; margin: 0 auto 14px; border-radius: 20px; box-shadow: var(--shadow);
  animation: rise .6s ease-out both; }

/* ---- a release that changes existing scripts ---- */
.release-head { position: relative; }
.breaking > summary { list-style: none; cursor: pointer; user-select: none; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: #fff; background: #d92d20; box-shadow: 0 0 0 0 rgba(217, 45, 32, .5); animation: warn-pulse 2.4s ease-out infinite; }
.breaking > summary::-webkit-details-marker { display: none; }
.breaking > summary:hover, .breaking[open] > summary { background: #b42318; animation: none; }
.breaking-body { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; width: min(560px, 100%); max-height: 70vh; overflow-y: auto;
  padding: 14px 18px; border-radius: 12px; border: 1px solid #d92d20; background: var(--bg, #fff);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); font-size: .92rem; }
.breaking-body .breaking-title { margin: 0 0 8px; font-weight: 700; color: #d92d20; }
.breaking-body ul { margin: 0; padding-left: 20px; }
.breaking-body pre { margin: 8px 0; }
@keyframes warn-pulse { 70% { box-shadow: 0 0 0 8px rgba(217, 45, 32, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); } }
@media (prefers-reduced-motion: reduce) { .breaking > summary { animation: none; } }

/* ---- Scripts page ---- */
.script-tools { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; }
.script-tools input { flex: 1; min-width: 0; padding: 11px 14px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.script-tools input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
#script-count { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.script { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); scroll-margin-top: 140px; transition: border-color .2s ease, box-shadow .2s ease; }
.script:hover { border-color: var(--accent); }
.script.script-target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.script[hidden] { display: none; }
.script-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.script h2 { margin: 0; padding: 0; border: 0; font-size: 1.3rem; }
.script-buttons { display: flex; gap: 8px; }
.script-buttons .button { padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line);
  background: var(--bg); min-width: 104px; }
.script-buttons .button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.script-buttons .button.done { border-color: var(--accent); }
.script-meta { margin: 6px 0 0; color: var(--muted); font-size: .88rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.script-command { font-size: .82rem; }
/* Notes are shown as written, in a fixed-width face, so columns lined up with spaces stay lined up. */
.script-notes { margin: 12px 0 0; white-space: pre-wrap; line-height: 1.55; font-size: .88rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.script-code { margin-top: 12px; }
.script-code > summary { cursor: pointer; color: var(--accent); font-weight: 600; user-select: none; }
.script-code pre { max-height: 60vh; overflow: auto; }
.script-empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* ---- syntax colouring ---- */
:root { --hl-k: #8250df; --hl-f: #0550ae; --hl-s: #0a6b3d; --hl-v: #953800; --hl-p: #0969da; --hl-n: #b35900;
  --hl-m: #6e7781; --hl-o: #57606a; --hl-c: #bf3989; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hl-k: #d2a8ff; --hl-f: #79c0ff; --hl-s: #7ee787; --hl-v: #ffa657; --hl-p: #58a6ff; --hl-n: #f2cc60;
    --hl-m: #8b949e; --hl-o: #adb5bd; --hl-c: #ff7eb6; }
}
:root[data-theme="dark"] { --hl-k: #d2a8ff; --hl-f: #79c0ff; --hl-s: #7ee787; --hl-v: #ffa657; --hl-p: #58a6ff; --hl-n: #f2cc60;
    --hl-m: #8b949e; --hl-o: #adb5bd; --hl-c: #ff7eb6; }
.hl-k { color: var(--hl-k); font-weight: 600; }
.hl-f { color: var(--hl-f); }
.hl-s { color: var(--hl-s); }
.hl-v { color: var(--hl-v); }
.hl-p { color: var(--hl-p); }
.hl-n { color: var(--hl-n); }
.hl-m { color: var(--hl-m); font-style: italic; }
.hl-o { color: var(--hl-o); }
.hl-c { color: var(--hl-c); }

/* ---- script badges ---- */
.script-requires { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: var(--accent-2); border: 1px solid var(--accent-2); white-space: nowrap; }
.script-addon { text-decoration: none; color: var(--hl-k, #8250df); border-color: currentColor; }
.script-author { color: var(--bg, #fff); background: var(--accent-2); }
a.script-requires { text-decoration: none; }
a.script-requires:hover { text-decoration: underline; }
.forum-profile { color: inherit; text-decoration: none; }
.forum-profile:hover { text-decoration: underline; }

/* ---- favourites, following, profiles ---- */
.button.fav.on, .button.on { color: var(--accent-2); border-color: var(--accent-2); }
.script-more { margin: 14px 0; }
.profile-list { list-style: none; padding: 0; margin: 8px 0 22px; }
.profile-list li { padding: 10px 0; border-bottom: 1px solid var(--line, rgba(128, 128, 128, .25)); }
.profile-list li p { margin: 4px 0 0; color: var(--muted); }
.profile-list .play-mini { margin-left: 10px; }
.favourites { margin-top: 30px; }
.popular { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 6px 0 22px; padding: 14px 18px;
  border: 1px solid var(--line, rgba(128, 128, 128, .25)); border-radius: 10px; }
.popular-part { flex: 1 1 260px; min-width: 0; }
.popular h2 { font-size: 1rem; margin: 0 0 6px; }
.popular ol { margin: 0; padding-left: 22px; }

/* ---- what a script was before ---- */
.script-compare { margin: 22px 0; }
.diff { max-height: 520px; overflow: auto; }
.diff span { display: block; white-space: pre; }
.diff-add { background: rgba(34, 197, 94, .18); }
.diff-del { background: rgba(239, 68, 68, .18); }
.diff-same { color: var(--muted); }

/* ---- servers: what they said, and badges ---- */
.server-live { color: #16a34a; border-color: currentColor; }
.badges { margin-top: 30px; padding: 12px 16px; border: 1px solid var(--line, rgba(128, 128, 128, .25)); border-radius: 10px; }
.badges summary { cursor: pointer; font-weight: 700; }
.badge-one { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 16px 0 0; }
.badge-one .play-live { white-space: normal; }
.jar-count { margin-left: 8px; }

/* ---- was this helpful, the docs as one file, what changed since a version ---- */
.helpful { margin: 46px 0 0; padding: 14px 18px; border: 1px solid var(--line, rgba(128, 128, 128, .25)); border-radius: 10px; }
.helpful .play-tools { margin-top: 8px; }
.helpful-note { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.helpful-note textarea { flex: 1 1 260px; font: inherit; padding: 6px 8px; }
.offline-link { margin: 0 0 14px; }
.since-box { margin: 18px 0 26px; padding: 14px 18px; border: 1px solid var(--line, rgba(128, 128, 128, .25));
  border-radius: 10px; }
.since-box .play-tools { margin-top: 8px; align-items: center; }
.since-box select { font: inherit; padding: 4px 8px; }
.since-release { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line, rgba(128, 128, 128, .25)); }
.since-release h3 { margin: 10px 0 4px; }
.changes-text h4 { margin: 12px 0 4px; }
.changes-under { margin: 2px 0 0 14px; }
.admin-again { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.admin-again input { flex: 1 1 280px; font: inherit; padding: 7px 10px; }

/* ---- tags, kinds, screenshots, faces, achievements, the queue ---- */
.script-tag.on { color: var(--accent-2); border-color: var(--accent-2); }
.script-kind { color: var(--muted); border-color: currentColor; }
.community-tags { margin: 0 0 14px; }
.tag-pick { border: 1px solid var(--line, rgba(128, 128, 128, .25)); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
.tag-pick legend { font-size: .85rem; color: var(--muted); padding: 0 6px; }
.tag-pick label, .issue-form .tag-pick label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 0 0;
  font-weight: 400; white-space: nowrap; }
/* The box stands right in front of its word, not on a line of its own as a text field would. */
.issue-form .tag-pick input { display: inline-block; width: auto; margin: 0; padding: 0; flex: none; }
.server-bar { justify-content: space-between; margin: 0 0 14px; }
.server-bar select { font: inherit; padding: 4px 8px; }
.shots { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.shots a { display: block; max-width: 320px; flex: 1 1 220px; }
.shots img, .queue-shot { display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--line, rgba(128, 128, 128, .25)); }
.queue-shot { max-width: 420px; margin-top: 10px; }
.shot-own { margin: 14px 0; padding: 12px 16px; border: 1px dashed var(--line, rgba(128, 128, 128, .4)); border-radius: 10px; }
.shot-own ul { list-style: none; padding: 0; margin: 8px 0 0; }
.shot-own li { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.shot-own li img { width: 96px; height: auto; border-radius: 6px; }
.profile-face { width: 48px; height: 48px; border-radius: 8px; vertical-align: middle; margin-right: 12px;
  image-rendering: pixelated; }
.achievements { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; padding: 0; list-style: none; }
.achievements li { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: var(--accent-2); border: 1px solid currentColor; }
.minecraft-name { margin-top: 30px; }
.minecraft-name form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.minecraft-name input { font: inherit; padding: 6px 10px; }
.queue-item { margin-bottom: 14px; }
.forum-reported { margin: 8px 0 0; }
.script-tag { font: inherit; font-size: .74rem; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line); }
.script-tag:hover { color: var(--accent); border-color: var(--accent); }

/* ---- polish: header that never breaks, a clearer search, footer ---- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh;
  display: flex; flex-direction: column; }
body > main, body > .docs-layout { flex: 1 0 auto; width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

header { flex-wrap: wrap; row-gap: 8px; backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--panel) 88%, transparent); }
.brand-link { flex: 0 0 auto; }
/* The tabs stay on one line and scroll sideways when there is no room, instead of stacking. */
.tabs { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; flex: 0 0 auto; }
.header-tools { flex: 0 1 420px; min-width: 260px; }
@media (max-width: 1080px) {
  .header-tools { flex: 1 1 100%; order: 3; }
  .tabs { mask-image: none; }
}

.search input { padding-left: 36px; border-radius: 10px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.search input::-webkit-search-cancel-button { display: none; }
#search-results { border-radius: 14px; padding: 8px; width: min(620px, calc(100vw - 32px)); }
#search-results[hidden] { display: none; }
.search-result { padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; row-gap: 4px; }
.search-result:hover, .search-result.selected { border-color: var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.search-result + .search-result { margin-top: 2px; }
.search-kind, .kind { padding: 2px 7px; border-radius: 999px; font-weight: 700; font-size: .64rem; }
.kind-page { color: var(--text); border-color: var(--muted); }
.kind-section { color: var(--muted); }
.kind-example { color: var(--hl-n, #b35900); border-color: currentColor; }
.kind-script { color: var(--hl-k, #8250df); border-color: currentColor; }
.search-snippet { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.45; }
.search-empty { text-align: center; padding: 22px 12px; }

pre { position: relative; line-height: 1.55; tab-size: 4; }
.page table { display: block; overflow-x: auto; max-width: 100%; }
.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }

.site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 22px 24px;
  border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .86rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

.script-notes { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line); overflow-x: auto; }
.script-tools input { padding-left: 38px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; }
@media (max-width: 600px) {
  header { padding: 10px 14px; gap: 10px; }
  .page { padding: 22px 16px 60px; }
  .script-head { align-items: flex-start; }
  .search kbd { display: none; }
  .search input { padding-right: 12px; }
}

/* ---- Docs page: a few clear filters instead of a long list ---- */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; padding: 5px 11px;
  border-radius: 999px; cursor: pointer; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
.filter-chip:hover { border-color: var(--accent); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.filter-chip.none:not(.active) { opacity: .45; }
.chip-count { font-size: .72rem; opacity: .75; font-variant-numeric: tabular-nums; }
.source-chip:not(.active) { text-decoration: line-through; opacity: .6; }
.filter-note { margin: 8px 0 0; font-size: .78rem; color: var(--muted); }
#docs-topic { width: 100%; font: inherit; font-size: .9rem; padding: 7px 10px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.filter-reset { margin-top: 16px; width: 100%; font: inherit; font-size: .88rem; padding: 7px 10px; cursor: pointer;
  color: var(--accent); background: none; border: 1px dashed var(--accent); border-radius: 8px; }
.filter-reset:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.source-badge { font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: var(--accent-2); border: 1px solid var(--accent-2); white-space: nowrap; }
h2 .source-badge { vertical-align: middle; margin-left: 6px; }
.kind-event { color: var(--accent-2); border-color: var(--accent-2); }
.kind-condition { color: var(--hl-n, #b35900); border-color: currentColor; }
.kind-effect { color: var(--accent); border-color: var(--accent); }
.kind-expression { color: var(--hl-p, #0969da); border-color: currentColor; }
.kind-type { color: var(--hl-c, #bf3989); border-color: currentColor; }
.kind-function { color: var(--hl-k, #8250df); border-color: currentColor; }
.kind-structure { color: var(--muted); border-color: var(--muted); }
@media (max-width: 900px) { .filters h2:not(:first-child) { margin-top: 14px; } }

/* ---- search: groups ---- */
.search-group { display: block; margin: 8px 6px 2px; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.search-group:first-child { margin-top: 2px; }
.search-hint { margin: 6px 6px 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: .74rem;
  color: var(--muted); text-align: center; }
.search-page { display: inline-flex; align-items: center; }

/* ---- script cards: what is inside ---- */
.script-facts { margin-top: 12px; display: grid; gap: 10px; }
.script-fact { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; align-items: start; font-size: .92rem; }
.script-fact-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px; }
.script-fact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.script-needs { margin-left: 8px; font-size: .74rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.script-value { color: var(--hl-s, #0a6b3d); }
.script-setting-note { display: block; font-size: .8rem; color: var(--muted); }
.script-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.script-howto { margin: 14px 0 4px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); }
.script-howto > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.script-howto ol { margin: 10px 0; padding-left: 22px; display: grid; gap: 6px; }
@media (max-width: 700px) { .script-fact { grid-template-columns: 1fr; } }

/* ---- addons page ---- */
.addon { margin: 26px 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.addon .release-head h2 { font-size: 1.6rem; }
.addon h3 { margin-top: 26px; }
.addon-changes { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.addon-changes > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.addon-changes .release { border: 0; padding: 12px 0 0; margin: 0; background: none; }

/* ---- home: how big the language is ---- */
.language-size { margin: 26px 0 6px; text-align: center; }
.size-title { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); }
.size-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.size-item { padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.size-item strong { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--accent); }
.size-item:hover { transform: translateY(-2px); border-color: var(--accent); }

/* ---- light and dark button ---- */
.theme-toggle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  font: inherit; font-size: 1.05rem; line-height: 1; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease; }
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- link buttons on Docs entries and scripts ---- */
.entry-link { margin-left: auto; font: inherit; font-size: .72rem; padding: 1px 8px; border-radius: 999px;
  color: var(--muted); background: none; border: 1px solid var(--line); cursor: pointer; white-space: nowrap;
  opacity: 0; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
.entry:hover .entry-link, .entry:focus-within .entry-link, .entry.open .entry-link, .entry-link.done { opacity: 1; }
.entry-link:hover, .entry-link.done { color: var(--accent); border-color: var(--accent); }
.entry-link + .entry-hint { margin-left: 0; }
@media (hover: none) { .entry-link { opacity: 1; } }
.script-head h2 a { color: inherit; text-decoration: none; }
.script-head h2 a:hover { color: var(--accent); }
.script-back { display: inline-block; margin: 22px 0 6px; font-weight: 600; text-decoration: none; }
.script-back:hover { text-decoration: underline; }
.script-single .script-code pre { max-height: none; }

/* ---- home: what the newest version brought ---- */
.whats-new { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; padding: 14px 18px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--panel); }
.whats-new p { margin: 0; flex: 1 1 320px; font-size: .95rem; }
.whats-new a { font-weight: 600; white-space: nowrap; }
.new-badge { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px;
  border-radius: 999px; color: var(--bg); background: var(--accent); white-space: nowrap; }

/* ---- scripts: tag chips and the version filter ---- */
.script-filters { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 12px; }
.script-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 320px; }
.script-tag.chosen { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.script-version { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.script-version select, .play-tools select { font: inherit; font-size: .88rem; padding: 4px 8px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }

/* ---- playground ---- */
.play-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.play-tools .button { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 18px; }
.play-tools .button:disabled { opacity: .6; cursor: progress; }
.play-hint { color: var(--muted); font-size: .85rem; }
#play-code { display: block; width: 100%; min-height: 420px; padding: 14px 16px; resize: vertical; tab-size: 4;
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; white-space: pre; overflow: auto; }
#play-code:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.play-result { margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); font-weight: 600; overflow-wrap: anywhere; }
.play-good { border-color: var(--accent); color: var(--accent); }
.play-bad { border-color: #d1493f; color: #d1493f; }
.play-note { color: var(--muted); font-weight: 400; }
.play-about { margin-top: 18px; color: var(--muted); font-size: .93rem; }
.play-about summary { cursor: pointer; color: var(--accent); font-weight: 600; }

/* ==== the look ============================================================================
   Everything above lays the site out; this part is its face. The idea is an editor at night:
   a faint block grid behind the page, glass over it, mint and blue light where things are live.
   It only restyles, so it sits last and can be taken away without breaking a page. */
:root { --accent: #0a7a57; --accent-2: #2563c9; --glow: rgba(10, 122, 87, .18); --grid: rgba(20, 30, 40, .045);
  --bg: #f7f8f5; --panel: #eef0eb; --code-bg: #e9ece6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0c0f13; --panel: #13171c; --text: #e6e9ee; --muted: #8f98a6;
    --line: #232a33; --accent: #4ade9f; --accent-2: #6aa9ff; --code-bg: #10141a; --mark: #5a4d12;
    --glow: rgba(74, 222, 159, .22); --grid: rgba(255, 255, 255, .028);
    --shadow: 0 14px 40px rgba(0, 0, 0, .55); }
}
:root[data-theme="dark"] { --bg: #0c0f13; --panel: #13171c; --text: #e6e9ee; --muted: #8f98a6;
  --line: #232a33; --accent: #4ade9f; --accent-2: #6aa9ff; --code-bg: #10141a; --mark: #5a4d12;
  --glow: rgba(74, 222, 159, .22); --grid: rgba(255, 255, 255, .028);
  --shadow: 0 14px 40px rgba(0, 0, 0, .55); }
:root[data-theme="light"] { --glow: rgba(10, 122, 87, .18); --grid: rgba(20, 30, 40, .045); }

/* The block grid, fading out down the page, with a soft light at the top. */
body { background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 50% -120px, var(--glow), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-attachment: fixed, scroll, scroll; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Glass header, and the bar that fills as the page is read. */
header { background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.read-bar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 20; transform: scaleX(0);
  transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  pointer-events: none; }
.docs-button, .button-primary, .script-buttons .button-primary { border: 0; color: #06140e;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--accent-2))); }
.docs-button:hover, .button-primary:hover { box-shadow: 0 8px 26px var(--glow); filter: brightness(1.06); }
:root[data-theme="light"] .docs-button, :root[data-theme="light"] .button-primary,
:root[data-theme="light"] .script-buttons .button-primary { color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .docs-button, :root:not([data-theme="dark"]) .button-primary,
  :root:not([data-theme="dark"]) .script-buttons .button-primary { color: #fff; }
}

/* Headings: a short line of light instead of a rule across the page. */
h2 { border-bottom: 0; padding-bottom: 10px; position: relative; }
h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.filters h2::after, .script-head h2::after, .release h2::after { content: none; }
.filters h2, .script-head h2 { padding-bottom: 0; }
pre { border-radius: 10px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
th { background: color-mix(in srgb, var(--panel) 80%, transparent); }

/* ---- home: the hero ---- */
.page.home { max-width: 1120px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px 40px; align-items: center;
  text-align: left; padding: 54px 44px 40px; border-radius: 22px; animation: none;
  background:
    radial-gradient(520px 300px at 12% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(560px 340px at 100% 100%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel) 82%, transparent); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%); }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -.02em; line-height: 1.05; }
.hero-lead { margin: 0 0 26px; max-width: 30em; font-size: 1.14rem; }
.hero-actions { justify-content: flex-start; }
.hero-kicker { color: var(--accent); font-weight: 600; animation: rise .6s ease-out both; }
.support { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
.support-note { text-align: left; }

/* The script in the hero, in a window of its own. */
.code-window { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--code-bg);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 30px 80px -30px var(--glow);
  animation: rise .7s .2s ease-out both; transform-origin: center; }
.code-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 85%, transparent); }
.code-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.code-bar i:nth-child(1) { background: #f26d5f; }
.code-bar i:nth-child(2) { background: #f2bd4b; }
.code-bar i:nth-child(3) { background: #5fcf80; }
.code-bar span { margin-left: 8px; font: .78rem ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--muted); }
.code-window pre { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; padding: 18px 20px;
  font-size: .9rem; line-height: 1.65; }
.code-window pre code { font-size: .88rem; }
.code-window.typing code::after { content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 1px;
  vertical-align: text-bottom; background: var(--accent); animation: blink 1s steps(1) infinite; }
.code-status { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted); opacity: 0; transition: opacity .5s ease; }
.code-window.typed .code-status { opacity: 1; }
.code-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow); }
.code-window.typed .code-dot { animation: pulse 2.2s ease-out infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; } }

/* ---- cards, entries and scripts: light on the edge when touched ---- */
.card, .entry, .script, .size-item, .whats-new, .release {
  background: color-mix(in srgb, var(--panel) 78%, transparent); }
.card { position: relative; border-radius: 16px; padding: 20px 22px; overflow: hidden; }
.card::after { content: "\2192"; position: absolute; right: 18px; top: 16px; color: var(--accent); opacity: 0;
  transform: translateX(-6px); transition: opacity .18s ease, transform .18s ease; }
.card:hover::after { opacity: 1; transform: none; }
.card:hover, .entry:hover, .script:hover, .size-item:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 16px 40px -18px var(--glow); }
.card h3 { color: var(--text); }
.card:hover h3 { color: var(--accent); }
.size-item strong { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.7rem; }
.new-badge { color: #06140e; background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.search input, .docs-filter input, .script-tools input { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.site-footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 34px 20px 28px; }
  .code-window pre { font-size: .8rem; padding: 14px; }
}

/* The tab row */
/* There are more tabs than fit beside the search box on most screens. Up to a wide screen the
   header is two rows: the brand and the tools, then the tabs across the page. Everything pinned
   under the header reads its real height from --header-h, which effects.js keeps up to date. */
.tabs a { padding: 7px 10px; font-size: .92rem; white-space: nowrap; }
.tabs a::after { left: 10px; right: 10px; }
.support-note { flex-basis: 100%; max-width: none; margin: 6px 0 0; }
@media (min-width: 901px) and (max-width: 1500px) {
  header { row-gap: 4px; padding-bottom: 6px; }
  .tabs { order: 3; flex: 1 1 100%; flex-wrap: nowrap; margin: 0 -10px; }
  .header-tools { flex: 0 1 420px; }
}
h1, h2, h3, h4, .entry, .topic { scroll-margin-top: calc(var(--header-h, 61px) + 15px); }
.filters { top: var(--header-h, 61px); max-height: calc(100vh - var(--header-h, 61px)); }
.docs-filter { top: var(--header-h, 61px); }
.docs-main .entry, .docs-main .topic, .script { scroll-margin-top: calc(var(--header-h, 61px) + 79px); }
@media (max-width: 900px) {
  .docs-filter { top: 0; }
}

/* ---- phones ---- */
/* Under 900 pixels the header is the brand and a menu button, with the Docs button and search on
   a row of their own. The tabs are a list that the button opens. Without scripts the button is
   not shown and the tabs stay a row that scrolls sideways. */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  header { padding: 10px 14px; gap: 10px; }
  .js .menu-toggle { display: grid; gap: 4px; align-content: center; justify-items: center; margin-left: auto;
    width: 40px; height: 40px; padding: 0; background: var(--bg); border: 1px solid var(--line);
    border-radius: 8px; cursor: pointer; }
  .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .js .tabs { display: none; order: 4; flex: 1 1 100%; flex-direction: column; flex-wrap: nowrap; gap: 2px;
    margin: 0; padding: 4px 0 2px; overflow: visible auto; max-height: 62vh; }
  .js .tabs.open { display: flex; animation: drop .16s ease-out; }
  .js .tabs a { padding: 11px 12px; font-size: 1rem; border-radius: 8px; }
  .js .tabs a::after { content: none; }
  .js .tabs a.current { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .header-tools { order: 3; flex: 1 1 100%; }
  .theme-toggle { width: 40px; height: 40px; }
  .docs-button { padding: 9px 16px; }

  .page, .docs-main { padding: 18px 14px 56px; }
  .page.home { padding-top: 14px; }
  .hero { padding: 26px 18px 22px; border-radius: 16px; gap: 22px; }
  .hero h1 { font-size: clamp(2.3rem, 12vw, 3rem); }
  .hero-lead { font-size: 1.04rem; margin-bottom: 20px; }
  .hero-actions .button { flex: 1 1 auto; text-align: center; }
  .code-window pre { font-size: .74rem; padding: 12px 14px; }
  .code-window pre code { font-size: .74rem; }
  .whats-new { padding: 14px; }
  .whats-new p { flex-basis: 100%; }
  .cards { grid-template-columns: 1fr; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.28rem; }
  pre { padding: 12px; }
  pre code { font-size: .8rem; }
  .script-head { gap: 10px; }
  .script-buttons { width: 100%; }
  .script-buttons .button { flex: 1 1 0; padding: 9px 6px; text-align: center; }
  .script-fact { grid-template-columns: 1fr; }
  .script-filters { gap: 10px; }
  #play-code { min-height: 300px; font-size: .8rem; }
  .play-tools .button { flex: 1 1 100%; }
  .site-footer { gap: 8px 16px; padding: 18px 14px; }
}

/* ---- pages for one Docs topic or one release ---- */
.crumb { margin: 0 0 14px; font-size: .92rem; font-weight: 600; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.docs-topic .topic { margin: 0; }
.docs-topic .entry { cursor: auto; margin: 10px 0; }
.docs-topic .entry-hint, .docs-topic .entry-link { display: none; }

/* ---- the Issues page ---- */
.issue-form { display: grid; gap: 16px; margin-top: 22px; }
.issue-form label { display: block; font-weight: 600; font-size: .95rem; }
.issue-form label em { font-weight: 400; font-style: normal; color: var(--muted); }
.issue-form input, .issue-form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-weight: 400; color: var(--text); background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.issue-form textarea { resize: vertical; min-height: 180px; line-height: 1.5; }
.issue-form input:focus, .issue-form textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.issue-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.issue-count { float: right; font-weight: 400; font-size: .8rem; color: var(--muted); }
.issue-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.issue-form .play-tools { margin: 4px 0 0; }
@media (max-width: 900px) {
  .issue-row { grid-template-columns: 1fr; }
}

/* ---- playground: line numbers and the list of mistakes ---- */
.play-editor { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px;
  background: var(--code-bg); overflow: hidden; }
.play-editor:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.play-lines { flex: none; margin: 0; padding: 14px 10px 14px 12px; min-width: 3.2em; text-align: right;
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; color: var(--muted);
  background: color-mix(in srgb, var(--panel) 70%, transparent); border: 0; border-right: 1px solid var(--line);
  border-radius: 0; box-shadow: none; overflow: hidden; user-select: none; }
.play-wrong { color: #fff; background: #d1493f; border-radius: 4px; padding: 0 4px; margin-right: -4px; }
.play-editor #play-code { border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0; flex: 1; }
.play-editor #play-code:focus { box-shadow: none; }
.play-errors { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.play-errors li { padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid #d1493f;
  border-radius: 8px; background: var(--panel); font-size: .93rem; overflow-wrap: anywhere; }
.play-jump { font: inherit; font-weight: 700; color: #d1493f; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; }

/* ---- home: the live count; the owner's inbox; a script's own page ---- */
.live-count strong { color: var(--accent); }
.live-count::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: var(--accent); animation: pulse 2.2s ease-out infinite; }
.inbox .script-tools button { font: inherit; font-weight: 600; cursor: pointer; padding: 10px 18px; }
.inbox-done { opacity: .55; }
.inbox-issue .script-notes { white-space: pre-wrap; }
.script-page pre { max-height: none; }
@media (max-width: 900px) {
  .play-lines { font-size: .8rem; padding: 14px 6px 14px 8px; min-width: 2.6em; }
}

/* ---- playground: what to run, and the two tabs under the box ---- */
.play-tools input { flex: 1 1 200px; min-width: 0; padding: 8px 12px; font: .9rem ui-monospace, Consolas, monospace;
  color: var(--text); background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line);
  border-radius: 8px; }
.play-tools input:focus { outline: none; border-color: var(--accent); }
.play-picks { margin: 10px 0 0; }
.play-suggest { margin: 8px 0 0; }
.play-suggest .script-tag { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.play-suggest .script-tag:first-child { border-color: var(--accent); }
.play-tabs { display: flex; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--line); }
.play-tabs button { font: inherit; font-weight: 600; padding: 8px 16px; color: var(--muted); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.play-tabs button.current { color: var(--accent); border-bottom-color: var(--accent); }
.play-pane { padding-top: 10px; }
.play-errors { margin-top: 0; }
.play-none { border-left-color: var(--accent) !important; color: var(--muted); }
.play-log { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--code-bg);
  font: .86rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 420px; overflow: auto; color: var(--muted); }
.play-log-step { color: var(--accent); font-weight: 700; margin-top: 4px; }
.play-log-line { color: var(--text); }
.play-log-bad { color: #d1493f; font-weight: 600; }
.play-log-meta { color: var(--muted); font-style: italic; }

/* ---- the header, regrouped ---- */
/* A few entries instead of a dozen: the written pages are under "Learn" and the rarely wanted ones
   under "More", each a list that opens below its entry. With so few, the header is one row again. */
.tabs { overflow: visible; mask-image: none; align-items: center; }
.tabs details.menu { position: relative; flex: 0 0 auto; }
.tabs details.menu > summary { list-style: none; cursor: pointer; padding: 7px 10px; border-radius: 6px;
  font-size: .92rem; color: var(--text); white-space: nowrap; user-select: none; }
.tabs details.menu > summary::-webkit-details-marker { display: none; }
.tabs details.menu > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg);
  transition: transform .15s ease; opacity: .7; }
.tabs details.menu[open] > summary::after { transform: translateY(0) rotate(225deg); }
.tabs details.menu > summary:hover, .tabs details.menu[open] > summary { background: var(--bg); }
.tabs details.menu.current > summary { color: var(--accent); font-weight: 600; }
.tabs details.menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-items { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 210px; padding: 6px;
  display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); animation: drop .14s ease-out; }
.tabs .menu-items a { padding: 9px 12px; border-radius: 8px; }
.tabs .menu-items a::after { content: none; }
.tabs .menu-items a.current { background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (min-width: 901px) {
  header { flex-wrap: nowrap; }
  .tabs { order: 0; flex: 1 1 auto; margin: 0; flex-wrap: nowrap; }
  .header-tools { flex: 0 1 420px; }
}
@media (max-width: 900px) {
  /* In the folded menu a list opens in place, indented, instead of floating over the page. */
  .js .tabs { align-items: stretch; }
  .js .tabs details.menu > summary { padding: 11px 12px; font-size: 1rem; border-radius: 8px; }
  .js .tabs .menu-items { position: static; min-width: 0; margin: 0 0 4px 12px; padding: 0 0 0 8px; border: 0;
    border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; background: none; animation: none; }
}

/* ---- what's new ---- */
.news-item h2 { margin: 0; padding: 0; border: 0; font-size: 1.25rem; }
.news-item h2::after { content: none; }
.news-item h2 a { color: inherit; text-decoration: none; }
.news-item h2 a:hover { color: var(--accent); }
.news-item { margin: 14px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.news-date { margin: 2px 0 8px; color: var(--muted); font-size: .85rem; }
.news-item p:last-child { margin-bottom: 0; }

/* ---- account and admin ---- */
.account-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-who .button, .sent-row .button, .admin .script-buttons .button { font: inherit; font-weight: 600; cursor: pointer;
  padding: 6px 14px; }
.account .issue-form textarea { font: .86rem/1.5 ui-monospace, Consolas, monospace; white-space: pre; tab-size: 4; }
.sent-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 8px 0;
  border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 10px; background: var(--panel); }
.sent-accepted { border-left-color: var(--accent); }
.sent-rejected { border-left-color: #d1493f; }
.sent-status { color: var(--muted); font-size: .9rem; }
.sent-reason { flex-basis: 100%; font-size: .9rem; }
.sent-row .play-hint { margin-left: auto; }
.sent-row .button + .button, .sent-row .play-hint + .button { margin-left: 0; }
.community { margin-top: 40px; }
.script-code > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-top: 10px; }
.script-code pre, .admin-code { max-height: 420px; overflow: auto; }
.admin-count { display: inline-block; min-width: 1.5em; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  font-size: .78rem; color: var(--bg); background: var(--accent); }
.admin-numbers { justify-content: flex-start; margin: 6px 0 10px; }
.admin-reason { width: 100%; margin: 10px 0 0; padding: 9px 12px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.admin-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 18px 0; }
.admin-chart, .admin-tally { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.admin-chart h3, .admin-tally h3 { margin: 0 0 10px; font-size: 1rem; }
.admin-chart svg { display: block; width: 100%; height: 120px; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.chart-floor { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-ends { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--muted); font-size: .78rem; }
.admin-tallies { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tally-row { display: grid; grid-template-columns: minmax(70px, 38%) 1fr auto; align-items: center; gap: 10px;
  padding: 3px 0; font-size: .9rem; }
.tally-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tally-track { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.tally-bar { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.tally-count { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---- community scripts: stars, and a page for one script ---- */
.stars { display: flex; align-items: center; gap: 2px; margin: 14px 0; flex-wrap: wrap; }
.star { font-size: 1.5rem; line-height: 1; padding: 2px 3px; background: none; border: 0; cursor: pointer;
  color: var(--line); transition: transform .12s ease, color .12s ease; }
.star.on { color: var(--muted); }
.star.on.mine { color: var(--accent); }
.star:not(:disabled):hover { transform: scale(1.2); color: var(--accent); }
.star:disabled { cursor: default; }
.star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.stars .play-hint { margin-left: 10px; }
.script-page .script-buttons { margin: 14px 0 4px; flex-wrap: wrap; }
.script-page .script-buttons a.button { padding: 7px 16px; font-weight: 600; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.script-page .script-buttons a.button:hover { border-color: var(--accent); color: var(--accent); }
#community-order { margin: 10px 0 0; gap: 10px; }
#community-order select { font: inherit; font-size: .9rem; padding: 5px 8px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; }
.admin-password { flex: 1 1 180px; min-width: 0; padding: 6px 10px; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }

/* ---- the header: everything on one line ---- */
/* An entry that opens is written exactly like one that does not: the same size, weight and box, so
   that the words sit on one line and nothing shifts when a list opens. */
.tabs { align-items: center; }
.tabs > a, .tabs details.menu > summary { display: flex; align-items: center; box-sizing: border-box; height: 36px;
  padding: 0 11px; margin: 0; font-size: .92rem; font-weight: 400; line-height: 1; color: var(--text); }
.tabs details.menu[open] > summary { margin: 0; }
.tabs > a.current, .tabs details.menu.current > summary { color: var(--accent); font-weight: 600; }
.tabs > a::after { left: 11px; right: 11px; bottom: 4px; }
.tabs details.menu > summary::after { transform: translateY(-2px) rotate(45deg); }
.tabs details.menu[open] > summary::after { transform: translateY(1px) rotate(225deg); }
/* The last list opens leftwards, so that it stays on the screen. */
.tabs details.menu.account-menu > .menu-items { left: auto; right: 0; }
.tabs details.menu.account-menu > summary { max-width: 160px; }
@media (max-width: 900px) {
  .js .tabs > a, .js .tabs details.menu > summary { height: auto; padding: 11px 12px; font-size: 1rem; line-height: 1.4; }
  .tabs details.menu.account-menu > summary { max-width: none; }
}
.community-pointer { margin-top: 34px; }
/* A list that opens is a box like any other entry: the page gives such boxes room of their own, the header does not. */
.tabs details.menu { margin: 0; padding: 0; border: 0; }

/* ---- the playground, side by side ---- */
/* The script on the left and what comes of it on the right, each a window of its own height that
   scrolls inside itself, so that nothing has to be scrolled to before it can be pressed. */
.page.playground { max-width: 1500px; }
.play-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start;
  margin-top: 16px; }
.play-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); height: calc(100vh - var(--header-h, 61px) - 150px); min-height: 460px; }
.play-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.play-bar .button { font: inherit; font-weight: 600; cursor: pointer; padding: 7px 16px; }
.play-bar .button:disabled { opacity: .6; cursor: progress; }
.play-bar select { font: inherit; font-size: .85rem; padding: 5px 8px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; max-width: 100%; }
.play-bar input { flex: 1 1 140px; min-width: 0; padding: 8px 12px; font: .88rem ui-monospace, Consolas, monospace;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.play-bar input:focus { outline: none; border-color: var(--accent); }
.play-gap { flex: 1 1 auto; }
.play-mini { font: inherit; font-size: .78rem; padding: 4px 9px; color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; }
.play-mini:hover { color: var(--accent); border-color: var(--accent); }
.play-files { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.play-file { flex: 0 0 auto; font: .8rem ui-monospace, Consolas, monospace; padding: 5px 10px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.play-file.current { color: var(--accent); border-color: var(--accent); }
.play-left .play-editor { flex: 1 1 0; min-height: 0; }
.play-left .play-editor #play-code { min-height: 0; height: 100%; resize: none; }
.play-left .play-lines { overflow: hidden; }
.play-foot .play-hint { flex: 1 1 200px; }
.play-right .play-picks { margin: 0; align-items: center; }
.play-right .play-result { margin: 0; }
.play-right .play-tabs { margin: 0; }
.play-right .play-pane { flex: 1 1 0; min-height: 0; overflow: auto; padding-top: 8px; }
.play-right .play-log { min-height: 100%; box-sizing: border-box; }
.play-log-wait { color: var(--accent-2, var(--accent)); font-style: italic; }
.play-skip { font: inherit; font-size: .78rem; margin-left: 6px; padding: 0 7px; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.play-skip:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 1000px) {
  .play-split { grid-template-columns: minmax(0, 1fr); }
  .play-side { height: auto; min-height: 0; }
  .play-left .play-editor { flex: none; height: 52vh; }
  .play-right .play-pane { flex: none; max-height: 60vh; }
}

/* ---- the home page: how fast ---- */
.hero-speed { margin: 14px 0 4px; font-size: 1.05rem; color: var(--text); animation: rise .6s .12s ease-out both; }
.hero-speed strong { font-size: 1.7rem; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 6px; }
.hero-speed span { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }

/* ---- stars: what a rating would be, before it is given ---- */
.stars:hover .star:not(:disabled) { color: var(--accent); }
.stars .star:not(:disabled):hover ~ .star { color: var(--line); }

/* What the script can be run with sits in one row and takes only the room it needs. */
.play-right .play-picks, .play-left .play-suggest { flex: 0 0 auto; }

/* ---- servers: variables in a browser ---- */
.vars-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.vars-head h2, .vars-head h3 { margin: 0; padding: 0; border: 0; }
.vars-head h2::after { content: none; }
.vars-search { width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.vars-search:focus, .vars-value:focus, .vars-add input:focus, .bulk-job input:focus { outline: none; border-color: var(--accent); }
.vars-rows { display: grid; gap: 4px; margin: 6px 0 12px; max-height: 56vh; overflow: auto; }
.vars-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.vars-player { grid-template-columns: minmax(100px, 24%) minmax(0, 1fr) auto auto; }
.vars-name, .vars-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.vars-id { color: var(--muted); }
.vars-value { min-width: 0; padding: 5px 8px; font: .85rem ui-monospace, Consolas, monospace; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.vars-kind { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.vars-add, .bulk-job { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vars-add input, .bulk-job input { flex: 1 1 160px; min-width: 0; padding: 7px 10px; font: inherit; font-size: .9rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.vars-add .button, .bulk-job .button, .servers .play-bar .button { font: inherit; font-weight: 600; cursor: pointer; padding: 7px 16px; }
.servers .play-bar { margin: 12px 0; }
.servers .button:disabled { opacity: .55; cursor: default; }
.vars-detail { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.bulk-job { padding: 14px 16px; margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.bulk-job h3 { flex-basis: 100%; margin: 0; font-size: 1rem; }
.bulk-job .play-hint { flex-basis: 100%; margin: 0; }
.vars-how { margin-top: 18px; }
#account-key { margin: 22px 0; }
#account-key h3 { margin: 0 0 6px; }
#account-key-shown { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; user-select: all; }
@media (max-width: 700px) {
  .vars-row, .vars-player { grid-template-columns: minmax(0, 1fr) auto; }
  .vars-value { grid-column: 1 / -1; }
}

/* ---- The playground's editor: colours behind the text ---- */
.play-paper { position: relative; display: flex; flex: 1; min-width: 0; }
.play-paint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 14px 16px; border: 0;
  border-radius: 0; background: none; box-shadow: none; overflow: hidden; pointer-events: none; white-space: pre;
  tab-size: 4; font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; color: var(--text); }
/* Nothing in it may be wider or taller than the same letters in the box above it. */
.play-paint .hl-k { font-weight: inherit; }
.play-paint .hl-m { font-style: normal; }
.play-paint .hl-bad { text-decoration: underline wavy #d1493f; text-decoration-skip-ink: none; text-underline-offset: 3px; }
.play-editor #play-code.play-clear { position: relative; color: transparent; caret-color: var(--text); }
#play-code.play-clear::selection { color: transparent; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.play-live { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); cursor: pointer; }
.play-suggest .script-tag.from-script { border-style: dashed; }

/* ---- Installing a script by its id ---- */
.script-install { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.script-install code { user-select: all; }

/* ---- From Skript ---- */
.convert-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 10px; }
.convert-split label { display: block; margin: 0 0 6px; font-weight: 600; }
.convert-split textarea { display: block; width: 100%; min-height: 420px; padding: 14px 16px; resize: vertical; tab-size: 4;
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; white-space: pre; overflow: auto; }
.convert-split textarea:focus { outline: none; border-color: var(--accent); }
.convert-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.convert-bar .button { padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); background: var(--panel); text-decoration: none; }
.convert-bar .button:disabled { opacity: .5; cursor: default; }
.convert-list { margin: 8px 0; padding-left: 20px; color: var(--muted); font-size: .9rem; }
@media (max-width: 800px) { .convert-split { grid-template-columns: 1fr; } }

/* ---- The admin's log ---- */
.admin-log { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-log td, .admin-log th { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---- Comments under a user-made script ---- */
.comments { margin: 30px 0 10px; }
.comment { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.comment-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.comment-head .play-mini { margin-left: auto; }
.comment-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form textarea { display: block; width: 100%; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.comment-form .play-tools { margin-top: 8px; }
.admin-reports { margin: 10px 0; padding: 10px 14px; border: 1px solid #d1493f; border-radius: 10px; }
.admin-reports p { margin: 4px 0; }

/* ---- An addon's logo beside its name ---- */
.addon-logo { width: 56px; height: 56px; border-radius: 14px; flex: none; }

/* ---- The playground: a Skript script to paste ---- */
.play-skript textarea { display: block; width: 100%; min-height: 140px; margin: 8px 0; padding: 10px 12px; resize: vertical;
  font: .85rem/1.5 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; white-space: pre; overflow: auto; }

/* ---- The admin's analytics ---- */
/* The colours of the charts: a set that stays tellable apart for colour-blind readers, in the
   order the series are given them. They have their own steps for the dark surface. */
.admin { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4;
  --series-6: #008300; --series-other: #9a9993; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
    --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-other: #6f6e69; }
}
:root[data-theme="dark"] .admin { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-other: #6f6e69; }
.viz-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 16px; }
.viz-views { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); }
.viz-views button { padding: 6px 12px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-radius: 7px; cursor: pointer; }
.viz-views button:hover { color: var(--text); }
.viz-views button.on { color: var(--bg); background: var(--accent); }
.viz-range { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: .9rem; color: var(--muted); }
.viz-range select { padding: 6px 10px; font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; }
.viz-range select:disabled { opacity: .5; }
.viz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.viz-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); }
.viz-tile-label { font-size: .78rem; color: var(--muted); }
.viz-tile strong { font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.viz-tile-change { font-size: .74rem; color: var(--muted); }
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 0 0 14px; }
.viz-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.viz-card.viz-wide { grid-column: 1 / -1; overflow-x: auto; }
.viz-card h3 { margin: 0; font-size: 1rem; }
.viz-note { margin: 2px 0 12px; font-size: .8rem; color: var(--muted); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: .8rem; color: var(--muted); }
.viz-key { display: inline-flex; align-items: center; gap: 6px; }
.viz-key i, .viz-share i, .viz-tip-row i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.viz-plot { display: flex; gap: 8px; height: 170px; }
.viz-scale { display: flex; flex-direction: column; justify-content: space-between; min-width: 2.2em; text-align: right;
  font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-area { position: relative; flex: 1; min-width: 0; }
.viz-area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.viz-rule { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.viz-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.viz-bar { fill: var(--series-1); }
.viz-bar.on { fill: var(--text); }
.viz-tip { position: absolute; top: 4px; z-index: 2; display: flex; flex-direction: column; gap: 2px; margin: 0 8px;
  padding: 6px 10px; font-size: .78rem; white-space: nowrap; pointer-events: none; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.viz-tip[hidden] { display: none; }
.viz-tip-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.viz-ends { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0 calc(2.2em + 8px);
  font-size: .72rem; color: var(--muted); }
.viz-split { display: flex; gap: 2px; height: 18px; margin: 0 0 12px; }
.viz-split span { min-width: 3px; border-radius: 4px; }
.viz-share { display: grid; grid-template-columns: 10px 1fr auto 3.2em; align-items: center; gap: 10px; padding: 3px 0;
  font-size: .88rem; }
.viz-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-share-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-share strong { text-align: right; font-variant-numeric: tabular-nums; }
.viz-table { margin-top: 10px; font-size: .85rem; }
.viz-table summary { cursor: pointer; color: var(--muted); }
.viz-table .admin-log { margin-top: 8px; }
.viz-table[open] { max-height: 260px; overflow: auto; }
.viz-lines { margin: 0; padding-left: 18px; font-size: .88rem; }
.viz-lines li { margin: 3px 0; }
.viz-card .tally-bar { background: var(--series-1); }
.viz-card .tally-count { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .viz-range { margin-left: 0; } .viz-grid { grid-template-columns: 1fr; } }

/* ---- The admin's lists: scripts and accounts ---- */
.admin-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 8px; }
.admin-search { flex: 1 1 240px; min-width: 0; padding: 9px 12px; font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; }
.admin-search:focus { outline: none; border-color: var(--accent); }
.admin-pick { padding: 8px 10px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; }
.admin-tools .viz-range { margin-left: 0; }
.admin-summary { margin: 0 0 10px; }
.admin-item { margin: 10px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.admin-item-off { opacity: .75; border-style: dashed; }
.admin-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.admin-item-head > .button { margin-left: auto; }
.admin-item-name { font-size: 1.05rem; }
.admin-item-text { margin: 8px 0 0; color: var(--muted); }
.admin-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-badge { padding: 2px 9px; font-size: .74rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; white-space: nowrap; }
.admin-badge-bad { color: #fff; background: #c0392b; border-color: #c0392b; }
.admin-badge-note { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.admin-fold { margin: 10px 0 0; }
.admin-fold > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.admin-fold pre { margin: 8px 0 0; }
.admin-diff { max-height: 320px; overflow: auto; padding: 10px 12px; font: .82rem/1.5 ui-monospace, SFMono-Regular, Consolas,
  'Liberation Mono', monospace; white-space: pre; border: 1px solid var(--line); border-radius: 8px; background: var(--code-bg); }
.diff-added { display: block; color: #1a7f37; }
.diff-gone { display: block; color: #c0392b; }
:root[data-theme="dark"] .diff-added { color: #56d364; }
:root[data-theme="dark"] .diff-gone { color: #ff7b72; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diff-added { color: #56d364; }
  :root:not([data-theme="light"]) .diff-gone { color: #ff7b72; }
}
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.admin-actions .button, .admin-item .button, .admin-manage .button, .admin-reports .button { padding: 7px 14px; font: inherit;
  font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; }
.admin-actions .button:hover, .admin-item .button:hover { border-color: var(--accent); }
.admin-actions .button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.admin-actions .button:disabled { opacity: .55; cursor: default; }
.admin-actions .admin-reason { flex: 1 1 220px; width: auto; margin: 0; }
.admin-actions .play-hint { margin-left: auto; font-size: .78rem; user-select: all; }
.admin-item-result { margin: 10px 0 0; padding: 8px 12px; font-size: .88rem; border: 1px solid var(--line); border-radius: 8px; }
.admin-item-result.good { border-color: #1a7f37; }
.admin-item-result.bad { border-color: #c0392b; }
.admin-comment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.admin-comment-text { flex: 1 1 260px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-manage { margin: 12px 0 0; padding: 4px 0 0; border-top: 1px solid var(--line); }
.admin-manage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.admin-manage-label { flex: 0 0 5.5em; font-size: .85rem; font-weight: 600; color: var(--muted); }
.admin-manage .admin-password { flex: 1 1 220px; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.admin-manage .play-hint { flex: 1 1 220px; }

/* ---- From Skript: what it cannot do, said plainly ---- */
.convert-warning { margin: 16px 0; padding: 14px 16px; color: #b3261e; background: color-mix(in srgb, #d1493f 9%, transparent);
  border: 1px solid #d1493f; border-left-width: 5px; border-radius: 10px; }
.convert-warning strong { display: block; margin: 0 0 4px; font-size: 1.05rem; }
:root[data-theme="dark"] .convert-warning { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .convert-warning { color: #ff8a80; } }
.convert-list.convert-problems { color: #b3261e; }
:root[data-theme="dark"] .convert-list.convert-problems { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .convert-list.convert-problems { color: #ff8a80; } }
.convert-heading { margin: 14px 0 0; font-weight: 700; }

/* ---- Home: how fast it is ---- */
.speed { margin: 34px 0 8px; text-align: center; }
.speed-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; text-align: left; }
@media (min-width: 760px) { .speed-tiles.speed-six { grid-template-columns: repeat(3, 1fr); } }
.speed-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); transition: transform .18s ease, border-color .18s ease; }
.speed-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.speed-tile[hidden] { display: none; }
.speed-tile strong { font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.speed-what { font-weight: 600; }
.speed-how { margin-top: 4px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.speed-live { border-style: dashed; }

/* ---- Addons: the overview ---- */
.addon-how { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.addon-how span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.addon-how strong { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  font-size: .85rem; color: var(--bg); background: var(--accent); border-radius: 50%; }
#addon-search { flex: 1 1 260px; min-width: 0; padding: 10px 14px; font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; }
#addon-search:focus { outline: none; border-color: var(--accent); }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 8px 0 30px; }
.addon-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel); transition: transform .18s ease, border-color .18s ease; }
.addon-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.addon-card[hidden] { display: none; }
.addon-card-head { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.addon-card-head span { display: flex; flex-direction: column; min-width: 0; }
.addon-card-head strong { font-size: 1.1rem; }
.addon-card-head em { font-style: normal; font-size: .8rem; color: var(--muted); }
.addon-card p { flex: 1; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.addon-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.addon-facts span { padding: 2px 9px; font-size: .72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; }
.addon-card-actions { display: flex; gap: 8px; }
.addon-card-actions .button { flex: 1; padding: 8px 10px; font-size: .9rem; font-weight: 600; text-align: center;
  text-decoration: none; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.addon-card-actions .button:hover { border-color: var(--accent); }
.addon-card-actions .button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.addon-body { margin-top: 14px; }
.addon-body > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.addon { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }

/* ---- Home: the console under the script ---- */
.code-console { max-height: 0; overflow: hidden; padding: 0 16px; border-top: 0 solid var(--line);
  font: .74rem/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--muted);
  background: color-mix(in srgb, var(--bg) 55%, var(--code-bg)); transition: max-height .45s ease, padding .45s ease; }
.code-console.open { max-height: 12em; padding: 10px 16px 12px; border-top-width: 1px; }
.console-title { display: block; margin-bottom: 4px; font: 700 .66rem/1.4 inherit; font-family: inherit;
  letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.console-line { overflow-wrap: anywhere; animation: console-in .25s ease both; }
.console-line span { opacity: .6; }
.console-good { color: var(--accent); }
.console-answer { color: var(--text); font-weight: 600; }
@keyframes console-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .code-console, .console-line { transition: none; animation: none; } }

/* ---- The footer ---- */
.site-footer { display: block; padding: 0; font-size: .88rem; }
.footer-inner { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(120px, 1fr)); gap: 28px 32px;
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 28px; }
.footer-brand { font-size: 1.25rem; font-weight: 800; text-decoration: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.site-footer a.footer-brand { color: var(--accent); }
.footer-about p { margin: 8px 0 16px; max-width: 34ch; line-height: 1.55; color: var(--muted); }
.footer-get { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer .footer-get .button { padding: 8px 14px; font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.site-footer .footer-get .button:hover { color: var(--text); border-color: var(--accent); }
.site-footer .footer-get .button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.site-footer .footer-get .button-primary:hover { color: var(--bg); }
.footer-column { display: flex; flex-direction: column; gap: 9px; }
.footer-column strong { margin-bottom: 2px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); }
.footer-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; padding: 16px 24px;
  border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); padding: 30px 18px 22px; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .site-footer { padding: 0; } }
/* The home page's script has one long line, an address; the window is given the room for it. */
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 26px; }
  .hero .code-window pre code { font-size: .8rem; }
}

/* ---- Account: the portal ---- */
.portal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: all; background: rgba(11, 6, 19, 0); animation: portal-dim 2.6s ease-in forwards;
  transition: opacity .9s ease; }
.portal-closing { opacity: 0; pointer-events: none; }
.portal-ring, .portal-core { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px;
  border-radius: 50%; }
.portal-ring { background: conic-gradient(from 0deg, #2a0a4a, #7b2ff7, #19c3a3, #2a0a4a, #b44dff, #123a8f, #2a0a4a);
  filter: blur(6px); box-shadow: 0 0 60px 10px rgba(123, 47, 247, .6);
  animation: portal-open 2.6s cubic-bezier(.6, 0, .9, .4) forwards; }
.portal-ring-2 { width: 130px; height: 130px; margin: -65px 0 0 -65px; filter: blur(3px); opacity: .85;
  animation-name: portal-open-back; }
.portal-core { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: radial-gradient(circle, #0b0613 40%, #2a0a4a);
  animation: portal-core 2.6s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes portal-open { 0% { transform: scale(0) rotate(0); } 25% { transform: scale(1) rotate(240deg); }
  45% { transform: scale(1.15) rotate(520deg); } 100% { transform: scale(26) rotate(1500deg); } }
@keyframes portal-open-back { 0% { transform: scale(0) rotate(0); } 25% { transform: scale(1) rotate(-300deg); }
  45% { transform: scale(1.1) rotate(-640deg); } 100% { transform: scale(30) rotate(-1700deg); } }
@keyframes portal-core { 0% { transform: scale(0); } 25% { transform: scale(1); } 45% { transform: scale(.9); }
  100% { transform: scale(60); } }
@keyframes portal-dim { 0%, 40% { background: rgba(11, 6, 19, 0); } 100% { background: rgba(11, 6, 19, 1); } }
@media (prefers-reduced-motion: reduce) { .portal { animation: none; background: #0b0613; }
  .portal-ring, .portal-core { animation: none; transform: scale(30); } }

/* ---- Status ---- */
:root { --status-ok: #1a9e6a; --status-some: #c98500; --status-down: #d9483b; }
.status-now { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 18px 20px; border: 1px solid var(--line);
  border-left-width: 4px; border-radius: 14px; background: var(--panel); }
.status-now strong { display: block; font-size: 1.2rem; }
.status-now span, .status-part div span { font-size: .86rem; color: var(--muted); }
.status-now.status-ok { border-left-color: var(--status-ok); }
.status-now.status-down { border-left-color: var(--status-down); }
.status-sign { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px;
  font-size: .95rem; font-weight: 700; line-height: 1; border-radius: 50%; color: #fff; background: var(--muted); }
.status-now .status-sign { width: 34px; height: 34px; font-size: 1.2rem; }
.status-now span.status-sign, .status-part span.status-sign { color: #fff; }
.status-ok > .status-sign { background: var(--status-ok); }
.status-down > .status-sign { background: var(--status-down); }
.status-parts { margin: 0 0 26px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); overflow: hidden; }
.status-part { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.status-part:first-child { border-top: 0; }
.status-part div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.status-part em { flex: none; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted); }
.status-tiles { margin: 12px 0 18px; }
.status-days { display: flex; gap: 2px; height: 38px; }
.status-day { flex: 1; min-width: 2px; border-radius: 3px; background: var(--line); }
.status-day-ok { background: var(--status-ok); }
.status-day-some { background: var(--status-some); }
.status-day-down { background: var(--status-down); }
.status-day:hover { opacity: .7; }
.status-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 8px 0 26px;
  font-size: .78rem; color: var(--muted); }
.status-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.status-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px;
  vertical-align: -1px; }
.status-chart { padding: 14px 14px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.status-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.status-grid { stroke: var(--line); stroke-width: 1; }
.status-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.status-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.status-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.status-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.status-tip { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  font-size: .8rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); pointer-events: none; }
.status-tip[hidden] { display: none; }
.status-tip span { color: var(--muted); }
.status-numbers { margin: 16px 0; }
.status-numbers summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.status-numbers td, .status-numbers th { font-variant-numeric: tabular-nums; }

/* ---- A script's own page ---- */
.script-facts { margin: 4px 0 2px; }
.script-page .script-buttons { display: flex; gap: 8px; }
.script-page .script-buttons button.button { padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.script-page .script-buttons button.button:hover { border-color: var(--accent); }
.script-page .script-buttons button.button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.script-by { margin: -6px 0 10px; color: var(--muted); }
.script-own { font-size: .8rem; font-weight: 600; text-decoration: none; }

/* ---- Not in the documentation ---- */
.secret-flip body { transform: rotate(180deg); transition: transform .9s cubic-bezier(.6, -0.3, .3, 1.3); }
.secret-toast { position: fixed; left: 50%; bottom: 28px; z-index: 9998; transform: translateX(-50%); padding: 10px 18px;
  font: 600 .9rem ui-monospace, 'Cascadia Code', Consolas, monospace; color: #06140e; border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow);
  animation: secret-toast .4s ease both; }
@keyframes secret-toast { from { opacity: 0; transform: translate(-50%, 14px); } }
.secret-rain { position: fixed; inset: 0; z-index: 9997; overflow: hidden; pointer-events: none; }
.secret-rain span { position: absolute; top: -3em; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-weight: 700; color: var(--accent); opacity: .85; animation: secret-fall linear both; }
.secret-rain span:nth-child(3n) { color: var(--accent-2); }
@keyframes secret-fall { to { transform: translateY(115vh) rotate(25deg); opacity: 0; } }

/* ---- Status: the API ---- */
.status-api { margin: 10px 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.status-api table { display: table; width: 100%; margin: 0; border: 0; font-variant-numeric: tabular-nums; }
.status-api td, .status-api th { white-space: nowrap; }
.status-api td:first-child { white-space: normal; }
.status-api td:first-child a { font: 600 .86rem ui-monospace, 'Cascadia Code', Consolas, monospace; text-decoration: none; }
.status-api-what { display: block; font-size: .8rem; color: var(--muted); }
.status-api-state .status-sign { width: 20px; height: 20px; margin-right: 6px; font-size: .75rem; vertical-align: -4px; }
.status-api-state.status-ok .status-sign { background: var(--status-ok); }
.status-api-state.status-down .status-sign { background: var(--status-down); }
.status-api-state em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--muted); }

/* ---- The Docs, by subject ---- */
.docs-contents { margin: 6px 0 34px; }
.docs-contents[hidden] { display: none; }
.docs-start { margin: 0 0 14px; color: var(--muted); }
.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.docs-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.docs-card h3 { margin: 0 0 2px; font-size: 1rem; }
.docs-card h3 a { color: var(--text); text-decoration: none; }
.docs-card h3 a:hover { color: var(--accent); }
.docs-card p { margin: 0 0 8px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.docs-card ul { margin: 0; padding: 0; list-style: none; }
.docs-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0;
  font-size: .9rem; }
.docs-card li a { text-decoration: none; }
.docs-card li a:hover { text-decoration: underline; }
.docs-card li span { flex: none; font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.docs-contents-title { margin: 26px 0 4px; font-size: 1.15rem; }
.docs-cards-addons .docs-card h3 { font-size: .95rem; margin-bottom: 6px; }
.docs-group-head { margin: 44px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
  scroll-margin-top: 140px; }
.docs-group-head[hidden] { display: none; }
.docs-group-head h2 { margin: 0; font-size: 1.5rem; }
.docs-group-head p { margin: 2px 0 0; color: var(--muted); }
.crumb span { margin-left: 10px; font-weight: 400; color: var(--muted); }
.docs-onward { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }
.docs-step { display: flex; gap: 12px; }
.docs-step a { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; font-weight: 600;
  text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.docs-step a:hover { border-color: var(--accent); }
.docs-step a span { font-size: .75rem; font-weight: 600; color: var(--muted); }
.docs-step .docs-next { text-align: right; }
.docs-group-links { margin: 14px 0 0; font-size: .9rem; line-height: 1.8; color: var(--muted); }
.docs-group-links span { font-weight: 600; color: var(--text); }
@media (max-width: 760px) { .docs-step { flex-direction: column; } .docs-step .docs-next { text-align: left; } }
/* A topic's own page shows every example opened; a long line in one must scroll inside its box
   and not widen the page on a phone. */
.docs-topic .topic, .docs-topic .entries, .docs-topic .entry, .docs-topic .entry-example { min-width: 0; max-width: 100%; }
.docs-topic .entry pre { max-width: 100%; overflow-x: auto; }

/* ---- Sending a script in as a file ---- */
.submit-file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--panel); transition: border-color .15s ease; }
.submit-file.over { border-color: var(--accent); border-style: solid; }
.submit-file .button { font: inherit; font-weight: 600; cursor: pointer; padding: 7px 14px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.submit-file .button:hover { border-color: var(--accent); }

/* The home page's "Last updated" is a link among the things it runs on, and looks like them. */
a.support-item { text-decoration: none; color: inherit; }
a.support-item:hover { border-color: var(--accent); }

/* ---- Before a user-made script is taken ---- */
dialog.script-warning { width: min(480px, calc(100vw - 32px)); padding: 22px 24px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
dialog.script-warning::backdrop { background: rgba(0, 0, 0, .55); }
dialog.script-warning h2 { margin: 0 0 10px; font-size: 1.2rem; }
dialog.script-ways h3 { margin: 16px 0 4px; font-size: 1rem; }
dialog.script-ways p { margin: 0 0 8px; color: var(--muted); }
.script-command { display: flex; align-items: center; gap: 8px; }
.script-command code { flex: 1 1 auto; min-width: 0; padding: 9px 12px; overflow-x: auto; white-space: nowrap; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); user-select: all; }
.script-command .button { flex: none; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; }
dialog.script-warning p { margin: 0 0 10px; line-height: 1.55; }
.script-warning-check { padding: 10px 12px; border-left: 3px solid #c98500; border-radius: 6px;
  background: color-mix(in srgb, #c98500 12%, transparent); }
.script-warning-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.script-warning-buttons .button { padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.script-warning-buttons .button:hover { border-color: var(--accent); }
.script-warning-buttons .button-primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* ---- Who speaks for HyperScript ---- */
.team-tag { display: inline-block; padding: 1px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle; color: var(--bg); background: var(--accent);
  border-radius: 999px; }
.script-by .team-tag, .script-meta .team-tag { margin-left: 2px; }

/* ---- The forum ---- */
.forum-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }
.forum-bar .button { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 18px; }
.forum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.forum-chip { padding: 5px 12px; font: inherit; font-size: .85rem; color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; }
.forum-chip:hover { color: var(--accent); border-color: var(--accent); }
.forum-chip.current { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.forum-form { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.forum-form-line { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.forum-title-field, .forum-category-field { padding: 9px 12px; font: inherit; color: var(--text); background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 10px; }
.forum-title-field { flex: 1 1 260px; min-width: 0; }
.forum-wrong { color: #d1493f; font-weight: 600; }
.forum-list { display: grid; gap: 8px; }
.forum-row { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.forum-row-pinned { border-color: var(--accent); }
.forum-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; font-size: 1.05rem; }
.forum-row-title a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.forum-row-title a:hover { color: var(--accent); }
.forum-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0; color: var(--muted); font-size: .86rem; }
.forum-who { display: inline-flex; align-items: center; gap: 6px; }
.forum-meta .forum-who strong { color: var(--text); }
.forum-category, .forum-mark { padding: 1px 9px; font-size: .74rem; font-weight: 600; border: 1px solid var(--line);
  border-radius: 999px; }
.forum-mark { color: var(--accent); border-color: var(--accent); }
.forum-mark-off { color: var(--muted); border-color: var(--line); }
.forum-thread-title { margin-bottom: 8px; overflow-wrap: anywhere; }
.forum-tools { margin: 10px 0 0; }
.forum-post { margin-top: 14px; }
.forum-post-team { border-left: 3px solid var(--accent); }
.forum-replies { margin: 26px 0 0; font-size: 1.05rem; }

/* ---- What an event gives, under its example ---- */
.event-gives { margin-top: 12px; font-size: .9rem; }
.event-gives p { margin: 0 0 6px; color: var(--text); }
.event-gives table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 8px; border-collapse: collapse; }
.event-gives th, .event-gives td { padding: 5px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.event-gives ul { margin: 0 0 6px; padding-left: 18px; color: var(--muted); }
.event-gives-more { font-size: .85rem; }
.event-gives td:first-child code, .event-gives td:nth-child(2) code { white-space: nowrap; }

/* ---- Since which version, and trying an example ---- */
.since { padding: 1px 7px; font-size: .68rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; }
.entry-example pre { padding-right: 136px; }
.example-try { position: absolute; top: 8px; right: 66px; font-size: .78rem; padding: 3px 10px; color: var(--accent);
  text-decoration: none; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; }
.example-try:hover { color: var(--bg); background: var(--accent); }

/* ---- Pages that are written: recipes and mistakes ---- */
.written-contents { margin: 0 0 26px; padding: 14px 18px 14px 34px; columns: 2 260px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); }
.written-contents li { margin: 2px 0; break-inside: avoid; }
.written-page h2 { margin-top: 38px; overflow-wrap: anywhere; }
.written-page .example-box { margin: 12px 0; }
.written-page .example-box pre { margin: 0; }

/* ---- The forum: code, changing a post, solved ---- */
.forum-text { white-space: normal; }
.forum-text p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.forum-text p:last-child { margin-bottom: 0; }
.forum-text pre { margin: 6px 0 10px; padding: 10px 12px; overflow-x: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; }
.forum-text pre code { white-space: pre; background: none; padding: 0; }
.forum-post-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.comment-head .forum-post-tools .play-mini { margin-left: 0; }
.forum-edit { margin-top: 6px; }
.forum-edit .forum-title-field { display: block; width: 100%; margin-bottom: 8px; }
.forum-edit .button { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 18px; }
.forum-mark-good { color: var(--bg); background: var(--accent); border-color: var(--accent); }

/* ---- The bell ---- */
.notify-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  flex: 0 0 auto; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  text-decoration: none; }
.notify-bell:hover { border-color: var(--accent); color: var(--accent); }
.notify-bell svg { width: 18px; height: 18px; }
.notify-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; font-size: .68rem;
  font-weight: 700; line-height: 18px; text-align: center; color: #fff; background: #d1393f; border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg); }
.notify-list { display: grid; gap: 6px; margin: 14px 0; }
.notify-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 11px 14px; color: var(--text);
  text-decoration: none; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.notify-row:hover { border-color: var(--accent); }
.notify-row .play-hint { margin-left: auto; }
.notify-new { border-left: 3px solid #d1393f; font-weight: 600; }
.notify-kind { padding: 1px 9px; font-size: .72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; }
.notify-choice { display: block; margin: 6px 0; font-weight: 400; cursor: pointer; }
.notify-choice input { margin-right: 6px; }

/* ---- Your scripts, and the pages of an account ---- */
.account-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.account-links .button { font: inherit; font-weight: 600; padding: 8px 16px; }
.sent-row { display: block; }
.sent-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sent-row .sent-tools { margin: 8px 0 0; }
.sent-row .sent-tools .play-hint { margin-left: 0; margin-right: auto; }
.sent-row .sent-reason { margin: 6px 0 0; }
.sent-asked { border-left-color: #c98500; }
.sent-flag { padding: 1px 9px; font-size: .74rem; font-weight: 700; color: #fff; background: #c98500; border-radius: 999px; }
.sent-messages { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sent-messages-title { margin: 0 0 8px; font-weight: 600; }
.sent-message { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.sent-message-moderator { border-left: 3px solid var(--accent); }
.sent-message-head { display: flex; gap: 10px; align-items: baseline; margin: 0 0 2px; }
.sent-message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sent-answer { margin-top: 8px; }
.sent-row.flash { animation: flash 1.6s ease-out; }
.submit-warning { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid #c98500; border-radius: 8px;
  background: color-mix(in srgb, #c98500 12%, transparent); }
.submit-warning p { margin: 0 0 6px; }
.submit-warning p:last-child { margin-bottom: 0; }
.issue-count.over { color: #d1493f; font-weight: 700; }
.script-history { margin: 26px 0 0; }
.script-history-step { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 6px 0; }

/* ---- The admin's messages about a script ---- */
.admin-messages { margin-top: 10px; }
.admin-message { margin: 6px 0; }
.admin-message-author { padding-left: 10px; border-left: 3px solid var(--accent); }
.admin-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-message-box { display: block; width: 100%; margin: 8px 0; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; resize: vertical; }

/* ---- The forum's search ---- */
.forum-find { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.forum-search { flex: 1 1 240px; min-width: 0; padding: 9px 12px; font: inherit; color: var(--text); background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 10px; }
.size-item-total { border-color: var(--accent); }

/* ---- The forum: likes and quotes ---- */
.forum-post-foot { display: flex; gap: 6px; margin: 8px 0 0; }
.forum-like.liked { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.forum-like:disabled { opacity: .6; cursor: default; }
.forum-liked { color: var(--accent); }
.forum-quote { margin: 0 0 8px; padding: 6px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted);
  border-left: 3px solid var(--line); background: var(--bg); border-radius: 0 8px 8px 0; }

/* ---- Resource packs ---- */
.packs-title { margin: 28px 0 10px; font-size: 1.15rem; }
.pack .play-tools { margin: 10px 0 0; }
.pack .play-tools .button { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 16px; }
.pack .admin-reason { flex: 1 1 200px; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; }
.pack .lead { margin: 10px 0 0; }

/* ---- The list of servers ---- */
.server-card .play-tools { margin: 10px 0 0; }
.server-card .lead { margin: 10px 0 0; }
.server-card .play-tools .button { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 16px; }
.server-address { padding: 7px 12px; font-size: .95rem; background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 8px; overflow-wrap: anywhere; }
.server-card .admin-reason { flex: 1 1 200px; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; }

/* ---- The language examples are shown in ---- */
.docs-language { flex: none; height: 36px; max-width: 124px; padding: 0 8px; font: inherit; font-size: .88rem;
  color: var(--text); background: var(--code-bg); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.docs-language:hover { border-color: var(--accent); }
.docs-language:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.language-note { margin: 0 0 22px; padding: 12px 16px; font-size: .95rem; line-height: 1.55; color: var(--text);
  background: var(--code-bg); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; }
.language-note code { padding: 2px 6px; border-radius: 5px; background: var(--bg); }
.language-back { margin-left: 4px; padding: 3px 10px; font: inherit; font-size: .88rem; color: var(--accent);
  background: none; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.language-back:hover { border-color: var(--accent); }
@media (max-width: 720px) { .docs-language { height: 40px; max-width: 104px; } }

/* ---- Tags: what a thing in the docs is about ---- */
.entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.entry-tags-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 2px; }
.tag-chip { padding: 3px 10px; font: inherit; font-size: .82rem; color: var(--text); background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-tag { display: block; padding: 9px 14px; font-size: .9rem; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid var(--line); text-decoration: none; }
.search-tag:hover { background: var(--code-bg); }
.search-tags { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; margin-top: 4px; }
.search-tag-chip { padding: 1px 7px; font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; }
.search-tag-chip.on { color: var(--accent); border-color: var(--accent); }

/* ---- Under the numbers of the home page: what the addons add ---- */
.size-note { max-width: 760px; margin: 14px auto 0; font-size: .92rem; line-height: 1.7; color: var(--muted); }
.size-note strong { color: var(--text); }
.size-note a { color: var(--accent); text-decoration: none; }
.size-note a:hover { text-decoration: underline; }
.size-count { color: var(--text); font-variant-numeric: tabular-nums; }