/* ==========================================================================
   DEVELOPER DARK — Build with it board. Loaded on a/developer-dark.html only.
   One more workbench window on the room's page: the room's faces (Instrument
   Sans, JetBrains Mono, declared by the room's sheet) and page tokens, panes
   on the surface ladder divided by 1px hairlines, no shadows, square regions,
   5px on controls. Contrast on the surface #111316: #E6E9ED 15.2:1,
   #B4BBC4 9.6:1, #8B939E 6.0:1.
   ========================================================================== */
.gm.gm--developer-dark { --gm-tag-inverse: #0B0C0E; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad, 48px) 104px; background: transparent; color: #E6E9ED; font: 400 15px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.gm--developer-dark .gm__head { border-top: 1px solid #252A30; padding-top: 20px; margin-bottom: 24px; }
.gm--developer-dark .gm__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.gm--developer-dark .gm__lede { color: #B4BBC4; font-size: 16px; }
.gm--developer-dark .gm__key, .gm--developer-dark .gm__get { color: #8B939E; opacity: 1; font-size: 13px; }
.gm--developer-dark a { color: #B4BBC4; text-underline-offset: 3px; }
.gm--developer-dark a:hover { color: #E6E9ED; }
.gm--developer-dark :focus-visible { outline: 2px solid #8AB4FF; outline-offset: 2px; }
.gm--developer-dark .gm-t { color: #B4BBC4; border-color: #353B43; border-radius: 3px; font: 500 11px/18px "JetBrains Mono", ui-monospace, Menlo, monospace; white-space: normal; }
.gm--developer-dark .gm-t[data-g="translation"] { background: #B4BBC4; border-color: #B4BBC4; }
.gm--developer-dark .gm-t[data-g="not_recorded"] { color: #8B939E; }

/* the window */
.gdd-win { border: 1px solid #252A30; background: #111316; }
.gdd-bar { display: flex; overflow-x: auto; border-bottom: 1px solid #252A30; background: #0B0C0E; font: 400 12px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; color: #8B939E; }
.gdd-bar span { padding: 11px 16px; border-right: 1px solid #252A30; white-space: nowrap; }
.gdd-bar span:first-child { background: #111316; color: #E6E9ED; box-shadow: inset 0 2px 0 #D8C7A8; }
.gdd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #252A30; }
.gdd-p { background: #111316; padding: 20px; min-width: 0; }
.gdd-p--wide { grid-column: span 2; }
.gdd-p .gm-f__n { font: 400 12px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; color: #8B939E; }
.gdd-p .gm-f__name { font-size: 16px; font-weight: 600; }
.gdd-p .gm-f__note { color: #8B939E; opacity: 1; font-size: 13px; }
.gdd-p .gm-more summary { font: 500 12px/1.5 "JetBrains Mono", ui-monospace, Menlo, monospace; color: #B4BBC4; }
.gdd-p .gm-ls li { border-top-color: #252A30; font-size: 13.5px; grid-template-columns: 9.5rem minmax(0, 1fr); }
.gdd-p .gm-ls__r { color: #B4BBC4; }
.gdd-p .gm-ls__why, .gdd-p .gm-ls__from { color: #8B939E; opacity: 1; }

/* specimens */
.gdd-m { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; }
.gdd-t3 { color: #8B939E; }
.gdd-lbl { margin: 8px 0 0; font: 400 11px/1.5 "JetBrains Mono", ui-monospace, Menlo, monospace; color: #8B939E; }
.gdd-cap { margin: 10px 0 0; font-size: 13px; color: #8B939E; }
.gdd-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gdd-ladder li { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: #B4BBC4; }
.gdd-ladder i { display: block; height: 44px; border: 1px solid #353B43; }
.gdd-ladder code { font: 400 11px/1.4 "JetBrains Mono", ui-monospace, Menlo, monospace; color: #8B939E; }
.gdd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 0; }
.gdd-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.gdd-st b { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 10px/1 "JetBrains Mono", monospace; }
.gdd-accent { padding: 2px 8px; border-radius: 3px; background: #D8C7A8; color: #17140F; font: 500 12px/1.5 "JetBrains Mono", ui-monospace, monospace; }
.gdd-h { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #E6E9ED; }
.gdd-b { margin: 6px 0 10px; color: #B4BBC4; }
.gdd-p p.gdd-m { margin: 0; padding: 8px 10px; background: #0B0C0E; border: 1px solid #252A30; color: #B4BBC4; overflow-x: auto; white-space: nowrap; }
.gdd-rows { border: 1px solid #252A30; }
.gdd-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 10px; font-size: 13px; }
.gdd-rows > div + div { border-top: 1px solid #252A30; }
.gdd-shape { display: flex; gap: 12px; }
.gdd-shape span { flex: 1; display: flex; align-items: flex-end; height: 64px; padding: 8px; font: 400 11px/1.3 "JetBrains Mono", ui-monospace, monospace; color: #8B939E; }
.gdd-shape__c { background: #171A1E; border: 1px solid #353B43; border-radius: 5px; }
.gdd-shape__r { background: #0B0C0E; border: 1px solid #252A30; }
.gdd-shot { display: grid; place-items: center; min-height: 120px; padding: 16px; border: 1px dashed #353B43; background: #0B0C0E; text-align: center; }
.gdd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 14px; border: 1px solid #252A30; background: #0B0C0E; }
.gdd-nav b { font-weight: 600; }
.gm--developer-dark .gdd-nav a { color: #B4BBC4; text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.gm--developer-dark .gdd-nav a:hover { color: #E6E9ED; }
.gm--developer-dark .gdd-nav a[aria-current="page"] { color: #E6E9ED; box-shadow: inset 0 -2px 0 #E6E9ED; }
.gdd-cmd { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid #353B43; border-radius: 5px; background: #171A1E; color: #8B939E; font: 400 13px "Instrument Sans", system-ui, sans-serif; cursor: pointer; }
.gdd-cmd kbd, .gdd-btn .gdd-m { font: 400 11px/16px "JetBrains Mono", ui-monospace, monospace; }
.gdd-cmd kbd { padding: 0 5px; border: 1px solid #353B43; border-bottom-width: 2px; border-radius: 3px; color: #B4BBC4; }
.gdd-ui { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: end; }
.gdd-pane { padding: 12px; border: 1px solid #252A30; background: #171A1E; }
.gdd-meta { margin: 4px 0 0; font: 400 12px/1.5 "JetBrains Mono", ui-monospace, monospace; color: #8B939E; }
.gdd-h2 { margin: 0; font-weight: 600; }
.gdd-in { display: grid; gap: 6px; font-size: 13px; color: #B4BBC4; }
.gdd-in input { min-height: 36px; padding: 0 10px; border: 1px solid #353B43; border-radius: 4px; background: #0B0C0E; color: #E6E9ED; font: 400 13px "JetBrains Mono", ui-monospace, monospace; }
.gdd-in input:focus-visible { border-color: #8AB4FF; }
.gdd-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.gdd-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 1px solid #353B43; border-radius: 5px; background: #171A1E; color: #E6E9ED; font: 500 13.5px "Instrument Sans", system-ui, sans-serif; cursor: pointer; transition: background-color 120ms ease-out; }
.gdd-btn:hover { background: #1E2227; }
.gdd-btn--p { background: #D8C7A8; border-color: #D8C7A8; color: #17140F; }
.gdd-btn--p:hover { background: #E3D5BA; }
.gdd-code { margin: 0; padding: 10px 12px; background: #0B0C0E; border: 1px solid #252A30; font: 400 12.5px/1.6 "JetBrains Mono", ui-monospace, monospace; color: #B4BBC4; white-space: pre; overflow-x: auto; }
.gdd-kw { color: #C9A2FF; } .gdd-str { color: #9FD39A; } .gdd-fn { color: #82B8FF; } .gdd-com { color: #79818C; font-style: italic; }
.gdd-app { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #353B43; border-radius: 5px; width: max-content; max-width: 100%; }
.gdd-app li { padding: 5px 12px; font-size: 13px; color: #8B939E; }
.gdd-app li + li { border-left: 1px solid #353B43; }
.gdd-app li.on { background: #171A1E; color: #E6E9ED; }

@media (max-width: 1199px) {
  .gdd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gdd-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-f--syntax.gdd-p--wide { grid-column: auto; }
  .gdd-p--last { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .gm.gm--developer-dark { padding: 0 16px 72px; }
  .gm--developer-dark .gm__head { grid-template-columns: 1fr; }
  .gm--developer-dark .gm__title { grid-row: auto; }
  .gdd-grid { grid-template-columns: minmax(0, 1fr); }
  .gdd-p--wide, .gdd-p--last { grid-column: auto; }
  .gdd-p { padding: 16px; }
  .gdd-ui { grid-template-columns: minmax(0, 1fr); }
  .gdd-p .gm-ls li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .gdd-cmd { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .gdd-btn { transition: none; } }