@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");
  /* ---- one signature element: the percentile readout. everything else quiet ---- */
  :root {
    color-scheme: light;
    --bg: #fffdf7;
    --surface: #ffffff;
    --ink: #416451;
    --muted: #718878;
    --rule: #d8ead8;
    --mark: #62a777;
    --band: #f6c95d;
    --warn: #c96f85;
    --green: #bfe3bd;
    --green-deep: #5e9e72;
    --yellow: #ffe58c;
    --pink: #f7c3cf;
    --pink-deep: #c86f86;
    --cream: #fff8df;
    --radius: 24px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 "Nunito Sans", "Avenir Next", ui-rounded, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 0 20px 72px;
  }
  .wrap { max-width: 1160px; margin: 0 auto; }
  .site-gate {
    min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 24px 0;
  }
  .site-gate-card {
    width: min(100%, 440px); background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 24px;
  }
  .site-gate-card h1 { margin-bottom: 9px; }
  header { padding: 56px 0 28px; border-bottom: 1px solid var(--rule); }
  h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
  .sub { color: var(--muted); font-size: 14px; margin: 0; max-width: 52ch; }
  .mono { font-family: Georgia, "Times New Roman", serif; }
  .num { font-variant-numeric: tabular-nums; }

  section { padding: 28px 0; border-bottom: 1px solid var(--rule); }
  h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
       color: var(--muted); margin: 0 0 14px; }
  p { margin: 0 0 12px; }
  p:last-child { margin-bottom: 0; }
  .note { color: var(--muted); font-size: 13.5px; }

  /* uploader */
  .drop {
    border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--surface);
    padding: 26px 20px; text-align: center; transition: border-color .15s, background .15s;
  }
  .drop.over { border-color: var(--mark); }
  .drop p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
  .selected-photo {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    max-width: 650px; margin: 20px auto 0; padding: 12px; text-align: left;
    border: 1px solid var(--rule); border-radius: 20px; background: #fff;
  }
  .selected-photo img { width: 72px; height: 72px; border-radius: 15px; object-fit: cover; background: var(--cream); }
  .selected-photo strong, .selected-photo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .selected-photo span { color: var(--muted); font-size: 12px; }
  .selected-photo button:disabled { cursor: wait; opacity: .62; transform: none; }
  button, .filebtn {
    font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 8px 15px; cursor: pointer;
  }
  button:hover, .filebtn:hover { border-color: var(--mark); }
  :focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
  input[type=file]:not(.native-file-picker) { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .native-file-picker {
    position: static; width: min(100%, 390px); height: auto; opacity: 1;
    color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
  }
  .native-file-picker::file-selector-button {
    margin-right: 12px; padding: 11px 20px; cursor: pointer;
    color: #52735d; background: var(--yellow); border: 0; border-radius: 999px;
    box-shadow: 0 6px 0 #efd06e; font: inherit; font-weight: 800;
  }
  .native-file-picker:hover::file-selector-button { background: #ffdb63; }
  /* model picker: the ensemble and the distilled student, side by side */
  .models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
  .model-choice {
    display: block; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  }
  .model-choice:hover { border-color: var(--mark); }
  .model-choice.on { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
  .model-choice .row { display: flex; align-items: baseline; gap: 7px; }
  .model-choice input { margin: 0; }
  .model-choice b { font-weight: 600; font-size: 14px; }
  .model-choice .sub2 { display: block; color: var(--muted); font-size: 12.5px; margin-top: 5px; }
  .chip {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; white-space: nowrap;
  }
  .chip.exp { color: var(--warn); border-color: var(--warn); }
  .model-detail { margin: 0 0 14px; }
  .model-detail .msg { border-left-color: var(--warn); }
  .model-detail h4 { margin: 12px 0 3px; font-size: 13px; font-weight: 600; }
  .model-detail h4:first-of-type { margin-top: 10px; }
  .model-detail p { font-size: 13px; color: var(--muted); }
  .context-compare {
    margin: 0 0 14px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
  .context-compare.off { opacity: .5; }
  .context-compare summary { padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600; }
  .context-compare[open] summary { border-bottom: 1px solid var(--rule); }
  .context-controls { padding: 14px; }
  .college-search {
    width: 100%; margin: 8px 0; padding: 8px 10px; font: inherit; color: var(--ink);
    background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  }
  .college-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px;
    max-height: 190px; overflow-y: auto; padding: 8px 2px; border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .college-choice { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 13px; }
  .college-choice span { overflow-wrap: anywhere; }
  .college-choice.muted { display: none; }
  .selection-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
  .plot-mode { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; }
  .plot-mode label { display: flex; align-items: center; gap: 6px; }

  /* the readout */
  .readout { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
  .headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pct { font-size: 46px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
  .pctlabel { color: var(--muted); font-size: 13.5px; }
  .scale { margin: 26px 0 8px; }
  .track { position: relative; height: 34px; }
  .axis { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--rule); }
  .bandbar {
    position: absolute; top: 10px; height: 12px; background: var(--band); opacity: .22;
    border-radius: 1px;
  }
  .tick { position: absolute; top: 4px; width: 2px; height: 24px; background: var(--mark); }
  /* each ensemble member, drawn on the same axis so the disagreement is visible */
  .member { position: absolute; top: 7px; width: 2px; height: 30px; border-radius: 999px;
    background: var(--mark); opacity: .48; }
  .folds { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
  .folds table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .folds th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px;
              letter-spacing: .05em; text-transform: uppercase; padding: 0 0 6px; }
  .folds td { padding: 4px 0; border-top: 1px solid var(--rule); }
  .folds td.r { text-align: right; }
  .folds .dim { color: var(--muted); }
  .ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
  .bandline { color: var(--muted); font-size: 13.5px; margin-top: 14px; }
  .bandline b { color: var(--ink); font-weight: 600; }
  .meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
          color: var(--muted); font-size: 12.5px; }
  .meta div { margin-bottom: 3px; word-break: break-word; }
  .college-comparison {
    margin-top: 20px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 18px;
  }
  .college-comparison h3 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
  .college-plot-card + .college-plot-card { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
  .plot-shell { width: 100%; overflow-x: auto; margin-top: 12px; }
  .college-plot { display: block; width: 100%; min-width: 600px; height: auto; }
  .plot-legend { color: var(--muted); font-size: 12px; margin-top: 8px; }

  .msg { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--warn);
         border-radius: var(--radius); padding: 16px 18px; font-size: 14px; }
  .msg h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
  #validatedRegions .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  }
  #validatedRegions .section-head h2 { margin: 0; }
  .validated-link { white-space: nowrap; font-size: 13.5px; }
  .validated-counts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin: 15px 0 16px;
  }
  .validated-count {
    border-top: 2px solid var(--mark); background: var(--surface); padding: 9px 10px;
  }
  .validated-count strong { display: block; font-size: 22px; font-weight: 500; line-height: 1.15; }
  .validated-count span { color: var(--muted); font-size: 12px; }

  /* Review-style cards: the percentile is the headline, the shares sit under it. */
  .vgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px;
  }
  .vcard {
    margin: 0; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); overflow: hidden;
  }
  .vcard img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
  .vcard figcaption { padding: 9px 11px 11px; }
  .vcard-region {
    margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--mark);
  }
  .vcard-pct { margin: 0; font-size: 12.5px; color: var(--muted); }
  .vcard-pct b { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
  .vcard-meta { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
  #validatedRegions .note { margin-top: 14px; }

  .region-attribution {
    margin-top: 16px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 16px 18px;
  }
  .region-attribution .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
  }
  .region-attribution h3 { margin: 0; font-size: 14px; font-weight: 600; }
  .ra-rows { display: grid; gap: 9px; }
  .ra-row {
    display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px;
    font-size: 13px;
  }
  .ra-name { font-weight: 600; text-transform: capitalize; }
  .ra-track {
    position: relative; height: 8px; background: var(--bg); border: 1px solid var(--rule);
    border-radius: 999px; overflow: hidden;
  }
  .ra-fill { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
  .ra-row.is-validated .ra-fill { background: var(--mark); }
  .ra-cut {
    position: absolute; top: -3px; bottom: -3px; left: 75%; width: 1px;
    background: var(--rule-strong, var(--muted)); opacity: .8;
  }
  .ra-value { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
  .ra-value b { color: var(--ink); }
  .ra-tag {
    display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .04em; color: var(--mark);
  }
  .ra-why { grid-column: 2 / -1; margin: -3px 0 0; font-size: 11.5px; color: var(--muted); }
  #raScope { margin: 13px 0 0; }
  @media (max-width: 560px) {
    .ra-row { grid-template-columns: 1fr auto; }
    .ra-track { grid-column: 1 / -1; order: 3; }
    .ra-why { grid-column: 1 / -1; }
  }

  /* An optional coaching note, not a second readout: same surface as the panels
     above, but prose rather than numbers, and never any measurement chrome. */
  .photo-feedback {
    margin-top: 16px; background: var(--surface); border: 1px solid var(--rule);
    border-left: 3px solid var(--mark); border-radius: var(--radius); padding: 16px 18px;
  }
  .photo-feedback h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
  .pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  #pfText { margin: 0; font-size: 14px; line-height: 1.62; white-space: pre-wrap; }
  @media (max-width: 560px) {
    .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #validatedRegions .section-head { display: block; }
    .validated-link { display: inline-block; margin-top: 4px; }
  }
  .hidden { display: none !important; }
  .spin { color: var(--muted); font-size: 14px; }
  dl { margin: 0; }
  dt { font-weight: 600; font-size: 13.5px; margin-top: 12px; }
  dt:first-child { margin-top: 0; }
  dd { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
  video { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); }
  .gate {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 20px;
  }
  .gate-row { display: flex; gap: 8px; margin-top: 15px; }
  .gate-row input {
    min-width: 0; flex: 1; font: inherit; color: var(--ink); background: var(--bg);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px;
  }
  .gate-error { color: var(--warn); font-size: 13px; margin-top: 10px; }
  .gated-content { display: grid; gap: 26px; }
  .context-note { border-left-color: var(--mark); }
  .demo-video h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
  .demo-video p { margin-top: 8px; }
  .methods {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  }
  .methods summary {
    padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
  }
  .methods[open] summary { border-bottom: 1px solid var(--rule); }
  .methods-body { padding: 18px; }
  .methods-body > p:first-child { font-size: 14px; }
  .method-section { margin-top: 24px; }
  .method-section:first-of-type { margin-top: 20px; }
  .method-section h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
  .method-section p { font-size: 13.5px; }
  .equation {
    overflow-x: auto; margin: 12px 0; padding: 12px 14px; background: var(--bg);
    border-left: 2px solid var(--rule); color: var(--ink); text-align: center;
  }
  .equation math {
    display: inline-block; min-width: max-content;
    font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem;
  }
  .where {
    color: var(--muted); font-size: 12.5px !important; margin-top: -5px !important;
  }
  .gallery { display: grid; gap: 24px; }
  .sheet { margin: 0; }
  .sheet-frame {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    overflow: auto;
  }
  .sheet img { display: block; width: 100%; height: auto; }
  .sheet figcaption { margin-top: 9px; color: var(--muted); font-size: 13px; }
  .sheet figcaption b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
  @media (prefers-reduced-motion: reduce) and (min-width: 821px) {
    * { transition: none !important; animation: none !important; }
  }
  @media (max-width: 520px) {
    .pct { font-size: 38px; } header { padding-top: 36px; }
    .gate-row { align-items: stretch; flex-direction: column; }
    .college-list { grid-template-columns: 1fr; }
    .models { grid-template-columns: 1fr; }
    .validated-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ── CWUPID PRODUCT UI ────────────────────────────────────────────────── */
  html { scroll-behavior: smooth; background: #fffdf7; }
  body { min-height: 100vh; padding: 0 22px 72px; overflow-x: hidden; }
  body::before, body::after {
    content: ""; position: fixed; z-index: -1; border-radius: 999px; filter: blur(2px);
    pointer-events: none;
  }
  body::before { width: 340px; height: 340px; top: -120px; right: -90px; background: #ffeaa3; opacity: .58; }
  body::after { width: 300px; height: 300px; bottom: -110px; left: -80px; background: #f8cbd5; opacity: .55; }
  a { color: var(--green-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  h1, h2, h3, .brand, .bubble, .pct { font-family: "Fredoka", "Avenir Next Rounded", ui-rounded, sans-serif; }
  h1 { font-size: clamp(2.6rem, 7vw, 5.9rem); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
  h2 { color: var(--green-deep); font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.12;
    letter-spacing: -.02em; text-transform: none; }
  h3 { color: var(--ink); }
  section { border: 0; padding: 28px 0; }
  .sub { font-size: 1rem; line-height: 1.55; }
  .note { color: var(--muted); }
  .mono { font-family: "Nunito Sans", "Avenir Next", sans-serif; }

  .site-gate { min-height: 100vh; padding: 28px 0; }
  .site-gate-card {
    position: relative; width: min(100%, 580px); overflow: hidden; text-align: center;
    border: 0; border-radius: 38px; padding: clamp(34px, 8vw, 68px);
    background: linear-gradient(145deg, #fff 0 48%, #fff8d8 100%);
    box-shadow: 0 24px 70px rgba(91, 139, 103, .15);
  }
  .site-gate-card::before, .site-gate-card::after {
    content: ""; position: absolute; border-radius: 999px; z-index: 0;
  }
  .site-gate-card::before { width: 140px; height: 140px; top: -50px; right: -35px; background: var(--pink); }
  .site-gate-card::after { width: 110px; height: 110px; bottom: -45px; left: -25px; background: var(--green); }
  .site-gate-card > * { position: relative; z-index: 1; }
  .site-gate-card h1 { color: var(--pink-deep); font-size: clamp(2.4rem, 9vw, 4.6rem); }
  .site-gate-card .sub { margin: 0 auto 22px; }
  .gate-row { justify-content: center; }
  .gate-row input, .college-search {
    color: var(--ink); background: #fff; border: 2px solid var(--rule); border-radius: 999px;
    padding: 12px 16px;
  }

  button, .filebtn {
    font-family: "Nunito Sans", sans-serif; font-weight: 800; color: #52735d;
    background: var(--yellow); border: 0; border-radius: 999px; padding: 11px 20px;
    box-shadow: 0 6px 0 #efd06e; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  button:hover, .filebtn:hover { border: 0; background: #ffdb63; transform: translateY(-2px); box-shadow: 0 8px 0 #efd06e; }
  button:active, .filebtn:active { transform: translateY(2px); box-shadow: 0 3px 0 #efd06e; }
  :focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 4px; }

  .app-header {
    position: sticky; top: 14px; z-index: 20; margin: 14px 0 34px; padding: 10px 12px 10px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: rgba(255,255,255,.91); border: 1px solid rgba(191,227,189,.8);
    border-radius: 999px; box-shadow: 0 10px 35px rgba(92, 143, 105, .11); backdrop-filter: blur(16px);
  }
  .brand { color: var(--pink-deep); font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; }
  .site-nav { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
  .site-nav button { color: var(--muted); background: transparent; box-shadow: none; padding: 8px 14px; }
  .site-nav button:hover { color: var(--green-deep); background: #edf8ec; box-shadow: none; transform: none; }
  .site-nav button[aria-current="page"] { color: #fff; background: var(--green-deep); box-shadow: none; }
  .account-entry { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
  .app-launch { text-decoration: none; white-space: nowrap; background: var(--green-deep); color: #fff; }
  .account-button { flex: 0 0 auto; white-space: nowrap; background: #f5b8c8; color: #fff; box-shadow: none; }
  .account-button:hover { background: #eea9bc; box-shadow: none; }
  .account-button.account-signin { color: var(--green-deep); background: #edf8ec; }
  .account-button.account-signin:hover { background: #dff1dd; }
  .account-button.has-user { padding-left: 9px; background: #edf8ec; color: var(--green-deep); }
  .account-button-avatar, .account-avatar {
    display: inline-block; border-radius: 50%; background: var(--green); object-fit: cover; vertical-align: middle;
  }
  .account-button-avatar { width: 26px; height: 26px; margin-right: 7px; }
  .account-dialog {
    width: min(calc(100% - 30px), 470px); padding: 0; overflow: hidden; color: var(--ink);
    border: 0; border-radius: 32px; background: #fff; box-shadow: 0 28px 90px rgba(65,100,81,.25);
  }
  .account-dialog::backdrop { background: rgba(48,72,58,.35); backdrop-filter: blur(5px); }
  .account-dialog-inner { position: relative; padding: 34px; }
  .account-dialog h2 { margin: 0 40px 8px 0; color: var(--green-deep); font-size: 1.9rem; }
  .account-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; padding: 0;
    color: var(--muted); background: #edf8ec; box-shadow: none; font-size: 1.2rem; }
  .account-close:hover { background: #dff1dd; box-shadow: none; }
  .account-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 48px 24px 0;
    padding: 5px; border-radius: 999px; background: #edf8ec; }
  .account-mode-switch button { color: var(--muted); background: transparent; box-shadow: none; }
  .account-mode-switch button[aria-pressed="true"] { color: #fff; background: var(--green-deep); box-shadow: none; }
  .account-mode-switch button:hover { box-shadow: none; }
  .password-form { display: grid; gap: 12px; margin-top: 22px; }
  .password-field { display: grid; gap: 5px; color: var(--ink); font-size: .82rem; font-weight: 800; }
  .password-field input {
    width: 100%; padding: 12px 15px; color: var(--ink); background: #fff;
    border: 2px solid var(--rule); border-radius: 16px; font: inherit;
  }
  .password-field input:focus { border-color: var(--green-deep); }
  .password-submit { width: 100%; margin-top: 4px; }
  .password-submit:disabled { cursor: wait; opacity: .62; transform: none; }
  .password-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: .82rem; }
  .password-status.is-error { color: #a14d62; }
  .account-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: var(--muted); font-size: .76rem; }
  .account-divider::before, .account-divider::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
  .provider-list { display: grid; gap: 11px; margin-top: 24px; }
  .provider-button { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 10px;
    padding: 13px 18px; border: 2px solid var(--rule); border-radius: 999px;
    color: var(--ink); background: #fff; font-weight: 800; text-align: center; text-decoration: none; }
  .provider-icon { width: 22px; height: 22px; display: block; }
  .provider-button:hover { border-color: var(--mark); }
  .provider-button.is-disabled { opacity: .42; pointer-events: none; }
  .account-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: .82rem; }
  .account-links a, .site-footer a { color: var(--green-deep); }
  .account-profile { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; margin: 24px 0; }
  .account-avatar { width: 58px; height: 58px; }
  .account-profile strong, .account-profile span { display: block; overflow-wrap: anywhere; }
  .account-profile span { color: var(--muted); font-size: .9rem; }
  .account-status { margin-top: 16px; color: var(--muted); font-size: .86rem; }
  .account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
  .history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
  .history-head h3 { margin: 0; font-size: 1.05rem; }
  .history-list { display: grid; gap: 10px; max-height: 310px; overflow: auto; margin-top: 12px; }
  .history-card { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center;
    padding: 10px; border: 1px solid var(--rule); border-radius: 18px; background: #fffdf7; }
  .history-card img { width: 58px; height: 58px; border-radius: 13px; object-fit: cover; }
  .history-card strong, .history-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .history-card span { color: var(--muted); font-size: .78rem; }
  .history-delete { width: 34px; height: 34px; padding: 0; background: #fbe0e6; color: var(--pink-deep); box-shadow: none; }
  .history-delete:hover { background: #f5b8c8; color: #fff; box-shadow: none; }
  .save-result { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
  .save-result .note { margin: 0; }
  .site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
  .app-view { display: none; animation: viewIn .32s ease both; }
  .app-view.is-active { display: block; }
  @keyframes viewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  .hero {
    position: relative; min-height: min(680px, calc(100vh - 130px)); overflow: hidden;
    display: grid; align-content: center; justify-items: start; padding: clamp(48px, 9vw, 112px);
    border-radius: 48px; background: linear-gradient(140deg, #eef9e8 0 48%, #fff8cf 48% 73%, #fbd4dc 73%);
  }
  .hero-copy { position: relative; z-index: 2; max-width: 820px; }
  .hero h1 { color: #5f9470; max-width: 10ch; margin-bottom: 24px; }
  .hero h1 .bubble-word { display: inline-block; color: #bc6d82; background: #fff; padding: .06em .24em .14em;
    border-radius: 999px; transform: rotate(-2deg); box-shadow: 0 .12em 0 rgba(189,109,130,.15); }
  .hero .sub { max-width: 40ch; font-size: clamp(1.05rem, 2vw, 1.3rem); color: #66806e; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
  .hero-actions button:first-child { background: #f5b8c8; box-shadow: 0 6px 0 #df91a6; color: #fff; }
  .hero-actions button:first-child:hover { background: #eea9bc; box-shadow: 0 8px 0 #df91a6; }
  .hero-bubble { position: absolute; border-radius: 999px; opacity: .9; }
  .hero-bubble.one { width: 150px; height: 150px; right: 8%; top: 12%; background: rgba(255,255,255,.78); }
  .hero-bubble.two { width: 80px; height: 80px; right: 27%; bottom: 13%; background: #b9dfb9; }
  .hero-bubble.three { width: 55px; height: 55px; left: 4%; bottom: 8%; background: #f8bdca; }
  .home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 10px; }
  .home-card { min-height: 180px; padding: 26px; border-radius: 30px; }
  .home-card:nth-child(1) { background: #edf8ec; }
  .home-card:nth-child(2) { background: #fff4c8; }
  .home-card:nth-child(3) { background: #fbe0e6; }
  .home-card .bubble { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 13px;
    margin-bottom: 18px; border-radius: 999px; color: var(--green-deep); background: #fff; }
  .home-card h3 { font-size: 1.22rem; margin: 0 0 7px; }

  .page-intro { padding: 54px 6px 20px; max-width: 700px; }
  .page-intro .eyebrow { display: inline-block; margin-bottom: 12px; padding: 7px 13px; border-radius: 999px;
    color: var(--pink-deep); background: #fbe0e6; font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
  .page-intro h1 { color: var(--green-deep); font-size: clamp(2.6rem, 6vw, 4.8rem); max-width: 12ch; }
  .page-intro .sub { font-size: 1.1rem; }

  #live, #offline, #status, #error, #result, #validatedRegions, #contactSheets, .technical-intro {
    margin: 18px 0 34px; padding: clamp(24px, 4vw, 42px); background: rgba(255,255,255,.94);
    border: 1px solid var(--rule); border-radius: 34px; box-shadow: 0 14px 48px rgba(96,145,107,.09);
  }
  #live h2, #result > h2, #validatedRegions h2, #contactSheets > h2 { margin-bottom: 20px; }
  .drop { border: 2px dashed #a9d3ad; border-radius: 28px; background: #f5fbf2; padding: 42px 22px; }
  .drop.over { border-color: var(--pink-deep); background: #fff6f8; }
  .models { gap: 14px; }
  .model-choice { border: 2px solid var(--rule); border-radius: 24px; padding: 18px; }
  .model-choice:hover { border-color: #a8d5af; }
  .model-choice.on { border-color: var(--pink-deep); box-shadow: 0 0 0 4px #fbe1e7; }
  .chip { border: 0; color: var(--green-deep); background: #e8f6e7; }
  .chip.exp { color: var(--pink-deep); background: #fce8ec; }
  .context-compare, .readout, .college-comparison, .region-attribution, .methods, .msg {
    border: 1px solid var(--rule); border-radius: 24px; background: #fff;
  }
  .context-compare summary, .methods summary { border-radius: 24px; }
  .result-presentation { width: min(100%, 760px); margin: 0 auto; }
  .result-photo-stage {
    position: relative; isolation: isolate; overflow: hidden; width: 100%; margin: 0;
    border-radius: 42px; background: linear-gradient(145deg, #eef8eb, #fff7d8);
    box-shadow: 0 24px 70px rgba(84,132,97,.19), 0 0 0 1px rgba(191,227,189,.85);
  }
  .result-photo-stage img {
    display: block; width: 100%; height: clamp(390px, 58vh, 620px); object-fit: contain;
    background: #f3f8ef;
  }
  .result-photo-stage::after {
    content: ""; position: absolute; z-index: 1; inset: 38% 0 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(40,62,50,.1) 34%, rgba(38,54,45,.42));
  }
  .readout {
    position: relative; overflow: hidden; margin-top: 18px; padding: clamp(24px, 4vw, 38px);
    background: linear-gradient(145deg, #fff 0 62%, #f4faef); transition: background .35s, box-shadow .35s;
  }
  .score-pedestal {
    position: absolute; z-index: 3; inset: 0; isolation: isolate; display: grid; place-items: end center;
    padding: 0 18px clamp(24px, 6vw, 48px); pointer-events: none;
  }
  .score-pedestal::before, .score-pedestal::after {
    content: ""; position: absolute; z-index: -1; border-radius: 999px; pointer-events: none;
  }
  .score-pedestal::before {
    width: min(82vw, 560px); aspect-ratio: 1; bottom: -31%; opacity: .72;
    background: radial-gradient(circle, rgba(247,195,207,.3), rgba(255,229,140,.12) 48%, transparent 70%);
    filter: blur(3px); animation: scoreBreathe 3.8s ease-in-out infinite;
  }
  .score-pedestal::after {
    width: min(56vw, 390px); height: 42px; bottom: 3%; opacity: .55;
    background: radial-gradient(ellipse, rgba(255,255,255,.82), transparent 68%); filter: blur(9px);
  }
  .headline { position: relative; z-index: 2; justify-content: center; align-items: center; flex-direction: column; gap: 8px; text-align: center; }
  .pct {
    color: #fff; font-size: clamp(7rem, 22vw, 13rem); font-weight: 700;
    letter-spacing: -.07em; line-height: .82; transition: color .35s, filter .35s, text-shadow .35s;
    text-shadow: 0 4px 2px rgba(54,74,62,.18), 0 12px 34px rgba(45,61,51,.44);
  }
  .pctlabel { padding: 7px 13px; border-radius: 999px; color: #53705d; background: rgba(255,255,255,.9);
    box-shadow: 0 6px 22px rgba(53,76,60,.16); font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .result-presentation.score-low .score-pedestal::before { opacity: .38; filter: blur(12px) saturate(.65); }
  .result-presentation.score-low .pct { color: #e9f1ea; text-shadow: 0 3px 1px rgba(60,80,66,.28), 0 0 24px rgba(255,255,255,.35); }
  .result-presentation.score-mid .score-pedestal::before {
    opacity: .82; background: radial-gradient(circle at 42% 42%, rgba(255,244,181,.58) 0 7%, transparent 32%),
      radial-gradient(circle at 61% 58%, rgba(247,195,207,.45) 0 8%, transparent 37%),
      radial-gradient(circle, rgba(191,227,189,.28), transparent 66%);
    animation: warmGlow 2.8s ease-in-out infinite alternate;
  }
  .result-presentation.score-fire .readout { box-shadow: inset 0 0 70px rgba(255,184,102,.15), 0 16px 52px rgba(220,126,118,.12); }
  .result-presentation.score-fire .score-pedestal::before {
    opacity: .98; background:
      radial-gradient(ellipse at 32% 68%, rgba(255,91,94,.43) 0 3%, transparent 26%),
      radial-gradient(ellipse at 69% 63%, rgba(255,187,58,.48) 0 4%, transparent 29%),
      radial-gradient(ellipse at 50% 48%, rgba(70,196,230,.3) 0 3%, transparent 34%),
      radial-gradient(circle at 50% 64%, rgba(255,240,177,.38), transparent 58%);
    filter: blur(2px); animation: fireGlow 1.55s ease-in-out infinite alternate;
  }
  .result-presentation.score-fire .pct { color: #fff3d4; text-shadow: 0 0 14px #ff9e58, 0 0 34px rgba(255,93,104,.9), 0 9px 22px rgba(45,61,51,.4); }
  .result-presentation.score-star .readout { background: radial-gradient(circle at 50% 22%, #fffce5, #fff 48%, #f5faef); }
  .result-presentation.score-star .score-pedestal::before {
    opacity: 1; background: radial-gradient(circle, rgba(255,239,137,.65) 0 6%, rgba(255,205,75,.24) 18%, transparent 59%);
    filter: blur(2px); animation: starPulse 1.8s ease-in-out infinite;
  }
  .result-presentation.score-star .pct { color: #fff9c9; text-shadow: 0 0 8px #fff, 0 0 25px #ffd34d, 0 0 58px rgba(255,211,77,.92); }
  .result-presentation.score-galaxy .readout { background: radial-gradient(circle at 50% 19%, #eefaff, #fff 47%, #f2edff 100%); box-shadow: 0 18px 70px rgba(76,164,224,.2); }
  .result-presentation.score-galaxy .score-pedestal::before {
    opacity: 1; background:
      radial-gradient(ellipse at 36% 54%, rgba(41,195,255,.48) 0 4%, transparent 32%),
      radial-gradient(ellipse at 67% 45%, rgba(134,94,255,.42) 0 5%, transparent 36%),
      radial-gradient(ellipse at 52% 68%, rgba(83,229,255,.36) 0 3%, transparent 39%),
      radial-gradient(circle, rgba(222,250,255,.7) 0 3%, rgba(100,151,255,.2) 24%, transparent 63%);
    filter: blur(4px); animation: nebulaDrift 3.6s ease-in-out infinite alternate;
  }
  .result-presentation.score-galaxy .pct {
    color: #dffaff; text-shadow: 0 0 7px #fff, 0 0 24px #29c3ff,
      0 0 55px rgba(73,94,255,.95), 0 0 88px rgba(50,216,255,.72);
  }
  .result-presentation.score-tier-pop .pct { animation: scoreTierPop .42s cubic-bezier(.2,.9,.28,1.35); }
  @keyframes scoreBreathe { 50% { transform: scale(1.08); opacity: .95; } }
  @keyframes warmGlow { to { transform: translate3d(8px,-5px,0) scale(1.07); filter: blur(4px); } }
  @keyframes fireGlow { to { transform: translate3d(-5px,-9px,0) scale(1.1,1.04); filter: blur(5px) saturate(1.15); } }
  @keyframes nebulaDrift { to { transform: translate3d(11px,-8px,0) scale(1.1,1.04); filter: blur(7px) saturate(1.18); } }
  @keyframes starPulse { 50% { transform: scale(1.13); filter: blur(4px); } }
  @keyframes scoreTierPop { 45% { transform: translateY(-9px) scale(1.075); } 100% { transform: none; } }
  .track { height: 44px; }
  .axis { height: 4px; border-radius: 999px; background: #e2efe1; }
  .bandbar { height: 18px; top: 11px; border-radius: 999px; opacity: .65; }
  .tick { width: 4px; height: 30px; border-radius: 999px; background: var(--pink-deep); }
  .result-presentation.score-revealing .scale,
  .result-presentation.score-revealing .bandline {
    opacity: 0; visibility: hidden; transform: translateY(12px);
  }
  .result-presentation.score-bars-revealed .scale,
  .result-presentation.score-bars-revealed .bandline {
    animation: scoreBarsReveal .68s cubic-bezier(.16,.82,.24,1) both;
  }
  @keyframes scoreBarsReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  .photo-feedback { border: 0; border-radius: 28px; background: #fff4ca; padding: 25px; text-align: left; }
  #pfText { font-size: 1.05rem; line-height: 1.65; }
  .photo-feedback .pf-actions { margin-top: 18px; }
  .validated-counts { gap: 12px; }
  .validated-count { border: 0; border-radius: 20px; background: #eef8eb; padding: 16px; text-align: center; }
  .validated-count:nth-child(even) { background: #fff1bc; }
  .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .vcard { border: 0; border-radius: 25px; box-shadow: 0 10px 30px rgba(96,145,107,.11); }
  .vcard img { aspect-ratio: 4 / 5; }
  .vcard figcaption { padding: 14px 16px 17px; }
  .technical-intro { background: linear-gradient(135deg, #f5faef, #fff6cf); }
  .methods-body { color: #536e5b; }
  .equation { border-radius: 18px; background: #fbfdf8; border-color: var(--rule); }
  footer { padding: 30px 8px 10px; color: var(--muted); text-align: center; }

  .business-hero {
    position: relative; overflow: hidden; margin: 18px 0 28px; padding: clamp(36px, 7vw, 80px);
    border-radius: 40px; background: linear-gradient(135deg, #fbe2e7, #fff5c7 58%, #edf8e9);
  }
  .business-hero h1 { color: var(--green-deep); font-size: clamp(2.8rem, 7vw, 5.2rem); max-width: 11ch; }
  .business-hero .sub { max-width: 47ch; font-size: 1.12rem; }
  .business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .business-card { padding: 27px; border-radius: 28px; background: #fff; border: 1px solid var(--rule); }
  .business-card:nth-child(2) { background: #fff7d9; }
  .business-card:nth-child(3) { background: #eff9ed; }
  .business-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .business-contact { margin: 26px 0; padding: 28px; border-radius: 28px; text-align: center; background: #f8d5de; }
  .business-contact a { display: inline-block; margin-top: 10px; padding: 11px 20px; border-radius: 999px;
    color: #fff; background: var(--pink-deep); font-weight: 800; text-decoration: none; }

  .processing-card { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: 26px; align-items: center; }
  .processing-preview { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 28px; background: #edf7ea; }
  .processing-preview img { display: block; width: 100%; height: 100%; object-fit: cover; animation: softPixelate 1.5s ease-in-out infinite; }
  .processing-preview::before {
    content: ""; position: absolute; inset: 0; z-index: 2; opacity: .5; mix-blend-mode: screen;
    background-image: linear-gradient(90deg, rgba(255,229,140,.9) 1px, transparent 1px),
      linear-gradient(rgba(247,195,207,.9) 1px, transparent 1px);
    background-size: 18px 18px; animation: pixelGrid 1.5s steps(4) infinite;
  }
  .processing-preview::after {
    content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 26%; top: -30%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.8), transparent);
    animation: scanPhoto 1.8s ease-in-out infinite;
  }
  .processing-copy h3 { margin: 0 0 8px; font-size: 1.45rem; }
  .processing-dots { display: flex; gap: 8px; margin-top: 18px; }
  .processing-dots i { display: block; width: 13px; height: 13px; border-radius: 999px; animation: dotBounce 1s ease-in-out infinite; }
  .processing-dots i:nth-child(1) { background: var(--green); }
  .processing-dots i:nth-child(2) { background: var(--yellow); animation-delay: .14s; }
  .processing-dots i:nth-child(3) { background: var(--pink); animation-delay: .28s; }
  @keyframes softPixelate { 0%,100% { filter: saturate(.9) blur(0); transform: scale(1.01); } 50% { filter: saturate(1.35) blur(3px); transform: scale(1.06); } }
  @keyframes pixelGrid { 0%,100% { background-size: 18px 18px; opacity: .35; } 50% { background-size: 30px 30px; opacity: .72; } }
  @keyframes scanPhoto { from { top: -30%; } to { top: 110%; } }
  @keyframes dotBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

  /* Photo Studio: multi-upload picker and carousel maker. */
  .studio-shell { margin: 18px 0 34px; padding: clamp(22px, 5vw, 46px); border-radius: 38px;
    background: linear-gradient(145deg, #eff9ec, #fff8d4 54%, #fbe2e8); }
  .studio-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
  .studio-mode { display: block; cursor: pointer; padding: 20px; border: 3px solid transparent;
    border-radius: 27px; background: rgba(255,255,255,.86); transition: transform .18s, border-color .18s; }
  .studio-mode:has(input:checked) { border-color: var(--green-deep); transform: translateY(-2px); }
  .studio-mode input { margin-right: 8px; accent-color: var(--green-deep); }
  .studio-mode b { font-family: "Fredoka", sans-serif; font-size: 1.15rem; }
  .studio-mode span { display: block; margin: 7px 0 0 25px; color: var(--muted); font-size: .91rem; }
  .studio-drop { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 10px;
    border: 3px dashed #b9dab8; border-radius: 31px; background: rgba(255,255,255,.7); text-align: center; }
  .studio-drop.over { border-color: var(--pink-deep); background: #fff; }
  .studio-drop p { margin: 0; }
  .studio-preview-grid, .studio-result-grid { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 20px; }
  .studio-thumb, .studio-result-card { position: relative; overflow: hidden; margin: 0; border-radius: 25px; background: #fff;
    box-shadow: 0 10px 28px rgba(87,133,97,.12); }
  .studio-thumb img, .studio-result-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .studio-thumb figcaption { padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
  .studio-remove { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0;
    color: #fff; background: rgba(200,111,134,.9); box-shadow: none; }
  .studio-remove:hover { color: #fff; background: var(--pink-deep); box-shadow: none; }
  .studio-controls { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 15px;
    margin-top: 20px; padding: 18px; border-radius: 25px; background: rgba(255,255,255,.72); }
  .studio-controls label { font-weight: 800; }
  .studio-controls select { display: block; margin-top: 6px; padding: 10px 36px 10px 14px; color: var(--ink);
    border: 2px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; }
  .studio-progress { padding: 34px; border-radius: 31px; background: #fff; text-align: center; }
  .studio-progress-orbit { position: relative; width: 110px; height: 110px; margin: 0 auto 22px; border-radius: 50%;
    border: 10px solid #eef7eb; border-top-color: var(--pink); border-right-color: var(--yellow); animation: studioSpin 1.1s linear infinite; }
  .studio-progress-orbit::after { content: "♡"; position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--green-deep); font: 700 2.2rem "Fredoka"; animation: studioSpin 1.1s linear infinite reverse; }
  @keyframes studioSpin { to { transform: rotate(360deg); } }
  .studio-winner { grid-column: span 2; }
  .studio-result-card.is-selected { outline: 4px solid var(--yellow); outline-offset: -4px; }
  .studio-result-card.is-first { outline-color: var(--pink); }
  .studio-rank { position: absolute; top: 10px; left: 10px; padding: 6px 10px; border-radius: 999px;
    color: var(--ink); background: rgba(255,255,255,.94); font-weight: 800; }
  .studio-score { position: absolute; right: 10px; bottom: 92px; min-width: 70px; padding: 8px 10px; border-radius: 18px;
    color: #fff; background: rgba(94,158,114,.94); text-align: center; font: 700 1.35rem "Fredoka"; }
  .studio-result-copy { padding: 15px; }
  .studio-result-copy h3 { margin: 0 0 7px; font-size: 1rem; }
  .studio-result-copy p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
  .studio-post-card { margin: 20px 0; padding: 24px; border-radius: 28px; background: #fff0f4; }
  .studio-post-card h3 { margin: 0 0 8px; }
  .studio-caption { margin-top: 14px; padding: 14px 17px; border-radius: 18px; background: #fff; font-size: 1.05rem; }
  .studio-ranking { margin-top: 24px; padding: 21px; border-radius: 28px; background: rgba(255,255,255,.72); }
  .studio-ranking ol { margin: 12px 0 0; padding-left: 24px; columns: 2; column-gap: 36px; }
  .studio-ranking li { padding: 5px 0; break-inside: avoid; }
  .studio-failures { margin-top: 17px; color: var(--pink-deep); font-size: .9rem; }

  .celebration-layer { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; perspective: 900px; }

  /* Confetti falls with depth, tumbling and changing direction instead of moving as one flat sheet. */
  .confetti-bit { position: absolute; left: var(--x); top: -9vh; width: var(--w); height: var(--h);
    border-radius: var(--radius); background: var(--color); box-shadow: 0 4px 10px rgba(91,111,96,.14);
    transform-style: preserve-3d; animation: confettiPhysics var(--duration) cubic-bezier(.18,.62,.28,1) both var(--delay); }
  .confetti-bit.ribbon { width: 5px; height: 28px; border-radius: 999px; }
  .confetti-bit.dot { border-radius: 50%; }

  /* Fireworks are individual rockets followed by radial sparks with gravity and fading ember trails. */
  .firework-burst { position: absolute; left: var(--x); top: var(--y); width: 1px; height: 1px; }
  .firework-rocket { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 46px; border-radius: 999px;
    background: linear-gradient(to top, transparent, var(--color) 50%, #fff); filter: drop-shadow(0 0 6px var(--color));
    animation: rocketRise .72s cubic-bezier(.15,.72,.25,1) both var(--delay); }
  .firework-flash { position: absolute; inset: -11px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 18px 7px var(--color), 0 0 50px 16px color-mix(in srgb, var(--color) 54%, transparent);
    animation: fireworkFlash .48s ease-out both var(--delay); }
  .firework-spark { position: absolute; width: var(--spark); height: var(--spark); margin: -2px;
    border-radius: 50%; background: #fff; box-shadow: 0 0 5px 2px var(--color), 0 0 12px var(--color);
    animation: sparkFlight var(--duration) cubic-bezier(.13,.58,.3,1) both var(--delay); }
  .firework-spark::after { content: ""; position: absolute; top: 50%; right: 50%; width: var(--trail); height: 2px;
    transform: rotate(var(--angle)); transform-origin: right center; border-radius: 999px;
    background: linear-gradient(to left, var(--color), transparent); opacity: .8; }

  /* Star scores get bright points with lens-like glints, varied depth, and slow upward drift. */
  .star-particle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
    border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, var(--color) 19%, transparent 49%);
    filter: drop-shadow(0 0 8px var(--color)); animation: starDrift var(--duration) ease-in-out both var(--delay); }
  .star-particle::before, .star-particle::after { content: ""; position: absolute; left: 50%; top: 50%;
    border-radius: 999px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: translate(-50%,-50%); }
  .star-particle::before { width: 180%; height: 2px; }
  .star-particle::after { width: 2px; height: 180%; background: linear-gradient(transparent, #fff, transparent); }

  /* Galaxy scores layer a soft nebula, deep starfield, glints, and short-lived meteors. */
  .celebration-layer.galaxy { background: radial-gradient(ellipse at 50% 58%, rgba(73,205,255,.18), transparent 48%),
    radial-gradient(ellipse at 30% 34%, rgba(150,112,255,.15), transparent 38%),
    linear-gradient(rgba(241,250,255,.12), rgba(236,231,255,.18)); animation: galaxyFade 5.8s ease both; }
  .nebula-cloud { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1.7;
    border-radius: 50%; opacity: .65; filter: blur(28px); background:
      radial-gradient(ellipse at 35% 48%, var(--color) 0 8%, transparent 48%),
      radial-gradient(ellipse at 68% 54%, var(--color2) 0 6%, transparent 44%);
    animation: nebulaFloat var(--duration) ease-in-out both var(--delay); }
  .galaxy-star { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
    border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px var(--color), 0 0 13px var(--color);
    animation: galaxyTwinkle var(--duration) ease-in-out both var(--delay); }
  .shooting-star { position: absolute; left: var(--x); top: var(--y); width: var(--length); height: 2px;
    border-radius: 999px; opacity: 0; background: linear-gradient(90deg, transparent, var(--color), #fff);
    box-shadow: 0 0 7px var(--color); transform: rotate(var(--angle));
    animation: meteorFlight 1.15s cubic-bezier(.2,.62,.32,1) both var(--delay); }

  @keyframes confettiPhysics {
    0% { opacity: 0; transform: translate3d(0,-8vh,0) rotateX(0deg) rotateY(0deg) rotateZ(var(--rot)); }
    8% { opacity: 1; }
    34% { transform: translate3d(var(--sway),34vh,70px) rotateX(240deg) rotateY(130deg) rotateZ(calc(var(--rot) + 100deg)); }
    68% { transform: translate3d(var(--sway2),73vh,-35px) rotateX(520deg) rotateY(310deg) rotateZ(calc(var(--rot) + 260deg)); }
    100% { opacity: .18; transform: translate3d(var(--sway3),118vh,20px) rotateX(820deg) rotateY(560deg) rotateZ(calc(var(--rot) + 520deg)); }
  }
  @keyframes rocketRise { 0% { opacity: 0; transform: translate3d(0,76vh,0) scaleY(.35); } 16% { opacity: 1; }
    82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0,0,0) scaleY(1); } }
  @keyframes fireworkFlash { 0% { opacity: 0; transform: scale(.08); } 15% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.5); } }
  @keyframes sparkFlight { 0%,28% { opacity: 0; transform: translate3d(0,0,0) scale(.25); }
    34% { opacity: 1; } 76% { opacity: 1; transform: translate3d(var(--dx),var(--dy),0) scale(1); }
    100% { opacity: 0; transform: translate3d(var(--dx2),var(--dy2),0) scale(.18); filter: blur(1px); } }
  @keyframes starDrift { 0% { opacity: 0; transform: translate3d(0,34px,0) scale(.25) rotate(-16deg); }
    28% { opacity: 1; transform: translate3d(var(--drift),0,40px) scale(1.2) rotate(4deg); }
    58% { opacity: .78; transform: translate3d(var(--drift-back),-32px,-15px) scale(.78) rotate(13deg); }
    100% { opacity: 0; transform: translate3d(var(--drift),-105px,20px) scale(.3) rotate(28deg); } }
  @keyframes galaxyFade { 0%,100% { opacity: 0; } 12%,78% { opacity: 1; } }
  @keyframes nebulaFloat { 0% { opacity: 0; transform: translate3d(-5%,8%,0) scale(.8); }
    22%,76% { opacity: .62; } 100% { opacity: 0; transform: translate3d(10%,-9%,0) scale(1.18); } }
  @keyframes galaxyTwinkle { 0%,100% { opacity: 0; transform: scale(.2); } 28% { opacity: .95; transform: scale(1.35); }
    55% { opacity: .42; transform: scale(.68); } 74% { opacity: 1; transform: scale(1.1); } }
  @keyframes meteorFlight { 0% { opacity: 0; transform: translate3d(-18vw,-8vh,0) rotate(var(--angle)) scaleX(.25); }
    18% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate3d(42vw,25vh,0) rotate(var(--angle)) scaleX(1.15); } }

  @media (max-width: 820px) {
    body { padding-inline: 14px; }
    .app-header { position: relative; top: 0; border-radius: 28px; align-items: flex-start; }
    .site-nav { max-width: 70%; }
    .home-cards { grid-template-columns: 1fr; }
    .business-grid { grid-template-columns: 1fr; }
    .processing-card { grid-template-columns: 1fr; text-align: center; }
    .processing-preview { max-width: 260px; width: 100%; margin: auto; }
    .hero { min-height: 560px; padding: 46px 28px; border-radius: 34px; }
    .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-winner { grid-column: span 1; }
  }
  @media (max-width: 560px) {
    .app-header { padding: 14px 15px; gap: 10px; flex-wrap: wrap; border-radius: 28px; }
    .brand { font-size: 1.2rem; padding-top: 5px; }
    .site-nav { order: 3; width: 100%; max-width: none; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; overflow-x: auto; }
    .site-nav button { padding: 6px 9px; font-size: .76rem; }
    .account-entry, .account-button { margin-left: auto; }
    .selected-photo { grid-template-columns: 60px minmax(0, 1fr); }
    .selected-photo img { width: 60px; height: 60px; }
    .selected-photo button { grid-column: 1 / -1; width: 100%; }
    .account-dialog-inner { padding: 28px 22px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions button { width: 100%; }
    .vgrid { grid-template-columns: 1fr; }
    .studio-modes { grid-template-columns: 1fr; }
    .studio-preview-grid, .studio-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-ranking ol { columns: 1; }
    #live, #offline, #status, #error, #result, #validatedRegions, #contactSheets, .technical-intro {
      padding: 22px 18px; border-radius: 27px;
    }
  }
  @media (prefers-reduced-motion: reduce) and (min-width: 821px) {
    .processing-preview img, .processing-preview::before, .processing-preview::after,
    .processing-dots i, .confetti-bit, .firework-rocket, .firework-flash, .firework-spark,
    .star-particle, .nebula-cloud, .galaxy-star, .shooting-star, .score-pedestal::before,
    .score-tier-pop .pct { animation: none !important; }
    .celebration-layer { display: none !important; }
  }
.app-header a.app-launch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 20px;border-radius:999px;background:var(--green-deep);color:#fff;box-shadow:0 6px 0 #4e865b;font-weight:800}.app-header a.app-launch:hover{background:#4e865b;box-shadow:0 4px 0 #3e714b;transform:translateY(2px)}.drop{padding-bottom:56px}.embedded{background:var(--cream)}.embedded .app-header,.embedded .site-footer,.embedded .page-intro,.embedded .home-cards,.embedded .business-grid,.embedded .technical-intro{display:none!important}.embedded .wrap{width:min(1120px,calc(100% - 24px));padding-top:18px}.embedded #live,.embedded #offline,.embedded #status,.embedded #error,.embedded #result,.embedded #validatedRegions,.embedded #contactSheets{margin-top:8px}.embedded .celebration-layer{display:none}
.drop{display:flex;flex-direction:column;align-items:center;gap:0}.drop>p{order:1}.drop>.file-picker-row{position:relative;z-index:5;order:2;display:flex;align-items:center;justify-content:center;width:min(100%,520px);min-height:64px;margin:0 0 34px;padding:8px 12px;background:#f5fbf2}.drop>.file-picker-row .native-file-picker{position:relative;z-index:6;display:block;width:min(100%,430px);min-height:48px;margin:0;padding:4px;overflow:visible}.drop>.selected-photo{position:relative;z-index:1;order:3;width:min(100%,650px);margin:0 auto}.embedded .drop{padding-bottom:54px}.embedded .drop>.file-picker-row{margin-bottom:40px}