/* ============ gate-demo · the gate at work (scripted loop) ============
   Consumes the site tokens from main.css. Scoped under .gate-demo.
   Motion is transform/opacity/box-shadow only; reduced-motion renders the
   completed still (soul: "stillness is always a complete design").

   COMPOSITION (after paper.design's landing demo; operator-locked
   2026-08-01): the Console window is the base layer at full component
   width — the product owns the stage — and each beat's VISITOR is a
   smaller window RIDING THE FRAME top-left, its head breaking 60px above
   the console (the stage's padding-top IS the overhang), in that agent's
   own chrome: claude.ai (DARK mode — #262624, starburst, serif
   answers), ChatGPT (white, blossom, Ask anything), and one Telegram window
   whose bot is OpenClaw — refused once, then obeyed: grants are per-key,
   not per-agent.
   The postern tool steps render INSIDE each visitor window in that app's
   own idiom (claude.ai/ChatGPT in-chat tool steps; Telegram system chips);
   the Console answers in the move-don't-glow language — the sector stays
   lifted while the read is in use, settling only on the answer (continuous
   indication without continuous motion), and the only card that ever
   shakes is the one refusing — and the ledger, the gate's record, whose
   rows land at the moment of access, not after the reply. claude.ai also
   renders an in-chat bar chart.
   All brand values are from the verified spec sheet (claude.ai production
   tokens, ChatGPT teardowns, Telegram-iOS theme source) — do not re-guess
   them from memory.

   Geometry: the console's content column AND its masthead live in the
   right 58% lane — the left half belongs to the visitor riding over the
   frame. The visitor's width is bounded (calc(42% - 44px), capped 400px)
   so its right edge clears the lane by ≥ ~16px down to the 900px stacking
   floor; the titlebar's arch + wordmark sit right, legible under the
   honest occlusion. The console runs ≥512px tall (the register cards
   carry the full home anatomy). */

.gate-demo {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
}

/* ---------- the stage: base window + floating visitor ---------- */

/* padding-top reserves the floating window's overhang ABOVE the base
   window (operator, 2026-08-01: the visitor rides on top of the console,
   its head breaking the frame), so content above never collides with it.
   The overhang amount is this one number. */
.gd-stage { position: relative; padding-top: 60px; }

/* ---------- base layer: the Console window ---------- */

.gd-console-window {
  background: var(--card);
  border: 1px solid var(--ink-25);
  box-shadow: 4px 4px 0 rgba(42, 33, 24, 0.16);
  min-height: 512px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gd-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ink-22);
  background: var(--card);
  flex-shrink: 0;
}
.gd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-22); }
/* the visitor window fronts the titlebar's left side — the arch + name sit
   right so the chrome stays legible under honest occlusion */
.gd-logo { display: inline-flex; margin-left: auto; flex-shrink: 0; }
.gd-logo svg { display: block; }
.gd-title {
  margin-left: 6px;
  font: 11px/1 var(--mono, "Courier Prime", monospace);
  letter-spacing: 0.08em;
  color: var(--faded);
}

