/* LOOP — Visual Studio Code, drawn from memory, on a Windows 95 desktop.
 *
 * The rest of this desktop is beige and bevelled. This window is not: from
 * the title bar inwards it is a 2026 editor, because the joke only lands if
 * the thing looks like the thing. Everything is themed off the custom
 * properties below, which is how the four colour themes in the Settings
 * editor can be real themes rather than a class that darkens one panel.
 */

/* --- the four themes -------------------------------------------------- */

#win-loop {
  --vs-chrome:   #181818;      /* title bar, activity bar, side bar, tabs */
  --vs-bg:       #1f1f1f;      /* the editor itself */
  --vs-tab-off:  #181818;
  --vs-border:   #2b2b2b;
  --vs-fg:       #cccccc;
  --vs-bright:   #ffffff;
  --vs-dim:      #9d9d9d;
  --vs-faint:    #6e7681;
  --vs-accent:   #0078d4;
  --vs-accent-fg:#ffffff;
  --vs-status:   #181818;
  --vs-status-fg:#cccccc;
  --vs-hover:    #ffffff14;
  --vs-active:   #ffffff1f;
  --vs-input:    #313131;
  --vs-input-bd: #3c3c3c;
  --vs-sel:      #264f78;
  --vs-find:     #623315;
  --vs-shadow:   #00000073;
  --vs-red:      #f14c4c;
  --vs-yellow:   #cca700;
  --vs-green:    #4ec9b0;
  --vs-added:    #3fb950;      /* a line that just arrived from somebody else */
  --tk-key:      #c586c0;
  --tk-str:      #ce9178;
  --tk-num:      #b5cea8;
  --tk-type:     #4ec9b0;
  --tk-fn:       #dcdcaa;
  --tk-com:      #6a9955;
  --tk-op:       #d4d4d4;
  --tk-prop:     #9cdcfe;
  --tk-punct:    #808080;
}
#win-loop[data-vs-theme="dark-plus"] {
  --vs-chrome: #252526; --vs-bg: #1e1e1e; --vs-tab-off: #2d2d2d;
  --vs-border: #1e1e1e; --vs-accent: #007acc;
  --vs-status: #007acc; --vs-status-fg: #ffffff;
}
#win-loop[data-vs-theme="light-modern"] {
  --vs-chrome: #f8f8f8; --vs-bg: #ffffff; --vs-tab-off: #f8f8f8;
  --vs-border: #e5e5e5; --vs-fg: #3b3b3b; --vs-bright: #000000;
  --vs-dim: #616161; --vs-faint: #8b949e; --vs-accent: #005fb8;
  --vs-status: #f8f8f8; --vs-status-fg: #3b3b3b;
  --vs-hover: #0000000d; --vs-active: #00000014;
  --vs-input: #ffffff; --vs-input-bd: #cecece; --vs-sel: #add6ff;
  --vs-find: #ffd08a; --vs-shadow: #00000026;
  --vs-red: #e51400; --vs-yellow: #bf8803; --vs-green: #007b7b;
  --vs-added: #1a7f37;
  --tk-key: #af00db; --tk-str: #a31515; --tk-num: #098658;
  --tk-type: #267f99; --tk-fn: #795e26; --tk-com: #008000;
  --tk-op: #000000; --tk-punct: #545454; --tk-prop: #0451a5;
}
#win-loop[data-vs-theme="monokai"] {
  --vs-chrome: #1e1f1c; --vs-bg: #272822; --vs-tab-off: #1e1f1c;
  --vs-border: #191a17; --vs-fg: #f8f8f2; --vs-bright: #ffffff;
  --vs-dim: #a6a48f; --vs-faint: #75715e; --vs-accent: #a6e22e;
  --vs-accent-fg: #1e1f1c; --vs-status: #a6e22e; --vs-status-fg: #1e1f1c;
  --vs-input: #3b3a32; --vs-input-bd: #4c4a3f; --vs-sel: #49483e;
  --vs-find: #6a5b1e; --vs-added: #a6e22e;
  --tk-key: #f92672; --tk-str: #e6db74; --tk-num: #ae81ff;
  --tk-type: #66d9ef; --tk-fn: #a6e22e; --tk-com: #75715e; --tk-op: #f8f8f2;
  --tk-prop: #66d9ef;
}

/* --- the window, which stops being 1995 at the title bar -------------- */

/*  The desktop styles every text box with a bevel and a beige field. None
 *  of that applies in here, and saying so once is cheaper than fighting it
 *  in every rule below. */
#win-loop input, #win-loop textarea, #win-loop select {
  box-shadow: none; resize: none;
}
#win-loop textarea[readonly], #win-loop input[readonly] { background: var(--vs-input); }


.window.vscode {
  padding: 0;
  background: var(--vs-chrome);
  color: var(--vs-fg);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--vs-border), 0 26px 64px -18px var(--vs-shadow),
              0 4px 14px #00000055;
  font: 13px/1.45 "Segoe UI", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.window.vscode.is-max {
  position: fixed; inset: 0 0 var(--taskbar-h); width: 100%;
  max-width: none; border-radius: 0;
}
.window.vscode.is-max .loop-shell { height: auto; flex: 1; }
.window.vscode.is-max { display: flex; flex-direction: column; }

.loop-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
          stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.loop-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- title bar -------------------------------------------------------- */

