@layer components {
  .radio-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .exercise-editor-grid {
    display: grid;
    gap: var(--space-5);
  }
  .exercise-provenance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    color: var(--color-text-muted);
    font: var(--type-caption);
  }
  .exercise-provenance + .exercise-adapted-from {
    margin-top: calc(-1 * var(--space-3));
  }
  @media (min-width: 1024px) {
    .exercise-editor-grid {
      grid-template-columns: 1.35fr 1fr;
      gap: var(--space-5);
      align-items: start;
    }
  }
  .editor-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .editor-col .checkbox-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2) var(--space-3);
    }
  }
  .editor-col fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }
  .editor-col legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font: var(--type-label);
    letter-spacing: var(--type-label-ls);
    color: var(--color-text);
  }
  .editor-col input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .editor-col input[type="number"]::-webkit-outer-spin-button,
  .editor-col input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .weekday-picker {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .weekday-pill {
    position: relative;
  }
  .weekday-pill input {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    margin: 0;
  }
  .weekday-pill span {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font: var(--type-label);
    letter-spacing: var(--type-label-ls);
    background: var(--color-surface);
    pointer-events: none;
  }
  .weekday-pill input:checked + span {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);
  }
  .weekday-pill input:focus-visible + span {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
  }
  .entity-row.is-cancelled .entity-title {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .btn {
    font: inherit;
    font: var(--type-button);
    cursor: pointer;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn:hover {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
  }
  .btn-block {
    width: 100%;
  }
  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary-dark);
  }
  .btn-secondary:hover {
    background: var(--color-bg);
  }
  .btn-small {
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    font: var(--type-button-sm);
  }
  .btn-quiet-danger {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-danger-text);
  }
  .btn-quiet-danger:hover,
  .btn-quiet-danger:focus-visible {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
  }
  .entity-actions form {
    display: contents;
  }
  .exercise-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .exercise-head {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-3);
    align-items: baseline;
    margin-bottom: var(--space-2);
  }
  .exercise-card h3 {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
    min-width: 0;
  }
  .exercise-adapted-from {
    color: var(--color-text-muted);
    font: var(--type-caption);
  }
  .exercise-fold > summary {
    list-style: none;
  }
  .exercise-fold > summary::-webkit-details-marker,
  .exercise-more > summary::-webkit-details-marker {
    display: none;
  }
  .exercise-fold > summary:focus-visible,
  .exercise-more > summary:focus-visible {
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .session-index ul {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .session-index li + li {
    border-top: 1px solid var(--color-border);
  }
  @media screen and (width < 1024px) {
    .exercise-fold > summary.exercise-head {
      grid-template-columns: 3rem minmax(0, 1fr) auto;
      grid-template-areas:
        "clock title more"
        "drawing drawing drawing";
      row-gap: var(--space-3);
      margin: 0;
      padding: var(--space-3) var(--space-4);
      cursor: pointer;
      touch-action: manipulation;
    }
    .exercise-fold > summary.exercise-head::after {
      grid-area: more;
      align-self: center;
      content: "›";
      font-size: 1.5rem;
      line-height: 1;
      color: var(--color-text-muted);
      transition: rotate 0.15s ease;
    }
    .exercise-fold[open] > summary.exercise-head::after {
      rotate: 90deg;
    }
    .exercise-head h3 {
      grid-area: title;
    }
    .exercise-row-drawing {
      grid-area: drawing;
      display: block;
      min-width: 0;
    }
    .exercise-row-drawing .rink-diagram {
      margin: 0;
    }
    .exercise-row-drawing .exercise-image {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .exercise-more {
      margin-bottom: var(--space-3);
    }
    .exercise-more > summary {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-height: 44px;
      list-style: none;
      font-weight: 600;
      color: var(--color-primary-dark);
      cursor: pointer;
    }
    .exercise-more > summary::after {
      content: "›";
      transition: rotate 0.15s ease;
    }
    .exercise-more[open] > summary::after {
      rotate: 90deg;
    }
    .attribution-wide {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .exercise-fold::details-content,
    .exercise-more::details-content {
      display: contents;
    }
    .exercise-fold > summary {
      pointer-events: none;
    }
    .session-index,
    .exercise-row-drawing,
    .exercise-more > summary,
    .exercise-more > .attribution {
      display: none;
    }
  }
  .exercise-image {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: var(--space-2) 0;
  }
  .attribution {
    font: var(--type-caption);
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0 0;
    overflow-wrap: anywhere;
  }
  .entity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .entity-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .entity-row .entity-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 12rem;
    min-width: 0;
  }
  .entity-row .entity-info .entity-title {
    font: var(--type-title);
  }
  .entity-row .entity-info .entity-subtitle {
    color: var(--color-text-muted);
    font: var(--type-caption);
  }
  .entity-row .entity-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .help-proposal {
    color: var(--color-warning-text);
  }
  .fase-glifo {
    flex: none;
    width: 17px;
    height: 37px;
    color: var(--color-text-muted);
    --fase-tinta: currentColor;
  }
  .fase-cornice {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    opacity: 0.45;
  }
  .fase-luce {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    opacity: 0.35;
  }
  .fase-luce.is-on {
    fill: var(--fase-tinta);
    stroke: none;
    opacity: 1;
  }
  .block-progress-track {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
  }
  .block-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
  }
  .rink-diagram {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--space-2) 0;
  }
  .exercise-card .rink-diagram {
    max-width: 34rem;
  }
  .exercise-diagram-preview {
    margin: var(--space-3) 0;
  }
  .exercise-diagram-preview .rink-diagram {
    max-width: 34rem;
  }
  .exercise-diagram-preview figcaption {
    font: var(--type-caption);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 34rem;
  }
  .partita-glifo {
    display: block;
    overflow: visible;
  }
  .partita-segno {
    fill: currentColor;
    stroke: var(--color-surface);
    stroke-width: 1.5;
    paint-order: stroke;
  }
  .partita-glifo.is-annullata .partita-segno {
    opacity: 0.45;
  }
  .partita-barra-alone {
    stroke: var(--color-surface);
    stroke-width: 3.5;
    stroke-linecap: round;
  }
  .partita-barra {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
  }
  .partita-glifo.is-da-verificare .partita-segno {
    fill: var(--color-surface);
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-dasharray: 2 1.4;
    paint-order: normal;
  }
  .print-only {
    display: none;
  }
  .sheet-preview {
    background: var(--paper-desk);
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-5) var(--space-4);
    overflow-x: auto;
  }
  @media screen and (width < 1024px) {
    .sheet-preview {
      margin-inline: calc(-1 * var(--space-3));
      padding-inline: var(--space-3);
    }
  }
  .sheet-preview .no-print {
    display: none;
  }
  .sheet-preview #print-actions,
  .sheet-preview #player-print-actions {
    display: flex;
    color: var(--color-on-fill);
  }
  .sheet-preview #print-actions {
    max-width: 21cm;
    margin: 0 auto var(--space-4) auto;
  }
  .sheet-preview .print-only {
    display: block;
  }
  .sheet-preview .gs-sheet {
    box-sizing: border-box;
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.1cm 1cm 0.8cm 1.5cm;
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 2px 12px var(--shade-35);
  }
  .lvl-1 { background: var(--lvl-1); color: var(--lvl-1-ink);
  }
  .lvl-2 { background: var(--lvl-2); color: var(--lvl-2-ink);
  }
  .lvl-3 { background: var(--lvl-3); color: var(--lvl-3-ink);
  }
  .lvl-4 { background: var(--lvl-4); color: var(--lvl-4-ink);
  }
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
  }
  .card > h2:first-child {
    margin-top: 0;
  }
  .jersey-number {
    display: inline-block;
    min-width: 2rem;
    padding: 0 var(--space-1);
    background: var(--color-text);
    color: var(--color-surface);
    border-radius: var(--radius-sm);
    font: var(--type-figure-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .jersey-number-none {
    background: transparent;
    color: var(--color-text-muted);
    font: var(--type-caption);
  }
  .table-scroll {
    position: relative;
    overflow-x: auto;
  }
  .roster-table {
    width: 100%;
    border-collapse: collapse;
  }
  .roster-table th,
  .roster-table td {
    text-align: left;
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }
  .census-tone-0 { --census-tint: var(--census-0);
  }
  .census-tone-1 { --census-tint: var(--census-1);
  }
  .census-tone-2 { --census-tint: var(--census-2);
  }
  .census-tone-3 { --census-tint: var(--census-3);
  }
  .census-tone-4 { --census-tint: var(--census-4);
  }
  .census-tone-5 { --census-tint: var(--census-5);
  }
  .census-none { --census-tint: var(--census-none);
  }
  .census-out {
    --census-fill: repeating-linear-gradient(135deg, var(--color-surface) 0 3px, var(--census-out) 3px 4.5px);
    --census-edge: var(--census-out);
  }
  .census-unknown {
    --census-fill: var(--color-surface);
    --census-edge: var(--census-unknown);
  }
  .census i {
    background: var(--census-fill, var(--census-tint, transparent));
    box-shadow: inset 0 0 0 1px var(--census-edge, transparent);
  }
  .census {
    container-type: inline-size;
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .census-proj-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto 3.2rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
  }
  .census-proj-row:first-child {
    border-top: 0;
  }
  .census-proj-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.45rem;
    min-width: 0;
    font: var(--type-body-strong);
  }
  .census-proj-name i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }
  .census-proj-name small {
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .census-proj-name small.census-proj-why {
    display: block;
    flex-basis: 100%;
    font: var(--type-caption);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
  }
  .census-proj-now {
    font: 600 var(--t-3) / 1 var(--font-cond);
    color: var(--color-text-muted);
  }
  .census-proj-next {
    min-width: 1.6rem;
    text-align: right;
    font: 700 var(--t-5) / 1 var(--font-cond);
  }
  .census-delta {
    justify-self: end;
    padding: 0.22rem 0.45rem;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
  }
  .census-delta-up {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
  }
  .census-delta-down {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
  }
  .census-proj-aside .census-proj-name {
    font: var(--type-body);
    color: var(--color-text-muted);
  }
  .census-proj-aside .census-proj-name small {
    display: block;
    flex-basis: 100%;
    font: var(--type-caption);
    letter-spacing: 0;
    text-transform: none;
  }
  .stack {
    flex: 1 1 0;
    min-width: 0;
  }
  .quick-add-table input[type="text"],
  .quick-add-table input[type="number"],
  .quick-add-table select {
    width: 100%;
    min-width: 0;
    padding: var(--space-1) var(--space-2);
  }
  .quick-add-table input[type="number"] {
    max-width: 6.5ch;
  }
  .quick-add-table td,
  .quick-add-table th {
    padding: var(--space-1) var(--space-2);
  }
  .quick-add-num {
    width: 2.5rem;
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .quick-add-fill td {
    background: var(--color-surface-2, var(--color-bg));
    border-bottom: 2px solid var(--color-border);
    vertical-align: middle;
  }
  .quick-add-fill select,
  .quick-add-fill input {
    max-width: 11ch;
    margin-right: var(--space-1);
  }
  .quick-add-row-error td {
    background: var(--color-danger-bg);
  }
  .quick-add-row-error td:first-child {
    box-shadow: inset 3px 0 0 var(--color-danger-border);
  }
  .quick-add-error-message td {
    padding-top: 0;
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    font: var(--type-caption);
  }
  .quick-add-question td {
    padding-top: 0;
    background: var(--color-info-bg, var(--color-surface-2, var(--color-bg)));
    font: var(--type-caption);
  }
  .quick-add-question select {
    margin-left: var(--space-2);
    max-width: 28ch;
  }
  .quick-wrap {
    container-type: inline-size;
  }
  .quick-grid {
    table-layout: fixed;
  }
  .quick-grid th {
    font: var(--type-thead);
    color: var(--color-text-muted);
  }
  .quick-grid td,
  .quick-grid th {
    padding: 2px var(--space-1);
  }
  .quick-grid input[type="text"],
  .quick-grid input[type="number"],
  .quick-grid select {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: var(--space-1) var(--space-2);
  }
  .quick-grid .q-num { width: 2rem;
  }
  .quick-grid .q-birth { width: 7rem;
  }
  .quick-grid .q-sex { width: 3.75rem;
  }
  .quick-grid .q-birth input {
    font-variant-numeric: tabular-nums;
  }
  .quick-grid .q-sex select {
    background-image: none;
    padding-inline: var(--space-2);
  }
  .quick-grid .q-sex select:has(option[value=""]:checked) {
    color: var(--color-text-muted);
  }
  .quick-grid .quick-row:focus-within > td {
    background: var(--color-primary-soft);
  }
  .quick-hint {
    margin: 0 0 var(--space-2);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .quick-fill {
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface-2, var(--color-bg));
    border-radius: var(--radius-md);
  }
  .quick-fill[hidden] {
    display: none;
  }
  .quick-fill > summary {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    font: var(--type-label);
    color: var(--color-primary-dark);
    cursor: pointer;
  }
  .quick-fill-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding-bottom: var(--space-2);
  }
  .quick-fill-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--type-label);
  }
  .quick-fill-item select,
  .quick-fill-item input {
    width: auto;
    min-width: 6rem;
  }
  @container (min-width: 56rem) {
    .quick-grid input[type="text"],
    .quick-grid input[type="number"],
    .quick-grid select {
      min-height: 2.25rem;
    }
    .quick-grid input::placeholder {
      color: transparent;
    }
    .quick-grid .q-birth input::placeholder {
      color: var(--color-text-muted);
      opacity: 0.6;
    }
    .quick-grid select {
      padding-right: 1.75rem;
      background-position: right 0.4rem center;
    }
    .quick-grid .q-sex select {
      padding-right: var(--space-2);
    }
  }
  @container (width < 56rem) {
    .quick-grid,
    .quick-grid tbody,
    .quick-grid td,
    .quick-grid .quick-add-error-message,
    .quick-grid .quick-add-question {
      display: block;
    }
    .quick-grid thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .quick-grid .quick-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-1) var(--space-2);
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--color-border);
    }
    .quick-grid .quick-row:has(+ .quick-add-error-message),
    .quick-grid .quick-row:has(+ .quick-add-question) {
      border-bottom-color: transparent;
    }
    .quick-grid td {
      padding: 0;
      border: 0;
      min-width: 0;
      background: transparent;
    }
    .quick-grid td:empty {
      display: none;
    }
    .quick-grid .quick-add-num {
      flex: 0 0 1.5rem;
      width: auto;
      text-align: left;
    }
    .quick-grid .q-first,
    .quick-grid .q-last {
      flex: 1 1 8rem;
      width: auto;
    }
    .quick-grid .q-birth {
      flex: 1 1 6rem;
      width: auto;
    }
    .quick-grid .q-sex {
      flex: 0 0 4.25rem;
      width: auto;
    }
    .quick-grid .quick-row.quick-add-row-error,
    .quick-grid .quick-add-error-message {
      background: var(--color-danger-bg);
    }
    .quick-grid .quick-row.quick-add-row-error > td,
    .quick-grid .quick-row.quick-add-row-error > td:first-child {
      background: transparent;
      box-shadow: none;
    }
    .quick-grid .quick-add-error-message td,
    .quick-grid .quick-add-question td {
      background: transparent;
    }
    .quick-grid .quick-add-error-message,
    .quick-grid .quick-add-question {
      padding: var(--space-1) var(--space-2);
      border-bottom: 1px solid var(--color-border);
    }
    .quick-grid .quick-add-question {
      background: var(--color-info-bg, var(--color-surface-2, var(--color-bg)));
    }
    .quick-grid .quick-add-question select {
      display: block;
      width: 100%;
      max-width: none;
      margin: var(--space-1) 0 0;
    }
  }
  .player-sheet {
    font: var(--typep-body);
    line-height: 1.4;
    color: var(--paper-ink);
  }
  .sheet-preview .player-sheet {
    box-sizing: border-box;
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm 1.5cm;
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 2px 12px var(--shade-35);
  }
  .stat-donut-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 30;
  }
  .stat-donut-seg {
    fill: none;
    stroke-width: 30;
  }
  .stat-donut-c1 { stroke: var(--color-primary); background: var(--color-primary);
  }
  .stat-donut-c2 { stroke: var(--chart-2); background: var(--chart-2);
  }
  .stat-donut-c3 { stroke: var(--color-ok-border); background: var(--color-ok-border);
  }
  #donut-points:checked ~ #donut-view-points,
  #donut-games:checked ~ #donut-view-games {
    display: block;
  }
  .career-chart {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .career {
    container: career / inline-size;
  }
  .career-body {
    --career-w: 330px;
    display: grid;
    grid-template-columns: minmax(0, var(--career-w));
    gap: var(--space-4);
    align-items: start;
  }
  .career-main {
    min-width: 0;
  }
  .career-figures {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: var(--career-w);
    margin: 0 0 var(--space-3);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .career-figure {
    min-width: 0;
    padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2);
  }
  .career-figure:first-child {
    padding-left: 0;
  }
  .career-figure + .career-figure {
    border-left: 1px solid var(--color-border);
  }
  .career-figure dt {
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .career-figure dd {
    margin: 0;
  }
  .career-figure-value {
    font: var(--type-figure-sm);
    font-variant-numeric: tabular-nums;
  }
  .career-figure-below {
    min-height: 1.35em;
    font: var(--type-caption);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .career .career-chart.is-wide,
  .career .when-wide {
    display: none;
  }
  .career-share .view-switch {
    margin-bottom: var(--space-2);
  }
  .career .share {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
  }
  .career .share-legend {
    flex: none;
    width: min(100%, 18rem);
    min-width: 0;
  }
  .career .share-legend > li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 3.5ch 6ch;
    column-gap: var(--space-2);
    align-items: baseline;
  }
  .career .share-legend > li > .share-key {
    align-self: center;
  }
  .career .share-legend > li > :nth-child(n + 3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .career-share-view {
    display: none;
  }
  .career-share:has(input[value="points"]:checked) > [data-view="points"],
  .career-share:has(input[value="games"]:checked) > [data-view="games"] {
    display: block;
  }
  @container career (min-width: 40rem) {
    .career-body {
      --career-w: 660px;
    }
    .career .career-chart.is-compact,
    .career .when-compact {
      display: none;
    }
    .career .career-chart.is-wide {
      display: block;
    }
    .career .when-wide {
      display: inline;
    }
    .career-figure {
      padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    }
    .career-figure-value {
      font: var(--type-figure);
    }
    .career .share {
      flex-direction: row;
      align-items: center;
      gap: var(--space-4);
    }
  }
  @container career (min-width: 60rem) {
    .career-body {
      grid-template-columns: minmax(0, var(--career-w)) minmax(14rem, 1fr);
    }
    .career-share {
      padding-top: var(--space-2);
    }
    .career .share {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
    }
  }
  .career-chart .grid-line {
    stroke: var(--color-border);
    stroke-width: 1;
  }
  .career-chart .axis-label {
    fill: var(--color-text-muted);
    font-size: var(--t-1);
    font-variant-numeric: tabular-nums;
  }
  .career-chart .axis-season {
    fill: var(--color-text);
    font-weight: 600;
  }
  .career-chart .axis-games {
    font-size: 11px;
  }
  .career-chart .axis-title {
    fill: var(--color-text);
    font-weight: 600;
  }
  .career-chart .bar-total {
    fill: var(--color-text);
    font-weight: 600;
  }
  .career-chart .career-category-rule {
    stroke: var(--color-text-muted);
    stroke-width: 1;
  }
  .career-chart .axis-category {
    fill: var(--color-text);
  }
  .career-chart .bar-goals { fill: var(--color-ok-border);
  }
  .career-chart .bar-assists { fill: var(--fam-tecnica);
  }
  .career-chart .career-line-halo,
  .career-chart .career-avg-halo {
    fill: none;
    stroke: var(--color-surface);
    stroke-width: 6;
    stroke-linejoin: round;
  }
  .career-chart .career-line {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 2;
    stroke-linejoin: round;
  }
  .career-chart .career-avg,
  .career-chart .career-avg-tick {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 2;
    stroke-dasharray: 5 4;
  }
  .career-chart .career-dot {
    fill: var(--color-text);
    stroke: var(--color-surface);
    stroke-width: 2;
  }
  .career-chart .career-dot.is-hollow {
    fill: var(--color-surface);
    stroke: var(--color-text);
  }
  .field-estimated {
    color: var(--color-text-muted);
    font-weight: 400;
  }
  .fixed-mark {
    display: inline-block;
    padding: 0 var(--space-1);
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: var(--type-eyebrow);
    vertical-align: 0.1em;
    white-space: nowrap;
  }
  .ruolo-glifo {
    flex: none;
    width: 42px;
    height: 34px;
    color: var(--color-text);
  }
  .ruolo-glifo.is-off {
    color: var(--color-text-muted);
    opacity: 0.55;
  }
  .ruolo-io-con-pallina,
  .ruolo-loro-con-pallina,
  .ruolo-pallina {
    fill: currentColor;
  }
  .ruolo-io {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
  }
  .ruolo-passaggio {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-dasharray: 3.5 3;
  }
  .ruolo-corsa,
  .ruolo-punta {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
  }
  .ruolo-linea {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
  }
  .legend-icon {
    display: block;
    width: auto;
    height: 20px;
  }
  .speed-lap-absent {
    color: var(--color-text-muted);
  }
  .speed-chart {
    display: block;
    width: 100%;
    min-width: 34rem;
    max-width: 48rem;
    height: auto;
    color: var(--color-text);
    font-family: var(--font-sans);
  }
  .speed-chart-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
  }
  .speed-chart-line-backward {
    stroke-dasharray: 6 4;
  }
  .speed-chart-mark-forward {
    fill: currentColor;
  }
  .speed-chart-mark-backward {
    fill: var(--color-surface);
    stroke: currentColor;
    stroke-width: 2;
  }
  .speed-chart text {
    fill: currentColor;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .speed-chart .speed-chart-kmh,
  .speed-chart .speed-chart-unit,
  .speed-chart .speed-chart-date,
  .speed-chart .speed-chart-season-teams {
    fill: var(--color-text-muted);
  }
  .speed-chart .speed-chart-time {
    font-weight: 600;
  }
  .speed-chart .speed-chart-season-name,
  .speed-chart .speed-chart-legend {
    font-size: 12px;
  }
  .speed-chart .speed-chart-season-name {
    font-weight: 700;
  }
  .speed-chart-grid {
    stroke: var(--color-border);
    stroke-width: 1;
  }
  .speed-chart-axis,
  .speed-chart-tick {
    stroke: currentColor;
    stroke-width: 1;
  }
  .speed-chart-season {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 2 3;
  }
  .stopwatch-queue-head {
    margin: 0 0 var(--space-2);
    font: 700 var(--t-3) / 1.3 var(--font-sans);
  }
  .stopwatch-queued-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
  }
  .stopwatch-queued {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2);
    border: 2px dashed currentColor;
    border-radius: var(--radius-sm);
    font: 600 var(--t-3) / 1.3 var(--font-sans);
  }
  .stopwatch-queued.is-refused {
    border: 4px double currentColor;
  }
  .stopwatch-queued-text {
    font-variant-numeric: tabular-nums;
  }
  .stopwatch-queued-state {
    font-weight: 700;
  }
  .stopwatch-dismiss {
    margin-left: auto;
  }
  .speed-lap-entry-mark {
    white-space: nowrap;
  }
  .next-season-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .next-season-fields > label {
    flex: 1 1 12rem;
  }
  .next-season-fields:has(select[name="next_season"] option[value="continues"]:checked) .next-season-reason {
    display: none;
  }
  .census-roles-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .census-role-cat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .census-role-bar {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.5rem;
    font: var(--type-caption);
    font-variant-numeric: tabular-nums;
  }
  .census-role-need {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    margin-left: -1px;
    background: var(--color-text-muted);
  }
  .panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }
  .strip {
    display: flex;
    gap: 2px;
    align-items: center;
  }
  .strip span {
    width: 0.6rem;
    height: 1.1rem;
    border-radius: 2px;
  }
  .s-keeper {
    background: var(--color-primary-strong);
  }
  .s-keepergap {
    background: var(--color-danger-border);
  }
  .s-full {
    background: var(--color-primary);
  }
  .s-jolly {
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary);
  }
  .s-gap {
    background: var(--color-danger-bg);
    box-shadow: inset 0 0 0 1px var(--color-danger-border);
  }
  .s-ideal {
    box-shadow: inset 0 0 0 1px var(--ideal-line);
  }
  .strip .s-trial {
    height: 0.65rem;
    opacity: 0.45;
  }
  .strip .stopmark {
    width: 0;
    border-left: 2px solid var(--color-danger-border);
    height: 1.45rem;
    margin: 0 3px;
  }
  .strip .gapmark {
    width: 0;
    border-left: 1px solid var(--color-text-muted);
    height: 1.35rem;
    margin: 0 3px;
  }
  .proj-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .proj-table {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
    table-layout: fixed;
  }
  .proj-table thead th:first-child {
    width: 9rem;
    text-align: left;
  }
  .proj-table th {
    font: var(--type-thead);
    color: var(--color-text-muted);
    padding: 0 0 0.2rem;
  }
  .proj-table thead th.now {
    color: var(--color-text);
  }
  .proj-table th[scope="row"] {
    text-align: left;
    font: var(--type-body-strong);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    white-space: nowrap;
    padding-right: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 3.6rem;
  }
  .proj-table th[scope="row"] small {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .proj-table td {
    height: 3.6rem;
    text-align: center;
    vertical-align: top;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font-variant-numeric: tabular-nums;
    padding: 0.5rem 0.4rem 0.2rem;
  }
  .proj-table td b {
    display: block;
    font: var(--type-body-strong);
    font-size: var(--t-4);
    line-height: 1.1;
  }
  .proj-table td small {
    display: block;
    font: 400 var(--t-1) / 1.15 var(--font-sans);
    overflow-wrap: anywhere;
  }
  .proj-table td.p-warn {
    background: var(--color-warning-bg);
    box-shadow: inset 0 0 0 1px var(--color-warning-border);
    color: var(--color-warning-text);
  }
  .proj-table td.p-stop {
    background: var(--color-danger-bg);
    box-shadow: inset 0 0 0 1px var(--color-danger-border);
    color: var(--color-danger-text);
  }
  .proj-table td.p-open {
    background: transparent;
    box-shadow: none;
    border: 1px dashed currentColor;
  }
  .proj-table td.p-none {
    background: transparent;
    box-shadow: none;
    color: var(--color-text-muted);
    vertical-align: middle;
    padding-top: 0.2rem;
  }
  .proj-table td.p-none em {
    font-style: normal;
    font-size: var(--t-2);
  }
  @media (width < 1024px) {
    .proj-scroll {
      margin-inline: calc(-1 * var(--space-4));
      padding-inline: var(--space-4);
    }
    .proj-scroll::after {
      content: "scorri per vedere gli anni →";
      display: block;
      font: var(--type-caption);
      color: var(--color-text-muted);
      padding-top: 0.5rem;
    }
    .proj-table {
      min-width: max-content;
    }
    .proj-table th[scope="row"],
    .proj-table thead th:first-child {
      position: sticky;
      left: 0;
      background: var(--color-surface);
      box-shadow: calc(-1 * var(--space-4)) 0 0 0 var(--color-surface);
      z-index: 1;
    }
    .proj-table td {
      min-width: 3.1rem;
    }
  }
  .watch-names .gone {
    color: var(--color-text-muted);
    text-decoration: line-through;
  }
  .watch-names .gone b,
  .watch-names .maybe b {
    text-decoration: none;
    font: var(--type-eyebrow);
    margin-left: 0.2rem;
  }
  .watch-names .gone b {
    color: var(--color-danger-text);
  }
  .watch-names .maybe b {
    color: var(--color-warning-text);
  }
  #proiezione:has(#oriz-4:checked) .proj-table :is(th, td):nth-child(n + 6),
  #proiezione:has(#oriz-7:checked) .proj-table :is(th, td):nth-child(n + 9) {
    display: none;
  }
  @media (width < 1024px) {
    #proiezione .proj-scroll {
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
    #proiezione .proj-scroll::after {
      content: none;
    }
    #proiezione .proj-table {
      min-width: 0;
      width: 100%;
      max-width: none;
    }
    #proiezione .proj-table thead {
      display: none;
    }
    #proiezione .proj-table,
    #proiezione .proj-table tbody,
    #proiezione .proj-table tbody tr {
      display: block;
    }
    #proiezione .proj-table tbody tr {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 0.5rem;
      margin-bottom: 0.5rem;
    }
    #proiezione .proj-table th[scope="row"] {
      height: auto;
      padding: 0 0 0.4rem;
      position: static;
      box-shadow: none;
    }
    #proiezione .proj-table td {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.5rem;
      height: auto;
      text-align: left;
      padding: 0.35rem 0.5rem;
      margin-bottom: 3px;
    }
    #proiezione .proj-table td::before {
      content: attr(data-year);
      font: var(--type-caption);
      color: var(--color-text-muted);
      flex: none;
      width: 2.6rem;
    }
    #proiezione .proj-table td b {
      display: inline;
      flex: none;
      width: 1.6rem;
      text-align: right;
    }
    #proiezione .proj-table td small {
      display: inline;
      font: var(--type-caption);
      white-space: normal;
    }
    #proiezione .proj-table td.p-none {
      justify-content: flex-start;
    }
  }
  .proj-table td.p-ok {
    background: color-mix(in srgb, var(--color-ok-border) 25%, var(--color-surface));
    box-shadow: inset 0 0 0 1px var(--color-ok-border);
    color: var(--projection-ok);
  }
  .proj-table td.p-ok-soft {
    background: var(--color-ok-bg);
    box-shadow: inset 0 0 0 1px
      color-mix(in srgb, var(--color-ok-border) 45%, var(--color-border));
    color: var(--color-ok-text);
  }
  .find-table {
    width: 100%;
    max-width: 62rem;
    border-collapse: collapse;
  }
  .find-table thead th {
    font: var(--type-thead);
    color: var(--color-text-muted);
    text-align: left;
    padding: 0 0.6rem 0.4rem;
  }
  .find-table th[scope="row"],
  .find-table td {
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--color-border);
    vertical-align: baseline;
    text-align: left;
  }
  .find-table th[scope="row"] {
    font: var(--type-body-strong);
    white-space: nowrap;
    border-left: 3px solid transparent;
    padding-left: 0.7rem;
  }
  .find-table tr.stop th[scope="row"] {
    border-left-color: var(--color-danger-border);
  }
  .find-table tr.warn th[scope="row"] {
    border-left-color: var(--color-warning-border);
  }
  .find-table th[scope="row"] small {
    display: block;
    font: var(--type-caption);
    color: var(--color-text-muted);
    font-weight: 400;
  }
  .find-table .find-miss {
    font: var(--type-body-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .find-table tr.stop .find-miss {
    color: var(--color-danger-text);
  }
  .find-table tr.warn .find-miss {
    color: var(--color-warning-text);
  }
  @media (width < 1024px) {
    .find-table,
    .find-table tbody,
    .find-table th[scope="row"],
    .find-table td {
      display: block;
    }
    .find-table tbody tr {
      display: flex;
      flex-wrap: wrap;
      column-gap: 1rem;
    }
    .find-table th[scope="row"] {
      flex: 1 0 100%;
    }
    .find-table tbody td {
      flex: 0 0 auto;
    }
    .find-table th[scope="row"] {
      white-space: normal;
    }
    .find-table thead {
      display: none;
    }
    .find-table tbody tr {
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 0.5rem 0.65rem;
      margin-bottom: 0.5rem;
    }
    .find-table tbody tr.stop {
      border-left-color: var(--color-danger-border);
    }
    .find-table tbody tr.warn {
      border-left-color: var(--color-warning-border);
    }
    .find-table th[scope="row"],
    .find-table td {
      border-top: 0;
      padding: 0.1rem 0;
    }
    .find-table th[scope="row"] {
      border-left: 0;
      padding-left: 0;
      margin-bottom: 0.25rem;
    }
    .find-table td::before {
      content: attr(data-label) " ";
      font: var(--type-caption);
      color: var(--color-text-muted);
    }
  }
  .sim-hypothesis {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
    box-shadow: inset 0 0 0 1px var(--color-warning-border);
    font: var(--type-body);
  }
  .sim-layout {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
  .sim-views {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }
  @media (width < 1024px) {
    .sim-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .sim-levers {
      position: static;
    }
    .sim-views {
      display: contents;
    }
  }
  @media (min-width: 1024px) {
    .sim-levers {
      position: sticky;
      top: var(--space-3);
    }
  }
  .sim-levers .panel {
    margin-bottom: 0;
    max-height: calc(100vh - 4rem);
    overflow: auto;
  }
  .sim-lever {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) 2.6rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
  }
  .sim-lever > label {
    font: var(--type-body-strong);
    font-size: var(--t-2);
    font-variant-numeric: tabular-nums;
  }
  .sim-lever > label small {
    display: block;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .sim-track {
    position: relative;
    display: block;
  }
  .sim-delta {
    text-align: right;
    font: var(--type-body-strong);
    font-size: var(--t-2);
    font-variant-numeric: tabular-nums;
  }
  .sim-delta.up b {
    color: var(--color-ok-text);
  }
  .sim-delta.down b {
    color: var(--color-danger-text);
  }
  .sim-lever.is-active {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
  }
  .sim-chart {
    display: block;
    width: 100%;
    height: auto;
  }
  .sim-chart .grid-line {
    stroke: var(--color-border);
    stroke-width: 1;
  }
  .sim-chart .rule-sheet {
    stroke: var(--color-danger-border);
    stroke-width: 2;
  }
  .sim-chart .rule-soft {
    stroke: var(--color-border);
    stroke-width: 1;
    stroke-dasharray: 3 4;
  }
  .sim-chart .rule-label {
    font: 400 11px var(--font-sans);
    fill: var(--color-danger-text);
  }
  .sim-chart .rule-label.soft {
    fill: var(--color-text-muted);
  }
  .sim-chart .axis-label {
    font: 400 11px var(--font-sans);
    fill: var(--color-text-muted);
  }
  .sim-chart .band-bad {
    fill: var(--color-danger-border);
    opacity: 0.06;
  }
  .sim-chart .was {
    fill: none;
    stroke: var(--census-tint);
    stroke-width: 1.5;
    stroke-dasharray: 2 4;
    opacity: 0.55;
  }
  .sim-chart .now {
    fill: none;
    stroke: var(--census-tint);
    stroke-width: 2.5;
  }
  .sim-chart .halo {
    fill: none;
    stroke: var(--color-surface);
    stroke-width: 6.5;
  }
  .sim-chart .dot {
    fill: var(--census-tint);
    stroke: var(--color-surface);
    stroke-width: 1.5;
  }
  .sim-chart .tie {
    stroke: var(--census-tint);
    stroke-width: 1;
    opacity: 0.55;
  }
  .sim-chart .tip {
    font: 600 18px var(--font-sans);
    fill: var(--color-text);
  }
  .sim-chart .grab {
    fill: transparent;
    cursor: ns-resize;
  }
  .sim-chart .grab:hover {
    fill: color-mix(in srgb, var(--census-tint) 18%, transparent);
  }
  .sim-gesture {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font: var(--type-body);
  }
  .proj-table td .sim-was {
    display: block;
    font: var(--type-caption);
    color: var(--color-text-muted);
    text-decoration: line-through;
  }
  .proj-table td .sim-add {
    display: block;
    font: var(--type-body-strong);
    font-size: var(--t-1);
    color: var(--color-primary-dark);
  }
  .proj-table td.sim-trace {
    box-shadow: inset 0 0 0 2px var(--color-primary-dark);
  }
  .proj-table td.sim-trace-soft {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary-dark) 35%, transparent);
  }
  .sim-track {
    --lever-thumb: 16px;
  }
  .sim-track .gap,
  .sim-track .tick {
    position: absolute;
    top: 50%;
    pointer-events: none;
  }
  .sim-track .gap {
    background: repeating-linear-gradient(
      -45deg,
      var(--color-danger-border) 0 3px,
      color-mix(in srgb, var(--color-danger-border) 45%, var(--color-surface)) 3px 6px
    );
  }
  .sim-track .tick {
    left: calc(var(--at) * (100% - var(--lever-thumb)) + var(--lever-thumb) / 2);
    width: 0;
  }
  .sim-delta .shift {
    display: block;
    font: var(--type-caption);
    font-weight: 700;
    color: var(--color-primary-dark);
  }
  .sim-delta.down .shift {
    color: var(--color-danger-text);
  }
  .sim-lever.is-moved {
    box-shadow: inset 3px 0 0 var(--color-primary);
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
  }
  .sim-lever.is-gestured {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
  .sim-legend {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font: var(--type-caption);
  }
  .sim-legend summary {
    cursor: pointer;
    font: var(--type-body-strong);
    font-size: var(--t-1);
  }
  .sim-legend ul {
    display: grid;
    gap: 0.55rem;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
  }
  .sim-legend li {
    display: grid;
    gap: 0.25rem;
  }
  .sim-gesture a {
    font-weight: 700;
  }
  .sim-gesture small {
    color: var(--color-text-muted);
  }
  .sim-track .goal {
    position: absolute;
    top: 50%;
    left: calc(var(--at) * (100% - var(--lever-thumb)) + var(--lever-thumb) / 2);
    width: 0.55rem;
    height: 0.55rem;
    margin-top: -0.275rem;
    margin-left: -0.275rem;
    border-radius: 50%;
    background: var(--color-text);
    pointer-events: none;
  }
  .sim-track .goal.done {
    background: none;
    border: 2px solid var(--color-text);
  }
  .sim-commit {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .sim-commit p {
    margin: 0 0 var(--space-2);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .find-table tr.find-goal th[scope="row"],
  .find-table tr.find-goal td {
    border-top: 0;
    color: var(--color-text-muted);
  }
  .find-table tr.find-goal th[scope="row"] {
    font-weight: 400;
    color: var(--color-text);
  }
  .find-table tr.find-goal b {
    color: var(--color-text);
  }
  .find-table tr.find-goal .mark {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--color-text);
  }
  .find-table tr.find-goal.done .mark {
    background: none;
    border: 2px solid var(--color-text);
  }
  .sim-panel .sim-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sim-panel .sim-levers {
    position: static;
    min-width: 0;
  }
  .sim-panel .sim-lever > label small {
    display: inline;
  }
  @media (width < 1024px) {
    .sim-panel .sim-views {
      display: contents;
    }
  }
  .sim-impact h3,
  .sim-commit h3 {
    font: var(--type-body-strong);
    margin: 0 0 var(--space-2);
  }
  .sim-impact {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
  }
  .sim-impact p {
    margin: 0;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .sim-impact p[hidden] {
    display: none;
  }
  .sim-panel .sim-commit {
    margin-top: 0;
  }
  .sim-panel .sim-views > * + * {
    margin-top: var(--space-3);
  }
  #trovare:has(#can-bambini:checked) .find-table tbody tr:not(:has([data-canale="bambini"])),
  #trovare:has(#can-societa:checked) .find-table tbody tr:not(:has([data-canale="societa"])) {
    display: none;
  }
  .sim-panel .sim-delta {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.3rem;
  }
  .sim-panel .sim-delta .shift {
    display: inline;
  }
  .sim-track {
    --lever-thumb: 20px;
    --lever-rail: 8px;
  }
  .sim-track::before,
  .sim-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--lever-rail);
    margin-top: calc(var(--lever-rail) / -2);
    border-radius: 999px;
    pointer-events: none;
  }
  .sim-track::before {
    right: 0;
    background: color-mix(in srgb, var(--color-border) 65%, var(--color-text-muted));
  }
  .sim-track::after {
    width: calc(var(--from) * (100% - var(--lever-thumb)) + var(--lever-thumb) / 2);
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  }
  .sim-track input[type="range"] {
    position: relative;
    z-index: 3;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--lever-thumb);
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    accent-color: auto;
  }
  .sim-track input[type="range"]::-webkit-slider-runnable-track {
    height: var(--lever-rail);
    background: transparent;
    border: 0;
  }
  .sim-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--lever-thumb);
    height: var(--lever-thumb);
    margin-top: calc((var(--lever-rail) - var(--lever-thumb)) / 2);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 40%, var(--color-surface));
    background: var(--paper);
    box-shadow: 0 1px 3px var(--shade-25);
  }
  .sim-track input[type="range"]::-moz-range-track {
    height: var(--lever-rail);
    background: transparent;
    border: 0;
  }
  .sim-track input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--lever-thumb);
    height: var(--lever-thumb);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 40%, var(--color-surface));
    background: var(--paper);
    box-shadow: 0 1px 3px var(--shade-25);
  }
  .sim-track input[type="range"]:focus {
    outline: none;
  }
  .sim-track input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .sim-track input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .sim-track .gap,
  .sim-track .tick,
  .sim-track .goal {
    z-index: 1;
  }
  .sim-track .gap {
    height: var(--lever-rail);
    margin-top: calc(var(--lever-rail) / -2);
    border-radius: 999px;
  }
  .sim-track .gap {
    left: calc(var(--from) * (100% - var(--lever-thumb)) + var(--lever-thumb));
    right: calc(100% - (var(--to) * (100% - var(--lever-thumb)) + var(--lever-thumb) / 2));
    width: auto;
  }
  .sim-panel .sim-lever.is-moved {
    margin-inline: -0.35rem;
    padding-inline: 0.7rem;
  }
  .sim-impact h3 small {
    font: var(--type-caption);
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.35rem;
  }
  .sim-panel .sim-lever {
    display: grid;
    grid-template-columns: 4.7rem 1.8rem minmax(0, 1fr) 2.8rem 3.4rem;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0;
    padding: 0 0.35rem;
  }
  .sim-levers > button[hidden] {
    display: none;
  }
  @media (width < 1024px) {
    .sim-panel .sim-lever {
      grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem 3.4rem;
      column-gap: 0.3rem;
    }
    .sim-panel .sim-lever > label small {
      display: none;
    }
  }
  .sim-commit {
    margin-top: var(--space-4);
    max-width: 52rem;
  }
  @media (min-width: 1024px) {
    .sim-panel .sim-layout {
      grid-template-columns: minmax(26rem, 30rem) minmax(0, 1fr);
    }
  }
  .sim-commit p.sim-commit-clears-lead {
    color: var(--color-warning-text);
  }
  .sim-commit p.sim-commit-clears-lead b {
    color: inherit;
  }
  .sim-commit p[hidden] {
    display: none;
  }
  .import-form {
    background: none;
    border: 0;
    padding: 0;
  }
  .import-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
  }
  .import-kid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0;
  }
  .import-line {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }
  .import-pick {
    display: block;
    margin-top: var(--space-2);
  }
  .import-pick select {
    width: 100%;
    min-width: 0;
  }
  .import-reach {
    flex-basis: 100%;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }
  .import-conflict {
    flex-basis: 100%;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .import-conflict legend {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
  }
  .import-conflict .choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  p.import-reach {
    margin: var(--space-1) 0 0;
  }
  .contact-mobile select {
    width: auto;
  }
  .sync-running {
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .sync-running-title {
    font: var(--type-title);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .sync-running-now {
    margin: var(--space-3) 0 0;
    font: var(--type-body-strong);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sync-running-now[hidden] {
    display: none;
  }
  .sync-running-now .eyebrow {
    font: var(--type-eyebrow);
    color: var(--color-primary-dark);
  }
  @media (width < 1024px) {
    .sync-running-title {
      font-size: 1rem;
    }
  }
  @supports (color: light-dark(#000, #fff)) {
    .gs-sheet,
    .player-sheet,
    .pres-sheet,
    .rink-diagram {
      color-scheme: light;
    }
  }
  .stepper {
    display: contents;
  }
  .stepper-btn {
    display: none;
  }
  @media (width < 1024px) {
    .stepper.is-ready {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: var(--space-2);
      align-items: stretch;
    }
    .stepper.is-ready .stepper-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-family: var(--font-sans);
      font-weight: 500;
      cursor: pointer;
      color: var(--color-primary-dark);
      font-size: 1.375rem;
      line-height: 1;
      touch-action: manipulation;
    }
    .stepper.is-ready .stepper-btn:hover {
      background: var(--color-bg);
    }
    .stepper.is-ready .stepper-btn[aria-disabled="true"] {
      cursor: default;
      opacity: 0.45;
    }
    .stepper.is-ready input[type="number"] {
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
  }
  .tagging-phone-note {
    display: none;
  }
  @media screen and (width < 1024px) {
    .tagging-phone-note {
      display: block;
    }
    .tagging-phone-note p {
      margin: 0 0 var(--space-3);
    }
    .tagging-phone-note .btn {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
    .sheet-preview {
      container-type: inline-size;
    }
    .sheet-preview .gs-sheet,
    .sheet-preview .player-sheet,
    .sheet-preview .pres-sheet {
      zoom: min(1, tan(atan2(100cqi, 21cm)));
    }
    .player-page:not(.sheet-preview) > #player-print-actions {
      display: none;
    }
  }
  .initial-index {
    display: none;
  }
  @media screen and (width < 1024px) {
    .initial-index {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
      gap: var(--space-1);
      margin: 0 0 var(--space-3);
    }
    .initial-index a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      color: var(--color-primary-dark);
      font-weight: 600;
      text-decoration: none;
    }
  }
  .aimed-steps {
    grid-area: steps;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .aimed-steps li {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.3rem;
    font: 600 0.75rem / 1.1 var(--font-sans);
    color: var(--color-text-muted);
    text-align: center;
  }
  .aimed-steps li::before {
    content: "";
    position: absolute;
    top: 0.8rem;
    right: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--color-border);
  }
  .aimed-steps li:first-child::before {
    display: none;
  }
  .aimed-steps li.is-done,
  .aimed-steps li.is-current {
    color: var(--color-text);
  }
  .aimed-steps li.is-done::before,
  .aimed-steps li.is-current::before {
    background: var(--color-primary);
  }
  .aimed-step[hidden] {
    display: none;
  }
  .aimed-stage {
    display: grid;
    gap: 0.9rem;
  }
  .aimed-stage > * {
    margin: 0;
  }
  .aimed-context-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
  }
  .aimed-context-fold > summary::-webkit-details-marker {
    display: none;
  }
  .aimed-done-label {
    display: block;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .aimed-change {
    color: var(--color-primary-ink);
    text-decoration: underline;
    font: var(--type-caption);
    white-space: nowrap;
  }
  .aimed-model,
  .aimed-model-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: start;
    max-width: 100%;
    background: var(--color-ai-soft);
    border: 1px solid var(--color-ai-line);
    border-radius: var(--radius-pill);
    color: var(--color-ai-ink);
    font: 600 0.8125rem / 1.2 var(--font-sans);
  }
  .aimed-model {
    padding: 0 0.2rem 0 0.65rem;
  }
  .aimed-model-note {
    padding: 0.3rem 0.65rem;
    font-variant-numeric: tabular-nums;
  }
  .aimed-model label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    color: var(--color-ai-ink);
    font: inherit;
  }
  .aimed-model .ai-mark,
  .aimed-model-note .ai-mark {
    color: var(--color-ai);
    margin: 0 0.35em 0 0;
  }
  .aimed-model select {
    width: auto;
    max-width: 14rem;
    min-height: 36px;
    border: 0;
    background: transparent;
    padding: 0.2rem 0.3rem;
    font-weight: 600;
    color: var(--color-ai-ink);
    font-variant-numeric: tabular-nums;
  }
  .aimed-problem {
    width: 100%;
    box-sizing: border-box;
    min-height: 9rem;
    font: var(--type-body);
    font-size: 1.125rem;
  }
  .aimed-guided-title {
    margin-top: var(--space-4);
  }
  .aimed-stage > .aimed-guided-title {
    margin-top: var(--space-2);
  }
  .aimed-candidates {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  }
  .aimed-candidate {
    display: grid;
    gap: var(--space-2);
    align-content: start;
  }
  .aimed-candidate > p {
    margin: 0;
  }
  .aimed-candidate-figure {
    max-width: 15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--paper);
  }
  .aimed-candidate-figure svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .aimed-candidate > .btn {
    justify-self: start;
  }
  .aimed-cost {
    font-size: var(--t-2);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .aimed-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
  }
  .aimed-point {
    display: grid;
    grid-template-columns: minmax(6.5rem, 12rem) 1fr;
    gap: var(--space-3);
    align-items: start;
  }
  .aimed-target > summary {
    cursor: pointer;
  }
  form.aimed-save {
    background: none;
    border: 0;
    padding: 0;
    margin: var(--space-3) 0 0;
    gap: var(--space-2);
  }
  form.aimed-save > h3 {
    margin: 0;
  }
  .aimed-target {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }
  .aimed-target > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
  }
  .aimed-save-bar {
    position: sticky;
    bottom: var(--bottom-nav-space);
    z-index: 3;
    display: grid;
    padding: var(--space-2) 0;
    background: var(--color-bg);
    box-shadow: 0 -6px 8px -6px var(--shade-12);
  }
  .aimed-save-bar > .btn {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .aimed-save-bar {
      bottom: 0;
    }
  }
  .aimed-point-new {
    border-style: dashed;
  }
  .aimed-generated-figure svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .aimed-changes {
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning-border);
    border-radius: 4px;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }
  .aimed-changes p {
    margin: var(--space-1) 0 0;
    white-space: pre-line;
  }
  .ai-mark {
    flex: none;
    margin-right: 0.35em;
    vertical-align: -2px;
  }
  .btn-ai {
    background: var(--color-ai);
    border-color: var(--color-ai);
    color: var(--color-on-fill);
  }
  .btn-ai:hover {
    background: var(--color-ai-strong);
    border-color: var(--color-ai-strong);
  }
  .ai-edge {
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    background:
      linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
      linear-gradient(115deg, var(--color-ai), var(--color-primary) 55%, var(--color-ai)) border-box;
    background-size: 100% 100%, 200% 100%;
  }
  .ai-edge.is-working {
    animation: ai-edge 5s linear infinite;
  }
  .aimed-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
  }
  .aimed-facts > span {
    font: var(--type-caption);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.05rem 0.6rem;
    color: var(--color-text-muted);
  }
  .aimed-figure {
    background: var(--paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color-scheme: light;
    overflow: hidden;
  }
  .aimed-wait {
    display: grid;
    gap: 0.9rem;
    justify-items: center;
    text-align: center;
    padding: 1.1rem var(--space-3) var(--space-3);
  }
  .aimed-wait[hidden] {
    display: none;
  }
  .aimed-wait > * {
    margin: 0;
  }
  .aimed-wait-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    color: var(--color-ai);
    background: var(--color-ai-soft);
    box-shadow: 0 0 0 1px var(--color-ai-line);
  }
  .aimed-wait-orb .ai-mark {
    margin: 0;
  }
  .aimed-wait-orb::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid var(--color-ai-line);
  }
  .is-working .aimed-wait-orb::after {
    animation: aimed-ring 2.2s ease-out infinite;
  }
  .is-working .aimed-wait-orb .ai-mark {
    animation: aimed-pulse 1.6s ease-in-out infinite;
  }
  .aimed-wait[data-kind="generation"] .aimed-wait-phrase {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .aimed-wait-phases {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    justify-self: stretch;
    max-width: 26rem;
    margin: 0 auto;
    text-align: left;
  }
  .aimed-wait-phases li {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
  }
  .aimed-wait-phases small {
    color: var(--color-text-muted);
  }
  .aimed-wait-phases li.is-done {
    color: var(--color-text);
  }
  .aimed-wait-phases li.is-active {
    color: var(--color-text);
    font-weight: 600;
  }
  .aimed-wait-bar {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--color-border);
    overflow: hidden;
  }
  .aimed-wait-bar i {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-ai), var(--color-primary));
  }
  .is-working .aimed-wait-bar i {
    animation: aimed-slide 1.6s ease-in-out infinite;
  }
  .aimed-wait-timer {
    font-weight: 600;
    color: var(--color-text);
  }
  .aimed-wait-late[hidden] {
    display: none;
  }
  .aimed-wait-late {
    font: var(--type-label);
    color: var(--color-warning-text);
  }
  .aimed-wait[data-kind="short"] [data-only="generation"] {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .ai-edge.is-working,
    .is-working .aimed-wait-orb::after,
    .is-working .aimed-wait-orb .ai-mark,
    .is-working .aimed-wait-bar i {
      animation: none;
    }
    .is-working .aimed-wait-bar i {
      width: 100%;
    }
  }
  @media (width < 1024px) {
    .aimed-point {
      grid-template-columns: 1fr;
    }
  }
  .birth-dmy {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .birth-part {
    display: grid;
    gap: 2px;
    justify-items: center;
  }
  .birth-part small {
    font-size: var(--t-1);
    color: var(--color-text-muted);
  }
  .birth-dmy input[type="text"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .birth-dmy input.birth-day,
  .birth-dmy input.birth-month {
    width: 3.6em;
  }
  .birth-dmy input.birth-year {
    width: 5.4em;
  }
  .birth-dot {
    font-weight: 600;
    color: var(--color-text-muted);
    padding-bottom: 20px;
  }
  .birth-reading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    font-size: var(--t-2);
    min-height: 1.5em;
  }
  .birth-reading.is-error {
    color: var(--color-danger-text);
    font-weight: 600;
  }
  .birth-value {
    font-weight: 600;
  }
  .birth-chip {
    font: 700 var(--t-1) / 1.2 var(--font-cond);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
  }
  .birth-chip-part {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
  }
  .birth-chip-none {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
  }
  .page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0 0 12px;
    border-bottom: 1px solid var(--color-border);
  }
  .page-head-text {
    order: 0;
    min-width: 0;
  }
  .page-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-1);
    margin: 0 0 var(--space-1);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .page-crumbs a {
    position: relative;
    color: inherit;
    text-decoration: none;
  }
  .page-crumbs a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }
  .page-crumbs a::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
  }
  .page-crumbs > * + *::before {
    content: "· ";
    color: var(--color-text-muted);
  }
  .page-title {
    margin: 0;
    font: var(--type-screen);
    overflow-wrap: break-word;
  }
  .page-meta {
    margin: 2px 0 0;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  .page-head.is-cancelled :is(.page-title, .page-meta:first-of-type) {
    text-decoration: line-through;
    color: var(--color-text-muted);
  }
  .page-head-actions {
    order: 3;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .page-head-actions > * {
    flex: none;
    margin: 0;
    white-space: nowrap;
  }
  .page-head-actions form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .page-head-actions > form {
    display: flex;
    gap: var(--space-2);
  }
  .page-head-actions .btn {
    min-height: 40px;
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
    gap: var(--space-1);
  }
  .page-head-actions:has(details[open]) {
    flex-wrap: wrap;
    overflow: visible;
  }
  .how {
    display: contents;
  }
  .how > summary {
    order: 1;
    align-self: flex-start;
    list-style: none;
    cursor: pointer;
    font: 500 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-primary-dark);
    white-space: nowrap;
  }
  .how > summary::-webkit-details-marker {
    display: none;
  }
  .how > summary::after {
    content: " ›";
  }
  .how[open] > summary::after {
    content: " ⌄";
  }
  .how > summary:hover {
    text-decoration: underline;
  }
  .how::details-content {
    order: 2;
    flex-basis: 100%;
  }
  .how:not([open])::details-content {
    display: none;
  }
  .how-body {
    max-width: var(--text-measure);
    padding: var(--space-2) 0 var(--space-1);
    color: var(--color-text-muted);
  }
  .how-body > :last-child {
    margin-bottom: 0;
  }
  @supports not selector(::details-content) {
    .how {
      display: block;
      order: 2;
      flex-basis: 100%;
    }
  }
  .sub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
  }
  .sub-head > :is(h2, h3) {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  .sub-head > .how > summary {
    margin-left: auto;
    align-self: baseline;
  }
  @media screen and (min-width: 1024px) {
    #player-print-actions {
      display: flex;
    }
  }
  @media (min-width: 1024px) {
    .page-head {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: var(--space-2) var(--space-4);
      margin-bottom: 20px;
    }
    .page-head-text {
      flex: 1 1 20rem;
    }
    .page-head > .how > summary {
      align-self: flex-end;
      padding-bottom: 6px;
    }
    .page-head > .how::details-content {
      order: 4;
    }
    .page-head-actions {
      order: 2;
      margin-left: auto;
      flex-wrap: wrap;
      justify-content: flex-end;
      overflow: visible;
      padding-bottom: 0;
    }
    .page-crumbs a::after {
      inset: -6px -4px;
    }
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .page-head-actions .btn {
      min-height: 32px;
    }
  }
  .note {
    margin: 0 0 var(--space-3);
    max-width: var(--text-measure);
    font: 400 var(--t-2) / 1.45 var(--font-sans);
    color: var(--color-text-muted);
  }
  .button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
  }
  :is(.button-row, .page-head-actions)[hidden] {
    display: none;
  }
  .button-row > .note,
  .button-row > .help {
    flex: 1 1 16rem;
    margin: 0;
  }
  #player-print-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
  }
  @media screen and (width < 1024px) {
    .button-row.quick-submit {
      position: sticky;
      bottom: var(--bottom-nav-space);
      z-index: 3;
      flex-wrap: nowrap;
      gap: var(--space-2);
      margin-inline: calc(-1 * var(--space-2));
      padding: var(--space-2);
      border-radius: var(--radius-md);
      background: var(--color-surface);
      box-shadow: 0 -2px 8px var(--shade-08);
    }
    .button-row.quick-submit > button {
      padding-inline: var(--space-3);
      white-space: nowrap;
    }
  }
  .button-row > form {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .fold {
    margin: 0 0 var(--space-3);
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .fold > summary {
    display: inline;
    list-style: none;
    cursor: pointer;
  }
  .fold > summary::-webkit-details-marker {
    display: none;
  }
  .fold:not([open]) > summary::after {
    content: "altro ›";
    margin-left: var(--space-2);
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
  }
  .fold:not([open]) > summary[data-more]::after {
    content: attr(data-more) " ›";
  }
  .fold[open]::details-content {
    display: contents;
  }
  .guardrail > .fold {
    margin: 0 0 var(--space-1);
    font: var(--type-body);
  }
  label:not([class]),
  .field > label {
    display: block;
    font: 600 var(--t-2) / 1.35 var(--font-sans);
    color: var(--color-text);
  }
  label:not([class]) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    margin-top: var(--space-1);
  }
  label:not([class]) > :is(.help, .help-error, .place-field) {
    margin-top: var(--space-1);
  }
  label:not([class]) > .help {
    display: block;
  }
  .optional {
    font-weight: 400;
    color: var(--color-text-muted);
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
    box-sizing: border-box;
    min-height: var(--field-height);
    padding: 0 10px;
    font: 400 var(--t-3) / 1.3 var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: var(--field-radius);
    box-shadow: none;
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > select {
    padding-inline-end: 2.25rem;
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > textarea {
    min-height: calc(2 * var(--field-height));
    padding-block: 6px;
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > :is(input, select, textarea):hover:enabled {
    border-color: var(--color-text-muted);
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--color-signature);
    outline-offset: 0;
    border-color: transparent;
    box-shadow: none;
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > :is(input, select, textarea):disabled {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
  }
  :is(label:not([class]), .field, label:not([class]) > :is(.place-field, .stepper)) > :is(input, select, textarea)[aria-invalid="true"],
  :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-danger-border);
  }
  .help {
    margin: 0;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  :is(form, fieldset) > :is(label, .field, .fields) + :is(.help, .help-error) {
    margin-top: calc(var(--space-1) - var(--space-3));
  }
  .help-error {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 0;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-danger-text);
  }
  .help-error::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1 15.5 14.5H.5L8 1Zm-.75 5h1.5v4.5h-1.5V6Zm0 5.5h1.5V13h-1.5v-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  :is(label, .field):has(.help-error) .help,
  .help:has(~ .help-error),
  .help-error ~ .help {
    display: none;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }
  .choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--field-height);
    font: 400 var(--t-3) / 1.35 var(--font-sans);
    color: var(--color-text);
  }
  .choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .choices > legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font: 600 var(--t-2) / 1.35 var(--font-sans);
    color: var(--color-text);
  }
  .choices > :is(.help, .help-error) {
    flex-basis: 100%;
  }
  fieldset:not([class]):not([disabled]) {
    min-width: 0;
    max-width: 720px;
    margin: 0;
    padding: var(--space-2) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
  }
  fieldset:not([class]):not([disabled]) > legend {
    padding: 0 var(--space-2) 0 0;
    font: 600 var(--t-3) / 1.4 var(--font-sans);
    color: var(--color-text);
  }
  :is(form, fieldset:not([class])) > :is(label:not([class]), .field, .help, .help-error, .choices) {
    max-width: 720px;
  }
  .fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: start;
    max-width: 720px;
  }
  @media (width < 1024px) {
    .fields {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .form-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    max-width: 720px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .fields-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-3);
  }
  .fields-inline > :is(label, .field) {
    flex: 1 1 12rem;
  }
  .tabs {
    --tab-height: 44px;
    position: relative;
    display: flex;
    gap: var(--space-4);
    min-inline-size: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tab {
    display: inline-flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tab-height);
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: inset 0 -2px 0 transparent;
    font: 500 var(--t-3) / 1 var(--font-sans);
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .tab:hover {
    color: var(--color-text);
  }
  .tab[aria-current="page"],
  .tab[aria-selected="true"],
  .tab-radio:checked + .tab {
    color: var(--color-text);
    box-shadow: inset 0 -2px 0 var(--color-primary);
  }
  .tab-count {
    font: 600 var(--t-1) / 1 var(--font-sans);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .view-switch {
    --tab-height: 44px;
    position: relative;
    display: inline-flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-sizing: border-box;
  }
  .view-switch-option {
    display: inline-flex;
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: calc(var(--tab-height) - 6px);
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    font: 500 var(--t-3) / 1 var(--font-sans);
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .view-switch-option:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  .view-switch-option[aria-current="page"],
  .view-switch-option[aria-pressed="true"],
  .view-switch-radio:checked + .view-switch-option {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }
  .view-switch-option small {
    font-weight: 400;
    opacity: 0.8;
  }
  .tab-radio,
  .view-switch-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .tab:focus-visible,
  .tab-radio:focus-visible + .tab,
  .view-switch-option:focus-visible,
  .view-switch-radio:focus-visible + .view-switch-option {
    outline: 2px solid var(--color-signature);
    outline-offset: -2px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .tabs,
    .view-switch {
      --tab-height: 32px;
    }
  }
  .diagram-markers {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .bordo {
    color-scheme: light;
    --bordo-ink: var(--paper-ink);
    --bordo-paper: var(--paper);
    --bordo-gutter: clamp(0.75rem, 3vmin, 1.5rem);
    --bordo-target: 3.5rem;
    --bordo-rule-min: 2.3rem;
    --bordo-name-min: 3rem;
    --t-1: calc(0.75rem / var(--inter-scale));
    --t-2: calc(0.875rem / var(--inter-scale));
    --t-3: calc(1rem / var(--inter-scale));
    --t-4: calc(1rem / var(--inter-scale));
    --t-5: calc(1.0625rem / var(--inter-scale));
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    font: var(--type-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .bordo *,
  .bordo *::before,
  .bordo *::after {
    box-sizing: border-box;
  }
  :where(.bordo) :is(p, li, dd, figcaption) {
    hyphens: manual;
    overflow-wrap: normal;
  }
  .bordo-where {
    grid-area: where;
    align-self: center;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    font: 700 var(--t-4) / 1.15 var(--font-sans);
  }
  .bordo-exercise .bordo-where::before {
    content: "";
    flex: none;
    align-self: stretch;
    width: 0.3125rem;
    border-radius: var(--radius-pill);
    background: var(--color-signature);
  }
  .bordo-title {
    margin: 0;
    font: 700 clamp(2.25rem, 1.5rem + 4.5vmin, 4.25rem) / 1 var(--ty-display);
    overflow-wrap: break-word;
    hyphens: manual;
  }
  .bordo-exit,
  .bordo-link {
    grid-area: exit;
    align-self: start;
    display: inline-flex;
    align-items: center;
    min-height: var(--bordo-target);
    padding: 0 var(--space-3);
    border: 2px solid var(--bordo-ink);
    border-radius: var(--radius-sm);
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    font: 600 var(--t-4) / 1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
  }
  .bordo-exit:focus-visible,
  .bordo-link:focus-visible,
  .bordo-pick:focus-visible + .bordo-step {
    outline: 3px solid var(--bordo-ink);
    outline-offset: 3px;
  }
  .bordo-pick {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bordo .rink-diagram {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .bordo-awake {
    grid-area: awake;
    margin: 0;
    font: 600 var(--t-2) / 1.3 var(--font-sans);
  }
  .bordo-concept {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(30%, 1fr);
    grid-template-areas:
      "name   exit"
      "rule   rule"
      "schema schema";
    gap: var(--space-3);
    padding: var(--bordo-gutter);
    padding-top: calc(var(--bordo-gutter) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--bordo-gutter) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--bordo-gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--bordo-gutter) + env(safe-area-inset-right, 0px));
  }
  .bordo-name {
    grid-area: name;
    min-width: 0;
    margin: 0;
    font: 700 clamp(var(--bordo-name-min), 1.5rem + 6vmin, 5rem) / 1 var(--ty-display);
    overflow-wrap: break-word;
    hyphens: manual;
  }
  .bordo-rule {
    grid-area: rule;
    max-width: 24ch;
    margin: 0;
    font: 600 clamp(var(--bordo-rule-min), 1rem + 3vmin, 3.25rem) / 1.2 var(--font-sans);
    hyphens: manual;
  }
  .bordo-frames {
    grid-area: schema;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--bordo-frames, 1), minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }
  .bordo-frames.is-single {
    row-gap: 0;
  }
  .bordo-frame {
    grid-row: 1;
    grid-column: 1 / -1;
    display: none;
    min-height: 0;
    margin: 0;
  }
  .bordo-pick:checked + .bordo-step + .bordo-frame {
    display: block;
  }
  .bordo-step {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bordo-target);
    border: 2px solid var(--bordo-ink);
    border-radius: var(--radius-sm);
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    font: 700 var(--t-5) / 1 var(--font-sans);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bordo-pick:checked + .bordo-step {
    background: var(--bordo-ink);
    color: var(--bordo-paper);
  }
  .bordo-frames.is-single .bordo-step {
    display: none;
  }
  .bordo-session {
    height: 100%;
  }
  .bordo-session .bordo-pick {
    position: fixed;
    top: 0;
    left: 0;
  }
  .bordo-screen {
    display: none;
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--bordo-gutter);
    padding-top: calc(var(--bordo-gutter) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--bordo-gutter) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--bordo-gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--bordo-gutter) + env(safe-area-inset-right, 0px));
  }
  .bordo-pick:checked + .bordo-screen {
    display: grid;
  }
  .bordo-opening {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "where exit"
      "title title"
      "facts facts"
      "awake awake"
      "nav   nav";
  }
  .bordo-exercise {
    grid-template-rows: auto minmax(0, max-content) minmax(30%, 1fr) auto;
    grid-template-areas:
      "where   exit"
      "text    text"
      "drawing drawing"
      "nav     nav";
  }
  .bordo-closing {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "where exit"
      "text  text"
      "nav   nav";
  }
  .bordo-opening > .bordo-title {
    grid-area: title;
    font-size: clamp(2.75rem, 1.5rem + 7vmin, 5rem);
  }
  .bordo-facts {
    grid-area: facts;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }
  .bordo-facts div {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--bordo-ink);
  }
  .bordo-facts dt {
    font: 700 var(--t-3) / 1.2 var(--font-sans);
  }
  .bordo-facts dd {
    margin: 0;
    font: 600 clamp(1.375rem, 1rem + 2vmin, 2.25rem) / 1.2 var(--font-sans);
  }
  .bordo-text {
    grid-area: text;
    min-height: 0;
    overflow: hidden;
  }
  .bordo-exercise .bordo-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "clock title"
      "goal  goal";
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
  }
  .bordo-clock {
    grid-area: clock;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: 700 clamp(2.75rem, 1.75rem + 5vmin, 5rem) / 1 var(--ty-display);
  }
  .bordo-exercise .bordo-title {
    grid-area: title;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .bordo-goal {
    grid-area: goal;
    max-width: 34ch;
    margin: 0;
    font: 600 clamp(1.125rem, 0.85rem + 1.6vmin, 1.75rem) / 1.25 var(--font-sans);
    hyphens: manual;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .bordo .fase-glifo {
    flex: none;
    width: auto;
    height: 0.8em;
    color: var(--color-text-muted);
    --fase-tinta: currentColor;
  }
  .bordo .fase-possesso {
    --fase-tinta: var(--fase-verde);
  }
  .bordo .fase-transizione {
    --fase-tinta: var(--fase-arancio);
  }
  .bordo .fase-non-possesso {
    --fase-tinta: var(--fase-rosso);
  }
  .bordo .fase-cornice {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    opacity: 0.45;
  }
  .bordo .fase-luce {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    opacity: 0.35;
  }
  .bordo .fase-luce.is-on {
    fill: var(--fase-tinta);
    stroke: none;
    opacity: 1;
  }
  .bordo-drawing {
    grid-area: drawing;
    min-height: 0;
    container-type: size;
  }
  .bordo-picture {
    width: 100%;
    height: 100%;
  }
  .bordo-portrait {
    display: none;
  }
  @container (orientation: portrait) {
    .bordo-portrait {
      display: block;
    }
    .bordo-landscape {
      display: none;
    }
  }
  .bordo-images {
    height: 100%;
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--space-2);
  }
  @container (orientation: landscape) {
    .bordo-images {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }
  }
  .bordo-images img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
  }
  .bordo-closing .bordo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .bordo-closing .bordo-title {
    font-size: clamp(var(--bordo-name-min), 1.5rem + 6vmin, 5rem);
  }
  .bordo-nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .bordo-prev,
  .bordo-next {
    display: flex;
    flex-direction: row;
    gap: normal;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--bordo-target) + 1rem);
    padding: 0 var(--space-2);
    border: 2px solid var(--bordo-ink);
    border-radius: var(--radius-sm);
    font: 700 var(--t-5) / 1 var(--font-sans);
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bordo-prev {
    grid-column: 1;
    background: var(--bordo-paper);
    color: var(--bordo-ink);
  }
  .bordo-next {
    grid-column: 2;
    background: var(--bordo-ink);
    color: var(--bordo-paper);
  }
  .bordo-pick:focus-visible + .bordo-screen .bordo-nav {
    outline: 3px solid var(--bordo-ink);
    outline-offset: 3px;
  }
  .crono,
  .crono-fallback {
    height: 100%;
    display: grid;
    gap: var(--space-2) var(--space-3);
    padding: var(--bordo-gutter);
    padding-top: calc(var(--bordo-gutter) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--bordo-gutter) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--bordo-gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--bordo-gutter) + env(safe-area-inset-right, 0px));
  }
  .crono-fallback {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    gap: var(--space-3);
  }
  .crono-fallback > * {
    grid-area: auto;
  }
  .crono-text {
    max-width: 30ch;
    margin: 0;
    font: 600 var(--t-5) / 1.3 var(--font-sans);
    hyphens: manual;
  }
  .crono {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto minmax(10rem, 1fr) auto auto auto auto;
    grid-template-areas:
      "where    exit"
      "runner   runner"
      "clock    clock"
      "result   result"
      "go       go"
      "next     next"
      "controls controls"
      "queue    queue"
      "awake    awake";
  }
  .crono-empty {
    grid-row: 2 / -1;
    grid-column: 1 / -1;
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }
  .crono-caption {
    margin: 0;
    font: 700 var(--t-3) / 1.2 var(--font-sans);
  }
  .crono-runner {
    grid-area: runner;
    min-width: 0;
  }
  .crono-name {
    margin: 0;
    font: 700 clamp(2rem, 1rem + 6vmin, 3.25rem) / 1.05 var(--font-sans);
    overflow-wrap: break-word;
    hyphens: manual;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .crono-clock {
    grid-area: clock;
    justify-self: center;
    margin: 0;
    padding-bottom: var(--space-1);
    border-bottom: 0.375rem solid transparent;
    text-align: center;
    font: 700 clamp(3.5rem, 1.5rem + 11vmin, 6.5rem) / 1 var(--ty-display);
    font-variant-numeric: tabular-nums;
  }
  .crono:has(.crono-go.is-running) .crono-clock {
    border-bottom-color: var(--color-signature);
  }
  .crono-result {
    grid-area: result;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .crono-result-text {
    flex: 1 1 12rem;
    margin: 0;
    font: 600 var(--t-4) / 1.3 var(--font-sans);
  }
  .crono-result-time {
    font: 700 1.75rem / 1 var(--ty-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .bordo .stopwatch-state {
    display: inline-block;
    padding: 0.1rem var(--space-2);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: 700 var(--t-3) / 1.3 var(--font-sans);
  }
  .bordo .stopwatch-state.is-saved {
    background: var(--bordo-ink);
    color: var(--bordo-paper);
  }
  .bordo .stopwatch-state.is-queued {
    border: 2px dashed var(--bordo-ink);
  }
  .bordo .stopwatch-state.is-refused {
    border: 4px double var(--bordo-ink);
  }
  .bordo .stopwatch-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bordo-target);
    padding: 0 var(--space-2);
    border: 2px solid var(--bordo-ink);
    border-radius: var(--radius-sm);
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    font: 700 var(--t-4) / 1.1 var(--font-sans);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .bordo .stopwatch-control:disabled {
    border-width: 1px;
    opacity: 0.4;
    cursor: default;
  }
  .crono .bordo-exit[aria-disabled="true"] {
    border-width: 1px;
    opacity: 0.4;
    pointer-events: none;
  }
  .bordo .stopwatch-control:focus-visible,
  .crono-go:focus-visible,
  .crono-pick:focus-visible {
    outline: 3px solid var(--bordo-ink);
    outline-offset: 3px;
  }
  .crono-go {
    grid-area: go;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 4px solid var(--bordo-ink);
    border-radius: var(--radius-md);
    background: var(--bordo-ink);
    color: var(--bordo-paper);
    font: 700 clamp(3.5rem, 1.5rem + 12vmin, 7rem) / 1 var(--ty-display);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .crono-go.is-running {
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    border-width: 0.75rem;
  }
  .crono-go:disabled,
  .crono-go[aria-disabled="true"] {
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    border-width: 1px;
    opacity: 0.4;
    cursor: default;
  }
  .crono-next {
    grid-area: next;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    font: 600 var(--t-5) / 1.2 var(--font-sans);
  }
  .crono-next [data-next-name] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crono-next.is-missing [data-next-name] {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--t-4);
  }
  .crono-controls {
    grid-area: controls;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .crono-queue {
    grid-area: queue;
    max-height: 22vh;
    max-height: 22dvh;
    overflow-y: auto;
  }
  .bordo .stopwatch-queue-head {
    margin: 0 0 var(--space-2);
    font: 700 var(--t-3) / 1.3 var(--font-sans);
  }
  .bordo .stopwatch-queued-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bordo .stopwatch-queued {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2);
    border: 2px dashed currentColor;
    border-radius: var(--radius-sm);
    font: 600 var(--t-3) / 1.3 var(--font-sans);
  }
  .bordo .stopwatch-queued.is-refused {
    border: 4px double currentColor;
  }
  .bordo .stopwatch-queued-text {
    font-variant-numeric: tabular-nums;
  }
  .bordo .stopwatch-queued-state {
    font-weight: 700;
  }
  .bordo .stopwatch-dismiss {
    margin-left: auto;
  }
  .crono-picker {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    overflow-y: auto;
    padding: var(--bordo-gutter);
    padding-top: calc(var(--bordo-gutter) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--bordo-gutter) + env(safe-area-inset-bottom, 0px));
    background: var(--bordo-paper);
    color: var(--bordo-ink);
  }
  .crono-picker-head {
    position: sticky;
    top: calc(-1 * var(--bordo-gutter));
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: calc(-1 * var(--bordo-gutter));
    padding: var(--bordo-gutter) 0 var(--space-2);
    background: var(--bordo-paper);
  }
  .crono-picker-title {
    margin: 0;
    font: 700 clamp(2.25rem, 1rem + 6vmin, 3.25rem) / 1 var(--ty-display);
  }
  .crono-pass-hint {
    margin: 0 0 var(--space-2);
    font: 600 var(--t-4) / 1.3 var(--font-sans);
  }
  .crono-picks {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .crono-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--bordo-target);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--bordo-ink);
    border-radius: var(--radius-sm);
    background: var(--bordo-paper);
    color: var(--bordo-ink);
    font: 700 var(--t-5) / 1.1 var(--font-sans);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }
  .crono-pick.is-current {
    border-left-width: 0.75rem;
  }
  .crono-pick-best {
    flex: none;
    font: 600 var(--t-4) / 1.1 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  @media (orientation: landscape) and (min-aspect-ratio: 4/3) {
    .bordo-concept {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
      grid-template-rows: auto minmax(0, 1fr);
      grid-template-areas:
        "name exit"
        "rule schema";
      column-gap: var(--space-4);
    }
    .bordo-exit {
      justify-self: end;
    }
    .bordo-exercise {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "where exit"
        "text  drawing"
        "nav   nav";
    }
    .bordo-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .crono {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
      grid-template-areas:
        "where    exit"
        "runner   go"
        "clock    go"
        "result   go"
        "next     go"
        "controls go"
        "queue    go"
        "awake    go";
    }
    .crono-queue {
      max-height: none;
    }
  }
  @media (orientation: landscape) and (min-aspect-ratio: 4/3) and (max-height: 500px) {
    .bordo-concept {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }
  @media (orientation: landscape) and (max-height: 500px) {
    .bordo-prev,
    .bordo-next {
      min-height: var(--bordo-target);
    }
  }
  @media (width < 1024px) {
    .bordo-opening {
      grid-template-rows: auto auto minmax(0, max-content) auto auto;
      align-content: start;
    }
  }
  @media (width < 1024px) and (orientation: portrait) {
    .bordo-concept {
      grid-template-rows: auto auto minmax(30%, max-content);
      align-content: start;
    }
    .bordo-frames {
      grid-template-rows: minmax(0, max-content) auto;
      align-content: start;
    }
    .bordo-frame .rink-diagram {
      height: auto;
      max-height: 100%;
    }
  }
  .bordo [hidden] {
    display: none;
  }
  .msg {
    --msg-tone: var(--color-text-muted);
    position: relative;
    max-width: var(--text-measure);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) 0 var(--space-2) calc(var(--space-3) + 28px);
    border: 0;
    border-left: 3px solid var(--msg-tone);
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font: var(--type-body);
    text-align: start;
  }
  .msg::before {
    content: "";
    position: absolute;
    left: var(--space-3);
    top: calc(var(--space-2) + 0.1em);
    width: 18px;
    height: 18px;
    background: var(--msg-tone);
    mask: url("msg/info.svg") center / contain no-repeat;
  }
  span.msg {
    display: block;
    margin: var(--space-1) 0 0;
    padding: 2px 0 2px calc(var(--space-2) + 22px);
    font: var(--type-caption);
  }
  span.msg::before {
    left: var(--space-2);
    top: 3px;
    width: 16px;
    height: 16px;
  }
  .msg > :first-child {
    margin-top: 0;
  }
  .msg > :last-child {
    margin-bottom: 0;
  }
  .msg ul {
    margin: var(--space-2) 0;
    padding-left: 1.25em;
  }
  .msg-ok {
    --msg-tone: var(--color-ok-border);
  }
  .msg-ok::before {
    mask-image: url("msg/ok.svg");
  }
  .msg-warn {
    --msg-tone: var(--color-warning-border);
  }
  .msg-danger {
    --msg-tone: var(--color-danger-border);
  }
  .msg-warn::before,
  .msg-danger::before {
    mask-image: url("msg/warn.svg");
  }
  .msg-info {
    --msg-tone: var(--color-text-muted);
  }
  .msg-ai {
    --msg-tone: var(--color-ai);
  }
  .msg-ai::before {
    content: "✦";
    background: none;
    mask: none;
    color: var(--msg-tone);
    font-size: 16px;
    line-height: 18px;
    text-align: center;
  }
  .msg:has(> .msg-close) {
    padding-right: 40px;
  }
  .msg-close {
    position: absolute;
    top: 2px;
    right: 0;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--msg-tone);
    cursor: pointer;
  }
  .msg-close:hover {
    background: var(--color-ok-bg);
    color: var(--msg-tone);
  }
  .msg.is-leaving {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) 0;
    border-block: 1px solid var(--color-border);
  }
  .empty-icon {
    flex: none;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
  }
  .empty-title {
    margin: 0;
    font: var(--type-body-strong);
    color: var(--color-text);
  }
  .empty-hint {
    margin: 0;
    max-width: 64ch;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
  }
  .empty-line {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) 0;
    font: var(--type-body);
    color: var(--color-text-muted);
  }
  .empty-line a,
  .empty-hint a {
    color: var(--color-primary-dark);
    font-weight: 600;
  }
  .lb {
    --lb-dot: var(--color-neutral-dot);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    vertical-align: middle;
    font: 500 calc(0.8125rem / var(--inter-scale)) / 1.2 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    white-space: nowrap;
  }
  .lb b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .lb-neutral {
    --lb-dot: var(--color-neutral-dot);
  }
  .lb-ok {
    --lb-dot: var(--color-ok-border);
  }
  .lb-warn {
    --lb-dot: var(--color-warning-border);
  }
  .lb-danger {
    --lb-dot: var(--color-danger-border);
  }
  .lb-attr {
    color: var(--color-text-muted);
  }
  .lb-state::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lb-dot);
  }
  .lb-state.lb-neutral {
    color: var(--color-text-muted);
  }
  .lb-dot {
    border-color: var(--lb-dot);
    background: var(--lb-dot);
  }
  .lb-alert {
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: var(--t-1);
    background: var(--color-primary-soft);
  }
  .lb-alert.lb-warn {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
  }
  .lb-alert.lb-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
  }
  .lb-filter {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
  }
  .lb-filter:hover {
    border-color: var(--color-text-muted);
    text-decoration: none;
  }
  .lb-filter.is-active {
    border-color: var(--color-text);
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  .lb-filter i {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 2px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .lb-filter {
      min-height: 28px;
    }
  }
  .lb-ai {
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    font-size: var(--t-1);
    background: var(--color-ai-soft);
    color: var(--color-ai-ink);
  }
  .app-sidebar .lb-state {
    color: inherit;
  }
  .tally {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 0;
    font: 700 calc(0.8125rem / var(--inter-scale)) / 1.2 var(--font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .tally-yes {
    color: var(--color-ok-text);
  }
  .tally-no {
    color: var(--color-danger-text);
  }
  .tally-maybe,
  .tally-hurt {
    color: var(--color-text-muted);
  }
  .sidebar-choice {
    margin: var(--space-4) 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .sidebar-choice > legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font: var(--type-label);
  }
  .sidebar-choice > .help {
    margin-top: var(--space-2);
  }
  .team-sigla-chip {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border: 1.5px solid var(--color-text-muted);
    border-radius: 50%;
    color: var(--color-text);
    font: 600 var(--t-2) / 1 var(--font-sans);
    vertical-align: middle;
  }
  .team-sigla-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    gap: var(--space-2) var(--space-3);
  }
  .team-sigla > .help {
    margin-top: var(--space-3);
  }
  .team-sigla-form > label {
    flex-direction: row;
    margin: 0;
  }
  .team-sigla-form > input {
    width: 5rem;
    margin: 0;
    text-transform: uppercase;
  }
  .ext-page {
    --ext-width: 28rem;
    margin: 0;
    min-height: 100dvh;
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--type-body);
  }
  .ext-page-read {
    --ext-width: var(--text-measure);
  }
  .ext-head {
    border-bottom: 1px solid var(--color-border);
    padding-top: env(safe-area-inset-top);
  }
  .ext-bar,
  .ext-main {
    max-width: var(--ext-width);
    margin-inline: auto;
    padding-inline: var(--space-3);
  }
  .ext-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .ext-logo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
  }
  .ext-id {
    min-width: 0;
  }
  .ext-name {
    margin: 0;
    font: var(--type-screen);
    overflow-wrap: anywhere;
  }
  .ext-sub {
    margin: 0;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ext-main {
    padding-block: var(--space-4) var(--space-5);
  }
  .ext-title {
    margin: 0 0 var(--space-2);
    font: var(--type-section);
  }
  .ext-lead {
    margin: 0 0 var(--space-4);
  }
  .ext-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .ext-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .ext-field > label,
  .ext-field > legend {
    padding: 0;
    font: var(--type-label);
  }
  .ext-field > legend {
    margin-bottom: var(--space-1);
  }
  .ext-field p {
    margin: 0;
  }
  .ext-form :is(.ext-phone, .birth-dmy) :is(input[type="text"], input[type="tel"], select) {
    box-sizing: border-box;
    min-height: var(--field-height);
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--color-field-border);
    border-radius: var(--field-radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: 400 var(--t-3) / 1.3 var(--font-sans);
  }
  .ext-form :is(.ext-phone, .birth-dmy) :is(input, select)[aria-invalid="true"] {
    border-color: var(--color-danger-border);
  }
  .ext-phone > :is(input, select) {
    width: 100%;
  }
  .ext-field:has(> .help-error) .ext-choice {
    border-color: var(--color-danger-border);
  }
  .ext-form .btn-block {
    margin-top: var(--space-2);
  }
  .ext-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .ext-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font: var(--type-body);
    cursor: pointer;
  }
  .ext-choice input {
    flex: none;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    accent-color: var(--color-primary);
  }
  .ext-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  .ext-choice[hidden],
  .ext-names[hidden] {
    display: none;
  }
  .ext-names {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ext-phone {
    display: grid;
    grid-template-columns: 7.2rem 1fr;
    gap: var(--space-2);
  }
  .ext-section {
    margin: var(--space-2) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font: var(--type-title);
  }
  .ext-opt {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ext-add {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-primary-dark);
    font: var(--type-body-strong);
    cursor: pointer;
    list-style: none;
  }
  .ext-add::-webkit-details-marker {
    display: none;
  }
  [open] > .ext-add {
    display: none;
  }
  .ext-second > * + * {
    margin-top: var(--space-3);
  }
  .ext-remove {
    align-self: flex-start;
  }
  .ext-note {
    margin: var(--space-3) 0 0;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ext-note a {
    color: inherit;
    text-decoration: underline;
  }
  .ext-doc h2 {
    margin: var(--space-4) 0 var(--space-1);
    font: var(--type-title);
  }
  .ext-doc p {
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
  }
  .ext-doc a {
    hyphens: manual;
  }
  .facts,
  .rows,
  .menu,
  .detail {
    --action-height: 40px;
    --row-height: 52px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .facts,
    .rows,
    .menu,
    .detail {
      --action-height: 32px;
      --row-height: 44px;
    }
  }
  .facts {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fact {
    flex: none;
    min-width: min-content;
    max-width: 22rem;
    padding: 0 var(--space-4) 0 0;
  }
  .fact + .fact {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
  }
  .fact dt {
    margin: 0;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .fact dd {
    margin: 2px 0 0;
    font: 500 var(--t-3) / 1.35 var(--font-sans);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    hyphens: manual;
  }
  .fact dd b {
    font-weight: 700;
  }
  @media (min-width: 1024px) {
    .fact {
      flex: 0 1 auto;
    }
  }
  .steps {
    display: flex;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    font: 500 var(--t-2) / 1.2 var(--font-sans);
  }
  .step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    min-height: 32px;
    padding: 4px var(--space-2);
    border-radius: 6px;
    background: var(--color-primary-soft);
    color: var(--color-text-muted);
    text-align: center;
  }
  .step.is-done {
    background: var(--color-ok-bg);
    color: var(--color-ok-text);
  }
  .step.is-now {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 600;
  }
  .step a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .part {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border-strong);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .part > .sub-head > h2,
  .part-title {
    font: var(--type-section);
    color: var(--color-text);
  }
  .part > .sub-head > .note {
    margin: 0;
  }
  .part .sub-head > h3 {
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .part .sub-head:has(> h3) {
    align-items: center;
    margin-top: var(--space-3);
  }
  .part .sub-head form {
    margin: 0;
  }
  details.part > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    min-height: var(--action-height);
    list-style: none;
    cursor: pointer;
  }
  details.part > summary::-webkit-details-marker {
    display: none;
  }
  details.part > summary .note {
    margin: 0;
  }
  details.part > summary::after {
    content: "›";
    margin-left: auto;
    color: var(--color-text-muted);
    transition: transform 0.15s;
  }
  details.part[open] > summary::after {
    transform: rotate(90deg);
  }
  details.part[open] > summary {
    margin-bottom: var(--space-2);
  }
  details.part > summary:hover .part-title {
    text-decoration: underline;
  }
  .rows {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    border: 0;
  }
  .row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-height: var(--row-height);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 8rem;
  }
  .row > form {
    display: contents;
  }
  .row-num {
    flex: none;
    min-width: 2ch;
    font: 700 var(--t-3) / 1 var(--ty-display);
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .row-main {
    flex: 1 1 6rem;
    min-width: 0;
  }
  .row-title {
    display: block;
    font: 400 var(--t-3) / 1.3 var(--font-sans);
    color: var(--color-text);
    overflow-wrap: anywhere;
  }
  .row-meta {
    display: block;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .row-meta.is-warn {
    color: var(--color-warning-text);
  }
  .row-tag {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--color-text-muted);
    color: var(--color-surface);
    font: 700 calc(0.6875rem / var(--inter-scale)) / 1.2 var(--font-sans);
    text-decoration: none;
    vertical-align: 1px;
  }
  .row-end {
    flex: 0 1 auto;
    max-width: 40%;
    margin-left: auto;
    font: var(--type-caption);
    color: var(--color-text-muted);
    text-align: right;
  }
  a.row-end {
    color: var(--color-primary-dark);
    font: var(--type-label);
    overflow-wrap: anywhere;
  }
  .row .btn {
    min-height: var(--action-height);
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  .row-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-on-fill);
    font: 700 var(--t-2) / 1 var(--font-sans);
    cursor: pointer;
  }
  .row-check::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  span.row-check::after {
    content: none;
  }
  .row.is-on .row-check,
  .row-check[aria-pressed="true"] {
    border-color: var(--color-ok-border);
    background: var(--color-ok-border);
  }
  .row:has(> form > .row-check):hover {
    background: var(--color-primary-soft);
  }
  .row-check:hover {
    border-color: var(--color-text-muted);
    background: var(--color-surface);
  }
  .row.is-on .row-check:hover {
    border-color: var(--color-ok-text);
    background: var(--color-ok-text);
  }
  .row-check:focus-visible {
    outline: 2px solid var(--color-signature);
    outline-offset: 2px;
  }
  .row-more {
    flex: none;
  }
  .row-more > summary {
    list-style: none;
  }
  .row-more > summary::-webkit-details-marker {
    display: none;
  }
  .row:has(> .row-more[open]) {
    flex-wrap: wrap;
    background: var(--color-primary-soft);
  }
  .row-more[open],
  .row-more[open]::details-content {
    display: contents;
  }
  @supports not selector(::details-content) {
    .row-more[open] {
      display: flex;
      flex-direction: column;
      order: 9;
      flex: 1 0 100%;
    }
    .row-more[open] > summary {
      align-self: flex-end;
    }
  }
  .row-more-panel {
    order: 9;
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-2) var(--space-2) calc(2ch + var(--space-3));
  }
  .row-more-panel > :is(form, .note) {
    margin: 0;
  }
  .row-more-panel .fields-inline > label {
    flex: 1 1 10rem;
  }
  .row-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
  }
  .row-sub > form {
    margin: 0;
  }
  .btn-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--action-height, 40px);
    height: var(--action-height, 40px);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-muted);
    font: 400 var(--t-3) / 1 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
  }
  .btn-icon:hover,
  details[open] > summary.btn-icon {
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  summary.btn-icon {
    list-style: none;
  }
  summary.btn-icon::-webkit-details-marker {
    display: none;
  }
  .menu {
    position: relative;
  }
  .menu-panel {
    display: flex;
    flex-direction: column;
    min-width: 14rem;
    padding: var(--space-1) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }
  .menu-panel > form {
    display: contents;
  }
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font: var(--type-body);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .menu-item:hover {
    border: 0;
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  .page-head-actions > .menu[open] {
    flex: 1 0 100%;
    order: 9;
  }
  @media (min-width: 1024px) {
    .menu-item {
      min-height: 36px;
    }
    .page-head-actions > .menu[open] {
      flex: none;
      order: 0;
    }
    .menu-panel {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      z-index: 20;
      box-shadow: var(--shadow-md);
    }
  }
  .sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--veil);
  }
  .sheet-panel {
    width: min(100%, 32rem);
    max-height: 90dvh;
    overflow: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
  }
  .sheet-panel > h2 {
    margin: 0 0 var(--space-2);
    font: var(--type-section);
  }
  .sheet-panel > p {
    margin: 0 0 var(--space-3);
  }
  .sheet-panel .button-row {
    justify-content: flex-end;
    margin: var(--space-3) 0 var(--space-2);
  }
  .sheet-panel .button-row form {
    margin: 0;
  }
  .sheet-panel .btn {
    min-height: 40px;
    padding: 0 var(--space-4);
  }
  @media (min-width: 1024px) {
    .sheet {
      align-items: center;
    }
    .sheet-panel {
      border-radius: var(--radius-md);
      padding-bottom: var(--space-4);
    }
  }
  .lb-filter:hover {
    background: var(--color-surface);
    color: var(--color-text);
  }
  .lb-filter.is-active:hover {
    background: var(--color-primary-soft);
  }
  .btn-danger-solid {
    background: var(--color-danger-border);
    border-color: var(--color-danger-border);
    color: var(--color-on-fill);
  }
  .btn-danger-solid:hover {
    background: var(--color-danger-border);
    border-color: var(--color-danger-border);
    box-shadow: inset 0 0 0 100vmax var(--shade-12);
  }
  .now-band,
  .todos,
  .events {
    --action-height: 40px;
    --row-height: 56px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .now-band,
    .todos,
    .events {
      --action-height: 32px;
      --row-height: 48px;
    }
  }
  .now-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 4px);
    border-block: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: inset 4px 0 0 var(--color-signature);
  }
  .now-band-what > * {
    margin: 0;
  }
  .now-band-eyebrow {
    font: var(--type-eyebrow);
    color: var(--color-signature);
  }
  .now-band-title {
    margin-top: 2px;
    font: 700 1.5rem / 1.25 var(--ty-display);
  }
  .now-band-title a {
    color: inherit;
    text-decoration: none;
  }
  .now-band-title a:hover {
    text-decoration: underline;
  }
  .now-band-time {
    margin-left: var(--space-1);
    font: 600 calc(1.125rem / var(--inter-scale)) / 1.25 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .now-band-place {
    margin-top: 2px;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  .now-band-tally {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-block: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font: 400 var(--t-1) / 1.3 var(--font-sans);
    text-decoration: none;
  }
  .now-band-tally .tally {
    font-size: calc(1.125rem / var(--inter-scale));
    gap: 0 14px;
  }
  .now-band-tally:hover .tally {
    text-decoration: underline;
  }
  .now-band-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .now-band-actions > .btn {
    min-height: 44px;
    padding: 0 var(--space-3);
  }
  .now-band-actions > .btn:first-child {
    grid-column: 1 / -1;
  }
  @media (min-width: 1024px) {
    .now-band {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: var(--space-4);
      padding: 14px var(--space-4) 14px calc(var(--space-4) + 4px);
    }
    .now-band-tally {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 0 var(--space-4);
      border-block: 0;
      border-inline: 1px solid var(--color-border);
    }
    .now-band-actions {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .now-band-actions > .btn {
      min-height: var(--action-height);
      font: var(--type-button-sm);
    }
  }
  .todos,
  .events {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .todo {
    --todo-tone: var(--color-border-strong);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title action" "context action";
    align-items: center;
    column-gap: var(--space-3);
    min-height: var(--row-height);
    padding: 6px var(--space-3) 6px calc(var(--space-3) + 3px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 3px 0 0 var(--todo-tone);
    color: var(--color-text);
    text-decoration: none;
  }
  .todo:hover {
    background: var(--color-primary-soft);
  }
  .todo-warn {
    --todo-tone: var(--color-warning-border);
  }
  .todo-danger {
    --todo-tone: var(--color-danger-border);
  }
  .todo-title {
    grid-area: title;
    min-width: 0;
    font: 500 var(--t-3) / 1.35 var(--font-sans);
  }
  .todo-title > b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .todo-context {
    grid-area: context;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  .todo-action {
    grid-area: action;
    font: 600 var(--t-2) / 1.3 var(--font-sans);
    color: var(--color-primary-dark);
    white-space: nowrap;
  }
  .event {
    --event-tone: var(--color-border-strong);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "when end" "what end";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 2px;
    min-height: var(--row-height);
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 3px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 3px 0 0 var(--event-tone);
  }
  .event:hover {
    background: var(--color-primary-soft);
  }
  .event-training {
    --event-tone: var(--kind-training);
  }
  .event-match {
    --event-tone: var(--kind-match);
  }
  .event-camp {
    --event-tone: var(--kind-camp);
  }
  .event-when {
    grid-area: when;
    font: 400 var(--t-2) / 1.35 var(--font-sans);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .event-when > b {
    font-weight: 600;
    color: var(--color-text);
  }
  .event.is-today .event-when > b {
    color: var(--color-signature);
  }
  .event-what {
    grid-area: what;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .event-title {
    font: 500 var(--t-3) / 1.35 var(--font-sans);
    color: var(--color-text);
    text-decoration: none;
  }
  .event-title::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .event-place {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  .event.is-cancelled .event-title {
    text-decoration: line-through;
    color: var(--color-text-muted);
  }
  .event-end {
    grid-area: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
  }
  .event-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--space-3);
    font: 600 var(--t-2) / 1.3 var(--font-sans);
  }
  .event-actions a {
    color: var(--color-primary-dark);
    text-decoration: none;
  }
  .event-actions a:hover {
    text-decoration: underline;
  }
  @media (min-width: 1024px) {
    .todo {
      grid-template-columns: minmax(10rem, auto) minmax(0, 1fr) auto;
      grid-template-areas: "title context action";
      padding-block: 4px;
    }
    .todo-title {
      white-space: nowrap;
    }
    .event {
      grid-template-columns: 10.5rem minmax(0, 1fr) auto;
      grid-template-areas: "when what end";
    }
    .event-end {
      flex-direction: row;
      align-items: center;
      gap: var(--space-3);
    }
  }
  .meter {
    height: 4px;
    margin: var(--space-2) 0 var(--space-1);
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
  }
  .meter > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
  }
  label:not([class]) > .stepper > input {
    display: block;
    width: 100%;
    margin-top: var(--space-1);
  }
  @media (width < 1024px) {
    label:not([class]) > .stepper.is-ready {
      margin-top: var(--space-1);
    }
    label:not([class]) > .stepper.is-ready > input {
      margin-top: 0;
    }
  }
  .ct-page {
    --ext-width: 75rem;
  }
  .ct-ico {
    flex: none;
  }
  .ct-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-surface);
  }
  .ct-me {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    margin-left: auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font: 500 var(--t-3) / 1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
  }
  .ct-me:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  .ct-tabs {
    max-width: var(--ext-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
    border-bottom-width: 0;
  }
  .ct-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--space-5);
    max-width: var(--ext-width);
    margin: 0 auto;
    padding: var(--space-3) var(--space-3) var(--space-4);
  }
  .ct-col {
    min-width: 0;
  }
  .ct-col > .msg {
    margin: 0 0 var(--space-3);
  }
  .ct-band {
    min-width: 0;
    margin: 0 0 var(--space-5);
  }
  .ct-band > .sub-head {
    align-items: center;
    margin: 0;
    padding-bottom: var(--space-1);
    border-bottom: 2px solid var(--color-text);
  }
  .ct-band > .sub-head > h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--type-section);
  }
  .ct-count {
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-text);
    font: 600 var(--t-1) / 1 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .ct-all {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .ct-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-dark);
    font: 500 var(--t-3) / 1.3 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
  }
  .ct-link:hover {
    background: none;
    color: var(--color-primary-dark);
    text-decoration: underline;
  }
  .ct-done {
    margin: var(--space-2) 0 0;
  }
  .ct-kind-training {
    --ct-kind: var(--color-kind-training);
  }
  .ct-kind-match {
    --ct-kind: var(--color-kind-match);
  }
  .ct-kind-tournament,
  .ct-kind-camp,
  .ct-kind-break {
    --ct-kind: var(--color-kind-event);
  }
  .ct-eyebrow {
    margin: 0;
    font: 600 var(--t-1) / 1.35 var(--font-sans);
    color: var(--color-text-muted);
  }
  .ct-title {
    margin: 2px 0 0;
    font: 600 var(--t-3) / 1.3 var(--font-sans);
    color: var(--color-text);
  }
  .ct-place {
    margin: 2px 0 0;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  .ct-q {
    padding: var(--space-3) 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 3px 0 0 var(--ct-kind, var(--color-border-strong));
  }
  .ct-q > .help {
    margin-top: var(--space-1);
  }
  .ct-answer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .ct-yes,
  .ct-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--field-radius);
    background: var(--color-surface);
    font: 600 var(--t-3) / 1 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
  }
  .ct-yes,
  .ct-yes:hover {
    border-color: var(--color-ok-border);
    color: var(--color-ok-text);
  }
  .ct-yes:hover {
    background: var(--color-ok-bg);
  }
  .ct-no {
    color: var(--color-danger-text);
  }
  .ct-no:hover {
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
  }
  .ct-inline {
    padding: var(--space-3) 0 0;
  }
  .ct-inline-title {
    margin: 0 0 var(--space-2);
    font: 600 var(--t-2) / 1.3 var(--font-sans);
  }
  .ct-inline form,
  .ct-reason-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .ct-reason {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: 22px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 500 var(--t-2) / 1.3 var(--font-sans);
    text-align: start;
    cursor: pointer;
  }
  .ct-reason:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  .ct-reason small {
    font: 400 var(--t-1) / 1.3 var(--font-sans);
    color: var(--color-text-muted);
  }
  .ct-inline-cancel {
    margin-top: var(--space-2);
  }
  .ct-reasons .ct-reason-list {
    flex-direction: column;
    margin-bottom: var(--space-3);
  }
  .ct-reasons .ct-reason {
    width: 100%;
    border-radius: var(--radius-sm);
  }
  .ct-reasons:not(:target) {
    display: none;
  }
  .ct-first {
    align-items: center;
    padding: var(--space-3);
  }
  .ct-first .sheet-panel {
    border-radius: var(--radius-lg);
  }
  .ct-first .sheet-panel > .help {
    margin: 0 0 var(--space-2);
  }
  .ct-first .btn + .btn,
  .ct-first .help + .btn,
  .ct-first .help + .btn-secondary {
    margin-top: var(--space-2);
  }
  .ct-first-home {
    display: none;
  }
  .ct-first:has(#a-portata-di-mano:target) .ct-first-hello {
    display: none;
  }
  .ct-first:has(#a-portata-di-mano:target) .ct-first-home {
    display: block;
  }
  body:has(#voci:target) .ct-first {
    display: none;
  }
  .ct-missing .ext-form {
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .ct-missing .button-row {
    margin: 0;
  }
  .ct-missing .birth-dmy input[readonly] {
    background: var(--color-bg);
    color: var(--color-text-muted);
  }
  .ct-call {
    padding: var(--space-3) 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 3px 0 0 var(--color-signature);
  }
  .ct-call > p:not(.ct-eyebrow) {
    margin: var(--space-1) 0 0;
    font: 400 var(--t-2) / 1.45 var(--font-sans);
  }
  .ct-games {
    columns: 2 14rem;
    column-gap: var(--space-3);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font: 400 var(--t-2) / 1.45 var(--font-sans);
  }
  .ct-games li {
    padding: 2px 0;
    break-inside: avoid;
  }
  .ct-games b {
    display: inline-block;
    min-width: 3.2em;
    font-variant-numeric: tabular-nums;
  }
  .ct-roster {
    margin-top: var(--space-1);
    font: 400 var(--t-2) / 1.45 var(--font-sans);
  }
  .ct-roster > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-primary-dark);
    list-style: none;
    cursor: pointer;
  }
  .ct-roster > summary::-webkit-details-marker {
    display: none;
  }
  .ct-roster ul {
    margin: 0;
    padding-left: 1.2em;
    color: var(--color-text-muted);
  }
  .ct-coach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    margin: 0 0 var(--space-5);
    padding: var(--space-1) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font: 400 var(--t-2) / 1.45 var(--font-sans);
    color: var(--color-text-muted);
  }
  .ct-coach a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--color-primary-dark);
    font-weight: 500;
    text-decoration: none;
  }
  .ct-month {
    margin: var(--space-4) 0 0;
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border-strong);
    font: 700 1.25rem / 1.2 var(--ty-display);
  }
  .ct-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 var(--t-2) / 1.4 var(--font-sans);
  }
  .ct-row > td {
    height: 44px;
    padding: var(--space-1) 0 var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }
  .ct-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--ct-kind, var(--color-border-strong));
  }
  .ct-day {
    width: 3.5rem;
    white-space: nowrap;
    color: var(--color-text-muted);
  }
  .ct-day b {
    color: var(--color-text);
    font: 600 var(--t-3) / 1 var(--font-sans);
  }
  .ct-row.is-today .ct-day b {
    color: var(--color-signature);
  }
  .ct-time {
    display: none;
  }
  .ct-what .ct-title,
  .ct-what .ct-place {
    display: block;
    margin: 0;
  }
  .ct-row.is-cancelled .ct-title {
    color: var(--color-text-muted);
    text-decoration: line-through;
  }
  .ct-state {
    text-align: end;
  }
  .ct-state > .lb {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: fit-content;
    max-width: 14rem;
    margin-left: auto;
    white-space: normal;
    text-align: end;
  }
  .ct-state > .lb::before {
    margin-top: 0.35em;
  }
  .ct-change {
    display: inline-block;
    color: var(--color-primary-dark);
    font: 400 var(--t-1) / 1.6 var(--font-sans);
    text-decoration: none;
  }
  .ct-change:hover {
    text-decoration: underline;
  }
  .ct-later {
    margin-top: var(--space-4);
  }
  .ct-later > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font: 600 var(--t-2) / 1.3 var(--font-sans);
    cursor: pointer;
  }
  .ct-foot {
    max-width: var(--ext-width);
    margin: 0 auto;
    padding: var(--space-3);
    font: 400 var(--t-2) / 1.4 var(--font-sans);
    color: var(--color-text-muted);
  }
  .ct-part {
    margin: 0 0 var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-strong);
  }
  .ct-part > h2 {
    margin: 0 0 var(--space-2);
    font: var(--type-section);
  }
  .ct-part > p,
  .ct-part > .button-row {
    margin: 0 0 var(--space-2);
  }
  .ct-label {
    margin: 0;
    font: var(--type-label);
  }
  .ct-channel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ct-channel > p,
  .ct-channel > .button-row {
    margin: 0;
  }
  .ct-silence > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-danger-text);
    font: 600 var(--t-3) / 1.3 var(--font-sans);
    cursor: pointer;
  }
  .ct-silence > form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  @media (min-width: 1024px) {
    .ct-head .ext-bar,
    .ct-tabs,
    .ct-foot {
      padding-inline: var(--space-4);
    }
    .ct-main {
      grid-template-columns: minmax(340px, 1fr) minmax(0, 1.4fr);
      align-items: start;
      padding: var(--space-4) var(--space-4) var(--space-4);
    }
    .ct-time {
      display: table-cell;
      width: 3.5rem;
      font-weight: 600;
    }
  }
  .table {
    --table-row: 44px;
    width: 100%;
    margin: 0 0 var(--space-3);
    border: 0;
    border-collapse: collapse;
    background: none;
    font: var(--type-body);
    font-variant-numeric: tabular-nums;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .table {
      --table-row: 32px;
    }
  }
  .table :is(th, td) {
    height: var(--table-row);
    padding: 0 var(--space-3) 0 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: none;
    text-align: left;
    vertical-align: middle;
  }
  .table thead th {
    font: var(--type-thead);
    color: var(--color-text-muted);
    border-bottom-color: var(--color-border-strong);
  }
  .table tbody th {
    font-weight: 500;
    color: var(--color-text);
  }
  .table :is(th, td).num {
    text-align: right;
  }
  .table tbody tr:hover > :is(th, td) {
    background: var(--color-primary-soft);
  }
  .table abbr {
    text-decoration: none;
  }
  .danger-zone {
    margin: var(--space-5) 0 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md);
  }
  .danger-zone > h2 {
    margin: 0 0 var(--space-2);
    font: var(--type-section);
    color: var(--color-danger-text);
  }
  .danger-zone-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
  }
  .danger-zone-row h3 {
    margin: 0;
    font: var(--type-body-strong);
  }
  .danger-zone-row .note {
    margin: 2px 0 0;
  }
  .danger-zone .btn {
    min-height: 40px;
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .danger-zone .btn {
      min-height: 32px;
    }
  }
  .cell-sub {
    display: block;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .cell-muted {
    color: var(--color-text-muted);
  }
  .table .row-group th {
    padding-top: var(--space-3);
    font-weight: 700;
  }
  .table tr.has-sub > :is(th, td) {
    border-bottom: 0;
  }
  .table .row-derived td {
    height: auto;
    padding: 0 0 var(--space-2);
  }
  .derived-title {
    margin: 0;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .derived-lines {
    margin: var(--space-1) 0 0;
    padding: 0 0 0 var(--space-2);
    list-style: none;
    border-left: 2px solid var(--color-border);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .derived-lines li + li {
    margin-top: var(--space-1);
  }
  .chart-frame {
    max-width: 100%;
    margin: 0 0 var(--space-3);
    overflow-x: auto;
    contain: inline-size;
  }
  .chart-frame > svg {
    display: block;
  }
  .chart-frame-paper {
    color-scheme: light;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--space-2) var(--color-surface);
    margin: var(--space-3) var(--space-2);
  }
  .chart-keys {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .chart-keys > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .key {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
  .key-goals {
    background: var(--color-ok-border);
  }
  .key-assists {
    background: var(--fam-tecnica);
  }
  .key-line {
    position: relative;
    width: 16px;
    height: 0;
    border-radius: 0;
    border-top: 2px solid var(--color-text);
  }
  .key-line:not(.key-dashed)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text);
  }
  .key-dashed {
    border-top-color: var(--color-text-muted);
    border-top-style: dashed;
  }
  .key-hollow {
    width: 8px;
    height: 8px;
    border: 2px solid var(--color-text);
    border-radius: 50%;
    background: var(--color-surface);
  }
  .sub-add {
    display: contents;
  }
  .sub-add > summary {
    list-style: none;
    cursor: pointer;
    min-height: var(--action-height, 32px);
  }
  .sub-add > summary::-webkit-details-marker {
    display: none;
  }
  .sub-add::details-content {
    flex-basis: 100%;
    order: 2;
  }
  .sub-add:not([open])::details-content {
    display: none;
  }
  @supports not selector(::details-content) {
    .sub-add {
      display: block;
    }
  }
  .sub-add-body {
    padding: var(--space-2) 0 var(--space-3);
  }
  .sub-add-body .form-foot {
    margin-top: var(--space-2);
  }
  .menu-form {
    padding: var(--space-2) var(--space-3) var(--space-1);
    border-top: 1px solid var(--color-border);
    white-space: normal;
  }
  .menu-form .help {
    margin: var(--space-1) 0 0;
  }
  @media (min-width: 1024px) {
    .menu-panel:has(> .menu-form) {
      width: min(24rem, 88vw);
    }
  }
  .level-col {
    width: 35%;
    min-width: 8rem;
  }
  .level-track {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--lvl-empty);
    overflow: hidden;
  }
  .level-bar {
    height: 100%;
    border-radius: 6px;
  }
  .span-col {
    width: 40%;
    min-width: 12rem;
  }
  .span-scale {
    display: flex;
    justify-content: space-between;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .span-track {
    position: relative;
    height: 14px;
    border-radius: 7px;
    background: var(--lvl-empty);
  }
  .span-link {
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--color-text-muted);
  }
  .span-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: translateY(-50%);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
  }
  .span-dot.is-first {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 3px currentColor;
  }
  .share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-3) 0 var(--space-2);
  }
  .share-figure {
    position: relative;
    flex: none;
    width: 144px;
    height: 144px;
  }
  .share-figure > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .share-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
    pointer-events: none;
  }
  .share-center > b {
    font: var(--type-figure);
    color: var(--color-text);
  }
  .share-legend {
    flex: 1 1 12rem;
    min-width: 10rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .share-legend > li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .share-legend > li > span:first-of-type {
    flex: 1;
    min-width: 0;
  }
  .share-key {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
  .stat-donut-other {
    stroke: var(--chart-other);
    background: var(--chart-other);
  }
  .list-bar,
  .side-panel,
  .list-after {
    --action-height: 40px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .list-bar,
    .side-panel,
    .list-after {
      --action-height: 32px;
    }
  }
  .list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: 48px;
    padding: var(--space-1) 0 var(--space-2);
    border-bottom: 1px solid var(--color-border-strong);
  }
  .list-bar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
  }
  .list-bar .btn {
    width: auto;
    min-height: var(--action-height);
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  .list-bar-title {
    margin: 0 0 0 var(--space-2);
    font: var(--type-section);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list-bar-tools {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .list-bar-tools > form {
    display: contents;
  }
  .list-bar-rule {
    width: 1px;
    height: 20px;
    margin: 0 var(--space-1);
    background: var(--color-border);
  }
  .side-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-surface);
  }
  .side-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 52px;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: inherit;
  }
  .side-panel-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font: var(--type-title);
  }
  .side-panel-title:focus {
    outline: none;
  }
  .side-panel-open {
    flex: none;
    font: var(--type-label);
    white-space: nowrap;
  }
  .side-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-4);
    overflow: auto;
  }
  .side-panel-body > * {
    margin: 0;
  }
  .side-panel-body form {
    max-width: none;
  }
  .side-panel-body .form-foot .btn,
  .side-panel-body .button-row .btn {
    width: auto;
    min-height: var(--action-height);
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  .side-panel-body .button-row {
    flex-wrap: wrap;
    margin: 0;
  }
  .side-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
  }
  .side-facts > div {
    display: contents;
  }
  .side-facts dt {
    font: var(--type-label);
    color: var(--color-text-muted);
  }
  .side-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .side-danger {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .side-veil {
    display: none;
  }
  .chip[data-kind="training"] {
    --kind: var(--kind-training);
  }
  .chip[data-kind="match"] {
    --kind: var(--kind-match);
  }
  .chip:is([data-kind="tournament"], [data-kind="camp"]) {
    --kind: var(--kind-camp);
  }
  .chip[data-kind="break"] {
    --kind: var(--color-border-strong);
  }
  .chip {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 22px;
    border-left: 3px solid var(--kind, var(--color-border-strong));
    border-radius: 0 4px 4px 0;
  }
  .chip[data-kind="break"] {
    border-left-style: dashed;
  }
  .chip:hover,
  .chip:has([aria-current="true"]) {
    background: var(--color-primary-soft);
  }
  .chip-link {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 4px 0 5px;
    overflow: hidden;
    color: var(--color-text);
    font: var(--type-caption);
    white-space: nowrap;
    text-decoration: none;
  }
  .chip-link[aria-current="true"] {
    font-weight: 600;
  }
  .chip-time {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .chip-team {
    flex: none;
  }
  .chip-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chip-done {
    flex: none;
    color: var(--color-ok-text);
  }
  .chip .lb-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lb-dot);
  }
  :is(.chip, .event) .partita-glifo {
    display: inline-block;
    flex: none;
    vertical-align: -2px;
  }
  .chip[data-cancelled] :is(.chip-time, .chip-title) {
    color: var(--color-text-muted);
    text-decoration: line-through;
  }
  .chip[data-overlap] {
    box-shadow: inset 0 0 0 1px var(--color-warning-border);
  }
  .chip-overlap {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 100%;
    color: var(--color-warning-text);
  }
  .event-tournament {
    --event-tone: var(--kind-camp);
  }
  .event:has(.event-title[aria-current="true"]) {
    background: var(--color-primary-soft);
  }
  .event-team {
    font-weight: 600;
    color: var(--color-text);
  }
  .event-overlap {
    position: relative;
    z-index: 1;
    text-decoration: none;
  }
  span.event-title {
    font-weight: 500;
  }
  .run-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .run-head > form {
    display: contents;
  }
  .sync-running > .note {
    margin: var(--space-1) 0 0;
  }
  .run-origin {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }
  @media (width < 1024px) {
    .run-why {
      display: none;
    }
  }
  .place-field {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .place-field > select,
  .place-field-address {
    flex: 1 1 10rem;
    min-width: 0;
  }
  .place-field:not(:has(option[value="altro"]:checked)) .place-field-address {
    display: none;
  }
  .facts-figures .fact dd {
    margin-top: 4px;
  }
  .fact-figure {
    display: inline-block;
    font: var(--type-figure);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .fact-figure + .fact-figure {
    margin-left: var(--space-2);
  }
  .fact-unit {
    font: 500 var(--t-2) / 1 var(--font-sans);
    color: var(--color-text-muted);
  }
  .fact-note {
    display: block;
    margin-top: 2px;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .fact.is-warn .fact-figure {
    color: var(--color-warning-text);
  }
  .todo-ok {
    --todo-tone: var(--color-ok-border);
  }
  .todo-neutral {
    --todo-tone: var(--color-border-strong);
  }
  .todo:not(a):hover {
    background: none;
  }
  .nowrap {
    white-space: nowrap;
  }
  .key-point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text);
  }
  .kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) 0;
    margin: 0 0 var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .kpi {
    min-width: 0;
    margin: 0;
    padding: 0 var(--space-3);
  }
  .kpi:nth-child(odd) {
    padding-left: 0;
  }
  .kpi:nth-child(even) {
    border-left: 1px solid var(--color-border);
  }
  .kpi > dt {
    margin: 0;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .kpi > dd {
    margin: 0;
  }
  .kpi-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    margin-top: 2px;
  }
  .kpi-figure > b {
    font: var(--type-figure);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }
  .kpi-figure > span {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .kpi-meter > .meter {
    display: block;
    margin: var(--space-1) 0 0;
  }
  .kpi-meter > .meter > span {
    min-width: 3px;
  }
  .kpi-note {
    margin-top: var(--space-1);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  @media (min-width: 1024px) {
    .kpis {
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
    .kpi,
    .kpi:nth-child(odd) {
      padding: 0 var(--space-4);
    }
    .kpi:first-child {
      padding-left: 0;
    }
    .kpi + .kpi {
      border-left: 1px solid var(--color-border);
    }
  }
  .fam-tecnica { --fam: var(--fam-tecnica); }
  .fam-costruzione { --fam: var(--fam-costruzione); }
  .fam-recupero { --fam: var(--fam-recupero); }
  .fam-transizione { --fam: var(--fam-transizione); }
  .fam-gioco { --fam: var(--fam-gioco); }
  .fam-atletica { --fam: var(--fam-atletica); }
  .fam-portiere { --fam: var(--fam-portiere); }
  .timeline-row-label,
  .timeline-periods-row .timeline-segment {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .timeline-chart {
    display: none;
  }
  @media (min-width: 1024px) {
    .timeline-chart {
      display: block;
    }
  }
  .timeline-legend {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .timeline-legend-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
  .timeline-legend .view-switch {
    max-width: 100%;
  }
  .timeline-legend .view-switch-option {
    flex: 0 1 auto;
  }
  .timeline-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .timeline-legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: var(--fam, var(--color-text-muted));
  }
  .timeline-legend-band {
    width: 26px;
    height: 10px;
    border-radius: 2px;
    background: var(--timeline-band-1);
    background: color-mix(in srgb, var(--fam) 42%, transparent);
  }
  .timeline-legend-band.is-maintenance {
    background: color-mix(in srgb, var(--fam) 18%, transparent);
  }
  .timeline-legend-rest {
    width: 26px;
    height: 10px;
    border-radius: 2px;
    background: repeating-linear-gradient(
      45deg,
      var(--timeline-band-2),
      var(--timeline-band-2) 3px,
      var(--color-surface) 3px,
      var(--color-surface) 6px
    );
    box-shadow: inset 0 0 0 1px var(--timeline-line);
  }
  .timeline-legend-tick {
    width: 2px;
    height: 12px;
    border-radius: 2px;
    background: var(--fam, var(--timeline-neutral-mark));
  }
  .timeline-legend-tick.is-out {
    background: var(--timeline-neutral-mark);
  }
  .timeline-scroller {
    overflow-x: auto;
  }
  .timeline-grid {
    min-width: 52rem;
  }
  .timeline-scale {
    position: relative;
    height: 1.1rem;
    margin: 0;
  }
  .timeline-scale span {
    position: absolute;
    top: 0;
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
    transform: translateX(-1px);
    white-space: nowrap;
  }
  .timeline-row {
    display: grid;
    grid-template-columns: 10.5rem 1fr 3.25rem;
    align-items: center;
    gap: var(--space-3);
    min-height: 2rem;
  }
  .timeline-row-label {
    font: var(--type-caption);
    color: var(--color-text);
  }
  .timeline-track {
    position: relative;
    height: 10px;
    background: var(--timeline-lane);
    border-radius: var(--radius-pill);
  }
  .timeline-periods-row {
    margin-bottom: 1.1rem;
  }
  .timeline-periods-row .timeline-track {
    height: 2.375rem;
    background: var(--color-bg);
    border-radius: 4px;
  }
  .timeline-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .timeline-periods-row .timeline-segment {
    border-radius: 4px;
    display: block;
    text-align: center;
    padding: 0 var(--space-2);
    background: var(--timeline-band-1);
    border: 1px solid var(--color-surface);
    border-width: 1px 2px;
    color: var(--color-text-muted);
    font: var(--type-eyebrow);
    line-height: calc(2.375rem - 2px);
    text-decoration: none;
  }
  .timeline-periods-row .timeline-segment[class*="tone-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-1);
    font: 600 0.8125rem/1.1 var(--font-cond);
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
  }
  .timeline-periods-row .timeline-segment[class*="tone-"] .timeline-segment-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .timeline-periods-row .timeline-segment.tone-1 { background: var(--block-tone-1); color: var(--block-tone-1-ink); }
  .timeline-periods-row .timeline-segment.tone-2 { background: var(--block-tone-2); color: var(--block-tone-2-ink); }
  .timeline-periods-row .timeline-segment.tone-3 { background: var(--block-tone-3); color: var(--block-tone-3-ink); }
  .timeline-periods-row .timeline-segment.tone-4 { background: var(--block-tone-4); color: var(--block-tone-4-ink); }
  .timeline-periods-row .timeline-segment.tone-5 { background: var(--block-tone-5); color: var(--block-tone-5-ink); }
  .timeline-periods-row .timeline-segment.is-rest {
    background: repeating-linear-gradient(
      45deg,
      var(--timeline-band-2),
      var(--timeline-band-2) 5px,
      var(--color-surface) 5px,
      var(--color-surface) 10px
    );
    color: var(--color-text-muted);
    font-style: italic;
  }
  .timeline-periods-row .timeline-segment.is-athletic {
    border-left: 3px solid var(--color-text-muted);
  }
  a.timeline-segment:hover,
  a.timeline-segment:focus-visible {
    filter: brightness(1.08);
    text-decoration: none;
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
  }
  .timeline-segment.gap {
    background: repeating-linear-gradient(
      45deg,
      var(--color-surface),
      var(--color-surface) 4px,
      var(--timeline-line) 4px,
      var(--timeline-line) 5px
    );
  }
  .timeline-periods-row .timeline-segment.gap {
    color: var(--color-text-muted);
    font: var(--type-eyebrow);
    letter-spacing: var(--type-eyebrow-ls);
    border: 1px dashed var(--timeline-neutral-mark);
  }
  .timeline-family {
    margin: 0;
  }
  .timeline-family-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: 1px;
    border-radius: 2px;
    background: var(--fam, var(--color-text-muted));
  }
  .timeline-theme-row {
    min-height: 1.25rem;
  }
  .timeline-theme-row .timeline-track {
    height: 1.25rem;
    background: none;
    border-radius: 0;
  }
  .timeline-cell {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 3px;
    background: var(--timeline-cell);
    border-left: 2px solid var(--color-surface);
    border-right: 2px solid var(--color-surface);
    background-clip: padding-box;
  }
  .timeline-band {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 3px;
    display: block;
    overflow: hidden;
    background: var(--timeline-band-1);
    background: color-mix(in srgb, var(--fam) 42%, var(--color-surface));
    border-left: 2px solid var(--color-surface);
    border-right: 2px solid var(--color-surface);
    background-clip: padding-box;
  }
  .timeline-band-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--type-eyebrow);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    color: color-mix(in srgb, var(--fam) 30%, var(--color-text));
    white-space: nowrap;
  }
  .timeline-band.is-maintenance .timeline-band-percent {
    color: var(--color-text-muted);
  }
  .timeline-band.is-maintenance {
    background: var(--timeline-band-1);
    background: color-mix(in srgb, var(--fam) 18%, var(--color-surface));
  }
  .timeline-band:hover,
  .timeline-band:focus-visible {
    background: color-mix(in srgb, var(--fam) 60%, var(--color-surface));
    outline: 2px solid var(--fam);
    outline-offset: -1px;
  }
  .timeline-tick {
    position: absolute;
    top: calc(50% - 6px);
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: var(--fam, var(--color-primary));
    background: color-mix(in srgb, var(--fam, var(--color-primary)) 75%, var(--color-surface));
    box-shadow: 0 0 0 1px var(--color-surface);
    z-index: 3;
  }
  body:has(#timeline-ticks-toggle:not(:checked)) .timeline-tick {
    display: none;
  }
  .timeline-tick.is-out {
    background: var(--timeline-neutral-mark);
  }
  .timeline-tick.is-secondary {
    top: calc(50% - 3px);
    height: 6px;
  }
  .timeline-tick:hover,
  .timeline-tick:focus-visible {
    outline: 2px solid var(--timeline-today);
    outline-offset: 2px;
  }
  .timeline-count {
    font: var(--type-figure-cell);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
  }
  .timeline-count.is-rare {
    color: var(--color-danger-text);
  }
  .timeline-today-tick {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--timeline-today);
    opacity: 0.8;
    z-index: 2;
  }
  .timeline-theme-row .timeline-today-tick {
    top: 0;
    bottom: 0;
  }
  a.timeline-today-tick {
    display: block;
  }
  .timeline-today-label {
    position: absolute;
    top: calc(100% + 3px);
    transform: translateX(-50%);
    font: var(--type-eyebrow);
    color: var(--timeline-today);
    background: var(--color-surface);
    padding: 0 4px;
    white-space: nowrap;
    text-decoration: none;
  }
  .timeline-group {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .timeline-group-title {
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1) 0;
  }
  .timeline-marker {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--color-surface);
    background: var(--color-border);
  }
  .timeline-marker.marker-tournament { background: var(--color-warning-border); }
  .timeline-marker.marker-camp { background: var(--color-camp-text); }
  .timeline-marker.marker-break { background: var(--color-text-muted); }
  .timeline-marker.marker-match {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    line-height: 0;
  }
  .timeline-marker:not([class*="marker-"]) {
    background: var(--color-surface);
    border-color: var(--timeline-neutral-mark);
  }
  .timeline-marker:not(.marker-match) {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
  }
  .timeline-legend-marker.timeline-marker {
    position: relative;
    top: auto;
    display: inline-block;
    transform: none;
  }
  .timeline-marker.is-done {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  .timeline-marker.is-missed {
    background: var(--color-surface);
    border-color: var(--color-danger-border);
  }
  .timeline-marker.is-prepared {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
  }
  .model-chart .timeline-chart,
  .pres-strip .timeline-chart {
    display: block;
  }
  .pres-strip .timeline-scroller {
    overflow: visible;
  }
  .pres-strip .timeline-grid {
    min-width: 0;
  }
  .pres-strip .timeline-row {
    grid-template-columns: 3.6cm 1fr;
    gap: 6pt;
    min-height: 0;
  }
  .pres-strip .timeline-row-label {
    font: var(--typep-caption);
    color: var(--strip-ink);
  }
  .pres-strip .timeline-scale {
    height: 10pt;
  }
  .pres-strip .timeline-scale span {
    font: var(--typep-eyebrow);
    letter-spacing: var(--typep-eyebrow-ls);
    color: var(--paper-ink-2);
  }
  .pres-strip .timeline-periods-row .timeline-track {
    height: 11pt;
    background: var(--strip-track);
    border-radius: 2pt;
  }
  .pres-strip .timeline-periods-row .timeline-segment {
    line-height: 11pt;
  }
  .pres-strip .timeline-theme-row,
  .pres-strip .timeline-theme-row .timeline-track {
    min-height: 0;
    height: 14pt;
  }
  .pres-strip .timeline-band,
  .pres-strip .timeline-cell,
  .pres-strip .timeline-family-dot,
  .pres-strip .timeline-legend-swatch,
  .pres-strip .timeline-periods-row .timeline-segment {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pres-strip .timeline-band,
  .pres-strip .timeline-cell {
    top: 2px;
    bottom: 2px;
  }
  .pres-strip .timeline-legend {
    margin-top: 6pt;
  }
  .pres-strip .timeline-legend-item {
    font: var(--typep-caption);
    color: var(--paper-ink-2);
  }
  .fullscreen-open {
    display: none;
  }
  .fullscreen-layer-bar,
  .fullscreen-layer-hint {
    display: none;
  }
  .fullscreen-layer:focus {
    outline: none;
  }
  @media screen and (width < 1024px) {
    .fullscreen-open {
      display: inline-flex;
      gap: var(--space-1);
      margin-top: var(--space-2);
    }
    .fullscreen-layer:target {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding:
        max(var(--space-2), env(safe-area-inset-top, 0px))
        max(var(--space-3), env(safe-area-inset-right, 0px))
        max(var(--space-2), env(safe-area-inset-bottom, 0px))
        max(var(--space-3), env(safe-area-inset-left, 0px));
      background: var(--color-surface);
    }
    .fullscreen-layer:target .fullscreen-layer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
    }
    .fullscreen-title {
      margin: 0;
      font: var(--type-title);
    }
    .fullscreen-layer:target .fullscreen-body {
      flex: 1;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }
    html:has(.fullscreen-layer:target) {
      overflow: hidden;
    }
    .fullscreen-layer:target .timeline-chart {
      display: block;
    }
    @media (orientation: portrait) {
      .fullscreen-layer:target .fullscreen-layer-hint {
        display: block;
        margin: 0;
        font: var(--type-caption);
        color: var(--color-text-muted);
      }
    }
  }
  .more-actions > summary {
    list-style: none;
  }
  .more-actions > summary::-webkit-details-marker {
    display: none;
  }
  @media (min-width: 1024px) {
    .more-actions,
    .more-actions::details-content,
    .more-actions-panel {
      display: contents;
    }
    .more-actions > summary {
      display: none;
    }
  }
  @supports not selector(::details-content) {
    @media (min-width: 1024px) {
      .more-actions > summary,
      .timeline-table-planned > summary {
        display: revert;
      }
    }
  }
  @media screen and (width < 1024px) {
    .more-actions {
      order: 1;
    }
    .more-actions[open] {
      flex-basis: 100%;
    }
    .more-actions > summary {
      position: relative;
      width: auto;
    }
    .more-actions > summary::after {
      content: "";
      position: absolute;
      inset: -4px 0;
    }
    .more-actions > summary > span {
      margin-left: var(--space-1);
      transition: transform 0.15s ease;
    }
    .more-actions[open] > summary > span {
      transform: rotate(180deg);
    }
    .more-actions-panel {
      display: flex;
      flex-direction: column;
      margin-top: var(--space-2);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .more-actions-panel > form {
      display: block;
      margin: 0;
    }
    .more-actions-panel > a,
    .more-actions-panel > form > button {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 44px;
      margin: 0;
      padding: var(--space-2) var(--space-3);
      font: var(--type-body);
      text-align: left;
      color: var(--color-text);
      text-decoration: none;
      background: none;
      border: 0;
      border-radius: 0;
      border-bottom: 1px solid var(--color-border);
    }
    .more-actions-panel > :last-child,
    .more-actions-panel > form:last-child > button {
      border-bottom: 0;
    }
    .more-actions-panel > a:hover,
    .more-actions-panel > form > button:hover {
      color: var(--color-text);
      background: var(--color-bg);
      border-bottom-color: var(--color-border);
    }
    .more-actions-panel > a::after,
    .more-actions-panel > form > button::after {
      content: none;
    }
  }
  .list-search {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 18rem;
    min-width: 0;
    margin: 0;
  }
  .list form:empty,
  .list-search[hidden],
  .list-bar-selection[hidden] {
    display: none;
  }
  .list-search-icon {
    flex: none;
    color: var(--color-text-muted);
  }
  .list-search input[type="search"] {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 22rem;
    height: var(--action-height);
    min-height: 0;
    margin: 0;
    padding: 0 var(--space-1);
    border: 0;
    border-bottom: 1px solid var(--color-field-border);
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font: var(--type-body);
  }
  .list-search input[type="search"]:focus-visible {
    outline: none;
    border-bottom-color: var(--color-signature);
    box-shadow: 0 1px 0 0 var(--color-signature);
  }
  .list-bar-count {
    flex: none;
    font: var(--type-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .list-bar-selection {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 18rem;
    min-width: 0;
    font: var(--type-label);
  }
  .table th[aria-sort] {
    padding: 0;
  }
  .th-sort {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    min-height: var(--table-row);
    padding-right: var(--space-3);
    color: inherit;
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
  .th-sort:hover {
    color: var(--color-text);
    text-decoration: none;
  }
  .th-arrow {
    font-weight: 400;
    color: var(--color-text-muted);
  }
  th[aria-sort="none"] .th-arrow {
    opacity: 0;
  }
  th[aria-sort="none"] .th-sort:is(:hover, :focus-visible) .th-arrow {
    opacity: 1;
  }
  th:is([aria-sort="ascending"], [aria-sort="descending"]) .th-sort {
    color: var(--color-text);
  }
  .table .cell-select {
    width: 32px;
    padding-right: var(--space-2);
  }
  .table:not([data-select-ready]) .cell-select {
    display: none;
  }
  .cell-select input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
  }
  .cell-link {
    text-decoration: none;
  }
  .cell-link:hover {
    text-decoration: underline;
  }
  .cell-name {
    font-weight: 600;
  }
  .table tbody tr:has(.cell-link[aria-current="true"]) > :is(th, td),
  .table tbody tr[data-chosen] > :is(th, td) {
    background: var(--color-selected);
  }
  .table tbody tr:has(.cell-link[aria-current="true"]) > :first-child {
    box-shadow: inset 2px 0 0 var(--color-primary-dark);
  }
  .table .cell-menu {
    width: 40px;
    padding-right: 0;
    text-align: right;
  }
  .row-menu {
    display: inline-block;
  }
  .row-menu > summary.btn-icon {
    --action-height: 32px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .table tbody tr:not(:hover, :focus-within) .row-menu:not([open]) > summary {
      opacity: 0;
    }
  }
  .row-menu .menu-panel {
    text-align: left;
  }
  .menu-item-danger {
    border-top: 1px solid var(--color-border);
    color: var(--color-danger-text);
  }
  .menu-item-danger:hover {
    color: var(--color-danger-text);
  }
  @media (width < 1024px) {
    .table-cards,
    .table-cards tbody {
      display: block;
    }
    .table-cards thead {
      display: none;
    }
    .table-cards tbody tr {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--space-2);
      min-height: 64px;
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--color-border);
    }
    .table-cards tbody :is(th, td) {
      height: auto;
      padding: 0;
      border: 0;
    }
    .table-cards tbody th {
      flex: 1 1 0;
      min-width: 0;
      order: 1;
      font: var(--type-body-strong);
    }
    .table-cards .cell-select {
      order: 0;
      width: auto;
    }
    .table-cards .cell-menu {
      order: 2;
      width: auto;
    }
    .table-cards .row-menu > summary.btn-icon {
      --action-height: 40px;
    }
    .table-cards tbody td[data-label] {
      order: 3;
      font: var(--type-caption);
      color: var(--color-text-muted);
    }
    .table-cards tbody td[data-label]:empty {
      display: none;
    }
    .table-cards tbody tr::after {
      content: "";
      order: 2;
      flex-basis: 100%;
    }
    .table-cards tbody td[data-label] ~ td[data-label]:not(:empty)::before {
      content: "· ";
    }
    .table-cards[data-select-ready] tbody th + td[data-label] {
      margin-left: calc(16px + var(--space-2));
    }
    .table-cards .row-menu .menu-panel {
      position: absolute;
      right: 0;
      z-index: 20;
      box-shadow: var(--shadow-md);
    }
  }
  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
  }
  .filters + .filters {
    margin-top: calc(-1 * var(--space-1));
  }
  @media (width < 1024px) {
    .filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .filters > * {
      flex: none;
    }
  }
  .filters-label {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .filters .lb-filter {
    gap: 6px;
  }
  .filters .lb-filter b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .filter-dot {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 2px;
    background: var(--census-tint, var(--color-border-strong));
    vertical-align: 1px;
  }
  .lb-filter .filter-dot {
    margin-right: 0;
  }
  .lines {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lines > li {
    display: flex;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-height: 40px;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .lines-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .lines-end {
    display: flex;
    flex: none;
    gap: 2px;
    margin-left: auto;
  }
  .side-part > h3 {
    margin: 0 0 var(--space-1);
    font: var(--type-eyebrow);
    color: var(--color-text-muted);
  }
  .side-danger .note {
    margin: var(--space-1) 0 0;
    flex-basis: 100%;
  }
  .state-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .state-list > li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .state-list .lb-state,
  .lines .lb-state[title] {
    cursor: default;
  }
  .state-seen {
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .state-seen-button {
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--type-caption);
    font-weight: 600;
    cursor: pointer;
  }
  .state-seen-button:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .state-seen-button {
      min-height: 24px;
    }
  }
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-5) var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
  }
  .tiles > li {
    min-width: 0;
  }
  .tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
  }
  .tile:hover {
    color: var(--color-text);
    text-decoration: none;
  }
  .tile:hover .tile-title {
    text-decoration: underline;
  }
  .tile[aria-current="true"] {
    background: var(--color-selected);
    box-shadow: 0 0 0 var(--space-2) var(--color-selected);
  }
  .tile-media,
  .catalog-panel-media {
    display: block;
    aspect-ratio: 2 / 1;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }
  .tile[aria-current="true"] .tile-media {
    border-color: var(--color-primary-dark);
  }
  .tile-media img,
  .catalog-panel-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .tile-blank {
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
  }
  .tile-body {
    display: flex;
    gap: var(--space-2);
    min-width: 0;
  }
  .catalog-glyph {
    display: flex;
    flex: none;
    width: 17px;
  }
  .tile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .tile-title {
    font: var(--type-body-strong);
    overflow-wrap: anywhere;
  }
  .tile-meta,
  .tile-facts {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .tile-labels,
  .catalog-panel-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: 2px;
  }
  .catalog-table th[scope="row"] {
    width: 34%;
  }
  .catalog-table .cell-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .catalog-table .catalog-glyph {
    width: 9px;
  }
  .catalog-table .fase-glifo {
    width: 9px;
    height: 20px;
  }
  .facets {
    --action-height: 40px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .facets {
      --action-height: 32px;
    }
  }
  .facets-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-height: 48px;
    padding: var(--space-1) 0 var(--space-2);
    border-bottom: 1px solid var(--color-border-strong);
  }
  .facets-head h2 {
    flex: 1 1 auto;
    margin: 0;
    font: var(--type-section);
  }
  .facets-head a {
    font: var(--type-label);
  }
  .facets :is(label:not([class]), .choices) {
    max-width: none;
  }
  .facets:not(.facets-inline) .facet-phase {
    flex-direction: column;
    align-items: flex-start;
  }
  .facet-phase .choice {
    min-height: 0;
  }
  .facets-more > summary {
    display: flex;
    align-items: center;
    min-height: var(--action-height);
    font: var(--type-label);
    color: var(--color-primary-dark);
    cursor: pointer;
  }
  .facets-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .facets-more .facets-group {
    padding-top: var(--space-2);
  }
  .facets-foot {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .facets-foot .btn {
    width: auto;
    min-height: var(--action-height);
    padding: 0 var(--space-4);
    font: var(--type-button-sm);
  }
  .facets-inline .facets-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    align-items: start;
    gap: var(--space-3) var(--space-4);
  }
  .facets-inline .facet-phase {
    grid-column: 1 / -1;
  }
  .catalog-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
  }
  .catalog-strip .filters {
    flex: 1 1 auto;
    margin: 0;
  }
  .catalog-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-left: auto;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .catalog-order a {
    color: var(--color-text-muted);
  }
  .catalog-order a[aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
  }
  .side-part > p {
    margin: 0;
  }
  .review-scroll {
    overflow-x: auto;
  }
  .review-table th[scope="row"] {
    min-width: 12rem;
  }
  .review-table th[scope="row"] .cell-sub,
  .review-table .help-error {
    display: block;
  }
  .review-table :is(select, input[type="number"]),
  .review-fill :is(select, input[type="number"]) {
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-field-border);
    border-radius: var(--field-radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--type-body);
  }
  .review-table input[type="number"],
  .review-fill input[type="number"] {
    width: 3.75rem;
  }
  .review-table select {
    min-width: 8.5rem;
  }
  .review-fill .btn {
    width: auto;
    min-height: 32px;
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  .review-age {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .review-check {
    width: 5rem;
    text-align: center;
  }
  .review-check .choice {
    justify-content: center;
    min-height: 0;
    font: inherit;
  }
  .review-table tbody tr[data-invalid] > :is(th, td) {
    background: var(--color-danger-bg);
  }
  .review-fill {
    margin-top: var(--space-4);
  }
  .review-fill-title {
    font: var(--type-label);
  }
  .review-fill-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .review-fill-group label {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .pick-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pick {
    display: flex;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .pick-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pick-title {
    margin: 0;
    font: var(--type-body-strong);
  }
  .pick-meta,
  .pick-goal,
  .pick-flags {
    margin: 2px 0 0;
  }
  .pick-meta {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .pick-goal {
    max-width: var(--text-measure);
  }
  .pick-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .pick-add {
    flex: none;
    flex-wrap: nowrap;
  }
  .pick-add > label {
    flex: none;
    width: 6rem;
  }
  .pick-add .btn {
    width: auto;
    min-height: var(--field-height);
    padding: 0 var(--space-4);
    font: var(--type-button-sm);
  }
  @media (width < 1024px) {
    .pick {
      flex-direction: column;
      align-items: stretch;
    }
  }
  .discarded-table .cell-menu {
    width: auto;
    white-space: nowrap;
  }
  .discarded-table .cell-menu form {
    margin: 0;
  }
  .discarded-table .btn {
    width: auto;
    min-height: 32px;
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  .avatar {
    overflow: hidden;
  }
  .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .avatar svg {
    width: 62%;
    height: 62%;
  }
  .avatar-tint-casco { --avatar-tint: var(--avatar-tint-casco); }
  .avatar-tint-stick { --avatar-tint: var(--avatar-tint-stick); }
  .avatar-tint-pattino { --avatar-tint: var(--avatar-tint-pattino); }
  .avatar-tint-porta { --avatar-tint: var(--avatar-tint-porta); }
  .avatar-tint-pallina { --avatar-tint: var(--avatar-tint-pallina); }
  .avatar-tint-fischietto { --avatar-tint: var(--avatar-tint-fischietto); }
  .avatar[class*="avatar-tint-"] {
    background: var(--avatar-tint);
    color: var(--color-on-fill);
  }
  .avatar:is([class*="avatar-tint-"], .avatar-photo) {
    border-color: transparent;
  }
  .level-choice,
  .level-grid,
  .level-area {
    --level-target: 44px;
  }
  @media (min-width: 1024px) and (pointer: fine) {
    .level-choice,
    .level-grid,
    .level-area {
      --level-target: 32px;
    }
  }
  .level-keys {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .level-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
  }
  .level-swatch {
    display: inline-block;
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    vertical-align: -2px;
  }
  .level-swatch.is-unrated {
    background: var(--lvl-empty);
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .level-swatch.is-na {
    background-color: var(--lvl-na);
    background-image: repeating-linear-gradient(
      45deg,
      var(--lvl-na-key) 0 1.5px,
      transparent 1.5px 5px
    );
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .level-scale {
    margin: 0;
  }
  .level-scale dt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font: var(--type-label);
  }
  .level-scale dt:first-child {
    margin-top: 0;
  }
  .level-scale dd {
    margin: 2px 0 0 calc(0.875rem + var(--space-2));
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .level-matrix-scroll {
    position: relative;
    overflow: auto;
    max-height: min(72vh, 44rem);
    margin: 0 0 var(--space-2);
  }
  .level-matrix {
    --matrix-num: 2.5rem;
    --matrix-name: 11rem;
    --matrix-col: 3.5rem;
    table-layout: fixed;
    width: max-content;
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    font: var(--type-body);
    font-variant-numeric: tabular-nums;
  }
  .level-matrix th,
  .level-matrix td {
    padding: 0;
    border: 0;
  }
  .level-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0 0 var(--space-1);
    background: var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-bg);
    font: var(--type-thead);
    color: var(--color-text-muted);
    text-align: left;
    vertical-align: bottom;
  }
  .level-matrix-corner,
  .level-matrix-num {
    width: var(--matrix-num);
  }
  .level-matrix thead .level-matrix-name {
    width: var(--matrix-name);
  }
  .level-matrix .level-matrix-area {
    width: var(--matrix-col);
    line-height: 1.15;
    text-align: center;
  }
  .level-matrix-num,
  .level-matrix tbody .level-matrix-name {
    position: sticky;
    z-index: 2;
    background: var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-bg);
  }
  .level-matrix .level-matrix-num {
    left: 0;
    padding-right: var(--space-2);
    font: 700 var(--t-3) / 1 var(--ty-display);
    text-align: right;
  }
  .level-matrix .level-matrix-name {
    left: calc(var(--matrix-num) + 4px);
  }
  .level-matrix thead .level-matrix-corner,
  .level-matrix thead .level-matrix-name {
    z-index: 4;
  }
  .level-matrix thead .level-matrix-corner {
    left: 0;
  }
  .level-matrix tbody .level-matrix-name {
    padding: 0 var(--space-2) 0 var(--space-1);
    text-align: left;
    border-right: 1px solid var(--color-border);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .level-matrix-name a {
    color: var(--color-text);
    text-decoration: none;
  }
  .level-matrix-name a:hover {
    text-decoration: underline;
  }
  .matrix-cell {
    height: 2rem;
    border-radius: 4px;
    font: 600 var(--t-3) / 1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .matrix-cell.is-unrated {
    background: var(--lvl-empty);
  }
  .matrix-cell.is-na {
    background-color: var(--lvl-na);
    background-image: repeating-linear-gradient(
      45deg,
      var(--lvl-na-line) 0 1.5px,
      transparent 1.5px 9px
    );
    color: var(--color-text-muted);
  }
  .level-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
  }
  .level-option {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
  }
  .level-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
  }
  .level-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    min-height: var(--level-target);
    padding: 0 var(--space-3);
    border: 2px solid transparent;
    border-radius: 6px;
    font: 600 var(--t-3) / 1.2 var(--font-sans);
    white-space: nowrap;
    hyphens: manual;
    filter: grayscale(0.85);
  }
  .level-chip-empty {
    background: var(--lvl-empty);
    color: var(--color-text-muted);
  }
  .level-option input:checked + .level-chip {
    filter: none;
    border-color: var(--color-text);
    font-weight: 700;
  }
  .level-option input:focus-visible + .level-chip {
    outline: 2px solid var(--color-signature);
    outline-offset: 2px;
  }
  .level-option input:disabled + .level-chip {
    cursor: default;
  }
  .level-choice-compact {
    flex-wrap: nowrap;
    margin: 0;
  }
  .level-choice-compact .level-chip {
    min-width: var(--level-target);
    padding: 0;
  }
  .level-chip-label {
    display: none;
  }
  .elsewhere-level {
    display: none;
    margin: 0 0 var(--space-2);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .level-choice:has(input:checked:not([data-rank="0"])) + .elsewhere-level {
    display: block;
  }
  .level-choice-compact + .elsewhere-level {
    margin: var(--space-1) 0 0;
  }
  .level-grid :is(th, td) {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .level-grid-num {
    width: 2.5rem;
    font: 700 var(--t-3) / 1 var(--ty-display);
    text-align: right;
  }
  .level-grid-name {
    display: block;
    font-weight: 500;
    color: var(--color-text);
  }
  .level-grid-age,
  .level-grid-blocked,
  .level-grid-details {
    display: block;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .level-grid-context {
    color: var(--color-text);
  }
  .level-grid-note input[type="text"] {
    width: 100%;
    min-width: 14rem;
    min-height: var(--field-height);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-field-border);
    border-radius: var(--field-radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--type-body);
  }
  .level-card-head,
  .level-card-look,
  .level-card-note {
    display: none;
  }
  .level-grid tr.is-cursor > :is(th, td) {
    background: var(--color-primary-soft);
  }
  .level-grid tr.is-cursor > :first-child {
    box-shadow: inset 3px 0 0 var(--color-signature);
  }
  .level-grid tr.is-unsaved > :first-child {
    box-shadow: inset 3px 0 0 var(--color-warning-border);
  }
  .level-choice.is-cursor,
  .sub-level.is-cursor {
    outline: 2px solid var(--color-signature);
    outline-offset: 3px;
    border-radius: 6px;
    background: var(--color-primary-soft);
  }
  .is-keyboard [data-cursor-for] {
    cursor: pointer;
  }
  .is-keyboard [data-stop],
  .is-keyboard tr[data-stop] > td {
    scroll-margin-block-end: var(--space-4);
  }
  [data-keyboard-hide][hidden] {
    display: none;
  }
  .level-status {
    margin: var(--space-1) 0 0;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .level-status strong {
    color: var(--color-warning-text);
  }
  .level-area {
    min-width: 0;
    margin: 0 0 var(--space-4);
    padding: var(--space-3) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border-strong);
    border-radius: 0;
    background: none;
  }
  .level-area > legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-2);
    padding: 0;
    font: var(--type-section);
    color: var(--color-text);
  }
  .level-area > legend + * {
    clear: left;
  }
  .level-area.is-unsaved {
    border-top-color: var(--color-warning-border);
  }
  .level-area > label {
    margin: 0;
  }
  .criteria {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .criteria a {
    font-weight: 600;
    color: var(--color-text);
  }
  .sub-levels {
    margin: var(--space-2) 0 0;
  }
  .sub-levels > summary {
    display: flex;
    align-items: center;
    min-height: var(--action-height, 40px);
    font: var(--type-label);
    color: var(--color-primary-dark);
    cursor: pointer;
  }
  .sub-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-1);
  }
  .sub-level {
    display: grid;
    gap: 2px;
    margin: 0;
    font: var(--type-label);
  }
  .sub-level select {
    width: 100%;
    min-height: var(--field-height);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-field-border);
    border-radius: var(--field-radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--type-body);
  }
  .row-link {
    display: block;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
  }
  .row-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .row:has(.row-link):hover {
    background: var(--color-primary-soft);
  }
  .row:has(.row-link):hover .row-link {
    text-decoration: underline;
  }
  .row:has(.row-link) :is(.btn-icon, .btn, form) {
    position: relative;
    z-index: 1;
  }
  .row .meter {
    display: block;
    margin: var(--space-1) 0 2px;
  }
  .row-go {
    color: var(--color-primary-dark);
    font: var(--type-label);
    white-space: nowrap;
  }
  .keys {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  :is(.keys, .editor-bar, .how-body, .note) kbd {
    padding: 0 0.3em;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    font: var(--type-caption);
    color: var(--color-text);
  }
  @media (width < 1024px) {
    .level-matrix {
      --matrix-name: 8rem;
    }
    .row-go-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .level-grid,
    .level-grid tbody {
      display: block;
    }
    .level-grid thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .level-grid-scroll {
      position: relative;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
    }
    .level-grid tbody {
      display: flex;
      gap: var(--space-3);
    }
    .level-grid tr {
      position: relative;
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      gap: var(--space-2);
      padding: var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    .level-grid tr > :is(th, td) {
      display: block;
      height: auto;
      padding: 0;
      border: 0;
      background: none;
    }
    .level-grid tbody tr:hover > :is(th, td) {
      background: none;
    }
    .level-grid .level-grid-num {
      width: auto;
      text-align: center;
      font: var(--type-figure);
    }
    .level-grid td:nth-child(2) {
      text-align: center;
    }
    .level-grid-name {
      font: var(--type-section);
    }
    .level-card-head {
      display: grid;
      grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
      align-items: center;
      margin-bottom: var(--space-2);
      font: var(--type-body);
    }
    .level-card-count {
      grid-column: 2;
      text-align: center;
      font: var(--type-eyebrow);
      color: var(--color-text-muted);
    }
    .level-card-step {
      visibility: hidden;
      min-height: 2.75rem;
      padding: 0;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface);
      color: var(--color-text);
      font: var(--type-section);
    }
    .level-card-step:hover {
      background: var(--color-primary-soft);
      border-color: var(--color-primary);
    }
    .level-card-step[data-card-step="1"] {
      grid-column: 3;
    }
    .is-keyboard .level-card-step {
      visibility: visible;
    }
    .level-card-look {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      margin: 0 0 var(--space-3);
      font: var(--type-caption);
      color: var(--color-text-muted);
      text-align: center;
    }
    .level-card-look strong {
      color: var(--color-text);
    }
    .level-grid .level-choice-compact {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .level-grid .level-choice-compact .level-option:first-child {
      order: 1;
    }
    .level-grid .level-choice-compact .level-chip {
      display: flex;
      justify-content: flex-start;
      min-height: 3.5rem;
      padding: 0 var(--space-4);
      font: 700 var(--t-4) / 1.2 var(--font-sans);
    }
    .level-grid .level-choice-compact .level-chip-empty {
      justify-content: center;
      min-height: 2.75rem;
      font: var(--type-label);
    }
    .level-grid .level-chip-label {
      display: inline;
    }
    .level-chip-mark {
      display: none;
    }
    .level-grid td.level-grid-note {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .level-grid-note .level-status {
      order: -1;
      margin: 0;
    }
    .level-grid-note input[type="text"] {
      min-width: 0;
    }
    .is-keyboard .level-grid-note.is-note-folded input[data-note] {
      display: none;
    }
    .is-keyboard .level-grid-note.is-note-folded .level-card-note {
      display: block;
      align-self: center;
      min-height: 2.75rem;
      padding: 0 var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      color: var(--color-text);
      font: var(--type-label);
    }
    .is-keyboard .level-grid-note.is-note-folded .level-card-note:hover {
      background: var(--color-primary-soft);
      border-color: var(--color-primary);
    }
    .level-grid tr.is-cursor > :is(th, td),
    .level-grid tr.is-cursor > :first-child,
    .level-grid tr.is-unsaved > :first-child {
      background: none;
      box-shadow: none;
    }
    .level-grid tr.is-unsaved {
      border-color: var(--color-warning-border);
    }
  }
  .concept-lines {
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
  }
  .concept-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .concept-line-figure {
    display: block;
    flex: none;
    width: 56px;
    height: 36px;
  }
  .concept-line-figure svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .concept-line-text {
    flex: 1 1 10rem;
    min-width: 0;
  }
  .concept-line-name {
    font: var(--type-title);
    color: inherit;
    text-decoration: none;
  }
  .concept-line-name:hover {
    text-decoration: underline;
  }
  .concept-line-rule {
    margin: 2px 0 0;
  }
  .concept-line-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
  }
  .concept-line-actions form {
    display: contents;
  }
  .concept-line-actions .btn {
    min-height: var(--action-height, 40px);
    padding: 0 var(--space-3);
    font: var(--type-button-sm);
  }
  .team-mark {
    --mark-size: 26px;
    flex: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mark-size);
    height: var(--mark-size);
    padding: calc(var(--mark-size) * 0.09 - 1px);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    object-fit: contain;
    background: var(--paper);
    color: var(--paper-ink-2);
    font: 700 calc(var(--mark-size) * 0.4) / 1 var(--ty-display);
    vertical-align: middle;
  }
  .ss-season {
    --ss-goals: var(--color-ok-border);
    --ss-assists: var(--fam-tecnica);
  }
  .ss-block {
    min-width: 0;
    margin-top: var(--space-4);
  }
  .ss-season .sub-head:has(> h3) {
    align-items: baseline;
    margin: 0 0 var(--space-2);
  }
  .ss-season .sub-head > h3 {
    font: var(--type-title);
    color: var(--color-text);
  }
  .ss-kpis {
    margin: var(--space-2) 0 0;
  }
  .ss-who {
    font: var(--type-label);
    color: var(--color-text);
  }
  .ss-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ss-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ss-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
  .ss-key.is-goals { background: var(--ss-goals); }
  .ss-key.is-assists { background: var(--ss-assists); }
  .ss-key.is-average {
    width: 0;
    height: 12px;
    border-left: 2px dashed var(--color-text-muted);
    border-radius: 0;
  }
  .ss-key.is-up {
    border-radius: 50%;
    background: var(--color-ok-text);
  }
  .ss-key.is-hollow {
    box-sizing: border-box;
    border: 2px solid var(--color-text);
    border-radius: 50%;
    background: var(--color-surface);
  }
  .ss-note {
    margin: var(--space-2) 0 0;
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ss-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ss-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-neutral-dot);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }
  .ss-result.is-v { border-left-color: var(--color-ok-border); }
  .ss-result.is-s { border-left-color: var(--color-danger-border); }
  .ss-result.is-p { border-left-color: var(--color-warning-border); }
  .ss-result-date,
  .ss-result-opp {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ss-result-opp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ss-result-score {
    font: var(--type-figure-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }
  .ss-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--space-5);
  }
  @media (width >= 1024px) {
    .ss-cols {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }
  .ss-bars,
  .ss-compare {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 6.5rem;
    gap: 6px var(--space-2);
    align-items: center;
  }
  .ss-compare {
    grid-template-columns: max-content minmax(0, 1fr) 3rem;
  }
  .ss-name {
    font: var(--type-label);
    color: var(--color-text);
    white-space: nowrap;
  }
  .ss-jersey {
    display: inline-block;
    min-width: 1.75em;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .ss-track {
    display: flex;
    gap: 2px;
    height: 12px;
  }
  .ss-bar {
    height: 100%;
    border-radius: 2px;
  }
  .ss-bar.is-goals { background: var(--ss-goals); }
  .ss-bar.is-assists { background: var(--ss-assists); }
  .ss-fig {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ss-fig > b {
    font: var(--type-figure-cell);
    color: var(--color-text);
  }
  .ss-fig > span {
    font: var(--type-caption);
    color: var(--color-text-muted);
  }
  .ss-compare .ss-fig {
    text-align: right;
  }
  .ss-scale {
    position: relative;
    height: 16px;
  }
  .ss-scale::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 1px solid var(--color-border);
  }
  .ss-average {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border-left: 2px dashed var(--color-text-muted);
  }
  .ss-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--color-text);
  }
  .ss-dot.is-up { background: var(--color-ok-text); }
  .ss-dot.is-hollow {
    box-sizing: border-box;
    border: 2px solid var(--color-text);
    background: var(--color-surface);
  }
  .ss-grid-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--color-border);
  }
  .ss-grid {
    border-collapse: collapse;
    font: var(--type-label);
  }
  .ss-grid :is(th, td) {
    padding: 4px 3px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
  }
  .ss-grid thead th {
    font: var(--type-thead);
    color: var(--color-text-muted);
    white-space: nowrap;
    vertical-align: bottom;
  }
  .ss-grid-outcome {
    display: block;
    margin-top: 2px;
    font-weight: 700;
  }
  .ss-grid-outcome.is-v { color: var(--color-ok-text); }
  .ss-grid-outcome.is-s { color: var(--color-danger-text); }
  .ss-grid-outcome.is-p { color: var(--color-warning-text); }
  .ss-grid .ss-grid-name {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: var(--space-3);
    background: var(--color-bg);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }
  .ss-grid .ss-grid-total {
    padding-left: var(--space-3);
    font: var(--type-figure-cell);
    text-align: right;
  }
  .ss-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font: 600 11px / 1 var(--font-sans);
    font-style: normal;
    vertical-align: middle;
  }
  .ss-cell.is-pts {
    background: var(--color-text);
    color: var(--color-bg);
  }
  .ss-cell.is-in {
    width: 10px;
    height: 10px;
    background: var(--chart-other);
  }
  .ss-cell.is-out {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--chart-other);
  }
  .ss-cell.is-nd {
    width: 16px;
    height: 2px;
    border-radius: 0;
    background: var(--chart-split);
  }
  .ss-legend .ss-cell.is-pts {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .roster-list :is(th, td).ss-num {
    width: 3rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .roster-list td.ss-points {
    font-weight: 600;
  }
  @media (width < 1024px) {
    .table-cards.roster-list tbody td[data-label] ~ td.ss-num[data-label]::before {
      content: "· " attr(data-label) " ";
      color: var(--color-text-muted);
    }
    .table-cards.roster-list tbody td.ss-num {
      width: auto;
    }
  }
}