:root {
  color-scheme: light;
  --bg: #f5f6f2;
  --panel: #ffffff;
  --ink: #1d232d;
  --muted: #667085;
  --line: #d9ded8;
  --soft: #ebeee8;
  --accent: #256f74;
  --accent-strong: #174e53;
  --good: #1f7a4d;
  --bad: #b42318;
  --warning: #a15c00;
  --shadow: 0 18px 45px rgb(29 35 45 / 10%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  min-height: 42px;
  padding: 0 14px;
}

button:hover:not(:disabled) {
  border-color: #9aa7a7;
}

button:focus-visible {
  outline: 3px solid rgb(37 111 116 / 26%);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

.primary:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.app-shell {
  width: min(1500px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.eyebrow,
.step-kicker {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 0.95;
  margin-bottom: 0;
}

h2 {
  font-size: 1.12rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.solver-pill {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.status-dot {
  background: var(--warning);
  border-radius: 50%;
  display: block;
  height: 10px;
  width: 10px;
}

.solver-pill[data-ready="true"] .status-dot {
  background: var(--good);
}

.workspace {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 220px minmax(380px, 1fr) minmax(420px, 0.9fr);
}

.workspace > * {
  min-width: 0;
}

.face-rail,
.camera-panel,
.review-panel,
.solution-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.face-rail {
  padding: 14px;
  position: sticky;
  top: 16px;
}

.rail-heading,
.panel-head,
.solution-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.rail-heading {
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 12px;
}

.rail-heading strong {
  color: var(--ink);
}

.face-list {
  display: grid;
  gap: 8px;
}

.face-step {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 30px 1fr;
  min-height: 58px;
  padding: 8px;
  text-align: left;
}

.face-step span {
  align-items: center;
  background: var(--soft);
  border-radius: 8px;
  display: flex;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.face-step em {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-style: normal;
  margin-top: 1px;
}

.face-step[data-active="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(37 111 116 / 14%);
}

.face-step[data-done="true"] span {
  background: #dff1e6;
  color: var(--good);
}

.camera-panel,
.review-panel {
  padding: 16px;
}

.camera-stage {
  aspect-ratio: 4 / 3;
  background: #111827;
  border-radius: 8px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

#camera {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.camera-stage[data-mirrored="true"] #camera {
  transform: scaleX(-1);
}

.camera-placeholder {
  align-items: center;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  padding: 22px;
  position: absolute;
  text-align: center;
  z-index: 2;
}

.camera-placeholder strong {
  background: rgb(17 24 39 / 82%);
  border-radius: 6px;
  font-size: 1.3rem;
  padding: 4px 8px;
}

.camera-placeholder span {
  background: rgb(17 24 39 / 82%);
  border-radius: 6px;
  color: #cbd5e1;
  line-height: 1.45;
  max-width: 360px;
  padding: 4px 8px;
}

.target-square {
  aspect-ratio: 1;
  border: 2px solid rgb(255 255 255 / 84%);
  box-shadow: 0 0 0 999px rgb(0 0 0 / 18%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 32px);
  width: 68%;
  z-index: 1;
}

.target-square span {
  border: 1px solid rgb(255 255 255 / 50%);
  position: relative;
}

.target-square span::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
}

.capture-copy {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 14px;
}

.camera-tools {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: 150px 150px 1fr;
  margin-top: 12px;
}

.toggle-button {
  font-weight: 800;
}

.toggle-button[aria-pressed="true"] {
  background: #e5f3f4;
  border-color: var(--accent);
  color: var(--accent-strong);
}

.turn-card {
  align-items: center;
  background: #fff8d7;
  border: 1px solid #eadc92;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 8px 10px;
}

.turn-card strong {
  font-size: 0.86rem;
}

.turn-card span {
  color: #695616;
  font-size: 0.88rem;
  line-height: 1.32;
}

.capture-meter {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  line-height: 1.35;
  margin-top: 10px;
  min-height: 46px;
  padding: 8px 10px;
}

.capture-meter span {
  color: var(--muted);
  text-align: right;
}

.capture-meter.good {
  background: #e7f5ec;
  border-color: #bfe2cb;
  color: #185b39;
}

.capture-meter.good span {
  color: #256347;
}

.capture-copy p:last-child {
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 0;
  max-width: 620px;
}

.reference-hold {
  display: grid;
  flex: 0 0 172px;
  gap: 8px;
}

.reference-chip {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-height: 48px;
  padding: 7px;
}

.reference-chip span {
  border: 1px solid rgb(0 0 0 / 14%);
  border-radius: 6px;
  height: 30px;
  width: 30px;
}

.reference-chip small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.panel-head {
  margin-bottom: 12px;
}

.palette {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 14px;
}

.palette-item {
  align-content: center;
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 78px;
  padding: 7px 4px;
}

.palette-item span {
  background: var(--swatch);
  border: 1px solid rgb(0 0 0 / 16%);
  border-radius: 6px;
  display: block;
  height: 26px;
  width: 38px;
}

.palette-item small {
  color: var(--muted);
  font-size: 0.72rem;
}

.palette-item[data-active="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(37 111 116 / 14%);
}

.cube-net {
  display: grid;
  gap: 8px;
  grid-template-areas:
    ". U . ."
    "L F R B"
    ". D . .";
  grid-template-columns: repeat(4, minmax(70px, 1fr));
}

.net-face {
  min-width: 0;
}

.area-U {
  grid-area: U;
}

.area-R {
  grid-area: R;
}

.area-F {
  grid-area: F;
}

.area-D {
  grid-area: D;
}

.area-L {
  grid-area: L;
}

.area-B {
  grid-area: B;
}

.net-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 4px;
  text-align: center;
}

.sticker-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sticker {
  aspect-ratio: 1;
  border-color: rgb(0 0 0 / 18%);
  border-radius: 6px;
  font-size: clamp(0.58rem, 0.95vw, 0.78rem);
  font-weight: 900;
  min-height: 0;
  padding: 0;
}

.sticker[data-center="true"] {
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 68%);
  cursor: default;
}

.sticker[data-empty="true"] {
  background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 5px, #e1e5e8 5px, #e1e5e8 10px) !important;
}

.sticker[data-low="true"] {
  outline: 3px solid #111827;
  outline-offset: 2px;
}

.validation {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.42;
  margin-top: 14px;
  min-height: 54px;
  padding: 12px;
}

.validation.good {
  background: #e7f5ec;
  border-color: #bfe2cb;
  color: #185b39;
}

.validation.bad {
  background: #fff0ed;
  border-color: #f4c7c0;
  color: var(--bad);
}

.validation ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.validation-note {
  margin: 8px 0 0;
}

.solution-panel {
  margin-top: 16px;
  padding: 16px;
}

.move-count {
  background: var(--soft);
  border-radius: 999px;
  font-weight: 800;
  padding: 8px 12px;
}

.hold-banner {
  align-items: center;
  background: #fff8d7;
  border: 1px solid #eadc92;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
}

.hold-banner span {
  border: 1px solid rgb(0 0 0 / 16%);
  border-radius: 6px;
  height: 24px;
  width: 34px;
}

.move-stage {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: 140px 1fr 140px;
  margin-top: 14px;
}

.move-card {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 190px;
  padding: 22px;
  text-align: center;
}

.move-face {
  align-items: center;
  background: var(--ink);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: clamp(2.8rem, 8vw, 5.8rem);
  font-weight: 950;
  height: 112px;
  justify-content: center;
  line-height: 1;
  min-width: 140px;
  padding: 0 20px;
}

.move-card strong {
  font-size: 1.35rem;
}

.move-card p {
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 0;
  max-width: 560px;
}

.simulator-panel {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.7fr) minmax(280px, 1fr);
  margin-top: 18px;
}

.simulator-copy p:last-child {
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 0;
}

.cube-scene {
  align-items: center;
  background: #f7f8f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  height: 320px;
  justify-content: center;
  overflow: hidden;
  perspective: 950px;
}

.sim-cube {
  align-items: center;
  display: flex;
  height: min(300px, 100%);
  justify-content: center;
  position: relative;
  width: min(330px, 100%);
}

.sim-cube-svg {
  display: block;
  height: min(300px, 100%);
  max-width: 100%;
  overflow: visible;
  width: min(330px, 100%);
}

.sim-cube-svg polygon {
  shape-rendering: geometricPrecision;
}

.sim-cube-svg polygon[data-kind="body"] {
  stroke: #0b1220;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sim-cube-svg polygon[data-kind="sticker"] {
  stroke: #111827;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sim-cube-svg polygon[data-layer="true"] {
  filter: drop-shadow(0 0 5px rgb(37 111 116 / 58%));
  stroke: #eaffff;
  stroke-width: 3;
}

.sim-move-badge rect {
  fill: rgb(17 24 39 / 84%);
  stroke: rgb(255 255 255 / 78%);
  stroke-width: 1.5;
}

.sim-move-badge text {
  fill: #fff;
  font-size: 0.95rem;
  font-weight: 950;
}

.sim-face {
  --cube-size: min(190px, 48vw);
  background: #111827;
  border: 2px solid #111827;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  height: var(--cube-size);
  padding: 6px;
  position: absolute;
  transform-style: preserve-3d;
  width: var(--cube-size);
}

.sim-face::before {
  background: rgb(17 24 39 / 78%);
  border-radius: 999px;
  color: #fff;
  content: attr(data-label);
  font-size: 0.78rem;
  font-weight: 900;
  left: 8px;
  padding: 3px 7px;
  position: absolute;
  top: 8px;
  z-index: 2;
}

.sim-face[data-active="true"] {
  box-shadow: 0 0 0 5px rgb(37 111 116 / 72%);
}

.sim-face[data-face="F"] {
  transform: translateZ(calc(var(--cube-size) / 2));
}

.sim-face[data-face="B"] {
  transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));
}

.sim-face[data-face="R"] {
  transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
}

.sim-face[data-face="L"] {
  transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));
}

