@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  font-family: "DM Sans", sans-serif;
  background: #0c111b;
  color: #f2f4f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --muted: #8d98aa;
  --line: rgba(179, 194, 215, .13);
  --panel: #151c29;
  --green: #c9f36a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(80, 107, 63, .22), transparent 48%),
    #0c111b;
}

button, select { font: inherit; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.topbar {
  height: 72px;
  padding: 0 max(28px, calc((100% - 1160px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; gap: 10px; align-items: center; color: #f6f7fa; text-decoration: none; font: 700 20px "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--green); color: #151a16; font-size: 19px; }
.brand-dot { color: var(--green); }
.top-note { display: inline-flex; align-items: center; gap: 9px; color: #a9b3c2; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(201, 243, 106, .8); }

main { max-width: 1160px; margin: 0 auto; padding: 70px 28px 30px; }
.intro { max-width: 660px; margin-bottom: 43px; }
.eyebrow { margin: 0 0 11px; color: var(--green); font: 500 10px "DM Mono", monospace; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 15px; font: 600 clamp(44px, 6vw, 68px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.065em; }
h1 span { color: var(--green); }
.intro-copy { max-width: 560px; margin-bottom: 25px; color: #a4afc0; font-size: 15px; line-height: 1.7; }
.intro-tags { display: flex; gap: 26px; flex-wrap: wrap; color: #687486; font: 10px "DM Mono", monospace; letter-spacing: .06em; }
.intro-tags b { margin-left: 7px; color: #d7dce5; font: 500 11px "DM Sans", sans-serif; letter-spacing: 0; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); gap: 18px; align-items: stretch; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(24, 32, 46, .98), rgba(17, 24, 36, .98)); box-shadow: 0 18px 50px rgba(0, 0, 0, .16); }
.camera-panel, .preview-panel { padding: 23px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.panel-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }
h2 { margin: 0; font: 600 20px "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.step-count, .move-total { color: #b6c0cd; font: 11px "DM Mono", monospace; }

.camera-stage { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: radial-gradient(ellipse at 50% 40%, #273142, #101722 72%); }
.camera-stage video { display: none; width: 100%; height: 100%; object-fit: cover; }
.camera-stage.is-live video { display: block; }
.camera-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.camera-stage.is-live .camera-empty { display: none; }
.camera-icon { margin-bottom: 3px; color: var(--green); font-size: 36px; line-height: 1; }
.camera-empty strong { font-size: 13px; font-weight: 600; }
.camera-empty span { color: var(--muted); font-size: 11px; }
.scan-guide { display: none; position: absolute; height: 82%; aspect-ratio: 1; pointer-events: none; border: 1px solid rgba(201,243,106,.8); background: linear-gradient(to right, transparent 32.9%, rgba(201,243,106,.55) 33.1%, rgba(201,243,106,.55) 33.5%, transparent 33.7%, transparent 66.2%, rgba(201,243,106,.55) 66.4%, rgba(201,243,106,.55) 66.8%, transparent 67%), linear-gradient(to bottom, transparent 32.9%, rgba(201,243,106,.55) 33.1%, rgba(201,243,106,.55) 33.5%, transparent 33.7%, transparent 66.2%, rgba(201,243,106,.55) 66.4%, rgba(201,243,106,.55) 66.8%, transparent 67%); box-shadow: 0 0 0 999px rgba(8, 12, 19, .16); }
.camera-stage.is-live .scan-guide { display: grid; }
.scan-guide i { display: none; }
.guide-label { position: absolute; left: 50%; top: -25px; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 4px; background: rgba(11, 16, 24, .8); color: var(--green); font: 9px "DM Mono", monospace; }

.camera-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: 14px; }
.face-select-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.camera-controls select { min-width: 0; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #101722; color: #e6ebf2; font-size: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 39px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; transition: .18s ease; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button-primary { background: var(--green); color: #151a16; }
.button-primary:not(:disabled):hover { background: #d8ff7c; transform: translateY(-1px); }
.button-secondary { border-color: var(--line); background: rgba(255,255,255,.035); color: #e5e9f0; }
.button-secondary:not(:disabled):hover { border-color: rgba(201,243,106,.55); }
.camera-status, .solve-status { min-height: 17px; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.camera-status.error, .solve-status.error { color: #ff9a92; }
.scan-help { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; color: #adb7c5; font-size: 11px; line-height: 1.65; }
.scan-help summary { color: #e1e6ed; cursor: pointer; font-weight: 600; }
.scan-help ol { margin: 9px 0 0; padding-left: 18px; }
.scan-help li + li { margin-top: 5px; }

.text-button { padding: 6px 0; border: 0; background: transparent; color: #9da8b7; cursor: pointer; font-size: 10px; }
.text-button:hover { color: var(--green); }
.cube-net-wrap { display: flex; min-height: 258px; align-items: center; justify-content: center; padding: 10px 0 13px; }
.cube-net { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 7px; width: min(100%, 340px); }
.face { min-width: 0; }
.face[data-face="white"] { grid-column: 2; grid-row: 1; }
.face[data-face="orange"] { grid-column: 1; grid-row: 2; }
.face[data-face="green"] { grid-column: 2; grid-row: 2; }
.face[data-face="red"] { grid-column: 3; grid-row: 2; }
.face[data-face="blue"] { grid-column: 4; grid-row: 2; }
.face[data-face="yellow"] { grid-column: 2; grid-row: 3; }
.face-caption { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #95a0b0; font: 9px "DM Mono", monospace; }
.face-center-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--face-color); }
.stickers { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 3px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(5,9,15,.55); }
.sticker { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgba(0,0,0,.24); border-radius: 3px; background: #303949; cursor: pointer; transition: transform .12s, filter .12s; }
.sticker:not(:disabled):hover { z-index: 1; transform: scale(1.12); filter: brightness(1.15); }
.sticker:disabled { cursor: default; }
.face-color-name { display: none; }
.hint { margin: 0 0 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.color-counts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.color-count { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 27px; border: 1px solid var(--line); border-radius: 6px; color: #afb8c6; font: 9px "DM Mono", monospace; }
.color-count-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--color); }
.color-count.invalid { border-color: rgba(255,154,146,.4); color: #ffaaa3; }
.solve-button { width: 100%; min-height: 42px; font-size: 12px; }
.solve-button span { font-size: 15px; }
.solve-status { text-align: center; }

.solution-panel { margin-top: 18px; padding: 24px; }
.solution-intro { margin: 0 0 16px; color: #abb5c3; font-size: 12px; }
.moves { display: flex; flex-wrap: wrap; gap: 7px; }
.move { display: grid; place-items: center; min-width: 39px; height: 39px; padding: 0 8px; border: 1px solid rgba(201,243,106,.23); border-radius: 7px; background: rgba(201,243,106,.07); color: var(--green); font: 500 15px "DM Mono", monospace; }
.notation-note { margin: 17px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 2px 0; color: #718094; font-size: 10px; }
footer a { color: #aab4c2; text-decoration: none; }
footer a:hover { color: var(--green); }

@media (max-width: 800px) {
  main { padding-top: 51px; }
  .workspace { grid-template-columns: 1fr; }
  .camera-stage { aspect-ratio: 4 / 3; }
  .cube-net-wrap { min-height: 0; padding-top: 6px; }
}

@media (max-width: 480px) {
  .topbar { height: 62px; padding: 0 18px; }
  .top-note { font-size: 10px; }
  main { padding: 43px 16px 24px; }
  .intro-tags { gap: 12px; }
  .intro-tags b { font-size: 10px; }
  .camera-panel, .preview-panel, .solution-panel { padding: 17px; }
  .camera-controls { grid-template-columns: 1fr 1fr; }
  .camera-controls select { grid-column: 1; grid-row: 2; }
  .camera-controls .button-primary { grid-column: 2; grid-row: 2; }
  .color-counts { gap: 4px; }
  .color-count { gap: 3px; font-size: 8px; }
  footer { flex-direction: column; gap: 8px; }
}