/* The same index, seen from its centre. No second document. */
.ascii-title { display: none; }

/* A little resistance, only when the middle switch is being investigated. */
.square--core { position: relative; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
.square--core::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px dotted var(--muted);
  opacity: 0;
  pointer-events: none;
}
.square--core:hover::after,
.square--core:focus-visible::after { opacity: .6; }
.square--core.is-holding::after {
  border-style: solid;
  animation: core-pressure 900ms linear forwards;
}
@keyframes core-pressure {
  from { transform: scale(.55); opacity: .3; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .square--core.is-holding::after { animation: none; opacity: 1; }
}

/* Adapted from the supplied Core Node theme. Every override is opt-in. */
:root.core-node {
  color-scheme: dark;
  --paper: #0d0e11;
  --ink: #e1e4ea;
  --muted: #a0a6b2;
  --line: #2b303b;
  --inset: #171a20;
  --accent: #bac6d4;
  --red: var(--ink);
  --core-font: ui-monospace, 'Courier New', Courier, Menlo, Monaco, monospace;
  --ansi-mint: #c3eddd;
  --ansi-sea: #92c9c8;
  --ansi-blue: #7c9fbd;
  --ansi-gold-light: #ffe3b0;
  --ansi-gold: #efc17c;
  --ansi-copper: #cf985c;
}
:root.core-node.night {
  --paper: #050609;
  --ink: #c3cbd7;
  --muted: #929eae;
  --line: #303743;
  --inset: #101319;
  --accent: #afc5dd;
}
.core-node body {
  padding: 20px;
  background: var(--paper);
  color: var(--muted);
  font: 12px/1.5 var(--core-font);
}
.core-node .page { max-width: 800px; margin: 0 auto; padding: 0; }
.core-node a { color: var(--ink); text-decoration: none; }
.core-node button { font: inherit; }
.core-node a:hover,
.core-node button:hover,
.core-node summary:hover { background: var(--ink); color: var(--paper); }
.core-node :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.core-node h1, .core-node h2, .core-node h3 { color: var(--ink); font-weight: normal; }
.core-node h1 { font-size: 14px; margin: 0 0 5px; line-height: 1.2; letter-spacing: normal; }
.core-node h1 a { display: inline-block; }
.core-node .paper-title { display: none; }
.core-node .ascii-title { display: block; white-space: pre; font: 12px/1.2 var(--core-font); }
/* ANSI artwork stays text: each row is one unbroken strip of character cells. */
.core-node .ansi-title {
  font: clamp(10px, 3vw, 16px)/1.17 'Courier New', Courier, monospace;
  font-variant-ligatures: none;
  letter-spacing: 0;
  color: var(--ansi-blue);
}
.core-node .ansi-row--3 { color: var(--ansi-mint); }
.core-node .ansi-row--4 { color: var(--ansi-sea); }
.core-node .ansi-zero { color: var(--ansi-gold); }
.core-node .ansi-row--1 .ansi-zero,
.core-node .ansi-row--2 .ansi-zero { color: var(--ansi-gold-light); }
.core-node .ansi-row--5 .ansi-zero { color: var(--ansi-copper); }
/* Link inversion would paint over the character artwork's transparent gaps. */
.core-node h1 a:hover { background: none; }
.core-node p { max-width: 60ch; }
.core-node .masthead { display: block; border: 0; padding: 0; margin-bottom: 25px; }
.core-node .masthead > div > p { margin-top: 12px; color: var(--ink); }
.core-node .aside-note { display: block; margin-top: 12px; font: inherit; text-align: left; }
.core-node .layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  align-items: start;
}
/* Only visual placement changes: the links and their DOM order stay intact. */
.core-node .layout > main { grid-column: 2; grid-row: 1; min-width: 0; }
.core-node .sidebar { display: block; grid-column: 1; grid-row: 1; min-width: 0; margin: 0; padding: 0; font: inherit; }
.core-node .entry { margin-bottom: 30px; padding-left: 34px; }
.core-node .number { top: 0; font: inherit; }
.core-node .number::before { content: '['; }
.core-node .number::after { content: ']'; }
.core-node .entry h2, .core-node .entry h3 { font-size: 12px; line-height: 1.5; margin: 0 0 8px; }
.core-node .entry h2 { text-transform: uppercase; }
.core-node .address { margin-top: 8px; font: inherit; }
.core-node .children { margin-top: 22px; border-left: 1px solid var(--line); padding-left: 14px; }
.core-node .children .entry { padding-left: 22px; margin-bottom: 22px; }
.core-node .children .number::before, .core-node .children .number::after { content: none; }
.core-node .annotation { margin-top: 10px; }
.core-node .annotation summary { font: inherit; }
.core-node .annotation p { border-color: var(--line); padding-left: 12px; margin-top: 12px; font: inherit; }
.core-node .sidebar section { margin-bottom: 26px; }
.core-node .sidebar h2 { font-size: 12px; text-transform: uppercase; margin-bottom: 10px; }
.core-node .sidebar li { margin-bottom: 6px; overflow-wrap: anywhere; }
.core-node .sidebar li::before { content: '-> '; color: var(--muted); }
.core-node .squares { grid-template-columns: repeat(5, 32px); gap: 3px; margin: 0 0 10px; }
.core-node .square { width: 32px; height: 32px; background: none; border: 1px solid var(--line); padding: 7px; }
.core-node .square::before { width: 16px; height: 16px; box-shadow: none; }
.core-node .square[aria-pressed=true]::before { background: var(--accent); border-color: var(--accent); }
.core-node .square:hover { background: var(--ink); }
.core-node .square:hover::before { border-color: var(--paper); }
.core-node .toy p { font: inherit; }
.core-node .quiet { padding: 6px 2px; font: inherit; }
.core-node #clear-grid { visibility: visible; margin-top: 4px; font-size: inherit; }
.core-node footer { padding-top: 12px; margin-top: 5px; }
.core-node .footer-controls { display: flex; align-items: start; gap: 20px; flex-wrap: wrap; }
.core-node .js-controls { gap: 16px; flex-wrap: wrap; }
.core-node .underneath { flex: 1; min-width: 0; }
.core-node .underneath > summary { position: static; padding: 6px 2px; width: max-content; font: inherit; }
.core-node .under-content { padding-top: 16px; max-width: none; font: inherit; }
.core-node .under-content pre { padding: 12px; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.core-node dl { grid-template-columns: minmax(0, 150px) 1fr; gap: 4px; }
.core-node .skip:focus { top: 8px; background: var(--ink); color: var(--paper); z-index: 1; }
@media (max-width: 600px) {
  .core-node body { padding: 20px 16px; }
  .core-node .layout { display: flex; flex-direction: column; gap: 24px; }
  .core-node .layout > main, .core-node .sidebar { width: 100%; }
  .core-node .sidebar { border-top: 1px solid var(--line); padding-top: 20px; }
  .core-node .entry { padding-left: 30px; }
  .core-node .children { padding-left: 10px; }
  .core-node .footer-controls { display: block; }
  .core-node .underneath { margin-top: 8px; }
}