:root {
  --sky-top: #153f81;
  --sky-mid: #2f83b8;
  --sky-low: #a7d8dc;
  --acid: #f0cb54;
  --acid-dim: #6f8790;
  --status-online: #64a34a;
  --danger: #f45154;
  --paper: #e8e5da;
  --document-bg: #e8e8dd;
  --document-ink: #162a34;
  --document-muted: #495f68;
  --document-link: #183e5e;
  --document-control: #f5f3e9;
  --document-hover: #d9e5e6;
  --document-rule: #89979b;
  --muted: #8f9aa2;
  --ink: #071119;
  --ink-2: #0a1822;
  --steel-hi: #9eabb5;
  --steel: #667782;
  --steel-dark: #23313b;
  --bevel-hi: #dbe3e6;
  --bevel-mid: #91a1aa;
  --bevel-low: #40515b;
  --bevel-deep: #0d1519;
  --line: #394751;
  --white-line: #cdd7dc;
  --black-line: #111719;
  --taskbar-h: 48px;
  --pixel: 3px;
  --ui-font: Monaco, "Lucida Console", "Courier New", monospace;
  --display-font: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --shadow: 7px 8px 0 rgb(3 11 16 / 28%);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #071119;
  color: var(--paper);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 500;
  text-rendering: geometricPrecision;
}

/* Keep the pixel treatment on artwork; embedded pages and text stay crisp. */
.sky-canvas, .desktop-icon svg { image-rendering: pixelated; }

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.sky-canvas,
.scene,
.desktop {
  position: fixed;
  inset: 0;
}

.sky-canvas {
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--sky-top), var(--sky-mid) 45%, var(--sky-low));
}

.scene {
  pointer-events: none;
  z-index: 1;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / 3%) 3px 4px),
    radial-gradient(circle at 50% 45%, transparent 55%, rgb(0 9 17 / 22%));
}

.horizon {
  position: absolute;
  inset-inline: 0;
  bottom: var(--taskbar-h);
  height: 22vh;
  opacity: 0.45;
  clip-path: polygon(0 48%, 4% 48%, 4% 32%, 8% 32%, 8% 60%, 13% 60%, 13% 40%, 18% 40%, 18% 72%, 25% 72%, 25% 45%, 31% 45%, 31% 65%, 38% 65%, 38% 30%, 43% 30%, 43% 58%, 49% 58%, 49% 73%, 55% 73%, 55% 46%, 61% 46%, 61% 65%, 68% 65%, 68% 35%, 73% 35%, 73% 57%, 79% 57%, 79% 42%, 85% 42%, 85% 69%, 92% 69%, 92% 51%, 100% 51%, 100% 100%, 0 100%);
  background: #d8efeb;
}

.horizon--near {
  height: 14vh;
  opacity: 0.7;
  transform: translateX(-4%);
  background: #cae6e3;
}

.scene-label {
  position: absolute;
  bottom: calc(var(--taskbar-h) + 18px);
  font-size: 7px;
  letter-spacing: 0.2em;
  color: rgb(8 30 38 / 60%);
}

.scene-label--left { left: 11%; }
.scene-label--right { right: 2%; }

.desktop {
  z-index: 2;
  min-width: 320px;
}

.desktop::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0.14;
  background: repeating-linear-gradient(90deg, transparent 0 2px, rgb(0 0 0 / 22%) 2px 3px);
  mix-blend-mode: multiply;
}

.desktop-brand {
  position: absolute;
  top: 2.5vh;
  left: 42%;
  z-index: 1;
  text-align: center;
  color: rgb(234 246 246 / 18%);
  text-transform: uppercase;
  user-select: none;
}

.desktop-brand strong {
  display: block;
  font-family: var(--display-font);
  font-size: clamp(28px, 4vw, 50px);
  letter-spacing: 0.13em;
}

.desktop-brand span {
  font-size: 8px;
  letter-spacing: 0.3em;
}

.desktop-icons {
  position: absolute;
  top: 20px;
  left: 18px;
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 95px);
  gap: 7px;
}

.desktop-icon {
  width: 100px;
  height: 95px;
  padding: 7px 4px 4px;
  border: 1px solid transparent;
  background: transparent;
  text-shadow: 1px 1px #13242c;
  cursor: default;
  font-size: 9px;
  font-weight: 700;
}

.desktop-icon:hover,
.desktop-icon.is-selected {
  border-color: #8fc0cf;
  background: rgb(22 62 86 / 20%);
}

.desktop-icon svg {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 5px;
  shape-rendering: crispEdges;
  filter:
    drop-shadow(1px 0 0 rgb(229 243 241 / 28%))
    drop-shadow(2px 3px 0 rgb(1 8 12 / 55%));
}

.desktop-icon span {
  display: block;
  line-height: 1.15;
}

.window-layer {
  position: absolute;
  inset: 0 0 var(--taskbar-h);
  z-index: 20;
  pointer-events: none;
}

.os-window {
  container-type: inline-size;
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z);
  width: var(--w);
  min-width: var(--min-w, 300px);
  height: var(--h);
  min-height: var(--min-h, 220px);
  overflow: hidden;
  border: 1px solid var(--bevel-hi);
  outline: 2px solid var(--bevel-deep);
  background: var(--ink);
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 55%),
    inset -1px -1px 0 var(--bevel-low),
    0 0 0 3px rgb(54 69 78 / 82%),
    var(--shadow);
  pointer-events: auto;
}

.os-window.is-closed,
.os-window.is-minimized {
  display: none;
}

.os-window.is-maximized {
  --x: 8px !important;
  --y: 8px !important;
  --w: calc(100vw - 16px) !important;
  --h: calc(100vh - var(--taskbar-h) - 16px) !important;
}

.os-window--active {
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 62%),
    inset -1px -1px 0 var(--bevel-low),
    0 0 0 3px #16232b,
    9px 10px 0 rgb(3 11 16 / 36%);
}

.resize-grip {
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 80;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  background:
    linear-gradient(
      135deg,
      transparent 0 42%,
      #314650 43% 49%,
      transparent 50% 59%,
      #718a93 60% 66%,
      transparent 67% 76%,
      #c6d4d6 77% 83%,
      transparent 84%
    );
  cursor: nwse-resize;
  touch-action: none;
}

.os-window.is-maximized .resize-grip,
.desktop.is-inspection-mode .resize-grip {
  display: none;
}

.os-window.is-resizing {
  outline-color: #213f50;
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 62%),
    inset -1px -1px 0 var(--bevel-low),
    0 0 0 3px #254f66,
    9px 10px 0 rgb(3 11 16 / 30%);
}

body.is-window-resizing,
body.is-window-resizing * {
  cursor: nwse-resize !important;
  user-select: none !important;
}

