:root {
  --ui-scale: 1.2;
  --void: #0a0a0a;
  --card: #161616;
  --raised: #232323;
  --raised-hover: #303030;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.26);
  --ink: #f4f4f4;
  --muted: #a0a0a0;
  --active: #f4f4f4;
  --active-ink: #111111;
  --accent: #ff3b24;
  --accent-text: #ff6f5b;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius-card: 0.875rem;
  --radius-group: 0.6875rem;
  --radius-control: 0.5rem;
  --gutter: 0.875rem;
  --dock-item: 2.875rem;
  --compass: 3.75rem;
  --control-height: 1.75rem;
  --z-labels: 1;
  --z-floating: 2;
  --z-toast: 3;
  --z-tip: 4;
  color-scheme: dark;
  font-size: calc(16px * var(--ui-scale));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; touch-action: manipulation; }
body {
  font: 0.75rem/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--void);
  color: var(--ink);
  display: grid;
  gap: 0.375rem 0.5rem;
  padding: 0.25rem 0.5rem;
  grid-template: 2.25rem minmax(0, 1fr) 1.125rem / minmax(0, 1fr) 16.5rem;
  grid-template-areas: "top top" "view panel" "status status";
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  height: var(--control-height);
  padding: 0 0.625rem;
  cursor: default;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: transform 140ms var(--ease-out);
}
button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  button:hover:not(.on) { background: var(--raised-hover); }
}
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .snap:has(input:focus-visible), .prompt-text:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 1px;
}
button.on { background: var(--active); color: var(--active-ink); }
button.on kbd { color: var(--active-ink); }
button[aria-disabled="true"] { color: var(--muted); opacity: 0.5; }
[data-icon] { display: inline-flex; flex: none; }
.icon { display: block; width: 1.25rem; height: 1.25rem; }
kbd { font: 0.6875rem "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--muted); margin-left: 0.125rem; }

h2, summary {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.625rem;
}
input[type="number"], .name, select {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  height: var(--control-height);
  width: 5.75rem;
}
input[type="number"], .name { padding: 0 0.5rem; user-select: text; -webkit-user-select: text; }
select { padding: 0 0.25rem; }
input[type="range"] { width: 5.75rem; accent-color: var(--ink); }
input[type="checkbox"] { accent-color: var(--ink); }
.toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2rem;
  height: 1.125rem;
  margin: 0;
  border-radius: 0.5625rem;
  border: 1px solid var(--line-strong);
  background: transparent;
}
.toggle::after {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--muted);
}
.toggle:checked { background: var(--active); border-color: var(--active); }
.toggle:checked::after { left: 1rem; background: var(--active-ink); }

.top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  overflow: hidden;
}
.logo { display: block; flex: none; width: auto; height: 1.1875rem; margin-left: 0.375rem; }
.name { width: 7.375rem; border-color: transparent; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .name:hover { border-color: var(--line); }
}
.group { display: flex; gap: 1px; align-items: center; }
.flat { padding: 0 0.5rem; color: var(--ink); }
.flat .icon { width: 1rem; height: 1rem; }
.square { width: 1.75rem; padding: 0; border-color: var(--line); }
.flat.square { border-color: transparent; }
.square .icon { width: 1.0625rem; height: 1.0625rem; }
.ref-open {
  margin-left: auto;
  background: var(--active);
  color: var(--active-ink);
  font-weight: 500;
  padding: 0 0.75rem 0 0.5625rem;
}
.ref-open .icon { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .ref-open:hover:not(.on) { background: #ffffff; }
}
.ref-open.on { box-shadow: 0 0 0 0.125rem var(--void), 0 0 0 0.1875rem var(--active); }

.seg { display: inline-flex; gap: 1px; padding: 0.125rem; border: 1px solid var(--line); border-radius: var(--radius-control); }
.seg button { height: 1.375rem; padding: 0 0.5625rem; border-radius: 0.3125rem; }
.seg .square { width: 1.5rem; padding: 0; border-color: transparent; }

.view {
  grid-area: view;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
  container-type: inline-size;
}
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.marquee {
  display: none;
  position: absolute;
  border: 1px solid var(--accent);
  background: rgba(255, 59, 36, 0.08);
  pointer-events: none;
}
.gizmo-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: var(--z-labels); }
.gizmo-labels span {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 1.0625rem;
  padding: 1px 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.3125rem;
  background: var(--void);
  color: var(--ink);
  font-size: 0.625rem;
  font-weight: 500;
  text-align: center;
}

