:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #283932; background: #f7f6f2; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
button:focus-visible, canvas:focus-visible { outline: 2px solid #758d67; outline-offset: 4px; }
button:disabled { opacity: .4; cursor: default; }
.app-header { padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfdfd6; background: #faf9f6; }
.identity { font-size: 11px; font-weight: 650; letter-spacing: 1.4px; }
.header-divider { color: #b2b6aa; margin: 0 17px; font-weight: 400; }
.project-name { color: #6c746b; letter-spacing: .1px; font-weight: 450; font-size: 13px; }
.guide-caption { font-size: 11px; color: #82907b; }
#viewport { position: absolute; inset: 0; }
#scene { width: 100%; height: 100%; display: block; touch-action: none; }
#loading { position: absolute; top: 50%; width: 100%; text-align: center; color: #667465; font-size: 14px; z-index: 3; padding: 20px; }
#loading.error { color: #a03b2d; background: #f7f6f2; }
#labels { position: absolute; inset: 0; pointer-events: none; }
.view-toolbar { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 5px; border: 1px solid #d6d8ce; border-radius: 8px; background: #fafaf5ed; }
.view-toolbar button { border: 0; background: transparent; color: #687467; font-size: 12px; border-radius: 4px; padding: 10px 15px; white-space: nowrap; }
.view-toolbar button[aria-pressed="true"] { background: #e3e8dc; color: #344b3b; }
.view-toolbar button:not(:disabled):hover { background: #eceee5; }
.studio-footer { position: absolute; left: 27px; right: 27px; display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: #78816f; pointer-events: none; }
.studio-footer > span { display: flex; align-items: center; gap: 7px; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #78915f; flex-shrink: 0; }
.assembly-page { height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.assembly-page .app-header { flex: 0 0 54px; }
.step-heading { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; padding: 22px 34px; background: #faf9f6; border-bottom: 1px solid #dddfd4; }
.step-number { color: #4c654c; display: grid; text-align: center; border-right: 1px solid #d8ddcf; padding-right: 24px; gap: 5px; }
.step-number span { font-size: 9px; letter-spacing: 2px; }
.step-number strong { font: 36px Georgia, serif; }
.step-heading h1 { font: 400 31px/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.7px; margin: 0 0 8px; }
.step-heading p { font-size: 12px; color: #6d7a69; line-height: 1.65; margin: 0; }
.assembly-page .assembly-stage { position: relative; display: block; flex: 1; height: auto; min-height: 180px; background: #efeee7; }
.assembly-page #viewport { overflow: hidden; }
.assembly-page .view-toolbar { bottom: 53px; }
.assembly-page .studio-footer { bottom: 20px; }
.assembly-label { position: absolute; transform: translate(-50%, -50%); text-align: center; padding: 10px 15px; border-radius: 6px; background: #f8f7f0e8; border: 1px solid #cbd4c0; color: #40583f; white-space: nowrap; }
.assembly-label strong { display: block; font: 19px Georgia, serif; }
.assembly-label span { display: block; font-size: 9px; margin-top: 5px; letter-spacing: 1.1px; color: #7f8c76; }
.assembly-label.front { border-color: #c9c7af; color: #6a6544; }
.assembly-label.front span { color: #918b6d; }
.assembly-label.triangle { border-color: #b5bda2; }
.assembly-label.star { border-color: #aabfb9; color: #42615a; }
.assembly-page [hidden] { display: none !important; }
.step-footer { display: flex; justify-content: center; padding: 14px 30px; border-top: 1px solid #d8ddce; font-size: 12px; color: #798271; background: #faf9f6; }
.step-navigation { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 580px); }
.step-navigation button { border: 1px solid #bac5af; background: #faf9f6; color: #40583f; border-radius: 5px; padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.step-navigation #next-step { background: #40583f; color: #fff; border-color: #40583f; }
.step-navigation button:disabled { opacity: .35; cursor: default; }
.step-navigation button:not(:disabled):hover { filter: brightness(.93); }
.step-navigation button:focus-visible { outline: 2px solid #7b945f; outline-offset: 3px; }
#step-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1100px) {
  .gesture-help { display: none !important; }
}
@media (max-width: 760px) {
  .assembly-page .app-header { flex-basis: 48px; padding: 0 18px; }
  .guide-caption { display: none; }
  .header-divider { margin: 0 12px; }
  .step-heading { padding: 17px; gap: 15px; }
  .step-number { padding-right: 15px; }
  .step-heading h1 { font-size: 25px; }
  .step-heading p { font-size: 11px; }
  .assembly-label { padding: 6px 9px; }
  .assembly-label strong { font-size: 14px; }
  .assembly-label span { font-size: 8px; letter-spacing: .4px; }
  .assembly-page .view-toolbar { max-width: calc(100% - 24px); width: max-content; flex-wrap: wrap; justify-content: center; bottom: 47px; }
  .assembly-page .view-toolbar button { font-size: 10px; padding: 10px 7px; }
  .studio-footer { left: 18px; right: 18px; }
  .step-footer { padding: 12px 18px; font-size: 11px; }
  .step-navigation { gap: 12px; }
  .step-navigation button { padding: 10px 18px; }
}