.vs-titlebar {
  display: flex; align-items: center; gap: 0;
  height: 35px; padding: 0 0 0 8px;
  background: var(--vs-chrome); color: var(--vs-fg);
  border-bottom: 1px solid var(--vs-border);
  cursor: grab; user-select: none;
}
.window.dragging .vs-titlebar { cursor: grabbing; }
.vs-logo { display: grid; place-items: center; width: 26px; color: #3c9ae0; }
#win-loop[data-vs-theme="monokai"] .vs-logo { color: #a6e22e; }

.vs-menubar { display: flex; align-items: center; gap: 0; }
.vs-menu {
  border: 0; background: none; color: var(--vs-fg); cursor: pointer;
  font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 5px;
}
.vs-menu:hover, .vs-menu.is-open { background: var(--vs-hover); }
.vs-menu:focus-visible { outline: 1px solid var(--vs-accent); }

.vs-titlebar h1.vs-title-h {
  flex: 1; margin: 0; display: flex; justify-content: center;
  font: inherit; min-width: 0;
}
.vs-center {
  display: flex; align-items: center; gap: 7px;
  width: min(460px, 46%); height: 24px; padding: 0 10px;
  border: 1px solid var(--vs-border); border-radius: 6px;
  background: var(--vs-bg); color: var(--vs-dim);
  font: inherit; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.vs-center:hover { background: var(--vs-hover); color: var(--vs-fg); }
.vs-center span { overflow: hidden; text-overflow: ellipsis; }

.vs-caption { display: flex; gap: 0; align-self: stretch; }
.vs-cap {
  width: 46px; display: grid; place-items: center;
  border: 0; background: none; color: var(--vs-fg); cursor: pointer;
  box-shadow: none; height: auto;
}
.vs-cap:hover { background: var(--vs-hover); }
.vs-cap.is-close:hover { background: #c42b1c; color: #ffffff; }
.vs-cap:focus-visible { outline: 1px solid var(--vs-accent); outline-offset: -3px; }

/* --- the menus, which are real ---------------------------------------- */

.vs-menu-pop {
  position: absolute; z-index: 40; min-width: 260px; padding: 4px;
  background: var(--vs-input); color: var(--vs-fg);
  border: 1px solid var(--vs-border); border-radius: 5px;
  box-shadow: 0 8px 26px var(--vs-shadow);
}
.vs-item {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 5px 10px 5px 26px; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.vs-item:hover, .vs-item.is-on { background: var(--vs-accent); color: var(--vs-accent-fg); }
.vs-item[disabled] { color: var(--vs-faint); cursor: default; }
.vs-item[disabled]:hover { background: none; color: var(--vs-faint); }
.vs-item .vs-key { margin-left: auto; font-size: 11.5px; opacity: .7; }
.vs-item.is-checked::before { content: "✓"; position: absolute; margin-left: -17px; }
.vs-sep { height: 1px; margin: 4px 8px; background: var(--vs-border); }

/* --- the shell -------------------------------------------------------- */

.loop-shell {
  display: flex; align-items: stretch;
  height: min(76vh, 740px);
  background: var(--vs-bg); overflow: hidden;
}
.loop-mono, .loop-code, .loop-gutter, #loop-editor, .loop-mirror,
.loop-shape, .loop-term, .loop-output, .loop-json {
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-size: var(--loop-font, 13px);
  line-height: var(--loop-line, 19px);
  font-variant-ligatures: none;
}

/* --- activity bar ----------------------------------------------------- */

.loop-activity {
  display: flex; flex-direction: column; align-items: center; flex: none;
  width: 48px; padding-top: 2px;
  background: var(--vs-chrome); border-right: 1px solid var(--vs-border);
}
.loop-activity-gap { flex: 1; }
.loop-side-tab {
  position: relative; width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--vs-dim); border-left: 2px solid transparent;
}
.loop-side-tab .loop-i { width: 24px; height: 24px; stroke-width: 1; }
.loop-side-tab:hover { color: var(--vs-bright); }
.loop-side-tab.is-on { color: var(--vs-bright); border-left-color: var(--vs-accent); }
.loop-side-tab:focus-visible { outline: 1px solid var(--vs-accent); outline-offset: -4px; }
.loop-badge {
  position: absolute; right: 8px; bottom: 8px; min-width: 16px; height: 16px;
  display: grid; place-items: center; padding: 0 4px; border-radius: 8px;
  background: var(--vs-accent); color: var(--vs-accent-fg);
  font-size: 9px; font-weight: 700; line-height: 1;
}

/* --- side bar --------------------------------------------------------- */

.loop-aside {
  flex: none; width: 262px; display: flex; flex-direction: column; min-height: 0;
  background: var(--vs-chrome); border-right: 1px solid var(--vs-border);
}
.loop-shell.no-aside .loop-aside { display: none; }
.loop-aside-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 8px 9px 20px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vs-dim);
}
.loop-aside-body { flex: 1; overflow: auto; padding-bottom: 14px; }
.loop-aside-body > section { display: block; }
.loop-icon-btn {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 4px; background: none; color: var(--vs-fg); cursor: pointer;
}
.loop-icon-btn:hover { background: var(--vs-hover); }

.loop-sect { margin-bottom: 4px; }
.loop-sect-pad { padding: 4px 12px 10px; display: grid; gap: 8px; }
.loop-sect-h {
  display: flex; align-items: center; gap: 4px; width: 100%;
  padding: 3px 8px; border: 0; background: none; cursor: pointer;
  color: var(--vs-fg); font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.loop-sect-h:hover { background: var(--vs-hover); }
.loop-twist { width: 14px; height: 14px; transition: transform .12s ease; }
.loop-sect-h[aria-expanded="false"] .loop-twist { transform: rotate(-90deg); }
.loop-sect-h[aria-expanded="false"] + * { display: none; }
.loop-flip { transform: rotate(180deg); }
.loop-panel.is-hidden #loop-panel-toggle .loop-flip { transform: none; }

.loop-aside-h {
  margin: 12px 12px 10px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vs-dim); font-weight: 600;
}
.loop-aside-h-cn {
  display: grid; gap: 2px; font-size: 17px; letter-spacing: .04em;
  text-transform: none; color: #ffd54a; text-shadow: 0 0 14px #de293888;
}
.loop-aside-h-cn span {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--vs-dim);
}
.loop-aside-note { margin: 10px 12px 0; font-size: 11.5px; line-height: 1.6; color: var(--vs-dim); }
.loop-aside-note code, .loop-doc code {
  background: var(--vs-hover); border-radius: 3px; padding: 0 4px;
  font-family: Consolas, monospace; font-size: 11.5px; color: var(--tk-str);
}
.loop-input {
  width: 100%; padding: 4px 8px; border: 1px solid var(--vs-input-bd); border-radius: 3px;
  background: var(--vs-input); color: var(--vs-fg); font: inherit; font-size: 12.5px;
}
.loop-input:focus-visible { outline: 1px solid var(--vs-accent); outline-offset: -1px; }
.loop-input[readonly] { color: var(--vs-dim); }
.loop-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--vs-dim); }
.loop-blue {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 5px 10px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--vs-accent); color: var(--vs-accent-fg); font: inherit; font-size: 12.5px;
}
.loop-blue:hover { filter: brightness(1.12); }
.loop-blue:disabled { opacity: .5; cursor: default; filter: none; }

/* --- the file tree, the outline, the commits, the extensions ---------- */

.loop-tree { margin: 0; padding: 0 0 4px; list-style: none; font-size: 13px; }
.loop-tree li { list-style: none; }
.loop-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 3px 12px 3px 22px; border: 0; background: none;
  color: var(--vs-fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.loop-row:hover { background: var(--vs-hover); }
.loop-row.is-on { background: var(--vs-active); }
.loop-row em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--vs-faint); }
.loop-row.is-dirty { color: var(--vs-yellow); }
.loop-outline .loop-row { padding-left: 30px; font-size: 12.5px; }
.loop-outline .loop-i { width: 13px; height: 13px; color: var(--tk-key); }
.loop-outline .loop-row span:nth-child(2) { font-family: Consolas, monospace; }