.floating { position: absolute; z-index: var(--z-floating); }
.view-left { left: 0.625rem; top: 0.625rem; background: var(--raised); border-color: transparent; border-radius: var(--radius-group); padding: 0.1875rem; }
.view-left button { height: 1.5rem; border-radius: var(--radius-control); }
.view-right {
  right: 0.625rem;
  top: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.875rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-group);
  background: var(--raised);
}
.snap { display: flex; align-items: center; gap: 0.25rem; color: var(--muted); }
.snap input { position: absolute; opacity: 0; width: 0; height: 0; }
.snap .icon { width: 0.9375rem; height: 0.9375rem; }
.snap:has(input:checked) { color: var(--active-ink); background: var(--active); border-radius: 0.3125rem; padding: 1px 0.375rem 1px 0.25rem; margin-left: -0.25rem; }
.step { display: flex; align-items: center; gap: 0.25rem; color: var(--muted); }
.step input { width: 3.125rem; height: 1.375rem; padding: 0 0.3125rem; }
#snapAngle { width: 2.75rem; }
.center-btn { height: 1.375rem; padding: 0 0.375rem 0 0.25rem; margin-left: 0.125rem; border-color: var(--line); border-radius: 0.3125rem; }
.center-btn .icon { width: 0.9375rem; height: 0.9375rem; }
@container (max-width: 35rem) {
  .view-right { top: 3.875rem; }
}

.rail {
  left: 0.625rem;
  top: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.1875rem;
  border-radius: var(--radius-group);
  background: var(--raised);
}
.rail button, .dock button {
  flex-direction: column;
  gap: 0.125rem;
  flex: none;
  width: var(--dock-item);
  height: 2.75rem;
  padding: 0;
}
.cap { font-size: 0.625rem; line-height: 1.1; color: inherit; }

.dock {
  left: 0.625rem;
  bottom: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.1875rem 0;
  max-width: calc(100% - var(--compass) - 1.875rem);
  padding: 0.1875rem;
  border-radius: var(--radius-group);
  background: var(--raised);
}
.dock-group { display: flex; gap: 1px; padding: 0 0.25rem; border-left: 1px solid var(--line); }
.dock-group:first-child { border-left: 0; padding-left: 0; }
.dock-group:last-child { padding-right: 0; }
.dock-break { display: none; flex-basis: 100%; height: 0; }
.dock button.pressed { border-color: var(--line-strong); }
@container (max-width: 38.75rem) {
  .dock button { width: 2.75rem; }
}
@container (max-width: 55rem) {
  .dock-break { display: block; }
  .dock-break ~ .dock-group:not([hidden]):not(.dock-break ~ .dock-group:not([hidden]) ~ *) { border-left: 0; padding-left: 0; }
}

.nav-pad {
  right: 0.625rem;
  bottom: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.nav-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.1875rem;
  border-radius: var(--radius-group);
  background: var(--raised);
}
.nav-stack button { width: 2.375rem; height: 2.125rem; padding: 0; }
.nav-stack .icon { width: 1.0625rem; height: 1.0625rem; }
.nav-drag { touch-action: none; }
.compass {
  position: relative;
  width: var(--compass);
  height: var(--compass);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
}
.compass .icon { width: 1.625rem; height: 1.625rem; }
.needle { position: absolute; inset: 0; pointer-events: none; }
.needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.3125rem;
  margin-left: -0.1875rem;
  border: 0.1875rem solid transparent;
  border-bottom: 0.3125rem solid var(--ink);
  border-top: 0;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 4.25rem;
  z-index: var(--z-toast);
  transform: translateX(-50%);
  max-width: calc(100% - 2.5rem);
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--void);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.toast.error { color: var(--accent-text); }

.tip {
  position: fixed;
  z-index: var(--z-tip);
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--void);
  color: var(--ink);
  font-size: 0.6875rem;
  white-space: nowrap;
  pointer-events: none;
}
.tip kbd { margin-left: 0.5rem; }

.panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--raised) transparent; }
.panel section, .block { padding: var(--gutter); border-top: 1px solid var(--line); }
.panel-scroll > section:first-child { border-top: 0; }
.block > summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  cursor: default;
}
.block > summary::-webkit-details-marker { display: none; }
.block[open] > summary { margin-bottom: 0.625rem; }
.chev .icon { width: 0.8125rem; height: 0.8125rem; color: var(--muted); }
details[open] > summary > .chev { transform: rotate(90deg); }
.sub-block { margin: 0.625rem 0 0; padding: 0; border: 0; }

