:root {
      --bg: #ece6d6;
      --card: #f7f3e8;
      --ink: #1c2119;
      --green: #2f6b3b;
      --orange: #ff6a2b;
      --muted: #6b6f60;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #141813;
        --card: #1f251d;
        --ink: #ece8d8;
        --green: #7fc48a;
        --orange: #ff8a4d;
        --muted: #9aa08c;
      }
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    main {
      max-width: 30rem;
      margin: 0 auto;
      padding: 1.1rem 1.1rem 2rem;
    }

    .cond,
    h1,
    h2,
    .tag,
    .seg button,
    .btn,
    button,
    .lbl {
      font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .mono {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    h1 {
      margin: 0;
      font-size: 1.9rem;
      line-height: .9;
      font-weight: 800;
    }

    h1 small {
      display: block;
      font-size: .8rem;
      letter-spacing: .35em;
      color: var(--orange);
      font-weight: 700;
      margin-top: .2rem;
    }

    h2 {
      margin: 0 0 .75rem;
      font-size: 1.1rem;
      font-weight: 800;
    }

    .tag {
      border: 2px solid var(--ink);
      padding: .2rem .55rem;
      font-weight: 700;
      font-size: .8rem;
      background: var(--card);
      white-space: nowrap;
    }

    .tags {
      display: flex;
      flex-direction: row;
      gap: .5rem;
      align-items: center;
      flex: none;
    }

    .card {
      background: var(--card);
      border: 2px solid var(--ink);
      border-radius: 4px;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .lbl {
      font-size: .72rem;
      font-weight: 700;
      color: var(--muted);
      margin: 0 0 .35rem;
    }

    button,
    .btn {
      font-weight: 800;
      font-size: .9rem;
      padding: .7rem 1rem;
      border: 2px solid var(--ink);
      border-radius: 4px;
      background: var(--card);
      color: var(--ink);
      cursor: pointer;
    }

    button.primary {
      background: var(--orange);
      color: #1c2119;
      box-shadow: 3px 3px 0 var(--ink);
    }

    button.primary:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--ink);
    }

    button:disabled,
    .btn.disabled {
      opacity: .45;
      cursor: not-allowed;
      box-shadow: none;
    }

    button:focus-visible,
    .btn:focus-within {
      outline: 3px solid var(--orange);
      outline-offset: 2px;
    }

    input[type=file] {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .plant {
      display: flex;
      gap: .9rem;
      align-items: center;
      padding: .8rem;
      margin-bottom: 1rem;
    }

    .plant .art {
      width: 4.6rem;
      flex: none;
      color: var(--ink);
    }

    .plant .art svg {
      width: 100%;
      display: block;
      transition: transform .4s;
      transform-origin: 50% 90%;
    }

    .plant.droop .art svg {
      transform: rotate(14deg);
      filter: grayscale(1);
    }

    .plant .grow {
      flex: 1;
      min-width: 0;
    }

    .plant .row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-weight: 800;
    }

    .plant .row .cond {
      font-size: 1.05rem;
    }

    .meter {
      height: .8rem;
      border: 2px solid var(--ink);
      border-radius: 2px;
      margin: .35rem 0;
      background: transparent;
    }

    .meter>div {
      height: 100%;
      width: 0;
      background: var(--orange);
      transition: width .4s;
    }

    .plant p {
      margin: 0;
      font-size: .8rem;
      color: var(--muted);
      line-height: 1.3;
    }

    .daily {
      display: flex;
      align-items: center;
      gap: .75rem;
      justify-content: space-between;
      padding: .6rem .8rem;
      margin-bottom: 1rem;
      border: 2px solid var(--ink);
      border-left: .6rem solid var(--green);
      background: var(--card);
    }

    .daily strong {
      display: block;
      font-size: .85rem;
    }

    .daily span {
      font-size: .8rem;
      color: var(--muted);
    }

    .daily button {
      padding: .4rem .8rem;
      flex: none;
    }

    .quest {
      padding: 1.1rem 1.1rem 1rem;
      min-height: 9.5rem;
    }

    .quest .text {
      margin: .1rem 0 .8rem;
      font-size: 1.55rem;
      line-height: 1.18;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .quest .target {
      margin: 0;
      font-size: .85rem;
      color: var(--muted);
    }

    .quest-foot {
      display: flex;
      justify-content: flex-end;
      margin-top: .8rem;
    }

    .quest-foot button {
      padding: .55rem 1.4rem;
    }

    .actions {
      display: flex;
      gap: .7rem;
      margin: 1rem 0 0;
    }

    .actions .big {
      flex: 1;
      font-size: 1.05rem;
      padding: .95rem;
    }

    .next {
      margin-top: 1.2rem;
    }

    .seg {
      display: flex;
      border: 2px solid var(--ink);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: .6rem;
    }

    .seg button {
      flex: 1;
      border: 0;
      border-right: 2px solid var(--ink);
      border-radius: 0;
      padding: .5rem .3rem;
      font-size: .78rem;
      background: transparent;
    }

    .seg button:last-child {
      border-right: 0;
    }

    .seg button[aria-pressed=true] {
      background: var(--ink);
      color: var(--bg);
    }

    .next small {
      color: var(--muted);
      font-size: .78rem;
    }

    .stamps {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .7rem;
    }

    .stamp {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: .3rem;
      border: 2px dashed var(--muted);
      color: var(--muted);
      border-radius: 4px;
      transform: rotate(var(--r, 0deg));
    }

    .stamp b {
      font: 800 .95rem/1.1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .stamp small {
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-top: .25rem;
    }

    .stamp.got {
      border: 3px solid var(--green);
      color: var(--green);
      background: color-mix(in srgb, var(--green) 12%, transparent);
    }

    .wide {
      width: 100%;
      margin: 1rem 0;
    }

    #cam {
      position: fixed;
      inset: 0;
      z-index: 10;
      background: #000;
      display: flex;
      flex-direction: column;
    }

    #cam video {
      flex: 1;
      width: 100%;
      min-height: 0;
      object-fit: cover;
    }

    #cam .bar {
      display: flex;
      justify-content: center;
      gap: 1rem;
      padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
      background: #000;
    }

    #cam .bar button {
      border-color: #f7f3e8;
      color: #f7f3e8;
      background: transparent;
    }

    #cam .bar button.primary {
      background: var(--orange);
      border-color: var(--orange);
      color: #1c2119;
      box-shadow: none;
    }

    #preview {
      display: block;
      width: 100%;
      max-height: 16rem;
      object-fit: cover;
      border: 2px solid var(--ink);
      border-radius: 4px;
      margin-top: .8rem;
      margin-bottom: .8rem;
    }

    #result {
      font-weight: 700;
      min-height: 1.4rem;
      margin: 0 0 .4rem;
    }

    #result:empty {
      display: none;
    }

    #result.win {
      color: var(--green);
    }

    #load {
      margin: .6rem 0;
    }

    #loadText,
    #status {
      font-size: .8rem;
      color: var(--muted);
      margin: 0;
      word-break: break-word;
    }