:root {
      --os-ground: #FAFAF9;
      --os-fam-surface: #FFFFFF;
      --os-font-body: "Inter", "Inter Greek", system-ui, -apple-system, sans-serif;
      --os-font-mono: "JetBrains Mono", "Inter Greek", ui-monospace, monospace;
      --lab-small: 11px;
      color-scheme: only light;
    }

    html, body {
      margin: 0;
      height: 100%;
      background: var(--os-ground);
      color: var(--os-ink);
      font-family: var(--os-font-body);
      overflow: hidden;
    }
    canvas#field {
      position: fixed;
      inset: 52px 0 0 0;
      width: 100%;
      height: 100%;
      display: block;
      background: var(--os-ground);
    }
    .shell {
      position: fixed;
      inset: 52px 0 0 0;
      pointer-events: none;
      z-index: 2;
    }
    .meter, .ledger-wrap, .bar {
      pointer-events: auto;
    }
    canvas#field:focus {
      outline: none;
    }
    canvas#field:focus-visible {
      outline: 2px solid var(--os-blue);
      outline-offset: -2px;
    }
    .meter {
      position: absolute;
      top: calc(var(--os-space-unit) * 4);
      left: calc(var(--os-space-unit) * 4);
      margin: 0;
      padding: calc(var(--os-space-unit) * 3) calc(var(--os-space-unit) * 4);
      border-radius: var(--os-radius-md);
      border: 1px solid var(--os-rule);
      background: var(--os-fam-surface);
      box-shadow: 0 1px 2px color-mix(in srgb, var(--os-ink) 8%, transparent),
                  0 10px 26px color-mix(in srgb, var(--os-ink) 6%, transparent);
      color: var(--os-fam-text);
      display: grid;
      gap: 10px;
      max-width: min(40rem, 58vw);
    }
    .ledger-wrap {
      position: absolute;
      top: calc(var(--os-space-unit) * 4);
      right: calc(var(--os-space-unit) * 4);
      width: min(22rem, 34vw);
      display: grid;
      align-content: start;
      gap: calc(var(--os-space-unit) * 2);
      min-width: 0;
    }
    .ledger-wrap h2 {
      margin: 0;
      font-size: var(--os-type-label-size);
      line-height: var(--os-type-label-leading);
      letter-spacing: var(--os-type-label-tracking);
      text-transform: uppercase;
      color: var(--os-fam-muted);
      font-weight: 500;
    }
    .ledger {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: auto;
      max-height: 48vh;
      display: grid;
      gap: calc(var(--os-space-unit) * 2);
    }
    .ledger li {
      margin: 0;
      padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 3);
      border-radius: var(--os-radius-sm);
      background: var(--os-fam-surface);
      border: 1px solid var(--os-rule);
      box-shadow: 0 1px 2px color-mix(in srgb, var(--os-ink) 6%, transparent);
      font-family: var(--os-font-mono);
      font-size: var(--lab-small);
      line-height: var(--os-type-caption-leading);
      letter-spacing: var(--os-type-caption-tracking);
      color: var(--os-fam-text);
    }
    .ledger li {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 2px 10px;
    }
    .ledger li b {
      font-weight: 500;
      color: var(--os-fam-text);
    }
    .ledger li em {
      font-style: normal;
      color: var(--os-fam-muted);
    }
    .meter-head {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--os-font-body);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
    }
    .meter-label {
      font-size: var(--lab-small);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--os-fam-muted);
    }
    .meter-name {
      font-family: var(--os-font-mono);
      font-weight: 500;
    }
    .meter-facts[hidden] {
      display: none;
    }
    .meter-facts {
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 20px;
    }
    .meter-facts div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .meter-facts dt {
      font-family: var(--os-font-body);
      font-size: var(--lab-small);
      line-height: 1.3;
      color: var(--os-fam-muted);
    }
    .meter-facts dd {
      margin: 0;
      font-family: var(--os-font-mono);
      font-size: 13px;
      line-height: 1.3;
      font-variant-numeric: tabular-nums;
      color: var(--os-fam-text);
    }
    :focus-visible,
    .bar button[data-press],
    .bar button[data-press]:active {
      transition: none;
    }
    .bar {
      position: absolute;
      left: calc(var(--os-space-unit) * 4);
      right: calc(var(--os-space-unit) * 4);
      bottom: calc(var(--os-space-unit) * 4);
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--os-space-unit) * 2);
      align-items: stretch;
    }
    .bar button {
      margin: 0;
      min-height: 40px;
      padding: 8px 12px;
      border: 1px solid var(--os-rule);
      border-radius: var(--os-radius-md);
      background: var(--os-fam-surface);
      box-shadow: 0 1px 2px color-mix(in srgb, var(--os-ink) 8%, transparent);
      color: var(--os-fam-text);
      font-family: var(--os-font-body);
      font-size: var(--os-type-label-size);
      line-height: var(--os-type-label-leading);
      letter-spacing: var(--os-type-label-tracking);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    .bar button:hover {
      background: color-mix(in srgb, var(--os-blue) 10%, var(--os-fam-surface));
      border-color: color-mix(in srgb, var(--os-blue) 40%, transparent);
    }
    kbd {
      font-family: var(--os-font-mono);
      font-size: var(--os-type-meta-size);
      letter-spacing: 0;
      min-width: 1.7em;
      padding: 3px 8px;
      border-radius: var(--os-radius-sm);
      border: 1px solid var(--os-rule);
      background: color-mix(in srgb, var(--os-rule) 80%, transparent);
      color: var(--os-fam-text);
      text-align: center;
      display: inline-block;
      line-height: 1.2;
    }
    .swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      border: 2px solid var(--os-blue);
      box-sizing: border-box;
      background: var(--os-fam-surface);
    }
    html:not([data-keys="on"]) .bar kbd {
      background: transparent;
      color: var(--os-fam-muted);
    }
    .live {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }
    .grow {
      display: none;
      pointer-events: none;
    }
    @media (hover: none), (max-width: 720px) {
      .bar kbd {
        display: none;
      }
    }
    @media (max-width: 720px) {
      html, body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        padding: 0 0 calc(var(--os-space-unit) * 3);
        gap: calc(var(--os-space-unit) * 2);
        box-sizing: border-box;
      }
      .shell {
        display: contents;
      }
      .tm-bar { order: 0; }
      .meter { order: 2; }
      canvas#field {
        order: 4;
        position: relative;
        inset: auto;
        flex: 1 1 auto;
        width: calc(100% - var(--os-space-unit) * 6);
        height: 300px;
        min-height: 260px;
        margin: 0 calc(var(--os-space-unit) * 3);
        border: 1px solid var(--os-rule);
        border-radius: var(--os-radius-md);
        box-sizing: border-box;
      }
      .ledger-wrap { order: 5; }
      .bar { order: 6; }
      .meter, .ledger-wrap, .bar {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: none;
        margin: 0 calc(var(--os-space-unit) * 3);
      }
      .meter {
        margin-top: calc(var(--os-space-unit) * 1);
      }
      .grow {
        display: none;
      }
      .ledger {
        max-height: 12vh;
      }
      .bar button {
        min-height: 36px;
        padding: 6px 10px;
      }
    }