@import url('./office-controls.css?v=20261015-selection-v1');

@font-face {
  font-family: "Noto Sans SC";
  src: local("Noto Sans SC"), url('/assets/fonts/noto-sans-sc/NotoSansSC-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.office-collection-page {
  /* Reviewed Animal Island finish shared by accepted page batches only.
     MIT notice: /assets/licenses/animal-island-ui-MIT.txt. */
  --office-island-text: #3d3932;
  --office-island-secondary: #625e55;
  --office-island-shadow: 0 2px 4px 0 rgba(61, 52, 40, .06);
  --office-island-button-base: #075e68;
  --office-tool-radius: 16px;
  --office-tool-shadow: 0 3px 0 #cee5df;
  --office-tool-pressed-shadow: 0 1px 0 #cee5df;
  --office-tool-hover-surface: var(--app-surface-subtle);
  --office-tool-hover-shadow: 0 3px 0 #bfdbd3;
  --office-tool-selected-surface: var(--app-primary-soft);
  --office-tool-selected-shadow: 0 3px 0 #a9cfc5;
  --office-tool-selected-pressed-shadow: 0 1px 0 #a9cfc5;
  --office-tool-disabled-surface: #f7f8f4;
  --office-tool-disabled-shadow: 0 3px 0 #d9ded7;
  --office-tool-disabled-ink: #787f76;
  --office-island-background:
    radial-gradient(circle, rgba(130, 213, 187, .18) 1.5px, transparent 1.5px) 0 0 / 28px 28px,
    radial-gradient(circle, rgba(170, 235, 210, .12) 1px, transparent 1px) 7px 7px / 14px 14px,
    #e8faf5;
  --office-sandbox-control-surface: var(--app-surface);
  --office-interface-font: "Noto Sans SC", sans-serif;
  --office-sandbox-tool-size: 58px;
  --office-object-catalog-inset: 12px;
  --office-object-grid-gap: 9px;
  /* Shared finish for the direction entry and both existing direction dials. */
  --office-direction-face: #faf7ee;
  --office-direction-rim: #dceee7;
  --office-direction-ink: #174c55;
  --office-direction-line: #8ba9a8;
  --office-direction-selected: #d3eae3;
  --office-direction-active: #087b87;
  --office-direction-shadow: 0 2px 3px rgb(23 76 85 / 12%);
  /* Choice cards share state semantics, not artwork, geometry or selection logic. */
  --office-choice-hover: #faf7ee;
  --office-choice-selected: #d3eae3;
  --office-choice-sealed-surface: #fcfefd;
  --office-choice-seal: url("../img/office/ui/selection-seal-v1.png");
  --office-choice-edge: #087b87;
  --office-choice-focus: #174c55;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--app-text);
  background: var(--app-surface-subtle);
  font-family: var(--office-interface-font);
}

/* Match the inherited .app-shell:has(.page-method.is-active) specificity so
   its residential width rail cannot shrink the full-width Office shell. */
.office-collection-page .office-collection-shell.app-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* The server shell starts at Step0. Do not expose it before the client has
   restored the requested stage and completed its first render. */
.office-collection-page:not(.is-office-stage-ready) .office-collection-shell {
  visibility: hidden;
}

/* First HTML paint and scene hydration share this one loading surface. */
.office-sandbox-loading {
  position: absolute; inset: 0; z-index: 25;
  display: grid; place-items: center; padding: 24px; box-sizing: border-box;
  background: #78c8d0; color: var(--app-text);
}
.office-sandbox-loading.is-entry { position: fixed; z-index: 100; background: var(--office-island-background); }
.office-loading-panel {
  box-sizing: border-box; width: min(280px, 100%); padding: 20px 24px 24px;
  text-align: center; background: #fff; border: 1px solid #cce5df;
  border-radius: 20px; box-shadow: 0 4px 0 #cee5df;
}
.office-loading-icon { display: block; width: 64px; height: 64px; margin: 0 auto 8px; object-fit: contain; }
.office-loading-panel p { margin: 0 0 16px; font: 600 14px/1.5 var(--office-interface-font); }
.office-loading-track { height: 12px; padding: 2px; overflow: hidden; border: 1px solid #b6d8d2; border-radius: 999px; background: #e8f5f1; box-sizing: border-box; }
.office-loading-track span { position: relative; display: block; width: var(--office-loading-progress, 0%); height: 100%; overflow: hidden; border-radius: inherit; background: #087b87; transition: width .18s ease; }
.office-loading-track[aria-valuenow] span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 48%), transparent); animation: office-loading-flow 1.2s linear infinite; }
.office-loading-track[aria-valuenow="100"] span { transition: none; }
.office-loading-percent { display: block; margin-top: 8px; min-height: 21px; color: #087b87; font: 700 14px/1.5 var(--office-interface-font); font-variant-numeric: tabular-nums; }
.office-sandbox-loading [hidden], .office-sandbox-loading[hidden] { display: none; }
@keyframes office-loading-flow { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .office-loading-track span { transition: none; }
  .office-loading-track[aria-valuenow] span::after { animation: none; display: none; }
}

.office-collection-page .account-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  padding: 12px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(31, 70, 62, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 70px rgba(36, 77, 72, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.office-collection-page .product-account.is-open .account-menu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.office-collection-page .account-menu-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.office-collection-page .account-menu-identity img,
.office-collection-page .account-menu-identity > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #ecfaf3;
  color: #108957;
  object-fit: cover;
  font-weight: 800;
}

.office-collection-page .account-menu-identity strong,
.office-collection-page .account-menu-identity small {
  display: block;
}

.office-collection-page .account-menu-identity small {
  margin-top: 3px;
  color: #7a8984;
  font-size: 12px;
}

.office-collection-page .account-menu-panel > a,
.office-collection-page .account-menu-panel form button {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #344740;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.office-collection-page .account-menu-panel > a:hover,
.office-collection-page .account-menu-panel form button:hover {
  background: #ecfaf3;
}

/* Wide-screen selection keeps website navigation; the sandbox stays immersive. */
.office-collection-page .office-collection-shell[data-current-stage="step0"],
.office-collection-page .office-collection-shell[data-office-flow="collection"] {
  padding: 0;
  overflow-x: clip;
}

.office-collection-page .office-collection-shell[data-current-stage="step0"] > .product-mobile-nav,
.office-collection-page .office-collection-shell[data-current-stage="step0"] ~ .energy-bg,
.office-collection-page .office-collection-shell[data-office-flow="collection"] > .product-header,
.office-collection-page .office-collection-shell[data-office-flow="collection"] > .product-mobile-nav,
.office-collection-page .office-collection-shell[data-office-flow="collection"] ~ .energy-bg {
  display: none;
}

.office-collection-page .office-orientation-page,
.office-collection-page .office-desk-type-page,
.office-collection-page .office-sandbox-page {
  --office-sandbox-rail-width: min(1158px, calc(100% - 48px));
  --office-board-frame-size: 700px;
  --office-object-column-size: 360px;
  --office-workspace-gap: 98px;
}

.office-collection-page .office-orientation-page {
  --office-sandbox-ink: #082957;
  --office-sandbox-paper: #fff5df;
  --office-sandbox-muted: #61798a;
  display: none;
  min-height: 100dvh;
  color: var(--office-sandbox-ink);
  background: #58c6eb;
  font-family: var(--office-interface-font);
}

.office-collection-page .office-orientation-page.is-active {
  display: block;
}

.office-collection-page .office-desk-type-page {
  --office-sandbox-ink: #10100f;
  --office-sandbox-paper: #f7f7f2;
  --office-sandbox-muted: #85857d;
  display: none;
  min-height: 100dvh;
  color: var(--office-sandbox-ink);
  background: var(--office-sandbox-paper);
  font-family: var(--office-interface-font);
}

.office-collection-page .office-desk-type-page.is-active {
  display: block;
}

.office-collection-page .office-sandbox-page {
  --office-sandbox-ink: #10100f;
  --office-sandbox-paper: #f7f7f2;
  --office-sandbox-muted: #85857d;
  display: none;
  min-height: 100dvh;
  color: var(--office-sandbox-ink);
  background: var(--office-sandbox-paper);
  font-family: var(--office-interface-font);
}

.office-collection-page .office-sandbox-page.is-active {
  display: block;
}

.office-collection-page .office-orientation-page .office-sandbox-masthead,
.office-collection-page .office-desk-type-page .office-sandbox-masthead {
  width: var(--office-sandbox-rail-width);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-sizing: border-box;
}

.office-collection-page .office-orientation-page .office-sandbox-masthead > span,
.office-collection-page .office-desk-type-page .office-sandbox-masthead > span {
  grid-column: 2;
  justify-self: center;
}

.office-collection-page .office-sandbox-masthead {
  height: 58px;
  padding: 0;
  border-bottom: 1px solid var(--office-sandbox-ink);
  font-size: 10px;
  letter-spacing: .22em;
}

.office-collection-page .office-sandbox-masthead-inner {
  width: var(--office-sandbox-rail-width);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--office-board-frame-size) var(--office-object-column-size);
  gap: var(--office-workspace-gap);
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.office-collection-page .office-sandbox-masthead-inner > .office-sandbox-back {
  grid-column: 1;
  justify-self: start;
}

.office-collection-page .office-sandbox-masthead-inner > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.office-collection-page .office-sandbox-masthead-actions {
  grid-column: 2;
  justify-self: end;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.office-collection-page .office-sandbox-save-status {
  color: #666660;
  font-family: var(--office-interface-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
}

.office-collection-page .office-profile-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0;
  white-space: nowrap;
}

.office-collection-page .office-profile-entry-label {
  font-weight: 700;
}

.office-collection-page .office-profile-entry-state {
  font-weight: 500;
  opacity: .88;
}

.office-collection-page .office-profile-entry-mark {
  font-size: 12px;
  line-height: 1;
  transform: translateY(-.5px);
}

.office-collection-page .office-profile-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}
.office-collection-page .office-profile-drawer[hidden] { display: none; }
.office-collection-page .office-profile-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(22 54 58 / 34%);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.office-collection-page .office-profile-drawer-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vw, 28px);
  box-sizing: border-box;
  color: var(--office-island-text);
  background: var(--office-island-background);
  border: 1px solid var(--app-line, #d4e6e8);
  border-radius: 24px;
  box-shadow: 0 20px 64px rgb(22 54 58 / 16%);
}
.office-collection-page .office-profile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 16px;
  margin-bottom: 12px;
}
.office-collection-page .office-profile-drawer-header h2 {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.office-collection-page .office-profile-drawer-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
}
.office-collection-page .office-profile-drawer-close .collection-icon { width: 22px; height: 22px; }
.office-collection-page .office-profile-drawer-lead {
  flex: 0 0 auto;
  margin: 0 0 24px;
  color: var(--office-island-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.office-collection-page .office-profile-form {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.office-collection-page .office-profile-drawer-body {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 3px;
}
.office-collection-page .office-profile-drawer-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 28px;
  padding-bottom: 4px;
}
.office-collection-page .office-profile-field { display: flex; flex-direction: column; gap: 10px; }
.office-collection-page .office-profile-field-label { font-size: 14px; font-weight: 700; }
.office-collection-page .office-profile-field.birth-date-label .birth-date-control {
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--app-line, #d4e6e8);
  border-radius: var(--office-tool-radius);
  background: var(--app-surface, #fff);
  box-shadow: var(--office-island-shadow);
  box-sizing: border-box;
  cursor: pointer;
}
.office-collection-page .office-profile-field.birth-date-label .birth-date-control input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 15px;
  outline: none;
}
.office-collection-page .office-profile-field.birth-date-label .birth-date-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  color: var(--office-island-secondary);
}
.office-collection-page .office-profile-field.birth-date-label .date-hint {
  color: var(--office-island-secondary);
  font-size: 12px;
  line-height: 1.4;
}
.office-collection-page .office-profile-field.birth-date-label .birth-date-control:focus-within {
  outline: 2px solid var(--app-primary, #08798b);
  outline-offset: 2px;
}
.office-collection-page .office-profile-field.birth-date-label.has-error .birth-date-control { border-color: #9a2f2f; }
.office-collection-page .office-profile-gender-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.office-collection-page .office-profile-gender-option {
  min-height: 48px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}
.office-collection-page .office-profile-field-error { margin: 0; color: #9a2f2f; font-size: 12px; line-height: 1.4; }
.office-collection-page .office-profile-field-error:empty { display: none; }


body.office-profile-drawer-open {
  overflow: hidden;
}

.office-collection-page .office-sandbox-board.is-profile-layer-personal .office-sandbox-total-label {
  letter-spacing: .04em;
}

.office-collection-page .office-sandbox-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: var(--office-interface-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.office-collection-page .office-sandbox-back-mark {
  font-size: 14px;
  line-height: 1;
}

.office-collection-page .office-sandbox-back:hover {
  color: #050505;
}

.office-collection-page .office-sandbox-back:focus-visible {
  outline: none; text-decoration: underline; text-underline-offset: 4px;
}

.office-collection-page .office-sandbox-masthead-inner > span {
  grid-column: unset;
}

.office-collection-page .office-sandbox-content {
  width: var(--office-sandbox-rail-width);
  margin: 0 auto;
  padding: 24px 0 26px;
  --office-step-action-offset: 8px;
  --office-step-canvas-size: 700px;
  --office-step-side-width: 330px;
}

.office-collection-page .office-sandbox-content > h1 {
  width: 740px;
  margin: 0 0 14px -20px;
  color: #050505;
  font-family: var(--office-interface-font);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -.03em;
}

.office-collection-page .office-sandbox-page .office-sandbox-content > .office-sandbox-title--visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.office-collection-page .office-sandbox-workspace {
  position: relative;
  display: grid;
  grid-template-columns: var(--office-board-frame-size) var(--office-object-column-size);
  gap: var(--office-workspace-gap);
  padding-bottom: 25px;
  align-items: start;
  --office-side-panel-size: var(--office-board-frame-size);
}

@media (min-width: 1024px) {
  .office-collection-page .office-orientation-control {
    margin-top: 0;
  }
}

.office-collection-page .office-sandbox-board-frame {
  grid-column: 1;
  grid-row: 1;
  width: 700px;
  height: 700px;
  position: relative;
  overflow: hidden;
  border: 3px solid #082957;
  border-radius: 26px;
  background: #21c8dc url("/assets/img/office/sandbox/toy-island-v1/water-v1.png") center / cover no-repeat;
  box-shadow: 0 10px 0 rgba(8, 78, 122, .24), 0 22px 32px rgba(7, 82, 126, .18);
}

.office-collection-page .office-toy-island-scene {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: visible;
}

.office-collection-page .office-toy-island-environment,
.office-collection-page .office-sandbox-board {
  position: absolute;
}

.office-collection-page .office-toy-island-environment {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(4px 8px 7px rgba(5, 53, 89, .22));
}

.office-collection-page .office-sandbox-board {
  z-index: 3;
  top: 11.5854%;
  left: 11.5854%;
  width: 76.8293%;
  height: 76.8293%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--office-sandbox-ink);
}

.office-collection-page .office-sandbox-inline-feedback {
  position: absolute;
  top: calc(var(--office-board-frame-size) + 7px);
  left: 0;
  width: var(--office-board-frame-size);
  min-height: 18px;
  margin: 0;
  color: #67675f;
  font-family: var(--office-interface-font);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transition: opacity .16s ease;
}

.office-collection-page .office-sandbox-inline-feedback.is-visible {
  opacity: 1;
}

.office-collection-page .office-sandbox-board.is-phase-outer .office-sandbox-vector-layer--far,
.office-collection-page .office-sandbox-board.is-phase-outer .office-sandbox-vector-layer--near {
  pointer-events: none;
}

.office-collection-page .office-sandbox-board.is-phase-inner .office-sandbox-vector-layer--outer {
  pointer-events: none;
}

.office-collection-page .office-sandbox-board.is-phase-inner .office-sandbox-vector-layer--outer .office-sandbox-vector-shape {
  opacity: 0;
}

.office-collection-page .office-sandbox-board.is-phase-inner .office-sandbox-vector-layer--outer .office-sandbox-vector-plus {
  opacity: 0 !important;
}

.office-collection-page .office-sandbox-vector-cell.is-phase-disabled {
  pointer-events: none;
}

.office-collection-page .office-sandbox-outer-slot-label {
  fill: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.office-collection-page .office-sandbox-inner-structure-label,
.office-collection-page .office-sandbox-inner-object-label {
  fill: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.office-collection-page .office-object-card.is-phase-muted {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.office-collection-page .office-sandbox-board-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: var(--office-sandbox-ink);
  shape-rendering: geometricPrecision;
}

.office-collection-page .office-sandbox-vector-cell--item,
.office-collection-page .office-sandbox-vector-count {
  cursor: pointer;
  outline: none;
}

.office-collection-page .office-sandbox-vector-cell .office-sandbox-vector-shape {
  transition: fill .14s ease, stroke .14s ease;
}

.office-collection-page .office-sandbox-vector-cell--outer .office-sandbox-vector-shape,
.office-collection-page .office-sandbox-vector-cell--item .office-sandbox-vector-shape {
  fill: #e7e2d6;
  stroke: #fff6dc;
}

.office-collection-page .office-sandbox-vector-cell--outer .office-sandbox-vector-shape {
  fill: #ffc928;
  stroke-width: 3;
}

.office-collection-page .office-sandbox-vector-cell--item .office-sandbox-vector-shape {
  stroke-width: 2.4;
}

.office-collection-page .office-sandbox-board.is-phase-inner .office-sandbox-vector-cell--item .office-sandbox-vector-shape {
  fill: #ffc928;
}

.office-collection-page .office-sandbox-board.is-phase-outer .office-sandbox-vector-cell--item .office-sandbox-vector-plus {
  opacity: .62;
}

.office-collection-page .office-sandbox-board.is-phase-inner .office-sandbox-vector-cell--item .office-sandbox-vector-plus {
  opacity: 1;
}

.office-collection-page .office-sandbox-vector-score-shape,
.office-collection-page .office-sandbox-vector-count-shape {
  fill: #0b4778;
  stroke: #082957;
}

.office-collection-page .office-sandbox-vector-layer--center > ellipse:first-child {
  fill: #fff7e8;
  stroke: #082957;
  stroke-width: 2;
}

.office-collection-page .office-sandbox-board .office-sandbox-bearing-indicator,
.office-collection-page .office-sandbox-board .office-sandbox-vector-total {
  display: none;
}

.office-collection-page .office-sandbox-vector-cell--item.is-slot-hovered .office-sandbox-vector-shape,
.office-collection-page .office-sandbox-vector-cell--item.is-drop-target .office-sandbox-vector-shape {
  fill: var(--office-sandbox-paper);
  stroke: var(--office-sandbox-ink);
  stroke-width: 1.8;
}

.office-collection-page .office-sandbox-vector-cell--item:focus-visible {
  outline: 2px solid var(--office-sandbox-ink);
  outline-offset: 1px;
}

.office-collection-page .office-sandbox-vector-plus {
  fill: #fffdf5;
  font-family: var(--office-interface-font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: fill .14s ease, opacity .14s ease, transform .1s ease-out;
}

.office-collection-page .office-sandbox-board.is-phase-outer
  .office-sandbox-vector-layer--outer
  .office-sandbox-vector-plus-mark {
  opacity: 1;
}

.office-collection-page .office-sandbox-vector-cell--item .office-sandbox-vector-plus {
  font-size: 17px;
}

.office-collection-page .office-sandbox-vector-cell--item.is-slot-hovered .office-sandbox-vector-plus,
.office-collection-page .office-sandbox-vector-cell--item.is-drop-target .office-sandbox-vector-plus {
  opacity: 1;
}

.office-collection-page .office-sandbox-vector-object-icon {
  color: var(--office-sandbox-ink);
  overflow: visible;
  pointer-events: none;
}

.office-collection-page .office-sandbox-vector-score-reading,
.office-collection-page .office-sandbox-vector-score-mark,
.office-collection-page .office-sandbox-vector-count-value,
.office-collection-page .office-sandbox-total-mark,
.office-collection-page .office-sandbox-total-label,
.office-collection-page .office-sandbox-total-value {
  fill: var(--office-sandbox-paper);
  font-family: var(--office-interface-font);
  pointer-events: none;
}

.office-collection-page .office-sandbox-vector-score-reading {
  font-size: 9.5px;
  font-weight: 800;
}

.office-collection-page .office-sandbox-vector-score-mark {
  font-size: 11px;
  font-weight: 500;
}

.office-collection-page .office-sandbox-vector-count-value {
  font-size: 12px;
  font-weight: 800;
  dominant-baseline: central;
  text-anchor: middle;
}

.office-collection-page .office-sandbox-center-forward-label {
  fill: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
}

.office-collection-page .office-sandbox-total-mark {
  font-size: 15px;
}

.office-collection-page .office-sandbox-total-label {
  font-size: 10px;
  font-weight: 800;
}

.office-collection-page .office-sandbox-total-value {
  font-size: 27px;
  font-weight: 800;
}

.office-collection-page .office-object-column {
  grid-column: 2;
  grid-row: 1;
  width: var(--office-object-column-size);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.office-collection-page .office-object-panel {
  anchor-name: --office-library-panel;
  position: relative;
  width: var(--office-object-column-size);
  height: var(--office-side-panel-size);
  min-height: var(--office-side-panel-size);
  max-height: var(--office-side-panel-size);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.2px solid var(--office-sandbox-ink);
  background: var(--office-sandbox-paper);
}

.office-collection-page .office-object-panel > header {
  min-height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--office-sandbox-ink);
}

.office-collection-page .office-object-panel h2 {
  margin: 0;
  font-family: var(--office-interface-font);
  font-size: 22px;
  font-weight: 500;
}

.office-collection-page .office-object-panel-toggle {
  display: none;
}

.office-collection-page .office-object-panel > header button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.office-collection-page .office-object-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  overflow: hidden;
  border-bottom: 1px solid var(--office-sandbox-ink);
}

.office-collection-page .office-object-tab {
  min-width: 0;
  min-height: 56px;
  padding: 7px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}


.office-collection-page .office-object-tab svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-collection-page .office-object-tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.office-collection-page .office-object-tab:focus-visible {
  z-index: 1;
}


.office-collection-page .office-object-catalog {
  flex: 1;
  min-height: 0;
  padding: 14px 12px 18px;
  overflow-y: auto;
}

.office-collection-page .office-object-tabpanel[hidden] {
  display: none;
}

.office-collection-page .office-object-group + .office-object-group {
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid #d7d7d0;
}

.office-collection-page .office-object-group h3 {
  margin: 0 0 10px;
  color: #777772;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.office-collection-page .office-object-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--office-object-grid-gap);
}

/* Sandbox library card owner: default live Web plant-card ratio (160 / 219),
   shared header / optically fitted art / single-line name / metadata rows. Card framing
   never changes source pixels, world dimensions, anchors or placement facts. */
.office-collection-page .office-object-runtime-item {
  --office-card-art-height: 72px;
  --office-card-action: var(--app-primary);
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--office-card-ratio, 160 / 219);
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--office-library-card-radius, 14px);
  background: var(--app-surface);
  box-shadow: var(--office-library-card-shadow, none);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.office-collection-page .office-object-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: var(--office-card-top-padding, 36px) 8px 8px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 16px 14px;
  align-content: start;
  justify-items: center;
  gap: 4px;
  border: 0;
  color: var(--app-text);
  background: transparent;
  font: inherit;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.office-collection-page .office-object-card-visual {
  position: relative;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 92px;
  height: 100%;
  min-height: 0;
  max-height: var(--office-card-art-height);
  container-type: size;
  overflow: hidden;
  pointer-events: none;
  transition: transform 160ms ease;
}

.office-collection-page .office-object-card-visual svg {
  display: block;
  width: 60px;
  height: 60px;
  max-width: 100%;
  max-height: 100%;
  padding: 4px;
  color: var(--office-sandbox-ink);
  fill: currentColor;
}

/* Row/detail art keeps its existing framing; only card media is optically fit. */
.office-collection-page .office-object-card-scene-asset {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.office-collection-page .office-object-card .office-object-card-scene-asset {
  /* Shared catalog/placed-card breathing room; source alpha fit and center stay intact. */
  --office-card-prop-scale: .7;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100cqw * var(--office-card-width-fit) * var(--office-card-prop-scale) * var(--office-card-optical-weight, 1)), calc(100cqh * var(--office-card-height-fit) * var(--office-card-prop-scale) * var(--office-card-optical-weight, 1)));
  height: auto;
  max-width: none;
  max-height: none;
  transform: translate(calc(-1 * var(--office-card-ink-center-x)), calc(-1 * var(--office-card-ink-center-y)));
}

/* Compact ordinary catalog cards; role/placed cards and scene geometry stay unchanged. */
.office-collection-page [data-office-object-catalog-section] {
  --office-card-ratio: 4 / 5;
  --office-card-top-padding: 16px;
}

.office-collection-page #officeObjectSection-office-equipment :is([data-office-object="oci_equipment_monitor"], [data-office-object="oci_equipment_all_in_one"]) {
  --office-card-optical-weight: 1.2;
}

.office-collection-page #officeObjectSection-office-equipment [data-office-object="oci_equipment_desktop_tower"] {
  --office-card-optical-weight: 1.1;
}

.office-collection-page #officeObjectSection-office-equipment :is([data-office-object="oci_equipment_calculator"], [data-office-object="oci_equipment_office_phone"], [data-office-object="oci_equipment_drawing_control_terminal"]) {
  --office-card-optical-weight: .86;
}

/* Derived from manifest alpha_bbox, verified by office_sandbox_card_system_v1.
   Fit the visible object, not its transparent export canvas or physical scale. */
.office-object-card-scene-asset[src*="/layout-props/v1/solid-wall-model-v1.png"] {
  --office-card-width-fit: 1.48514851;
  --office-card-height-fit: 0.88495575;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 55.02232143%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/window-model-v1.png"] {
  --office-card-width-fit: 1.51515152;
  --office-card-height-fit: 1.12359551;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 62.83482143%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/structural-column-model-v1.png"] {
  --office-card-width-fit: 2.30769231;
  --office-card-height-fit: 0.89552239;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 54.79910714%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/workstation-partition-model-v1.png"] {
  --office-card-width-fit: 1.64835165;
  --office-card-height-fit: 1.82926829;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 73.21428571%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/glass-partition-model-v1.png"] {
  --office-card-width-fit: 1.56250000;
  --office-card-height-fit: 0.95238095;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 57.03125000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/screen-model-v1.png"] {
  --office-card-width-fit: 1.51515152;
  --office-card-height-fit: 1.01010101;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 60.60267857%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/green-partition-model-v1.png"] {
  --office-card-width-fit: 1.29310345;
  --office-card-height-fit: 1.02040816;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 61.38392857%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/tall-cabinet-model-v1.png"] {
  --office-card-width-fit: 1.18110236;
  --office-card-height-fit: 0.74257426;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.77678571%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/open-rack-model-v1.png"] {
  --office-card-width-fit: 1.26050420;
  --office-card-height-fit: 0.83102493;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 54.12946429%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/fixed-low-cabinet-model-v1.png"] {
  --office-card-width-fit: 1.19047619;
  --office-card-height-fit: 1.32743363;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 69.41964286%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/door-model-v1.png"] {
  --office-card-width-fit: 1.59574468;
  --office-card-height-fit: 0.87463557;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 53.90625000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/monitor-model-v1.png"] {
  --office-card-width-fit: 1.75438596;
  --office-card-height-fit: 1.50753769;
  --office-card-ink-center-x: 50.16666667%;
  --office-card-ink-center-y: 50.11160714%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/laptop-model-v1.png"] {
  --office-card-width-fit: 1.20967742;
  --office-card-height-fit: 1.41509434;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/office-phone-model-v1.png"] {
  --office-card-width-fit: 1.54639175;
  --office-card-height-fit: 2.30769231;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/desktop-tower-model-v1.png"] {
  --office-card-width-fit: 2.05479452;
  --office-card-height-fit: 1.16731518;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.11160714%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/all-in-one-model-v1.png"] {
  --office-card-width-fit: 1.72413793;
  --office-card-height-fit: 1.40845070;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.88839286%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/keyboard-mouse-model-v1.png"] {
  --office-card-width-fit: 1.69491525;
  --office-card-height-fit: 4.54545455;
  --office-card-ink-center-x: 50.16666667%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/webcam-model-v1.png"] {
  --office-card-width-fit: 2.77777778;
  --office-card-height-fit: 3.12500000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/power-connectivity-model-v1.png"] {
  --office-card-width-fit: 1.78571429;
  --office-card-height-fit: 4.22535211;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.11160714%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/print-scan-model-v1.png"] {
  --office-card-width-fit: 1.31578947;
  --office-card-height-fit: 1.61290323;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/calculator-model-v1.png"] {
  --office-card-width-fit: 2.05479452;
  --office-card-height-fit: 3.19148936;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/drawing-terminal-model-v1.png"] {
  --office-card-width-fit: 1.38888889;
  --office-card-height-fit: 3.33333333;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}

.office-object-card-scene-asset[src*="/layout-props/v1/books-files-model-v1.png"] {
  --office-card-width-fit: 1.44927536;
  --office-card-height-fit: 2.54237288;
  --office-card-ink-center-x: 49.83333333%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/desktop-rack-model-v1.png"] {
  --office-card-width-fit: 1.30434783;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/pen-holder-model-v1.png"] {
  --office-card-width-fit: 3.94736842;
  --office-card-height-fit: 2.00000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/stationery-organizer-model-v1.png"] {
  --office-card-width-fit: 1.40186916;
  --office-card-height-fit: 2.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/archive-box-model-v1.png"] {
  --office-card-width-fit: 1.41509434;
  --office-card-height-fit: 1.85185185;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/underdesk-wood-model-v1.png"] {
  --office-card-width-fit: 1.48514851;
  --office-card-height-fit: 1.16279070;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/underdesk-metal-model-v1.png"] {
  --office-card-width-fit: 1.48514851;
  --office-card-height-fit: 1.16279070;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/floor-wood-model-v1.png"] {
  --office-card-width-fit: 1.36363636;
  --office-card-height-fit: 0.90090090;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.88839286%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/floor-metal-model-v1.png"] {
  --office-card-width-fit: 1.36363636;
  --office-card-height-fit: 0.90090090;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.88839286%;
}

.office-object-card-scene-asset[src*="/layout-props/v1/desktop-rack-paper-model-v1.png"] {
  --office-card-width-fit: 1.30434783;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/desktop-rack-plastic-model-v1.png"] {
  --office-card-width-fit: 1.30434783;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/desktop-rack-wood-model-v1.png"] {
  --office-card-width-fit: 1.30434783;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/desktop-rack-metal-model-v1.png"] {
  --office-card-width-fit: 1.30434783;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/archive-box-plastic-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.87500000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/archive-box-wood-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.85185185;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/archive-box-metal-model-v1.png"] {
  --office-card-width-fit: 1.41509434;
  --office-card-height-fit: 1.85185185;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/pen-holder-plastic-model-v1.png"] {
  --office-card-width-fit: 3.94736842;
  --office-card-height-fit: 2.00000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/pen-holder-wood-model-v1.png"] {
  --office-card-width-fit: 3.94736842;
  --office-card-height-fit: 2.00000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/pen-holder-metal-model-v1.png"] {
  --office-card-width-fit: 3.84615385;
  --office-card-height-fit: 2.00000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/pen-holder-ceramic-model-v1.png"] {
  --office-card-width-fit: 3.94736842;
  --office-card-height-fit: 2.00000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/stationery-organizer-plastic-model-v1.png"] {
  --office-card-width-fit: 1.45631068;
  --office-card-height-fit: 2.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/stationery-organizer-wood-model-v1.png"] {
  --office-card-width-fit: 1.45631068;
  --office-card-height-fit: 2.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/stationery-organizer-metal-model-v1.png"] {
  --office-card-width-fit: 1.45631068;
  --office-card-height-fit: 2.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/underdesk-cabinet-model-v1.png"] {
  --office-card-width-fit: 1.48514851;
  --office-card-height-fit: 1.16279070;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/underdesk-cabinet-plastic-model-v1.png"] {
  --office-card-width-fit: 1.48514851;
  --office-card-height-fit: 1.16279070;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/floor-cabinet-model-v1.png"] {
  --office-card-width-fit: 1.36363636;
  --office-card-height-fit: 0.90090090;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.88839286%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/floor-cabinet-plastic-model-v1.png"] {
  --office-card-width-fit: 1.36363636;
  --office-card-height-fit: 0.90090090;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.88839286%;
}

.office-object-card-scene-asset[src*="/layout-props/v1/daily-water-cup-model-v1.png"] {
  --office-card-width-fit: 3.26086957;
  --office-card-height-fit: 2.63157895;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-water-cup-ceramic-model-v1.png"] {
  --office-card-width-fit: 3.26086957;
  --office-card-height-fit: 2.63157895;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-water-cup-plastic-model-v1.png"] {
  --office-card-width-fit: 3.26086957;
  --office-card-height-fit: 2.63157895;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-water-cup-metal-model-v1.png"] {
  --office-card-width-fit: 3.26086957;
  --office-card-height-fit: 2.63157895;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-thermos-model-v1.png"] {
  --office-card-width-fit: 4.68750000;
  --office-card-height-fit: 1.60427807;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 49.88839286%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-tissue-box-model-v1.png"] {
  --office-card-width-fit: 1.78571429;
  --office-card-height-fit: 2.41935484;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-tissue-box-plastic-model-v1.png"] {
  --office-card-width-fit: 1.78571429;
  --office-card-height-fit: 2.41935484;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-tissue-box-wood-model-v1.png"] {
  --office-card-width-fit: 1.78571429;
  --office-card-height-fit: 2.41935484;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-tissue-box-metal-model-v1.png"] {
  --office-card-width-fit: 1.78571429;
  --office-card-height-fit: 2.41935484;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-tissue-box-paper-model-v1.png"] {
  --office-card-width-fit: 1.78571429;
  --office-card-height-fit: 2.41935484;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-waste-bin-model-v1.png"] {
  --office-card-width-fit: 2.88461538;
  --office-card-height-fit: 2.08333333;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-waste-bin-plastic-model-v1.png"] {
  --office-card-width-fit: 2.88461538;
  --office-card-height-fit: 2.08333333;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-waste-bin-metal-model-v1.png"] {
  --office-card-width-fit: 2.88461538;
  --office-card-height-fit: 2.08333333;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-waste-bin-wood-model-v1.png"] {
  --office-card-width-fit: 2.88461538;
  --office-card-height-fit: 2.08333333;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-electric-kettle-model-v1.png"] {
  --office-card-width-fit: 2.41935484;
  --office-card-height-fit: 2.02702703;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-electric-kettle-metal-model-v1.png"] {
  --office-card-width-fit: 2.41935484;
  --office-card-height-fit: 2.02702703;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-electric-kettle-glass-model-v1.png"] {
  --office-card-width-fit: 2.41935484;
  --office-card-height-fit: 2.02702703;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-electric-kettle-plastic-model-v1.png"] {
  --office-card-width-fit: 2.41935484;
  --office-card-height-fit: 2.02702703;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-desk-lamp-model-v1.png"] {
  --office-card-width-fit: 1.85185185;
  --office-card-height-fit: 1.53061224;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-desk-lamp-metal-model-v1.png"] {
  --office-card-width-fit: 1.85185185;
  --office-card-height-fit: 1.53061224;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-desk-lamp-plastic-model-v1.png"] {
  --office-card-width-fit: 1.85185185;
  --office-card-height-fit: 1.53061224;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-desk-fan-model-v1.png"] {
  --office-card-width-fit: 2.67857143;
  --office-card-height-fit: 1.66666667;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-desk-fan-plastic-model-v1.png"] {
  --office-card-width-fit: 2.67857143;
  --office-card-height-fit: 1.66666667;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-desk-fan-metal-model-v1.png"] {
  --office-card-width-fit: 2.67857143;
  --office-card-height-fit: 1.66666667;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-headphones-model-v1.png"] {
  --office-card-width-fit: 2.15827338;
  --office-card-height-fit: 1.72413793;
  --office-card-ink-center-x: 49.83333333%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/daily-earbuds-model-v1.png"] {
  --office-card-width-fit: 2.88461538;
  --office-card-height-fit: 2.54237288;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}

.office-object-card-scene-asset[src*="/layout-props/v1/decor-plush-bear-model-v1.png"] {
  --office-card-width-fit: 1.64835165;
  --office-card-height-fit: 1.20967742;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-plush-bear-synthetic-model-v1.png"] {
  --office-card-width-fit: 1.64835165;
  --office-card-height-fit: 1.20967742;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-plush-bear-cotton-model-v1.png"] {
  --office-card-width-fit: 1.64835165;
  --office-card-height-fit: 1.20967742;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-space-figure-model-v1.png"] {
  --office-card-width-fit: 2.43902439;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 49.83333333%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-space-figure-plastic-model-v1.png"] {
  --office-card-width-fit: 2.43902439;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 49.83333333%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-space-figure-metal-model-v1.png"] {
  --office-card-width-fit: 2.43902439;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 49.83333333%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-space-figure-ceramic-model-v1.png"] {
  --office-card-width-fit: 2.43902439;
  --office-card-height-fit: 1.35135135;
  --office-card-ink-center-x: 49.83333333%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-brick-house-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.19047619;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-brick-house-plastic-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.19047619;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-brick-house-wood-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.19047619;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-brick-house-metal-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.19047619;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-brick-house-mixed-model-v1.png"] {
  --office-card-width-fit: 1.42857143;
  --office-card-height-fit: 1.19047619;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-photo-frame-model-v1.png"] {
  --office-card-width-fit: 2.27272727;
  --office-card-height-fit: 1.36363636;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-photo-frame-wood-model-v1.png"] {
  --office-card-width-fit: 2.27272727;
  --office-card-height-fit: 1.36363636;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-photo-frame-plastic-model-v1.png"] {
  --office-card-width-fit: 2.27272727;
  --office-card-height-fit: 1.36363636;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-photo-frame-metal-model-v1.png"] {
  --office-card-width-fit: 2.27272727;
  --office-card-height-fit: 1.36363636;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-photo-frame-glass-model-v1.png"] {
  --office-card-width-fit: 2.27272727;
  --office-card-height-fit: 1.36363636;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-wall-art-model-v1.png"] {
  --office-card-width-fit: 2.34375000;
  --office-card-height-fit: 1.37614679;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-wall-art-paper-model-v1.png"] {
  --office-card-width-fit: 2.34375000;
  --office-card-height-fit: 1.37614679;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-wall-art-synthetic-model-v1.png"] {
  --office-card-width-fit: 2.34375000;
  --office-card-height-fit: 1.37614679;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-trophy-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.23966942;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-trophy-metal-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.23966942;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-trophy-plastic-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.23966942;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-trophy-glass-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.23966942;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-loop-sculpture-model-v1.png"] {
  --office-card-width-fit: 1.89873418;
  --office-card-height-fit: 1.42857143;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-loop-sculpture-ceramic-model-v1.png"] {
  --office-card-width-fit: 1.89873418;
  --office-card-height-fit: 1.42857143;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-loop-sculpture-wood-model-v1.png"] {
  --office-card-width-fit: 1.89873418;
  --office-card-height-fit: 1.42857143;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-loop-sculpture-metal-model-v1.png"] {
  --office-card-width-fit: 1.89873418;
  --office-card-height-fit: 1.42857143;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-loop-sculpture-plastic-model-v1.png"] {
  --office-card-width-fit: 1.89873418;
  --office-card-height-fit: 1.42857143;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-vase-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.33928571;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-vase-ceramic-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.33928571;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-vase-plastic-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.33928571;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-vase-metal-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.33928571;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-vase-wood-model-v1.png"] {
  --office-card-width-fit: 1.70454545;
  --office-card-height-fit: 1.33928571;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-artificial-flowers-model-v1.png"] {
  --office-card-width-fit: 2.58620690;
  --office-card-height-fit: 1.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-artificial-flowers-plastic-model-v1.png"] {
  --office-card-width-fit: 2.58620690;
  --office-card-height-fit: 1.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-artificial-flowers-ceramic-model-v1.png"] {
  --office-card-width-fit: 2.58620690;
  --office-card-height-fit: 1.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}
.office-object-card-scene-asset[src*="/layout-props/v1/decor-artificial-flowers-metal-model-v1.png"] {
  --office-card-width-fit: 2.58620690;
  --office-card-height-fit: 1.50000000;
  --office-card-ink-center-x: 50.00000000%;
  --office-card-ink-center-y: 50.00000000%;
}

.office-collection-page .office-object-card .office-role-card-piece {
  width: 100%;
  height: 100%;
  background-size: auto calc(100% * var(--office-role-card-height-fit));
}

.office-collection-page .office-object-card-label {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 16px;
  margin: 0;
  overflow: hidden;
  color: var(--office-library-text, var(--app-text));
  font: 600 12px/16px var(--office-interface-font);
  font-size: clamp(10px, 11cqw, 12px);
  text-align: center;
  white-space: nowrap;
}

.office-collection-page .office-object-five-phases,
.office-collection-page .office-object-card small {
  grid-row: 3;
  height: 14px;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
  color: var(--app-text-secondary);
  font: 500 10px/14px var(--office-interface-font);
  white-space: nowrap;
}

.office-collection-page .office-object-five-phases img {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  object-fit: contain;
  opacity: .8;
}

.office-collection-page .office-object-add-button {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.office-collection-page .office-object-add-button > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--office-card-action);
  box-shadow: none;
  font: 0/0 var(--office-interface-font);
  transition: background-color 160ms ease, transform 160ms ease;
}

.office-collection-page .office-object-add-button > span::before,
.office-collection-page .office-object-add-button > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.office-collection-page .office-object-add-button > span::before { width: 12px; height: 3px; }
.office-collection-page .office-object-add-button > span::after { width: 3px; height: 12px; }

.office-collection-page .office-role-card .office-object-add-button { pointer-events: none; }
.office-collection-page .office-role-card .office-object-add-button > .office-role-card-quantity {
  width: 36px;
  height: 26px;
  border-radius: 999px;
  font: 700 12px/1 var(--office-interface-font);
  font-variant-numeric: tabular-nums;
}
.office-collection-page .office-role-card .office-object-add-button > .office-role-card-quantity::before,
.office-collection-page .office-role-card .office-object-add-button > .office-role-card-quantity::after { content: none; }

/* Shared availability, pointer and keyboard feedback. Hover does not masquerade
   as selection; focus stays visible independently of hover and filled state. */
.office-collection-page :where(.office-object-panel) .office-object-runtime-item:has(> .office-object-card:active:not(:disabled)) {
  border-color: var(--office-control-pressed-edge);
  background: var(--office-control-pressed-face);
}
.office-collection-page :where(.office-object-panel) .office-object-runtime-item:has(> .office-object-card[aria-pressed="true"]:not(:disabled)) {
  border-color: var(--office-control-pressed-edge);
  background: var(--office-control-pressed-face);
  box-shadow: inset 0 0 0 1px var(--office-control-pressed-edge), var(--office-library-card-shadow, 0 0 0 transparent);
}
.office-collection-page :where(.office-object-panel) .office-object-runtime-item:has(:focus-visible) .office-object-card-label { text-decoration: underline; text-underline-offset: 4px; }
.office-collection-page .office-object-card:focus-visible,
.office-collection-page .office-object-add-button:focus-visible { outline: none; }
.office-collection-page .office-object-add-button:focus-visible > span { font-weight: 900; }
.office-collection-page :where(.office-object-panel) .office-object-card:not(:disabled):active { cursor: grabbing; }
/* Native scrolling remains available until the touch hold takes ownership. */
.office-collection-page .has-placement-selection .office-sandbox-selected-strip,
.office-collection-page .office-object-card[data-office-object]:not(:disabled) {
  touch-action: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.office-collection-page .office-object-card.is-touch-picked-up .office-object-card-visual { transform: translateY(-4px) scale(1.04); }
.office-collection-page .office-object-add-button:not(:disabled):active > span { background: var(--app-primary-dark); }
.office-collection-page .office-sandbox-page:has(.is-entity-dragging) .office-object-card,
.office-collection-page .office-sandbox-page.is-catalog-dragging .office-object-card { cursor: grabbing; }
.office-collection-page :where(.office-object-panel) .office-object-runtime-item:has(> .office-object-card:disabled:not([data-office-save-pending])) {
  --office-card-action: #8b9998;
  background: #e6eae8; border-color: #c1c9c5;
}
.office-collection-page .office-object-card:disabled { cursor: not-allowed; }
.office-collection-page .office-object-card[data-office-save-pending] { cursor: progress; }
.office-collection-page :where(.office-object-panel) .office-object-card:disabled:not([data-office-save-pending]) :is(.office-object-card-visual, .office-object-five-phases) { filter: grayscale(1); opacity: .6; }
.office-collection-page .office-object-card:disabled:not([data-office-save-pending]) .office-object-card-label { color: var(--app-text-secondary); }
.office-collection-page .office-object-add-button:disabled { cursor: not-allowed; }
.office-collection-page .office-object-runtime-item:has(> .is-catalog-preview) { border-style: dashed; }
.office-collection-page .office-object-card.is-catalog-preview svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .office-collection-page .office-object-runtime-item,
  .office-collection-page .office-object-card-visual,
  .office-collection-page .office-object-add-button > span { transition: none; }
}

.office-collection-page .office-object-empty {
  margin: 78px auto 0;
  color: #8b8b84;
  font-size: 12px;
  text-align: center;
}

.office-collection-page .office-sandbox-next {
  width: 184px;
  min-height: 52px;
  margin: var(--office-step-action-offset, 8px) 0 0 auto;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.office-collection-page .office-sandbox-editor-toolbar {
  width: var(--office-board-frame-size);
  min-height: 52px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.office-collection-page .office-sandbox-editor-tool {
  width: 58px;
  min-height: 50px;
  padding: 5px 7px 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.office-collection-page .office-sandbox-editor-tool .collection-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}





/* Material chooser geometry. Artwork is shared with the library; surfaces and
   interaction states belong to the shared Office flow controls below. */
.office-material-dialog {
  --office-material-columns: 4;
  --office-material-inset: 24px;
  width: calc(
    var(--office-material-columns) * 136px
    + (var(--office-material-columns) - 1) * 12px
    + 2 * var(--office-material-inset) + 8px
  );
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  box-sizing: border-box;
  margin: auto;
  padding: var(--office-material-inset);
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 20px;
  color: var(--office-settings-text);
  background: var(--office-settings-surface);
  box-shadow: 0 24px 70px rgb(18 34 32 / 24%);
}
.office-material-dialog::backdrop { background: rgb(17 30 29 / 46%); }
.office-material-dialog:has(.office-material-grid > :nth-child(5)) { --office-material-columns: 5; }
.office-material-dialog[open] { display: flex; flex-direction: column; gap: 20px; }
.office-material-dialog h2 { flex: none; margin: 0; overflow-wrap: anywhere; font: 700 18px/1.5 var(--office-interface-font); }
.office-material-grid {
  display: grid;
  grid-template-columns: repeat(var(--office-material-columns), minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}
.office-collection-page .office-material-grid .office-object-runtime-item {
  --office-card-art-height: 100px;
  aspect-ratio: 1 / 1.18;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.office-collection-page .office-material-grid .office-object-card {
  padding: 20px 8px 10px;
  grid-template-rows: minmax(0, 1fr) 22px 14px;
  gap: 4px;
}
.office-collection-page .office-material-grid .office-object-card-label {
  display: none;
}
.office-collection-page .office-material-grid .office-material-label {
  grid-row: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font: 600 14px/22px var(--office-interface-font);
  text-align: center;
  overflow-wrap: anywhere;
}
.office-material-grid .office-object-runtime-item.is-selected::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 28px;
  background: var(--office-choice-seal) center / contain no-repeat;
  transform: rotate(-30deg);
  pointer-events: none;
}
.office-material-dialog footer {
  flex: none;
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 280px);
  gap: 12px;
  padding-bottom: 4px;
}
@media (width < 1024px) {
  .office-material-dialog,
  .office-material-dialog:has(.office-material-grid > :nth-child(5)) {
    --office-material-inset: 16px;
    --office-material-columns: 2;
    width: min(440px, calc(100% - 32px));
  }
  .office-collection-page .office-material-grid .office-object-runtime-item {
    aspect-ratio: 1 / 1.05;
  }
  .office-collection-page .office-material-grid .office-object-card {
    grid-template-rows: minmax(0, 1fr) 22px;
  }
  .office-collection-page .office-material-grid .office-object-five-phases,
  .office-collection-page .office-material-grid .office-object-card > small {
    display: none;
  }
  .office-material-dialog footer { width: 100%; }
}

/* Ring-placement guide: one dialog owner, independent of scoring/settings. */
.office-ring-guide-trigger {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--office-island-secondary);
  font: 600 16px/1 var(--office-interface-font);
  cursor: pointer;
}
.office-ring-guide-trigger::before { content: ''; position: absolute; inset: 10px; border: 1px solid #91afb3; border-radius: 50%; }
.office-ring-guide-trigger:hover { color: var(--app-primary); background: var(--app-surface); }
.office-ring-guide-trigger:disabled { opacity: .5; cursor: default; }
.office-ring-guide-dialog {
  inset: 0;
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #dce7e4;
  border-radius: 20px;
  background: var(--office-island-background);
  color: var(--office-island-text);
  box-shadow: 0 24px 70px rgb(18 34 32 / 24%);
  font-family: var(--office-interface-font);
  overflow: hidden;
}
.office-ring-guide-dialog[open] { display: flex; flex-direction: column; }
.office-ring-guide-dialog::backdrop { background: rgb(17 30 29 / 46%); backdrop-filter: blur(2px); }
.office-ring-guide-header, .office-ring-guide-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 12px;
}
.office-ring-guide-header { position: relative; padding: 28px 64px 12px; }
.office-ring-guide-header h2 { margin: 0; text-align: center; font: 700 18px/1.5 var(--office-interface-font); }
.office-ring-guide-header button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font: 400 22px/1 var(--office-interface-font);
}
.office-ring-guide-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0 24px;
  min-height: 0;
  background: var(--app-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.office-ring-guide-panel { min-width: 0; text-align: center; }
.office-ring-guide-panel h3 { margin: 8px 0 4px; color: inherit; font: 600 14px/1.5 var(--office-interface-font); }
.office-ring-guide-panel p { margin: 0; color: var(--office-island-secondary); font: 400 14px/1.7 var(--office-interface-font); }
.office-ring-guide-art { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1; overflow: hidden; }
.office-ring-guide-art img { position: absolute; inset: 0 auto auto 0; display: block; width: 200%; max-width: none; height: 100%; }
.office-ring-guide-art--outer img { transform: translateX(-50%); }
.office-ring-guide-art span { position: absolute; color: var(--office-island-secondary); font: 400 12px/1.4 var(--office-interface-font); }
.office-ring-guide-aisle { left: 62%; top: 36%; }
.office-ring-guide-footer { flex-direction: column; padding: 24px; gap: 16px; text-align: center; }
.office-ring-guide-footer p { margin: 0; font: 400 12px/1.5 var(--office-interface-font); color: var(--office-island-secondary); }
.office-ring-guide-content:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -3px; }
.office-ring-guide-trigger:focus-visible { outline: none; font-weight: 700; }
@media (width < 1024px) {
  .office-ring-guide-trigger { flex-basis: 44px; width: 44px; height: 44px; }
  .office-ring-guide-header { padding: 24px 48px 12px; }
  .office-ring-guide-footer { padding: 20px 16px; }
  .office-ring-guide-content { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 24px; }
  .office-ring-guide-art { max-width: 240px; }
}

.office-sandbox-clear-dialog {
  width: min(430px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--office-island-text);
  background: transparent;
  box-shadow: 0 24px 70px rgb(18 34 32 / 24%);
}

.office-sandbox-clear-dialog::backdrop {
  background: rgb(17 30 29 / 46%);
  backdrop-filter: blur(2px);
}

.office-sandbox-clear-dialog-card {
  padding: 24px;
  border: 1px solid #dce7e4;
  border-radius: inherit;
  background: var(--office-island-background);
}

.office-sandbox-clear-dialog-card > header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.office-sandbox-clear-dialog-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #8c2f28;
  background: #fff1ee;
}

