.page-field[data-astro-cid-p6lti2nl] {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
}

.col-handle[data-astro-cid-p6lti2nl] {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 15px;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
}

.col-handle--left[data-astro-cid-p6lti2nl] {
  left: calc(50% - var(--container-w, var(--container-default)) / 2);
  margin-left: -7px;
}

.col-handle--right[data-astro-cid-p6lti2nl] {
  left: calc(50% + var(--container-w, var(--container-default)) / 2);
  margin-left: -7px;
}

.col-handle[data-astro-cid-p6lti2nl]:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #008ff0;
  opacity: 0;
  transition: opacity .15s var(--ease);
}

.col-handle[data-astro-cid-p6lti2nl]:hover:before, .col-handle[data-astro-cid-p6lti2nl].is-dragging:before {
  opacity: 1;
}

.col-handle__grip[data-astro-cid-p6lti2nl] {
  position: relative;
  width: 5px;
  height: 40px;
  border-radius: 3px;
  background: var(--bg);
  opacity: 0;
  transform: scaleY(.5);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  box-shadow: 0 0 0 1.5px #008ff0;
}

.col-handle[data-astro-cid-p6lti2nl]:hover .col-handle__grip[data-astro-cid-p6lti2nl], .col-handle[data-astro-cid-p6lti2nl].is-dragging .col-handle__grip[data-astro-cid-p6lti2nl] {
  opacity: 1;
  transform: scaleY(1);
}

