body {
  background: radial-gradient(circle at 82% 8%, rgba(127,75,230,.27), transparent 34%), radial-gradient(circle at 12% 28%, rgba(55,111,232,.20), transparent 36%), linear-gradient(155deg, #060919 0%, #0b1026 46%, #160d2d 100%) !important;
  background-attachment: fixed !important;
}
html, body { max-width:100%; overflow-x:hidden; }
.expect-icon { font-size: 1.2rem !important; }
.body-guide { position:absolute; inset:0; z-index:3; pointer-events:none; display:grid; place-items:center; padding:18px; }
.body-guide-frame { position:relative; width:min(46%,300px); height:90%; border:3px dashed rgba(72,232,177,.9); border-radius:46% 46% 24% 24% / 15% 15% 10% 10%; filter:drop-shadow(0 0 12px rgba(55,222,167,.28)); }
.body-guide-frame::before { content:''; position:absolute; left:50%; top:4%; width:28%; aspect-ratio:1; border:3px solid rgba(72,232,177,.9); border-radius:50%; transform:translateX(-50%); background:rgba(4,12,22,.08); }
.body-guide-frame span { position:absolute; left:50%; bottom:3%; transform:translateX(-50%); white-space:nowrap; padding:7px 10px; border-radius:999px; background:rgba(4,10,22,.78); color:#baf6df; font-size:.75rem; font-weight:800; }
#photoCanvas:not([hidden]) + .body-guide { display:none; }
.empty-state { z-index:2; padding-top:52px; }
.stage video { position:relative; z-index:1; }
@media (max-width:520px) { .body-guide-frame { width:58%; height:88%; } .body-guide-frame span { font-size:.68rem; } }

.empty-state[hidden], .body-guide[hidden], .stage video[hidden], .stage canvas[hidden] { display:none !important; }

@media (max-width:720px) {
  .shell { width:min(100% - 12px, 980px); padding-top:10px; }
  .topbar { padding:0 4px; }
  .topbar .logo { max-width:135px; height:34px; }
  .hero { padding:28px 8px 12px; }
  .hero h1 { font-size:clamp(2.35rem,13vw,3.7rem); }
  .card { padding:12px; border-radius:18px; }
  .stage { min-height:0; height:auto; aspect-ratio:3/4; max-height:none; border-radius:15px; }
  .stage video, .stage canvas { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; }
  .body-guide { padding:12px; }
  .body-guide-frame { width:56%; height:91%; }
  .empty-state { padding:20px; justify-content:flex-end; padding-bottom:74px; }
  .empty-state strong { font-size:1rem; }
  .empty-state span { font-size:.86rem; }
  .capture-card { min-width:0; overflow:hidden; }
  .controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; min-width:0; }
  .controls > * { width:100%; max-width:100%; min-width:0; min-height:52px; display:flex; align-items:center; justify-content:center; padding:10px 6px; font-size:.8rem; white-space:normal; overflow-wrap:anywhere; text-align:center; }
  .controls input[hidden] { display:none !important; }
  .primary { grid-column:1/-1; }
  .expect-grid { grid-template-columns:1fr; }
  .photo-guide { padding:14px; }
}

@media (max-width:380px) {
  .mainBrand { font-size:25px; }
  .controls { grid-template-columns:1fr; }
  .primary { grid-column:auto; }
  .body-guide-frame span { font-size:.62rem; }
}