.counts { padding-bottom: 0.75rem; }
.counts-label { font-weight: 500; }
.big {
  display: block;
  margin: 0.125rem 0 0.5rem -0.125rem;
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.counts p { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.counts .picked { margin-top: 0.375rem; }
.counts .picked.has { color: var(--accent-text); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.875rem; }
.row > span { color: var(--muted); }
.selection .seg { display: flex; }
.selection .seg button { flex: 1; }
.selection .row { margin-top: 0.25rem; }
.align-row + .align-row { margin-top: 0.25rem; }
.align-row > span { width: 0.75rem; }
.align-row .seg { margin-right: auto; }
.ref-part { display: flex; align-items: center; gap: 0.5rem; min-height: 1.875rem; margin-top: 0.375rem; }
.ref-part i { width: 0.6875rem; height: 0.6875rem; border-radius: 0.1875rem; flex: none; }
.note { color: var(--muted); line-height: 1.45; margin: 0; user-select: text; -webkit-user-select: text; text-wrap: pretty; }
.note.warn { color: var(--accent-text); margin-top: 0.5rem; }
.wide, .apply, .pair button, .ref-count + .note + button { border-color: var(--line); }
.wide, .apply { width: 100%; }
.wide { margin-bottom: 0.25rem; }
.apply { margin-top: 0.5rem; }
#options > button:not(.ref-build) { width: 100%; margin-bottom: 0.25rem; border-color: var(--line); }
.sub-block button { border-color: var(--line); width: 100%; margin-top: 0.375rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; margin-top: 0.375rem; }
.pair .icon, .wide .icon, .apply .icon { width: 0.9375rem; height: 0.9375rem; }
.check {
  justify-content: space-between;
  width: 100%;
  height: 1.625rem;
  padding: 0 0.375rem;
  color: var(--muted);
}
.check.bad { color: var(--ink); }
.check.bad b { color: var(--accent-text); }
.check b { font-weight: 500; font-variant-numeric: tabular-nums; }
button.check.on { background: rgba(255, 59, 36, 0.16); color: var(--ink); }
.state { margin-left: auto; font-weight: 400; color: var(--muted); }
.state.ok { color: var(--ink); }
.state.bad { color: var(--accent-text); }

.ref-thumb { display: block; width: 100%; aspect-ratio: 2; object-fit: contain; background: #ffffff; border-radius: var(--radius-control); margin: 0.5rem 0; }
.ref-cell { display: grid; grid-template-columns: 1fr 5.75rem; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0 0.375rem; margin: 0 -0.375rem; border-radius: var(--radius-control); color: var(--muted); }
.ref-cell.on { background: var(--raised); color: var(--ink); }
.ref-count { display: flex; justify-content: space-between; margin-top: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.ref-count b { font-weight: 500; color: var(--ink); }
.ref-build { width: 100%; margin-top: 0.5rem; background: var(--active); color: var(--active-ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .ref-build:hover:not(.on) { background: #ffffff; }
}

.prompt { flex: none; }
.panel .prompt { padding: 0.75rem var(--gutter) var(--gutter); }
.prompt h2 { margin-bottom: 0.375rem; }
.prompt-text {
  margin: 0;
  max-height: 6.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--raised) transparent;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.4;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}

.status {
  grid-area: status;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 0 0.375rem;
  color: var(--muted);
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
}
#hint { overflow: hidden; text-overflow: ellipsis; }
.nav-hint.touch { display: none; }

@media (pointer: coarse) {
  :root { --ui-scale: 1; --dock-item: 3.125rem; --control-height: 2.75rem; --compass: 4.25rem; }
  body { grid-template: 2.875rem minmax(0, 1fr) 1.125rem / minmax(0, 1fr) 17.5rem; grid-template-areas: "top top" "view panel" "status status"; }
  .flat.square, .square { width: 2.75rem; }
  .rail button, .dock button { height: 3.125rem; }
  .seg button, .view-left button { height: 2.5rem; min-width: 2.5rem; }
  .seg .square { width: 2.5rem; }
  .view-right { height: 2.875rem; }
  .step input { height: 2.25rem; }
  .center-btn { height: 2.25rem; }
  .rail { top: 4.125rem; }
  .nav-stack button { width: 2.75rem; height: 2.75rem; }
  .row { min-height: 2.875rem; }
  .check { height: 2.75rem; }
  .ref-cell { min-height: 2.875rem; }
  .toggle { width: 2.625rem; height: 1.625rem; border-radius: 0.8125rem; }
  .toggle::after { width: 1.125rem; height: 1.125rem; left: 0.1875rem; top: 0.1875rem; }
  .toggle:checked::after { left: 1.1875rem; }
  .nav-hint.mouse { display: none; }
  .nav-hint.touch { display: inline; }
  .toast { bottom: 4.75rem; }
}
@container (max-width: 55rem) { .toast { bottom: 8rem; } }

/* A narrow view gives the tools its whole width and lifts the camera buttons above them. */
@container (max-width: 30rem) {
  .dock { max-width: calc(100% - 1.25rem); }
  .nav-pad { bottom: 7.9375rem; }
  .toast { bottom: 8rem; }
}
@media (max-width: 1040px) {
  .top { gap: 0.375rem; }
  .name { width: 5.25rem; }
  .flat { padding: 0 0.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active { transform: none; }
}