@media (width >= 1201px) and (pointer: fine) {
  .col-handle[data-astro-cid-p6lti2nl] {
    display: flex;
  }
}
/* global, but every rule is prefixed (.ed, .ed-bar): the guest book's live
     lines are added by script, outside Astro's scoped styles */
  /* ── The editor's voice: one mono face, one size ── */
  .ed {
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --size: clamp(13px, calc(var(--w-eff) * 0.0205), 18px);
    --gut: 5ch;                                            /* line-number column */
    --c-mk: var(--fg-dim);                                 /* # ## - > [ ]( ) */
    --c-tx: var(--fg-muted);                               /* body text */
    --c-hi: var(--fg);                                     /* headings, links, names */
    --c-cm: color-mix(in srgb, var(--fg) 45%, transparent);  /* // comments */
    --c-line: color-mix(in srgb, var(--fg) 4%, transparent); /* hovered line */
    --c-field: color-mix(in srgb, var(--fg) 7%, transparent);

    max-width: var(--container-w, var(--container-default));
    margin: 0 auto;
    background: var(--bg);
    border-left: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
    /* clear the fixed avatar and theme toggle, like the homepage */
    padding-top: calc(44px + var(--wrap-pad) + 1rem);
    padding-bottom: calc(var(--section-gap) * 0.8);
    font-family: var(--mono);
    font-size: var(--size);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--c-tx);
    font-variant-ligatures: none;
  }
  @media (min-width: 821px) { .ed { padding-top: calc(44px + var(--wrap-pad) * 2 + 0.875rem); } }
  @media (max-width: 820px) { .ed { border-left: 0; border-right: 0; --gut: 4ch; } }
  .ed :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; }
  .ed :is(ul, ol) { list-style: none; }

  .ed .mk { color: var(--c-mk); }
  .ed .hi { color: var(--c-hi); }
  .ed .cm { color: var(--c-cm); }
  .ed a { color: var(--c-hi); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: text-decoration-color 0.15s var(--ease); }
  .ed a:hover { text-decoration-color: currentColor; }
  .ed a.url { color: var(--c-cm); }
  .ed a.url:hover { color: var(--c-hi); }
  .ed a:focus-visible { outline: 1px solid var(--c-hi); outline-offset: 2px; border-radius: 2px; }

  /* ── File tabs: the name of what's open, on a hairline ── */
  .ed-tab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2ch;
    flex-wrap: wrap;
    /* full-bleed to the column's hairlines */
    margin: 0 calc(var(--wrap-pad) * -1) 0.6em;
    padding: 0 var(--wrap-pad) 0.6em calc(var(--wrap-pad) + var(--gut));
    border-bottom: 1px solid var(--hairline);
  }
  .ed-tab__meta { color: var(--c-cm); }
  /* the footer's rafael.md robot, hung in the line-number gutter: its drawn
     right edge (0.175em in from the box) lines up with the line numbers'
     right edge, 2ch before the text, so the name stays aligned with the text */
  .ed-tab__ico {
    width: 1.05em; height: 1.05em;
    display: inline-block; vertical-align: -0.17em;
    margin-left: calc(-1.05em - 2ch + 0.175em); margin-right: calc(2ch - 0.175em);
  }
  .ed-section { margin-top: 3em; }

  /* ── Numbered lines ── */
  .ed-doc { counter-reset: ln; margin: 0 calc(var(--wrap-pad) * -1); }
  .ed .l {
    counter-increment: ln;
    display: grid;
    grid-template-columns: var(--gut) minmax(0, 1fr);
    padding: 0 var(--wrap-pad);
    min-height: 1.7em;
  }
  .ed .l::before {
    content: counter(ln);
    color: var(--c-mk);
    text-align: right;
    padding-right: 2ch;
    font-variant-numeric: tabular-nums;
  }
  .ed .l:hover { background: var(--c-line); }
  .ed .l:hover::before { color: var(--c-cm); }
  .ed .tx { min-width: 0; overflow-wrap: anywhere; }
  /* list items and quotes: wrapped lines hang under the text, not the marker */
  .ed .l--hang .tx { padding-left: 2ch; text-indent: -2ch; }

  /* the caret, at the end of the title */
  .ed .caret {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    margin-left: 0.25ch;
    vertical-align: -0.2em;
    background: var(--c-hi);
    animation: caret 1.1s steps(1) infinite;
  }
  @keyframes caret { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .ed .caret { animation: none; } }

  /* the files: path, then what it is; stacked when the column is narrow */
  .ed-file { display: grid; grid-template-columns: 20ch minmax(0, 1fr); gap: 0 2ch; }
  @media (max-width: 640px) { .ed-file { grid-template-columns: minmax(0, 1fr); } }

  /* ── Guest book, as a small config file ── */
  .ed-gb { scroll-margin-top: calc(44px + var(--wrap-pad) * 2); }
  .ed .key { color: var(--c-hi); }
  .ed .ed-kv { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: 0 1ch; align-items: baseline; }
  /* check-in rows: room for the longest known name, count kept on the line */
  .ed .ed-count { display: grid; grid-template-columns: minmax(0, 32ch) auto; gap: 0 2ch; align-items: baseline; }
  @media (max-width: 640px) { .ed .ed-count { grid-template-columns: minmax(0, 1fr) auto; } }
  .ed .val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2ch; }
  .ed .num { color: var(--c-cm); font-variant-numeric: tabular-nums; }
  .ed .note { color: var(--c-tx); white-space: pre-wrap; }
  @media (max-width: 640px) { .ed .ed-kv { grid-template-columns: minmax(0, 1fr); } }

  .ed input:not([type]), .ed textarea {
    font: inherit;
    color: var(--c-hi);
    background: var(--c-field);
    border: 0;
    border-radius: 3px;
    padding: 0 0.6ch;
    margin: 0;
    flex: 1 1 22ch;
    max-width: 44ch;
    width: 100%;
    min-width: 0;
    caret-color: var(--c-hi);
    /* a little shorter than the line, so stacked fields don't touch */
    height: 1.45em;
    line-height: 1.45;
    align-self: center;
  }
  .ed textarea { display: block; height: auto; line-height: 1.7; max-width: none; resize: vertical; min-height: calc(1.7em * 4); padding: 0.2em 0.8ch; margin: 0.15em 0; }
  .ed input::placeholder, .ed textarea::placeholder { color: var(--c-mk); }
  .ed input:focus-visible, .ed textarea:focus-visible { outline: 1px solid var(--c-cm); outline-offset: 0; }
  .ed-indent { padding-left: 2ch; }

  /* radio and checkbox rows: ( ) (•) and [ ] [x], drawn as text */
  .ed-opt { cursor: pointer; }
  .ed-opt .tx { padding-left: 2ch; }
  .ed-opt:has(input:checked) { color: var(--c-hi); }
  .ed .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ed .box { color: var(--c-mk); margin-right: 1ch; white-space: pre; }
  .ed .box::before { content: "( )"; }
  .ed input:checked + .box { color: var(--c-hi); }
  .ed input:checked + .box::before { content: "(•)"; }
  .ed .box--check::before { content: "[ ]"; }
  .ed input:checked + .box--check::before { content: "[x]"; }
  .ed input:focus-visible + .box { outline: 1px solid var(--c-hi); outline-offset: 1px; border-radius: 2px; }

  .ed-btn {
    font: inherit;
    color: var(--bg);
    background: var(--c-hi);
    border: 0;
    border-radius: 3px;
    padding: 0 1ch;
    cursor: pointer;
    transition: opacity 0.15s var(--ease);
  }
  .ed-btn:hover { opacity: 0.85; }
  .ed-btn:focus-visible { outline: 1px solid var(--c-hi); outline-offset: 2px; }

  /* ── The homepage's corners: avatar (home) left, theme toggle right ── */
  .ed-bar {
    position: fixed;
    top: var(--wrap-pad);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-w, var(--container-default));
    height: 0;
    z-index: 50;
    pointer-events: none;
  }
  .ed-home, .ed-theme { position: absolute; top: 0; pointer-events: auto; }
  /* the homepage's avatar logo: 44.55px with 12px corners on a phone, 44px
     with 16px corners on desktop, and the availability dot bottom-right */
  .ed-home {
    left: calc(var(--wrap-pad) + 1px);
    width: 44.55px; height: 44.55px;
    border-radius: 12px;
    --dot-size: 10px;
    --dot-gap: 2.5px;                                        /* ring of empty space */
    --dot-hole: calc(var(--dot-size) / 2 + var(--dot-gap));  /* mask cut-out radius */
    --dot-cx: calc(100% - var(--dot-size) / 2 + 1px);
    --dot-cy: calc(100% - var(--dot-size) / 2 + 1px);
  }
  /* the gap around the dot is a hole punched out of the avatar, not a ring
     drawn on top, so it stays clear over whatever scrolls beneath */
  .ed-home img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 12px;
    -webkit-mask-image: radial-gradient(circle at var(--dot-cx) var(--dot-cy), transparent var(--dot-hole), #000 calc(var(--dot-hole) + 0.75px));
            mask-image: radial-gradient(circle at var(--dot-cx) var(--dot-cy), transparent var(--dot-hole), #000 calc(var(--dot-hole) + 0.75px));
  }
  @media (min-width: 821px) {
    .ed-home { width: 44px; height: 44px; border-radius: 16px; }
    .ed-home img { border-radius: 16px; }
  }
  .ed-home .status-dot {
    position: absolute;
    right: -1px; bottom: -1px;
    width: var(--dot-size); height: var(--dot-size);
    border-radius: 50%;
    transition: background-color 0.3s var(--ease);
  }
  .ed-home .status-dot[data-state="online"]  { background: #3ECF5B; }
  .ed-home .status-dot[data-state="away"]    { background: #F5B301; }
  .ed-home .status-dot[data-state="offline"] { background: #6B6B6B; }
  .ed-home:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .ed-theme {
    right: calc(var(--wrap-pad) + 1px);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 0; padding: 0; cursor: pointer;
    border-radius: 16px;
    background: color-mix(in srgb, var(--glass) 70%, transparent);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    color: var(--glass-ink);
    transition: background 0.25s var(--ease);
  }
  .ed-theme:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .ed-bar .theme-icon { width: 0.9315rem; height: 0.9315rem; display: block; }
  @media (hover: hover) { .ed-theme:hover { background: var(--glass-pill); } }
  :root[data-theme="light"] .ed-theme:hover { background: var(--glass-pill); }
  /* the filled half flips with the theme, as on the homepage */
  :root[data-theme="light"] .ed-bar .theme-icon { transform: scaleX(-1); }

  /* ── Phones: the corners move to the bottom, like the homepage's dock ──
     Same sizes as the homepage's phone dock (44.55px controls, 12px corners,
     8px apart), centred as one group, the same distance from the bottom, the
     same rise-in on load, over the same fading scrim. */
  .ed-scrim { display: none; }
  @media (max-width: 820px) {
    .ed { padding-top: calc(var(--wrap-pad) + 1rem); }
    .ed-scrim {
      display: block;
      position: fixed;
      left: 0; right: 0; bottom: -80px;
      height: 260px; padding-bottom: 80px;
      z-index: 40;
      pointer-events: none;
      background: var(--bg);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 45%, #000 70%, #000 100%);
              mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 45%, #000 70%, #000 100%);
    }
    .ed-bar {
      top: auto;
      bottom: clamp(0.9rem, 2.7vh, 2.025rem);
      display: flex;
      justify-content: center;
      gap: 8px;
      height: auto;
      transform: translateX(-50%);
      transform-origin: 50% 100%;
      animation: ed-bar-rise 0.75s var(--ease) backwards;
    }
    .ed-home, .ed-theme { position: relative; top: auto; left: auto; right: auto; }
    .ed-theme { width: 44.55px; height: 44.55px; border-radius: 12px; }
  }
  @keyframes ed-bar-rise {
    from { transform: translateX(-50%) translateY(8rem) scale(0.9); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  }
  @media (max-width: 820px) and (prefers-reduced-motion: reduce) { .ed-bar { animation: none; } }