.gd-console {
  background: var(--paper);
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* the masthead is the real home's voice: eyebrow · serif verdict · the
   grain line in italic. Healthy is quiet — nothing here badges.
   It lives in the same 58% right lane as the column below it — the left
   half belongs to the visitor window riding over the frame. */
.gd-console-head { display: flex; flex-direction: column; gap: 4px; width: 58%; margin-left: auto; }
.gd-eyebrow { font: 9.5px/1 "Courier Prime", monospace; letter-spacing: 0.22em; color: var(--faded); }
.gd-verdict { font: 500 19px/1.15 var(--serif, "Cormorant Garamond", serif); color: var(--ink); }
.gd-verdict-sub { font: italic 12px/1.3 var(--body, "EB Garamond", serif); color: var(--faded); }

/* the content column lives in the right 58% — the left lane belongs to
   the visitor riding the frame
   ground for the floating visitor window */
.gd-console-col {
  width: 58%;
  margin-left: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- the register: six Gatehouse cards, the real anatomy ----------
   specimen + name + Latin binomial · hairline · one row per provider (brand
   mark, name, quiet freshness) · hairline · the coverage foot. NO status
   dot: a colour encodes identity OR state, never both — the product's own
   rule, and healthy is quiet. The hold/refusal motion hooks are unchanged
   (border + box-shadow on .gd-card). */
.gd-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gd-card {
  position: relative;
  flex: 1 1 calc(33.3% - 6px);
  min-width: 186px;
  background: var(--card);
  border: 1px solid var(--ink-25);
  padding: 8px 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  /* rest state doubles as the SETTLE: removing .is-held eases back down in
     500ms. Transform/border/box-shadow only — nothing here reflows. */
  transition:
    transform 500ms ease-in,
    border-color 500ms ease-in,
    box-shadow 500ms ease-in;
}
.gd-card-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.gd-specimen { flex-shrink: 0; display: inline-flex; }
.gd-specimen svg { display: block; }
.gd-card-names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gd-card .gd-sector { font: 500 14.5px/1.1 var(--serif, "Cormorant Garamond", serif); color: var(--ink); }
.gd-latin {
  font: italic 10.5px/1.2 var(--body, "EB Garamond", serif);
  color: var(--faded);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gd-card-rule { border-top: 1px solid var(--ink-22); }
.gd-src-rows { display: flex; flex-direction: column; gap: 4px; }
.gd-src { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gd-src-mark { flex: 0 0 14px; display: inline-flex; justify-content: center; }
.gd-src-mark svg { display: block; }
.gd-src-name {
  flex: 1 1 auto; min-width: 0;
  font: 12.5px/1.2 var(--body, "EB Garamond", serif); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gd-src-fresh { flex-shrink: 0; font: 9.5px/1.2 "Courier Prime", monospace; color: var(--faded); }
.gd-card-foot { margin-top: auto; font: 10.5px/1.3 "Courier Prime", monospace; color: var(--faded); }

/* ---------- sector motion: the sustained hold, and the refusal ---------- */

/* access: a SUSTAINED HOLD — the card rises in 600ms ease-out and stays up
   while the read is in use, settling in 500ms ease-in (the base transition
   above) when the answer finishes. A class toggle, not a keyframe cycle:
   the signal lasts as long as the access does, without a frame of looping
   motion. The border tints to the card's own sector ink (--pulse, set per
   card by the JS); the 0.5px ring fakes a 1.5px border without touching
   layout. */
.gd-card.is-held {
  transform: translateY(-3px) scale(1.012);
  border-color: var(--pulse);
  box-shadow: 0 0 0 0.5px var(--pulse);
  transition:
    transform 600ms ease-out,
    border-color 600ms ease-out,
    box-shadow 600ms ease-out;
}

/* refusal: poppy outline flash + a small shake — the only card that ever
   shakes is the one refusing; access and refusal never share a gesture */
.gd-card.is-refused {
  animation:
    gd-refuse 500ms ease-out 2,
    gd-shake 300ms ease-in-out 1;
}

/* stillness: the cycle's information without the motion */
.gate-demo.is-still .gd-card.was-touched { box-shadow: 0 0 0 2px var(--pulse); }
.gate-demo.is-still .gd-card.was-refused { box-shadow: 0 0 0 2px var(--poppy); }

/* ---------- ledger strip (bottom-anchored in the column) ---------- */

.gd-ledger { border-top: 1px solid var(--ink-22); padding-top: 10px; margin-top: auto; }
.gd-ledger-head {
  display: flex;
  justify-content: space-between;
  font: 10.5px/1 "Courier Prime", monospace;
  letter-spacing: 0.2em;
  color: var(--faded);
  padding-bottom: 7px;
}
/* reserves all seven rows (7 × 18px + 6 × 5px) so the window never grows
   mid-cycle — the ledger filling is the story, the frame stays still */
.gd-rows { display: flex; flex-direction: column; gap: 5px; min-height: 156px; }
.gd-row {
  display: flex;
  gap: 0;
  font: 12px/1.5 "Courier Prime", monospace;
  color: var(--ink);
  animation: gd-chunk 600ms cubic-bezier(0.2, 0, 0, 1) both;
}
/* verb lane fits "fetch_live" (10 chars ≈ 72px at 12px Courier); the
   sector lane carries the canonical mark + name — 12px icon + 5px gap +
   "contacts" (8 chars ≈ 58px) fits the 84px lane down to the 900px floor */
.gd-row .c-time { flex: 0 0 48px; color: var(--faded); }
.gd-row .c-agent { flex: 0 0 84px; }
.gd-row .c-verb { flex: 0 0 76px; color: var(--faded); }
.gd-row .c-sector { flex: 0 0 84px; display: inline-flex; align-items: center; gap: 5px; }
.gd-row .c-sicon { flex-shrink: 0; display: inline-flex; }
.gd-row .c-sicon svg { width: 12px; height: 12px; display: block; }
.gd-row .c-verdict { flex: 1 1 auto; }
.gd-row.ok .c-verdict { color: var(--fern); }
.gd-row.denied .c-verdict { color: var(--poppy); }

/* attention note (the refusal, surfaced) */
.gd-attention {
  border-left: 2px solid var(--poppy);
  padding: 3px 0 3px 10px;
  font: italic 14px/1.4 var(--body, "EB Garamond", serif);
  color: var(--faded);
  animation: gd-chunk 600ms cubic-bezier(0.2, 0, 0, 1) both;
}
.gd-attention[hidden] { display: none; }

/* ---------- floating layer: the visitor's own app window ---------- */

.gd-visitor {
  position: absolute;
  left: 22px;
  top: 0;              /* the stage's padding-top IS the overhang above the console */
  z-index: 2;
  width: calc(42% - 44px);
  max-width: 400px;
  min-width: 300px;
  border-radius: 8px;
  /* real depth — deeper than the base window's flat offset */
  box-shadow: 0 18px 44px -10px rgba(42, 33, 24, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* arrival: settle DOWN onto the console ~300ms; departure: lift off ~250ms */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.2, 0, 0, 1);
}
.gd-visitor.is-arrived { opacity: 1; transform: none; }
.gd-visitor.is-leaving { opacity: 0; transform: translateY(-8px); transition-duration: 250ms; }

.gd-app-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.gd-app-mark { flex-shrink: 0; display: inline-flex; }
.gd-app-mark svg { display: block; }

/* messages viewport · inner layer measured + translated by the JS so any
   exchange stays in frame */
.gd-msgs { overflow: hidden; position: relative; }
.gd-msgs-scroll {
  transition: transform 550ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 10px;
}
.gd-msg { animation: gd-chunk 600ms cubic-bezier(0.2, 0, 0, 1) both; max-width: 82%; }
.gd-msg.from-user { align-self: flex-end; }
.gd-msg.from-app { align-self: flex-start; }

/* the postern tool steps, in each app's own idiom */
.gd-tools {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 96%;
  animation: gd-chunk 600ms cubic-bezier(0.2, 0, 0, 1) both;
}
.gd-tool-line { white-space: pre-wrap; word-break: break-word; }
/* the fetch_live waiting tick — opacity only, killed by reduced-motion */
.gd-wait-tick { animation: gd-wait 900ms ease-in-out infinite; }
.gd-app-claude .gd-tool-line { font: 11px/1.55 "Courier Prime", monospace; color: #9C9A92; }
.gd-app-chatgpt .gd-tool-line { font: 11.5px/1.5 -apple-system, system-ui, sans-serif; color: #5D5D5D; }

/* Telegram speaks in centered system chips (the date-chip idiom) */
.gd-app-telegram .gd-chip {
  align-self: center;
  max-width: 90%;
  background: rgba(90, 110, 125, 0.16);
  color: #52606D;
  font: 10.5px/1.3 -apple-system, system-ui, sans-serif;
  padding: 4px 10px;
  border-radius: 11px;
  animation: gd-chunk 600ms cubic-bezier(0.2, 0, 0, 1) both;
}
.gd-app-telegram .gd-chip.is-deny {
  background: rgba(233, 121, 94, 0.22);
  color: #8C3D28;
}

.gd-caret {
  display: inline-block;
  width: 6px; height: 13px;
  vertical-align: -2px;
  background: currentColor;
  animation: gd-caret 1s steps(2, start) infinite;
}

.gd-composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* — claude.ai · DARK mode (operator choice), verified from the production
   token CSS ([data-mode=dark] block, build ~2026-07-02): ground bg-100
   #262624 · user bubble bg-300 #141413 (dark INVERTS the scale — the
   bubble is darker than the ground), sans, rounded-xl · assistant
   text-100 #FAF9F5, serif, NO bubble · composer bg-000 #30302E, hairline
   #DEDCD1 @ 30% alpha, placeholder #9C9A92 · send #C6613F idle (current
   build; #C96442 is the legacy light token) · starburst #D97757 is
   byte-identical in both modes · hairlines are border tokens at baked-in
   alpha, effective ≈ #42413E over the ground — */
.gd-app-claude { background: #262624; }
.gd-app-claude .gd-app-head {
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid #42413E;
}
.gd-app-claude .gd-app-mark svg { width: 15px; height: 15px; }
.gd-app-claude .gd-app-name { font: 600 12.5px/1 -apple-system, system-ui, sans-serif; color: #FAF9F5; }
/* taller than the other visitors: the believable script (interstitial
   line + second query + chart + pattern answer) needs the final frame to
   hold the chart AND the full reply · 38 head + 276 + ~56 composer ≤ 372 */
.gd-app-claude .gd-msgs { height: 276px; }
.gd-app-claude .gd-msg.from-user {
  background: #141413;
  color: #FAF9F5;
  border-radius: 12px;
  padding: 8px 14px;
  font: 13.5px/1.45 -apple-system, system-ui, sans-serif;
}
.gd-app-claude .gd-msg.from-app {
  color: #FAF9F5;
  font: 15px/1.55 Georgia, "Times New Roman", serif;
  max-width: 96%;
}

/* the in-chat chart claude renders (drawn DOM, ~92px incl. labels): seven
   daily WHOOP recovery bars in WHOOP's own color semantics — green ≥67%,
   yellow 34–66%, red ≤33%. Brand-true DATA colors (third-party surface
   rule, same as Telegram blue); the saturated fills read cleanly on the
   dark #262624 ground, axis inks use claude's own dark muted tokens.
   Bars grow bottom-up via scaleY. */
.gd-app-claude .gd-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 4px 2px;
}
.gd-chart .gd-col { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 26px; }
.gd-chart .gd-amt { font: 9.5px/1 "Courier Prime", monospace; color: #9C9A92; }
.gd-chart .gd-barbox {
  height: 56px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #42413E;
}
.gd-chart .gd-bar {
  width: 18px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 500ms cubic-bezier(0.2, 0, 0, 1);
}
.gd-chart .gd-bar.t-hi { background: #19D25E; }
.gd-chart .gd-bar.t-mid { background: #F5C518; }
.gd-chart .gd-bar.t-lo { background: #F0143C; }
.gd-chart .gd-bar.is-grown { transform: scaleY(1); }
.gd-chart .gd-lbl { font: 10px/1 -apple-system, system-ui, sans-serif; color: #9C9A92; }

.gd-app-claude .gd-composer {
  margin: 0 12px 12px;
  padding: 10px 12px;
  background: #30302E;
  border: 1px solid rgba(222, 220, 209, 0.3);
  border-radius: 20px;
}
.gd-app-claude .gd-composer .c-hint { flex: 1; font: 13px/1 -apple-system, system-ui, sans-serif; color: #9C9A92; }
.gd-app-claude .gd-composer .c-send {
  width: 24px; height: 24px; border-radius: 7px;
  background: #C6613F; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 -apple-system, system-ui, sans-serif;
}

/* — ChatGPT · verified: pure white, black blossom, user bubble #F4F4F4
   r22, plain #0D0D0D answers, "Ask anything" pill, black circle send — */
.gd-app-chatgpt { background: #FFFFFF; }
.gd-app-chatgpt .gd-app-head {
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid #ECECEC;
}
.gd-app-chatgpt .gd-app-mark svg { width: 16px; height: 16px; }
.gd-app-chatgpt .gd-app-name { font: 600 12.5px/1 -apple-system, system-ui, sans-serif; color: #0D0D0D; }
.gd-app-chatgpt .gd-msgs { height: 258px; }
.gd-app-chatgpt .gd-msg.from-user {
  background: #F4F4F4;
  color: #0D0D0D;
  border-radius: 22px;
  padding: 9px 14px;
  font: 13.5px/1.45 -apple-system, system-ui, sans-serif;
}
.gd-app-chatgpt .gd-msg.from-app {
  color: #0D0D0D;
  font: 13.5px/1.55 -apple-system, system-ui, sans-serif;
  max-width: 96%;
}
.gd-app-chatgpt .gd-composer {
  margin: 0 12px 12px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 26px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.gd-app-chatgpt .gd-composer .c-hint { flex: 1; font: 13px/1 -apple-system, system-ui, sans-serif; color: #5D5D5D; }
.gd-app-chatgpt .gd-composer .c-send {
  width: 26px; height: 26px; border-radius: 50%;
  background: #0D0D0D; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 -apple-system, system-ui, sans-serif;
}

/* — Telegram iOS light · verified from the Telegram-iOS theme source:
   header #F2F2F2 over #C8C7CC hairline, accent #0088FF, outgoing #E1FFC7
   with GREEN in-bubble ticks (#008C09 · never blue), incoming white — */
.gd-app-telegram { background: #DEE8F0; }
.gd-app-telegram .gd-app-head {
  height: 44px;
  padding: 0 12px;
  background: rgba(242, 242, 242, 0.96);
  border-bottom: 1px solid #C8C7CC;
}
.gd-app-telegram .gd-app-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: #F5EDDA;
  align-items: center; justify-content: center;
}
.gd-app-telegram .gd-app-mark svg { width: 20px; height: 19px; }
.gd-app-telegram .gd-app-id { display: flex; flex-direction: column; gap: 2px; }
.gd-app-telegram .gd-app-name { font: 600 13px/1 -apple-system, system-ui, sans-serif; color: #000000; }
.gd-app-telegram .gd-app-status { font: 10.5px/1 -apple-system, system-ui, sans-serif; color: #787878; }
.gd-app-telegram .gd-app-status .s-online { color: #0088FF; }
.gd-app-telegram .gd-msgs { height: 276px; }
.gd-app-telegram .gd-msg {
  font: 13.5px/1.4 -apple-system, system-ui, sans-serif;
  padding: 7px 10px 5px;
}
.gd-app-telegram .gd-msg.from-user {
  background: #E1FFC7;
  color: #000000;
  border-radius: 17px 17px 4px 17px;
}
.gd-app-telegram .gd-msg.from-app {
  background: #FFFFFF;
  color: #000000;
  border-radius: 17px 17px 17px 4px;
}
.gd-app-telegram .gd-meta {
  display: block;
  text-align: right;
  font: 10px/1 -apple-system, system-ui, sans-serif;
  padding-top: 3px;
}
.gd-app-telegram .from-user .gd-meta { color: rgba(0, 140, 9, 0.8); }
.gd-app-telegram .from-app .gd-meta { color: rgba(82, 82, 82, 0.6); }
.gd-app-telegram .gd-composer {
  height: 34px;
  padding: 0 10px;
  background: rgba(242, 242, 242, 0.96);
  border-top: 1px solid #BEC2C6;
}
.gd-app-telegram .gd-composer .c-hint {
  flex: 1;
  font: 12.5px/1 -apple-system, system-ui, sans-serif;
  color: #8E8E93;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #C8C7CC;
  border-radius: 13px;
  padding: 5px 10px;
}
.gd-app-telegram .gd-composer .c-send {
  width: 24px; height: 24px; border-radius: 50%;
  background: #0088FF; color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 -apple-system, system-ui, sans-serif;
}

/* ---------- loop transitions ---------- */

.gd-fade-target { transition: opacity 800ms ease; }
.gate-demo.is-fading .gd-fade-target,
.gate-demo.is-fading .gd-visitor { opacity: 0; }

/* ---------- keyframes ---------- */

@keyframes gd-chunk { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gd-caret { 50% { opacity: 0; } }
@keyframes gd-wait { 50% { opacity: 0.25; } }
@keyframes gd-refuse {
  0% { box-shadow: 0 0 0 0 var(--poppy); }
  60% { box-shadow: 0 0 0 8px rgba(184, 62, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 62, 21, 0); }
}
@keyframes gd-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* ---------- stillness is a complete design ---------- */

/* the still stacks ALL THREE visitor windows in their finished state above
   the Console (the overlay can't show three at once; the record can): the
   chart grown, the cross-sector answer, the refusal + living-room chips —
   plus the static rings. Information, not motion. */
.gate-demo.is-still .gd-stage { display: flex; flex-direction: column; padding-top: 0; }
.gate-demo.is-still .gd-console-head { width: 100%; margin-left: 0; }
.gate-demo.is-still .gd-visitor {
  opacity: 1;
  transform: none;
  position: static;
  order: -1;
  width: auto;
  max-width: none;
  min-width: 0;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 rgba(42, 33, 24, 0.16);
}
.gate-demo.is-still .gd-msgs { height: auto; }
.gate-demo.is-still .gd-console-window { min-height: 0; }
.gate-demo.is-still .gd-console-col { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .gate-demo * { animation: none !important; transition: none !important; }
  .gd-caret { display: none; }
}

/* ---------- small screens: the overlay dies, panes stack ---------- */

@media (max-width: 900px) {
  .gd-stage { display: flex; flex-direction: column; padding-top: 0; }
  .gd-visitor {
    position: static;
    order: -1;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-bottom: 14px;
    box-shadow: 4px 4px 0 rgba(42, 33, 24, 0.16);
  }
  .gd-console-window { min-height: 0; }
  .gd-console-col { width: 100%; }
  .gd-console-head { width: 100%; margin-left: 0; }
}