* { box-sizing: border-box }
html,body { margin:0; padding:0; background:#f7f7f7; color:#222;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15.5px; line-height:1.55; }
.mono   { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.dim    { color:#666; }
.small  { font-size:.82em; }
.tight  { margin:.3rem 0; padding-left:1.2rem; }
.err    { color:#b00020; }

/* -------- landing overlay -------- */
.overlay { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center;
           padding:2.5rem 1.5rem; background:#f7f7f7; overflow-y:auto; z-index:10; }
.overlay[hidden] { display:none !important; }

.card.landing-card {
  max-width: 980px; width:100%; background:white; padding:2.6rem 3rem;
  border-radius:14px; box-shadow:0 6px 32px rgba(0,0,0,.08); font-size:1.02rem;
}
.landing-card h1 { margin:0 0 1rem; font-size:1.8rem; }
.landing-card h2 { margin:1.6rem 0 .5rem; font-size:1.05rem; text-transform:uppercase;
                    letter-spacing:.05em; color:#3a6ea5; }
.landing-card h3 { margin:1rem 0 .4rem; font-size:1rem; }
.landing-card .lede { font-size:1.08rem; margin:.4rem 0 1.6rem; }
.landing-section { margin:1.4rem 0; }
.landing-section p { margin:.4rem 0; }

.example { margin:1rem 0 1.6rem; padding:.9rem; background:#fafafa;
           border:1px solid #e2e2e2; border-radius:8px; }
.example img { display:block; width:100%; max-width:900px; margin:.4rem auto;
               border-radius:6px; }

.landing-actions { margin-top:2rem; text-align:center; }
.primary.big { padding:.9rem 2.6rem; font-size:1.15rem; border-radius:8px; }

/* -------- header/topbar -------- */
.topbar { display:flex; align-items:center; gap:1rem; padding:.6rem 1.2rem; background:white;
          border-bottom:1px solid #e2e2e2; position:sticky; top:0; z-index:5; }
.progressWrap { flex:1; display:flex; align-items:center; gap:.6rem; max-width:1000px; margin:0 auto; }
.progressLabel { color:#666; text-transform:uppercase; letter-spacing:.06em; }
.progressBar { flex:1; height:8px; background:#e5e5e5; border-radius:4px; overflow:hidden; }
.progressBar > div { height:100%; background:#3a6ea5; width:0%; transition:width .3s; }

main#app { max-width:1400px; margin:1.2rem auto; padding:0 1rem 4rem;
           display:flex; flex-direction:column; gap:1.4rem; }

.image-pane, .form-pane { background:white; padding:1.2rem 1.6rem; border-radius:12px;
                          box-shadow:0 2px 12px rgba(0,0,0,.04); width:100%; }
.form-pane { max-width:1000px; margin:0 auto; }

.clip-meta { display:flex; gap:1rem; margin-bottom:.6rem; font-size:.85rem; align-items:center; }
.savedTag { margin-left:auto; color:#2b7a2b; font-weight:600; }

.image-wrap { width:100%; max-width:1400px; margin:0 auto; background:#000;
              border-radius:8px; overflow:hidden; display:flex; justify-content:center; }
.image-wrap img { max-width:100%; max-height:78vh; display:block; }

/* -------- questions -------- */
.q     { font-weight:600; margin:0 0 .3rem; font-size:1.05rem; }
.qhelp { color:#666; font-size:.9em; margin:.1rem 0 .8rem; }

/* per-color grid */
.colorGrid { display:flex; flex-direction:column; gap:.35rem; }
.colorHeader, .colorRow { display:grid; grid-template-columns: 10rem repeat(3, 1fr); gap:.4rem; align-items:center; }
.colorColHead { font-size:.85em; color:#666; text-align:center; text-transform:uppercase; letter-spacing:.05em; }
.colorRowLabel { font-weight:600; display:flex; align-items:center; gap:.55rem; }
.color-dot { display:inline-block; width:1.05rem; height:1.05rem; border-radius:4px;
             border:1px solid #999; flex-shrink:0; }
.colorCell { padding:.6rem 0; text-align:center; background:#f0f0f0; border:1px solid #d0d0d0;
             border-radius:6px; cursor:pointer; font-family:inherit; font-size:.95rem;
             transition:background .15s,border-color .15s; }
.colorCell:hover { background:#e4e4e4; }
.colorCell.selected           { background:#2b7a2b; color:white; border-color:#1e5a1e; } /* correct */
.colorCell.selected.incorrect { background:#b00020; color:white; border-color:#800017; }
.colorCell.selected.unsure    { background:#6b6b6b; color:white; border-color:#4b4b4b; }

.footerbar { display:flex; align-items:center; gap:1rem; margin-top:1.2rem; }
.primary { padding:.65rem 1.4rem; font-size:1rem; border:0; border-radius:6px;
           background:#3a6ea5; color:white; cursor:pointer; font-family:inherit; }
.primary:disabled { background:#b7c3d0; cursor:not-allowed; }
.primary:not(:disabled):hover { background:#2b5680; }

/* -------- completion / done card -------- */
.done-card { text-align:center; padding:2rem 1rem; }
.done-card h2 { margin:0 0 1rem; font-size:1.8rem; color:#2b7a2b; }
.done-code { display:inline-block; margin:.4rem 0 .8rem; padding:.9rem 1.6rem;
             background:#f4f7fa; border:2px dashed #3a6ea5; border-radius:8px;
             font-family:'JetBrains Mono',ui-monospace,monospace; font-size:1.6rem;
             letter-spacing:.15em; font-weight:700; color:#1e3a5f;
             user-select:all; -webkit-user-select:all; }