.sim-face[data-face="U"] {
  transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2));
}

.sim-face[data-face="D"] {
  transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2));
}

.sim-sticker {
  border: 1px solid rgb(0 0 0 / 22%);
  border-radius: 4px;
  display: block;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.sim-sticker[data-layer="true"] {
  box-shadow: inset 0 0 0 4px rgb(17 24 39 / 56%), 0 0 0 2px rgb(255 255 255 / 68%);
  transform: translateZ(4px);
}

.turn-overlay {
  align-items: center;
  background: rgb(17 24 39 / 72%);
  border: 2px solid rgb(255 255 255 / 82%);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 950;
  height: 82px;
  justify-content: center;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(3px);
  width: 82px;
  z-index: 3;
}

.move-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.move-chip {
  font-weight: 800;
  min-height: 36px;
  min-width: 48px;
  padding: 0 10px;
}

.move-chip[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.move-chip[data-done="true"] {
  background: #e7f5ec;
  border-color: #bfe2cb;
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 190px minmax(340px, 1fr);
  }

  .review-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    width: min(calc(100vw - 20px), 720px);
    padding-top: 12px;
  }

  .topbar,
  .capture-copy,
  .solution-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .face-rail {
    position: static;
  }

  .face-list {
    grid-template-columns: 1fr;
  }

  .reference-hold {
    flex-basis: auto;
    grid-template-columns: 1fr;
  }

  .camera-tools {
    grid-template-columns: 1fr;
  }

  .capture-meter {
    align-items: flex-start;
    flex-direction: column;
  }

  .capture-meter span {
    text-align: left;
  }

  .palette {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cube-net {
    grid-template-columns: repeat(4, minmax(54px, 1fr));
  }

  .move-stage {
    grid-template-columns: 1fr;
  }

  .simulator-panel {
    grid-template-columns: 1fr;
  }

  .cube-scene {
    height: 280px;
  }

  .button-row button {
    flex: 1 1 100%;
  }

  .move-stage button {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}