.titlebar {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 9px;
  border-bottom: 1px solid var(--bevel-deep);
  background: linear-gradient(90deg, #143150 0%, #31506b 56%, #748797 100%);
  box-shadow:
    inset 0 1px 0 rgb(222 235 240 / 48%),
    inset 0 -1px 0 rgb(7 18 25 / 66%);
  user-select: none;
  cursor: move;
}

.os-window:not(.os-window--active) .titlebar {
  background: linear-gradient(90deg, #45545e, #788994);
  box-shadow:
    inset 0 1px 0 rgb(224 232 235 / 38%),
    inset 0 -1px 0 rgb(21 30 35 / 56%);
}

.titlebar__title {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0 rgb(4 12 18 / 75%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titlebar__title svg {
  width: 17px;
  height: 17px;
  margin-right: 7px;
}

.window-controls {
  display: flex;
  gap: 3px;
}

.window-controls button,
.address-row button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bevel-deep);
  background: linear-gradient(135deg, #c9d3d7 0%, #9aa9b1 48%, #71838e 100%);
  box-shadow:
    inset 1px 1px 0 var(--bevel-hi),
    inset -1px -1px 0 var(--bevel-low);
  color: #12202a;
  font-weight: 900;
  text-shadow: 0 1px rgb(255 255 255 / 42%);
  cursor: pointer;
}

.window-controls button:hover:not(:disabled) {
  border-color: #25343c;
  background: linear-gradient(135deg, #e1e7e8 0%, #b5c1c6 50%, #83949d 100%);
}

.window-controls [data-action="close"]:hover:not(:disabled),
.window-controls [data-account-close]:hover:not(:disabled) {
  border-color: #6b171b;
  background: linear-gradient(135deg, #ff7476 0%, #e5494d 52%, #a51f29 100%);
  box-shadow:
    inset 1px 1px 0 #ffc2bd,
    inset -1px -1px 0 #6b171b;
  color: #fff7f2;
  text-shadow: 0 1px #6b171b;
}

.window-controls button:active,
.address-row button:active {
  background: linear-gradient(135deg, #71838e, #a9b6bc);
  box-shadow:
    inset 1px 1px 0 #3d4d56,
    inset -1px -1px 0 #d4dde0;
  transform: translate(1px, 1px);
}

.window-controls [data-action="close"]:active,
.window-controls [data-account-close]:active {
  background: linear-gradient(135deg, #8e1821, #c83037);
  box-shadow:
    inset 1px 1px 0 #651017,
    inset -1px -1px 0 #ed7071;
  color: #fff7f2;
}

.window-controls button:hover:active:not(:disabled) {
  background: linear-gradient(135deg, #71838e, #a9b6bc);
  box-shadow:
    inset 1px 1px 0 #3d4d56,
    inset -1px -1px 0 #d4dde0;
}

.window-controls [data-action="close"]:hover:active:not(:disabled),
.window-controls [data-account-close]:hover:active:not(:disabled) {
  background: linear-gradient(135deg, #8e1821, #c83037);
  box-shadow:
    inset 1px 1px 0 #651017,
    inset -1px -1px 0 #ed7071;
  color: #fff7f2;
}

.window-controls button:disabled {
  color: #6a777d;
  cursor: default;
  opacity: 0.72;
}

.window-body {
  height: calc(100% - 34px);
  min-height: 0;
  overflow: auto;
  border-top: 1px solid #657681;
  background: linear-gradient(rgb(7 17 25 / 98%), rgb(5 15 22 / 99%));
}

.explorer,
.empty-app {
  background: #d9e2df;
  color: #1b2a31;
}

.menu-row {
  display: flex;
  gap: 27px;
  height: 30px;
  align-items: center;
  padding-inline: 12px;
  color: #16242b;
  background: #b8c5cd;
}

.address-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 47px;
  padding: 7px;
  background: #a9b8c2;
  color: #111b20;
}

.address {
  display: flex;
  flex: 1;
  align-items: center;
  height: 30px;
  min-width: 0;
  padding: 5px 9px;
  overflow: hidden;
  border: 2px inset #dbe3e7;
  background: #edf1ef;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address svg {
  width: 17px;
  height: 17px;
  margin-right: 7px;
}

.view-controls {
  display: grid;
  grid-auto-flow: column;
  flex: 0 0 auto;
  gap: 0;
  overflow: hidden;
  border: 1px solid #52636c;
  box-shadow:
    inset 1px 1px #dce4e3,
    inset -1px -1px #71818a;
}

.address-row .view-controls button {
  display: grid;
  width: 29px;
  min-width: 29px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-right: 1px solid #667780;
  background: #bac6c9;
  cursor: pointer;
}

.address-row .view-controls button:last-child {
  border-right: 0;
}

.address-row .view-controls svg {
  width: 14px;
  height: 14px;
  shape-rendering: crispEdges;
}

.address-row .view-controls button.is-selected {
  background: #718995;
  box-shadow:
    inset 2px 2px #40515b,
    inset -1px -1px #dce4e3;
}

.address-row .view-controls button.is-selected svg {
  filter: brightness(1.55);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a folder
   holding a single item stretched that one track to the full window width and
   parked the icon dead centre. auto-fill keeps the empty tracks, so items fill
   from the top-left like a real file manager. */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 14px;
  align-content: start;
  padding: 28px 22px 48px;
}

.folder-card {
  min-height: 112px;
  padding: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #24343b;
  text-align: center;
  cursor: default;
}

.collection-system .folder-card:hover,
.collection-system .file-row:hover {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.collection-system .folder-card:hover b {
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: #52636c;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.collection-system .file-row:hover > span:first-child {
  text-decoration: underline;
  text-decoration-color: #52636c;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.collection-system .folder-card:focus-visible,
.collection-system .file-row:focus-visible {
  background: transparent;
  outline: 1px solid #52636c;
  outline-offset: 3px;
}

.collection-system .folder-card:focus-visible b {
  background: transparent;
  box-shadow: none;
}

.folder-card svg {
  display: block;
  width: 78px;
  height: 58px;
  margin: 0 auto 5px;
  shape-rendering: crispEdges;
  filter:
    drop-shadow(1px 0 0 rgb(255 247 202 / 42%))
    drop-shadow(3px 4px 0 rgb(32 48 55 / 26%));
}

.folder-card b,
.folder-card span,
.folder-card small {
  display: block;
}

.folder-card b {
  color: #23343a;
  font-size: 9px;
}

.folder-card span {
  margin-top: 8px;
  font-size: 10px;
}

.folder-card small {
  margin-top: 13px;
  color: #66777c;
  font-size: 7px;
  letter-spacing: 0.15em;
}

.collection-view--grid .folder-card .item-detail,
.collection-view--grid .folder-card .item-meta {
  display: none;
}

.collection-view--grid[data-collection="projects"] .project-placeholder .item-meta {
  display: block;
  margin-top: 5px;
  color: #52636c;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.folder-card--document svg {
  width: 48px;
}

.folder-grid.collection-view--list {
  display: block;
  padding: 9px 0 44px;
}

.collection-view--list .folder-card {
  display: grid;
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr) minmax(92px, 0.45fr) minmax(72px, 0.32fr);
  gap: 10px;
  min-height: 47px;
  align-items: center;
  padding: 4px 14px;
  border: 0;
  border-bottom: 1px solid #aebbb9;
  text-align: left;
}

.collection-view--list .folder-card:hover,
.collection-view--list .folder-card:focus-visible {
  background: transparent;
}

.collection-view--list .folder-card:hover b {
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: #52636c;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.collection-view--list .folder-card:focus-visible b {
  background: transparent;
  box-shadow: none;
}

.collection-view--list .folder-card svg {
  grid-column: 1;
  grid-row: 1;
  width: 40px;
  height: 34px;
  margin: 0;
  filter: drop-shadow(2px 2px 0 rgb(32 48 55 / 24%));
}

.collection-view--list .folder-card b {
  grid-column: 2;
  grid-row: 1;
  color: #26383f;
  font-size: 9px;
}

.collection-view--list .folder-card .item-detail,
.collection-view--list .folder-card .item-meta {
  display: block;
  margin: 0;
  color: #5b6b71;
  font-size: 7px;
  letter-spacing: 0.08em;
}

.collection-view--list .folder-card .item-detail {
  grid-column: 3;
  grid-row: 1;
}

.collection-view--list .folder-card .item-meta {
  grid-column: 4;
  grid-row: 1;
}

.status-row {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  height: 30px;
  padding: 8px 10px;
  color: #213039;
  background: #a7b5c0;
}

.file-list {
  margin-bottom: 38px;
  padding-top: 10px;
}

.documents-view.collection-view--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 14px;
  align-content: start;
  margin: 0;
  padding: 28px 22px 48px;
}

.documents-view.collection-view--grid .file-list__head {
  display: none;
}

.documents-view.collection-view--grid .file-row {
  display: flex;
  min-height: 112px;
  padding: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  text-align: center;
}

.documents-view.collection-view--grid .file-row:hover {
  background: transparent;
}

.documents-view.collection-view--grid .file-row > span:first-child {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  overflow: visible;
  color: #23343a;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.documents-view.collection-view--grid .file-row svg {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
}

.documents-view.collection-view--grid .file-row--folder svg {
  width: 78px;
  height: 58px;
}

.documents-view.collection-view--grid .file-row > span:not(:first-child) {
  display: none;
}

.file-list__head,
.file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 64px 76px;
  gap: 10px;
  align-items: center;
  padding: 0 15px;
}

.file-list__head {
  height: 26px;
  border-bottom: 1px solid #87979b;
  background: #bdcac8;
  color: #405159;
  font-size: 7px;
  letter-spacing: 0.16em;
}

.file-row {
  width: 100%;
  min-height: 41px;
  border: 0;
  border-bottom: 1px solid #aebbb9;
  background: transparent;
  color: #1d2d34;
  font-size: 9px;
  text-align: left;
  cursor: default;
}

.file-row:hover,
.file-row:focus-visible {
  background: transparent;
}

.file-row > span:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row svg {
  flex: 0 0 16px;
  width: 16px;
  height: 21px;
  shape-rendering: crispEdges;
  filter: drop-shadow(1px 1px 0 rgb(43 58 64 / 24%));
}

.file-row > span:not(:first-child) {
  color: #5b6b71;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.browser-bar {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 3px;
  min-height: 47px;
  padding: 5px;
  color: #1b2a32;
  background: #9aaab4;
}

.browser-bar button {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #52636c;
  background: #b8c4c8;
  color: #17262d;
  cursor: pointer;
}

.browser-bar button:disabled {
  color: #68777d;
  cursor: default;
}

.browser-bar button[type="button"] {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bevel-deep);
  background: linear-gradient(135deg, #c9d3d7 0%, #9aa9b1 48%, #71838e 100%);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-low);
  color: #12202a;
  font-weight: 900;
  text-shadow: 0 1px rgb(255 255 255 / 42%);
}

.browser-bar button[type="button"]:disabled {
  color: #68777d;
}

.browser-bar button[type="button"]:active:not(:disabled) {
  background: linear-gradient(135deg, #71838e, #a9b6bc);
  box-shadow: inset 1px 1px 0 #3d4d56, inset -1px -1px 0 #d4dde0;
  transform: translate(1px, 1px);
}

.browser-bar input {
  min-width: 0;
  height: 30px;
  padding: 5px 9px;
  border: 1px solid #4d5f68;
  outline: 1px solid #d9e1df;
  background: #eef2ef;
  color: #14242b;
  font: inherit;
}

.browser-bar input::placeholder {
  color: #67777d;
}

.browser-app {
  --browser-paper: #eeece2;
  --browser-fog: #dce8e5;
  --browser-sky: #b8d7da;
  --browser-steel: #6f8790;
  --browser-ink: #14232a;
  --browser-muted: #596b72;
  --browser-line: #81969b;
  --browser-warm: #c99e2a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
  padding: 2px 5px 0;
  border-bottom: 1px solid var(--bevel-deep);
  background: #7d8f9a;
}

.browser-tabs {
  display: flex;
  min-width: 0;
  max-width: calc(100% - 22px);
  align-items: flex-end;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
}

.tab-strip .tab {
  display: flex;
  align-items: center;
  flex: 0 1 126px;
  gap: 0;
  min-width: 72px;
  max-width: 126px;
  height: 23px;
  align-self: flex-end;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--white-line);
  border-right-color: var(--black-line);
  background: linear-gradient(#9db0b9, #798b96);
  color: #16242b;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.tab-strip .tab.is-active {
  height: 23px;
  border-bottom-color: transparent;
  background: linear-gradient(#d2dbde, #a9b8c2);
}

.tab-strip .tab svg {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  shape-rendering: crispEdges;
}

.tab-strip [data-browser-tab-select],
.tab-strip [data-folder-tab-select] {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 4px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.tab-strip [data-browser-tab-select] span,
.tab-strip [data-folder-tab-select] span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-strip [data-browser-tab-close],
.tab-strip [data-folder-tab-close] {
  display: grid;
  width: 18px;
  height: 100%;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #25353d;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.tab-strip [data-browser-tab-close]:hover,
.tab-strip [data-folder-tab-close]:hover {
  background: rgb(93 112 121 / 32%);
  color: #101b20;
}

.tab-strip [data-browser-tab-select]:focus-visible,
.tab-strip [data-folder-tab-select]:focus-visible,
.tab-strip [data-browser-tab-close]:focus-visible,
.tab-strip [data-folder-tab-close]:focus-visible,
.tab-new:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #324a55;
  outline-offset: -2px;
}

.tab-new {
  display: grid;
  width: 20px;
  height: 23px;
  flex: 0 0 20px;
  align-self: flex-end;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: #1d2c33;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.tab-new:hover {
  border-color: #4d5f68;
  background: #aab9bf;
}

.browser-page {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 22px 24px 25px;
  overflow: auto;
  background: var(--browser-paper);
  color: var(--browser-ink);
}

.review-state[hidden] {
  display: none;
}

.browser-start {
  display: grid;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
  padding: 12px 0 24px;
  border-bottom: 1px solid var(--browser-line);
}

.browser-start > header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.browser-start > header svg {
  width: 54px;
  height: 54px;
  shape-rendering: crispEdges;
}

.browser-start > header span > * {
  display: block;
}

.browser-start > header small {
  color: var(--browser-muted);
  font-size: 7px;
  letter-spacing: 0.16em;
}

.browser-start h2 {
  margin: 4px 0 0;
  font-family: var(--display-font);
  font-size: 34px;
  letter-spacing: 0.03em;
}

.browser-search-cue {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 11px;
  align-items: center;
  min-height: 56px;
  padding: 10px 13px;
  border: 1px solid var(--browser-line);
  background: #f5f3e9;
  color: var(--browser-ink);
  text-align: left;
  cursor: pointer;
}

.browser-search-cue:hover {
  border-color: #536b75;
  box-shadow: inset 2px 0 #536b75;
}

.browser-search-cue > span {
  grid-row: 1 / span 2;
  font-size: 20px;
}

.browser-search-cue b {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.browser-search-cue small {
  color: var(--browser-muted);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
}

.browser-native-section {
  max-width: 700px;
  margin: 18px auto 0;
}

.browser-native-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--browser-line);
}

.browser-native-section h3 {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.browser-native-section > header span {
  color: var(--browser-muted);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.browser-history-list {
  display: grid;
  gap: 6px;
  padding-top: 10px;
}

.browser-history-list button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 48px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--browser-ink);
  text-align: left;
  cursor: pointer;
}

.browser-history-list button:hover {
  border-color: var(--browser-line);
  background: #e1e7e2;
}

.browser-history-list button:focus-visible {
  outline: 2px solid #40545e;
  outline-offset: 2px;
}

.browser-history-list button > span:nth-child(2) > * {
  display: block;
}

.browser-history-list button b {
  font-size: 9px;
}

.browser-history-list button small {
  margin-top: 4px;
  color: var(--browser-muted);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
}

.browser-history-list button em {
  color: #53676f;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.14em;
}

.history-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #27383f;
  color: #14232a;
  font-size: 9px;
  box-shadow: 2px 2px 0 rgb(20 35 42 / 20%);
}

.history-mark--johnny {
  background: #e84a42;
  color: #fff8eb;
}

.history-mark--stories {
  background: #d9d1e2;
}

.history-mark--luxo {
  background: #202327;
  color: #eef0ec;
}

.history-mark--github {
  background: #30363d;
  color: #f0f6fc;
  font-family: Arial, sans-serif;
  font-size: 7px;
}

.history-mark--jewel {
  background: #eee4c7;
  color: #765919;
}

.browser-page.has-site {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.browser-site-surface {
  position: absolute;
  inset: 0;
  background: #fff;
}

.browser-site-surface[hidden],
.browser-native-error[hidden] {
  display: none;
}

.browser-site-surface iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ---- folder window tabs ------------------------------------------------
   Explorer-style tabs so opening a folder stays inside the same window
   instead of spawning another OS window. The strip is injected by app.js
   into every [data-folder-root] window, and reuses the browser window's
   .tab-strip / .tab-new visuals so both chromes stay consistent. */

/* Files keeps navigation in place while the active folder scrolls. */
.file-explorer { display: flex; flex-direction: column; overflow: hidden; }
.file-explorer .tab { flex: 0 0 118px; min-width: 118px; }
.file-explorer > .menu-row, .file-explorer > .tab-strip,
.file-explorer > .address-row, .file-explorer > .status-row { flex-shrink: 0; }
.file-explorer > .status-row { position: static; gap: 10px; font-size: 10px; }
.file-workspace { display: grid; grid-template-columns: 126px minmax(0, 1fr); flex: 1; min-height: 0; }
.file-places { padding: 16px 6px; border-right: 1px solid #9baeb4; background: #c5d0d1; overflow: auto; }
.file-places__heading { display: block; padding: 0 8px 12px; color: #52636c; font-size: 8px; letter-spacing: .12em; }
.file-places button { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 7px; border: 1px solid transparent; color: #23343a; background: transparent; text-align: left; font: inherit; font-size: 11px; cursor: pointer; }
.file-places svg { width: 20px; height: 18px; flex-shrink: 0; }
.file-places button[aria-current] { border-color: #a4b4ba; background: #e0e7e5; box-shadow: inset 1px 1px #f2f5f2; }
.file-places button:hover { background: #d9e2df; }
.file-content { min-width: 0; overflow: auto; overscroll-behavior: contain; }
.file-content .folder-grid, .file-content .documents-view { margin-bottom: 0; padding-bottom: 24px; }
.file-content .collection-note[hidden] { display: none; }
.file-path { gap: 6px; padding: 0 6px; font-family: "Arial Narrow", Arial, sans-serif; font-size: 12px; }
.address-row .file-path button { width: auto; min-width: 0; height: 26px; padding: 2px 4px; flex-shrink: 0; border: 0; box-shadow: none; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.file-path button:hover { text-decoration: underline; }
.file-places button:focus-visible, .file-path button:focus-visible { outline: 2px solid #365d74; outline-offset: -2px; }
@media (max-width: 600px) {
  .file-explorer .tab { flex-basis: 98px; min-width: 98px; }
  .file-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .file-places { display: flex; gap: 2px; padding: 4px; border-right: 0; border-bottom: 1px solid #9baeb4; }
  .file-places__heading { display: none; }
  .file-places button { justify-content: center; gap: 4px; min-height: 36px; padding: 4px; font-size: 10px; }
  .file-places svg { width: 16px; height: 16px; }
  .file-path { gap: 3px; font-size: 11px; }
  .file-explorer > .status-row { font-size: 8px; }
}

/* The collection panels set `display: grid`, which beats the UA stylesheet's
   [hidden] { display: none } on specificity — so an inactive panel stayed
   visible behind the active one. Force it for anything acting as a panel. */
[data-folder-panel][hidden],
.folder-empty[hidden] {
  display: none;
}

.explorer:has(.folder-empty:not([hidden])) {
  display: flex;
  flex-direction: column;
}

.folder-empty {
  display: grid;
  flex: 1;
  min-height: 162px;
  margin-bottom: 30px;
  align-content: center;
  justify-items: center;
  padding: 30px 24px;
  gap: 2px;
  color: #5d6d73;
  text-align: center;
}

.folder-empty svg {
  width: 78px;
  height: 58px;
  margin-bottom: 8px;
  opacity: 0.55;
  shape-rendering: crispEdges;
}

.folder-empty b {
  color: #23343a;
  font-family: var(--display-font);
  font-size: 17px;
  letter-spacing: 0.02em;
}

.folder-empty small {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
}

/* The folder rows become real buttons so a folder can be opened by click or
   keyboard; strip the UA button chrome without disturbing the grid layout. */
button.file-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  font: inherit;
  text-align: left;
}

/* Loading state for the framed site. Sits on top of the iframe rather than
   replacing it, so the frame keeps loading underneath and there is no reflow
   when it swaps in. Styled as a period transfer dialog to match the desktop. */
.browser-loading[hidden] {
  display: none;
}

/* Flex, not grid: the panel's `min(320px, 78%)` needs a definite container
   width to resolve against. A centred grid track is content-sized, so the
   percentage collapsed the panel to ~96px. */
.browser-loading {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  background: #ecece4;
}

.browser-loading__panel {
  width: min(320px, 78%);
  padding: 16px 18px 14px;
  border: 1px solid var(--white-line);
  border-right-color: var(--black-line);
  border-bottom-color: var(--black-line);
  background: linear-gradient(#e4e9ec, #ccd6db);
  color: #24373f;
}

.browser-loading__title {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 8px;
  font-family: var(--display-font);
  font-size: 19px;
  letter-spacing: 0.02em;
}

.browser-loading__title svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.browser-loading__dots::after {
  content: "";
  animation: browser-loading-dots 1.2s steps(4, end) infinite;
}

.browser-loading__host {
  margin: 2px 0 10px;
  color: #4a5c64;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
}

/* Indeterminate chunk sweep — a period progress bar never knew the total. */
.browser-loading__bar {
  height: 14px;
  border: 1px solid var(--black-line);
  border-right-color: var(--white-line);
  border-bottom-color: var(--white-line);
  background: #8ba0a9;
  overflow: hidden;
}

.browser-loading__bar i {
  display: block;
  width: 40%;
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    #12305f 0 8px,
    transparent 8px 11px
  );
  animation: browser-loading-sweep 1.1s linear infinite;
}

.browser-loading__hint {
  margin: 8px 0 0;
  color: #5d6d73;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
}

@keyframes browser-loading-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@keyframes browser-loading-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser-loading__bar i,
  .browser-loading__dots::after {
    animation: none;
  }

  .browser-loading__bar i {
    width: 100%;
  }
}

.browser-native-error {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  padding: 24px;
  background: #ecece4;
  color: #24373f;
  text-align: center;
}

.browser-native-error svg {
  width: 48px;
  height: 48px;
}

.browser-native-error h2 {
  margin: 12px 0 5px;
  font-family: var(--display-font);
  font-size: 26px;
}

.browser-native-error p {
  margin: 0;
  color: #5d6d73;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
}

.recent-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 10px;
}

.recent-tabs span {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px dashed #a7b1af;
  color: #829095;
  font-size: 8px;
}

.recent-tabs .is-current {
  border-style: solid;
  border-color: var(--browser-line);
  background: #e0e8e4;
  color: var(--browser-ink);
}

.recent-tabs svg {
  width: 17px;
  height: 17px;
}

.browser-preview-shell {
  display: grid;
  max-width: 860px;
  min-height: 100%;
  margin: 0 auto;
  grid-template-rows: auto auto minmax(260px, 1fr);
}

[data-browser-start-surface][hidden],
.browser-preview-shell[hidden],
.browser-demo[hidden] {
  display: none;
}

.browser-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--browser-line);
}

.browser-preview-head span > * {
  display: block;
}

.browser-preview-head small {
  color: var(--browser-muted);
  font-size: 7px;
  letter-spacing: 0.16em;
}

.browser-preview-head b {
  margin-top: 4px;
  font-family: var(--display-font);
  font-size: 22px;
}

.browser-preview-head button,
.browser-preview-nav button {
  border: 1px solid #62747a;
  background: #dce3df;
  color: var(--browser-ink);
  font: inherit;
  cursor: pointer;
}

.browser-preview-head button {
  min-height: 29px;
  padding: 5px 9px;
  font-size: 8px;
}

.browser-preview-nav {
  display: flex;
  gap: 5px;
  padding: 9px 0;
  overflow-x: auto;
}

.browser-preview-nav button {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 5px 8px;
  font-size: 7px;
}

.browser-preview-nav button:hover {
  background: #c7d4d2;
}

.browser-preview-nav button[aria-pressed="true"] {
  background: #6f8790;
  color: #fffdf4;
  box-shadow: inset 2px 2px 0 #40515b;
}

.browser-demo-stage {
  min-height: 260px;
  overflow: hidden;
  border: 1px solid #31444b;
  background: #d6dedb;
  box-shadow:
    inset 1px 1px 0 #fffdf4,
    4px 5px 0 rgb(20 35 42 / 18%);
}

.browser-demo {
  min-height: 100%;
  color: #131c23;
}

.demo-sitebar {
  display: flex;
  height: 37px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 17px;
  border-bottom: 1px solid currentColor;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.13em;
}

.demo-sitebar b {
  font-size: 9px;
}

.demo-johnny-hero,
.demo-luxo-hero {
  display: grid;
  min-height: 330px;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  padding: 28px;
}

.demo-johnny-hero {
  background: #f0f1ee;
}

.demo-johnny-hero h3 {
  margin: 10px 0;
  color: #111827;
  font-family: Arial Black, Impact, sans-serif;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.demo-johnny-hero small,
.demo-johnny-hero p,
.demo-luxo-hero small,
.demo-luxo-hero p {
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.16em;
}

.demo-action {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 10px;
  border: 2px solid #111827;
  background: #e62429;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.12em;
  box-shadow: 3px 3px 0 #111827;
}

.demo-johnny-art {
  position: relative;
  width: min(210px, 90%);
  aspect-ratio: 1;
  margin: auto;
  border: 5px solid #111827;
  border-radius: 50%;
  background: #fff;
  box-shadow: 11px 11px 0 #111827;
}

.demo-johnny-art i {
  position: absolute;
  left: 18%;
  width: 64%;
  height: 17%;
  border: 3px solid #111827;
  background: #edb545;
  transform: rotate(-4deg);
}

.demo-johnny-art i:nth-child(1) { top: 21%; background: #e62429; }
.demo-johnny-art i:nth-child(2) { top: 38%; background: #f6dc73; }
.demo-johnny-art i:nth-child(3) { top: 55%; background: #6b8f3d; }
.demo-johnny-art i:nth-child(4) { top: 72%; background: #e8a43a; }

.browser-demo--stories {
  background: #f5f3f8;
  color: #1e1b18;
}

.demo-stories-hero {
  display: grid;
  min-height: 330px;
  place-content: center;
  padding: 34px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent 0 11%, #ddd8e4 11% 12%, transparent 12% 88%, #ddd8e4 88% 89%, transparent 89%),
    #efedf3;
}

.demo-stories-hero small {
  width: max-content;
  margin: 0 auto 18px;
  padding: 5px 9px;
  border: 1px solid #c3b9ca;
  border-radius: 999px;
  color: #8b7d74;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: 0.18em;
}

.demo-stories-hero h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.demo-stories-hero p {
  max-width: 42ch;
  margin: 20px auto 0;
  color: #6b6568;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

.demo-stories-hero .demo-action {
  margin-inline: auto;
  border: 1px solid #1e1b18;
  border-radius: 999px;
  background: #1e1b18;
  box-shadow: none;
}

.browser-demo--luxo {
  background: #09090b;
  color: #f4f4f5;
}

.demo-luxo-hero {
  color: #fff;
  background:
    linear-gradient(112deg, #09090b 0 45%, #15181d 45% 74%, #242931 74%);
}

.demo-luxo-hero h3 {
  margin: 10px 0;
  font-family: Arial, sans-serif;
  font-size: clamp(38px, 6vw, 66px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.06em;
}

.demo-luxo-hero p,
.demo-luxo-hero small {
  color: #9ca3af;
}

.demo-luxo-car {
  position: relative;
  width: min(280px, 100%);
  height: 140px;
  margin: auto;
  transform: skewX(-7deg);
}

.demo-luxo-car i {
  position: absolute;
  border: 2px solid #d4d4d8;
}

.demo-luxo-car i:nth-child(1) {
  inset: 35px 7px 35px;
  border-radius: 60% 24% 18% 22%;
  background: #20242a;
}

.demo-luxo-car i:nth-child(2),
.demo-luxo-car i:nth-child(3) {
  bottom: 17px;
  width: 46px;
  height: 46px;
  border: 7px solid #09090b;
  border-radius: 50%;
  background: #858a92;
}

.demo-luxo-car i:nth-child(2) { left: 42px; }
.demo-luxo-car i:nth-child(3) { right: 32px; }

.browser-demo--github {
  min-height: 367px;
  background: #f6f8fa;
  color: #1f2328;
  font-family: Arial, sans-serif;
}

.demo-github-bar {
  display: flex;
  height: 45px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #24292f;
  color: #f0f6fc;
}

.demo-github-bar b {
  font-size: 11px;
}

.demo-github-bar span {
  flex: 1;
  font-size: 9px;
}

.demo-github-bar i {
  border: 1px solid #8c959f;
  padding: 3px 5px;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.12em;
}

.demo-github-profile {
  display: grid;
  min-height: 320px;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 26px;
  padding: 28px;
}

.demo-github-profile aside h3 {
  margin: 12px 0 4px;
  font-size: 20px;
}

.demo-github-profile aside p {
  margin: 0;
  color: #656d76;
  font-size: 11px;
}

.demo-github-avatar {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 1px solid #8c959f;
  border-radius: 50%;
  background: #d8e4ea;
  color: #263640;
  font-family: var(--display-font);
  font-size: 26px;
  box-shadow: 3px 4px 0 rgb(31 35 40 / 16%);
}

.demo-github-profile section > header {
  display: flex;
  gap: 18px;
  padding: 9px 2px;
  border-bottom: 1px solid #d0d7de;
  font-size: 9px;
}

.demo-github-profile section > header b {
  border-bottom: 2px solid #c67c48;
  padding-bottom: 9px;
}

.demo-github-readme {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #fff;
}

.demo-github-readme small {
  color: #656d76;
  font-size: 7px;
  letter-spacing: 0.14em;
}

.demo-github-readme h4 {
  margin: 11px 0 8px;
  font-size: 18px;
}

.demo-github-readme p {
  max-width: 48ch;
  color: #57606a;
  font-size: 11px;
  line-height: 1.5;
}

.demo-github-readme span {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 6px;
  border: 1px solid #afb8c1;
  border-radius: 999px;
  color: #57606a;
  font-size: 8px;
}

.browser-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 26px;
  padding: 0 11px;
  border-top: 1px solid var(--bevel-deep);
  background: #a7b5c0;
  color: #213039;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.browser-status [data-browser-status-primary]:empty {
  display: none;
}

.services-app {
  padding: 32px 34px 26px;
  background: #e4e7df;
  color: #17272e;
}

.service-menu-head p {
  margin: 0;
  color: #526f79;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.service-menu-head h2 {
  margin: 8px 0 5px;
  color: #17272e;
  font-family: var(--display-font);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.025em;
  line-height: 0.95;
}

.service-menu-head > span {
  color: #42565e;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
}

.service-menu {
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin-top: 24px;
}

.service-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 920px;
  margin-top: 24px;
}

.service-menu-footer > span {
  color: #4a5e66;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
}

.service-menu-footer .contact-cta {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #607985;
  background: #d5e1df;
  color: #20333b;
  font-size: 9px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.service-menu-footer .contact-cta svg {
  width: 22px;
  height: 22px;
  shape-rendering: crispEdges;
}

.service-inline-panel {
  display: grid;
  max-width: 620px;
  min-height: 330px;
  margin-top: 24px;
  align-content: start;
  justify-items: start;
  padding: 22px;
  border: 1px solid #73868c;
  outline: 1px solid #eff3ee;
  background: #f0eee3;
  box-shadow:
    inset 1px 1px #fffdf5,
    inset -1px -1px #a9b5b2,
    4px 5px 0 rgb(31 48 55 / 18%);
}

.service-inline-panel[hidden] {
  display: none;
}

.service-inline-panel > svg {
  width: 68px;
  height: 68px;
  margin: 24px 0 12px;
  shape-rendering: crispEdges;
}

.service-inline-panel > p {
  margin: 0;
  color: #526f79;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.service-inline-panel h2 {
  margin: 8px 0 7px;
  color: #17272e;
  font-family: var(--display-font);
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: 0.025em;
  line-height: 0.95;
}

.service-inline-panel > span {
  color: #42565e;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
}

.service-inline-back,
.service-inline-panel .contact-cta {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #607985;
  background: #d5e1df;
  color: #20333b;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.service-inline-panel .contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.service-inline-panel .contact-cta svg {
  width: 22px;
  height: 22px;
}

.service-inline-back:focus-visible,
.service-inline-panel .contact-cta:focus-visible {
  outline: 2px solid #40545e;
  outline-offset: 2px;
}.review-state--error {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #a96c4f;
  background: #eadbd2;
}

.review-state--error svg {
  width: 34px;
  height: 34px;
  shape-rendering: crispEdges;
}

.review-state--error span > * {
  display: block;
}

.review-state--error b {
  color: #74442e;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.review-state--error small {
  margin-top: 5px;
  color: #755f54;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
}

.empty-app {
  display: grid;
  height: calc(100% - 34px);
  place-content: center;
  text-align: center;
}

.empty-app > svg {
  width: 62px;
  height: 62px;
  margin: 0 auto 15px;
  opacity: 0.55;
}

.empty-app h2 {
  margin: 0;
  color: #2f4853;
  font-size: 15px;
}

.empty-app p {
  color: #5c6c72;
  line-height: 1.6;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--taskbar-h) + 18px);
  z-index: 1200;
  padding: 9px 14px;
  transform: translate(-50%, 12px);
  border: 1px solid var(--bevel-deep);
  background: var(--ink);
  box-shadow:
    inset 1px 1px 0 rgb(219 227 230 / 42%),
    inset -1px -1px 0 var(--steel-dark);
  color: #eee5c4;
  opacity: 0;
  pointer-events: none;
  transition: 160ms ease;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.account-scrim {
  position: absolute;
  inset: 0;
  z-index: 2110;
  background: rgb(10 22 29 / 42%);
}

.account-scrim[hidden],
.account-dialog[hidden] {
  display: none;
}

.account-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2120;
  width: min(420px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
  border: 2px solid var(--white-line);
  border-right-color: var(--black-line);
  border-bottom-color: var(--black-line);
  outline: 2px solid #111b20;
  background: #c4ced0;
  box-shadow: 9px 11px 0 rgb(4 13 18 / 32%);
  pointer-events: auto;
}

.account-dialog .titlebar {
  height: 32px;
}

.account-dialog__body {
  padding: 26px;
  background: #ecebe2;
}

.account-anonymous,
.account-signed-in {
  display: grid;
  justify-items: center;
  text-align: center;
}

.account-anonymous[hidden],
.account-signed-in[hidden] {
  display: none;
}

.account-dialog__body svg {
  width: 68px;
  height: 68px;
  margin-bottom: 12px;
  filter: drop-shadow(3px 4px 0 rgb(23 38 45 / 24%));
}

.account-dialog__body small {
  color: #607077;
  font-size: 7px;
  letter-spacing: 0.16em;
}

.account-dialog__body h2 {
  margin: 8px 0 10px;
  color: #14232a;
  font-family: var(--display-font);
  font-size: 27px;
}

.account-dialog__body h2::selection {
  background: #294958;
  color: #f6f3e8;
}

.account-dialog__body p {
  max-width: 43ch;
  margin: 0;
  color: #4f6067;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
}

.account-dialog__body button {
  min-height: 35px;
  margin-top: 19px;
  padding: 7px 12px;
  border: 1px solid #485a62;
  background: #bac7c8;
  box-shadow:
    inset 1px 1px 0 #f8faf5,
    inset -1px -1px 0 #7d8e94;
  color: #18282f;
  font: inherit;
  cursor: pointer;
}

.account-dialog__body button:focus-visible,
.account-button:focus-visible {
  outline: 2px solid #263b45;
  outline-offset: 2px;
}

.inspection-control {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1950;
  width: 278px;
  padding: 7px;
  border: 1px solid var(--bevel-hi);
  outline: 2px solid var(--bevel-deep);
  background: #8fa0aa;
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 48%),
    inset -1px -1px 0 #465762,
    5px 6px 0 rgb(3 11 16 / 24%);
  color: #16242b;
}

.desktop:has(.os-window.is-maximized:not(.is-closed):not(.is-minimized)) .inspection-control {
  display: none;
}

.inspection-control > span {
  display: block;
  margin-bottom: 6px;
  color: #253740;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.inspection-control > div {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 5px;
}

.inspection-control button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid var(--bevel-deep);
  background: #c1cdd1;
  box-shadow:
    inset 1px 1px 0 #edf2f1,
    inset -1px -1px 0 #6f8089;
  color: #16242b;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.inspection-control button:active {
  box-shadow:
    inset 1px 1px 0 #6f8089,
    inset -1px -1px 0 #edf2f1;
}

.inspection-control button:disabled {
  color: #65747b;
  cursor: default;
  opacity: 0.75;
}

.desktop.is-inspection-mode .os-window:not(.is-maximized) {
  min-width: 0;
  min-height: 0;
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 48%),
    inset -1px -1px 0 var(--bevel-low),
    0 0 0 2px rgb(54 69 78 / 78%),
    4px 5px 0 rgb(3 11 16 / 24%);
}

.desktop.is-inspection-mode .titlebar__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop.is-inspection-mode .browser-page {
  padding: 12px;
}

.desktop.is-inspection-mode .browser-start {
  gap: 9px;
  padding-top: 0;
}

.desktop.is-inspection-mode .browser-start h2,
.desktop.is-inspection-mode .service-menu-head h2 {
  font-size: 28px;
}

.desktop.is-inspection-mode .browser-native-section,
.desktop.is-inspection-mode .service-menu {
  margin-top: 10px;
}

.desktop.is-inspection-mode .services-app {
  padding: 16px 14px;
}

.desktop.is-inspection-mode .service-menu-footer {
  display: none;
}

.desktop.is-inspection-mode .task-list button {
  flex-basis: 0;
  max-width: none;
  padding-inline: 7px;
}

@container (max-width: 620px) {
  .browser-page {
    padding: 14px 12px 18px;
  }

  .browser-start {
    gap: 12px;
  }

  .browser-start h2 {
    font-size: 30px;
  }

  .recent-tabs {
    grid-template-columns: 1fr;
  }

  .browser-preview-head {
    align-items: flex-start;
  }

  .browser-preview-head b {
    font-size: 18px;
  }

  .browser-preview-head button {
    flex: 0 0 auto;
  }

  .demo-sitebar span {
    display: none;
  }

  .demo-johnny-hero,
  .demo-luxo-hero {
    min-height: 360px;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }

  .demo-johnny-art {
    width: 142px;
  }

  .demo-stories-hero {
    min-height: 360px;
    padding: 24px 18px;
  }

  .demo-github-profile {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .demo-github-profile aside {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    column-gap: 12px;
  }

  .demo-github-avatar {
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    font-size: 18px;
  }

  .demo-github-profile aside h3 {
    margin: 0;
  }

  .collection-view--list .folder-card {
    grid-template-columns: 40px minmax(0, 1fr) minmax(70px, 0.34fr);
  }

  .collection-view--list .folder-card .item-detail {
    display: none;
  }

  .collection-view--list .folder-card .item-meta {
    grid-column: 3;
  }
}

@container (max-width: 560px) {
  .services-app {
    padding: 22px 18px;
  }

  .file-list__head,
  .file-row {
    grid-template-columns: minmax(0, 1fr) 62px;
    padding-inline: 11px;
  }

  .file-list__head > span:nth-child(2),
  .file-row > span:nth-child(2),
  .file-list__head > span:nth-child(3),
  .file-row > span:nth-child(3) {
    display: none;
  }

  .folder-grid.collection-system.collection-view--grid {
    padding-inline: 10px;
  }

  .documents-view.collection-view--grid {
    padding-inline: 10px;
  }  .service-menu-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .service-menu-footer .contact-cta {
    width: 100%;
  }
}

.taskbar {
  position: absolute;
  inset: auto 0 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  height: var(--taskbar-h);
  gap: 3px;
  padding: 4px;
  border-top: 2px solid #d5dde0;
  background: linear-gradient(#b4c2ca, #7d8f9a);
  box-shadow: 0 -2px #3e4d56;
}

.start-button,
.task-list button {
  min-width: 0;
  border: 1px solid var(--white-line);
  border-right-color: var(--black-line);
  border-bottom-color: var(--black-line);
  background: linear-gradient(#c6d0d5, #8496a1);
  color: #172129;
  text-align: left;
  cursor: pointer;
}

.start-button {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 10px;
}

.start-button > span {
  display: grid;
  width: 40px;
  height: 29px;
  place-items: center;
}

.start-button > span svg {
  width: 38px;
  height: 27px;
}

.task-list {
  display: flex;
  min-width: 0;
  gap: 3px;
  overflow: hidden;
}

.task-list button {
  display: flex;
  flex: 1 1 180px;
  max-width: 220px;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list button.is-active {
  border-color: var(--black-line) var(--white-line) var(--white-line) var(--black-line);
  background: #82949e;
}

.task-list svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

.system-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #53636d;
  box-shadow: inset 1px 1px #d3dce0;
  color: #23313a;
  white-space: nowrap;
}

.tray-clock {
  font-family: var(--ui-font);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #172129;
  cursor: default;
}

.account-button {
  display: flex;
  min-width: 72px;
  height: 29px;
  margin-right: auto;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid #53636d;
  background: #b8c4c8;
  color: #23313a;
  font: inherit;
  cursor: pointer;
}

.account-button:hover {
  background: #cad3d3;
}

.account-button[aria-pressed="true"] {
  background: #879ba3;
}

.account-button svg {
  width: 20px;
  height: 20px;
}

.account-button span {
  font-size: 7px;
  letter-spacing: 0.08em;
}

.signal-bars {
  display: flex;
  height: 18px;
  align-items: flex-end;
  gap: 2px;
}

.signal-bars i {
  width: 4px;
  background: var(--status-online);
}

.signal-bars i:nth-child(1) { height: 5px; }
.signal-bars i:nth-child(2) { height: 9px; }
.signal-bars i:nth-child(3) { height: 13px; }
.signal-bars i:nth-child(4) { height: 17px; }

.start-menu {
  position: absolute;
  left: 4px;
  bottom: var(--taskbar-h);
  z-index: 2100;
  width: 260px;
  padding: 7px;
  border: 2px solid var(--white-line);
  border-right-color: var(--black-line);
  border-bottom-color: var(--black-line);
  background: #99aab4;
  color: #152129;
}

.start-menu p {
  margin: 0 0 7px;
  padding: 13px;
  background: #173455;
  color: var(--paper);
}

.start-menu p > * {
  display: block;
}

.start-menu p span {
  margin-top: 3px;
  color: #a9cbd4;
  font-size: 8px;
}

.start-menu button {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #152129;
  text-align: left;
  cursor: pointer;
}

.start-menu button:hover {
  background: #173455;
  color: var(--paper);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
}

@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --taskbar-h: 56px;
  }

  .desktop-brand,
  .scene-label {
    display: none;
  }

  .desktop-icons {
    top: 8px;
    left: 5px;
    right: 5px;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 0;
  }

  .desktop-icon {
    width: auto;
    min-width: 0;
    height: 88px;
    padding: 4px 2px 3px;
    font-size: 10px;
  }

  .desktop-icon svg {
    width: 56px;
    height: 56px;
    margin-bottom: 3px;
  }

  .resize-grip {
    display: none;
  }

  .inspection-control {
    top: 101px;
    right: 5px;
    left: calc(33.333% + 4px);
    width: auto;
  }

  .os-window {
    --x: 7px !important;
    --y: 204px !important;
    --w: calc(100vw - 14px) !important;
    --h: calc(100dvh - var(--taskbar-h) - 213px) !important;
    min-width: 0;
    min-height: 0;
  }

  .os-window:not(.os-window--active) {
    display: none;
  }

  .os-window.is-maximized {
    --x: 5px !important;
    --y: 5px !important;
    --w: calc(100vw - 10px) !important;
    --h: calc(100dvh - var(--taskbar-h) - 10px) !important;
  }

  .titlebar {
    height: 36px;
    padding-left: 8px;
  }

  .window-body {
    height: calc(100% - 36px);
  }

  .menu-row {
    display: none;
  }

  .address-row {
    height: 43px;
  }

  .folder-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 10px 42px;
  }

  .documents-view.collection-view--grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 10px 42px;
  }

  .tab-strip {
    overflow-x: auto;
  }

  .tab-strip .tab {
    max-width: 118px;
  }

  .browser-bar input {
    font-size: 16px;
  }

  .browser-page {
    padding: 14px 12px 18px;
  }

  .browser-start {
    gap: 12px;
  }

  .browser-start h2 {
    font-size: 30px;
  }

  .recent-tabs {
    grid-template-columns: 1fr;
  }

  .file-list__head,
  .file-row {
    grid-template-columns: minmax(0, 1fr) 62px;
    padding-inline: 11px;
  }

  .file-list__head > span:nth-child(2),
  .file-row > span:nth-child(2),
  .file-list__head > span:nth-child(3),
  .file-row > span:nth-child(3) {
    display: none;
  }

  .services-app {
    padding: 22px 18px;
  }

  .service-menu-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .service-menu-footer .contact-cta {
    width: 100%;
  }  .collection-view--list .folder-card {
    grid-template-columns: 40px minmax(0, 1fr) minmax(70px, 0.34fr);
  }

  .collection-view--list .folder-card .item-detail {
    display: none;
  }

  .collection-view--list .folder-card .item-meta {
    grid-column: 3;
  }

  .taskbar {
    grid-template-columns: 57px 1fr 128px;
  }

  .start-button {
    padding: 4px 9px;
  }

  .start-button b {
    display: none;
  }

  .start-button > span {
    width: 32px;
  }

  .task-list button {
    flex: 0 0 50px;
    justify-content: center;
    padding: 4px;
    color: transparent;
    font-size: 0;
  }

  .task-list svg {
    width: 24px;
    height: 24px;
  }

  .desktop.is-inspection-mode .task-list button {
    flex: 1 1 0;
    padding: 2px;
  }

  .desktop.is-inspection-mode .task-list svg {
    width: 18px;
    height: 18px;
  }

  .system-tray {
    padding: 0 4px;
    gap: 5px;
  }

  .system-tray > span:not(.signal-bars) {
    display: none;
  }

  .account-button {
    min-width: 46px;
    width: 46px;
    gap: 2px;
    padding: 2px;
  }

  .account-button svg {
    width: 18px;
    height: 18px;
  }

  .account-button span {
    font-size: 5px;
    letter-spacing: 0;
  }

  .account-dialog__body {
    padding: 22px 18px;
  }

  .start-menu {
    width: min(260px, calc(100vw - 8px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Website Launch offer card // sits in the Services window
   ============================================================ */

.offer-card {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid var(--bevel-deep);
  background: #f4f1e7;
  color: #16222b;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 var(--bevel-mid),
    4px 5px 0 rgb(3 11 16 / 18%);
}

.offer-card__kicker {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 7px 12px;
  border-bottom: 1px solid var(--bevel-deep);
  background: linear-gradient(90deg, #143150 0%, #31506b 70%, #61798c 100%);
  box-shadow: inset 0 1px 0 rgb(222 235 240 / 40%);
}

.offer-card__badge {
  width: 22px;
  height: 22px;
  flex: none;
  filter: drop-shadow(1px 1px 0 rgb(4 12 18 / 55%));
}

.offer-card__kicker b {
  color: #f2f7fa;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 0 rgb(4 12 18 / 60%);
}

.offer-card__kicker span {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid rgb(0 229 188 / 55%);
  background: rgb(0 229 188 / 14%);
  color: #7fe9d5;
  font-size: 9px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* a teal rule keeps the two bars reading as one system */
.offer-card__kicker::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #00e5bc, rgb(0 229 188 / 0%) 70%);
  content: "";
}

.offer-card__price {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 16px 14px;
}

.offer-card__price > span {
  display: grid;
  gap: 2px;
}

.offer-card__price b {
  font-family: var(--display-font);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
}

.offer-card__price small {
  color: #4d616c;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
}

.offer-card__price i {
  width: 1px;
  height: 38px;
  background: var(--bevel-mid);
}

.offer-card__deal {
  margin: 0 16px 14px;
  padding: 9px 12px;
  border: 1px solid #8b7136;
  background: #f6efd8;
  color: #4a3a10;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
  box-shadow: inset 3px 0 #c99e2a;
}

.offer-card__deal b {
  font-weight: 700;
}

.offer-card__list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 16px 16px;
  list-style: none;
}

.offer-card__list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #2b3d47;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}

.offer-card__list li::before {
  color: #3f7d55;
  content: "\2713";
  font-size: 13px;
}

.offer-card__cta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 0 16px;
  padding: 13px 18px;
  border: 1px solid var(--bevel-deep);
  background: linear-gradient(#2f5470, #1e3b52);
  color: #f2efe7;
  font-family: var(--ui-font);
  font-size: 14px;
  letter-spacing: 0.09em;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 30%), inset -1px -1px 0 rgb(0 0 0 / 40%);
  cursor: pointer;
  transition: background 180ms ease, transform 140ms ease;
}

.offer-card__cta svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.offer-card__cta:hover {
  background: linear-gradient(#3a6484, #24455f);
}

.offer-card__cta:active {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 0 rgb(0 0 0 / 35%);
}

.offer-card__cta:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.offer-card__note {
  margin: 0;
  padding: 10px 16px 14px;
  color: #4d616c;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

@container (min-width: 640px) {
  .offer-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "kicker kicker"
      "price  list"
      "deal   list"
      "cta    list"
      "note   list";
    align-content: start;
  }

  .offer-card__kicker { grid-area: kicker; }
  .offer-card__price  { grid-area: price; }
  .offer-card__deal   { grid-area: deal; }
  .offer-card__cta    { grid-area: cta; }
  .offer-card__note   { grid-area: note; }

  .offer-card__list {
    grid-area: list;
    align-content: start;
    padding: 18px 16px 16px 4px;
  }
}

/* ---------- optional qualification chips in the quote form ---------- */

.quote-chips {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
}

.quote-chips legend {
  width: 100%;
  margin-bottom: 7px;
  padding: 0;
  color: #c3cac7;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.quote-chips legend i {
  color: #7f8986;
  font-style: normal;
}

.quote-chips button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #4b514f;
  background: #1c1e1d;
  color: #c6ccc9;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.quote-chips button:hover {
  border-color: #7f8986;
  color: #eef2f0;
}

.quote-chips button[aria-pressed="true"] {
  border-color: #00e5bc;
  background: #16302c;
  color: #dffdf6;
}

.quote-chips button:focus-visible {
  outline: 2px solid #00e5bc;
  outline-offset: 2px;
}

/* ============================================================
   Get My Quote // same paper aesthetic as the rest of the OS
   ============================================================ */

.quote-app {
  display: flex;
  padding: 24px 26px 26px;
  background: #e4e7df;
  color: #17272e;
  flex-direction: column;
  gap: 16px;
}

.quote-intro h2 {
  margin: 0 0 6px;
  color: #17272e;
  font-family: var(--display-font);
  font-size: clamp(28px, 7cqi, 40px);
  letter-spacing: 0.025em;
  line-height: 0.96;
}

.quote-intro p {
  max-width: 58ch;
  margin: 0;
  color: #40545c;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.quote-recap {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 1px solid #8b7136;
  background: #b9a469;
}

.quote-recap > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 13px;
  background: #f6efd8;
}

.quote-recap dt {
  color: #75591c;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quote-recap dd {
  margin: 0;
  color: #2b3d47;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
}

.quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-form[hidden],
.quote-sent[hidden] {
  display: none;
}

.quote-form label {
  display: grid;
  gap: 6px;
  align-content: start;
}

.quote-form__wide,
.quote-form .quote-error,
.quote-form .quote-submit,
.quote-form .quote-note {
  grid-column: 1 / -1;
}

.quote-form label > span {
  color: #2b3d47;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.quote-form label > span i {
  color: #6a7c85;
  font-style: normal;
}

.quote-form input,
.quote-form textarea {
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #7d8f95;
  background: #f7f6ef;
  color: #17272e;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 15px;
  box-shadow: inset 1px 1px 0 #b9c4c6;
}

.quote-form textarea {
  min-height: 76px;
  line-height: 1.45;
  resize: vertical;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
  color: #8b979c;
}

.quote-form input:focus-visible,
.quote-form textarea:focus-visible {
  border-color: #24455f;
  outline: 2px solid #24455f;
  outline-offset: 1px;
}

.quote-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #a8593f;
  background: #f7e2da;
  color: #7a2f18;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
}

.quote-submit {
  min-height: 52px;
  padding: 13px 18px;
  border: 1px solid var(--bevel-deep);
  background: linear-gradient(#2f5470, #1e3b52);
  color: #f2efe7;
  font-family: var(--ui-font);
  font-size: 14px;
  letter-spacing: 0.09em;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 30%), inset -1px -1px 0 rgb(0 0 0 / 40%);
  cursor: pointer;
  transition: background 180ms ease, transform 140ms ease;
}

.quote-submit:hover {
  background: linear-gradient(#3a6484, #24455f);
}

.quote-submit:active {
  transform: translateY(1px);
}

.quote-submit:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.quote-note {
  margin: 0;
  color: #4d616c;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.quote-note a {
  color: #1e3b52;
}

.quote-sent {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #5d8a68;
  background: #e7f1e6;
  justify-items: start;
}

.quote-sent b {
  color: #2c5c39;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.quote-sent p {
  max-width: 54ch;
  margin: 0;
  color: #2b3d47;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- optional qualification chips ---------- */

.quote-chips {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
}

.quote-chips legend {
  width: 100%;
  margin-bottom: 7px;
  padding: 0;
  color: #2b3d47;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.quote-chips legend i {
  color: #6a7c85;
  font-style: normal;
}

.quote-chips button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #7d8f95;
  background: #f7f6ef;
  color: #2b3d47;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
  box-shadow: inset 1px 1px 0 #fff;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.quote-chips button:hover {
  border-color: #40606f;
  background: #fffdf5;
}

.quote-chips button[aria-pressed="true"] {
  border-color: #8b7136;
  background: #f6efd8;
  color: #4a3a10;
  box-shadow: inset 3px 0 #c99e2a, inset 1px 1px 0 #fffdf5;
}

.quote-chips button:focus-visible {
  outline: 2px solid #24455f;
  outline-offset: 2px;
}

@container (max-width: 520px) {
  .quote-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-recap > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---------- Agent Systems card: same frame, no price to show ---------- */



.offer-card__lead {
  display: grid;
  gap: 7px;
  padding: 18px 16px 14px;
}

.offer-card__lead b {
  color: #17272e;
  font-family: var(--display-font);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.02;
}

.offer-card__lead span {
  max-width: 42ch;
  color: #4d616c;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

@container (min-width: 640px) {
  .offer-card--scoped {
    grid-template-areas:
      "kicker kicker"
      "lead   list"
      "deal   list"
      "cta    list"
      "note   list";
  }

  .offer-card__lead {
    grid-area: lead;
  }
}

/* an explicit display value beats the hidden attribute — restore it */
.quote-chips[hidden] {
  display: none;
}

/* On a phone the quote form is the whole job — give it the screen. */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  [data-window="website-brief"] {
    --y: 84px !important;
    --h: calc(100dvh - var(--taskbar-h) - 94px) !important;
  }
}

/* Portfolio orientation and usable small-screen windows. */
[hidden] { display: none !important; }

.welcome-app {
  overflow: auto;
  padding: 28px;
  background: var(--document-bg);
  color: var(--document-ink);
  font-family: system-ui, sans-serif;
}
.welcome-eyebrow {
  margin: 0 0 12px;
  font: 11px var(--ui-font);
  letter-spacing: .12em;
}
.welcome-app h1 {
  margin: 0 0 16px;
  font-family: var(--display-font);
  font-size: clamp(28px, 5cqi, 38px);
  font-weight: 400;
  line-height: 1.12;
}
.welcome-app > p:not(.welcome-eyebrow) {
  max-width: 52ch;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
}
.welcome-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.welcome-links button {
  padding: 14px;
  border: 1px solid #89979b;
  box-shadow: inset 1px 1px #fff, 2px 2px #bdc4bf;
  background: #f5f3e9;
  color: #152f43;
  cursor: pointer;
  text-align: left;
}
.welcome-links button:hover { background: #d9e5e6; }
.welcome-links b, .welcome-links span { display: block; }
.welcome-links b { font: 14px var(--ui-font); }
.welcome-links span { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.welcome-footer { margin-top: 20px; display: flex; align-items: center; gap: 18px; }
.welcome-footer span { flex: 1; font-size: 12px; line-height: 1.5; color: #495f68; }
.welcome-footer button {
  min-height: 40px;
  padding: 8px;
  background: transparent;
  border: 0;
  color: #183e5e;
  text-decoration: underline;
  cursor: pointer;
}
.collection-note { margin: 0; padding: 12px 16px; font-size: 12px; line-height: 1.6; background: #162e3e; color: #e1e8e9; }
.quote-draft-label { display: block; font-size: 13px; line-height: 1.5; }
[data-quote-draft] {
  width: 100%;
  resize: vertical;
  min-height: 180px;
  padding: 12px;
  border: 1px solid #71858b;
  background: #faf8ee;
  color: #162a34;
  font: 14px/1.6 var(--ui-font);
}
.no-script { position: fixed; inset: 20px; z-index: 9999; overflow: auto; padding: 24px; background: #e8e8dd; color: #162a34; font: 18px/1.6 system-ui; }
.no-script a { color: #174b74; }

@media (min-width: 901px) {
  .desktop-icons { grid-template-rows: repeat(7, min(95px, calc((100dvh - 110px) / 7))); }
  .desktop-icon { height: 100%; }
}
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --taskbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
    --mobile-icon-h: clamp(60px, calc((100dvh - var(--taskbar-h) - env(safe-area-inset-top, 0px) - 12px) / 8), 72px);
  }
  .desktop-icons {
    display: grid;
    width: 76px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: var(--mobile-icon-h);
    grid-auto-flow: row;
    align-content: start;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    top: calc(6px + env(safe-area-inset-top, 0px));
    left: calc(5px + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(var(--taskbar-h) + 6px);
  }
  .desktop-icon { height: var(--mobile-icon-h); font-size: 10px; }
  .desktop-icon svg { width: 36px; height: 36px; }
  .os-window, [data-window="website-brief"] {
    --x: calc(7px + env(safe-area-inset-left, 0px)) !important;
    --y: calc(5px + env(safe-area-inset-top, 0px)) !important;
    --w: calc(100vw - 14px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    --h: calc(100dvh - var(--taskbar-h) - env(safe-area-inset-top, 0px) - 10px) !important;
  }
  .os-window.is-maximized {
    --x: calc(5px + env(safe-area-inset-left, 0px)) !important;
    --y: calc(5px + env(safe-area-inset-top, 0px)) !important;
    --w: calc(100vw - 10px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    --h: calc(100dvh - var(--taskbar-h) - env(safe-area-inset-top, 0px) - 10px) !important;
  }
  .os-window[data-window="welcome"]:not(.is-maximized) {
    --x: calc(90px + env(safe-area-inset-left, 0px)) !important;
    --w: calc(100vw - 97px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  }
  .os-window:not([data-window="welcome"]) [data-action="maximize"] { display: none; }
  .window-controls button { min-width: 44px; min-height: 44px; }
  .titlebar { height: 48px; }
  .window-body { height: calc(100% - 48px); }
  .tab-strip { height: 48px; }
  .browser-tabs { max-width: calc(100% - 46px); }
  .tab-strip .tab, .tab-strip .tab.is-active { height: 44px; min-width: 112px; }
  .tab-strip [data-browser-tab-close], .tab-strip [data-folder-tab-close] { width: 44px; flex: 0 0 44px; font-size: 16px; }
  .tab-new { width: 44px; height: 44px; flex-basis: 44px; font-size: 16px; }
  .browser-bar { padding: 3px; min-height: 50px; }
  .browser-bar button, .browser-bar button[type="button"] { min-width: 44px; height: 44px; }
  .browser-bar button[type="button"] { width: 44px; }
  .browser-bar input { height: 44px; }
  .address-row { height: 52px; padding: 4px; }
  .address-row > button, .address-row .view-controls button { min-width: 44px; width: 44px; height: 44px; }
  .address-row .address { height: 44px; }
  .address-row .file-path { overflow-x: auto; }
  .address-row .file-path button { min-height: 40px; }
  .file-places button { min-height: 44px; }
  .taskbar {
    grid-template-columns: 57px minmax(0, 1fr) 76px;
    padding: 4px calc(4px + env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) calc(4px + env(safe-area-inset-left, 0px));
  }
  .task-list { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .task-list::-webkit-scrollbar { display: none; }
  .start-menu {
    left: calc(4px + env(safe-area-inset-left, 0px));
    max-height: calc(100dvh - var(--taskbar-h) - env(safe-area-inset-top, 0px) - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .start-menu button { min-height: 44px; }
  .signal-bars { display: none; }
  .welcome-app { padding: 20px 16px; }
  .welcome-links { gap: 8px; }
  .welcome-links button { padding: 12px; }
  .welcome-footer { align-items: flex-start; gap: 8px; }
  .quote-form input, .quote-form textarea, [data-quote-draft] { font-size: 16px; }
  .inspection-control { top: auto; bottom: calc(var(--taskbar-h) + 8px); left: 8px; right: 8px; }
}
@media (max-width: 360px) {
  .welcome-links { grid-template-columns: 1fr; }
  .welcome-footer { flex-direction: column; }
}

.browser-context { margin: 0; padding: 9px 12px; background: #eee8cf; color: #263b47; font: 11px/1.5 var(--ui-font); }
.browser-site-surface.has-context { display: flex; flex-direction: column; }
.browser-site-surface.has-context iframe { flex: 1; min-height: 0; height: auto; }

/* Service desk: one offer, one useful example, one next action. */
.service-desk {
  --desk-bg: var(--document-bg);
  --desk-panel: var(--document-control);
  --desk-ink: var(--document-ink);
  --desk-muted: var(--document-muted);
  --desk-accent: var(--document-link);
  --desk-rule: var(--document-rule);
  padding: 0;
  background: var(--desk-bg);
  color: var(--desk-ink);
  font: 12px/1.6 var(--ui-font);
  overflow: auto;
  scrollbar-color: #66808a #c1cbd0;
}
.service-desk button, .service-desk input, .service-desk textarea { font: inherit; }
.desk-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 25px; font-size: 12px; color: var(--desk-muted); }
.desk-topline button { color: var(--desk-ink); background: none; border: 0; padding: 8px 0 8px 12px; cursor: pointer; }
.desk-topline button:hover { color: var(--desk-accent); }
.desk-tabs { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid #7c919c; margin: 0 25px; }
.desk-tabs button { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; padding: 16px 18px; color: var(--desk-muted); background: transparent; border: 0; text-align: left; cursor: pointer; font-weight: 600; }
.desk-tabs button + button { border-left: 1px solid #7c919c; }
.desk-tabs button svg { width: 28px; height: 28px; grid-row: span 2; }
.desk-tabs button > span { display: block; font-size: 11px; font-weight: 400; margin-top: 2px; }
.desk-tabs button[aria-selected="true"] { color: var(--desk-ink); background: #d8e0e3; box-shadow: inset 0 -2px var(--desk-accent); }
.desk-tabs button:hover { background: #d2dde2; }
.desk-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 28px 25px 24px; align-items: start; }
.desk-story h2 { margin: 0 0 16px; font: 700 20px/1.35 var(--ui-font); letter-spacing: 0; }
.desk-story h2 em { color: var(--desk-accent); font-style: normal; }
.desk-story > p { margin: 0; color: var(--desk-muted); max-width: 37ch; font-size: 14px; line-height: 1.7; }
.desk-goals { margin-top: 25px; }
.desk-prompt { display: block; margin-bottom: 8px; font-size: 12px; color: var(--desk-muted); }
.desk-goals button { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 42px; gap: 12px; border: 0; border-top: 1px solid #8fa1aa; background: none; color: var(--desk-ink); text-align: left; padding: 9px 10px; cursor: pointer; font-size: 13px; transition: background 140ms; }
.desk-goals button:last-child { border-bottom: 1px solid #8fa1aa; }
.desk-goals button > span { opacity: .45; }
.desk-goals button:hover { background: #d3dfe4; }
.desk-goals button[aria-pressed="true"] { color: #f2f5f5; background: #1b4e78; }
.desk-goals button[aria-pressed="true"] > span { opacity: 1; }
.desk-example { margin: 0; min-width: 0; }
.desk-example figcaption { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--desk-muted); font-size: 10px; }
.desk-example figcaption > span:last-child { color: var(--desk-accent); }
.sample-page { background: #edf1ef; color: #21343e; border: 2px inset #dbe3e7; box-shadow: none; }
.sample-masthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #a5b3bb; }
.sample-masthead b { font-size: 11px; letter-spacing: .1em; }
.sample-masthead > span { max-width: 13ch; font-size: 9px; line-height: 1.35; text-align: right; }
.sample-content { padding: 22px 20px 20px; min-height: 259px; }
.sample-index { font-size: 10px; color: #536a76; }
.sample-content h3 { white-space: pre-line; margin: 10px 0; font: 700 20px/1.35 var(--ui-font); letter-spacing: 0; }
.sample-content > p { font-size: 11px; line-height: 1.6; margin: 12px 0 17px; max-width: 30ch; }
.sample-detail { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid #b2c0c7; font-size: 11px; }
.sample-detail span + span { color: #526772; font-size: 10px; }
.sample-action { display: block; padding-top: 12px; font-weight: 600; font-size: 11px; }
.sample-footer { display: flex; gap: 12px; justify-content: space-between; padding: 11px 16px; background: #d8e1e4; color: #3b5563; font-size: 8px; }
.sample-footer span + span { text-align: right; }
[data-sample-page="work"] .sample-content { background: #edf1ef; }
[data-sample-page="contact"] .sample-content { background: #edf1ef; }
.example-note { margin: 10px 0 0; font-size: 10px; color: var(--desk-muted); line-height: 1.6; }
.workflow-content { padding: 20px; background: #edf1ef; color: #21343e; border: 2px inset #dbe3e7; box-shadow: none; }
.workflow-input { padding-bottom: 18px; border-bottom: 1px solid #aabac3; }
.workflow-input > span { color: #4a6473; font-size: 10px; }
.workflow-input p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.workflow-steps { padding: 18px 0 0; margin: 0; list-style: none; }
.workflow-steps li { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 0 0 20px; }
.workflow-steps li:last-child { padding-bottom: 0; }
.workflow-steps li > span { width: 9px; height: 9px; border: 1px solid #5a7788; background: #c6d4dc; margin-top: 6px; z-index: 1; }
.workflow-steps li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 15px; bottom: -5px; width: 1px; background: #acbec8; }
.workflow-steps b { font-size: 13px; font-weight: 600; }
.workflow-steps p { margin: 4px 0 0; font-size: 11px; color: #496371; line-height: 1.5; }
.workflow-human > span { background: #1b4e78 !important; border-color: #1b4e78 !important; }
.desk-decision { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 25px; padding: 20px 0 16px; border-top: 1px solid #7c919c; }
.desk-decision p { margin: 0 0 2px; display: flex; align-items: baseline; gap: 12px; }
.desk-decision strong { font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.desk-decision strong small { font-size: 11px; color: var(--desk-muted); }
.desk-decision p > span, .desk-decision > div > span { font-size: 11px; color: var(--desk-muted); }
.desk-primary { display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; padding: 13px 18px; min-height: 46px; background: #1b4e78; color: #f2f5f5 !important; border: 1px solid #627f92; text-decoration: none; font-weight: 600 !important; font-size: 13px !important; cursor: pointer; box-shadow: inset 0 1px #fff5; transition: background 140ms, transform 140ms; }
.desk-primary:hover { background: #285e86; transform: translateY(-1px); }
.desk-primary:active { transform: translateY(1px); }
.desk-primary[aria-disabled="true"] { opacity: .5; cursor: default; }
.service-desk :is(button, a, summary):focus-visible { outline: 2px solid #1b4e78; outline-offset: 3px; }
.desk-inclusions { margin: 0 25px 22px; font-size: 12px; color: var(--desk-muted); }
.desk-inclusions summary { width: fit-content; cursor: pointer; padding: 7px 0; }
.desk-inclusions p { max-width: 70ch; line-height: 1.7; margin: 7px 0; }
.service-desk .desk-enquiry { padding: 25px 32px 30px; background: transparent; color: var(--desk-ink); overflow: visible; height: auto; }
.desk-back { border: 0; background: none; color: var(--desk-muted); padding: 8px 0; cursor: pointer; font-size: 12px !important; text-decoration: none; }
.desk-back:hover { color: var(--desk-accent); }
.desk-brief-heading { margin: 20px 0; }
.desk-brief-heading h2 { font: 700 22px/1.3 var(--ui-font); letter-spacing: 0; margin: 0 0 10px; }
.desk-brief-heading p { margin: 0; color: var(--desk-muted); font-size: 14px; }
.desk-brief-context { display: flex; align-items: center; gap: 16px; justify-content: space-between; border-block: 1px solid #7c919c; padding: 11px 0; margin-bottom: 24px; color: #1b4e78; font-size: 12px; }
.desk-brief-context button { color: var(--desk-muted); border: 0; background: none; cursor: pointer; text-decoration: underline; padding: 6px; }
.service-desk .quote-recap { display: none !important; }
.service-desk .quote-form { gap: 20px; }
.service-desk .quote-form label > span { color: var(--desk-ink); font-size: 12px; }
.service-desk .quote-form input, .service-desk .quote-form textarea { box-shadow: none; background: #f5f7f6; border: 1px solid #8a9da8; color: var(--desk-ink); padding: 12px; border-radius: 0; font-size: 16px; }
.service-desk .quote-form input::placeholder, .service-desk .quote-form textarea::placeholder { color: #576e7b; opacity: 1; }
.service-desk .quote-form input:focus-visible, .service-desk .quote-form textarea:focus-visible { outline: 2px solid var(--desk-accent); outline-offset: 2px; }
.desk-form-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 4px; }
.desk-form-footer p { color: var(--desk-muted); margin: 0; font-size: 11px; line-height: 1.6; }
.service-desk .quote-error { background: #57302d; color: #fff0db; border: 1px solid #ba7867; padding: 12px; }
.service-desk .quote-sent { padding: 0; margin: 0; background: none; color: var(--desk-ink); border: 0; display: grid; gap: 12px; }
.service-desk .quote-sent p { margin: 5px 0 0; color: var(--desk-muted); font-size: 12px; }
.service-desk .quote-sent b { color: var(--desk-ink); font: 700 17px var(--ui-font); }
.service-desk [data-quote-draft] { margin: 0; background: #f5f7f6; border: 0; color: #20343e; font: 13px/1.6 var(--ui-font); padding: 18px; min-height: 210px; }
.service-desk .quote-draft-label { color: var(--desk-muted); font-size: 11px; margin-top: 4px; }
.desk-draft-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.desk-draft-actions .desk-primary { margin-left: auto; }
@container (max-width: 660px) {
  .desk-panel { gap: 20px; }
  .desk-story h2 { font-size: 20px; }
  .desk-decision { align-items: stretch; flex-direction: column; gap: 13px; }
  .desk-decision .desk-primary { justify-content: center; }
}
@container (max-width: 530px) {
  .desk-topline { padding: 12px 16px; }
  .desk-tabs { margin-inline: 16px; }
  .desk-tabs button { padding: 13px 10px; grid-template-columns: 24px 1fr; gap: 8px; font-size: 13px; }
  .desk-tabs button svg { width: 23px; height: 23px; }
  .desk-tabs button > span { display: none; }
  .desk-panel { grid-template-columns: 1fr; padding: 23px 18px 18px; gap: 22px; }
  .desk-story h2 { font-size: 20px; }
  .desk-story > p { max-width: none; }
  .desk-goals { margin-top: 18px; }
  .desk-goals button { min-height: 44px; }
  .desk-example figcaption { font-size: 11px; }
  .sample-content { min-height: 0; padding: 17px 20px; }
  .sample-content h3 { font-size: 20px; }
  .sample-content > p, .sample-detail, .sample-action { font-size: 12px; }
  .sample-index, .sample-detail span + span { font-size: 11px; }
  .sample-footer { font-size: 9px; }
  .sample-masthead > span { max-width: none; }
  .example-note { font-size: 11px; }
  .desk-decision { margin-inline: 18px; }
  .desk-inclusions { margin-inline: 18px; }
  .service-desk .desk-enquiry { padding: 18px; }
  .desk-brief-heading h2 { font-size: 22px; }
  .service-desk .quote-form { grid-template-columns: 1fr; gap: 17px; }
  .desk-form-footer { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .desk-form-footer .desk-primary { justify-content: center; }
  .desk-form-footer p { text-align: center; }
  .desk-draft-actions { gap: 12px; }
  .desk-draft-actions .desk-primary { width: 100%; margin: 0; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .service-desk *, .service-desk *::before, .service-desk *::after { transition: none !important; animation: none !important; }
}

/* Native control-panel details, using the desktop's existing steel tokens. */
.service-desk { scrollbar-color: #7e939f #c1cbd0; }
.desk-topline { background: #afbec7; border-bottom: 1px solid #718691; box-shadow: inset 0 1px #dbe3e7; padding: 7px 15px; font: 11px var(--ui-font); }
.desk-topline > span { color: #203139; font-weight: 700; }
.desk-tabs { margin: 15px 20px 0; border: 0; gap: 4px; }
.desk-tabs button { border: 1px solid #6e8592; border-top-color: #f0f4f5; border-left-color: #e3ebee; background: #aabcc7; padding: 12px 14px; font-size: 12px; }
.desk-tabs button + button { border-left: 1px solid #e3ebee; }
.desk-tabs button[aria-selected="true"] { color: #f1f5f6; background: #234963; box-shadow: inset 1px 1px #6e8b9e, inset -1px -1px #102b3e; }
.desk-tabs button:hover { background: #b8c9d2; color: #203139; }
.desk-tabs button[aria-selected="true"]:hover { background: #2e5671; color: #f1f5f6; }
.desk-panel { padding: 22px 21px 18px; gap: 24px; }
.desk-story > p { font-size: 12px; }
.desk-goals { border: 2px inset #dbe3e7; background: #edf1ef; margin-top: 20px; }
.desk-prompt { padding: 10px 11px; margin: 0; font-size: 10px; color: #4c6370; border-bottom: 1px solid #bdcbd2; }
.desk-goals button { color: #263c47; border: 0; font-size: 11px; min-height: 40px; }
.desk-goals button:last-child { border: 0; }
.desk-goals button[aria-pressed="true"] { background: #234963; color: #f1f5f6; }
.desk-example figcaption { font-size: 10px; }
.sample-masthead { background: #d6e0e5; box-shadow: inset 0 1px #fff; padding: 12px 14px; }
.sample-masthead b { font-size: 10px; letter-spacing: .03em; }
.sample-content { min-height: 230px; padding: 20px 17px; }
.sample-content h3 { font-size: 19px; }
.sample-content > p { font-size: 11px; }
.sample-detail { font-size: 11px; }
.sample-action { color: #34566b; font-size: 10px; font-weight: 400; }
.sample-footer { font-size: 9px; }
.desk-decision { padding: 15px 0 11px; margin-inline: 21px; }
.desk-decision strong { font-family: var(--ui-font); font-size: 20px; font-weight: 700; }
.desk-primary { border: 1px solid #142a38; border-left-color: #8ba4b3; border-top-color: #b9cbd7; background: linear-gradient(#335d78, #234963); box-shadow: inset 1px 1px #ffffff20, inset -1px -1px #132a3b; font: 700 12px var(--ui-font) !important; }
.desk-primary:hover { background: #376581; transform: none; }
.desk-primary:active { transform: translateY(1px); box-shadow: inset 1px 1px #132a3b; }
.service-desk :is(button, a, summary):focus-visible { outline: 1px dashed #0e2c40; outline-offset: 3px; }
.desk-primary:focus-visible, .desk-tabs button[aria-selected="true"]:focus-visible, .desk-goals button[aria-pressed="true"]:focus-visible { outline: 1px dashed #fff; outline-offset: -5px; }
.service-desk .quote-form input, .service-desk .quote-form textarea { border: 2px inset #dbe3e7; }
.service-desk .quote-form input:focus-visible, .service-desk .quote-form textarea:focus-visible { outline-color: #234963; }
.service-desk [data-quote-draft] { border: 2px inset #dbe3e7; }
.desk-brief-context { color: #234963; }
@container (max-width: 530px) {
  .desk-tabs { margin: 12px 14px 0; }
  .desk-panel { padding: 19px 15px; }
  .desk-story h2 { font-size: 20px; }
  .desk-goals button { min-height: 44px; }
  .sample-content { min-height: 0; }
  .desk-decision { margin-inline: 15px; }
}

/* Fixed application commands around one scrolling work area. */
.service-desk { display: flex; flex-direction: column; overflow: hidden; }
.desk-topline { flex: 0 0 auto; }
.desk-explore { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.desk-tabs { display: flex; flex: 0 0 auto; gap: 3px; margin: 10px 14px 0; }
.desk-tabs button { display: flex; gap: 8px; align-items: center; padding: 9px 16px; }
.desk-tabs button > span { display: none; }
.desk-tabs button svg { width: 21px; height: 21px; }
.desk-panel { flex: 1; min-height: 0; overflow: auto; padding: 18px 16px; gap: 20px; border-top: 1px solid #e8eef0; margin-top: 1px; }
.desk-story h2 { font: 700 15px/1.4 var(--ui-font); margin-bottom: 10px; }
.desk-story > p { font-size: 12px; line-height: 1.65; }
.desk-goals { margin-top: 17px; }
.desk-example figcaption { color: #425d6d; }
.sample-masthead b { display: flex; align-items: center; gap: 8px; text-transform: none; font-size: 11px; }
.sample-masthead b svg { width: 16px; height: 18px; }
.sample-content { min-height: 205px; padding: 17px; }
.sample-content h3 { font-size: 17px; }
.sample-content > p { max-width: none; font-size: 12px; }
.sample-detail, .sample-detail span + span { font-size: 11px; }
.desk-decision { flex: 0 0 auto; margin: 0; padding: 13px 16px; background: #b2c1ca; border-top: 1px solid #e6edf0; box-shadow: 0 -1px #7d929f; }
.desk-decision strong { font-size: 18px; }
.desk-inclusions { flex: 0 0 auto; margin: 0; padding: 3px 16px 7px; font-size: 11px; background: #b2c1ca; max-height: 135px; overflow: auto; }
.service-desk .desk-enquiry { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px; }
.desk-brief-heading h2 { font-size: 22px; }
@container (max-width: 530px) {
 .desk-panel { grid-template-columns: 1fr; }
 .desk-story h2 { font-size: 16px; }
 .desk-tabs { margin: 9px 10px 0; }
 .desk-tabs button { flex: 1; padding: 9px; font-size: 11px; }
 .desk-decision { gap: 8px; padding: 11px 13px; }
 .desk-decision p { display: inline-flex; gap: 8px; margin-right: 8px; }
 .desk-decision strong { font-size: 16px; }
 .desk-decision > div > span { font-size: 10px; }
 .desk-primary { min-height: 42px; }
 .service-desk .desk-enquiry { padding: 16px; }
}

.sample-footer, .sample-masthead > span { font-size: 10px; }

@container (max-width: 530px) {
  .desk-decision > div > span { display: block; margin-top: 5px; }
}

/* Services reads as a capabilities document inside the existing desktop. */
.service-desk .capabilities { display: block; overflow: auto; padding: 28px 30px 0; }
.capabilities-intro { max-width: 590px; margin-bottom: 26px; }
.capabilities-intro h2 { margin: 0 0 15px; color: var(--desk-ink); font: 700 28px/1.25 var(--ui-font); letter-spacing: -.02em; }
.capabilities-intro > p:last-child { margin: 0; color: var(--desk-muted); font-size: 13px; line-height: 1.75; max-width: 62ch; }
.capability { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--desk-rule); }
.capability-heading { display: flex; align-items: flex-start; gap: 12px; }
.capability-heading svg { width: 25px; height: 25px; flex: 0 0 auto; }
.capability-heading h3 { margin: 2px 0 0; font: 700 15px/1.4 var(--ui-font); }
.capability-copy p { margin: 0; font-size: 13px; line-height: 1.7; }
.capability-copy .capability-detail { margin-top: 9px; color: var(--desk-muted); font-size: 12px; }
.capabilities-references { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; border-top: 1px solid var(--desk-rule); padding: 15px 0; }
.capabilities-references > span { color: var(--desk-muted); font-size: 11px; }
.capabilities-references button, .capabilities-contact button { color: var(--desk-accent); border: 0; background: none; padding: 8px 0; cursor: pointer; text-align: left; }
.capabilities-references button:hover, .capabilities-contact button:hover { text-decoration: underline; text-underline-offset: 4px; }
.capabilities-contact { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0 22px; border-top: 1px solid var(--desk-rule); }
.capabilities-contact p { margin: 0; color: var(--desk-muted); }
.capabilities-contact button { font-weight: 700; }
@container (max-width: 600px) {
  .service-desk .capabilities { padding: 23px 19px 0; }
  .capabilities-intro h2 { font-size: 25px; }
  .capability { grid-template-columns: 1fr; gap: 13px; padding: 22px 0; }
  .capabilities-references { gap: 3px 18px; }
  .capabilities-references > span { flex-basis: 100%; }
}

/* Services uses the same light document surface and controls as Welcome. */
.service-desk { scrollbar-color: var(--steel) var(--document-bg); }
.service-desk .desk-topline { background: var(--document-control); color: var(--document-ink); border-bottom-color: var(--document-rule); box-shadow: none; }
.service-desk .desk-topline > span { color: var(--document-ink); }
.service-desk .desk-topline > span + span { color: var(--document-muted); font-weight: 400; }
.capabilities-secondary { display: flex; gap: 24px; margin: 0; padding: 17px 0; border-top: 1px solid var(--desk-rule); color: var(--desk-muted); font-size: 11px; line-height: 1.7; }
.capabilities-secondary strong { flex: 0 0 190px; color: var(--desk-ink); font-weight: 400; }
.service-desk :is(button, a):focus-visible { outline: 2px solid var(--document-link); outline-offset: 3px; }
.service-desk .desk-primary { background: var(--document-control); color: #152f43 !important; border: 1px solid var(--document-rule); box-shadow: inset 1px 1px #fff, 2px 2px #bdc4bf; }
.service-desk .desk-primary:hover { background: var(--document-hover); }
.service-desk .desk-brief-context { color: var(--desk-muted); border-color: var(--desk-rule); }
.service-desk .quote-form input, .service-desk .quote-form textarea, .service-desk [data-quote-draft] { background: #faf8ee; color: var(--document-ink); border: 1px solid var(--document-rule); }
.service-desk .quote-form input::placeholder, .service-desk .quote-form textarea::placeholder { color: var(--document-muted); }
.service-desk .quote-form input:focus-visible, .service-desk .quote-form textarea:focus-visible { outline-color: var(--document-link); }
@container (max-width: 600px) {
  .capabilities-secondary { flex-direction: column; gap: 5px; }
  .capabilities-secondary strong { flex-basis: auto; }
}

/* Custom project icons share the folder layout in both views. */
.collection-view--grid[data-collection="projects"] .folder-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.project-placeholder img { display: block; width: 78px; height: 58px; object-fit: contain; margin: 0 auto 5px; }
.collection-view--list .project-placeholder img { grid-column: 1; grid-row: 1; width: 34px; height: 34px; margin: 0; }
.collection-system .project-placeholder:hover b { text-decoration: none; }
.project-launch { text-decoration: none; cursor: pointer; }
.poker-app { position:relative; display:flex; padding:0; overflow:hidden; background:#f5f2ea; }
.poker-app iframe { display:block; width:100%; height:100%; border:0; background:#f5f2ea; }
.poker-window-loading, .poker-window-error { position:absolute; inset:0; display:grid; place-content:center; padding:24px; background:#f5f2ea; color:#131215; text-align:center; }
.poker-window-loading[hidden], .poker-window-error[hidden] { display:none; }

/* The desktop keeps its vertical icon column on short phones too. */
.desktop-icons-hint { display: none; }
@media (max-width: 900px) and (max-height: 500px),
       (max-height: 500px) and (pointer: coarse) {
  .desktop-icons { bottom: calc(var(--taskbar-h) + 26px); }
  .desktop-icons-hint {
    display: block;
    position: absolute;
    bottom: calc(var(--taskbar-h) + 7px);
    left: calc(5px + env(safe-area-inset-left, 0px));
    width: 76px;
    z-index: 10;
    text-align: center;
    font-size: 10px;
    text-shadow: 1px 1px #13242c;
    pointer-events: none;
  }
  .file-workspace { grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .file-places { display: block; border-right: 1px solid #9baeb4; border-bottom: 0; }
  .file-places button { justify-content: flex-start; min-height: 44px; }
  .file-explorer > .status-row { display: none; }
}
@container (max-width: 340px) {
  .welcome-app { padding: 16px 10px; }
  .welcome-app h1 { font-size: 26px; }
  .welcome-links { grid-template-columns: 1fr; }
  .welcome-footer { flex-direction: column; }
}
.project-launch img { display: block; width: 78px; height: 58px; object-fit: contain; margin: 0 auto 5px; }
.collection-view--list .project-launch img { grid-column: 1; grid-row: 1; width: 34px; height: 34px; margin: 0; }

/* A keyboard shortcut and readable project context within the desktop shell. */
.skip-projects {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  transform: translateY(-160%);
  padding: 12px 16px;
  border: 2px solid #142c40;
  background: #f9f5df;
  color: #142c40;
  font: 14px system-ui, sans-serif;
}
.skip-projects:focus-visible { transform: translateY(0); outline: 3px solid #fff; }
.collection-view--grid[data-collection="projects"] {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.collection-view--grid[data-collection="projects"] .folder-card .item-detail,
.collection-view--grid[data-collection="projects"] .folder-card .item-meta {
  display: block;
}
.collection-view--grid[data-collection="projects"] .folder-card .item-detail {
  max-width: 24ch;
  margin-top: 7px;
  color: #354b54;
  font: 13px/1.35 system-ui, sans-serif;
}
.collection-view--grid[data-collection="projects"] .folder-card .item-meta {
  margin-top: 7px;
  color: #4c636a;
  font: 700 10px/1.3 system-ui, sans-serif;
  letter-spacing: .04em;
}
.collection-view--list[data-collection="projects"] .folder-card {
  grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 1.5fr) minmax(100px, 1fr);
}
.collection-view--list[data-collection="projects"] .folder-card .item-detail,
.collection-view--list[data-collection="projects"] .folder-card .item-meta {
  display: block;
  font: 12px/1.35 system-ui, sans-serif;
  letter-spacing: 0;
}
.engine-case {
  overflow: auto;
  padding: 28px;
  background: var(--document-bg);
  color: var(--document-ink);
  font: 15px/1.65 system-ui, sans-serif;
}
.engine-case h2 { margin: 0 0 18px; font: 32px/1.15 var(--display-font); }
.engine-case h1 { max-width: 28ch; margin: 0 0 26px; font: 700 22px/1.25 var(--ui-font); }
.engine-case h3 { margin: 24px 0 8px; font: 18px/1.3 var(--ui-font); }
.engine-case p { max-width: 65ch; }
.engine-case__eyebrow { margin: 0 0 10px; font: 11px var(--ui-font); letter-spacing: .1em; }
.engine-case a { color: #174b74; }
.engine-case__links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; align-items: center; }
.engine-case__links button { padding: 0; border: 0; background: transparent; color: #174b74; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.engine-case__links :is(a, button):focus-visible { outline: 2px solid #174b74; outline-offset: 3px; }
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  .os-window[data-window="welcome"]:not(.is-maximized) {
    --x: calc(7px + env(safe-area-inset-left, 0px)) !important;
    --w: calc(100vw - 14px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  }
  .os-window[data-window="keepout"]:not(.is-maximized) {
    --y: 5px !important;
    --h: calc(100dvh - var(--taskbar-h) - 10px) !important;
  }
  .engine-case { padding: 20px 16px; }
}
@container (max-width: 560px) {
  .collection-view--grid[data-collection="projects"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-view--list[data-collection="projects"] .folder-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 3px 10px;
    padding-block: 10px;
  }
  .collection-view--list[data-collection="projects"] .folder-card img,
  .collection-view--list[data-collection="projects"] .folder-card svg { grid-row: 1 / 4; }
  .collection-view--list[data-collection="projects"] .folder-card b { grid-column: 2; grid-row: 1; }
  .collection-view--list[data-collection="projects"] .folder-card .item-detail { grid-column: 2; grid-row: 2; }
  .collection-view--list[data-collection="projects"] .folder-card .item-meta { grid-column: 2; grid-row: 3; }
}
.project-direct {
  flex: 0 0 auto;
  margin: 0 8px 0 auto;
  color: #fff;
  font: 12px/1.2 system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.project-direct:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A readable document within the desktop, with the projects one click away. */
.welcome-about {
  display: inline-block;
  margin: 0 0 16px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #174b74;
  font: 700 13px/1.4 system-ui, sans-serif;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.portfolio-readme { overflow: auto; background: var(--document-bg); color: var(--document-ink); font: 14px/1.65 system-ui, sans-serif; }
.portfolio-readme__path { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 10px; padding: 8px 22px; border-bottom: 1px solid var(--document-rule); background: var(--document-control); font: 11px/1.4 var(--ui-font); letter-spacing: .03em; }
.portfolio-readme__path span { color: var(--document-muted); }
.portfolio-readme__content { max-width: 760px; margin: 0 auto; padding: 32px 38px 44px; }
.portfolio-readme__eyebrow, .portfolio-readme__entry span { color: #50696f; font: 700 10px/1.4 var(--ui-font); letter-spacing: .08em; }
.portfolio-readme h2 { margin: 4px 0 12px; font: 32px/1.15 var(--display-font); }
.portfolio-readme h3 { margin: 35px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #254e5d; font: 700 20px/1.3 var(--ui-font); }
.portfolio-readme h4 { margin: 4px 0; font: 700 16px/1.3 var(--ui-font); }
.portfolio-readme p { max-width: 66ch; margin: 0 0 12px; }
.portfolio-readme__contents { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0; padding: 12px 14px; border: 1px solid #a5b1aa; background: #f7f5e9; }
.portfolio-readme__contents strong { margin-right: auto; font: 700 11px var(--ui-font); text-transform: uppercase; letter-spacing: .06em; }
.portfolio-readme a, .portfolio-readme button { color: #174b74; }
.portfolio-readme__entry { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 2fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid #c5cdc6; }
.portfolio-readme button { padding: 3px 0; border: 0; background: transparent; font: 700 13px/1.4 system-ui, sans-serif; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.portfolio-readme :is(a, button):focus-visible, .welcome-about:focus-visible { outline: 2px solid #174b74; outline-offset: 3px; }
.portfolio-readme__actions { display: flex; flex-wrap: wrap; gap: 10px 24px; }
@container (max-width: 560px) {
  .portfolio-readme__content { padding: 24px 20px 36px; }
  .portfolio-readme__entry { grid-template-columns: 1fr; gap: 8px; }
  .portfolio-readme__path span { display: none; }
}
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  .project-direct { display: inline-flex; align-items: center; min-height: 44px; margin-inline: 4px; }
}