/* Game layout, palette, and component styles. */
@layer components {
  :root {
    --white: #fff;
    --greenTint: #edf4ef;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button,
  input {
    font: inherit;
  }
  button {
    cursor: pointer;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible {
    outline: 3px solid #d7aa4f;
    outline-offset: 3px;
  }
  .container {
    margin: 0 auto;
    padding: 0 28px;
  }
  .header .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: -.5px;
  }
  .mark {
    height: 38px;
    width: 38px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
  }
  .mark svg {
    display: block;
    width: 25px;
    height: 25px;
  }
  .nav {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 650;
    color: #3d4642;
  }
  .nav a:hover {
    color: var(--pine);
  }
  h1 {
    font-size: clamp(30px,3.6vw,45px);
    line-height: 1.12;
    letter-spacing: -1.75px;
    margin: 16px 0 13px;
    max-width: 850px;
    color: var(--ink);
  }
  h1 span {
    color: var(--cranberry);
  }
  .intro {
    color: #646c68;
    margin: 0;
  }
  .studio {
    display: grid;
  }
  .pane {
    border: 1px solid #e5e8e3;
    border-radius: 16px;
    box-shadow: var(--shadow);
    min-width: 0;
  }
  .setup {
    padding: 29px;
  }
  .pane-heading {
    margin: 0 0 25px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.65px;
  }
  .pane-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 27px;
  }
  .field-label {
    font-weight: 700;
    font-size: 14px;
    display: block;
    margin: 0 0 11px;
  }
  .counter {
    display: flex;
    height: 60px;
    border: 1px solid #cdd8d1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .counter button {
    width: 68px;
    border: 0;
    background: #f4f8f5;
    color: var(--pine);
    font-size: 26px;
    font-weight: 550;
  }
  .counter button:disabled {
    opacity: .32;
    cursor: not-allowed;
  }
  .counter button:hover:not(:disabled) {
    background: #e1ebe4;
  }
  .counter output {
    flex: 1;
    display: grid;
    place-items: center;
    border-left: 1px solid #dce4de;
    border-right: 1px solid #dce4de;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .hint {
    font-size: 12px;
    color: var(--muted);
    margin: 10px 0 25px;
  }
  .settings {
    background: #f7f7f5;
    border: 1px solid #e9eae5;
    border-radius: 10px;
    padding: 4px 17px;
    margin-bottom: 24px;
  }
  .setting {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #e6e8e4;
    font-size: 13px;
  }
  .setting:last-child {
    border-bottom: 0;
  }
  .setting span {
    color: var(--muted);
  }
  .setting strong {
    font-size: 13px;
    font-weight: 700;
  }
  .btn {
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 750;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    transition: background .15s ease,transform .15s ease;
  }
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn.secondary:hover {
    background: #eef4f0;
  }
  .btn.textual {
    background: transparent;
    padding: 9px 3px;
    min-height: auto;
  }
  .btn.full {
    width: 100%;
  }
  .smallnote {
    font-size: 12px;
    text-align: center;
    color: var(--muted);
    margin: 10px 0 0;
  }
  .muted-line {
    margin-top: 20px;
    padding-top: 19px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
  }
  .muted-line span {
    color: var(--muted);
  }
  .preview {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(145deg,#fff 0%,#fbfcfa 75%);
  }
  .preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 14px;
  }
  .preview-head small {
    font-size: 12px;
    color: var(--muted);
  }
  .sheet {
    width: min(100%,515px);
    margin: auto;
  }
  .sheet-head {
    text-align: center;
    position: relative;
  }
  .sheet-head:before {
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: var(--cranberry);
  }
  .gridcard {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
  .cell {
    aspect-ratio: 1.09 / 1;
    min-height: 0;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(8.5px,1.03vw,12.2px);
    font-weight: 600;
    overflow-wrap: anywhere;
    line-height: 1.2;
    border-right: 1px solid #aeb8ae;
    border-bottom: 1px solid #aeb8ae;
    color: var(--ink);
  }
  .cell.free {
    font-size: 13px;
    font-weight: 850;
  }
  .sheet-foot {
    display: flex;
    justify-content: space-between;
    margin: 12px 2px 0;
    font-size: 10px;
  }
  .preview-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 15px;
  }
  .preview-actions button {
    font-size: 12px;
  }
  .preview-sub {
    font-size: 12px;
    color: #738077;
    text-align: center;
    margin: 7px 0 0;
  }
  .section {
    padding: 60px 0 0;
  }
  .section h2 {
    font-size: 27px;
    letter-spacing: -.85px;
    margin: 0 0 11px;
  }
  .section-lead {
    color: var(--muted);
    margin: 0 0 24px;
  }
  .steps {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 15px;
  }
  .step {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 21px;
  }
  .step-n {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 850;
    font-size: 14px;
    margin-bottom: 15px;
  }
  .step h3 {
    margin: 0 0 7px;
    font-size: 16px;
  }
  .step p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
  }
  .faq {
    border-top: 1px solid #e6e7df;
    margin-top: 15px;
  }
  .faq details {
    padding: 19px 0;
    border-bottom: 1px solid #e6e7df;
  }
  .faq summary {
    cursor: pointer;
    font-weight: 700;
    position: relative;
    padding-right: 20px;
  }
  .faq details p {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
  }
  .footer {
    margin-top: 70px;
    padding: 30px 0;
    font-size: 13px;
  }
  .footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
  }
  .footer-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .footer-links a {
    color: #38403d;
    font-weight: 600;
  }
  .footer-links a:hover {
    text-decoration: underline;
    text-decoration-color: var(--cranberry);
    text-underline-offset: 4px;
  }
  .setting label {
    color: var(--muted);
  }
  .setting select {
    max-width: 195px;
    min-height: 37px;
    border: 1px solid #cdd8d1;
    border-radius: 7px;
    background: #fff;
    color: #243d30;
    padding: 7px 8px;
    font-size: 13px;
    font-weight: 650;
  }
  .setting #setCode {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing: .025em;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .restore-set {
    border: 1px solid #d3e3d8;
    border-radius: 10px;
    padding: 16px;
    background: #f5faf6;
    margin-bottom: 19px;
  }
  .restore-set .field-label {
    margin: 0 0 7px;
  }
  .restore-set .verifyRow input {
    width: 240px;
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    font-family: ui-monospace,monospace;
  }
  .restore-help {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
  }
  .restore-set .verifyRow {
    flex-wrap: wrap;
  }
  .restore-set .verifyRow button {
    white-space: nowrap;
  }
  .host {
    display: none;
    margin-top: 25px;
    scroll-margin-top: 18px;
  }
  .host.open {
    display: block;
  }
  .host-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 19px;
  }
  .host-head h2 {
    margin: 0 0 5px;
    font-size: 24px;
  }
  .host-head p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
  }
  .host-top {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,.74fr);
    gap: 20px;
  }
  .host-box {
    border: 1px solid #e4e9e4;
    border-radius: 12px;
    padding: 18px;
  }
  .host-box h3 {
    font-size: 16px;
    margin: 0 0 10px;
  }
  .host-box p {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 12px;
  }
  .host-progress {
    font-size: 13px;
    font-weight: 750;
    margin: 0 0 10px;
  }
  .song-search {
    width: 100%;
    min-height: 42px;
    border: 1px solid #ccd6d0;
    border-radius: 8px;
    padding: 9px 12px;
    background: #fff;
    margin-bottom: 11px;
  }
  .song-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    max-height: 360px;
    overflow: auto;
    padding-right: 3px;
  }
  .song-btn {
    background: #fff;
    border: 1px solid #e2e9e3;
    border-radius: 7px;
    min-height: 48px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.25;
  }
  .song-btn:hover {
    background: #f0f6f0;
  }
  .tick {
    height: 18px;
    width: 18px;
    border: 1.5px solid #a8b8ae;
    border-radius: 5px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: #fff;
  }
  .song-btn.played .tick {
    background: var(--pine);
    border-color: var(--pine);
  }
  .song-btn small {
    color: #829087;
    font-size: 10px;
  }
  .host-controls {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .field {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cdd8d1;
    border-radius: 8px;
    padding: 9px 12px;
  }
  .result {
    margin-top: 13px;
    background: #f4f7f4;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    min-height: 55px;
    color: #385145;
  }
  .result.success {
    background: #e6f3e9;
    color: #1c6742;
  }
  .result.error {
    background: #fff2ed;
    color: #8d382b;
  }
  .verifyRow {
    display: flex;
    gap: 9px;
  }
  .verifyRow input {
    width: 95px;
  }
  .host-utility {
    font-size: 13px;
    margin-top: 14px;
    color: var(--muted);
  }
  .notice {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: #1d4333;
    color: #fff;
    padding: 12px 17px;
    border-radius: 9px;
    box-shadow: 0 12px 32px #14362633;
    z-index: 30;
    max-width: calc(100vw - 36px);
    font-size: 13px;
    display: none;
  }
  .notice.show {
    display: block;
  }
  .music-prep {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 9px;
    flex-wrap: wrap;
  }
  .music-prep label {
    font-size: 12px;
    font-weight: 650;
    color: #50665b;
  }
  .music-prep select {
    font: inherit;
    font-size: 12px;
    background: #fff;
    border: 1px solid #cdd8d1;
    border-radius: 7px;
    min-height: 36px;
    padding: 5px 8px;
    color: #284333;
  }
  .music-note {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 12px;
  }
  .song-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
  }
  .song-row .song-btn {
    min-width: 0;
    flex: 1;
  }
  .song-row .song-btn span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .song-lookup {
    width: 36px;
    min-width: 36px;
    border: 1px solid #d4e0d7;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--pine);
    background: #f7faf8;
  }
  .song-lookup:hover {
    background: #e8f3ec;
  }
  .song-lookup:focus-visible,
  .music-prep select:focus-visible {
    outline: 3px solid #d7aa4f;
    outline-offset: 3px;
  }
  @media(max-width:900px) {
    .steps {
      grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .setup,
    .preview {
      padding: 20px;
    }
    .cell {
      font-size: clamp(8px,1.05vw,10px);
    }
    .host-top {
      grid-template-columns: 1fr;
    }
    .song-list {
      max-height: 390px;
    }
  }
  @media(max-width:720px) {
    .brand {
      gap: 8px;
    }
    .mark {
      width: 33px;
      height: 33px;
      border-radius: 9px;
    }
    .nav {
      font-size: 12px;
    }
    h1 {
      font-size: 34px;
      letter-spacing: -1.35px;
      margin-top: 12px;
    }
    .setup {
      padding: 22px;
    }
    .preview {
      padding: 20px 14px;
    }
    .preview-head {
      padding: 0 8px;
    }
    .sheet {
      width: min(100%,405px);
    }
    .cell {
      font-size: clamp(8.5px,2.4vw,10.6px);
    }
    .section {
      padding-top: 45px;
    }
    .steps {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .step {
      padding: 18px;
      display: grid;
      grid-template-columns: 34px 1fr;
      column-gap: 13px;
      align-items: start;
    }
    .step-n {
      grid-row: 1/3;
      margin-bottom: 0;
    }
    .step h3 {
      margin-bottom: 4px;
    }
    .step p {
      grid-column: 2;
    }
    .footer .container {
      align-items: flex-start;
      flex-direction: column;
    }
    .song-list {
      grid-template-columns: 1fr;
    }
    .host-head {
      align-items: flex-start;
    }
  }
  @media(max-width:350px) {
    .nav {
      font-size: 11px;
    }
    h1 {
      font-size: 31px;
    }
    .cell {
      font-size: 7px;
    }
    .preview {
      padding: 13px;
    }
    .setup {
      padding: 17px;
    }
  }
  @media print {
    .notice {
      display: none !important;
    }
  }
  .set-details {
    font-size: 12px;
    color: var(--muted);
    margin: 13px 0 0;
    padding: 0 3px;
  }
  .set-details summary {
    cursor: pointer;
    color: #536158;
    font-size: 12px;
    display: list-item;
    width: max-content;
    max-width: 100%;
  }
  .set-details[open] {
    padding-bottom: 4px;
  }
  .set-details p {
    margin: 7px 0 5px;
    line-height: 1.45;
  }
  .set-details code {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ink);
    overflow-wrap: anywhere;
    letter-spacing: .02em;
  }
  .enlarge-btn {
    display: none;
  }
  .zoom-dialog {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 70px #1b322d40;
    width: min(660px,calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    max-height: calc(100dvh - 24px);
    color: var(--ink);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .zoom-dialog::backdrop {
    background: #15241ecc;
  }
  .zoom-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
  }
  .zoom-top strong {
    font-size: 15px;
  }
  .zoom-top .btn {
    min-height: 38px;
    padding: 8px 15px;
  }
  .zoom-tip {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 10px;
  }
  .zoom-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 2px;
  }
  .zoom-sheet {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    box-shadow: none;
    padding: 8px;
  }
  .zoom-sheet .sheet-head {
    font-size: clamp(13px,3.2vw,19px);
    padding: 14px 5px;
  }
  .zoom-sheet .cell {
    min-height: 94px;
    aspect-ratio: auto;
    font-size: clamp(10.4px,2.9vw,12px);
    line-height: 1.22;
    padding: 5px 3px;
    font-weight: 650;
    overflow-wrap: anywhere;
    word-break: normal;
    cursor: pointer;
  }
  .zoom-sheet .cell.free {
    font-size: 14px;
    cursor: default;
  }
  .zoom-title {
    min-height: 43px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f6f7f4;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
  }
  @media(max-width:350px) {
    .zoom-dialog {
      width: calc(100vw - 8px);
      max-width: calc(100vw - 8px);
      padding: 7px;
    }
    .zoom-sheet {
      padding: 3px;
    }
    .zoom-sheet .cell {
      font-size: 9.5px;
      min-height: 100px;
      padding: 3px 1px;
    }
    .zoom-sheet .sheet-head {
      font-size: 12px;
    }
  }
  @media(max-width:720px) {
    .enlarge-btn {
      display: inline-flex;
    }
    .preview-actions {
      gap: 7px;
    }
    .preview-actions .btn {
      font-size: 12px;
      padding: 10px 4px;
    }
  }
  [hidden] {
    display: none !important;
  }
  #print-cards {
    scroll-margin-top: 18px;
  }
  .preview-play {
    margin-top: 10px;
    width: min(100%,220px);
  }
  .player-dialog {
    width: min(750px,calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 14px);
    overflow-y: auto;
    border: 1px solid #e2e6df;
    border-radius: 18px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 24px 80px #162f2550;
    color: var(--ink);
  }
  .player-dialog::backdrop {
    background: #15241ed6;
  }
  .player-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
  }
  .player-heading h2 {
    font-size: clamp(20px,3vw,25px);
    line-height: 1.2;
    letter-spacing: -.5px;
    margin: 1px 0 4px;
  }
  .player-heading p {
    margin: 0;
    color: #65706a;
    font-size: 13px;
  }
  .player-heading .player-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .player-heading .btn {
    padding: 8px 12px;
    min-height: 38px;
    flex: none;
  }
  .player-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--pine);
    padding: 16px 0 9px;
    gap: 12px;
  }
  .player-board {
    width: 100%;
    max-width: 615px;
    margin: 0 auto;
  }
  .player-board-title {
    text-align: center;
  }
  .player-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    width: 100%;
  }
  .player-cell {
    min-width: 0;
    min-height: 88px;
    border: 0;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px;
    line-height: 1.17;
    font-size: clamp(10px,1.35vw,13.5px);
    font-weight: 650;
    position: relative;
    overflow-wrap: anywhere;
    transition: background .12s ease;
  }
  .player-cell:nth-child(5n) {
    border-right: 0;
  }
  .player-cell:nth-last-child(-n+5) {
    border-bottom: 0;
  }
  .player-cell:not(:disabled):hover {
    background: #f0f6f0;
  }
  .player-cell.marked:not(.free)::after {
    content: '✓';
    position: absolute;
    right: 2px;
    top: 0px;
    color: var(--pine);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }
  .player-cell.free {
    font-size: 14px;
    font-weight: 850;
    cursor: default;
  }
  .player-cell:focus-visible {
    outline: 3px solid #a87b12;
    outline-offset: -3px;
    z-index: 1;
  }
  .player-song-detail {
    padding: 10px 13px;
    min-height: 43px;
    background: #f6f7f4;
    border-radius: 9px;
    color: #405349;
    font-size: 13px;
    margin-top: 14px;
  }
  .player-result {
    padding: 10px 13px;
    border-radius: 9px;
    font-weight: 650;
    margin-top: 10px;
    background: #f6f7f4;
    color: #43564c;
  }
  .player-result.bingo {
    color: #573f0a;
    border: 1px solid #e6c979;
    font-size: 16px;
  }
  .player-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
  }
  .player-actions .btn {
    min-height: 42px;
    font-size: 13px;
  }
  .player-help {
    font-size: 12px;
    color: #607067;
    line-height: 1.5;
    margin: 13px 0 0;
  }
  @media(max-width:720px) {
    .player-dialog {
      width: calc(100vw - 8px);
      max-width: calc(100vw - 8px);
      padding: 12px;
      border-radius: 12px;
    }
    .player-cell {
      font-size: clamp(8.2px,2.55vw,11px);
      min-height: 74px;
      padding: 3px 2px;
      line-height: 1.12;
    }
    .player-heading h2 {
      font-size: 20px;
    }
    .player-actions .btn {
      flex: 1;
      padding: 9px 7px;
      min-width: 90px;
      font-size: 11px;
    }
    .player-cell.marked:not(.free)::after {
      font-size: 11px;
      right: 1px;
    }
  }
  @media(max-width:350px) {
    .player-cell {
      font-size: 8px;
      min-height: 75px;
      padding: 2px 1px;
    }
    .player-heading .btn {
      padding: 7px 9px;
    }
    .player-dialog {
      padding: 7px;
    }
  }
  .share-shortcut {
    display: inline-block;
    margin-top: 9px;
    font-size: 13px;
    color: var(--pine);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .share-cards {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #dbe4dc;
    border-radius: 12px;
    scroll-margin-top: 16px;
  }
  .share-cards summary {
    cursor: pointer;
    padding: 17px 18px;
    font-weight: 800;
    font-size: 16px;
    color: var(--ink);
  }
  .share-cards[open] summary {
    border-bottom: 1px solid #e5e9e4;
  }
  .share-content {
    padding: 13px 18px 17px;
  }
  .share-content p {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 12px;
  }
  .share-note {
    background: #f5f8f5;
    border: 1px solid #e0eae2;
    border-radius: 8px;
    padding: 10px 12px;
    color: #476051;
    font-size: 12px;
    margin: 0 0 12px;
  }
  .share-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    max-height: 310px;
    overflow-y: auto;
    padding: 1px 3px 3px 0;
  }
  .share-item {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    border: 1px solid #e4e9e4;
    border-radius: 8px;
    padding: 8px;
    min-width: 0;
  }
  .share-item strong {
    font-size: 13px;
    margin-right: auto;
    white-space: nowrap;
  }
  .share-item button {
    min-height: 35px;
    padding: 7px 9px;
    font-size: 12px;
  }
  .share-item button:disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none;
  }
  .share-manual {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #bbcabe;
    border-radius: 8px;
    font-size: 12px;
    color: var(--ink);
  }
  @media(max-width:720px) {
    .share-grid {
      grid-template-columns: 1fr;
    }
    .share-content {
      padding: 12px;
    }
    .share-cards summary {
      padding: 15px;
    }
  }
  @media print {
    .player-dialog {
      display: none !important;
    }
  }
  .top {
    padding-bottom: 24px;
  }
  .play-shell {
    gap: 20px;
    align-items: start;
    scroll-margin-top: 12px;
    margin-bottom: 34px;
  }
  .play-shell .player-dialog {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .player-dialog::backdrop {
    display: none;
  }
  .play-shell .player-cell {
    font-size: clamp(10px,1.08vw,13px);
    padding: 5px;
  }
  .play-shell .player-heading .player-eyebrow {
    color: var(--cranberry);
    letter-spacing: .9px;
  }
  .play-shell .player-heading h2 {
    font-size: 23px;
  }
  .play-rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid #e8e2d7;
  }
  .rule-dot {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8f0ea;
    color: var(--pine);
    display: grid;
    place-items: center;
    font-weight: 750;
  }
  .play-rule strong {
    display: block;
    font-size: 14px;
    margin: 0 0 4px;
  }
  .play-rule small {
    display: block;
    color: #65706a;
    font-size: 12px;
    line-height: 1.5;
  }
  @media(max-width:980px) {
    .play-shell .player-cell {
      font-size: 10px;
    }
  }
  @media(max-width:720px) {
    .play-shell {
      gap: 12px;
      margin-bottom: 25px;
    }
    .play-shell .player-cell {
      font-size: clamp(8px,2.4vw,11px);
      padding: 3px 2px;
    }
    .nav a:nth-child(2) {
      display: none;
    }
    .player-actions {
      gap: 8px;
    }
  }
  @media(max-width:350px) {
    .play-shell .player-cell {
      font-size: 7.8px;
    }
    .nav a:nth-child(3) {
      display: none;
    }
  }
  .intro {
    font-size: 14px;
    line-height: 1.5;
    max-width: 880px;
  }
  .studio {
    scroll-margin-top: 12px;
  }
  .studio .pane-heading {
    margin: 0 0 17px;
  }
  .studio .field-label {
    margin-bottom: 8px;
  }
  .editor-note {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
  }
  .create-cards {
    margin-bottom: 14px;
  }
  .print-options {
    margin: 0;
    border: 1px solid #e6eae5;
    border-radius: 10px;
    background: #fafbf9;
    padding: 0 13px;
  }
  .print-options summary {
    padding: 11px 0;
    font-weight: 650;
    cursor: pointer;
    font-size: 13px;
    color: #42594b;
  }
  .print-options .settings {
    margin: 0 0 10px;
    border: 0;
    padding: 0 6px;
    background: transparent;
  }
  .print-options .setting {
    padding: 9px 0;
  }
  .game-ready {
    margin-top: 16px;
    display: grid;
    gap: 9px;
    padding: 16px;
    background: #f4f8f4;
    border: 1px solid #d1e0d3;
    border-radius: 10px;
  }
  .game-ready[hidden],
  .studio .preview-play[hidden] {
    display: none !important;
  }
  .ready-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    color: var(--pine2);
  }
  .ready-head span {
    font-size: 12px;
    color: #60756a;
  }
  .game-ready .btn {
    min-height: 42px;
    font-size: 13px;
  }
  .game-ready .smallnote {
    margin: 0;
  }
  .game-ready .set-details {
    margin-top: 4px;
  }
  .studio .sheet {
    width: min(100%,435px);
    padding: 12px 11px;
    margin: 0 auto;
  }
  .studio .cell {
    font-size: clamp(8px,.84vw,10.5px);
    aspect-ratio: 1.11/1;
  }
  .studio .sheet-foot {
    margin-top: 7px;
  }
  .studio .preview-actions {
    gap: 8px;
  }
  .studio .preview-actions button {
    font-size: 12px;
    padding: 8px 2px;
  }
  .studio .preview-play {
    margin-top: 6px;
  }
  .play-shell[hidden] {
    display: none !important;
  }
  .play-shell {
    display: none;
    max-width: 800px;
    margin: 24px auto 24px;
    grid-template-columns: 1fr;
  }
  .play-shell.is-open {
    display: block;
  }
  .play-shell .player-dialog {
    width: 100%;
    max-width: none;
  }
  .play-shell .player-cell {
    min-height: 65px;
  }
  @media(max-width:720px) {
    .studio .sheet {
      width: min(100%,425px);
    }
    .studio .cell {
      font-size: clamp(8px,2.35vw,11px);
    }
  }
  .role-route-bar .player-nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .role-route-bar .simple-back {
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: normal;
  }
  .role-route-bar .simple-back:hover {
    text-decoration: underline;
  }
  .player-restored {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin: 10px 0;
    background: #edf4ef;
    border: 1px solid #c9dace;
    border-radius: 8px;
    color: var(--pine2);
    font-size: 13px;
  }
  .player-restored[hidden] {
    display: none !important;
  }
  .player-restored button {
    background: none;
    border: 0;
    color: var(--pine);
    font: inherit;
    font-weight: 750;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
  }
  @media(max-width:420px) {
    .role-route-bar .player-nav-actions {
      gap: 10px;
    }
  }
  .top h1 {
    margin: 5px 0 6px;
  }
  .nav {
    gap: 23px;
  }
  .studio .setup {
    display: flex;
    flex-direction: column;
  }
  .studio .setup .pane-heading {
    margin: 0 0 17px;
    font-size: 22px;
  }
  .studio .hint {
    margin: 8px 0 14px;
  }
  .studio .counter {
    height: 55px;
  }
  .studio .editor-note {
    margin: 3px 0 14px;
  }
  .studio .preview {
    justify-content: center;
  }
  .studio .preview-head {
    margin-bottom: 9px;
  }
  .studio .preview-actions {
    margin-top: 9px;
  }
  .studio .preview-sub {
    margin: 3px 0 0;
  }
  .restore-home {
    margin-top: 16px;
    padding-top: 12px;
  }
  .restore-home summary {
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
  }
  .restore-home .restore-set {
    margin: 11px 0 0;
    padding: 12px;
  }
  .restore-home .restore-help {
    font-size: 11px;
  }
  #ready[hidden],
  #game-tool[hidden],
  #host[hidden],
  #play[hidden] {
    display: none !important;
  }
  .prepared-page {
    max-width: 800px;
    margin: 0 auto 36px;
  }
  .prepared-page h1 {
    margin: 0 0 10px;
    font-size: clamp(27px,3vw,36px);
    letter-spacing: -1.1px;
  }
  .prepared-page .view-header p {
    margin: 0;
  }
  .view-kicker {
    letter-spacing: 1.1px;
    font-weight: 850;
  }
  .prepared-page .game-ready {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
  }
  .prepared-page .game-ready .ready-head,
  .prepared-page .game-ready .smallnote,
  .prepared-page .game-ready .set-details,
  .prepared-page .game-ready .muted-line,
  .prepared-page .game-ready .print-options {
    grid-column: 1/-1;
  }
  .prepared-page .game-ready #readyShare {
    display: none;
  }
  .prepared-page .game-ready #openHost {
    grid-column: 2;
  }
  .prepared-page .game-ready #download {
    grid-column: 1;
  }
  .prepared-page .game-ready #playPreview {
    grid-column: 1/-1;
  }
  .prepared-page .share-cards {
    margin-top: 8px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 13px;
    padding: 11px 17px;
  }
  .prepared-page .share-content {
    padding-top: 10px;
  }
  .prepared-page .share-grid {
    max-height: 320px;
    overflow: auto;
  }
  .back-editor {
    margin: 14px 0;
  }
  .role-route-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 16px;
  }
  .role-route-bar .simple-back {
    color: var(--pine);
    font-weight: 700;
  }
  #host {
    margin: 5px auto 30px;
    max-width: 1020px;
    display: block;
  }
  #host .host-head {
    margin-bottom: 15px;
  }
  #play {
    margin: 4px auto 30px;
    max-width: 690px;
  }
  #play.is-open {
    display: block;
  }
  body[data-view="ready"] .top,
  body[data-view="host"] .top,
  body[data-view="player"] .top,
  body[data-view="ready"] .nav a:not(:first-child),
  body[data-view="host"] .nav a:not(:first-child),
  body[data-view="player"] .nav a:not(:first-child),
  body[data-view="ready"] #how-to-play,
  body[data-view="ready"] #faq,
  body[data-view="host"] #how-to-play,
  body[data-view="host"] #faq,
  body[data-view="player"] #how-to-play,
  body[data-view="player"] #faq {
    display: none;
  }
  body[data-view="player"] #play .player-dialog {
    padding: 20px;
  }
  @media(max-width:720px) {
    .container {
      padding: 0 15px;
    }
    .prepared-page .game-ready {
      grid-template-columns: 1fr;
    }
    .prepared-page .game-ready #readyShare,
    .prepared-page .game-ready #openHost,
    .prepared-page .game-ready #download,
    .prepared-page .game-ready #playPreview {
      grid-column: 1;
    }
    .role-route-bar {
      margin-top: 14px;
    }
    #host {
      padding: 17px;
    }
    #host .host-top {
      grid-template-columns: 1fr;
    }
    .nav {
      gap: 12px;
    }
  }
  .player-read-controls {
    display: none;
  }
  .player-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  @media(max-width:600px) {
    .player-read-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
      flex-wrap: wrap;
      margin: -1px 0 10px;
    }
    .player-read-toggle {
      border: 1px solid #c2d5c7;
      background: #fff;
      color: #185640;
      border-radius: 8px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 750;
    }
    .player-read-controls span {
      color: #54655b;
      font-size: 11px;
      line-height: 1.3;
    }
    .play-shell .player-scroll.is-expanded .player-cell.free {
      font-size: 16px;
    }
  }
  body[data-view="ready"] .prepared-page {
    max-width: 970px;
    margin: 0 auto 42px;
  }
  .ready-backline {
    display: flex;
    align-items: center;
    margin: 22px 0 16px;
    gap: 12px;
  }
  .ready-backline .simple-back {
    font-size: 13px;
    font-weight: 650;
  }
  .ready-step {
    font-size: 10px;
    letter-spacing: 1.4px;
    font-weight: 800;
    color: #86938b;
  }
  body[data-view="ready"] .prepared-page .view-header {
    padding: 0 0 22px;
  }
  body[data-view="ready"] .prepared-page .view-header h1 {
    font-size: clamp(28px,3vw,39px);
    line-height: 1.15;
    margin: 5px 0 9px;
  }
  body[data-view="ready"] .prepared-page .view-header p:last-child {
    font-size: 14px;
    line-height: 1.5;
  }
  body[data-view="ready"] .prepared-page .game-ready {
    display: block;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }
  .ready-overview {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #d4e5d7;
    border-radius: 12px;
    padding: 15px 18px;
    margin-bottom: 17px;
  }
  .ready-overview-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 17px;
    font-weight: 800;
  }
  .ready-overview div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .ready-overview strong {
    font-size: 15px;
    color: var(--pine2);
  }
  .ready-overview div>span {
    font-size: 12px;
    color: #577161;
  }
  .ready-task-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }
  body[data-view="ready"] .prepared-page .ready-task {
    display: block;
    border: 1px solid #e1e7e1;
    border-radius: 13px;
    padding: 0;
    margin: 0;
    min-width: 0;
    box-shadow: 0 2px 9px #193a2706;
  }
  .ready-task>summary,
  .ready-task-title {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    min-height: 91px;
  }
  .ready-task>summary::-webkit-details-marker {
    display: none;
  }
  .ready-task>summary::marker {
    content: '';
  }
  .ready-task>summary:hover {
    border-radius: 13px;
  }
  .ready-task>summary:focus-visible {
    outline: 3px solid #d7aa4f;
    outline-offset: -3px;
  }
  .ready-task[open]>summary {
    border-bottom: 1px solid #edf0eb;
    border-radius: 13px 13px 0 0;
  }
  .ready-task-icon {
    height: 44px;
    width: 44px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 11px;
  }
  .ready-task-icon svg {
    height: 23px;
    width: 23px;
  }
  .ready-task-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .ready-task-copy strong {
    font-size: 16px;
    line-height: 1.3;
  }
  .ready-task-copy small {
    font-size: 12px;
    line-height: 1.45;
  }
  .ready-task-chevron {
    margin-left: auto;
    font-size: 22px;
    color: #839487;
    line-height: 1;
    transition: transform .15s;
    flex: none;
  }
  .ready-task[open] .ready-task-chevron {
    transform: rotate(180deg);
  }
  body[data-view="ready"] .ready-share .share-content {
    padding: 17px 22px 21px;
  }
  .ready-share .share-content>p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
  }
  .ready-share .share-note {
    font-size: 12px;
    margin-bottom: 13px;
  }
  .ready-share .share-grid {
    max-height: 340px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    overflow: auto;
  }
  .ready-share .share-item {
    padding: 10px;
    border-radius: 9px;
    gap: 9px;
  }
  .ready-share .share-item button {
    white-space: nowrap;
  }
  .ready-print {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 18px;
  }
  .ready-print .ready-task-title {
    min-width: 0;
    cursor: default;
  }
  .ready-print .ready-print-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 15px 21px 15px 0;
  }
  body[data-view="ready"] .ready-print .print-options {
    border: 0;
  }
  body[data-view="ready"] .ready-print .print-options>summary {
    color: var(--pine);
    font-size: 13px;
  }
  body[data-view="ready"] .ready-print .print-options[open] {
    position: static;
  }
  body[data-view="ready"] .ready-print .print-options .settings {
    z-index: 5;
  }
  body[data-view="ready"] .ready-print .print-options[open] .settings {
    display: block;
  }
  body[data-view="ready"] .ready-print .ready-print-btn {
    min-width: 165px;
    min-height: 43px;
    white-space: nowrap;
  }
  body[data-view="ready"] .ready-print .ready-print-btn span {
    font-size: 17px;
  }
  .ready-music-content {
    padding: 19px 22px 21px;
  }
  .ready-music-content>p {
    margin: 0 0 12px;
    color: #607168;
    font-size: 12px;
  }
  .ready-songs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    max-height: 335px;
    overflow: auto;
    margin-bottom: 15px;
    border: 1px solid #e7eae5;
    border-radius: 9px;
    padding: 7px 15px;
  }
  .ready-song-row {
    display: flex;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid #e9eeea;
    min-width: 0;
  }
  .ready-song-index {
    font-size: 12px;
    color: #849287;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    flex: none;
    min-width: 20px;
    padding-top: 2px;
  }
  .ready-song-row div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }
  .ready-song-row strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .ready-song-row div span {
    font-size: 11px;
  }
  body[data-view="ready"] .ready-music-content .btn {
    min-height: 40px;
    padding: 9px 14px;
  }
  .ready-host-cta {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e2e8df;
    border-radius: 13px;
    padding: 21px 23px;
    margin-top: 17px;
  }
  .ready-host-cta>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ready-host-cta strong {
    font-size: 17px;
  }
  .ready-host-cta span {
    font-size: 12px;
    color: #6b766d;
  }
  body[data-view="ready"] .ready-host-cta #openHost {
    min-width: 215px;
    min-height: 49px;
    font-size: 14px;
    grid-column: auto;
    border: 0;
  }
  body[data-view="ready"] .ready-host-cta #openHost span {
    color: inherit;
    font-size: 18px;
  }
  .ready-utilities {
    display: flex;
    gap: 22px;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 14px;
    padding: 0 4px;
  }
  body[data-view="ready"] .ready-utilities .set-details {
    margin: 2px 0 0;
    grid-column: auto;
  }
  body[data-view="ready"] .ready-utilities .btn.textual {
    margin: 0;
    grid-column: auto;
    white-space: nowrap;
    font-size: 12px;
  }
  body[data-view="ready"] #readyShare,
  body[data-view="ready"] #playPreview {
    display: none !important;
  }
  body[data-view="host"] #reset {
    color: #8a4b38;
  }
  body[data-view="player"] #playerNewGame,
  body.invited-player .nav {
    display: none !important;
  }
  body.invited-player .brand {
    cursor: default;
    pointer-events: none;
  }
  body.invited-player .player-nav-actions {
    display: none !important;
  }
  @media(max-width:680px) {
    .ready-backline {
      margin: 16px 0 12px;
    }
    body[data-view="ready"] .prepared-page .view-header {
      padding-bottom: 16px;
    }
    body[data-view="ready"] .prepared-page .view-header h1 {
      font-size: 29px;
    }
    .ready-overview {
      padding: 12px 13px;
      margin-bottom: 12px;
    }
    .ready-task-grid {
      gap: 10px;
    }
    .ready-task>summary,
    .ready-task-title {
      min-height: 79px;
      padding: 14px 13px;
      gap: 12px;
    }
    .ready-task-icon {
      width: 41px;
      height: 41px;
    }
    .ready-task-copy strong {
      font-size: 14px;
    }
    .ready-task-copy small {
      font-size: 11px;
    }
    body[data-view="ready"] .ready-share .share-content {
      padding: 12px;
    }
    .ready-share .share-grid {
      grid-template-columns: 1fr;
    }
    .ready-print {
      gap: 0;
    }
    .ready-print .ready-task-title {
      padding-bottom: 0;
    }
    .ready-print .ready-print-actions {
      padding: 6px 13px 14px;
      justify-content: space-between;
      gap: 9px;
    }
    body[data-view="ready"] .ready-print .ready-print-btn {
      min-width: 150px;
      padding: 9px 12px;
      min-height: 40px;
      font-size: 12px;
    }
    body[data-view="ready"] .ready-print .print-options>summary {
      font-size: 12px;
    }
    body[data-view="ready"] .ready-print .print-options .settings {
      margin-top: 4px;
    }
    .ready-music-content {
      padding: 12px;
    }
    .ready-songs {
      grid-template-columns: 1fr;
      padding: 5px 11px;
    }
    .ready-host-cta {
      flex-direction: column;
      align-items: stretch;
      padding: 16px;
      gap: 12px;
    }
    body[data-view="ready"] .ready-host-cta #openHost {
      width: 100%;
      min-width: 0;
    }
    .ready-utilities {
      margin-top: 11px;
      gap: 12px;
    }
  }
  @media(max-width:360px) {
    .ready-task-copy strong {
      font-size: 13px;
    }
    .ready-task-copy small {
      font-size: 10px;
    }
    .ready-print .ready-print-actions {
      gap: 5px;
    }
  }
  .ready-backline {
    justify-content: flex-start;
  }
  .ready-backline .simple-back {
    border: 0;
    background: transparent;
    padding: 2px 0;
    cursor: pointer;
    outline-offset: 4px;
  }
  body[data-view="ready"] .nav,
  body[data-view="host"] .nav {
    display: none;
  }
  body[data-view="ready"] .ready-print .ready-print-actions {
    padding: 15px 21px 10px 0;
  }
  body[data-view="ready"] .ready-print .print-options {
    position: static;
    grid-column: 1/-1;
    border-top: 1px solid #edf0eb;
    margin: 0 21px 10px;
    padding: 0 0 2px;
    background: transparent;
  }
  body[data-view="ready"] .ready-print .print-options>summary {
    text-align: left;
    min-width: 0;
    padding: 9px 0;
  }
  body[data-view="ready"] .ready-print .print-options .settings {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: 430px;
    padding: 0 8px;
    margin: 0 0 12px;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  @media(max-width:680px) {
    body[data-view="ready"] .ready-print .ready-print-actions {
      padding: 0 13px 8px;
      justify-content: flex-start;
    }
    body[data-view="ready"] .ready-print .print-options {
      margin: 0 13px 8px;
    }
  }
  .host-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
  }
  .host-head-actions .btn {
    padding: 10px 12px;
    min-height: 42px;
    font-size: 12px;
  }
  .host-check-box .result {
    margin-top: 15px;
    border: 1px solid #e2e7e0;
    font-size: 14px;
    line-height: 1.5;
  }
  .host-check-box .result.error {
    border-color: #e3bdb5;
  }
  .host-check-detail {
    margin-top: 15px;
    border: 1px solid #e2e9e2;
    border-radius: 12px;
    padding: 15px;
    background: #fff;
  }
  .check-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #254635;
    margin-bottom: 12px;
  }
  .check-detail-head span {
    color: #607166;
    font-weight: 700;
  }
  .host-check-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    border-top: 1px solid #cbd5cc;
    border-left: 1px solid #cbd5cc;
    max-width: 420px;
    width: 100%;
    margin: auto;
  }
  .host-check-cell {
    min-height: 55px;
    border-right: 1px solid #cbd5cc;
    border-bottom: 1px solid #cbd5cc;
    padding: 3px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    line-height: 1.1;
    font-size: clamp(8px,.74vw,10px);
    overflow-wrap: anywhere;
    color: #33463a;
    background: #fff;
  }
  .host-check-cell.is-played {
    font-weight: 700;
  }
  .host-check-cell.is-free {
    font-weight: 900;
  }
  .host-check-cell.is-closest {
    box-shadow: inset 0 0 0 2px #b79a54;
  }
  .host-check-cell.is-winning {
    box-shadow: inset 0 0 0 2px #185640;
  }
  .host-check-cell.is-played::after {
    content: '✓';
    position: absolute;
    right: 2px;
    top: 0;
    font-weight: 900;
    font-size: 10px;
  }
  .check-legend {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: #617269;
    font-size: 11px;
  }
  .check-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .check-key {
    height: 11px;
    width: 11px;
    display: inline-block;
    border: 1px solid #b5c7bb;
    background: #fff;
    border-radius: 2px;
  }
  .check-key.checked {
    background: #dfeee3;
  }
  .check-key.near {
    background: #fff;
    border: 2px solid #b79a54;
  }
  .check-detail-note {
    margin: 12px 0;
    font-size: 13px;
    color: #4d5d53;
    line-height: 1.45;
  }
  .check-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }
  .check-actions .btn {
    min-height: 39px;
    padding: 9px 13px;
    font-size: 12px;
  }
  .host-winner {
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #ddca8e;
    border-radius: 11px;
    color: #3f391f;
  }
  .host-winner[hidden] {
    display: none !important;
  }
  .winner-medal {
    font-size: 25px;
    color: #99751e;
    line-height: 1.2;
  }
  .winner-copy {
    display: grid;
    gap: 5px;
    flex: 1;
  }
  .winner-copy strong {
    font-size: 15px;
  }
  .winner-copy span {
    font-size: 12px;
    line-height: 1.45;
  }
  .winner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 7px;
  }
  .winner-actions .btn {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }
  @media(max-width:720px) {
    .host-head {
      flex-wrap: wrap;
    }
    .host-check-cell {
      font-size: clamp(8px,2.3vw,11px);
      min-height: 59px;
    }
    .host-check-detail {
      padding: 11px;
    }
  }
  .host .host-head::after {
    content: none !important;
    display: none !important;
  }
  :root {
    --gold: #CFB073;
    --subtle: #F7F5EF;
    --hover-surface: #FAF9F5;
    --icon-wash: #E9F1E9;
    --overview: #EEF4EB;
    --overview-stroke: #D2E3D4;
    --marked-bg: #E0EEE2;
    --marked-line: #AFCBB8;
    --free-bg: #EFF3E5;
    --win-bg: #FFF1CD;
    --line-strong: #BFD2C3;
  }
  .pane {
    background: var(--surface);
  }
  .ready-task-icon {
    border: 1px solid #DDE8DC;
  }
  :root {
    --cranberry: #982B3C;
    --pine: #185B43;
    --pine2: #104632;
    --cream: #FBF8F1;
    --primary-hover: #104632;
  }
  .song-label-compact {
    display: none;
  }
  .song-label-full {
    display: inline;
  }
  @media(max-width:600px) {
    .play-shell .player-scroll:not(.is-expanded) .song-label-compact {
      display: block;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: normal;
      hyphens: none;
      white-space: normal;
    }
    .play-shell .player-scroll:not(.is-expanded) .song-label-full {
      display: none;
    }
    .play-shell .player-scroll.is-expanded .song-label-compact {
      display: none;
    }
    .play-shell .player-scroll.is-expanded .song-label-full {
      display: inline;
    }
    .play-shell .player-scroll.is-expanded .player-grid {
      width: 630px;
      min-width: 630px;
    }
    .play-shell .player-cell {
      touch-action: manipulation;
    }
  }
  :root {
    --ink: #292E2A;
    --muted: #68706B;
    --line: #DDD9CF;
    --shadow: 0 16px 48px rgba(42,35,29,.075);
  }
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
  }
  .header .container {
    max-width: 1220px;
  }
  .brand,
  .brand-label,
  .brand-red {
    font-size: 17px;
  }
  .header .mark {
    border-radius: 9px;
  }
  .header .nav a {
    font-weight: 650;
  }
  .nav a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .container {
    max-width: 1220px;
  }
  .top {
    overflow: hidden;
  }
  .top::before,
  .top::after,
  .prepared-page .view-header::before,
  .prepared-page .view-header::after {
    display: none !important;
    content: none !important;
  }
  .top h1 {
    font-size: clamp(30px,3.5vw,49px);
    line-height: 1.07;
  }
  .top h1 span {
    font-weight: 850;
    letter-spacing: -1.8px;
    font-size: clamp(30px,3.5vw,49px);
    line-height: 1.07;
  }
  .top .intro {
    font-size: 15px;
    line-height: 1.6;
    max-width: 630px;
  }
  .studio .setup {
    color: var(--formInk);
  }
  .preview-head strong {
    font-size: 17px;
    letter-spacing: -.35px;
    color: var(--ink);
  }
  .studio .preview .sheet {
    margin: 0 auto;
  }
  .studio .preview .cell {
    hyphens: auto;
  }
  .studio .counter {
    background: #fff;
    border-radius: 9px;
  }
  .studio .counter output {
    color: #28332E;
  }
  .btn.primary {
    font-weight: 800;
  }
  .studio .setup .create-cards {
    font-weight: 800;
  }
  .sheet-head,
  .studio .sheet-head,
  .player-board-title {
    font-family: var(--cardFont);
    line-height: 1.17;
  }
  .sheet-head:before,
  .sheet-head:after,
  .player-board-title:before,
  .player-board-title:after {
    display: none !important;
    content: none !important;
  }
  .gridcard .cell {
    background: var(--cellBg);
    color: var(--cellInk);
  }
  .sheet-foot {
    font-weight: 600;
  }
  .prepared-page .view-header {
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--heroBorder);
  }
  .prepared-page .ready-task-title,
  .prepared-page .ready-task summary {
    color: var(--ink);
  }
  .prepared-page .ready-overview strong {
    color: var(--ink);
  }
  .host .host-head {
    border-radius: 11px;
    align-items: center;
  }
  .host .host-box {
    border-radius: 12px;
  }
  .play-shell .player-dialog {
    border-radius: 14px;
  }
  .play-shell .player-board {
    width: 100%;
    margin: 0 auto;
  }
  input,
  select {
    accent-color: var(--markBg);
  }
  @media(max-width:720px) {
    .play-shell .player-cell {
      min-height: 92px;
    }
  }
  @media print {
    .header,
    .top,
    .studio,
    .host,
    .prepared-page,
    .play-shell,
    .section,
    .footer {
      display: none !important;
    }
  }
  :root {
    --paper: #F8F0E8;
    --surface: #FFF9F1;
    --topbar: #254F40;
    --borderTop: #254F40;
    --brandInk: #FFFAF1;
    --navInk: #FFFAF1;
    --markBorder: #F0E3D0;
    --hero: #EFE2D6;
    --heroInk: #672638;
    --heroSub: #5F5B51;
    --heroBorder: #E5D5CA;
    --stage: #EFE2D6;
    --formBg: #7C2A3C;
    --formInk: #FFF8EB;
    --formMuted: #EFDAE0;
    --previewBg: #FCF7EE;
    --panelBorder: #DCC9BB;
    --counterBorder: #F9EAE5;
    --counterButtons: #F4E5DB;
    --counterInk: #7C2A3C;
    --primary: #FCF2DF;
    --primaryHover: #F5E1C3;
    --primaryInk: #6A2836;
    --primaryBorder: #FCF2DF;
    --secondaryBg: #FCF8EF;
    --secondaryInk: #70402F;
    --secondaryBorder: #C6B2A2;
    --link: #25513E;
    --restBorder: #B5737C;
    --frame: repeating-linear-gradient(90deg,#24523E 0 18px,#F4EDDE 18px 25px,#7C2A3C 25px 43px,#F4EDDE 43px 50px);
    --cardTitleBg: #254F40;
    --cardTitleInk: #FFF7E9;
    --cardFont: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --grid: #B6AC9C;
    --cellBg: #FFFDF8;
    --cellInk: #302E2A;
    --freeBg: #E5EDE3;
    --freeInk: #244F3D;
    --readyBg: #F9F2E9;
    --readyBorder: #DAC9BE;
    --iconBg: #E9D6D1;
    --iconInk: #7C2A3C;
    --markBg: #24513D;
    --heroBtnBg: #FCF8EF;
    --heroBtnInk: #254F40;
    --heroBtnBorder: #FCF8EF;
    --footerBg: #7C2A3C;
    --footerInk: #FCF7EA;
  }
  .top {
    min-height: 170px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .host-mobile-switch {
    display: none;
  }
  .host-mobile-switch .host-task-tab {
    border: 1px solid #D8CBBE;
    background: #FFF9F1;
    color: #254F40;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 750;
    min-height: 46px;
    border-radius: 9px;
    cursor: pointer;
  }
  .host-mobile-switch .host-task-tab[aria-selected="true"] {
    background: #254F40;
    border-color: #254F40;
    color: #fff;
  }
  .host-mobile-switch .host-task-tab span {
    font-size: 11px;
    opacity: .8;
  }
  .player-find {
    margin: 8px 0 17px;
    padding: 13px 15px;
    background: #F7F3EB;
    border: 1px solid #E4D8C9;
    border-radius: 12px;
  }
  .player-find-label {
    font-weight: 800;
    font-size: 14px;
    display: block;
    margin-bottom: 7px;
  }
  .player-find-input {
    display: flex;
    align-items: center;
    gap: 9px;
    background: white;
    border: 1px solid #B7C6B9;
    border-radius: 8px;
    padding: 0 11px;
    min-height: 45px;
    color: #315C47;
  }
  .player-find-input span {
    font-size: 22px;
    line-height: 1;
  }
  .player-find input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    min-width: 0;
    padding: 11px 0;
    font-size: 15px;
    color: #293A30;
  }
  .player-find-input:focus-within {
    outline: 2px solid #254F40;
    outline-offset: 2px;
  }
  .player-find-hint {
    font-size: 12px;
    color: #57685D;
    margin: 8px 0 0;
  }
  .player-find-matches {
    display: grid;
    gap: 5px;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 10px;
  }
  .player-song-result {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 9px;
    align-items: center;
    background: #fff;
    border: 1px solid #D8DFD7;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: left;
    color: #293A30;
    min-height: 51px;
    cursor: pointer;
  }
  .player-song-result:hover,
  .player-song-result:focus-visible {
    border-color: #24513D;
    background: #F7FBF7;
  }
  .player-song-result.is-marked {
    background: #E3EFE5;
    border-color: #7BA48C;
  }
  .song-result-title {
    grid-column: 1;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
  }
  .song-result-artist {
    grid-column: 1;
    font-size: 11px;
    color: #637568;
    line-height: 1.4;
  }
  .song-result-state {
    grid-column: 2;
    grid-row: 1/3;
    font-size: 12px;
    font-weight: 750;
    color: #215B43;
  }
  .player-no-match {
    padding: 10px;
    color: #69442B;
    font-size: 13px;
    margin: 0;
    background: #fff;
  }
  .player-browse {
    margin-top: 11px;
  }
  .player-browse summary {
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    color: #24513D;
    display: list-item;
  }
  .player-browse-list {
    display: grid;
    gap: 5px;
    margin-top: 9px;
    max-height: 310px;
    overflow: auto;
  }
  .player-find + .player-read-controls {
    margin-top: 4px;
  }
  .brand .mark svg circle {
    display: none !important;
  }
  @media(min-width:721px) {
    .player-find {
      display: none;
    }
  }
  @media(max-width:720px) {
    #host .host-mobile-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--paper);
      padding: 9px 0 11px;
      margin: 0 0 4px;
    }
    #host .host-top {
      display: block !important;
    }
    #host[data-mobile-task="songs"] #hostCheckPanel,
    #host[data-mobile-task="check"] #hostSongsPanel {
      display: none !important;
    }
    #host .host-box {
      scroll-margin-top: 78px;
    }
    .player-find {
      padding: 11px;
      margin-top: 8px;
    }
    .player-find-label {
      font-size: 13px;
    }
    .player-find-hint {
      font-size: 11px;
    }
  }
  #winnerDescription {
    display: block;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  #winnerSummary .winner-copy {
    min-width: 0;
  }
  #winnerSummary .winner-copy strong {
    overflow-wrap: anywhere;
  }
  .player-mobile-switch,
  .player-mobile-songs {
    display: none;
  }
  .player-result {
    font-size: 14px;
    line-height: 1.45;
  }
  @media(max-width:720px) {
    .play-shell .role-route-bar {
      margin-bottom: 7px;
    }
    .play-shell .role-route-bar>span:first-child {
      display: none;
    }
    #playerDialog .player-heading h2 {
      font-size: 23px;
      margin: 0;
    }
    #playerDialog .player-heading p {
      font-size: 13px;
    }
    #playerDialog .player-meta {
      padding: 9px 0 7px;
    }
    #playerDialog .player-result {
      padding: 10px 12px;
      margin: 7px 0 10px;
    }
    #playerDialog .player-song-detail {
      padding: 8px 11px;
      margin: 3px 0 10px;
      min-height: 0;
    }
    .play-shell .player-mobile-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 4px;
      background: #F0E7DB;
      border: 1px solid #DDCEBC;
      border-radius: 11px;
      margin: 2px 0 12px;
    }
    .player-mode-tab {
      border: 0;
      background: transparent;
      color: #385345;
      font-size: 14px;
      min-height: 44px;
      padding: 10px 12px;
      font-weight: 750;
      border-radius: 8px;
    }
    .player-mode-tab[aria-selected="true"] {
      background: #fff;
      color: #223F33;
      box-shadow: 0 1px 5px #29251F19;
    }
    .play-shell .player-find {
      display: none !important;
    }
    .play-shell[data-player-task="songs"] .player-mobile-songs {
      display: block;
    }
    .play-shell[data-player-task="songs"] .player-song-detail,
    .play-shell[data-player-task="songs"] .player-board,
    .play-shell[data-player-task="songs"] .player-read-controls,
    .play-shell[data-player-task="board"] .player-mobile-songs {
      display: none !important;
    }
    .play-shell[data-player-task="board"] .player-read-controls {
      display: flex;
    }
    .play-shell[data-player-task="board"] .player-board {
      display: block;
    }
    .player-overview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 13px 15px;
      background: #F7F4EE;
      border: 1px solid #E2D9CD;
      border-radius: 12px;
      margin-bottom: 14px;
    }
    .player-overview strong {
      font-size: 14px;
      line-height: 1.2;
      color: #2B4435;
    }
    .player-overview p {
      font-size: 12px;
      margin: 5px 0 0;
      color: #576A5E;
      line-height: 1.35;
    }
    .player-mini-grid {
      display: grid;
      grid-template-columns: repeat(5,14px);
      gap: 3px;
      flex: none;
    }
    .player-mini-cell {
      height: 14px;
      width: 14px;
      border-radius: 2px;
      border: 1px solid #BAC7BD;
      background: #fff;
    }
    .player-mini-cell.free {
      background: #D3E4D7;
      border-color: #84AC8B;
    }
    .player-mini-cell.marked {
      background: #275E47;
      border-color: #275E47;
    }
    .player-mini-cell.win {
      background: #BC9044;
      border-color: #9B7537;
    }
    .player-list-label {
      display: block;
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 7px;
      color: #293A30;
    }
    #playerListSearch {
      display: block;
      width: 100%;
      min-height: 45px;
      border: 1px solid #B9C9BE;
      border-radius: 9px;
      padding: 10px 12px;
      font-size: 15px;
      background: #fff;
      color: #243A2E;
      margin-bottom: 10px;
    }
    #playerListSearch:focus-visible {
      outline: 3px solid #B99D70;
      outline-offset: 2px;
    }
    .player-full-list {
      display: grid;
      gap: 6px;
      padding-bottom: 5px;
    }
    .player-full-row {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 9px;
      align-items: center;
      min-height: 58px;
      padding: 9px 12px;
      border: 1px solid #D9E0D9;
      border-radius: 10px;
      background: #fff;
      color: #263831;
      text-align: left;
      width: 100%;
      cursor: pointer;
    }
    .player-full-row:focus-visible {
      outline: 3px solid #B99D70;
      outline-offset: 2px;
    }
    .player-full-row.is-marked {
      background: #E6F1E8;
      border-color: #89B19A;
    }
    .player-full-row .full-song-title {
      font-weight: 750;
      font-size: 14px;
      line-height: 1.35;
      display: block;
      overflow-wrap: break-word;
    }
    .player-full-row .full-song-artist {
      color: #63766B;
      font-size: 12px;
      line-height: 1.3;
      display: block;
      margin-top: 2px;
    }
    .player-full-row .full-song-state {
      font-weight: 750;
      font-size: 12px;
      color: #275C44;
      white-space: nowrap;
    }
    .player-full-row.is-marked .full-song-state {
      font-size: 18px;
    }
    .player-list-empty {
      font-size: 13px;
      color: #526256;
      padding: 10px;
      background: white;
      border-radius: 7px;
    }
    #playerDialog .player-actions {
      margin-top: 13px;
    }
  }
  @media(max-width:350px) {
    .player-overview {
      padding: 11px;
      gap: 8px;
    }
    .player-mini-grid {
      grid-template-columns: repeat(5,12px);
      gap: 3px;
    }
    .player-mini-cell {
      width: 12px;
      height: 12px;
    }
    .player-full-row {
      padding: 9px 10px;
      gap: 6px;
    }
    .player-full-row .full-song-title {
      font-size: 13px;
    }
  }
}
@layer presentation {
  .preview-play {
    min-height: 42px;
  }
  .view-kicker {
    font-size: 11px;
    color: var(--cranberry);
  }
  .prepared-page .game-ready #openHost {
    min-height: 44px;
  }
  @media(max-width:680px) {
    .ready-print {
      grid-template-columns: 1fr;
    }
  }
  .header {
    border-top: 0;
  }
  .prepared-page .view-kicker,
  .player-heading .player-eyebrow {
    color: var(--muted);
  }
  .sheet-head,
  .player-board-title,
  .zoom-sheet .sheet-head {
    border-bottom: 0;
  }
  .ready-host-cta {
    border-top: 1px solid var(--line);
  }
  .ready-print .ready-task-icon,
  .ready-music .ready-task-icon {
    color: var(--pine);
    background: var(--icon-wash);
  }
  .ready-task-copy strong {
    color: var(--ink);
  }
  .ready-task-copy small,
  .ready-song-row div span {
    color: var(--muted);
  }
  .ready-overview {
    background: var(--overview);
    border-color: var(--overview-stroke);
  }
  .ready-overview-icon {
    background: var(--pine);
  }
  .ready-host-cta {
    background: var(--subtle);
    border-color: var(--line);
  }
  .ready-host-cta strong {
    color: var(--ink);
  }
  .ready-task,
  body[data-view="ready"] .prepared-page .ready-task,
  .host-box {
    background: var(--surface);
    border-color: var(--line);
  }
  body[data-view="ready"] .ready-task[open]>summary {
    border-color: var(--line);
  }
  .ready-task>summary:hover {
    background: var(--hover-surface);
  }
  body[data-view="ready"] .ready-print .print-options {
    border-color: var(--line);
  }
  .player-cell.marked {
    border-color: var(--marked-line);
  }
  .host-check-cell.is-played {
    background: var(--marked-bg);
    color: var(--pine2);
    border-color: var(--marked-line);
  }
  .song-btn.played {
    background: var(--marked-bg);
    color: var(--pine2);
  }
  .host-check-cell.is-free {
    background: var(--free-bg);
    color: var(--pine2);
  }
  .player-result.bingo,
  .host-winner {
    background: var(--win-bg);
  }
  .footer-links a:hover {
    color: var(--pine2);
  }
  .btn.secondary {
    border-color: var(--line-strong);
  }
  .ready-print-btn {
    background: var(--surface);
    color: var(--pine2);
    border-color: var(--line-strong);
  }
  .ready-backline .simple-back {
    color: var(--pine2);
  }
  .host-check-box .result.success {
    color: #165332;
    background: #e8f5eb;
    border-color: #a0c7aa;
  }
  .host-check-box .result.error {
    color: #893b31;
    background: #fff1ed;
  }
  .header .nav a:hover {
    color: #F4D9C7;
  }
  .mark {
    background: #FFFFFF1A;
    box-shadow: none;
    border: 1px solid #FFFFFF40;
  }
  .gridcard,
  .cell {
    border-color: #AEBDB2;
  }
  .player-cell {
    border-color: #B3C1B6;
  }
  .ready-task,
  .host-box,
  .step {
    box-shadow: 0 4px 13px rgba(26,47,36,.025);
  }
  .host-progress {
    color: var(--pine2);
  }
  .song-btn,
  .ready-song-row {
    color: var(--ink);
  }
  .song-btn.played {
    border-color: var(--marked-line);
  }
  .footer {
    border-color: var(--line);
  }
  .zoom-sheet .sheet-head {
    background: #982B3C;
    color: #fff;
    border: 0;
    letter-spacing: .38px;
  }
  .studio .preview .sheet-head {
    font-size: 15px;
    padding: 15px 5px;
  }
  .studio .preview .cell {
    overflow-wrap: break-word;
    word-break: normal;
  }
  .studio .preview .cell.free {
    font-size: 13px;
  }
  .studio .setup {
    justify-content: center;
  }
  .studio .setup .pane-heading {
    margin-bottom: 25px;
  }
  .studio .setup .field-label {
    margin-bottom: 12px;
  }
  .studio .setup .counter {
    height: 62px;
  }
  .studio .setup .hint {
    margin: 12px 0 21px;
  }
  .studio .setup .editor-note {
    margin: 4px 0 21px;
  }
  .studio .setup .create-cards {
    min-height: 56px;
    margin-bottom: 18px;
  }
  .studio .setup .restore-home {
    margin-top: 6px;
    padding-top: 16px;
  }
  .studio .preview .preview-actions {
    gap: 18px;
  }
  .studio .preview .preview-actions button {
    min-height: 40px;
    padding: 6px 9px;
  }
  .host .host-head {
    border-color: var(--line);
  }
  .host-check-box .result:not(.success):not(.error) {
    background: #F7F8F5;
    color: #32443A;
  }
  body[data-view="ready"] .ready-host-cta #openHost {
    background: #185B43;
    color: #fff;
  }
  .ready-task-icon {
    background: #E9F2E8;
    color: #185B43;
  }
  .cell.free {
    background: #E8F1E7;
    color: #104632;
  }
  @media(max-width:720px) {
    .studio .preview .sheet-head {
      font-size: 13.5px;
      padding: 12px 4px;
    }
    .studio .preview .preview-actions {
      gap: 6px;
    }
    .studio .preview .preview-actions button {
      padding: 6px 5px;
    }
  }
  @media (min-width:721px) {
    .play-shell .player-cell {
      min-height: 98px;
      font-size: clamp(12px,1.08vw,13.5px);
      line-height: 1.2;
      padding: 7px 5px;
    }
  }
  @media (max-width:720px) {
    .play-shell .player-scroll:not(.is-expanded) .player-cell {
      font-size: clamp(10.4px,2.88vw,11.6px);
      line-height: 1.22;
      padding: 6px 2px;
    }
    .play-shell .player-scroll.is-expanded .player-cell {
      font-size: 14px;
      min-height: 120px;
      padding: 8px 6px;
      line-height: 1.25;
    }
  }
  @media(max-width:600px) {
    .play-shell .player-scroll:not(.is-expanded) .player-cell {
      font-size: clamp(11px,2.95vw,12px);
      padding: 6px 3px;
      line-height: 1.21;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }
    .play-shell .player-scroll.is-expanded .player-cell {
      font-size: 14px;
      min-height: 112px;
      line-height: 1.25;
      padding: 8px 7px;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }
    .player-read-toggle {
      min-height: 44px;
    }
  }
  @media(max-width:350px) {
    .play-shell .player-scroll:not(.is-expanded) .player-cell {
      padding: 6px 2px;
    }
  }
  .header {
    background: var(--topbar);
    border: 0;
    height: 76px;
    border-bottom: 1px solid var(--borderTop);
    box-shadow: none;
  }
  .brand,
  .brand-label,
  .brand-red {
    color: var(--brandInk);
  }
  .header .nav a {
    color: var(--navInk);
  }
  .top {
    margin: 28px 0 0;
    padding: 34px 43px;
    background: var(--hero);
    color: var(--heroInk);
    border: 1px solid var(--heroBorder);
    position: relative;
  }
  .top h1 {
    color: var(--heroInk);
  }
  .top h1 span {
    color: var(--heroInk);
  }
  .top .intro {
    color: var(--heroSub);
  }
  .studio {
    background: var(--stage);
    gap: 15px;
    border-radius: 0 0 20px 20px;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    border: 1px solid var(--heroBorder);
    border-top: 0;
  }
  .studio>.pane {
    border-radius: 13px;
    box-shadow: none;
    min-width: 0;
    border: 1px solid var(--panelBorder);
  }
  .studio .setup {
    background: var(--formBg);
  }
  .studio .setup h2,
  .studio .setup label {
    color: var(--formInk);
  }
  .studio .setup .hint,
  .studio .setup .editor-note {
    color: var(--formMuted);
  }
  .studio .preview {
    background: var(--previewBg);
  }
  .preview-head {
    max-width: 565px;
  }
  .studio .preview .cell {
    aspect-ratio: auto;
    padding: 4px 3px;
    line-height: 1.17;
  }
  .studio .counter {
    border: 1px solid var(--counterBorder);
  }
  .studio .counter button {
    background: var(--counterButtons);
    color: var(--counterInk);
  }
  .studio .counter output {
    background: #fff;
  }
  .btn.primary {
    background: var(--primary);
    color: var(--primaryInk);
    border: 1px solid var(--primaryBorder);
    border-radius: 9px;
    box-shadow: none;
  }
  .studio .setup .create-cards {
    border-radius: 9px;
    box-shadow: none;
  }
  .btn.primary:hover {
    background: var(--primaryHover);
    transform: none;
  }
  .studio .setup .create-cards:hover {
    transform: none;
  }
  .btn.secondary {
    background: var(--secondaryBg);
    color: var(--secondaryInk);
    border: 1px solid var(--secondaryBorder);
  }
  .btn.textual,
  .simple-back {
    color: var(--link);
  }
  .restore-home {
    border-top: 1px solid var(--restBorder);
  }
  .restore-home summary {
    color: var(--formInk);
  }
  .sheet {
    border: 8px solid transparent;
    border-radius: 2px;
    background: linear-gradient(#FFFCF7,#FFFCF7) padding-box,var(--frame) border-box;
    box-shadow: 0 14px 30px rgba(26,32,29,.12);
    padding: 11px;
  }
  .studio .preview .sheet {
    border-radius: 2px;
  }
  .player-board {
    border: 8px solid transparent;
    border-radius: 2px;
    background: linear-gradient(#FFFCF7,#FFFCF7) padding-box,var(--frame) border-box;
    box-shadow: 0 14px 30px rgba(26,32,29,.12);
    padding: 11px;
  }
  .sheet-head,
  .studio .sheet-head,
  .player-board-title {
    background: var(--cardTitleBg);
    color: var(--cardTitleInk);
    border: 0;
    box-shadow: none;
    font-size: clamp(12px,1.2vw,17px);
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 15px 6px;
  }
  .gridcard,
  .player-grid {
    border-left: 1px solid var(--grid);
    border-top: 1px solid var(--grid);
    background: #fff;
  }
  .gridcard .cell {
    border-right: 1px solid var(--grid);
    border-bottom: 1px solid var(--grid);
  }
  .gridcard .cell.free {
    background: var(--freeBg);
    color: var(--freeInk);
  }
  .sheet-foot {
    color: #697268;
  }
  .preview-actions button {
    color: var(--link);
  }
  .prepared-page .view-header {
    background: var(--hero);
    color: var(--heroInk);
    padding: 26px 30px;
    margin: 0;
  }
  .prepared-page .view-header h1,
  .prepared-page .view-header h1 span {
    color: var(--heroInk);
  }
  .prepared-page .view-header p,
  .prepared-page .view-header .view-kicker {
    color: var(--heroSub);
  }
  .prepared-page .game-ready {
    background: var(--readyBg);
    border: 1px solid var(--heroBorder);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    padding: 21px;
    margin-top: 0;
  }
  .prepared-page .ready-task {
    background: #FFFCF7;
    border: 1px solid var(--readyBorder);
    box-shadow: none;
  }
  .prepared-page .ready-task-icon {
    background: var(--iconBg);
    color: var(--iconInk);
  }
  .prepared-page .ready-task:hover {
    border-color: var(--secondaryBorder);
  }
  .prepared-page .game-ready #openHost {
    background: var(--primary);
    color: var(--primaryInk);
    border-color: var(--primaryBorder);
  }
  .prepared-page .ready-overview-icon {
    background: var(--iconBg);
    color: var(--iconInk);
  }
  .prepared-page .ready-backline .simple-back {
    color: var(--link);
  }
  .host {
    background: var(--surface);
    border: 1px solid var(--panelBorder);
    box-shadow: none;
    border-radius: 16px;
    padding: 18px;
  }
  .host .host-head {
    background: var(--hero);
    color: var(--heroInk);
    border: 1px solid var(--heroBorder);
    padding: 23px 25px;
    margin-bottom: 16px;
  }
  .host .host-head h2 {
    color: var(--heroInk);
  }
  .host .host-head p {
    color: var(--heroSub);
  }
  .host .host-head .btn.secondary {
    background: var(--heroBtnBg);
    color: var(--heroBtnInk);
    border-color: var(--heroBtnBorder);
  }
  .host .host-box {
    background: #FFFCF7;
    border: 1px solid var(--panelBorder);
  }
  .host .host-progress {
    color: var(--link);
  }
  .host .song-btn.played {
    background: var(--freeBg);
    border-color: var(--grid);
    color: var(--ink);
  }
  .host .song-btn.played .tick {
    background: var(--markBg);
    border-color: var(--markBg);
  }
  .host .song-lookup {
    color: var(--link);
    background: var(--counterButtons);
  }
  .host .result.success {
    background: var(--freeBg);
    color: var(--freeInk);
  }
  .play-shell .player-dialog {
    background: var(--surface);
    border: 1px solid var(--panelBorder);
    box-shadow: none;
    padding: 25px;
  }
  .play-shell .player-board {
    max-width: 625px;
  }
  .play-shell .player-board-title {
    font-family: var(--cardFont);
    font-size: clamp(14px,2.4vw,20px);
    border-bottom: 0;
  }
  .player-cell {
    border-right: 1px solid var(--grid);
    border-bottom: 1px solid var(--grid);
    color: var(--cellInk);
    background: var(--cellBg);
  }
  .player-cell.marked {
    background: var(--freeBg);
    color: var(--freeInk);
    box-shadow: inset 0 0 0 2px var(--markBg);
  }
  .player-cell.marked::after {
    color: var(--markBg);
  }
  .player-cell.free {
    background: var(--freeBg);
    color: var(--freeInk);
  }
  .player-cell.win-line {
    background: #F5E6AF;
    color: #3B3219;
    box-shadow: inset 0 0 0 2px #A48137;
  }
  .player-read-toggle[aria-pressed="true"] {
    background: var(--freeBg);
    color: var(--freeInk);
    border-color: var(--markBg);
  }
  .footer {
    background: var(--footerBg);
    color: var(--footerInk);
    border-top: 0;
  }
  .footer b,
  .footer a {
    color: var(--footerInk);
  }
  .section h2 {
    color: var(--ink);
  }
  .step-n {
    background: var(--iconBg);
    color: var(--iconInk);
  }
  .step {
    border-color: var(--panelBorder);
    background: var(--surface);
  }
  @media(max-width:900px) {
    .studio {
      grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
    }
  }
  @media(max-width:720px) {
    .header {
      height: 64px;
    }
    .brand-label,
    .brand,
    .brand-red {
      font-size: 14px;
    }
    .top {
      margin: 14px 0 0;
      padding: 24px 21px;
    }
    .top h1 {
      font-size: clamp(28px,8vw,37px);
    }
    .top h1 span {
      font-size: clamp(28px,8vw,37px);
      letter-spacing: -1.2px;
    }
    .top .intro {
      font-size: 13.5px;
    }
    .studio {
      grid-template-columns: 1fr;
      gap: 10px;
      border-radius: 0 0 14px 14px;
    }
    .studio .preview .sheet {
      border-width: 6px;
    }
    .studio .preview .cell {
      padding: 3px 2px;
    }
    .sheet-head,
    .studio .sheet-head {
      font-size: 12.5px;
      padding: 13px 4px;
    }
    .prepared-page .view-header {
      padding: 21px;
    }
    .prepared-page .game-ready {
      padding: 13px;
    }
    .host {
      padding: 9px;
    }
    .host .host-head {
      padding: 18px;
    }
    .play-shell .player-dialog {
      padding: 12px;
    }
    .play-shell .player-board {
      border-width: 6px;
    }
  }
  .top {
    border-radius: 18px 18px 0 0;
    border-left: 8px solid #254F40;
  }
  .top h1 {
    letter-spacing: -1.6px;
    font-weight: 900;
  }
  .studio {
    padding: 12px;
    border-left: 8px solid #254F40;
  }
  .studio .setup {
    padding: 29px 32px;
    border-color: #7C2A3C;
  }
  .studio .pane-heading {
    font-size: 26px;
  }
  .studio .setup .restore-home summary {
    color: var(--formInk);
  }
  .studio .setup .restore-set {
    background: #8E3446;
    border-color: #B46E78;
    color: #FFFAF0;
  }
  .studio .setup .restore-set label,
  .studio .setup .restore-set .restore-help {
    color: #FFF5EB;
  }
  .brand .mark svg path,
  .brand .mark svg rect {
    stroke: #25503F;
  }
  .brand .mark svg circle {
    fill: #8B2C3B;
  }
  .prepared-page .view-header {
    border-left: 8px solid #254F40;
  }
  .host .host-head {
    border-left: 8px solid #7C2A3C;
  }
  .studio .counter button:hover {
    background: #EDDDCF;
  }
  .header .mark {
    background: #FFF8ED;
    border: 1px solid #DECDB8;
    box-shadow: none;
  }
  .header .mark svg rect,
  .header .mark svg path {
    stroke: #254F40;
  }
  .studio .preview .sheet,
  .play-shell .player-board {
    border: 3px solid #315845;
    background: #FFFCF7;
    padding: 10px;
    box-shadow: 0 8px 18px rgba(33,37,28,.10);
  }
  .studio .setup .create-cards {
    background: #F8F1E7;
    color: #652A3A;
    border: 1px solid #F8F1E7;
  }
  .studio .setup .create-cards:hover {
    background: #EAD7C4;
  }
}