.loop-dot {
  display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none;
  border-radius: 3px; font-size: 8px; font-weight: 700; letter-spacing: -.3px;
  font-family: Consolas, monospace; color: #1e1e1e;
}
.loop-dot.py { background: #4b8bbe; color: #ffd43b; }
.loop-dot.md { background: #519aba; color: #0b1d24; }
.loop-dot.json { background: #cbcb41; }
.loop-dot.gear { background: var(--vs-input); color: var(--vs-fg); }

.loop-find-count { margin: 0; font-size: 11.5px; color: var(--vs-dim); }
.loop-find-results { display: grid; gap: 1px; max-height: 320px; overflow: auto; }
.loop-hit {
  display: flex; gap: 8px; width: 100%; padding: 3px 6px; border: 0; border-radius: 3px;
  background: none; color: var(--vs-fg); font: inherit; font-size: 12px;
  text-align: left; cursor: pointer; white-space: pre; overflow: hidden;
}
.loop-hit:hover { background: var(--vs-hover); }
.loop-hit b { flex: none; width: 26px; color: var(--vs-faint); font-weight: 400; text-align: right; }
.loop-hit mark { background: var(--vs-find); color: inherit; border-radius: 2px; }
.loop-hit span { font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; }

.loop-scm-note { margin: 0; font-size: 11.5px; color: var(--vs-dim); }
.loop-commits { margin: 0; padding: 0; list-style: none; }
.loop-commit {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px;
  padding: 5px 12px 5px 10px; font-size: 12px;
}
.loop-commit:hover { background: var(--vs-hover); }
.loop-commit .loop-i { color: var(--vs-faint); margin-top: 2px; }
.loop-commit b { display: block; color: var(--vs-fg); font-weight: 600; }
.loop-commit code { font-family: Consolas, monospace; color: var(--tk-str); font-size: 11.5px; }
.loop-commit em { display: block; font-style: normal; font-size: 10.5px; color: var(--vs-faint); }

.loop-run-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.loop-run-row .loop-blue { width: auto; }
.loop-run-out {
  margin: 0; padding: 8px 10px; border-radius: 4px; background: var(--vs-bg);
  border: 1px solid var(--vs-border); font-family: Consolas, monospace;
  font-size: 12px; line-height: 1.6; color: var(--vs-dim); overflow-wrap: anywhere;
}
.loop-run-out b { color: var(--tk-str); }

.loop-exts { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.loop-ext {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px;
  padding: 8px 6px; border-radius: 4px; cursor: default;
}
.loop-ext:hover { background: var(--vs-hover); }
.loop-ext-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px;
  background: var(--vs-input); font-size: 16px;
}
.loop-ext b { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--vs-fg); }
.loop-ext b span { font-size: 10.5px; color: var(--vs-faint); font-weight: 400; }
.loop-ext p { margin: 1px 0 4px; font-size: 11.5px; line-height: 1.45; color: var(--vs-dim); }
.loop-ext button {
  padding: 2px 9px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--vs-accent); color: var(--vs-accent-fg); font: inherit; font-size: 11px;
}
.loop-ext button[disabled] { background: var(--vs-input); color: var(--vs-dim); cursor: default; }

/* --- the editor area -------------------------------------------------- */

.loop-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--vs-bg); }
.loop-groups { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; }
.loop-group { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.loop-group + .loop-group { border-left: 1px solid var(--vs-border); }

.loop-tabs {
  display: flex; align-items: stretch; flex: none; min-height: 35px;
  background: var(--vs-chrome); border-bottom: 1px solid var(--vs-border);
  overflow: hidden;
}
.loop-tab {
  display: flex; align-items: center; gap: 7px; padding: 0 10px 0 12px;
  max-width: 190px; border: 0; border-right: 1px solid var(--vs-border);
  background: var(--vs-tab-off); color: var(--vs-dim);
  font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.loop-tab > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.loop-tab:hover { color: var(--vs-fg); }
.loop-tab.is-on {
  background: var(--vs-bg); color: var(--vs-bright);
  box-shadow: inset 0 1px 0 var(--vs-accent); border-bottom: 1px solid var(--vs-bg);
  margin-bottom: -1px;
}
.loop-tab-x {
  display: grid; place-items: center; width: 18px; height: 18px; border: 0;
  border-radius: 4px; background: none; color: inherit; cursor: pointer; opacity: 0;
}
.loop-tab:hover .loop-tab-x, .loop-tab.is-on .loop-tab-x { opacity: .75; }
.loop-tab-x:hover { background: var(--vs-hover); opacity: 1; }
.loop-tab-x .loop-i { width: 12px; height: 12px; }
.loop-tab-spacer { flex: 1; }
.loop-typed { display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--vs-faint); }
.loop-dirty { color: var(--vs-fg); font-size: 11px; opacity: 0; }
.loop-tab.is-dirty .loop-dirty { opacity: 1; }

.loop-crumbs {
  display: flex; align-items: center; gap: 2px; flex: none; height: 22px;
  padding: 0 12px; background: var(--vs-bg); color: var(--vs-dim);
  font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
.loop-crumbs .loop-sep { width: 13px; height: 13px; transform: rotate(-90deg); opacity: .6; }
.loop-crumbs span { overflow: hidden; text-overflow: ellipsis; }
.loop-crumbs .is-code { font-family: Consolas, monospace; color: var(--tk-key); }

.loop-view { flex: 1; display: flex; min-height: 0; position: relative; background: var(--vs-bg); }

/* --- the read-only program -------------------------------------------- */

.loop-code {
  flex: 1; overflow: auto; padding: 6px 0 30px; outline: 0;
  background: var(--vs-bg); scroll-behavior: smooth;
}
.loop-line { display: flex; white-space: pre; }
.loop-line:hover { background: var(--vs-hover); }
.loop-line.is-flash { background: var(--vs-find); }
.loop-line.is-mine { box-shadow: inset 2px 0 0 var(--vs-accent); }

/*  A line that arrived from somebody else while you were looking at the
 *  file. It comes in green, one after another in commit order, and says
 *  whose it is until the highlight fades. */
.loop-line.is-arriving {
  box-shadow: inset 2px 0 0 var(--vs-added, #2ea043);
  animation: loop-arrive 5s ease-out calc(var(--n, 0) * .09s) backwards;
}
.loop-line.is-arriving::after {
  /*  Short, because the editor group can be half a window wide and this
   *  sits after the code. The toast says the rest. */
  content: "✎ " attr(data-arrival);
  margin-left: 18px; align-self: center;
  color: var(--vs-added, #2ea043); font: italic 11px "Segoe UI", sans-serif;
  animation: loop-arrive-name 5s ease-out calc(var(--n, 0) * .09s) backwards;
}
@keyframes loop-arrive {
  from { background: #2ea04366; transform: translateX(-10px); opacity: 0; }
  6% { transform: translateX(0); opacity: 1; }
  55% { background: #2ea04333; }
  to { background: transparent; }
}
@keyframes loop-arrive-name {
  from, 70% { opacity: 1; }
  to { opacity: 0; }
}

/*  The status bar's sync button turns while the poll is out. */
.loop-sb.is-spinning .loop-i { animation: loop-turn 1s linear infinite; }
.loop-num {
  flex: none; width: 58px; padding-right: 20px; text-align: right;
  color: var(--vs-faint); user-select: none;
}
.loop-line:hover .loop-num { color: var(--vs-fg); }
.loop-text { padding-right: 18px; }
.loop-blame {
  margin-left: 24px; color: var(--vs-faint); font-family: "Segoe UI", sans-serif;
  font-size: 11px; font-style: italic; opacity: 0;
}
.loop-line:hover .loop-blame { opacity: 1; }
.loop-fold { color: var(--tk-punct); }

.ln-k { color: var(--tk-key); }
.ln-s { color: var(--tk-str); }
.ln-n { color: var(--tk-num); }
.ln-t { color: var(--tk-type); }
.ln-f { color: var(--tk-fn); }
.ln-c { color: var(--tk-com); font-style: italic; }
.ln-p { color: var(--tk-punct); }
.ln-d { color: var(--tk-prop); }
.ln-ws { color: var(--vs-faint); }

/* --- the minimap, which is a real map of the real file ----------------- */

.loop-minimap {
  flex: none; width: 74px; padding: 6px 4px; overflow: hidden; position: relative;
  background: var(--vs-bg); border-left: 1px solid var(--vs-border); cursor: pointer;
}
.loop-minimap.hidden { display: none; }
.loop-mini-line { height: 2px; margin-bottom: 1px; border-radius: 1px; opacity: .62; }
.loop-mini-view {
  position: absolute; left: 0; right: 0; background: var(--vs-hover);
  border-top: 1px solid var(--vs-border); border-bottom: 1px solid var(--vs-border);
  pointer-events: none;
}

/* --- rendered markdown, JSON and the settings editor ------------------- */

.loop-doc { flex: 1; overflow: auto; padding: 22px 34px 40px; max-width: 100%; }
.loop-doc.hidden { display: none; }
.loop-doc h1 { margin: 0 0 14px; font-size: 24px; font-weight: 600; color: var(--vs-bright); }
.loop-doc h2 { margin: 26px 0 8px; font-size: 17px; font-weight: 600; color: var(--vs-bright);
               border-bottom: 1px solid var(--vs-border); padding-bottom: 5px; }
.loop-doc p, .loop-doc li { font-size: 13.5px; line-height: 1.7; color: var(--vs-fg); }
.loop-doc ol, .loop-doc ul { padding-left: 22px; }
.loop-doc li { margin-bottom: 5px; }
.loop-doc table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.loop-doc th, .loop-doc td { border: 1px solid var(--vs-border); padding: 5px 12px; text-align: left; }
.loop-doc th { background: var(--vs-hover); font-weight: 600; }
.loop-doc strong { color: var(--vs-bright); }
.loop-doc-code {
  margin: 12px 0; padding: 12px 14px; border-radius: 5px; overflow-x: auto;
  background: var(--vs-chrome); border: 1px solid var(--vs-border);
  font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
  font-size: 13px; line-height: 1.6; color: var(--vs-fg);
}
.loop-json { white-space: pre; padding: 8px 0 24px; }
.loop-json .loop-line:hover { background: var(--vs-hover); }

.loop-settings { display: grid; gap: 0; max-width: 720px; }
.loop-setting { padding: 14px 0; border-bottom: 1px solid var(--vs-border); }
.loop-setting b { display: block; font-size: 13px; color: var(--vs-bright); font-weight: 600; }
.loop-setting b code { font-family: Consolas, monospace; font-size: 12px; color: var(--vs-dim); font-weight: 400; }
.loop-setting p { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--vs-dim); }
.loop-setting select, .loop-setting input[type="number"] {
  padding: 4px 8px; border: 1px solid var(--vs-input-bd); border-radius: 3px;
  background: var(--vs-input); color: var(--vs-fg); font: inherit; font-size: 12.5px; min-width: 190px;
}
.loop-setting label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.loop-setting.is-locked { opacity: .75; }
.loop-policy {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 3px 8px; border-radius: 3px; background: var(--vs-hover);
  font-size: 11.5px; color: var(--vs-yellow);
}

/* --- the writable half ------------------------------------------------ */

.loop-group-edit { background: var(--vs-bg); }
.loop-editor-wrap { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.loop-gutter {
  flex: none; width: 58px; padding: 6px 20px 6px 0; overflow: hidden;
  text-align: right; color: var(--vs-faint); user-select: none;
}
.loop-gutter span { display: block; }
.loop-gutter span.is-here { color: var(--vs-fg); }
.loop-editor-stack { position: relative; flex: 1; min-width: 0; }
.loop-mirror, #loop-editor {
  margin: 0; padding: 6px 14px 6px 0; border: 0;
  white-space: pre; overflow: auto; tab-size: 4; word-wrap: normal;
}
.loop-mirror {
  position: absolute; inset: 0; color: var(--vs-fg);
  pointer-events: none; overflow: hidden;
}
.loop-mirror .is-bad { text-decoration: underline wavy var(--vs-red); text-underline-offset: 3px; }
#loop-editor {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none; outline: 0;
  background: transparent; color: transparent; caret-color: var(--vs-fg);
}
#loop-editor::selection { background: var(--vs-sel); color: transparent; }
#loop-editor::placeholder { color: var(--vs-faint); opacity: .75; }
#loop-editor:focus-visible { box-shadow: none; }
#loop-editor.is-refused { background: #ff000018; }

.loop-suggest {
  position: absolute; z-index: 12; min-width: 300px; max-width: 420px;
  background: var(--vs-input); border: 1px solid var(--vs-accent); border-radius: 4px;
  box-shadow: 0 6px 22px var(--vs-shadow); overflow: hidden;
}
.loop-suggest-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 9px;
  font-size: 12.5px; color: var(--vs-fg); cursor: pointer;
}
.loop-suggest-row.is-on { background: var(--vs-accent); color: var(--vs-accent-fg); }
.loop-suggest-row code { font-family: Consolas, monospace; font-size: 12px; }
.loop-suggest-row em { margin-left: auto; font-style: normal; font-size: 11px; opacity: .7; }
.loop-suggest-foot {
  padding: 4px 9px; border-top: 1px solid var(--vs-border);
  font-size: 10.5px; color: var(--vs-yellow); background: var(--vs-chrome);
}

.loop-nextup {
  display: flex; align-items: flex-start; gap: 9px; flex: none;
  margin: 0 10px 8px; padding: 9px 11px; border-radius: 4px;
  background: var(--vs-hover); border-left: 3px solid var(--vs-yellow);
}
.loop-nextup.is-flash { animation: loop-flash 1.2s ease-out; }
@keyframes loop-flash {
  0%, 100% { background: var(--vs-hover); }
  20% { background: var(--vs-find); }
}
.loop-shape-i { color: var(--vs-yellow); margin-top: 2px; }
.loop-nextup-text { display: grid; gap: 5px; min-width: 0; }
.loop-nextup-text b { font-size: 12px; font-weight: 600; color: var(--vs-fg); }
.loop-shape {
  margin: 0; color: var(--vs-dim); white-space: pre;
  overflow-x: auto; user-select: none;
}

.loop-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none;
  padding: 8px 10px; background: var(--vs-chrome); border-top: 1px solid var(--vs-border);
}
.loop-user-l { font-size: 11.5px; color: var(--vs-dim); }
#loop-user {
  width: 120px; padding: 4px 8px; border: 1px solid var(--vs-input-bd); border-radius: 3px;
  background: var(--vs-input); color: var(--vs-fg); font: inherit; font-size: 12.5px;
}
#loop-user:focus-visible { outline: 1px solid var(--vs-accent); outline-offset: -1px; }
.loop-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--vs-input-bd); background: var(--vs-input); color: var(--vs-fg);
  border-radius: 3px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.loop-ghost:hover { background: var(--vs-hover); }
