:root {
  color-scheme: dark;
  --ink: #001824;
  --paper: #f5f6f5;
  --line: rgba(255, 255, 255, 0.78);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #05090b; }
body { font-family: "Avenir Next", "Noto Sans SC", "PingFang SC", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

#app {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.75);
}

.screen { position: relative; min-height: 100dvh; animation: reveal .5s ease both; }
.art-screen { background: center top / 100% 100% no-repeat; }
.art-screen img { width: 100%; min-height: 100dvh; display: block; object-fit: fill; }
.hotspot { position: absolute; border: 0; background: transparent; color: transparent; }
.home-start { left: 21%; right: 21%; bottom: 7%; height: 8%; }

.language {
  position: absolute; z-index: 4; top: max(18px, env(safe-area-inset-top)); right: 7%;
  width: 46px; height: 46px; border: 2px solid white; border-radius: 50%;
  background: rgba(0, 0, 0, .08); color: white; font-size: 20px;
}

.directory { min-height: 100dvh; padding-bottom: 34px; background: var(--ink); color: white; }
.checkpoint-card {
  position: relative; display: grid; place-items: center; width: 100%; height: clamp(118px, 24.5dvh, 148px);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.7); color: white;
  background-image: linear-gradient(rgba(0,0,0,.56), rgba(0,0,0,.56)), var(--cover);
  background-size: cover; background-position: var(--position); overflow: hidden;
}
.checkpoint-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 55%); }
.checkpoint-card strong { position: relative; z-index: 1; font-size: clamp(20px, 5.2vw, 28px); letter-spacing: .06em; }
.checkpoint-card.done .done-icon { display: grid; }
.done-icon {
  display: none; position: absolute; z-index: 2; top: 24%; width: 28px; height: 28px;
  border: 2px solid white; border-radius: 50%; place-items: center; font-size: 18px;
}
.directory-copy { padding: 28px 25px 12px; font-size: 18px; line-height: 1.5; letter-spacing: .03em; }
.progress-button, .primary-button {
  display: block; width: calc(100% - 80px); min-height: 56px; margin: 22px auto 0;
  border: 4px double rgba(255,255,255,.85); background: #edf0f1; color: #080a0b;
  font-size: 23px; font-weight: 700; letter-spacing: .04em;
}

.task { min-height: 100dvh; color: white; background: var(--ink); }
.task-hero {
  position: relative; height: 42dvh; min-height: 300px; padding: 84px 34px 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-image: linear-gradient(180deg, rgba(0,24,36,.55), rgba(0,24,36,.98)), var(--cover);
  background-size: cover; background-position: var(--position);
}
.back-button {
  position: absolute; z-index: 4; top: max(24px, env(safe-area-inset-top)); left: 24px;
  width: 44px; height: 44px; border: 2px solid white; border-radius: 50%; color: white;
  background: rgba(0,0,0,.18); font-size: 28px; line-height: 1;
}
.task-kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.task h1 { margin: 0; font-size: clamp(29px, 8vw, 38px); line-height: 1.15; }
.task-body { padding: 36px 34px; }
.task-instruction { margin: 0; font-size: 20px; line-height: 1.75; }
.task-logo { margin: 54px 0 14px; text-align: center; font: italic 800 26px "Avenir Next", sans-serif; letter-spacing: -.03em; }
.upload-label { display: block; }
.task-note { margin: 18px auto 0; text-align: center; color: rgba(255,255,255,.5); font-size: 12px; }

.camera { min-height: 100dvh; padding: 105px 22px 40px; background: #d3d3d3; }
.camera-frame {
  position: relative; aspect-ratio: .8; border: 3px solid #111; background: #fff;
  padding: 34px; display: grid; place-items: center;
}
.camera-frame img { width: 100%; height: 100%; object-fit: contain; background: #e5e8ea; }
.camera .primary-button { margin-top: 110px; }

.status-screen { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 28px; background: var(--ink); color: white; }
.status-screen h1 { margin: 0; font-size: 37px; line-height: 1.5; }
.dots { display: flex; justify-content: center; gap: 24px; margin-top: 22px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: white; animation: pulse 1s infinite alternate; }
.dots i:nth-child(2) { animation-delay: .2s; }.dots i:nth-child(3) { animation-delay: .4s; }
.result-actions { position: absolute; left: 0; right: 0; bottom: 9%; }
.result-actions .primary-button { color: #111; }
.secondary-button { margin-top: 16px; border: 0; background: transparent; color: rgba(255,255,255,.7); text-decoration: underline; }
.demo-badge { position: absolute; top: 18px; left: 18px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.65); font-size: 10px; letter-spacing: .08em; }
.error-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(86%, 360px); padding: 13px 16px; background: #fff; color: #111; text-align: center; z-index: 9; }
.visually-hidden { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@keyframes reveal { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
@keyframes pulse { to { opacity: .22; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }