:root,
    :root[data-theme="dark"] {
      --bg: #0a0a0b;
      --panel: #0e0e10;
      --inset: #111113;
      --line: #2a2a2e;
      --divider: #1c1c20;
      --ink: #ececef;
      --muted: #7c7c85;
      --dim: #55555d;
      --accent: #ececef;
      --accent-dim: #55555d;
      --on-accent: #0a0a0b;
      --good: #ececef;
      --bad: #b7b7bd;
      --chip: #16161a;
      /* motion — one easing curve, three duration roles (see Interaction & motion) */
      --ease: cubic-bezier(.2, .8, .2, 1);
      --t-state: .12s;
      --t-move: .22s;
      --t-reveal: .45s;
      /* type scale — Major Second (1.125), rem-based, root 16px */
      --fs-micro: .5rem;
      --fs-2xs: .625rem;
      --fs-xs: .6875rem;
      --fs-sm: .78125rem;
      --fs-md: .875rem;
      --fs-lg: 1rem;
      --fs-display: clamp(1.375rem, 3.2vw, 2.125rem);
      /* line-height — unitless, scales with any font size */
      --lh-tight: 1.1;
      --lh-snug: 1.35;
      --lh-normal: 1.55;
      /* tracking — smaller/more-structural uppercase = wider */
      --track-kicker: .34em;
      --track-wide: .2em;
      --track-label: .14em;
      --track-tight: -.01em;
      /* spacing — 4px structural scale (px); typographic padding uses em */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 20px;
      --sp-6: 24px;
      --sp-7: 32px;
      --sp-8: 48px;
      --sp-9: 64px;
      --sp-10: 80px;
      /* radius — pills + dots only; everything else stays square */
      --r-pill: 999px;
      --r-full: 50%;
    }

    :root[data-theme="light"] {
      --bg: #f4f4f2;
      --panel: #ffffff;
      --inset: #ffffff;
      --line: #d4d4cf;
      --divider: #e6e6e1;
      --ink: #16161a;
      --muted: #6a6a70;
      --dim: #9a9a9f;
      --accent: #16161a;
      --accent-dim: #9a9a9f;
      --on-accent: #ffffff;
      --good: #16161a;
      --bad: #55555a;
      --chip: #f0f0ec;
    }

    @media (prefers-color-scheme: light) {
      :root:not([data-theme]) {
        --bg: #f4f4f2;
        --panel: #ffffff;
        --inset: #ffffff;
        --line: #d4d4cf;
        --divider: #e6e6e1;
        --ink: #16161a;
        --muted: #6a6a70;
        --dim: #9a9a9f;
        --accent: #16161a;
        --accent-dim: #9a9a9f;
        --on-accent: #ffffff;
        --good: #16161a;
        --bad: #55555a;
        --chip: #f0f0ec;
      }
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      padding: 0
    }

    body {
      font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
      background: var(--bg);
      color: var(--ink);
      line-height: var(--lh-normal);
      padding: 0 var(--sp-6) var(--sp-10);
      -webkit-font-smoothing: antialiased
    }

    .wrap {
      max-width: 1160px;
      margin: 0 auto
    }

    header {
      padding: var(--sp-7) 0 var(--sp-5);
      border-bottom: 1px solid var(--line);
      margin-bottom: var(--sp-5);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--sp-5);
      flex-wrap: wrap
    }

    h1 {
      font-size: var(--fs-display);
      line-height: var(--lh-tight);
      margin: 0 0 var(--sp-3);
      letter-spacing: var(--track-tight);
      font-weight: 600;
      text-transform: uppercase
    }

    .sub {
      font-size: var(--fs-sm);
      color: var(--muted);
      max-width: 560px;
      margin: 0;
      line-height: var(--lh-normal)
    }

    .theme-toggle {
      display: flex;
      border: 1px solid var(--line);
      flex: none
    }

    .th-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 30px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer
    }

    .th-btn+.th-btn {
      border-left: 1px solid var(--line)
    }

    .th-btn:hover {
      color: var(--ink)
    }

    .th-btn.on {
      background: var(--accent);
      color: var(--on-accent)
    }

    .th-btn svg {
      width: 15px;
      height: 15px
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      padding: var(--sp-5)
    }

    .col {
      display: flex;
      flex-direction: column;
      gap: var(--sp-5)
    }

    .pcols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-5);
      align-items: start
    }

    @media (max-width:860px) {
      .pcols {
        grid-template-columns: 1fr;
        gap: var(--sp-5)
      }
    }

    .phead {
      text-transform: uppercase;
      letter-spacing: var(--track-wide);
      font-size: var(--fs-2xs);
      font-weight: 600;
      margin: 0 0 var(--sp-4);
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding-bottom: var(--sp-3);
      border-bottom: 1px solid var(--divider)
    }

    .phead .count {
      margin-left: auto;
      color: var(--dim);
      letter-spacing: .1em
    }

    .phead .step {
      color: var(--accent);
      font-weight: 600;
      letter-spacing: .1em
    }

    .slead {
      font-size: var(--fs-xs);
      color: var(--muted);
      line-height: var(--lh-normal);
      margin: 0 0 var(--sp-4)
    }

    button {
      font-family: inherit;
      cursor: pointer
    }

    /* motion — one state transition shared by every interactive control */
    .btn,
    .opt,
    .mbtn,
    .preset,
    .seg button,
    .th-btn,
    select,
    .ritem,
    .tag,
    .rfill,
    .rlink,
    .sharelink,
    .txlink,
    .sbtn {
      transition-property: color, background-color, border-color, opacity;
      transition-duration: var(--t-state);
      transition-timing-function: var(--ease);
    }

    .btn {
      text-transform: uppercase;
      letter-spacing: var(--track-label);
      font-weight: 600;
      background: var(--accent);
      color: var(--on-accent);
      border: 1px solid var(--accent);
      padding: var(--sp-3) var(--sp-5);
      font-size: var(--fs-sm)
    }

    .btn:hover:not(:disabled) {
      opacity: .82
    }

    .btn:disabled {
      opacity: .3;
      cursor: not-allowed
    }

    /* secondary text link under the sprinkle button — share the current nine as a URL */
    .sharelink {
      display: block;
      width: 100%;
      margin-top: var(--sp-3);
      background: transparent;
      border: none;
      color: var(--dim);
      font-family: inherit;
      font-size: var(--fs-xs);
      letter-spacing: .04em;
      text-align: center
    }

    .sharelink:hover:not(:disabled) {
      color: var(--ink)
    }

    .sharelink.copied {
      color: var(--good)
    }

    .sharelink:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    .btn.ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line)
    }

    .btn.ghost:hover:not(:disabled) {
      border-color: var(--accent);
      opacity: 1
    }

    .wc-btn {
      padding: var(--sp-2) var(--sp-3);
      font-size: var(--fs-2xs);
      letter-spacing: .1em
    }

    /* search */
    .searchwrap {
      position: relative;
      margin-bottom: 0
    }

    /* dropdown group header + the browse "fill" action */
    .rgroup {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      padding: var(--sp-2) var(--sp-3) var(--sp-2);
      font-size: var(--fs-2xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      background: var(--panel);
      position: sticky;
      top: 0
    }

    .rfill {
      font-family: inherit;
      font-size: var(--fs-2xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      background: transparent;
      border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
      padding: var(--sp-1) var(--sp-2);
      cursor: pointer;
      white-space: nowrap
    }

    .rfill:hover {
      color: var(--ink)
    }

    /* keyboard highlight mirrors :hover so ↑/↓ and mouse look the same */
    .ritem.active {
      background: color-mix(in srgb, var(--panel) 90%, var(--ink) 10%)
    }

    /* visible focus ring for keyboard users (mouse focus stays quiet) */
    button:focus-visible,
    a:focus-visible,
    .tile:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px
    }

    .searchwrap input {
      width: 100%;
      font-family: inherit;
      font-size: var(--fs-sm);
      padding: var(--sp-3) var(--sp-4);
      border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
      background: transparent;
      color: var(--ink)
    }

    .searchwrap input:focus {
      outline: none;
      border-color: var(--ink)
    }

    .results {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--panel);
      border: 1px solid var(--line);
      max-height: 400px;
      overflow: auto;
      z-index: 30;
      display: none
    }

    .results.show {
      display: block
    }

    .ritem {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-2) var(--sp-3);
      cursor: pointer
    }

    .ritem:hover {
      background: color-mix(in srgb, var(--panel) 94%, var(--ink) 6%)
    }

    .ritem .av {
      width: 28px;
      height: 28px;
      flex: none
    }

    .ritem .info {
      min-width: 0;
      flex: 1
    }

    .ritem .rn {
      font-size: var(--fs-sm);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .ritem .rs {
      font-size: var(--fs-2xs);
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-top: 2px
    }

    /* "learn more" link on a campaign row — opens the TTCrowd page, doesn't add */
    .rlink {
      flex: none;
      color: var(--dim);
      text-decoration: none;
      font-size: var(--fs-sm);
      line-height: 1;
      padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2)
    }

    .rlink:hover {
      color: var(--ink)
    }

    /* controls */
    .controls {
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
      align-items: flex-start;
      margin-bottom: var(--sp-3)
    }

    .methodbar {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2)
    }

    .opt {
      display: flex;
      align-items: center;
      width: 100%;
      text-align: left;
      border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: var(--fs-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      padding: var(--sp-3) var(--sp-4);
      cursor: pointer
    }

    .opt:hover {
      color: var(--ink)
    }

    .opt.sel {
      color: var(--ink);
      background: color-mix(in srgb, var(--panel) 95%, var(--ink) 5%);
      border-color: color-mix(in srgb, var(--ink) 75%, transparent)
    }

    .tag {
      margin-left: auto;
      font-size: var(--fs-xs);
      letter-spacing: .12em;
      color: inherit;
      opacity: .7;
      border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
      border-radius: var(--r-pill);
      line-height: calc(var(--fs-xs) + 4px);
      padding: .28em .82em
    }

    .mbtn {
      border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .03em;
      padding: var(--sp-2) var(--sp-3)
    }

    .mbtn:hover {
      color: var(--ink)
    }

    .mbtn.sel {
      color: var(--ink);
      background: color-mix(in srgb, var(--panel) 96%, var(--ink) 4%)
    }

    .mbtn.reroll {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2)
    }

    .amount {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      flex-wrap: wrap
    }

    .amount label {
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: var(--track-label);
      color: var(--muted)
    }

    .amount .field {
      display: inline-flex;
      align-items: center;
      border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
      background: transparent
    }

    .amount .field span {
      padding: 0 11px 0 3px;
      color: var(--muted);
      font-weight: 600
    }

    .amount input {
      font-family: inherit;
      font-size: var(--fs-md);
      line-height: 1.2;
      font-weight: 600;
      width: 82px;
      border: none;
      background: transparent;
      /* --sp-2 vertical matches the .preset chips; 11px/2px are optical kerning
         around the "XTZ" suffix, not scale steps */
      padding: var(--sp-2) 2px var(--sp-2) 11px;
      color: var(--ink)
    }

    .amount input:focus {
      outline: none
    }

    .presets {
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap
    }

    .preset {
      font-family: inherit;
      font-size: var(--fs-md);
      font-weight: 600;
      border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
      background: transparent;
      color: var(--muted);
      /* shares --sp-2 vertical with .amount input so the chips and the entry box
         are the same height — one scale step, no off-grid control size */
      padding: var(--sp-2) var(--sp-3);
      line-height: 1.2
    }

    .preset:hover {
      color: var(--ink)
    }

    .preset.sel {
      color: var(--ink);
      background: color-mix(in srgb, var(--panel) 95%, var(--ink) 5%);
      border-color: color-mix(in srgb, var(--ink) 75%, transparent)
    }

    .hint {
      font-size: var(--fs-xs);
      color: var(--dim);
      margin: var(--sp-3) 0 0;
      line-height: var(--lh-normal)
    }

    .yolobar {
      display: flex;
      gap: var(--sp-2);
      margin: var(--sp-3) 0 0;
      align-items: center;
      flex-wrap: wrap
    }

    .ylabel {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--muted);
      margin-right: var(--sp-1)
    }

    .adv {
      margin: 0 0 var(--sp-4);
      border-top: 1px solid var(--divider);
      padding-top: var(--sp-3)
    }

    .adv summary {
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: var(--track-label);
      color: var(--muted);
      cursor: pointer;
      list-style: none
    }

    .adv summary::-webkit-details-marker {
      display: none
    }

    .adv summary::before {
      content: "+ "
    }

    .adv[open] summary::before {
      content: "– "
    }

    .sliders {
      display: flex;
      gap: var(--sp-6);
      flex-wrap: wrap;
      margin-top: var(--sp-3)
    }

    .sld {
      font-size: var(--fs-xs)
    }

    .sld label {
      display: block;
      margin-bottom: var(--sp-2);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .1em
    }

    .sld .v {
      color: var(--accent);
      font-weight: 600
    }

    input[type=range] {
      width: 150px;
      accent-color: var(--accent);
      height: 3px;
      background: var(--line)
    }

    /* grid of tiles */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--sp-3)
    }

    .tile {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--inset);
      padding: var(--sp-4) var(--sp-3) var(--sp-3);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-2);
      min-height: 172px;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      transition: transform var(--t-move) var(--ease)
    }

    /* Photos-style lifted tile */
    .tile.lifted {
      position: fixed;
      left: 0;
      top: 0;
      margin: 0;
      z-index: 999;
      pointer-events: none;
      transition: none;
      box-shadow: 0 18px 36px rgba(0, 0, 0, .35)
    }

    .placeholder {
      border: 1px dashed var(--line);
      background: color-mix(in srgb, var(--bg) 80%, transparent);
      transition: transform var(--t-move) var(--ease)
    }

    .tilefill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      transition: height var(--t-reveal) var(--ease);
      z-index: 0
    }

    .tile .av {
      position: relative;
      z-index: 1;
      width: 70px;
      height: 70px;
      display: block
    }

    .gridwrap {
      position: relative
    }

    .numlayer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: none
    }

    html.ranking .numlayer {
      display: block
    }

    .slotnum {
      position: absolute;
      z-index: 3;
      min-width: 22px;
      height: 22px;
      background: var(--accent);
      color: var(--on-accent);
      font-size: var(--fs-xs);
      font-weight: 600;
      line-height: 22px;
      text-align: center;
      padding: 0 5px
    }

    .tile .x {
      position: absolute;
      z-index: 2;
      top: 5px;
      right: 6px;
      width: 20px;
      height: 20px;
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 15px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .tile .x:hover {
      color: var(--ink)
    }

    .tile .nm {
      position: relative;
      z-index: 1;
      font-size: var(--fs-sm);
      font-weight: 600;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center
    }

    .tile .num {
      position: relative;
      z-index: 1;
      font-size: var(--fs-sm);
      text-align: center
    }

    .tile .num .tz {
      color: var(--ink);
      font-weight: 600
    }

    .tile .crown {
      position: absolute;
      z-index: 2;
      top: 6px;
      left: 6px;
      color: var(--accent);
      display: flex;
      line-height: 0
    }

    .tile .crown svg {
      width: 15px;
      height: 15px
    }

    .tile .num .flag {
      font-size: var(--fs-micro);
      color: var(--dim);
      letter-spacing: .08em;
      display: block;
      margin-top: 1px
    }

    .eslot {
      border: 1px dashed var(--line);
      min-height: 172px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--divider);
      font-size: 22px
    }

    html[data-theme="light"] .eslot {
      color: var(--line)
    }

    .splitfoot {
      margin-top: var(--sp-4);
      font-size: var(--fs-xs);
      color: var(--dim);
      letter-spacing: .04em
    }

    .err {
      font-size: var(--fs-xs);
      color: var(--muted);
      margin: 0 1px;
      min-height: 0
    }

    .err:empty {
      display: none
    }

    .err:not(:empty) {
      margin-top: var(--sp-3)
    }

    /* genuine errors (not neutral summaries) brighten + carry the [!] marker */
    .err.is-error {
      color: var(--ink)
    }

    .err.is-error::before {
      content: "[!] "
    }

    /* overlay */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: var(--sp-5);
      z-index: 100
    }

    .overlay.show {
      display: flex
    }

    .dialog {
      background: var(--panel);
      border: 1px solid var(--line);
      width: 100%;
      max-width: 400px;
      max-height: 92vh;
      overflow: auto;
      padding: var(--sp-6);
      position: relative
    }

    .ov-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 26px;
      height: 26px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--muted);
      font-size: var(--fs-md);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2
    }

    .ov-close:hover {
      color: var(--ink);
      border-color: var(--ink)
    }

    .dialog h3 {
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: var(--track-wide);
      margin: 0 0 var(--sp-4);
      color: var(--muted);
      padding-bottom: var(--sp-3);
      border-bottom: 1px solid var(--divider)
    }

    .rcpt {
      border: 1px solid var(--divider);
      margin-bottom: var(--sp-4)
    }

    .rcpt-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-3);
      border-bottom: 1px solid var(--divider)
    }

    .rcpt-row:last-child {
      border-bottom: none
    }

    .rcpt-row .k {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--muted)
    }

    .rcpt-row .v {
      font-size: var(--fs-sm);
      font-weight: 600;
      text-align: right;
      word-break: break-all
    }

    .seg {
      display: inline-flex;
      border: 1px solid var(--line);
      overflow: hidden
    }

    .seg button {
      font: inherit;
      font-size: var(--fs-2xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: var(--sp-1) var(--sp-2);
      background: transparent;
      color: var(--dim);
      border: none;
      cursor: pointer
    }

    .seg button+button {
      border-left: 1px solid var(--line)
    }

    .seg button:hover {
      color: var(--ink)
    }

    .seg button.on {
      background: var(--accent);
      color: var(--on-accent)
    }

    .ov-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: var(--sp-4)
    }

    .ov-table td {
      padding: var(--sp-1) 0;
      border-bottom: 1px solid var(--divider);
      font-size: var(--fs-xs);
      vertical-align: middle
    }

    .ov-table td:first-child {
      display: flex;
      align-items: center;
      gap: var(--sp-2)
    }

    .ov-table td:last-child {
      text-align: right;
      font-weight: 600;
      white-space: nowrap
    }

    .ov-table .av {
      width: 20px;
      height: 20px;
      flex: none
    }

    .rcpt-who {
      display: flex;
      flex-direction: column;
      line-height: 1.25;
      min-width: 0
    }

    .rcpt-addr {
      font-size: var(--fs-2xs);
      letter-spacing: .04em;
      color: var(--dim)
    }

    .ov-table .bar-cell {
      width: 32%;
      padding: 0 var(--sp-3)
    }

    .rbar {
      height: 6px;
      background: var(--divider);
      border: 1px solid var(--line);
      overflow: hidden
    }

    .rbar i {
      display: block;
      height: 100%;
      background: var(--accent);
      width: 0
    }

    .note {
      margin-top: var(--sp-3);
      color: var(--dim);
      font-size: var(--fs-xs);
      line-height: var(--lh-normal);
      text-align: center
    }

    .note.err {
      color: var(--ink);
      margin-top: var(--sp-2)
    }

    .note.err::before {
      content: "[!] "
    }

    .note.err:empty {
      display: none
    }

    .txlink {
      display: inline-block;
      margin: 2px 0 var(--sp-3);
      font-size: var(--fs-xs);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .txlink:hover {
      color: var(--ink)
    }

    .nm-sub {
      font-size: var(--fs-2xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-top: 1px
    }

    .nm-sub.err {
      color: var(--ink)
    }

    .nm-sub.err::before {
      content: "[!] "
    }

    #successPane {
      text-align: center
    }

    #gardenCanvas {
      width: 100%;
      height: auto;
      border: 1px solid var(--line);
      display: block;
      margin-bottom: var(--sp-4)
    }

    .success-head {
      font-size: var(--fs-lg);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: var(--track-label);
      margin-bottom: var(--sp-1)
    }

    .ov-lead {
      font-size: var(--fs-sm);
      color: var(--muted);
      margin: 0;
      line-height: var(--lh-normal)
    }

    .share-label {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: .16em;
      color: var(--muted);
      margin: var(--sp-4) 0 var(--sp-2);
      text-align: left
    }

    .share-box {
      background: var(--inset);
      border: 1px solid var(--line);
      padding: var(--sp-3) var(--sp-3);
      font-size: var(--fs-xs);
      color: var(--muted);
      line-height: var(--lh-normal);
      margin-bottom: var(--sp-3);
      text-align: left
    }

    .share-row {
      display: flex;
      gap: var(--sp-2);
      margin-top: var(--sp-3);
      flex-wrap: wrap
    }

    .sbtn {
      flex: 1;
      font-family: inherit;
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: var(--sp-2) var(--sp-3);
      border: 1px solid var(--line);
      color: var(--ink);
      text-decoration: none;
      text-align: center;
      background: transparent;
      cursor: pointer;
      white-space: nowrap
    }

    .sbtn:hover {
      border-color: var(--accent)
    }

    .foot {
      display: block;
      text-align: center;
      color: var(--dim);
      font-size: var(--fs-2xs);
      margin-top: var(--sp-6);
      text-transform: uppercase;
      letter-spacing: var(--track-label);
      line-height: 1.8
    }

    .foot .sub2 {
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: var(--fs-xs);
      margin-top: var(--sp-2)
    }

    .foot #netLabel {
      display: block
    }

    @media (max-width:560px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      header {
        flex-direction: column
      }
    }

    @media print {

      .searchwrap,
      .controls,
      .adv,
      .btn,
      .theme-toggle,
      #overlay {
        display: none !important
      }
    }