.loop-ghost:focus-visible { outline: 1px solid var(--vs-accent); }
.loop-run {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  border: 0; border-radius: 3px; padding: 5px 13px; cursor: pointer;
  background: var(--vs-accent); color: var(--vs-accent-fg);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.loop-run:hover { filter: brightness(1.12); }
.loop-run:disabled { background: var(--vs-input); color: var(--vs-faint); cursor: progress; filter: none; }
kbd {
  border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 1px;
  font: inherit; font-size: 10px; opacity: .8;
}

/* --- the panel -------------------------------------------------------- */

.loop-panel {
  flex: none; display: flex; flex-direction: column; height: 190px;
  background: var(--vs-bg); border-top: 1px solid var(--vs-border);
}
.loop-panel.is-hidden { height: 35px; }
.loop-panel.is-hidden .loop-panel-body { display: none; }
.loop-panel.is-big { height: min(62vh, 520px); }
.loop-panel-tabs { display: flex; align-items: center; gap: 4px; flex: none; padding: 0 8px; height: 35px; }
.loop-panel-tab {
  border: 0; background: none; color: var(--vs-dim); cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 9px 6px 8px; border-bottom: 1px solid transparent;
  display: flex; align-items: center; gap: 6px;
}
.loop-panel-tab:hover { color: var(--vs-fg); }
.loop-panel-tab.is-on { color: var(--vs-bright); border-bottom-color: var(--vs-fg); }
.loop-panel-gap { flex: 1; }
.loop-count {
  min-width: 16px; padding: 0 5px; border-radius: 9px; background: var(--vs-input);
  color: var(--vs-fg); font-size: 9.5px; letter-spacing: 0; line-height: 15px;
}
.loop-count.is-bad { background: var(--vs-red); color: #ffffff; }
.loop-panel-body { flex: 1; min-height: 0; display: flex; }
.loop-panel-body > * { flex: 1; min-width: 0; }
.loop-pane-scroll { overflow: auto; padding: 8px 14px 14px; }

.loop-status { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--vs-fg); }
.loop-status[data-kind="good"] { color: var(--vs-green); }
.loop-status[data-kind="warn"] { color: var(--vs-yellow); }
.loop-status[data-kind="bad"]  { color: var(--vs-red); }
.loop-problems { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.loop-problem { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; }
.loop-problem .loop-i { margin-top: 2px; }
.loop-problem.is-bad .loop-i { color: var(--vs-red); }
.loop-problem.is-warn .loop-i { color: var(--vs-yellow); }
.loop-problem.is-info .loop-i { color: var(--vs-accent); }
.loop-problem em { font-style: normal; color: var(--vs-faint); font-size: 11.5px; }
.loop-empty { margin: 0; font-size: 12.5px; color: var(--vs-dim); }

.loop-output { padding: 8px 0; white-space: pre-wrap; word-break: break-word; }
.loop-output div { display: flex; gap: 10px; padding: 1px 0; }
.loop-output i { flex: none; font-style: normal; color: var(--vs-faint); }
.loop-output .is-bad { color: var(--vs-red); }
.loop-output .is-good { color: var(--vs-green); }
.loop-output .is-dim { color: var(--vs-dim); }

.loop-term-wrap { display: flex; flex-direction: column; min-height: 0; padding: 6px 14px 8px; }
.loop-term { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.loop-term div { padding: 1px 0; }
.loop-term .is-cmd { color: var(--vs-fg); }
.loop-term .is-cmd b { color: var(--vs-green); font-weight: 400; }
.loop-term .is-err { color: var(--vs-red); }
.loop-term .is-dim { color: var(--vs-dim); }
.loop-term .is-ok { color: var(--vs-green); }
.loop-term-form { display: flex; align-items: center; gap: 8px; flex: none; }
.loop-term-prompt { color: var(--vs-green); font-family: Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
#loop-term-input {
  flex: 1; border: 0; outline: 0; background: none; color: var(--vs-fg);
  font-family: Consolas, monospace; font-size: 12.5px; caret-color: var(--vs-fg);
}

/* --- the status bar --------------------------------------------------- */

.loop-statusbar {
  display: flex; align-items: center; gap: 2px; flex: none; height: 22px;
  padding: 0 4px; background: var(--vs-status); color: var(--vs-status-fg);
  border-top: 1px solid var(--vs-border); font-size: 11.5px; overflow: hidden;
}
.loop-sb {
  display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px;
  border: 0; background: none; color: inherit; font: inherit; font-size: 11.5px;
  white-space: nowrap; cursor: pointer;
}
button.loop-sb:hover { background: var(--vs-hover); }
.loop-sb .loop-i { width: 14px; height: 14px; }
.loop-sb-remote { background: var(--vs-accent); color: var(--vs-accent-fg); }
.loop-sb-remote:hover { filter: brightness(1.15); }
.loop-sb-spacer { flex: 1; }
.loop-sb-hint { min-width: 0; cursor: default; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.loop-sb-quiet { cursor: default; opacity: .85; }
.loop-sb b { font-weight: 600; }
#loop-sb-credit { color: #ffd54a; }
#win-loop[data-vs-theme="dark-plus"] #loop-sb-credit,
#win-loop[data-vs-theme="monokai"] #loop-sb-credit { color: inherit; }

/* --- notifications ---------------------------------------------------- */

.loop-toasts {
  position: absolute; right: 16px; bottom: 34px; z-index: 30;
  display: grid; gap: 8px; width: 340px; justify-items: stretch;
}
.loop-toast {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 9px;
  padding: 11px 12px; border: 1px solid var(--vs-border); border-radius: 5px;
  background: var(--vs-input); color: var(--vs-fg);
  box-shadow: 0 8px 28px var(--vs-shadow); font-size: 12.5px; line-height: 1.5;
  animation: loop-rise .18s ease-out;
}
.loop-toast .loop-i { margin-top: 1px; }
.loop-toast.is-good .loop-i { color: var(--vs-green); }
.loop-toast.is-bad .loop-i { color: var(--vs-red); }
.loop-toast.is-warn .loop-i { color: var(--vs-yellow); }
.loop-toast-x { border: 0; background: none; color: var(--vs-dim); cursor: pointer; padding: 0; }
.loop-toast-x:hover { color: var(--vs-fg); }
.loop-toast b { display: block; color: var(--vs-bright); }
.loop-toast-cn {
  display: block; margin-top: 3px; color: #ffd54a; font-size: 12px;
  text-shadow: 0 0 10px #de293866;
}
@keyframes loop-rise { from { transform: translateY(8px); opacity: 0; } }

/* --- the command palette ---------------------------------------------- */

.loop-quick {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 45;
  width: min(620px, 78%); padding: 6px;
  background: var(--vs-input); border: 1px solid var(--vs-border); border-radius: 6px;
  box-shadow: 0 14px 44px var(--vs-shadow);
}
.loop-quick-input {
  width: 100%; padding: 5px 8px; border: 1px solid var(--vs-accent); border-radius: 3px;
  background: var(--vs-bg); color: var(--vs-fg); font: inherit; font-size: 13px; outline: 0;
}
.loop-quick-list { max-height: 320px; overflow: auto; margin-top: 6px; }
.loop-quick-row {
  display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 4px;
  font-size: 12.5px; color: var(--vs-fg); cursor: pointer;
}
.loop-quick-row.is-on { background: var(--vs-accent); color: var(--vs-accent-fg); }
.loop-quick-row .loop-i { opacity: .8; }
.loop-quick-row i { font-style: normal; color: var(--vs-faint); font-size: 11.5px; }
.loop-quick-row.is-on i { color: inherit; opacity: .8; }
.loop-quick-row em { margin-left: auto; font-style: normal; font-size: 11px; opacity: .75; }
.loop-quick-empty { padding: 8px; font-size: 12.5px; color: var(--vs-dim); }

/* --- the leaderboard, which is not subtle ------------------------------ */

.loop-board { display: grid; gap: 7px; }
.loop-board-empty { margin: 0; font-size: 12px; color: var(--vs-dim); }
.loop-citizen {
  position: relative; display: grid; gap: 8px; align-items: center;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 9px 10px; border-radius: 5px;
  background: linear-gradient(135deg, #3a1f22, #2b1a1c);
  border: 1px solid #5a2a2e;
}
.loop-citizen.is-supreme {
  background: linear-gradient(135deg, #de2938, #a3141f 55%, #7d0d16);
  border-color: #ffd54a; box-shadow: 0 0 0 1px #ffd54a44, 0 4px 18px #de293855;
}
.loop-place {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #00000040; color: #ffd54a; font-weight: 700; font-size: 14px;
}
.loop-citizen.is-supreme .loop-place { background: #ffd54a; color: #a3141f; }
.loop-who { display: grid; gap: 2px; min-width: 0; }
.loop-who strong { color: #ffffff; font-size: 13px; overflow-wrap: anywhere; }
.loop-title-cn { font-size: 10.5px; color: #ffd54abb; }
.loop-citizen.is-supreme .loop-title-cn { color: #ffe9a8; }
.loop-score { display: grid; justify-items: end; gap: 1px; }
.loop-score b { font-size: 16px; color: #ffd54a; font-variant-numeric: tabular-nums; }
.loop-score span { font-size: 9px; color: #ffffff77; letter-spacing: .04em; }
.loop-lantern { position: absolute; top: -7px; right: -5px; font-size: 17px; animation: loop-sway 3.4s ease-in-out infinite; }
@keyframes loop-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.loop-anthem { margin: 11px 0 0; font-size: 11.5px; line-height: 1.6; color: #ffd54a99; text-align: center; }


/* --- the secondary side bar: the standings, always up ------------------ */

.loop-secondary {
  flex: none; width: 268px; display: flex; flex-direction: column; min-height: 0;
  background: var(--vs-chrome); border-left: 1px solid var(--vs-border);
}
.loop-sec-head { padding: 8px 8px 8px 14px; }
.loop-sec-title {
  display: grid; gap: 1px; font-size: 15px; letter-spacing: .04em;
  text-transform: none; color: #ffd54a; text-shadow: 0 0 14px #de293877;
}
.loop-sec-title em {
  font-style: normal; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vs-dim);
}
.loop-sec-body { flex: 1; overflow: auto; padding: 4px 12px 14px; }
/*  Gold on a white side bar is a rumour rather than a colour, so the light
 *  theme takes the flag's red instead. */
#win-loop[data-vs-theme="light-modern"] .loop-sec-title { color: #b3121f; text-shadow: none; }
#win-loop[data-vs-theme="light-modern"] .loop-anthem { color: #a3141f; }
.loop-secondary.is-pulsing { animation: loop-pulse 1.1s ease-out 2; }
@keyframes loop-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  40% { box-shadow: inset 0 0 26px -6px #ffd54a99; }
}

/*  Your own standing, kept above the table so the number you just earned
 *  is on screen before you go looking for your name in the list. */
.loop-me {
  display: grid; gap: 3px; margin-bottom: 11px; padding: 10px 11px;
  border-radius: 6px; border: 1px solid #5a2a2e;
  background: linear-gradient(135deg, #2b1a1c, #241618);
}
.loop-me.is-top { border-color: #ffd54a; background: linear-gradient(135deg, #7d0d16, #a3141f); }
.loop-me-score { display: flex; align-items: baseline; gap: 7px; }
.loop-me-score b { font-size: 26px; line-height: 1; color: #ffd54a; font-variant-numeric: tabular-nums; }
.loop-me-score span { font-size: 11px; color: #ffd54abb; }
.loop-me-who { font-size: 12px; color: #ffffff; overflow-wrap: anywhere; }
.loop-me-note { font-size: 10.5px; color: #ffffff99; }
.loop-me.is-new { animation: loop-bump .7s ease-out; }
@keyframes loop-bump { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.loop-citizen.is-me { outline: 1px solid #ffd54a88; outline-offset: 1px; }

/* --- the ceremony ------------------------------------------------------ */

/*  Everything in here is drawn over the editor for a few seconds and then
 *  removed. The intensity custom property is the count of numbers just
 *  claimed, normalised: it scales how many things fly, how fast they fly,
 *  and how hard the window shakes. */
.loop-ceremony {
  position: absolute; inset: 0; z-index: 38; overflow: hidden;
  pointer-events: none; border-radius: 9px;
}
.loop-cer-glow {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 100%, #de293855, transparent 62%);
  animation: loop-fade 2.4s ease-out forwards;
}
.loop-ceremony[data-tier="3"] .loop-cer-glow,
.loop-ceremony[data-tier="4"] .loop-cer-glow,
.loop-ceremony[data-tier="5"] .loop-cer-glow,
.loop-ceremony[data-tier="6"] .loop-cer-glow,
.loop-ceremony[data-tier="7"] .loop-cer-glow {
  background: radial-gradient(130% 100% at 50% 100%, #de2938aa, #a3141f33 45%, transparent 70%);
}
@keyframes loop-fade { from { opacity: 0; } 25% { opacity: 1; } to { opacity: 0; } }

.loop-cer-flag {
  position: absolute; left: -60%; top: 0; width: 60%; height: 100%;
  object-fit: cover; opacity: .9; filter: saturate(1.2);
  animation: loop-sweep 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
.loop-cer-flag.is-second { animation-delay: .45s; opacity: .55; }
@keyframes loop-sweep {
  from { transform: translateX(0) skewX(-9deg); opacity: 0; }
  20% { opacity: .95; }
  to { transform: translateX(290%) skewX(-9deg); opacity: 0; }
}

.loop-cer-portrait {
  position: absolute; left: 50%; bottom: 8%; width: 210px; margin-left: -105px;
  border-radius: 50%; border: 3px solid #ffd54a;
  box-shadow: 0 0 44px #ffd54a66, 0 12px 40px #000000aa;
  animation: loop-rise 3s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes loop-rise {
  from { transform: translateY(70px) scale(.7); opacity: 0; }
  30% { transform: translateY(0) scale(1); opacity: 1; }
  75% { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-26px) scale(1.04); opacity: 0; }
}

.loop-cer-rock {
  position: absolute; bottom: 24px; width: 150px;
  animation: loop-bob .55s ease-in-out infinite alternate, loop-fade 4s ease-out forwards;
}
.loop-cer-rock.is-left { left: 26px; }
.loop-cer-rock.is-right { right: 26px; transform: scaleX(-1); }
@keyframes loop-bob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-14px) rotate(4deg); } }

.loop-cer-camera {
  position: absolute; right: 2%; top: -4%; width: 190px; opacity: .92;
  animation: loop-watch 3.4s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes loop-watch {
  from { transform: translateY(-110%) rotate(6deg); }
  28% { transform: translateY(0) rotate(0); }
  80% { transform: translateY(0) rotate(0); opacity: .92; }
  to { transform: translateY(-40%) rotate(-4deg); opacity: 0; }
}

.loop-cer-chill {
  position: absolute; left: 6%; top: 8%; width: 210px;
  animation: loop-drop 3.6s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes loop-drop {
  from { transform: translateY(-130%) rotate(-25deg); opacity: 0; }
  22% { transform: translateY(0) rotate(0); opacity: 1; }
  78% { transform: translateY(0) rotate(0); opacity: 1; }
  to { transform: translateY(-30%) rotate(14deg); opacity: 0; }
}

.loop-bit {
  position: absolute; bottom: -80px; width: var(--size, 40px);
  animation: loop-fly var(--life, 2.6s) linear var(--delay, 0s) forwards;
  will-change: transform;
}
.loop-bit-glyph {
  position: absolute; bottom: -60px; font-size: var(--size, 34px); line-height: 1;
  color: #ffd54a; text-shadow: 0 0 12px #de2938aa;
  animation: loop-fly var(--life, 2.6s) linear var(--delay, 0s) forwards;
}
@keyframes loop-fly {
  from { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  to { transform: translateY(calc(-100vh - 140px)) rotate(var(--spin, 180deg)); opacity: 0; }
}

.loop-cer-card {
  position: absolute; left: 50%; top: 26%; transform: translateX(-50%);
  min-width: 300px; padding: 18px 26px 16px; text-align: center;
  border-radius: 10px; border: 1px solid #ffd54a;
  background: linear-gradient(135deg, #de2938ee, #7d0d16ee);
  box-shadow: 0 18px 60px #000000aa, 0 0 0 1px #ffd54a44;
  color: #ffffff; animation: loop-card 3s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes loop-card {
  from { transform: translateX(-50%) scale(.82); opacity: 0; }
  14% { transform: translateX(-50%) scale(1.04); opacity: 1; }
  24% { transform: translateX(-50%) scale(1); }
  82% { transform: translateX(-50%) scale(1); opacity: 1; }
  to { transform: translateX(-50%) scale(1.02) translateY(-14px); opacity: 0; }
}
.loop-cer-plus {
  font: 700 46px/1 "Segoe UI", system-ui, sans-serif; color: #ffd54a;
  text-shadow: 0 3px 0 #7d0d16, 0 0 26px #ffd54a77; font-variant-numeric: tabular-nums;
}
.loop-cer-unit { margin-top: 2px; font-size: 13px; letter-spacing: .08em; color: #ffe9a8; }
.loop-cer-gained {
  display: inline-block; margin-top: 9px; padding: 3px 11px; border-radius: 11px;
  background: #ffd54a; color: #7d0d16;
  font: 600 12.5px/1.4 Consolas, monospace;
}
.loop-cer-title { margin-top: 9px; font-size: 15px; font-weight: 600; }
.loop-cer-total { margin-top: 3px; font-size: 12px; color: #ffffffcc; }
.loop-cer-sample { margin-top: 7px; font: 11.5px/1.5 Consolas, monospace; color: #ffffffaa; overflow-wrap: anywhere; }

.window.vscode.is-shaking { animation: loop-shake .42s ease-in-out var(--shakes, 3); }
@keyframes loop-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--shake, 3px) * -1), var(--shake, 3px)); }
  50% { transform: translate(var(--shake, 3px), calc(var(--shake, 3px) * -1)); }
  75% { transform: translate(calc(var(--shake, 3px) * .6), var(--shake, 3px)); }
}

/* --- and then, past twenty-five ----------------------------------------
 *
 *  Tier 3 is where the ceremony used to stop: everything in `china
 *  assets/` on the screen at once. Everything below this line is what
 *  twenty-six and up added, and none of it is selected below tier 4, so
 *  the four rungs above cannot be disturbed by any of it.
 *
 *  `--fury` is the one knob the whole parade turns on: 0 at twenty-five
 *  lines, 1 at two hundred, which is the most the checker accepts in a
 *  single save. Durations shrink as it climbs, counts grow.
 */

/*  Tier 5 and up does not fit in the editor, so it gets a second layer on
 *  the desktop itself: over the taskbar at 100, under a modal at 200. */
.loop-sky {
  position: fixed; inset: 0; z-index: 150;
  overflow: hidden; pointer-events: none;
}

/*  A starburst that turns behind everything, faster the bigger the save. */
.loop-cer-rays {
  position: absolute; left: 50%; top: 44%;
  width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(from 0deg,
    #ffd54a26 0deg 6deg, transparent 6deg 17deg);
  animation: loop-turn calc(15s - var(--fury, 0) * 11.5s) linear infinite,
             loop-fade 5.5s ease-out forwards;
}
@keyframes loop-turn { to { transform: rotate(360deg); } }

/*  A slogan banner, one more slogan per rung. */
.loop-cer-banner {
  position: absolute; left: 0; right: 0; top: 11%;
  padding: 7px 0; overflow: hidden;
  background: linear-gradient(#de2938f0, #a3141ff0);
  border-top: 2px solid #ffd54a; border-bottom: 2px solid #ffd54a;
  box-shadow: 0 0 44px #de293899;
  animation: loop-unfurl .45s cubic-bezier(.2, .9, .3, 1) backwards,
             loop-fade 6.5s ease-out forwards;
}
.loop-cer-slogans {
  display: flex; width: max-content;
  animation: loop-march calc(17s - var(--fury, 0) * 12s) linear infinite;
}
.loop-cer-slogans > span {
  white-space: nowrap; letter-spacing: .06em;
  font: 800 clamp(15px, 2vw, 30px)/1.25 "Segoe UI", system-ui, sans-serif;
  color: #ffe9a8; text-shadow: 0 2px 0 #7d0d16;
}
@keyframes loop-march { to { transform: translateX(-50%); } }
@keyframes loop-unfurl { from { transform: scaleY(0); opacity: 0; } }

/*  One more flag per rung, each sweeping in behind the last. */
.loop-cer-flag.is-extra {
  opacity: .5;
  animation-delay: calc(.18s + var(--n, 0) * .26s);
}

/*  Cameras along the top. Somebody has to witness this. */
.loop-cer-eye {
  position: absolute; top: -5%; width: clamp(84px, 8vw, 165px); opacity: .9;
  margin-left: clamp(-82px, -4vw, -42px);
  animation: loop-watch 3.6s cubic-bezier(.2, .8, .3, 1) calc(var(--n, 0) * .11s) forwards;
}

/*  Tier 5: the screen strobes and the desktop under it moves. */
.loop-cer-strobe {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(75% 65% at 50% 55%, #de2938aa, #ffd54a22 55%, transparent 72%);
  animation: loop-strobe calc(.46s - var(--fury, 0) * .28s) steps(2, jump-none) infinite alternate,
             loop-fade 7s ease-out forwards;
}
@keyframes loop-strobe { from { opacity: .2; } to { opacity: .9; } }

body.loop-quake { animation: loop-quake .3s ease-in-out var(--quakes, 6); }
@keyframes loop-quake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(calc(var(--quake, 4px) * -1), var(--quake, 4px)) rotate(-.28deg); }
  45% { transform: translate(var(--quake, 4px), calc(var(--quake, 4px) * -1)) rotate(.28deg); }
  70% { transform: translate(calc(var(--quake, 4px) * .55), var(--quake, 4px)) rotate(-.14deg); }
}

/*  Tier 6: a ring of the same face, orbiting the middle of the screen. */
.loop-cer-ring {
  position: absolute; left: 50%; top: 48%; width: 0; height: 0;
  animation: loop-turn calc(10s - var(--fury, 0) * 5.5s) linear infinite,
             loop-fade 7s ease-out forwards;
}
.loop-cer-face {
  --face-size: clamp(60px, 6.5vw, 116px);
  position: absolute;
  width: var(--face-size);
  margin: calc(var(--face-size) / -2) 0 0 calc(var(--face-size) / -2);
  border-radius: 50%; border: 3px solid #ffd54a;
  box-shadow: 0 0 26px #ffd54a88, 0 6px 20px #000000aa;
  transform:
    rotate(var(--a, 0deg))
    translateY(calc(-21vmax - var(--fury, 0) * 7vmax))
    rotate(calc(var(--a, 0deg) * -1));
}

/*  Tier 7: two hundred lines in one save. Nothing is left to add, so the
 *  screen is hit with a flashbang and the colours come off their hinges.
 *  The quake keeps `transform`; this only touches `filter`, so the two
 *  run together instead of fighting over the same property. */
.loop-cer-white {
  position: absolute; inset: 0; background: #fff;
  animation: loop-bang 1.5s ease-out forwards;
}
@keyframes loop-bang {
  0% { opacity: 1; }
  11% { opacity: .08; }
  19% { opacity: .92; }
  30% { opacity: .05; }
  39% { opacity: .62; }
  52% { opacity: .04; }
  to { opacity: 0; }
}
body.loop-punch { animation: loop-punch 1.6s ease-out; }
body.loop-quake.loop-punch {
  animation: loop-quake .3s ease-in-out var(--quakes, 6),
             loop-punch 1.6s ease-out;
}
@keyframes loop-punch {
  0%, 100% { filter: none; }
  6% { filter: invert(1) hue-rotate(90deg) saturate(2.4); }
  13% { filter: none; }
  21% { filter: invert(1) saturate(3); }
  29% { filter: none; }
  41% { filter: hue-rotate(185deg) saturate(2.6); }
  54% { filter: none; }
  63% { filter: invert(1) hue-rotate(300deg); }
  71% { filter: none; }
}

/*  The card grows and reddens with the rungs, wherever it is drawn. */
.loop-sky .loop-cer-card { top: 34%; }
.loop-ceremony[data-tier="4"] .loop-cer-card,
.loop-sky[data-tier="5"] .loop-cer-card {
  min-width: 340px; box-shadow: 0 18px 70px #000000cc, 0 0 0 2px #ffd54a66, 0 0 90px #de293888;
}
.loop-sky[data-tier="6"] .loop-cer-card,
.loop-sky[data-tier="7"] .loop-cer-card {
  min-width: 400px; padding: 24px 34px 20px;
  border-width: 2px;
  box-shadow: 0 22px 90px #000000dd, 0 0 0 3px #ffd54a88, 0 0 140px #de2938aa;
}
.loop-sky[data-tier="6"] .loop-cer-plus,
.loop-sky[data-tier="7"] .loop-cer-plus { font-size: 62px; }
.loop-sky[data-tier="7"] .loop-cer-card { animation-name: loop-card, loop-throb; }
@keyframes loop-throb {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.35) saturate(1.5); }
}

/*  The stamp that lands on the card once the committee is impressed. */
.loop-cer-stamp {
  position: absolute; right: -16px; bottom: -13px;
  padding: 4px 12px; border: 3px solid #ffd54a; border-radius: 4px;
  background: #7d0d16cc;
  font: 800 15px/1.2 "Segoe UI", system-ui, sans-serif;
  color: #ffd54a; text-shadow: 0 1px 0 #3c060b;
  transform: rotate(-14deg);
  animation: loop-stamp .5s cubic-bezier(.2, 1.5, .4, 1) .6s backwards;
}
@keyframes loop-stamp {
  from { transform: rotate(-14deg) scale(3.6); opacity: 0; }
  55% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-cer-flag, .loop-cer-portrait, .loop-cer-rock, .loop-cer-camera,
  .loop-cer-chill, .loop-bit, .loop-bit-glyph, .loop-cer-glow,
  .loop-sky, .loop-cer-rays, .loop-cer-banner, .loop-cer-eye,
  .loop-cer-strobe, .loop-cer-ring, .loop-cer-white, .loop-cer-stamp { display: none; }
  .loop-cer-card { animation: none; }
  .window.vscode.is-shaking { animation: none; }
  body.loop-quake, body.loop-punch, body.loop-quake.loop-punch { animation: none; }
}

/* The desktop icon: the editor's own mark, on a desktop that predates it
   by thirty years. */
.ico-loop {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%230098ff'/%3E%3Cstop%20offset='1'%20stop-color='%230065a9'/%3E%3C/linearGradient%3E%3Cpath%20fill='url(%23g)'%20fill-rule='evenodd'%20d='M70.9%2099.3c1.6.6%203.4.6%205-.2l20.6-9.9c2.2-1%203.5-3.2%203.5-5.6V16.4c0-2.4-1.4-4.6-3.5-5.6L75.9.9c-2.1-1-4.5-.8-6.4.6-.3.2-.5.4-.7.6L29.4%2038%2012.2%2025c-1.6-1.2-3.8-1.1-5.3.2l-5.5%205c-1.8%201.7-1.8%204.5%200%206.2L16.2%2050%201.4%2063.6c-1.8%201.7-1.8%204.5%200%206.2l5.5%205c1.5%201.3%203.7%201.4%205.3.2l17.2-13L68.8%2097.9c.6.6%201.3%201.1%202.1%201.4ZM75%2027.3%2045.1%2050%2075%2072.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shortcut .ico-loop { width: 32px; height: 32px; }

/* --- smaller screens: VS Code folds the same way ----------------------- */

@media (max-width: 1180px) {
  .loop-groups { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .loop-group + .loop-group { border-left: 0; border-top: 1px solid var(--vs-border); }
  .loop-minimap { display: none; }
}
@media (max-width: 1320px) {
  .loop-secondary { width: 232px; }
}
@media (max-width: 900px) {
  .loop-aside, .loop-secondary { display: none; }
  .vs-menubar, .vs-center { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .loop-lantern { animation: none; }
  .loop-toast { animation: none; }
  .loop-code { scroll-behavior: auto; }
  /*  An arriving line still has to be findable, so it keeps the colour
   *  and loses only the slide and the fade. */
  .loop-line.is-arriving { animation: none; background: #2ea04333; }
  .loop-line.is-arriving::after { animation: none; }
  .loop-sb.is-spinning .loop-i { animation: none; }
}