.office-sandbox-clear-dialog-icon .collection-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.office-sandbox-clear-dialog-card h2 {
  margin: 0;
  font: 700 18px/1.4 var(--office-interface-font);
}

.office-sandbox-clear-dialog-card header p {
  margin: 7px 0 0;
  color: var(--office-island-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.office-sandbox-clear-dialog-error {
  min-height: 20px;
  margin: 12px 0 0 56px;
  color: #8c2f28;
  font-size: 12px;
  line-height: 1.5;
}

.office-sandbox-clear-dialog-card > footer {
  margin-top: 18px;
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}


.office-collection-page .office-bearing-side .office-orientation-hint,
.office-collection-page .office-step-action-rail .office-orientation-hint,
.office-collection-page .office-sandbox-workspace > .office-object-column > .office-orientation-hint {
  margin: 0;
  color: #666660;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.office-collection-page .office-inline-report-region {
  width: 100%;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  background: transparent;
  scroll-margin-top: 24px;
}

.office-collection-page .office-inline-report-tools {
  display: flex;
  justify-content: flex-end;
}

.office-collection-page .office-inline-report-tools [data-office-report-regenerate] {
  color: var(--app-text-secondary);
  font-size: 13px;
  text-underline-offset: 3px;
}

.office-collection-page .office-inline-report-tools [data-office-report-regenerate][hidden] {
  display: none;
}

.office-collection-page .office-inline-report-stale,
.office-collection-page .office-inline-report-loading {
  width: 100%;
  margin: 28px auto 0;
  box-sizing: border-box;
}

.office-collection-page .office-inline-report-stale {
  display: block;
  padding: 0;
  color: var(--app-text-secondary);
  background: transparent;
}

.office-collection-page .office-inline-report-stale[hidden],
.office-collection-page .office-inline-report-loading[hidden] {
  display: none;
}

.office-collection-page .office-inline-report-stale span {
  color: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.office-collection-page .office-inline-report-loading {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 18px 20px;
  border: 1px solid #dce8e1;
  color: #17231f;
  background: #f3f8f5;
}

.office-collection-page .office-inline-report-loading-mark {
  width: 14px;
  height: 14px;
  border: 2px solid #a8c8b8;
  border-top-color: #0b7549;
  border-radius: 50%;
  animation: office-inline-report-loading .8s linear infinite;
}

.office-collection-page .office-inline-report-loading strong {
  font-size: 14px;
}

.office-collection-page .office-inline-report-loading > span:last-child {
  color: #56675f;
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

@keyframes office-inline-report-loading {
  to { transform: rotate(360deg); }
}

.office-collection-page .office-sandbox-report-status {
  width: 184px;
  margin: 8px 0 0 auto;
  color: #4f5f57;
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}


@media (max-width: 1180px) and (min-width: 1024px) {
  .office-collection-page .office-orientation-page,
  .office-collection-page .office-desk-type-page,
  .office-collection-page .office-sandbox-page {
    --office-sandbox-rail-width: min(1050px, calc(100% - 40px));
    --office-board-frame-size: 620px;
    --office-object-column-size: 310px;
    --office-workspace-gap: 44px;
  }

  .office-collection-page .office-sandbox-content {
    --office-step-canvas-size: 620px;
    --office-step-side-width: 310px;
  }

  .office-collection-page .office-sandbox-content > h1 {
    width: 620px;
    margin-left: 0;
  }

  .office-collection-page .office-sandbox-workspace {
    --office-side-panel-size: 620px;
  }

  .office-collection-page .office-desk-type-workspace {
    --office-object-column-size: var(--office-step-side-width);
    --office-side-panel-size: var(--office-step-canvas-size);
  }

  .office-collection-page .office-sandbox-board-frame {
    width: 620px;
    height: 620px;
  }

  .office-collection-page .office-object-panel {
    width: 310px;
  }

  .office-collection-page .office-object-column {
    width: 310px;
  }

}

/* Keep the full workstation board usable in common short desktop viewports. */
@media (min-width: 1024px) and (max-height: 820px) {
  .office-collection-page .office-orientation-page,
  .office-collection-page .office-desk-type-page,
  .office-collection-page .office-sandbox-page {
    --office-sandbox-rail-width: min(900px, calc(100% - 40px));
    --office-board-frame-size: 560px;
    --office-object-column-size: 300px;
    --office-workspace-gap: 40px;
  }

  .office-collection-page .office-sandbox-content {
    --office-step-canvas-size: 560px;
    --office-step-side-width: 300px;
  }

  .office-collection-page .office-sandbox-content > h1 {
    width: 560px;
    margin-left: 0;
  }

  .office-collection-page .office-sandbox-workspace {
    --office-side-panel-size: 560px;
  }

  .office-collection-page .office-desk-type-workspace {
    --office-object-column-size: var(--office-step-side-width);
    --office-side-panel-size: var(--office-step-canvas-size);
  }

  .office-collection-page .office-sandbox-board-frame {
    width: 560px;
    height: 560px;
  }

  .office-collection-page .office-object-column,
  .office-collection-page .office-object-panel,
  .office-collection-page .office-orientation-controls {
    width: 300px;
  }

  .office-collection-page .office-object-panel,
  .office-collection-page .office-orientation-control {
    min-height: var(--office-side-panel-size);
  }

}

@media (min-width: 1024px) and (max-height: 740px) {
  .office-collection-page .office-orientation-page,
  .office-collection-page .office-desk-type-page,
  .office-collection-page .office-sandbox-page {
    --office-sandbox-rail-width: min(840px, calc(100% - 40px));
    --office-board-frame-size: 510px;
    --office-object-column-size: 290px;
    --office-workspace-gap: 40px;
  }

  .office-collection-page .office-sandbox-content {
    --office-step-canvas-size: 510px;
    --office-step-side-width: 290px;
  }

  .office-collection-page .office-sandbox-content > h1 {
    width: 510px;
  }

  .office-collection-page .office-sandbox-workspace {
    --office-side-panel-size: 510px;
  }

  .office-collection-page .office-desk-type-workspace {
    --office-object-column-size: var(--office-step-side-width);
    --office-side-panel-size: var(--office-step-canvas-size);
  }

  .office-collection-page .office-sandbox-board-frame {
    width: 510px;
    height: 510px;
  }

  .office-collection-page .office-object-column,
  .office-collection-page .office-object-panel,
  .office-collection-page .office-orientation-controls {
    width: 290px;
  }

  .office-collection-page .office-object-panel,
  .office-collection-page .office-orientation-control {
    min-height: var(--office-side-panel-size);
  }

}

@media (width < 1024px) {
  .office-collection-page .office-orientation-page,
  .office-collection-page .office-desk-type-page,
  .office-collection-page .office-sandbox-page {
    --office-sandbox-rail-width: calc(100% - 24px);
    --office-board-frame-size: 343px;
    --office-object-column-size: 100%;
    --office-workspace-gap: 20px;
  }

  .office-collection-page .office-sandbox-masthead {
    height: 52px;
  }

  .office-collection-page .office-sandbox-masthead-inner {
    width: var(--office-sandbox-rail-width);
    padding: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    align-content: center;
  }

  .office-collection-page .office-sandbox-masthead-inner > .office-sandbox-back {
    grid-column: 1;
    grid-row: 1;
  }

  .office-collection-page .office-sandbox-masthead-inner > span {
    position: static;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    font-size: 8px;
  }

  .office-collection-page .office-sandbox-masthead-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .office-collection-page .office-profile-entry {
    margin-left: auto;
    max-width: 100%;
  }

  .office-collection-page .office-sandbox-back {
    font-size: 11px;
    gap: 4px;
  }

  .office-collection-page .office-sandbox-back-mark {
    font-size: 13px;
  }

  .office-collection-page .office-sandbox-content {
    padding-top: 18px;
    --office-step-side-width: 100%;
  }

  .office-collection-page .office-sandbox-content > h1 {
    width: 100%;
    margin-left: 0;
    margin-bottom: 16px;
    font-size: 24px;
    text-align: left;
  }

  .office-collection-page .office-sandbox-workspace {
    grid-template-columns: 1fr;
    --office-side-panel-size: 343px;
  }

  .office-collection-page .office-bearing-side .office-sandbox-next,
  .office-collection-page .office-step-action-rail .office-sandbox-next,
  .office-collection-page .office-sandbox-workspace > .office-object-column > .office-sandbox-next {
    width: 100%;
  }

  .office-collection-page .office-bearing-side .office-orientation-hint,
  .office-collection-page .office-step-action-rail .office-orientation-hint,
  .office-collection-page .office-sandbox-workspace > .office-object-column > .office-orientation-hint {
    text-align: center;
  }

  .office-collection-page .office-orientation-control,
  .office-collection-page .office-object-panel {
    margin-top: 0;
  }

  .office-collection-page .office-sandbox-board-frame {
    width: min(343px, calc(100vw - 24px));
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }

  .office-collection-page .office-sandbox-inline-feedback {
    top: calc(min(343px, calc(100vw - 24px)) + 7px);
    left: 50%;
    width: min(343px, calc(100vw - 24px));
    max-width: 100%;
    margin: 0;
    transform: translateX(-50%);
  }

  .office-collection-page .office-object-panel {
    width: 100%;
  }

  .office-collection-page .office-object-column {
    width: 100%;
  }

  .office-collection-page .office-sandbox-next {
    width: 100%;
  }

}

/* Desk type page final owner: a calm selection deck that bridges into toy-island-v2. */
.office-collection-page .office-sandbox-page .office-sandbox-content > h1 {
  width: 100%;
  max-width: none;
  margin: 0 0 18px;
  text-align: center;
}

.office-collection-page .office-desk-type-page {
  --office-desk-navy: #082957;
  --office-desk-cream: #fff5df;
  --office-desk-card: #fffdf9;
  --office-desk-sand-border: #dfd1ba;
  --office-desk-muted: #5b7281;
  color: var(--office-desk-navy);
  background: #58c6eb;
}

.office-collection-page .office-desk-type-page .office-sandbox-masthead {
  width: 100%;
  height: 58px;
  padding: 0 clamp(18px, 3vw, 46px);
  border-bottom: 2px solid rgb(8 41 87 / 18%);
  color: var(--office-desk-navy);
  background: rgb(255 250 240 / 96%);
  box-shadow: 0 2px 0 rgb(255 255 255 / 35%);
  letter-spacing: .12em;
}

.office-collection-page .office-desk-type-page .office-sandbox-back {
  color: var(--office-desk-navy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.office-collection-page .office-desk-type-page .office-sandbox-back:hover {
  transform: translateX(-2px);
}

.office-collection-page .office-desk-type-page .office-sandbox-back:focus-visible {
  outline-color: var(--office-desk-navy);
}

.office-collection-page .office-desk-type-page .office-sandbox-content {
  width: 100%;
  min-height: calc(100dvh - 58px);
  margin: 0;
  padding: clamp(24px, 4vh, 38px) clamp(18px, 3vw, 46px) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgb(255 255 255 / 23%), transparent 26%),
    #21c8dc url("/assets/img/office/sandbox/toy-island-v1/water-v1.png") center / cover fixed no-repeat;
}

.office-collection-page .office-desk-type-page .office-sandbox-content > h1 {
  width: min(1180px, 100%);
  max-width: none;
  margin: 0 0 14px;
  padding: 18px 24px 17px;
  border: 3px solid var(--office-desk-navy);
  border-radius: 20px;
  color: var(--office-desk-navy);
  background: rgb(255 245 223 / 97%);
  box-shadow: 0 6px 0 rgb(8 78 122 / 20%), 0 16px 26px rgb(7 82 126 / 12%);
  font-family: var(--office-interface-font);
  font-size: clamp(25px, 2.15vw, 31px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-align: left;
  text-wrap: balance;
}

.office-collection-page .office-desk-type-workspace {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
  padding: 22px;
  border: 4px solid var(--office-desk-navy);
  border-radius: 26px;
  background: var(--office-desk-cream);
  box-shadow: 0 10px 0 rgb(8 78 122 / 26%), 0 24px 34px rgb(7 82 126 / 18%);
}

.office-collection-page .office-desk-type-panel {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  display: block;
  border: 0;
  background: transparent;
  overflow: visible;
}

.office-collection-page .office-desk-type-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.office-collection-page .office-desk-type-card {
  position: relative;
  min-width: 0;
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 22px 12px 18px;
  text-align: center;
  cursor: pointer;
}

.office-collection-page .office-desk-type-page:not(.is-settings-modal) .office-desk-type-card.is-selected::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--office-choice-edge);
  box-shadow: 0 3px 0 rgb(8 41 87 / 14%);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.office-collection-page .office-desk-type-visual {
  width: min(168px, 100%);
  aspect-ratio: 1;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  color: var(--office-desk-navy);
  background: #e6f4ef;
  box-shadow: inset 0 -4px 0 rgb(8 41 87 / 7%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.office-collection-page .office-desk-type-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.office-collection-page .office-desk-type-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.office-collection-page .office-desk-type-copy strong {
  color: var(--office-desk-navy);
  font-family: var(--office-interface-font);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.office-collection-page .office-desk-type-copy small {
  color: var(--office-desk-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.office-collection-page .office-step-action-rail {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  align-items: center;
  gap: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.office-collection-page .office-desk-type-page .office-step-action-rail .office-sandbox-next {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 50px;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

.office-collection-page .office-desk-type-page .office-step-action-rail .office-orientation-hint {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--office-desk-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}


@media (width < 1024px) {
  .office-collection-page .office-desk-type-page .office-sandbox-masthead {
    height: 50px;
    padding: 0 12px;
  }

  .office-collection-page .office-desk-type-page .office-sandbox-masthead > span {
    font-size: 8px;
    letter-spacing: .13em;
  }

  .office-collection-page .office-desk-type-page .office-sandbox-back {
    font-size: 11px;
  }

  .office-collection-page .office-desk-type-page .office-sandbox-content {
    min-height: calc(100dvh - 50px);
    padding: 14px 10px 28px;
    background-attachment: scroll;
  }

  .office-collection-page .office-desk-type-page .office-sandbox-content > h1 {
    margin-bottom: 10px;
    padding: 13px 16px 14px;
    border-width: 3px;
    border-radius: 18px;
    box-shadow: 0 5px 0 rgb(8 78 122 / 20%);
    font-size: 22px;
    line-height: 1.25;
  }

  .office-collection-page .office-desk-type-workspace {
    gap: 13px;
    padding: 12px;
    border-width: 3px;
    border-radius: 22px;
    box-shadow: 0 8px 0 rgb(8 78 122 / 24%), 0 18px 28px rgb(7 82 126 / 15%);
  }

  .office-collection-page .office-desk-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .office-collection-page .office-desk-type-card {
    min-height: 168px;
    gap: 8px;
    padding: 10px 7px 11px;
    border-radius: 14px;
    box-shadow: 0 4px 0 rgb(8 41 87 / 11%);
  }

  .office-collection-page .office-desk-type-card:nth-child(7) {
    grid-column: 1 / -1;
    width: calc((100% - 10px) / 2);
    justify-self: center;
  }

  .office-collection-page .office-desk-type-page:not(.is-settings-modal) .office-desk-type-card.is-selected::after {
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    font-size: 13px;
  }

  .office-collection-page .office-desk-type-visual {
    width: min(126px, 100%);
    border-radius: 13px;
  }

  .office-collection-page .office-desk-type-copy {
    gap: 3px;
  }

  .office-collection-page .office-desk-type-copy strong {
    font-size: 15px;
  }

  .office-collection-page .office-desk-type-copy small {
    font-size: 9px;
    line-height: 1.25;
  }

  .office-collection-page .office-step-action-rail {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .office-collection-page .office-desk-type-page .office-step-action-rail .office-orientation-hint {
    grid-column: 1;
    grid-row: 1;
    font-size: 10px;
    text-align: center;
  }

  .office-collection-page .office-desk-type-page .office-step-action-rail .office-sandbox-next {
    grid-column: 1;
    grid-row: 2;
    min-height: 48px;
    font-size: 16px;
  }
}

.office-collection-page .office-direction-board {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.office-collection-page .office-direction-board:active,
.office-collection-page .office-sandbox-board-svg--direction.is-adjusting {
  cursor: grabbing;
}

.office-collection-page .office-sandbox-board-svg--direction:focus-visible {
  outline: 2px solid var(--office-sandbox-ink);
  outline-offset: -8px;
}

.office-collection-page #officeCollectionApp {
  --office-heading-rotation: -180deg;
}

.office-collection-page .office-sandbox-board-svg .office-sandbox-vector-layer--outer,
.office-collection-page .office-sandbox-board-svg .office-sandbox-vector-layer--compass,
.office-collection-page .office-sandbox-board-svg .office-sandbox-vector-layer--scores,
.office-collection-page .office-sandbox-board-svg .office-sandbox-vector-layer--far,
.office-collection-page .office-sandbox-board-svg .office-sandbox-vector-layer--near,
.office-collection-page .office-sandbox-board-svg .office-direction-vector-labels,
.office-collection-page .office-sandbox-board-svg .office-sandbox-scene-object-overlay {
  transform: rotate(var(--office-heading-rotation, -180deg));
  transform-box: view-box;
  transform-origin: 690px 620px;
  transition: transform .1s ease-out;
}

.office-collection-page .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--outer,
.office-collection-page .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--compass,
.office-collection-page .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--scores,
.office-collection-page .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--far,
.office-collection-page .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--near,
.office-collection-page .office-sandbox-board-svg.is-adjusting .office-direction-vector-labels,
.office-collection-page .office-sandbox-board-svg.is-adjusting .office-sandbox-scene-object-overlay {
  transition: none;
}

.office-collection-page .office-sandbox-scene-object-overlay,
.office-collection-page .office-sandbox-scene-object {
  pointer-events: none;
}

.office-collection-page .office-sandbox-board-svg--direction .office-sandbox-vector-layer--outer,
.office-collection-page .office-sandbox-board-svg--direction .office-sandbox-vector-layer--scores,
.office-collection-page .office-sandbox-board-svg--direction .office-sandbox-vector-layer--far,
.office-collection-page .office-sandbox-board-svg--direction .office-sandbox-vector-layer--near,
.office-collection-page .office-sandbox-board-svg--direction .office-sandbox-vector-total {
  display: none;
}

.office-collection-page .office-direction-vector-labels {
  fill: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  pointer-events: none;
}

.office-collection-page .office-orientation-controls {
  width: 330px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.office-collection-page .office-orientation-control {
  min-height: 638px;
  display: flex;
  flex-direction: column;
  border: 1.2px solid var(--office-sandbox-ink);
  background: var(--office-sandbox-paper);
}

.office-collection-page .office-orientation-control > header {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--office-sandbox-ink);
}

.office-collection-page .office-orientation-control h2 {
  margin: 0;
  font-family: var(--office-interface-font);
  font-size: 22px;
  font-weight: 500;
}

.office-collection-page .office-orientation-readout {
  margin: auto 24px;
  text-align: center;
}

.office-collection-page .office-orientation-readout strong,
.office-collection-page .office-orientation-readout small {
  display: block;
}

.office-collection-page .office-orientation-readout strong {
  font-family: var(--office-interface-font);
  font-size: 58px;
  font-weight: 500;
  line-height: 1;
}

.office-collection-page .office-orientation-readout small {
  margin-top: 12px;
  color: #555550;
  font-size: 12px;
}

.office-collection-page .office-orientation-readout b {
  color: inherit;
  font-weight: 800;
}

.office-collection-page .office-orientation-slider-row {
  margin: 0 24px 30px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 12px;
}

.office-collection-page .office-orientation-slider-row button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--office-sandbox-ink);
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}

.office-collection-page .office-orientation-slider-row button:hover,
.office-collection-page .office-orientation-slider-row button:focus-visible {
  color: var(--office-sandbox-paper);
  background: var(--office-sandbox-ink);
}

.office-collection-page .office-orientation-slider-row input {
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.office-collection-page .office-orientation-slider-row input::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--office-sandbox-ink);
}

.office-collection-page .office-orientation-slider-row input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -8px;
  appearance: none;
  border: 2px solid var(--office-sandbox-ink);
  border-radius: 50%;
  background: var(--office-sandbox-paper);
}

.office-collection-page .office-orientation-slider-row input::-moz-range-track {
  height: 2px;
  border: 0;
  background: var(--office-sandbox-ink);
}

.office-collection-page .office-orientation-slider-row input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--office-sandbox-ink);
  border-radius: 50%;
  background: var(--office-sandbox-paper);
}

.office-collection-page .office-orientation-confirm {
  width: 184px;
  min-height: 52px;
  margin: 8px 0 0 auto;
  border: 0;
  color: #fff;
  background: var(--office-sandbox-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.office-collection-page .office-orientation-confirm:hover,
.office-collection-page .office-orientation-confirm:focus-visible {
  background: #292927;
}

.office-collection-page .office-orientation-saved {
  min-height: 0;
  margin: 0;
}

/* Step 1/4 direction page visual owner.
 * Its three-column collection geometry stays intact; only the toy-island-v2
 * shell, surfaces and interaction states are shared with Steps 3/4 and 4/4.
 */
.office-collection-page .office-orientation-page .office-sandbox-masthead {
  width: 100%;
  height: 58px;
  padding: 0 clamp(18px, 3vw, 46px);
  border-bottom: 2px solid rgb(8 41 87 / 18%);
  color: var(--office-sandbox-ink);
  background: rgb(255 250 240 / 96%);
  box-shadow: 0 2px 0 rgb(255 255 255 / 35%);
  font-weight: 700;
  letter-spacing: .12em;
}

.office-collection-page .office-orientation-page .office-sandbox-back {
  color: var(--office-sandbox-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform 160ms ease;
}

.office-collection-page .office-orientation-page .office-sandbox-back:hover {
  color: var(--office-sandbox-ink);
  transform: translateX(-2px);
}

.office-collection-page .office-orientation-page .office-sandbox-content {
  width: 100%;
  min-height: calc(100dvh - 58px);
  margin: 0;
  padding: 24px 0 34px;
  background:
    radial-gradient(circle at 18% 12%, rgb(255 255 255 / 23%), transparent 26%),
    #21c8dc url("/assets/img/office/sandbox/toy-island-v1/water-v1.png") center / cover fixed no-repeat;
}

.office-collection-page .office-orientation-page .office-sandbox-content > h1,
.office-collection-page .office-orientation-page .office-bearing-workspace {
  width: var(--office-sandbox-rail-width);
  max-width: calc(100% - 24px);
  margin-right: auto;
  margin-left: auto;
}

.office-collection-page .office-orientation-page .office-sandbox-content > h1 {
  margin-bottom: 18px;
  padding: 3px 20px;
  border: 3px solid var(--office-sandbox-ink);
  border-radius: 20px;
  color: var(--office-sandbox-ink);
  background: rgb(255 245 223 / 97%);
  box-shadow: 0 6px 0 rgb(8 78 122 / 20%), 0 16px 26px rgb(7 82 126 / 12%);
  font-family: var(--office-interface-font);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-align: center;
}

.office-collection-page .office-bearing-workspace {
  --office-bearing-dial-label-size: 20px;
  --office-mini-liji-name-font: calc(var(--office-bearing-dial-label-size) * 357 / 700 * 200 / 236);
  --office-bearing-card-head-height: 68px;
  --office-bearing-head-title-size: 18px;
  --office-bearing-head-subtitle-size: 12px;
  --office-bearing-head-copy-gap: 4px;
  --office-bearing-head-padding-block: 12px;
  --office-bearing-head-padding-inline: 14px;
  /* Match precision dial ring (~1u @ 700 viewBox) when mini liji renders ~220px @ 200 viewBox. */
  --office-mini-liji-stroke: 0.49;
  --office-bearing-workspace-gap: 40px;
  gap: var(--office-bearing-workspace-gap);
  grid-template-columns:
    minmax(0, calc((100% - var(--office-object-column-size) - (2 * var(--office-bearing-workspace-gap))) / 2))
    minmax(0, calc((100% - var(--office-object-column-size) - (2 * var(--office-bearing-workspace-gap))) / 2))
    var(--office-object-column-size);
}

.office-collection-page .office-bearing-workspace > .office-bearing-card--precise:first-child {
  grid-column: 1;
  grid-row: 1;
}

.office-collection-page .office-bearing-workspace > .office-bearing-card--precise:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.office-collection-page .office-bearing-side {
  grid-column: 3;
  grid-row: 1;
}

.office-collection-page .office-bearing-workspace > .office-bearing-card--precise,
.office-collection-page .office-bearing-workspace .office-bearing-stack {
  height: var(--office-side-panel-size);
  min-height: var(--office-side-panel-size);
  max-height: var(--office-side-panel-size);
}

.office-collection-page .office-bearing-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  border: 3px solid var(--office-sandbox-ink);
  border-radius: 24px;
  background: var(--office-sandbox-paper);
  overflow: hidden;
  box-shadow: 0 9px 0 rgb(8 41 87 / 24%), 0 20px 30px rgb(8 41 87 / 15%);
}

.office-collection-page .office-bearing-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 3px solid var(--office-sandbox-ink);
  border-radius: 24px;
  background: var(--office-sandbox-paper);
  overflow: hidden;
  box-shadow: 0 9px 0 rgb(8 41 87 / 24%), 0 20px 30px rgb(8 41 87 / 15%);
}

.office-collection-page .office-bearing-card-head {
  min-height: 54px;
  padding: 12px 18px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid rgb(8 41 87 / 18%);
  background: #fff8e9;
}

.office-collection-page .office-bearing-workspace .office-bearing-card-head {
  box-sizing: border-box;
  height: var(--office-bearing-card-head-height);
  min-height: var(--office-bearing-card-head-height);
  padding: var(--office-bearing-head-padding-block) var(--office-bearing-head-padding-inline);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.office-collection-page .office-bearing-workspace .office-bearing-card-head > div {
  display: flex;
  flex-direction: column;
  gap: var(--office-bearing-head-copy-gap);
  min-width: 0;
}

.office-collection-page .office-bearing-workspace .office-bearing-card-head h2 {
  margin: 0;
  color: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: var(--office-bearing-head-title-size);
  font-weight: 900;
  line-height: 1.25;
}

.office-collection-page .office-bearing-workspace .office-bearing-card-head p {
  margin: 0;
  color: var(--office-sandbox-muted);
  font-size: var(--office-bearing-head-subtitle-size);
  line-height: 1.45;
}

.office-collection-page .office-bearing-card-head h2 {
  margin: 0;
  color: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.office-collection-page .office-bearing-card-head p {
  margin: 4px 0 0;
  color: var(--office-sandbox-muted);
  font-size: 12px;
  line-height: 1.45;
}

.office-collection-page .office-bearing-badge {
  flex-shrink: 0;
  min-width: 52px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--office-sandbox-ink);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.office-collection-page .office-bearing-badge--required {
  color: #fffdf5;
  background: var(--office-sandbox-ink);
}

.office-collection-page .office-bearing-badge--optional {
  color: var(--office-sandbox-ink);
  background: #e6f4ef;
}

.office-collection-page .office-bearing-card--precise .office-bearing-dial-wrap {
  --office-heading-rotation: -180deg;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
}

.office-collection-page .office-bearing-dial-wrap {
  overflow: hidden;
}

.office-collection-page .office-bearing-dial-frame {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  touch-action: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--office-direction-rim);
  box-shadow: inset 0 -2px 0 rgb(23 76 85 / 10%), var(--office-direction-shadow);
}

.office-collection-page .office-orientation-page .office-bearing-dial-wrap .office-sandbox-vector-layer--compass ellipse,
.office-collection-page .office-orientation-page .office-bearing-dial-wrap .office-sandbox-vector-layer--compass path {
  stroke: var(--office-direction-rule, var(--office-direction-ink));
  stroke-linecap: round;
}

.office-collection-page .office-bearing-dial-wrap .office-sandbox-vector-layer--compass ellipse,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-vector-layer--center > ellipse {
  fill: var(--office-direction-face);
  stroke: var(--office-direction-rule, var(--office-direction-ink));
}

.office-collection-page .office-bearing-dial-wrap .office-sandbox-bearing-indicator path {
  stroke: var(--office-direction-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-collection-page .office-bearing-dial-wrap .office-direction-vector-labels,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-center-forward-label {
  fill: var(--office-direction-ink);
}

.office-collection-page .office-bearing-dial-wrap .office-direction-vector-labels {
  font-size: var(--office-bearing-dial-label-size);
}

.office-collection-page .office-bearing-dial-wrap .office-direction-vector-labels text {
  font-weight: 800;
  letter-spacing: .01em;
}

.office-collection-page .office-bearing-dial-wrap .office-direction-vector-degree,
.office-collection-page .office-bearing-dial-wrap .office-direction-vector-name.office-compass-direction-label {
  font-size: var(--office-bearing-dial-label-size);
  font-weight: 800;
  letter-spacing: .01em;
}

.office-collection-page .office-compass-direction-label {
  fill: #11110f;
  font-family: var(--office-interface-font);
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
}

.office-collection-page .office-orientation-page .office-compass-direction-label,
.office-collection-page .office-orientation-page .office-mini-liji-hub-mark {
  fill: var(--office-direction-ink);
}

.office-collection-page .office-bearing-workspace .office-mini-liji .office-compass-direction-label {
  font-size: var(--office-mini-liji-name-font);
}

@media (min-width: 1180px) {
  .office-collection-page .office-bearing-workspace {
    --office-bearing-dial-label-size: 22px;
    --office-mini-liji-stroke: 0.46;
  }
}

.office-collection-page .office-bearing-dial-frame .office-sandbox-board-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-radius: 50%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.office-collection-page .office-bearing-dial-frame .office-sandbox-board-svg:focus-visible:not(.is-adjusting) {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}

.office-collection-page .office-bearing-dial-frame .office-sandbox-board-svg:active,
.office-collection-page .office-bearing-dial-frame .office-sandbox-board-svg.is-adjusting {
  cursor: grabbing;
}

.office-collection-page .office-direction-entrance-rotor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
  contain: layout paint;
}

.office-collection-page .office-bearing-dial-frame > .is-entrance-motion {
  position: relative;
  z-index: 1;
}

.office-collection-page .is-entrance-motion .office-sandbox-vector-layer--compass,
.office-collection-page .is-entrance-motion .office-direction-vector-labels {
  visibility: hidden;
}

.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg .office-sandbox-vector-layer--outer,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg .office-sandbox-vector-layer--compass,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg .office-sandbox-vector-layer--scores,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg .office-sandbox-vector-layer--far,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg .office-sandbox-vector-layer--near,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg .office-direction-vector-labels {
  transform: rotate(var(--office-heading-rotation, -180deg));
  transform-box: view-box;
  transform-origin: 690px 620px;
  transition: transform .18s ease-out;
}

.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--outer,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--compass,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--scores,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--far,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg.is-adjusting .office-sandbox-vector-layer--near,
.office-collection-page .office-bearing-dial-wrap .office-sandbox-board-svg.is-adjusting .office-direction-vector-labels {
  transition: none;
}

.office-collection-page .office-bearing-readout {
  padding: 8px 14px 0;
  text-align: center;
  flex-shrink: 0;
}

.office-collection-page .office-bearing-readout strong,
.office-collection-page .office-bearing-readout small {
  display: block;
}

.office-collection-page .office-bearing-readout strong {
  color: var(--office-sandbox-ink);
  font-family: var(--office-interface-font);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.office-collection-page .office-bearing-readout small {
  margin-top: 8px;
  color: var(--office-sandbox-muted);
  font-size: 12px;
}

.office-collection-page .office-bearing-readout b {
  font-weight: 800;
}

.office-collection-page .office-bearing-slider-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 10px;
  flex-shrink: 0;
}

.office-collection-page .office-bearing-slider-row button {
  width: 44px;
  height: 44px;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.office-collection-page .office-bearing-slider-row input {
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.office-collection-page .office-bearing-slider-row input::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid var(--office-sandbox-ink);
  border-radius: 999px;
  background: #ffca3a;
}

.office-collection-page .office-bearing-slider-row input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  appearance: none;
  border: 2px solid var(--office-sandbox-ink);
  border-radius: 50%;
  background: #fffdf5;
  box-shadow: 0 2px 0 rgb(8 41 87 / 20%);
}

.office-collection-page .office-bearing-slider-row input::-moz-range-track {
  height: 5px;
  border: 1px solid var(--office-sandbox-ink);
  border-radius: 999px;
  background: #ffca3a;
}

.office-collection-page .office-bearing-slider-row input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--office-sandbox-ink);
  border-radius: 50%;
  background: #fffdf5;
  box-shadow: 0 2px 0 rgb(8 41 87 / 20%);
}

.office-collection-page .office-bearing-card--coarse {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.office-collection-page .office-bearing-stack .office-bearing-card--coarse {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.office-collection-page .office-bearing-stack .office-bearing-card--coarse:first-child {
  border-bottom: 2px solid rgb(8 41 87 / 18%);
}

@media (max-width: 1180px) and (min-width: 1024px) {
  .office-collection-page .office-bearing-workspace {
    gap: var(--office-workspace-gap);
  }
}

@media (width < 1024px) {
  .office-collection-page .office-bearing-workspace {
    grid-template-columns: 1fr 1fr;
  }

  .office-collection-page .office-bearing-workspace > .office-bearing-card--precise:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .office-collection-page .office-bearing-workspace > .office-bearing-card--precise:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .office-collection-page .office-bearing-side {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .office-collection-page .office-bearing-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
    min-height: var(--office-side-panel-size);
    max-height: none;
  }

  .office-collection-page .office-bearing-workspace > .office-bearing-card--precise {
    height: auto;
    min-height: var(--office-side-panel-size);
    max-height: none;
  }

  .office-collection-page .office-bearing-stack .office-bearing-card--coarse:first-child {
    border-bottom: 0;
    border-right: 1px solid var(--office-sandbox-ink);
  }
}

@media (width < 1024px) {
  .office-collection-page .office-bearing-workspace {
    grid-template-columns: 1fr;
  }

  .office-collection-page .office-bearing-workspace > .office-bearing-card--precise:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .office-collection-page .office-bearing-workspace > .office-bearing-card--precise:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .office-collection-page .office-bearing-side {
    grid-column: 1;
    grid-row: 3;
  }

  .office-collection-page .office-bearing-stack {
    grid-template-columns: 1fr;
  }

  .office-collection-page .office-bearing-workspace > .office-bearing-card--precise,
  .office-collection-page .office-bearing-workspace .office-bearing-stack {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .office-collection-page .office-bearing-stack .office-bearing-card--coarse:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--office-sandbox-ink);
  }

  .office-collection-page .office-bearing-readout strong {
    font-size: 24px;
  }
}
.office-collection-page .office-mini-liji-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px 10px;
}

.office-collection-page .office-mini-liji {
  width: min(220px, 88%);
  height: auto;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--office-direction-rim);
  box-shadow: inset 0 -2px 0 rgb(23 76 85 / 10%), var(--office-direction-shadow);
}

.office-collection-page .office-mini-liji-sector {
  cursor: pointer;
  outline: none;
}

.office-collection-page .office-mini-liji-ring {
  fill: var(--office-direction-face);
  stroke: var(--office-direction-line);
  stroke-width: var(--office-mini-liji-stroke);
  pointer-events: none;
}

.office-collection-page .office-mini-liji-sector-shape {
  fill: var(--office-direction-face);
  stroke: var(--office-direction-line);
  stroke-width: var(--office-mini-liji-stroke);
  transition: fill .16s ease, stroke .16s ease;
}

@media (min-width: 1180px) {
  .office-collection-page .office-mini-liji {
    width: min(236px, 90%);
  }
}

.office-collection-page .office-mini-liji-sector:hover .office-mini-liji-sector-shape {
  fill: var(--office-direction-rim);
  stroke: var(--office-direction-active);
}

.office-collection-page .office-mini-liji-sector.is-selected .office-mini-liji-sector-shape {
  fill: var(--office-direction-selected);
  stroke: var(--office-direction-active);
  stroke-width: 1.2;
}

.office-collection-page .office-mini-liji-sector:focus-visible .office-mini-liji-sector-shape {
  stroke: var(--office-direction-ink);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.office-collection-page .office-mini-liji-sector.is-selected .office-mini-liji-sector-label {
  font-weight: 800;
}

.office-collection-page .office-mini-liji-hub {
  fill: var(--office-direction-face);
  stroke: var(--office-direction-line);
  stroke-width: var(--office-mini-liji-stroke);
  pointer-events: none;
}

.office-collection-page .office-mini-liji-shell[data-selected-direction=""] .office-bearing-summary {
  color: var(--office-sandbox-muted);
}

.office-collection-page .office-bearing-card--coarse .office-bearing-summary {
  margin: 0;
  text-align: center;
  color: var(--office-sandbox-ink);
  font-size: 12px;
  font-weight: 700;
}

.office-collection-page .office-orientation-page .office-bearing-side > .office-sandbox-next {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 900;
}

.office-collection-page .office-orientation-page .office-bearing-side > .office-orientation-hint {
  margin-top: 10px;
  color: #eafcff;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px rgb(8 41 87 / 35%);
}

@media (width < 1024px) {
  .office-collection-page .office-orientation-page .office-sandbox-masthead {
    padding: 0 12px;
    grid-template-columns: 1fr;
  }

  .office-collection-page .office-orientation-page .office-sandbox-masthead > span {
    display: none;
  }

  .office-collection-page .office-orientation-page .office-sandbox-back-label {
    white-space: nowrap;
  }

  .office-collection-page .office-orientation-page .office-sandbox-content {
    padding-top: 18px;
  }
}

@media (max-width: 1180px) and (min-width: 1024px) {
  .office-collection-page .office-orientation-controls {
    width: 310px;
  }

  .office-collection-page .office-orientation-control {
    min-height: 558px;
  }
}

@media (width < 1024px) {
  .office-collection-page .office-orientation-controls {
    width: 100%;
  }

  .office-collection-page .office-orientation-control {
    min-height: 248px;
  }

  .office-collection-page .office-orientation-readout {
    margin: 32px 18px;
  }

  .office-collection-page .office-orientation-readout strong {
    font-size: 42px;
  }

  .office-collection-page .office-orientation-slider-row {
    margin: 0 18px 22px;
  }

  .office-collection-page .office-orientation-confirm {
    width: 100%;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .office-collection-page .office-orientation-controls {
    width: 310px;
  }

  .office-collection-page .office-orientation-control {
    min-height: 558px;
  }
}

@media (min-width: 1024px) and (max-height: 740px) {
  .office-collection-page .office-orientation-controls {
    width: 300px;
  }

  .office-collection-page .office-orientation-control {
    min-height: 518px;
  }
}

/* Retired residential-style direction page. No active markup uses this selector. */
.office-collection-page .office-direction-page {
  --office-stage-content-width: 1060px;
  display: none;
  box-sizing: border-box;
  min-height: calc(100dvh - 72px);
  padding: 42px 24px 24px;
  background:
    linear-gradient(137deg, rgba(180, 239, 255, .94) 0%, rgba(207, 247, 241, .88) 48%, rgba(247, 247, 250, .98) 80%);
}

.office-collection-page .office-direction-page.is-active {
  display: block;
}

.office-collection-page .office-stage-header {
  width: min(var(--office-stage-content-width), 100%);
  min-height: 86px;
  margin: 0 auto;
  position: relative;
}

.office-collection-page .office-stage-back {
  display: none;
}

.office-collection-page .office-stepper {
  width: 680px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.office-collection-page .office-stepper-item {
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  position: relative;
  color: #526963;
  font-style: normal;
}

.office-collection-page .office-stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 118px;
  height: 2px;
  top: 25px;
  left: calc(50% + 26px);
  background: rgba(255, 255, 255, .76);
}

.office-collection-page .office-stepper-item b {
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #58706a;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(24, 91, 93, .06);
}

.office-collection-page .office-stepper-item em {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
}

.office-collection-page .office-stepper-item.is-current {
  color: var(--app-primary, #076f7f);
}

.office-collection-page .office-stepper-item.is-current b {
  background: var(--collection-progress-fill, #60bbb6);
  color: #fff;
  box-shadow: 0 10px 24px rgb(var(--app-primary-bright-rgb) / .24);
}

.office-collection-page .office-stage-title {
  width: min(var(--office-stage-content-width), 100%);
  margin: 28px auto 12px;
}

.office-collection-page .office-stage-title h1 {
  margin: 0 0 10px;
  color: #153b3e;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.office-collection-page .office-stage-title p {
  margin: 0;
  color: #577071;
  font-size: 14px;
  line-height: 1.55;
}

.office-collection-page .office-direction-layout {
  width: min(var(--office-stage-content-width), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(320px, 372px);
  gap: 28px;
  align-items: start;
}

.office-collection-page .office-direction-workbench,
.office-collection-page .office-direction-control {
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 58px rgb(var(--app-primary-rgb) / .09);
}

.office-collection-page .office-direction-workbench {
  height: 480px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.office-collection-page .office-direction-dial-shell {
  --office-dial-size: 380px;
  --office-image-size: 330px;
  --office-tick-origin: 190px;
  --office-degree-radius: -158px;
  --office-direction-radius: -128px;
  width: 420px;
  height: 420px;
  position: relative;
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
}

.office-collection-page .office-direction-dial {
  --office-dial-rotation: 0deg;
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
  width: var(--office-dial-size);
  height: var(--office-dial-size);
  border: 2px solid rgba(96, 187, 182, .88);
  border-radius: 50%;
  transform: rotate(var(--office-dial-rotation));
  cursor: grab;
  outline: none;
  transition: transform .1s ease-out, box-shadow .16s ease;
}

.office-collection-page .office-direction-dial:focus-visible {
  box-shadow: 0 0 0 5px rgb(var(--app-primary-bright-rgb) / .22);
}

.office-collection-page .office-direction-dial.is-adjusting {
  cursor: grabbing;
  transition: none;
}

.office-collection-page .office-compass-tick {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1.5px;
  height: 7px;
  margin-left: -.75px;
  border-radius: 999px;
  background: rgba(68, 139, 141, .54);
  transform: rotate(var(--tick-angle));
  transform-origin: 50% calc(var(--office-tick-origin) - 1px);
}

.office-collection-page .office-compass-tick.is-major {
  width: 2px;
  height: 12px;
  margin-left: -1px;
  background: rgba(46, 126, 128, .62);
}

.office-collection-page .office-compass-tick.is-cardinal {
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  background: var(--collection-progress-fill, #60bbb6);
}

.office-collection-page .office-compass-degree,
.office-collection-page .office-direction-label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  color: #547173;
  line-height: 1;
  transform: rotate(var(--direction-angle)) translateY(var(--office-degree-radius));
}

.office-collection-page .office-compass-degree {
  width: 42px;
  height: 18px;
  margin: -9px 0 0 -21px;
  font-size: 10px;
  font-weight: 600;
}

.office-collection-page .office-direction-label {
  width: 48px;
  height: 20px;
  margin: -10px 0 0 -24px;
  color: #3f6264;
  font-size: 12px;
  font-weight: 800;
  transform: rotate(var(--direction-angle)) translateY(var(--office-direction-radius));
}

.office-collection-page .office-workstation-image {
  position: absolute;
  z-index: 1;
  top: 45px;
  left: 45px;
  width: var(--office-image-size);
  height: var(--office-image-size);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}

.office-collection-page .office-workstation-center {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--app-primary, #076f7f);
  transform: translate(-50%, -50%);
}

.office-collection-page .office-workstation-arrow {
  position: absolute;
  z-index: 5;
  bottom: 50%;
  left: calc(50% - 3px);
  width: 6px;
  height: 92px;
  border-radius: 999px;
  background: var(--app-primary, #076f7f);
}

.office-collection-page .office-workstation-arrow::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 21px;
  height: 21px;
  border-top: 6px solid var(--app-primary, #076f7f);
  border-left: 6px solid var(--app-primary, #076f7f);
  transform: translateX(-50%) rotate(45deg);
}

.office-collection-page .office-forward-marker {
  position: absolute;
  top: -7px;
  left: 50%;
  z-index: 7;
  width: 90px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  text-align: center;
  color: #06966b;
}

.office-collection-page .office-forward-marker span {
  width: 3px;
  height: 23px;
  display: block;
  border-radius: 999px;
  background: #06966b;
}

.office-collection-page .office-forward-marker strong {
  font-size: 12px;
  font-weight: 800;
}

.office-collection-page .office-direction-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.office-collection-page .office-direction-control {
  height: 480px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}

.office-collection-page .office-direction-control h2 {
  margin: 0;
  color: #183d3f;
  font-size: 16px;
  line-height: 1.3;
}

.office-collection-page .office-direction-readout {
  margin: auto 0;
  text-align: center;
}

.office-collection-page .office-direction-readout small,
.office-collection-page .office-direction-readout strong {
  display: block;
}

.office-collection-page .office-direction-readout small {
  margin-top: 12px;
  color: #5a7172;
  font-size: 13px;
  font-weight: 600;
}

.office-collection-page .office-direction-readout small b {
  color: var(--app-primary, #076f7f);
  font: inherit;
  font-weight: 800;
}

.office-collection-page .office-direction-readout > strong {
  color: #163c3e;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -.04em;
}

.office-collection-page .office-direction-slider-row {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 12px;
}

.office-collection-page .office-direction-slider-row button {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(var(--app-primary-rgb) / .18);
  border-radius: 12px;
  background: #fff;
  color: var(--app-primary, #076f7f);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.office-collection-page .office-direction-slider-row button:hover {
  border-color: rgb(var(--app-primary-rgb) / .38);
  background: var(--app-primary-soft, #edf8f5);
}

.office-collection-page .office-direction-slider-row button:active {
  transform: scale(.96);
}

.office-collection-page .office-direction-slider-row input {
  height: 24px;
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.office-collection-page .office-direction-slider-row input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #dbe3e8;
}

.office-collection-page .office-direction-slider-row input::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -11px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--collection-progress-fill, #60bbb6);
  box-shadow: 0 5px 14px rgb(var(--app-primary-bright-rgb) / .28);
}

.office-collection-page .office-direction-slider-row input::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #dbe3e8;
}

.office-collection-page .office-direction-slider-row input::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #dbe3e8;
}

.office-collection-page .office-direction-slider-row input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--collection-progress-fill, #60bbb6);
  box-shadow: 0 5px 14px rgb(var(--app-primary-bright-rgb) / .28);
}

.office-collection-page .office-direction-confirm {
  width: 288px;
  min-height: 48px;
  align-self: flex-end;
  border: 0;
  border-radius: 999px;
  background: var(--app-primary-gradient);
  box-shadow: 0 13px 28px rgb(var(--app-primary-bright-rgb) / .22);
  font-weight: 800;
}

.office-collection-page .office-direction-confirm:hover:not(:disabled) {
  background: var(--app-primary-gradient-hover);
}

.office-collection-page .office-direction-saved {
  min-height: 16px;
  margin: -8px 0 0;
  color: var(--app-primary, #076f7f);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.office-collection-page #officeToast {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: var(--feedback-z-toast, 1200);
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: #1f473d;
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 40px rgba(21, 61, 51, .22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity .16s ease, transform .16s ease;
}

.office-collection-page #officeToast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (max-width: 1199px) and (min-width: 1024px) {
  .office-collection-page .office-direction-page {
    --office-stage-content-width: 1000px;
    padding-inline: 32px;
  }

  .office-collection-page .office-direction-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .office-collection-page .office-direction-workbench,
  .office-collection-page .office-direction-control {
    height: 450px;
  }

  .office-collection-page .office-direction-dial-shell {
    --office-dial-size: 330px;
    --office-image-size: 288px;
    --office-tick-origin: 165px;
    --office-degree-radius: -137px;
    --office-direction-radius: -111px;
    width: 370px;
    height: 370px;
  }

  .office-collection-page .office-direction-dial {
    top: 20px;
    left: 20px;
  }

  .office-collection-page .office-workstation-image {
    top: 41px;
    left: 41px;
  }

  .office-collection-page .office-workstation-arrow {
    height: 79px;
  }

  .office-collection-page .office-forward-marker {
    top: -5px;
  }
}

@media (max-height: 820px) and (min-width: 1024px) {
  .office-collection-page .office-direction-page {
    padding-top: 28px;
    padding-bottom: 36px;
  }

  .office-collection-page .office-stage-header {
    min-height: 70px;
  }

  .office-collection-page .office-stepper-item {
    gap: 5px;
  }

  .office-collection-page .office-stepper-item b {
    width: 44px;
    height: 44px;
  }

  .office-collection-page .office-stepper-item:not(:last-child)::after {
    top: 21px;
    left: calc(50% + 22px);
  }

  .office-collection-page .office-stage-title {
    margin-block: 18px 10px;
  }

  .office-collection-page .office-stage-title h1 {
    font-size: 28px;
  }

  .office-collection-page .office-direction-workbench,
  .office-collection-page .office-direction-control {
    height: 390px;
  }

}

@media (max-height: 820px) and (min-width: 1200px) {
  .office-collection-page .office-direction-dial-shell {
    --office-dial-size: 330px;
    --office-image-size: 288px;
    --office-tick-origin: 165px;
    --office-degree-radius: -137px;
    --office-direction-radius: -111px;
    width: 370px;
    height: 370px;
  }

  .office-collection-page .office-direction-dial {
    top: 20px;
    left: 20px;
  }

  .office-collection-page .office-workstation-image {
    top: 41px;
    left: 41px;
  }

  .office-collection-page .office-workstation-arrow {
    height: 79px;
  }

  .office-collection-page .office-forward-marker {
    top: -5px;
  }
}


@media (width < 1024px) {
  .office-collection-page #officeToast {
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    border-radius: 12px;
  }

  .office-collection-page .office-collection-shell {
    padding-bottom: 72px;
  }

  .office-collection-page .office-collection-shell:has(.office-direction-page.is-active) {
    padding-top: var(--product-header-height, 64px);
  }

  .office-collection-page .office-direction-page {
    min-height: calc(100dvh - 64px);
    padding: 14px 16px 88px;
  }

  .office-collection-page .office-stage-header {
    width: 100%;
    min-height: 20px;
  }

  .office-collection-page .office-stepper {
    width: 166px;
    margin: 0 0 0 auto;
  }

  .office-collection-page .office-stepper-item {
    width: 42px;
    gap: 0;
  }

  .office-collection-page .office-stepper-item:not(:last-child)::after {
    width: 24px;
    height: 1px;
    top: 9px;
    left: calc(50% + 9px);
  }

  .office-collection-page .office-stepper-item b {
    width: 18px;
    height: 18px;
    font-size: 10px;
    box-shadow: none;
  }

  .office-collection-page .office-stepper-item em {
    display: none;
  }

  .office-collection-page .office-stage-title {
    width: 100%;
    margin: 24px 0 6px;
  }

  .office-collection-page .office-stage-title h1 {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .office-collection-page .office-stage-title p {
    font-size: 12px;
    line-height: 1.35;
  }

  .office-collection-page .office-direction-layout {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .office-collection-page .office-direction-workbench {
    height: 416px;
    border-radius: 20px;
  }

  .office-collection-page .office-direction-dial-shell {
    --office-dial-size: 300px;
    --office-image-size: 262px;
    --office-tick-origin: 150px;
    --office-degree-radius: -124px;
    --office-direction-radius: -100px;
    width: 340px;
    max-width: 100%;
    height: 340px;
    transform: translateY(18px);
  }

  .office-collection-page .office-direction-dial {
    top: 20px;
    left: calc(50% - 150px);
  }

  .office-collection-page .office-workstation-image {
    top: 39px;
    left: calc(50% - 131px);
  }

  .office-collection-page .office-workstation-arrow {
    height: 78px;
  }

  .office-collection-page .office-forward-marker {
    top: -4px;
  }

  .office-collection-page .office-direction-controls {
    gap: 12px;
  }

  .office-collection-page .office-direction-control {
    height: 98px;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .office-collection-page .office-direction-control h2 {
    display: none;
  }

  .office-collection-page .office-direction-readout {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .office-collection-page .office-direction-readout > strong {
    font-size: 18px;
    letter-spacing: 0;
  }

  .office-collection-page .office-direction-readout small {
    margin: 0;
    font-size: 12px;
  }

  .office-collection-page .office-direction-readout small span {
    display: none;
  }

  .office-collection-page .office-direction-slider-row {
    grid-template-columns: 34px 1fr 34px;
    gap: 10px;
  }

  .office-collection-page .office-direction-slider-row button {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .office-collection-page .office-direction-confirm {
    width: calc(100% - 28px);
    min-height: 48px;
    margin: 0 14px;
  }

  .office-collection-page .office-direction-saved {
    margin-top: -4px;
  }
}

@media (max-width: 360px) {
  .office-collection-page .office-direction-page {
    padding-inline: 12px;
  }

  .office-collection-page .office-direction-workbench {
    height: 382px;
  }

  .office-collection-page .office-direction-dial-shell {
    --office-dial-size: 270px;
    --office-image-size: 236px;
    --office-tick-origin: 135px;
    --office-degree-radius: -111px;
    --office-direction-radius: -90px;
    width: 304px;
    height: 304px;
  }

  .office-collection-page .office-direction-dial {
    left: calc(50% - 135px);
  }

  .office-collection-page .office-workstation-image {
    top: 37px;
    left: calc(50% - 118px);
  }

  .office-collection-page .office-workstation-arrow {
    height: 65px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .office-collection-page *,
  .office-collection-page *::before,
  .office-collection-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Office sandbox interaction owner: selection, feedback and item management. */
.office-collection-page .office-object-column {
  position: relative;
}

.office-collection-page .office-sandbox-selected-strip {
  position: absolute;
  z-index: 8;
  top: 12px;
  right: 12px;
  left: 12px;
  min-height: 54px;
  padding: 9px 10px 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  color: var(--office-sandbox-paper);
  background: var(--office-sandbox-ink);
  box-shadow: 0 8px 24px rgb(17 17 15 / 16%);
}

.office-collection-page .office-sandbox-selected-strip[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .office-collection-page .office-sandbox-selected-strip {
    display: none;
  }
}

.office-collection-page .office-sandbox-selected-strip-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.office-collection-page .office-sandbox-selected-strip-copy strong,
.office-collection-page .office-sandbox-selected-strip-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-collection-page .office-sandbox-selected-strip-copy strong {
  font-size: 13px;
}

.office-collection-page .office-sandbox-selected-strip-copy small,
.office-collection-page .office-sandbox-selected-strip-hint {
  color: #cfcfc7;
  font-size: 10px;
}

.office-collection-page .office-sandbox-selected-strip > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-valid-target .office-sandbox-vector-shape {
  fill: #fff;
  stroke: #11110f;
  stroke-width: 1.35;
}

.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-valid-target .office-sandbox-vector-plus {
  opacity: .72;
  fill: #11110f;
}

.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-valid-target.is-drop-target .office-sandbox-vector-shape,
.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-valid-target.is-slot-hovered .office-sandbox-vector-shape {
  fill: #fff;
  stroke: #11110f;
  stroke-width: 2.2;
}

.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-valid-target.is-drop-target .office-sandbox-vector-plus,
.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-valid-target.is-slot-hovered .office-sandbox-vector-plus {
  opacity: 1;
  fill: #11110f;
}

.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-invalid-target {
  opacity: .22;
}

.office-collection-page .office-sandbox-vector-cell[data-object-key] .office-sandbox-vector-shape {
  fill: #69bcff;
  stroke: #0a4a7c;
  stroke-width: 1.4;
}

.office-collection-page .office-sandbox-page.has-placement-selection .office-sandbox-vector-cell.is-invalid-target[data-object-key] {
  opacity: 1;
}

.office-collection-page .office-sandbox-vector-cell.is-save-pending,
.office-collection-page .office-sandbox-vector-cell.is-entity-pending {
  opacity: .48;
  pointer-events: none;
}

.office-collection-page .office-sandbox-cell-stack-badge rect {
  fill: #082f61;
  stroke: #fff6dc;
  stroke-width: 1.5px;
}

.office-collection-page .office-sandbox-cell-stack-badge text {
  fill: #fffdf5;
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}

.office-collection-page .office-sandbox-vector-cell.is-save-pending .office-sandbox-vector-shape {
  animation: office-sandbox-pending 900ms ease-in-out infinite alternate;
}

.office-collection-page .office-sandbox-vector-cell.is-drag-source {
  opacity: .35;
}

.office-collection-page .office-sandbox-item-sheet {
  position: absolute;
  z-index: 10;
  inset: 0;
  color: var(--office-island-text);
  background: var(--app-surface);
}

.office-collection-page .office-sandbox-item-sheet[hidden] {
  display: none;
}

.office-collection-page .office-sandbox-item-sheet-backdrop {
  display: none;
}

.office-collection-page .office-sandbox-item-sheet-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  color: var(--office-island-text);
  background: var(--app-surface);
  box-shadow: none;
  outline: 0;
}

.office-collection-page .office-sandbox-item-sheet-header {
  min-height: 68px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-line);
  background: var(--office-island-background);
}

.office-collection-page .office-sandbox-item-sheet-header h2 {
  margin: 0;
  color: var(--office-island-text);
  font: 700 16px/1.5 var(--office-interface-font);
}

.office-collection-page .office-sandbox-item-sheet-body {
  flex: 1;
  min-height: 0;
  padding: 16px 20px 28px;
  overflow-y: auto;
}

.office-collection-page .office-sandbox-item-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d7d7d0;
}

.office-collection-page .office-sandbox-item-row-main {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.office-collection-page .office-sandbox-item-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.office-collection-page .office-sandbox-item-row-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #d7d7d0;
  color: var(--office-sandbox-ink);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.office-collection-page .office-sandbox-item-row-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-collection-page .office-sandbox-item-row-main strong {
  font-size: 14px;
}

.office-collection-page .office-sandbox-item-row-main span,
.office-collection-page .office-sandbox-item-detail-summary,
.office-collection-page .office-sandbox-item-sheet-empty {
  margin: 0;
  color: #6d6d67;
  font-size: 12px;
}

.office-collection-page .office-sandbox-item-row-actions,
.office-collection-page .office-sandbox-item-detail-actions {
  display: flex;
  gap: 6px;
}

.office-collection-page .office-sandbox-item-action {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--office-sandbox-ink);
  color: var(--office-sandbox-ink);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.office-collection-page .office-sandbox-item-action.is-danger {
  color: #8c2f28;
  border-color: #8c2f28;
}

.office-collection-page .office-sandbox-item-row.is-entity-pending {
  opacity: .55;
  pointer-events: none;
}

.office-collection-page .office-my-items {
  display: grid;
  gap: 12px;
  outline: 0;
}

.office-collection-page .office-my-items-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #d7d7d0;
}

.office-collection-page .office-my-items-heading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.office-collection-page .office-my-items-heading span {
  color: #777772;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.office-collection-page .office-my-items-heading strong {
  color: var(--app-text);
  font: 700 16px/1.4 var(--office-interface-font);
}

.office-collection-page .office-my-items-heading button {
  padding: 0;
  font: inherit;
  font-size: 11px;
}

.office-collection-page .office-my-items-heading .office-my-items-back-direction {
  justify-self: start;
  margin-top: 4px;
}

.office-collection-page .office-my-items-controls { display: contents; }

.office-collection-page .office-my-items-list {
  min-width: 0;
}

.office-collection-page .office-my-items-list.is-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.office-collection-page .office-my-items-list.is-direction-summary {
  display: grid;
  gap: 8px;
}

.office-collection-page .office-my-items-direction-row {
  min-width: 0;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: var(--app-surface);
}

.office-collection-page .office-my-items-direction-row-main {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  color: var(--app-text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.office-collection-page .office-my-items-direction-row-main:hover {
  background: var(--app-primary-soft);
}

.office-collection-page .office-my-items-direction-row-main .office-sandbox-item-row-icon {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  object-fit: contain;
}

.office-collection-page .office-my-items-direction-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.office-collection-page .office-my-items-direction-row-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-collection-page .office-my-items-direction-row-copy span,
.office-collection-page .office-my-items-direction-row-action {
  color: var(--app-text-secondary);
  font-size: 11px;
}

.office-collection-page .office-my-items-direction-row-action {
  color: var(--app-primary);
  font-weight: 700;
  white-space: nowrap;
}

.office-collection-page .office-my-items-direction-empty {
  margin: 0;
  padding: 12px 0;
  color: var(--app-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.office-collection-page .office-my-items-direction-row-main:focus-visible {
  outline: none; text-decoration: underline; text-underline-offset: 4px;
}

.office-collection-page .office-my-item-location {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 12px);
  overflow: hidden;
  padding: 2px 4px;
  border-radius: 5px;
  color: #26766d;
  background: #edf8f5;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-collection-page .office-my-items-list.is-card-grid .office-my-items-empty {
  grid-column: 1 / -1;
}

.office-collection-page .office-object-catalog-empty,
.office-collection-page .office-my-items-empty,
.office-collection-page .office-my-items-loading {
  min-height: 150px;
  display: grid;
  place-content: center;
  gap: 6px;
  color: #777772;
  text-align: center;
  font-size: 12px;
}

.office-collection-page .office-my-items-empty strong {
  color: var(--office-sandbox-ink);
  font: 500 17px/1.3 var(--office-interface-font);
}

.office-collection-page .office-sandbox-item-detail {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.office-collection-page .office-sandbox-item-detail-identity {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--app-line);
}

.office-collection-page .office-sandbox-item-detail-identity .office-sandbox-item-row-icon {
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
}

.office-collection-page .office-sandbox-item-detail-identity h3 {
  margin: 0 0 5px;
  color: var(--office-island-text);
  font: 700 16px/1.4 var(--office-interface-font);
}

.office-collection-page .office-sandbox-item-detail-error {
  margin: -4px 0 0;
  color: #8c2f28;
  font-size: 12px;
}

.office-collection-page .office-sandbox-item-detail-actions {
  margin-top: auto;
  flex-direction: row;
  gap: 12px;
}

.office-collection-page .office-sandbox-item-detail-actions .office-sandbox-item-action {
  flex: 1 1 0;
}

.office-collection-page .office-sandbox-vector-cell.is-detail-selected .office-sandbox-vector-shape {
  stroke-width: 2.25;
}

@keyframes office-sandbox-pending {
  from { fill: #fff; }
  to { fill: #d9d9d1; }
}

@media (width < 1024px) {
  .office-collection-page .office-sandbox-content {
    padding-bottom: min(43vh, 360px);
  }

  .office-collection-page .office-sandbox-page.is-mobile-object-panel-collapsed .office-sandbox-content {
    padding-bottom: 78px;
  }

  .office-collection-page .office-sandbox-page.has-inline-report .office-sandbox-content {
    padding-bottom: 28px;
  }

  .office-collection-page .office-inline-report-region {
    width: calc(100% - 24px);
    margin: 12px 12px 0;
  }

  .office-collection-page .office-inline-report-stale,
  .office-collection-page .office-inline-report-loading {
    width: 100%;
  }

  .office-collection-page .office-inline-report-loading {
    grid-template-columns: 18px 1fr;
  }

  .office-collection-page .office-inline-report-loading > span:last-child {
    grid-column: 2;
    text-align: left;
  }


  .office-collection-page .office-sandbox-page .office-object-column {
    position: fixed;
    z-index: 42;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(248px, 52dvh, 420px);
    max-height: none;
    padding: 0 12px 10px;
    border-top: 1px solid var(--office-sandbox-ink);
    background: var(--office-sandbox-paper);
    box-shadow: 0 -10px 32px rgb(17 17 15 / 10%);
    transition: transform .22s ease, opacity .22s ease;
  }

  .office-collection-page .office-sandbox-page.is-reading-inline-report .office-object-column:not(.is-mobile-collapsed) {
    transform: translateY(calc(100% + 18px));
    opacity: 0;
    pointer-events: none;
  }

  .office-collection-page .office-sandbox-page.is-reading-inline-report .office-sandbox-selected-strip {
    opacity: 0;
    pointer-events: none;
  }

  .office-collection-page .office-object-panel {
    height: calc(100% - 62px);
    min-height: 0;
    max-height: none;
    border-bottom: 0;
  }

  .office-collection-page .office-object-panel > header {
    min-height: 48px;
    padding: 0 14px;
  }

  .office-collection-page .office-object-panel h2 {
    font-size: 17px;
  }

  .office-collection-page .office-object-panel-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    color: var(--office-sandbox-ink);
    background: transparent;
    cursor: pointer;
  }

  .office-collection-page .office-object-panel-toggle span {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(2px) rotate(225deg);
    transition: transform .2s ease;
  }

  .office-collection-page .office-object-column.is-mobile-collapsed .office-object-panel-toggle span {
    transform: translateY(-2px) rotate(45deg);
  }

  .office-collection-page .office-object-tabs {
    overflow-x: auto;
    grid-auto-columns: minmax(58px, 1fr);
  }

  .office-collection-page .office-object-tab {
    min-height: 50px;
    padding: 5px 2px;
  }

  .office-collection-page .office-object-tab svg {
    width: 18px;
    height: 18px;
  }

  .office-collection-page .office-object-catalog {
    padding: 10px 10px 16px;
  }

  .office-collection-page .office-object-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .office-collection-page .office-sandbox-next {
    min-height: 52px;
    margin-top: 0;
  }

  .office-collection-page .office-sandbox-selected-strip {
    position: fixed;
    z-index: 44;
    top: auto;
    right: 12px;
    bottom: calc(var(--office-mobile-library-space, 0px) + 76px);
    left: 12px;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 3px 6px 3px 12px;
    color: var(--app-text);
    background: var(--app-primary-soft);
    border: 1px solid var(--app-primary);
    border-radius: 12px;
    box-shadow: none;
  }

  .office-collection-page .office-sandbox-selected-strip-copy {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .office-collection-page .office-sandbox-selected-strip-copy small {
    color: var(--app-text-secondary);
    font-size: 12px;
  }

  .office-collection-page .office-sandbox-selected-strip-hint {
    display: none;
  }

  .office-collection-page .office-sandbox-selected-strip > button {
    width: 44px;
    height: 44px;
    border-color: transparent;
    border-radius: 8px;
    color: var(--app-text);
  }

.office-collection-page .office-sandbox-selected-strip > button:focus-visible,
  .office-collection-page .office-object-panel-toggle:focus-visible {
  outline: none; text-decoration: underline; text-underline-offset: 4px;
}

  .office-collection-page .office-sandbox-page.has-placement-selection .office-object-panel,
  .office-collection-page .office-sandbox-page.has-placement-selection .office-object-column > .office-sandbox-next {
    visibility: hidden;
    pointer-events: none;
  }

  .office-collection-page .office-sandbox-item-sheet-header {
    min-height: 58px;
    padding: 0 16px;
  }

  .office-collection-page .office-sandbox-item-sheet-body {
    padding: 12px 16px max(24px, env(safe-area-inset-bottom));
  }

  .office-collection-page .office-sandbox-item-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .office-collection-page .office-sandbox-item-row-actions {
    padding: 0 0 12px 48px;
  }
}

/* Toy office island page shell and control surface owner.
 * Scene renderers remain the geometry/state owners; existing icon artwork is unchanged.
 */
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] {
  --office-sandbox-ink: var(--app-text);
  --office-sandbox-paper: var(--app-surface);
  --office-sandbox-muted: var(--app-text-secondary);
  --office-object-column-size: 374px;
  --office-workspace-gap: 16px;
  --office-sandbox-rail-width: 100%;
  color: var(--app-text);
  background: var(--app-surface-subtle);
  font-family: var(--office-interface-font);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-masthead {
  position: relative;
  z-index: 50;
  height: 64px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-surface);
  box-shadow: none;
  letter-spacing: 0;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-masthead-inner {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  padding: 0 22px;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-heading {
  position: relative;
  grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center;
  min-width: 0; gap: 0; color: var(--app-text); white-space: nowrap;
  font: 600 16px/1.4 var(--office-interface-font);
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-heading-context,
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-heading-full {
  display: none;
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] [data-office-sandbox-step-label] {
  position: static; transform: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; gap: 8px; min-width: 0; white-space: nowrap;
}
/* Retain the DOM hook; the approved compact title now serves both viewports. */
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-heading-mobile {
  display: inline; order: 1;
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] [data-office-sandbox-step-label] > small {
  order: 2; font-size: 12px; font-weight: 400; color: #62736f;
  font-variant-numeric: tabular-nums;
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-heading .office-ring-guide-trigger {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-masthead-actions {
  grid-column: 3; grid-row: 1; width: auto;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-back {
  position: relative; display: grid; place-items: center; gap: 0;
  width: 44px; height: 44px; padding: 0;
  color: var(--app-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-back-mark {
  font-size: 22px; line-height: 1;
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-back-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (width >= 1024px) {
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-back:is(:hover, :focus-visible) .office-sandbox-back-label {
    width: max-content; height: auto; margin: 0; padding: 6px 10px;
    left: 0; top: calc(100% + 6px); clip-path: none;
    color: var(--app-surface); background: var(--app-text); border-radius: 6px;
    font-size: 12px; font-weight: 400;
  }
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-content {
  --office-workspace-height: max(480px, calc(100dvh - 216px));
  width: 100%;
  min-height: calc(100dvh - 64px);
  margin: 0;
  padding: 14px 18px 18px;
  background: var(--app-surface-subtle);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-workspace {
  width: 100%;
  min-height: var(--office-workspace-height);
  grid-template-columns: minmax(0, 1fr) var(--office-object-column-size);
  gap: var(--office-workspace-gap);
  padding: 0;
  align-items: stretch;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-board-frame {
  width: auto;
  height: var(--office-workspace-height);
  min-height: var(--office-workspace-height);
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-toy-island-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(800px, calc(100dvh - 100px), calc(100vw - 450px));
  height: auto;
  transform: translate(-50%, -50%);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-toolbar {
  position: absolute;
  z-index: 20;
  top: auto;
  right: auto;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-height: 0;
  margin: 0;
  gap: 8px;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-tool {
  box-sizing: border-box;
  flex: 0 0 var(--office-sandbox-tool-size);
  width: var(--office-sandbox-tool-size);
  height: var(--office-sandbox-tool-size);
  min-height: var(--office-sandbox-tool-size);
  aspect-ratio: 1;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-tool .collection-icon {
  display: none;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-tool::before {
  content: "";
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: center / 125% 125% no-repeat var(--office-editor-tool-icon);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] [data-office-sandbox-undo] {
  --office-editor-tool-icon: url("/assets/img/office/sandbox/control-icons-v1/undo-v1.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] [data-office-sandbox-redo] {
  --office-editor-tool-icon: url("/assets/img/office/sandbox/control-icons-v1/redo-v1.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] [data-office-sandbox-clear] {
  --office-editor-tool-icon: url("/assets/img/office/sandbox/control-icons-v1/clear-v1.png");
}






.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-inline-feedback {
  /* Keep live announcements available without a lower-left visual overlay. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-inline-feedback.is-saving {
  grid-column: 1 / 2; grid-row: 1 / 2;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 160px); height: auto;
  padding: 4px 8px; clip-path: none; opacity: 1; z-index: 22;
  border: 1px solid #d0e3e1; border-radius: 8px;
  background: #fff; color: var(--office-island-text);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-column {
  --office-library-text: var(--office-island-text);
  --office-library-card-radius: 16px;
  --office-library-card-shadow: var(--office-island-shadow);
  --office-library-hover: #fff;
  --office-library-selected: var(--office-choice-sealed-surface);
  --office-library-surface: #f1f3f2;
  --office-library-tab-selected-surface: var(--office-control-pressed-face);
  --office-library-tab-selected-base: #96c5b9;
  width: var(--office-object-column-size);
  height: var(--office-workspace-height);
  min-height: var(--office-workspace-height);
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 20px;
  background: var(--office-library-surface);
  box-shadow: var(--office-island-shadow);
  font-family: var(--office-interface-font);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel > header {
  min-height: 72px;
  padding: 16px;
  align-items: flex-start;
  border-bottom: 0;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel-heading h2 {
  color: var(--office-island-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel-heading p {
  margin: 5px 0 0;
  color: var(--office-island-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(44px, 1fr);
  align-items: stretch;
  gap: 4px;
  min-height: 70px;
  padding: 8px 10px 10px;
  overflow-x: auto;
  border-top: 1px solid var(--app-line);
  border-bottom: 1px solid var(--app-line);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab {
  min-width: 0;
  min-height: 52px;
  padding: 5px 1px 4px;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
}

/* Sandbox categories share one art slot; SVG stays in the DOM as a fallback. */
.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab svg {
  display: none;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab::before {
  content: "";
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: var(--office-object-tab-icon);
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="my_items"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/placed-star-v1.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="relationships"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/relationships-v2.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="space_layout"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/space-layout-house-v2.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="office"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/office-v1.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="daily_supplies"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/daily-supplies-v1.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="flora"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/yuanqi-display-v1.png");
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab[data-office-object-tab="yuanqi_display"] {
  --office-object-tab-icon: url("/assets/img/office/sandbox/control-icons-v1/display-trophy-v1.png");
}









.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab.is-phase-muted::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  top: 20px; left: calc(50% + 3px);
  border-radius: 50%;
  background: #fff url('/assets/icons/office-category-unavailable.svg') center / 12px 12px no-repeat;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-catalog {
  padding: 13px var(--office-object-catalog-inset) 18px;
  scrollbar-color: #93a8aa transparent;
  scroll-behavior: smooth;
}

.office-collection-page .office-object-subnav {
  position: sticky;
  z-index: 2;
  top: -13px;
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  margin: -13px -12px 12px;
  padding: 2px 12px;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--office-library-surface);
}

.office-collection-page .office-my-items-controls .office-object-subnav { margin-bottom: 0; }

.office-collection-page .office-object-subnav-link {
  min-height: 44px;
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 12px 7px;
  border: 0;
  border-radius: 8px;
  color: var(--office-island-secondary);
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}


.office-collection-page .office-object-subnav-link.is-current {
  color: var(--app-primary);
  font-weight: 700;
}

.office-collection-page .office-object-subnav-link.is-current::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  z-index: -1;
  border-radius: 6px;
  background: var(--office-library-tab-selected-surface);
  pointer-events: none;
}

.office-collection-page .office-object-subnav-link:active {
  color: var(--app-primary-dark);
}

.office-collection-page .office-object-subnav-link:disabled {
  color: var(--office-tool-disabled-ink);
  background: transparent;
  cursor: not-allowed;
}

.office-collection-page .office-object-subnav-link:focus-visible {
  outline: none; text-decoration: underline; text-underline-offset: 4px;
}

.office-collection-page .office-object-catalog-section {
  scroll-margin-top: 68px;
}

.office-collection-page .office-object-catalog-section + .office-object-catalog-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--app-line);
}

.office-collection-page .office-object-catalog-section > h3 {
  margin: 0 0 9px;
  color: var(--app-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.office-collection-page .office-role-catalog {
  display: grid;
  gap: 16px;
}

.office-collection-page .office-role-catalog-status {
  /* Keep controller announcements available to assistive technology only. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.office-collection-page .office-role-card,
.office-collection-page .office-my-item-card-button {
  touch-action: none;
  user-select: none;
}

.office-collection-page .office-role-card-piece {
  width: 50px;
  height: 50px;
  align-self: center;
  background: var(--office-role-art) center / contain no-repeat;
}

.office-collection-page [data-office-relationship-role="company_principal"],
.office-collection-page [data-office-role-art="company_principal"] {
  --office-role-art: url("/assets/img/office/sandbox/roles/block-v1/eagle-block-v1.png");
  --office-role-card-height-fit: 1.09803922;
}

.office-collection-page [data-office-relationship-role="direct_manager"],
.office-collection-page [data-office-role-art="direct_manager"] {
  --office-role-art: url("/assets/img/office/sandbox/roles/block-v1/monkey-block-v1.png");
  --office-role-card-height-fit: 1.09803922;
}

.office-collection-page [data-office-relationship-role="managed_person"],
.office-collection-page [data-office-role-art="managed_person"] {
  --office-role-art: url("/assets/img/office/sandbox/roles/block-v1/squirrel-block-v1.png");
  --office-role-card-height-fit: 1.11442786;
}

.office-collection-page [data-office-relationship-role="key_work_partner"],
.office-collection-page [data-office-role-art="key_work_partner"] {
  --office-role-art: url("/assets/img/office/sandbox/roles/block-v1/bear-block-v1.png");
  --office-role-card-height-fit: 1.09268293;
}

.office-collection-page .office-role-card-piece > span {
  display: none;
}

.office-mobile-report-surface { display: contents; }
html:has(> .office-collection-page.office-mobile-report-active) { overflow: hidden; scrollbar-gutter: auto; }
.office-collection-page.office-mobile-report-active { overflow: hidden; }
.office-mobile-actions,
.office-mobile-report-close,
.office-mobile-library-close-icon { display: none; }

.office-collection-page .office-sandbox-report-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 112px;
  margin-top: 16px;
  padding: 20px 28px;
  border: 1px solid var(--app-line);
  border-radius: 20px;
  background: var(--app-surface);
  font-family: var(--office-interface-font);
}

.office-collection-page .office-sandbox-report-entry[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .office-collection-page .office-sandbox-page[data-sandbox-phase="outer"] .office-sandbox-report-entry {
    position: fixed;
    z-index: 35;
    inset: auto 18px 12px;
    min-height: 76px;
    margin: 0;
    padding: 12px 24px;
  }
  .office-collection-page .office-sandbox-page[data-sandbox-phase="outer"] .office-sandbox-content {
    --office-workspace-height: max(240px, calc(100dvh - 188px));
    padding-bottom: 108px;
  }
  .office-collection-page .office-sandbox-page[data-sandbox-phase="outer"] .office-sandbox-report-entry-copy p {
    display: none;
  }
}

.office-collection-page .office-sandbox-report-entry-copy {
  min-width: 0;
}

.office-collection-page .office-sandbox-report-entry-copy h2 {
  margin: 0;
  color: var(--office-island-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.office-collection-page .office-sandbox-report-entry-copy p {
  margin: 4px 0 0;
  color: var(--office-island-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.office-collection-page .office-sandbox-report-entry-copy:has([data-office-report-location-status]:not([hidden])) > p:not([data-office-report-location-status]) {
  display: none;
}

.office-collection-page .office-sandbox-report-entry .office-sandbox-report-status {
  width: auto;
  margin: 4px 0 0;
  color: var(--office-island-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.office-collection-page .office-sandbox-report-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-next {
  width: 176px;
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 1100px) and (min-width: 1024px) {
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] {
    --office-object-column-size: 318px;
    --office-workspace-gap: 12px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-content {
    padding-inline: 12px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-toy-island-scene {
    width: min(700px, calc(100dvh - 92px), calc(100vw - 352px));
  }
}

@media (width < 1024px) {
  .office-collection-page {
    --office-object-catalog-inset: 8px;
    --office-sandbox-tool-size: 44px;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] {
    --office-object-column-size: 100%;
    --office-mobile-drawer-height: max(40dvh, calc(300px + env(safe-area-inset-bottom, 0px)));
    --office-mobile-library-space: var(--office-mobile-drawer-height);
    --office-mobile-card-height: clamp(86px, calc((var(--office-mobile-drawer-height) - 126px - env(safe-area-inset-bottom, 0px)) / 2), 124px);
    background: #78c8d0;
  }
  .office-collection-page .office-sandbox-page[data-mobile-library="closed"] {
    --office-mobile-library-space: 0px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-masthead {
    height: 56px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-masthead-inner {
    grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
    grid-template-rows: 1fr;
    row-gap: 0;
    align-content: stretch;
    padding: 0 12px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-masthead-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: auto;
    justify-content: flex-end;
    gap: 0;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-profile-entry-state,
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-profile-entry-mark {
    display: none;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-profile-entry { padding: 0 10px; }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-content {
    min-height: calc(100dvh - 56px);
    padding: 0;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"].is-mobile-object-panel-collapsed .office-sandbox-content {
    padding-bottom: 0;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-workspace {
    min-height: 0;
    display: block;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-board-frame {
    width: 100%;
    height: calc(100dvh - 56px - var(--office-mobile-library-space));
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-toy-island-scene {
    top: 54%;
    width: min(430px, 108vw);
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-toolbar {
    gap: 5px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-tool {
    padding: 4px;
    font-size: 9px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-tool .collection-icon {
    width: 15px;
    height: 15px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-editor-tool::before {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-toy-island-score {
    top: 9px;
    left: 10px;
    min-width: 112px;
    padding: 8px 10px 9px;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-column {
    bottom: 0;
    height: var(--office-mobile-drawer-height);
    max-height: calc(100dvh - 100px);
    min-height: 0;
    padding: 0 8px env(safe-area-inset-bottom, 0px);
    overflow: visible;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -4px 16px rgb(var(--app-primary-rgb) / .06);
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel > header {
    position: absolute;
    top: -52px;
    left: 4px;
    right: auto;
    z-index: 3;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel-heading {
    display: none;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel-toggle {
    position: relative;
    isolation: isolate;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel-toggle::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: -1;
    border-radius: 50%;
    background: rgb(255 255 255 / .92);
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-panel-toggle span { display: none; }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-mobile-library-close-icon {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
  .office-collection-page .office-sandbox-page[data-mobile-control-dragging="true"] .office-object-panel-toggle { visibility: hidden; }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab svg {
    display: none;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab::before {
    display: block;
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  .office-collection-page .office-object-tab span {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tabs {
    width: 100%;
    min-height: 58px;
    padding: 6px 0 8px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(44px, 52px);
    justify-content: start;
    gap: 3px;
    overflow-x: auto;
    border-bottom: 0;
    background: transparent;
    scrollbar-width: none;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab {
    min-height: 44px;
    position: relative;
    padding: 0 2px;
    gap: 0;
    font-size: 13px;
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab.is-phase-muted::after {
    top: calc(50% + 3px); left: calc(50% + 5px);
  }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 3px; left: 50%;
    width: 14px; height: 2px;
    border-radius: 1px;
    background: var(--app-primary);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-catalog {
    padding: 0 2px 8px;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .office-collection-page .office-object-subnav {
    top: 0;
    margin: 0 0 6px;
    padding: 0;
    gap: 4px;
    background: #fff;
    border-bottom: 0;
  }
  .office-collection-page .office-object-subnav-link {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .office-collection-page .office-object-grid,
  .office-collection-page .office-my-items-list.is-card-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, var(--office-mobile-card-height));
    grid-auto-flow: column;
    grid-auto-columns: 88px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x pinch-zoom;
  }
  .office-collection-page .office-object-grid::-webkit-scrollbar,
  .office-collection-page .office-my-items-list.is-card-grid::-webkit-scrollbar { display: none; }
  .office-collection-page .office-object-card[data-office-object]:not(:disabled),
  .office-collection-page .office-role-card:not(:disabled),
  .office-collection-page .office-my-item-card-button:not(:disabled) {
    touch-action: none;
    -webkit-touch-callout: none;
  }
  .office-collection-page :where(.office-object-panel) .office-object-runtime-item {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    scroll-snap-align: start;
    border: 0;
    border-radius: 8px;
    background: #f4f7f6;
    box-shadow: none;
  }
  .office-collection-page :where(.office-object-panel) .office-object-card {
    padding: 6px 4px 4px;
    grid-template-rows: minmax(0, 1fr) 28px;
    gap: 2px;
  }
  .office-collection-page :where(.office-object-panel) .office-object-card-label {
    height: 28px;
    white-space: normal;
    overflow-wrap: anywhere;
    font: 500 12px/14px var(--office-interface-font);
  }
  .office-collection-page :where(.office-object-panel) .office-object-five-phases,
  .office-collection-page :where(.office-object-panel) .office-object-card > small { display: none; }
  .office-collection-page .office-role-card .office-object-add-button {
    width: 30px;
    height: 22px;
  }
  .office-collection-page .office-role-card .office-object-add-button > .office-role-card-quantity {
    width: 28px;
    height: 18px;
    font-size: 10px;
  }
  .office-collection-page .office-my-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .office-collection-page .office-my-items-controls {
    display: block;
    min-width: 0;
    min-height: 44px;
  }
  .office-collection-page .office-my-items-heading { order: 1; margin: 0; padding: 0; border: 0; }
  .office-collection-page .office-my-items-heading button { min-height: 44px; white-space: nowrap; }
  .office-collection-page .office-my-items-heading:not(:has(button)),
  .office-collection-page .office-my-items-heading strong,
  .office-collection-page .office-my-items-heading span,
  .office-collection-page .office-my-item-location { display: none; }
  .office-collection-page .office-my-items-list { grid-column: 1 / -1; }
  .office-collection-page .office-my-items-list.is-card-grid .office-my-items-empty { grid-column: 1 / 5; grid-row: 1 / 3; }
  .office-collection-page .office-my-items-list.is-direction-summary { max-height: calc(var(--office-mobile-drawer-height) - 104px); overflow-y: auto; }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-next {
    width: 100%;
    min-height: 48px;
    margin: 0;
  }

  .office-collection-page .office-sandbox-report-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 12px;
    padding-top: 36px;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .office-collection-page .office-sandbox-report-entry-actions {
    justify-content: stretch;
  }

  .office-collection-page .office-sandbox-report-entry-actions > * {
    flex: 1 1 0;
  }

  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-sandbox-report-entry-actions .office-sandbox-next {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
  }

  .office-collection-page .office-sandbox-report-entry-copy h2,
  .office-collection-page .office-sandbox-report-entry-copy > p:not([data-office-report-location-status]) { display: none; }

  /* A closed drawer leaves no competing collapsed bar under the report action. */
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-column.is-mobile-collapsed {
    display: none;
  }

  .office-mobile-actions {
    display: contents;
  }
  .office-mobile-actions button {
    position: fixed;
    z-index: 43;
    bottom: calc(var(--office-mobile-library-space) + 12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 60px;
    height: 60px;
    padding: 4px;
    font: 600 12px/16px var(--office-interface-font);
  }
  .office-mobile-actions [data-mobile-action="report"] { right: 12px; }
  .office-mobile-actions [data-mobile-action="library"] { left: 12px; }
  [data-mobile-library="open"] .office-mobile-actions [data-mobile-action="library"] { display: none; }
  [data-mobile-dragging="true"] .office-mobile-actions { visibility: hidden; }
  .office-mobile-actions img { width: 32px; height: 30px; object-fit: contain; }
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-mobile-actions .office-sandbox-next {
    flex-direction: row;
    gap: 6px;
    width: auto;
    min-width: 128px;
    max-width: calc(100vw - 100px);
    height: 44px;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }
  .office-mobile-actions .office-mobile-next-icon { width: 18px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; order: 1; }
  .office-mobile-actions [data-mobile-action="report"][data-phase="inner"] .office-mobile-next-icon { order: 0; }
  .office-mobile-report-surface {
    display: none;
    position: fixed;
    z-index: 44;
    right: 12px;
    bottom: calc(var(--office-mobile-library-space) + 84px + env(safe-area-inset-bottom, 0px));
    width: min(280px, calc(100% - 24px));
    max-height: calc(100dvh - 160px - var(--office-mobile-library-space));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: var(--app-surface);
    box-shadow: 0 -8px 24px rgb(var(--app-primary-rgb) / .09);
  }
  [data-mobile-panel="report"] .office-mobile-report-surface { display: block; }
  [data-mobile-panel="report"] .office-sandbox-masthead,
  [data-mobile-panel="report"] .office-mobile-actions { visibility: hidden; }
  .office-mobile-report-surface:has(.office-inline-report-region:not([hidden])) {
    inset: 0;
    width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .office-mobile-report-close {
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 -44px auto;
    width: 44px;
    height: 44px;
    font: 28px/1 sans-serif;
  }
  .office-mobile-report-surface:has(.office-report-toolbar) > .office-mobile-report-close { display: none; }
  .office-mobile-report-surface .office-inline-report-region { width: auto; margin: 0 0 16px; }
  .office-mobile-report-surface .office-report-v5[data-chapter-layout="split"] { width: 100%; margin: 0; }
}

@media (max-width: 410px) {
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-toy-island-scene {
    left: calc(50% - 6px);
    width: calc(100vw - 8px);
  }
}

/* Office Step0 owner: workstation-island selection. Shared residential
   method-card rules remain upstream; this scoped block is the only Office
   visual owner for the work-mode state.
   Background/Card/Button portions adapted from animal-island-ui, MIT,
   guokaigdg, revision 29051196bd7586d4484b55431b03178e6046fa64.
   Notice: /assets/licenses/animal-island-ui-MIT.txt. No upstream runtime. */
html:has(.office-collection-page .office-method-page.is-active) {
  scrollbar-gutter: auto;
}

.office-collection-page .office-method-page {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: calc(var(--product-header-height, 72px) + clamp(48px, 10vh, 96px)) clamp(20px, 4vw, 64px) 32px;
  overflow: visible;
  color: var(--office-island-text);
  background: var(--office-island-background);
}

/* The Office surface owns its background, not the legacy fixed gradients. */
.office-collection-page .office-method-page::before,
.office-collection-page .office-method-page::after {
  content: none;
}

.office-collection-page .office-method-page .method-titlebar {
  position: static;
  z-index: 2;
  width: min(100%, 900px);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.office-collection-page .office-method-page .method-titlebar .hero-copy {
  position: static;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.office-collection-page .office-method-page .method-titlebar h1 {
  max-width: none;
  margin: 0;
  color: var(--office-island-text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.office-collection-page .office-method-page .method-subtitle {
  max-width: none;
  margin: 0;
  color: var(--office-island-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.office-collection-page .office-method-page .method-grid {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px);
  max-width: 1160px;
  min-width: 0;
  box-sizing: border-box;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.office-collection-page .office-method-page .office-method-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-areas: "copy" "visual" "state";
  grid-template-rows: auto auto minmax(28px, auto);
  align-content: start;
  gap: 12px;
  padding: 24px;
  overflow: visible;
  cursor: pointer;
}

.office-collection-page .office-method-page .office-method-card::before,
.office-collection-page .office-method-page .office-method-card::after {
  content: none;
}

.office-collection-page .office-method-page .method-card-content {
  grid-area: copy;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 0;
  overflow: visible;
  text-align: center;
}

.office-collection-page .office-method-page .method-card-content h3 {
  margin: 0;
  color: var(--office-island-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  text-shadow: none;
}

.office-collection-page .office-method-page .method-card-content p {
  margin: 0;
  color: var(--office-island-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.office-collection-page .office-method-page .office-method-selected-label {
  grid-area: state;
  position: static;
  justify-self: center;
  min-height: 28px;
  display: inline-flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--app-primary);
  color: var(--app-surface);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

/* Existing hidden label retains the accepted card grid; the raster seal replaces
   its visible pill. aria-pressed continues to own the accessible selected state. */
.office-collection-page .office-method-page .office-method-card.is-selected::after,
.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-card.is-selected::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 48px;
  background: var(--office-choice-seal) center / contain no-repeat;
  pointer-events: none;
}

.office-collection-page .office-method-page .office-method-card.is-selected::after {
  transform: rotate(-30deg);
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-card.is-selected::after {
  top: 10px;
  right: 10px;
  width: 22px;
  height: 32px;
  transform: rotate(-30deg);
}

.office-collection-page .office-method-page .method-card-visual-wrap {
  grid-area: visual;
  display: block;
  position: relative;
  justify-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  overflow: visible;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.office-collection-page .office-method-page .method-card-visual-wrap::before,
.office-collection-page .office-method-page .method-card-visual-wrap::after {
  content: none;
}
.office-collection-page .office-method-page .method-card-visual {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: none;
  opacity: 1;
  filter: none;
  -webkit-mask-image: radial-gradient(ellipse 49% 48% at 50% 52%, #000 0 76%, rgb(0 0 0 / .98) 83%, rgb(0 0 0 / .48) 92%, transparent 100%);
  mask-image: radial-gradient(ellipse 49% 48% at 50% 52%, #000 0 76%, rgb(0 0 0 / .98) 83%, rgb(0 0 0 / .48) 92%, transparent 100%);
}

.office-collection-page .office-method-page .office-method-footer {
  position: relative;
  z-index: 2;
  width: min(100%, 1160px);
  margin: 32px auto 0;
  display: flex;
  justify-content: center;
}

.office-collection-page .office-method-page .office-method-next {
  width: min(100%, 320px);
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  cursor: pointer;
}

.office-collection-page .office-method-page .office-method-next .collection-icon {
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px) and (max-height: 800px) {
  .office-collection-page .office-method-page {
    padding-top: calc(var(--product-header-height, 72px) + 48px);
    padding-bottom: 24px;
  }

  .office-collection-page .office-method-page .method-grid,
  .office-collection-page .office-method-page .office-method-footer {
    margin-top: 24px;
  }
}


@media (width < 1024px) {
  .office-collection-page .office-collection-shell[data-current-stage="step0"] > .product-header { display: none; }

  .office-collection-page .office-method-page {
    padding: 32px 16px calc(96px + env(safe-area-inset-bottom));
  }

  .office-collection-page .office-method-page .method-titlebar h1 {
    font-size: 22px;
  }

  .office-collection-page .office-method-page .method-card-content h3 {
    font-size: 18px;
  }

  .office-collection-page .office-method-page .method-card-content p {
    font-size: 14px;
  }

  .office-collection-page .office-method-page .method-grid {
    width: min(100%, 560px);
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .office-collection-page .office-method-page .office-method-card {
    grid-template-areas: "visual copy";
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 136px;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }

  .office-collection-page .office-method-page .method-card-content {
    justify-items: start;
    text-align: left;
    align-self: center;
    padding-right: 16px;
  }

  .office-collection-page .office-method-page .office-method-selected-label {
    display: none;
  }

  .office-collection-page .office-method-page .office-method-card.is-selected::after {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 36px;
  }

  .office-collection-page .office-method-page .office-method-footer {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    background: var(--app-island-bg, #e7f8f3);
    box-sizing: border-box;
  }

  .office-collection-page .office-method-page .office-method-next {
    width: min(100%, 560px);
  }
}

/* Office sandbox settings overlay owner.
 * Adds only the lightweight HUD entry and modal shell; the toy-island scene,
 * SVG board, object panel and their geometry remain owned by the sandbox blocks above.
 */
body.has-office-settings-modal {
  overflow: hidden;
}

.office-collection-page .office-sandbox-settings-entry {
  position: absolute;
  z-index: 22;
  top: 22px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.office-collection-page .office-sandbox-settings-trigger {
  position: relative;
  width: 80px;
  height: 120px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--office-island-text);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.office-collection-page .office-sandbox-settings-trigger:hover,
.office-collection-page .office-sandbox-settings-trigger:focus-visible,
.office-collection-page .office-sandbox-settings-trigger[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
  filter: none;
}

.office-collection-page .office-sandbox-settings-character {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: transform 120ms ease;
}

.office-collection-page .office-sandbox-settings-character::before {
  position: absolute;
  inset: 0;
  content: '';
  background: transparent url('/assets/img/office/sandbox/settings-hud-v1/malt-texture-round-plaque-v1.png') center / contain no-repeat;
  pointer-events: none;
  transition: filter 120ms ease;
}

.office-collection-page .office-sandbox-settings-trigger:focus-visible .office-sandbox-settings-character {
  outline: 2px solid var(--office-direction-ink);
  outline-offset: 2px;
}

.office-collection-page .office-sandbox-settings-character-image {
  position: absolute;
  z-index: 3;
  /* Align the visible pincers/flippers with the disc, not the alpha canvas. */
  top: -20%;
  right: -2%;
  width: 52%;
  height: 52%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.office-collection-page .office-sandbox-settings-plaque {
  display: none;
}

.office-collection-page .office-sandbox-settings-trigger:hover .office-sandbox-settings-character::before,
.office-collection-page .office-sandbox-settings-trigger:focus-visible .office-sandbox-settings-character::before,
.office-collection-page .office-sandbox-settings-trigger[aria-expanded="true"] .office-sandbox-settings-character::before {
  filter: brightness(1.04);
}

.office-collection-page .office-sandbox-settings-trigger:active .office-sandbox-settings-character {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .office-collection-page .office-sandbox-settings-character,
  .office-collection-page .office-sandbox-settings-character::before,
  .office-collection-page .office-object-subnav-link,
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab {
    transition: none;
  }
  .office-collection-page .office-sandbox-settings-trigger:active .office-sandbox-settings-character,
  .office-collection-page .office-object-subnav-link:active,
  .office-collection-page .office-sandbox-page[data-office-sandbox-shell="toy-island-v2"] .office-object-tab:active { transform: none; }
}

.office-collection-page .office-sandbox-settings-compass-needle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%);
  display: block;
  overflow: visible;
  fill: none;
  background: url('/assets/img/office/sandbox/settings-hud-v1/compass-face-v3.svg') center / contain no-repeat;
  filter: none;
  pointer-events: none;
}

.office-collection-page .office-sandbox-settings-trigger--direction.is-configured
  .office-sandbox-settings-compass-needle-rotor {
  opacity: 1;
}

.office-collection-page .office-sandbox-settings-compass-needle-rotor {
  opacity: 0;
  transform: rotate(var(--office-settings-heading-rotation, 180deg)) scale(.78);
  transform-origin: 50px 50px;
  transition: transform 220ms ease-out;
}

.office-collection-page .office-sandbox-settings-compass-needle-head,
.office-collection-page .office-sandbox-settings-compass-needle-tail {
  fill: #084e5b;
  stroke: none;
  stroke-linejoin: round;
  transform: scaleX(1.8);
  transform-origin: 50px 50px;
}

.office-collection-page .office-sandbox-settings-compass-hub {
  fill: #faf7ec;
  stroke: none;
}

.office-collection-page .office-sandbox-settings-desk-overlay {
  position: absolute;
  z-index: 2;
  /* The shared SVG's (300,300) chair anchor is also the circle center. */
  top: 50%;
  left: 50%;
  width: 38.4%;
  height: 38.4%;
  transform: translate(-50%, -50%);
  display: none;
  place-items: center;
  overflow: visible;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
}

.office-collection-page .office-sandbox-settings-trigger--desk.is-configured
  .office-sandbox-settings-desk-overlay {
  display: grid;
}

.office-collection-page .office-sandbox-settings-desk-overlay img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* V6 artwork occupies the central 288px of its 600px square canvas. */
  width: 208.333333%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
  object-fit: contain;
  /* Simplify only the HUD; the modal keeps the original colors and nine-grid. */
  filter: url('/assets/img/office/sandbox/settings-hud-v1/thumbnail-silhouette-v1.svg#desk-ink');
}

/* Settings modal skin owner. Legacy bearing/desk rules above retain their
 * diagram geometry; this block owns the active modal surfaces and layout.
 * Keep SVG artwork, angle precision, desk values and close/save behavior intact.
 */
.office-collection-page .office-settings-modal-close {
  display: none;
}

.office-collection-page .office-orientation-page.is-settings-modal,
.office-collection-page .office-desk-type-page.is-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  min-height: 100dvh;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(32 56 59 / 32%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-masthead,
.office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-masthead {
  display: none;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content,
.office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-content {
  position: relative;
  width: min(1160px, calc(100vw - 48px));
  min-height: 0;
  max-height: calc(100dvh - 48px);
  margin: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 20px;
  color: var(--office-settings-text, var(--app-text));
  background: var(--office-settings-surface, var(--office-sandbox-control-surface));
  box-shadow: var(--yuanqi-shadow-soft);
  overscroll-behavior: contain;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-settings-modal-close,
.office-collection-page .office-desk-type-page.is-settings-modal .office-settings-modal-close {
  position: relative;
  z-index: 4;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  display: grid;
  place-items: center;
}

.office-collection-page .office-settings-modal-close .collection-icon {
  width: 100%;
  height: 100%;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content > h1,
.office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-content > h1 {
  width: 100%;
  max-width: none;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--office-settings-text, var(--app-text));
  font-family: var(--office-interface-font);
  font-size: var(--office-settings-title-size, 14px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
}

.office-collection-page .office-orientation-page.is-settings-modal,
.office-collection-page .office-desk-type-page.is-settings-modal,
.office-collection-page .office-material-dialog {
  /* Reading ink is distinct from decorative island brown and dial rules. */
  --office-settings-text: #084e5c;
  --office-settings-secondary: #607f87;
  --office-settings-surface: #edfcf7;
  --office-settings-divider: #c2e6df;
  --office-settings-title-size: 22px;
  --office-settings-action-size: 16px;
  --office-settings-action-height: 48px;
}

.office-collection-page .office-orientation-page.is-settings-modal {
  --office-object-column-size: 252px;
  --office-sandbox-rail-width: 100%;
  --office-direction-face: #e7f8f4;
  --office-direction-rim: #d8f4ed;
  --office-direction-ink: #084e5c;
  --office-direction-rule: #badbd7;
  --office-direction-line: #80b7b7;
  --office-direction-divider: var(--office-settings-divider);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace {
  --office-bearing-workspace-gap: 24px;
  --office-bearing-head-title-size: 16px;
  --office-bearing-dial-label-size: 38px;
  width: 100%;
  max-width: none;
  min-height: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--office-bearing-workspace-gap);
  padding: 20px 4px 8px;
  border-top: 1px solid var(--office-direction-divider);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--app-line) transparent;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace > .office-bearing-card--precise,
.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-side,
.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-stack {
  height: auto;
  min-height: 0;
  max-height: none;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-side {
  display: contents;
  width: 100%;
  padding: 0 0 8px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-stack {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: var(--office-bearing-workspace-gap);
  padding-top: 20px;
  border: 0;
  border-top: 1px solid var(--office-direction-divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card,
.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-stack .office-bearing-card--coarse {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content,
.office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-content {
  background-image: none;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--precise {
  display: grid;
  grid-template-columns: 48% minmax(0, 1fr);
  grid-template-rows: auto minmax(88px, 1fr) auto;
  align-content: start;
  padding-bottom: 0;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace > .office-bearing-card--precise:first-child {
  grid-column: 1;
  grid-row: 1;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace > .office-bearing-card--precise:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  padding-left: 24px;
  border-left: 1px solid var(--office-direction-divider);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--coarse + .office-bearing-card--coarse {
  padding-left: 24px;
  border-left: 1px solid var(--office-direction-divider);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  height: auto;
  min-height: 62px;
  flex-shrink: 0;
  padding: 0 0 8px;
  gap: 4px 8px;
  border-bottom: 0;
  background: transparent;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head > div {
  display: contents;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head h2 {
  grid-column: 1;
  grid-row: 1;
  padding-right: 0;
  color: var(--office-settings-text);
  font-family: var(--office-interface-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head p {
  grid-column: 1 / -1;
  grid-row: 2;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head p,
.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout small {
  color: var(--office-settings-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-summary {
  color: var(--office-direction-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji-shell[data-selected-direction=""] .office-bearing-summary {
  color: var(--office-settings-secondary);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-badge {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--office-direction-divider);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-badge--required {
  color: var(--app-primary-dark);
  border-color: #abd9d1;
  background: #dff4ee;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-badge--optional {
  color: var(--office-settings-secondary);
  background: transparent;
}

/* Size the diagram containers uniformly; never squeeze the SVG's height. */
.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-dial-wrap {
  grid-column: 1;
  grid-row: 2 / 4;
  flex: 1 0 auto;
  padding: 0;
  overflow: visible;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-dial-frame {
  width: min(220px, 24dvh, 100%);
  height: auto;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: url('/assets/img/office/sandbox/settings-hud-v1/direction-compass-material-v1.png') center / 110% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 2px rgb(27 108 108 / 16%));
}

/* The material stays fixed; only the existing live ticks and labels rotate. */
.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-vector-layer--compass ellipse,
.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-vector-layer--center > ellipse,
.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-bearing-indicator path {
  display: none;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-vector-layer--compass path {
  stroke: #f7f9e9;
  stroke-width: 2.5px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-vector-layer--compass .office-direction-tick--major {
  stroke: var(--office-direction-ink);
  stroke-width: 5px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-direction-vector-labels text {
  /* Keep each label's radial SVG transform so it turns with the tick ring. */
  letter-spacing: 0;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-direction-vector-name.office-compass-direction-label {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-direction-vector-degree {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-center-forward-label {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  transform: translateY(-20px);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji-sector-label {
  transform: none;
  letter-spacing: 0;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji-sector.is-selected .office-mini-liji-sector-shape {
  fill: #31999e;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji-sector.is-selected .office-mini-liji-sector-label {
  fill: #fff;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji-shell {
  flex: 1 0 auto;
  gap: 4px;
  padding: 0 8px 4px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji {
  --office-mini-liji-name-font: 15px;
  width: min(136px, 100%);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  padding: 0 0 16px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout strong {
  color: var(--office-direction-ink);
  font-family: var(--office-interface-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout small {
  margin-top: 4px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout b {
  color: var(--office-settings-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  padding: 4px 0 24px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row button {
  width: 44px;
  height: 44px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input {
  min-width: 0;
  height: 44px;
  border-radius: 12px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input::-webkit-slider-runnable-track {
  height: 5px;
  border: 0;
  background: var(--office-direction-line);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -10.5px;
  border: 2px solid #209f98;
  background: #f0fdf7;
  box-shadow: 0 2px 2px rgb(16 91 98 / 16%);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input::-moz-range-track {
  height: 5px;
  border: 0;
  background: var(--office-direction-line);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid #209f98;
  background: #f0fdf7;
  box-shadow: 0 2px 2px rgb(16 91 98 / 16%);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-side > .office-sandbox-next {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: center;
  width: min(360px, 100%);
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-workspace {
  width: 100%;
  max-width: none;
  min-height: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--office-settings-divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-panel {
  padding: 4px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--app-line) transparent;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 4px;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-card {
  min-height: 188px;
  padding: 12px;
  gap: 8px;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-copy strong {
  color: inherit;
  font-family: var(--office-interface-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-copy {
  height: auto;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-copy small {
  color: var(--office-settings-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-visual {
  width: min(132px, 100%);
  flex: 0 0 auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-visual img {
  transform: scale(1.3);
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-step-action-rail {
  min-height: 46px;
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
  gap: 0;
  padding-top: 0;
  padding-bottom: 6px;
}

.office-collection-page .office-desk-type-page.is-settings-modal .office-step-action-rail .office-sandbox-next {
  grid-column: 1;
  width: 100%;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-side > .office-sandbox-next,
.office-collection-page .office-desk-type-page.is-settings-modal .office-step-action-rail .office-sandbox-next {
  min-height: var(--office-settings-action-height, 46px);
  margin: 0;
  padding: 12px 20px;
  font-size: var(--office-settings-action-size, 14px);
  font-weight: 700;
  line-height: 1.55;
}

/* Control materials and states are owned by office-controls.css. */

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input:focus-visible {
  outline: none;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input:focus-visible::-webkit-slider-thumb {
  border-width: 4px;
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row input:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 0 0 2px var(--app-primary);
}

.office-collection-page .office-orientation-page.is-settings-modal .office-bearing-side > .office-orientation-hint,
.office-collection-page .office-desk-type-page.is-settings-modal .office-step-action-rail .office-orientation-hint {
  margin: 0;
  color: var(--app-text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-shadow: none;
}


@media (min-width: 1024px) and (max-width: 1100px) {
  .office-collection-page .office-sandbox-settings-trigger {
    height: 108px;
  }
}

@media (width < 1024px) {
  .office-collection-page .office-sandbox-settings-entry {
    top: 12px;
    right: 12px;
    gap: 8px;
  }

  .office-collection-page .office-sandbox-settings-trigger {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .office-collection-page .office-sandbox-settings-character {
    width: 44px;
    height: 44px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal,
  .office-collection-page .office-desk-type-page.is-settings-modal {
    padding: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content,
  .office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-content {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom));
    gap: 8px;
    border: 0;
    border-radius: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content > h1,
  .office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-content > h1 {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0;
    align-self: center;
  }

  .office-collection-page .office-orientation-page.is-settings-modal {
    --office-object-column-size: 100%;
    width: 100vw;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace {
    width: min(100%, 600px);
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 10px 4px 4px;
    justify-self: center;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--precise {
    grid-template-columns: 52% minmax(0, 1fr);
    grid-template-rows: auto minmax(82px, 1fr) auto;
    padding-bottom: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace > .office-bearing-card--precise:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--office-direction-divider);
    border-left: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content,
  .office-collection-page .office-desk-type-page.is-settings-modal .office-sandbox-content {
    padding: 12px 16px calc(82px + env(safe-area-inset-bottom));
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0 0 8px;
    gap: 4px 8px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head h2 {
    font-size: 16px;
    line-height: 1.4;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head p {
    font-size: 12px;
    line-height: 1.4;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-badge {
    padding-inline: 6px;
    height: 20px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-dial-wrap {
    grid-column: 1;
    grid-row: 2 / 4;
    padding: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-dial-frame {
    width: min(180px, 18.5dvh, 100%);
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding: 0 0 8px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout small {
    font-size: 12px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
    padding: 4px 0 18px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-stack {
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 14px;
    padding-top: 10px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--coarse + .office-bearing-card--coarse {
    padding-left: 14px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--coarse .office-bearing-card-head {
    position: relative;
    padding-top: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--coarse .office-bearing-card-head h2 {
    font-size: 14px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--coarse .office-bearing-badge {
    font-size: 11px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji-shell {
    padding: 0 0 4px;
    gap: 2px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji {
    --office-mini-liji-name-font: 16px;
    width: min(126px, 16dvh, 100%);
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-side > .office-sandbox-next,
  .office-collection-page .office-desk-type-page.is-settings-modal .office-step-action-rail {
    position: fixed;
    z-index: 2;
    inset: auto 16px max(16px, env(safe-area-inset-bottom));
    width: calc(100% - 32px);
    max-width: 600px;
    margin-inline: auto;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-workspace {
    --office-desk-choice-height: clamp(106px, calc((100dvh - 204px) / 4), 148px);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    justify-self: center;
    padding-top: 12px;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-panel {
    width: min(100%, 720px);
    justify-self: center;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-grid .office-desk-type-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-card {
    min-height: var(--office-desk-choice-height);
    padding: 8px;
    gap: 4px;
    border-radius: 16px;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-visual {
    width: calc(var(--office-desk-choice-height) - 42px);
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-copy strong {
    font-size: 14px;
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-step-action-rail {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
    background: transparent;
  }
}

@media (min-width: 600px) and (width < 1024px) {
  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-card {
    --office-desk-choice-height: clamp(128px, calc((100dvh - 204px) / 3), 188px);
  }

  .office-collection-page .office-desk-type-page.is-settings-modal .office-desk-type-visual {
    width: min(132px, calc(var(--office-desk-choice-height) - 42px));
  }
}

@media (width < 1024px) and (max-height: 740px) {
  .office-collection-page .office-orientation-page.is-settings-modal .office-sandbox-content {
    padding-top: 8px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    gap: 4px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace {
    gap: 4px;
    padding-top: 6px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace > .office-bearing-card--precise:nth-child(2),
  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-stack {
    padding-top: 8px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card-head {
    padding-bottom: 4px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-card--precise {
    grid-template-rows: auto minmax(58px, 1fr) auto;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-dial-frame {
    width: min(136px, 17dvh, 100%);
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout {
    padding-bottom: 4px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-readout strong {
    font-size: 24px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-slider-row {
    padding-block: 0;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-mini-liji {
    width: 88px;
  }
}

@media (min-width: 1024px) and (max-height: 800px) {
  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-workspace {
    --office-bearing-workspace-gap: 12px;
    padding-top: 10px;
  }

  .office-collection-page .office-orientation-page.is-settings-modal .office-bearing-stack {
    padding-top: 10px;
  }
}


/* End Office sandbox settings overlay owner. */

/* Three.js world geometry and art live in office/three/*.mjs.
 * Its single scene-shell/accessibility owner is office-sandbox-sideview-environment.css. */