/* Cognitive Lab - core styles (generated by make_split.py from the single-file app) */
html.cl-boot-about body:not(.page-open):not(:has([id$="GameView"].visible)) #aboutOverlay:not(.cl-removed){ display: block; }
html.cl-boot-about body:not(.page-open) #landingView{ display: none !important; }
html.cl-boot-about body:not(.page-open):not(:has([id$="GameView"].visible)) .instrument{ display: none; }
html{ --cl-ui: 1; --cl-gt: 1; }
html[data-ui-size="90"]{ --cl-ui: 0.9; }
html[data-ui-size="115"]{ --cl-ui: 1.15; }
html[data-ui-size="130"]{ --cl-ui: 1.3; }
html[data-game-text="85"]{ --cl-gt: 0.85; }
html[data-game-text="125"]{ --cl-gt: 1.25; }
html[data-game-text="150"]{ --cl-gt: 1.5; }
html[data-ui-size]{ font-size: calc(90% * var(--cl-ui)); font-size: calc(max(clamp(90%, min(0.45rem + 0.5vw, 0.3rem + 1.1vh), 125%), min(1.125vw, 1.6vh) * var(--cl-pz, 1)) * var(--cl-ui)); }
html[data-contrast="high"]{ --focus-ring: 0.25rem; }
html[data-contrast="high"]:not([data-theme="light"]){
    --bg-0: #000000; --bg-1: #072426; --panel: #08282b; --panel-border: #90edf3; --border-strong: #baf4f8;
    --ink: #ffffff; --ink-dim: #dcf6fa; --violet: #8bdfe4; --cyan: #8bdfe4; --ok: #74f9b0; --bad: #ff9aa5;
    --accent-rgb: 139, 223, 228;
    --dd-bg: #09282a; --dd-bg-top: #09282a; --dd-border: #8eeeff; --dd-hairline: rgba(142,238,255,0.45); --dd-ink: #ffffff; --dd-ink-strong: #ffffff; --dd-ink-dim: #dcf6fa;
    --dd-trigger-bg: #09282a; --dd-trigger-hover: #12303a; --dd-trigger-border: #8eeeff; --dd-trigger-border-strong: #ffffff; --dd-opt-solid: #09282a; --dd-opt-sel-solid: #1d4b57;
  }
html[data-contrast="high"][data-theme="light"]{
    --bg-0: #ffffff; --bg-1: #ffffff; --panel: #ffffff; --panel-border: #1d3d3d; --border-strong: #0e2a2a;
    --ink: #000000; --ink-dim: #142828; --violet: #0b3c3c; --cyan: #0e4f4f; --ok: #0b5a3a; --bad: #a3122c;
    --accent-rgb: 14, 79, 79;
    --dd-bg: #ffffff; --dd-bg-top: #ffffff; --dd-border: #1d3d3d; --dd-hairline: rgba(29,61,61,0.45); --dd-ink: #000000; --dd-ink-strong: #000000; --dd-ink-dim: #142828;
    --dd-trigger-bg: #ffffff; --dd-trigger-hover: #e3f0f0; --dd-trigger-border: #1d3d3d; --dd-trigger-border-strong: #000000; --dd-opt-solid: #ffffff; --dd-opt-sel-solid: #cfe3e3;
  }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after{
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
@media (orientation: landscape) and (max-height: 30rem){
html[data-ui-size]:has(.game-view.visible){ --cl-ui: 1; }
}
:root{
    --bg-0: #052224;
    --bg-1: #0c2f31;
    --panel: rgba(73,205,212,0.05);
    --panel-border: rgba(77,219,229,0.2);
    --ink: #e3fafc;
    --ink-dim: #96d5d9;
    --violet: #49cdd4;
    --cyan: #49cdd4;
    --ok: #3cf0b8;
    --bad: #ff7f8c;
    --nbg-ok: #22c55e;
    --nbg-bad: #f43f5e;
    --nbg-warn: #facc15;
    --accent-rgb: 73, 205, 212;
    --display: "Inter", ui-sans-serif, system-ui, sans-serif;
    --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --radius-lg: 1.75rem;
    --radius-md: 1rem;
    --radius-sm: 0.625rem;
  }
html[data-theme="light"]{
    --bg-0: #dff0f0;
    --bg-1: #eef7f7;
    --panel: rgba(238,247,247,0.75);
    --panel-border: rgba(138,184,184,0.5);
    --ink: #1a2b2b;
    --ink-dim: #2a4545;
    --violet: #1f5f5f;
    --cyan: #2a7a7a;
    --ok: #2a7a7a;
    --bad: #c94a5c;
    --nbg-ok: #16a34a;
    --nbg-bad: #e11d48;
    --nbg-warn: #a16207;
    --accent-rgb: 42, 122, 122;
  }
html[data-theme="light"] body{
    background: var(--bg-0);
  }
html[data-theme="light"] .topnav{
    background: rgb(223,240,240);
  }
html[data-theme="light"] .menu-panel,
  html[data-theme="light"] .info-card,
  html[data-theme="light"] .topnav-games-panel-inner,
  html[data-theme="light"] .landing-profile-panel-inner,
  html[data-theme="light"] .studies-category-panel{
    background: #d4eaea;
  }
html[data-theme="light"] button.ghost{
    background: rgba(42,122,122,0.08);
  }
html[data-theme="light"] button.ghost:hover{
    background: rgba(42,122,122,0.14);
  }
html[data-theme="light"] .theme-select{
    background-color: rgba(42,122,122,0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232a5f5f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");
  }
html[data-theme="light"] .game-card:hover,
  html[data-theme="light"] .mode-card:hover,
  html[data-theme="light"] .menu-btn:hover{
    border-color: #1f5f5f;
    box-shadow: 0 0 0 0.0625rem rgba(42,122,122,0.25);
  }
html[data-theme="light"] .pricing-tier:hover{
    border-color: #7a7a7a;
  }
html[data-theme="light"] .pricing-tier.highlight:hover{
    border-color: var(--violet);
  }
html[data-theme="light"]{
    --border-strong: #8ab8b8;
  }
html[data-theme="light"] .game-card,
  html[data-theme="light"] .mode-card,
  html[data-theme="light"] .cct-mode-card,
  html[data-theme="light"] .pricing-tier,
  html[data-theme="light"] .menu-btn,
  html[data-theme="light"] .cct-menu-btn,
  html[data-theme="light"] .seg-btn,
  html[data-theme="light"] .speaker,
  html[data-theme="light"] .mode-info-btn,
  html[data-theme="light"] .info-card .modal-close-x{
    background: rgba(138,184,184,0.16);
  }
html[data-theme="light"] .menu-item:hover{
    background: rgba(138,184,184,0.22);
  }
html[data-theme="light"] .speaker{
    border-color: var(--border-strong);
  }
html[data-theme="light"] .toast{
    color: var(--ink);
    border-color: var(--border-strong);
  }
html[data-theme="light"] .game-card-desc,
  html[data-theme="light"] .faq-a,
  html[data-theme="light"] .manual-note{
    color: var(--ink-dim);
  }
html[data-theme="cyan"]{
    --bg-0: #052224;
    --bg-1: #0c2f31;
    --panel: rgba(73,205,212,0.05);
    --panel-border: rgba(77,219,229,0.2);
    --ink: #e3fafc;
    --ink-dim: #96d5d9;
    --violet: #49cdd4;
    --cyan: #49cdd4;
    --ok: #3cf0b8;
    --bad: #ff7f8c;
    --nbg-ok: #22c55e;
    --nbg-bad: #f43f5e;
    --nbg-warn: #facc15;
    --accent-rgb: 73, 205, 212;
  }
html[data-theme="cyan"] body{
    background: var(--bg-0);
  }
html[data-theme="cyan"] .topnav{
    background: rgb(4,26,28);
  }
html[data-theme="cyan"] .menu-panel,
  html[data-theme="cyan"] .info-card,
  html[data-theme="cyan"] .topnav-games-panel-inner,
  html[data-theme="cyan"] .landing-profile-panel-inner,
  html[data-theme="cyan"] .studies-category-panel{
    background: rgba(12,47,49,0.98);
  }
html[data-theme="cyan"] .topnav-games-panel-inner,
  html[data-theme="cyan"] .nav-icon-panel{
    background: rgb(12,47,49);
  }
html[data-theme="cyan"] .toast{
    background: rgba(12,47,49,0.98);
  }
html[data-theme="cyan"] .game-card:hover,
  html[data-theme="cyan"] .mode-card:hover,
  html[data-theme="cyan"] .menu-btn:hover{
    border-color: rgba(73,205,212,0.55);
    box-shadow: 0 0 0 0.0625rem rgba(73,205,212,0.35);
  }
html[data-theme="cyan"] .box.cued{
    border-color: rgba(73,205,212,0.9);
    box-shadow: 0 0 0 0.0625rem rgba(73,205,212,0.5);
  }
html[data-theme="cyan"] .box.target-on .target{
    box-shadow: none;
  }
html[data-theme="cyan"] button:hover{
    box-shadow: none;
  }
html[data-theme="cyan"] .upgrade-faq-q:hover,
  html[data-theme="cyan"] .faq-q:hover{
    box-shadow: none;
    transform: none;
  }
html[data-theme="cyan"] .pricing-tier.highlight{
    background: rgba(73,205,212,0.1);
  }
html[data-theme="cyan"] .mode-card.selected{
    background: rgba(73,205,212,0.14);
    box-shadow: 0 0 0 0.0625rem rgba(73,205,212,0.4);
  }
html[data-theme="cyan"] .mode-info-btn:hover{
    background: rgba(73,205,212,0.12);
  }
html[data-theme="light"] .game-card:hover,
  html[data-theme="light"] .mode-card:hover{
    background: rgba(42,122,122,0.06);
  }
@media (prefers-reduced-motion: reduce){
*{
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important;
    }
.game-card:hover, .mode-card:hover, .cct-mode-card:hover,
    .stat-card--clickable:hover, .stat-card--clickable:focus-visible,
    .pricing-tier:hover, .menu-btn:hover, .cct-menu-btn:hover,
    .profile-card:hover, .seg-btn:hover, button.ghost:hover, .speaker:hover,
    .cl-dialog-btn:hover, .menu-item:hover{
      transform: none !important;
    }
.toast{ transform: translate(-50%, 0) !important; }
}
*{ box-sizing: border-box; }
html{ font-size: 90%; font-size: max(clamp(90%, min(0.45rem + 0.5vw, 0.3rem + 1.1vh), 125%), min(1.125vw, 1.6vh) * var(--cl-pz, 1)); }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html{ overflow-x: hidden; }
body{ overflow-wrap: break-word; overflow-x: hidden; }
body{ text-wrap-style: pretty; }
img, svg{ max-width: 100%; }
html{
    scrollbar-width: thin;
    scrollbar-color: var(--cyan) transparent;
    background: var(--bg-0);
  }
::-webkit-scrollbar{
    width: 0.75rem;
    height: 0.75rem;
  }
::-webkit-scrollbar-track{
    background: transparent;
  }
::-webkit-scrollbar-thumb{
    background-color: var(--cyan);
    background-image: linear-gradient(var(--cyan), var(--cyan));
    border-radius: 62.4375rem;
    border: 0.1875rem solid var(--bg-0);
    background-clip: padding-box;
  }
::-webkit-scrollbar-thumb:hover{
    border-width: 0.125rem;
  }
::-webkit-scrollbar-corner{
    background: transparent;
  }
html, body{
    min-height: 100%;
    margin: 0;
  }
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    min-height: 100vh;
    padding: calc(var(--topnav-h, 4.75rem) + 0.75rem) 1.75rem 2.5rem;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg-0);
  }
.instrument{
    width: 100%;
    max-width: 58rem;
    border-radius: var(--radius-lg);
    border: 0.0625rem solid var(--panel-border);
    background: var(--panel);
    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
    box-shadow: 0 1.875rem 5rem -1.875rem rgba(0,0,0,0.6);
    overflow: hidden;
  }
.instrument-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 1.25rem 2rem 1rem;
  }
.instrument-head h1{
    font-family: var(--display);
    font-size: 1.3125rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow-wrap: break-word;
  }
.instrument-head .meta{
    font-family: var(--display);
    font-size: 0.8854rem;
    font-weight: 500;
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
  }
.cct-operation-badge{
    font-family: var(--display);
    font-size: 0.8646rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(var(--accent-rgb), 0.12);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.5);
    border-radius: 62.4375rem;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
  }
#cctGameView .instrument-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
#cctGameView .instrument-head .ih-left{ grid-column: 1; }
#cctGameView .instrument-head .cct-head-center{ grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 0.5rem; }
html[data-theme="light"] .stage,
  html[data-theme="light"] .cct-stage{
    background-color: rgba(42,122,122,0.09);
  }
html[data-theme="light"] .center-message{
    background: #d5e8e8;
  }
.instrument-head .meta .meta-timer,
  .instrument-head .meta .meta-count,
  .instrument-head .meta#cctTimeMeta{
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    box-sizing: border-box;
    height: 1.875rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
.instrument-head .meta .meta-timer::before,
  .instrument-head .meta#cctTimeMeta::before{
    content: "";
    width: 1rem;
    height: 1rem;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.1'/%3E%3Cpath d='M8 4.5V8l2.4 1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.1'/%3E%3Cpath d='M8 4.5V8l2.4 1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
.instrument-head .meta .meta-count{
    margin-left: 0;
    opacity: 1;
  }
.instrument-head .meta:not(#cctTimeMeta){
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
.instrument-head .meta .meta-timer.meta-timer--over{
    color: var(--bad);
    opacity: 1;
    animation: metaTimerPulse 0.6s ease-in-out 2;
  }
@keyframes metaTimerPulse{
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
.stage{
     
    container-type: inline-size;
    container-name: stage;
    position: relative;
    height: 21.25rem;
    margin: 0 0.75rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
  }
.track{
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 22cqw, 11.875rem);
  }
.box{
    width: clamp(3rem, 11cqw, 6rem);
    height: clamp(3rem, 11cqw, 6rem);
    border-radius: var(--radius-sm);
    border: 0.0938rem solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.02);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 120ms ease, border-color 120ms ease;
    flex: none;
  }
.box.cued{
    border-color: rgba(var(--accent-rgb),0.9);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb),0.5);
  }
.box .target{
    width: clamp(1.375rem, 5cqw, 2.75rem);
    height: clamp(1.375rem, 5cqw, 2.75rem);
    border-radius: 0.5rem;
    background: linear-gradient(var(--cyan), var(--cyan));
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 90ms ease, transform 90ms ease;
  }
.box.target-on .target{
    opacity: 1;
    transform: scale(1);
    box-shadow: none;
  }
.fixation{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.125rem;
    height: 1.125rem;
  }
.fixation::before,
  .fixation::after{
    content: "";
    position: absolute;
    background: var(--ink-dim);
    border-radius: 0.125rem;
  }
.fixation::before{
    left: 0;
    top: 50%;
    width: 100%;
    height: 0.125rem;
    transform: translateY(-50%);
  }
.fixation::after{
    top: 0;
    left: 50%;
    width: 0.125rem;
    height: 100%;
    transform: translateX(-50%);
  }
.center-message{
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--bg-1);
    overflow-y: auto;
  }
.center-message.visible{ display: flex; }
.center-message p{
    margin: 0;
    color: var(--ink-dim);
    font-size: 0.8438rem;
    line-height: 1.65;
    max-width: 40ch;
  }
.center-message .big{
    font-family: var(--display);
    font-size: 0.9375rem;
    font-weight: 600;
    background: linear-gradient(var(--cyan), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.01em;
  }
.countdown-number{
    font-family: var(--display);
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(var(--cyan), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.readout{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 1.5rem 2rem;
    gap: 1rem 0.25rem;
  }
@media (max-width: 45em){
.readout{
      grid-template-columns: repeat(3, 1fr);
    }
}
.cell .label{
    font-size: 0.8438rem;
    color: var(--ink-dim);
    margin-bottom: 0.375rem;
  }
.cell .value{
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
.cell .value-sub{
    font-size: 0.8438rem;
    color: var(--ink-dim);
    margin-top: 0.1875rem;
    font-variant-numeric: tabular-nums;
  }
.cell .value.flash-ok{ color: var(--ok); }
.cell .value.flash-bad{ color: var(--bad); }
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.125rem 2rem 1.75rem;
  }
.key{
    display: inline-block;
    border: 0.0625rem solid rgba(255,255,255,0.18);
    border-radius: 0.3125rem;
    padding: 0.0625rem 0.4375rem;
    font-family: var(--display);
    font-size: 0.8542rem;
    color: var(--ink);
  }
button > .key{ color: inherit; }
html[data-theme="cyan"] button:not(.ghost) > .key{ color: inherit; font-weight: 700; background: transparent; border-color: rgba(5, 34, 36, 0.7); text-shadow: none; }
button > .key{ display: inline-flex; align-items: center; vertical-align: middle; line-height: 1.2; padding: 0.16rem 0.55rem 0.2rem; border-radius: 0.45rem; border-width: 0.09rem; margin-left: 0.45rem; font-size: 0.78rem; letter-spacing: 0.02em; }
button{
    font-family: var(--sans);
    font-size: 0.8438rem;
    font-weight: 600;
    color: #052224;
    background: linear-gradient(var(--cyan), var(--cyan));
    border: none;
    border-radius: 62.4375rem;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: transform 90ms ease, box-shadow 90ms ease;
  }
button:hover{
    transform: none;
    box-shadow: none;
  }
button.ghost{
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    border: 0.0625rem solid var(--panel-border);
  }
button.ghost:hover{
    box-shadow: none;
    background: rgba(255,255,255,0.1);
  }
.topnav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 0.875rem 1.75rem;
    background: rgb(4,26,28);
    border-bottom: 0.0625rem solid var(--panel-border);
    box-shadow: 0 0.5rem 1.5rem -0.625rem rgba(0,0,0,0.45);
  }
.topnav-inner{
    position: relative;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
html[data-theme="light"] .topnav{
    box-shadow: 0 0.5rem 1.5rem -0.625rem rgba(20,30,60,0.18);
  }
.topnav-brand{
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink);
    flex: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
.topnav-hamburger{
    display: none;
    flex: none;
    width: 2.375rem;
    height: 2.375rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.3125rem;
    background: rgba(255,255,255,0.05);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.625rem;
    cursor: pointer;
    margin-left: auto;
     
    padding: 0;
    box-sizing: border-box;
  }
.topnav-hamburger:hover{
    transform: none;
    box-shadow: none;
    background: rgba(var(--accent-rgb), 0.14);
  }
.topnav-hamburger svg{
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ink);
    flex: none;
  }
.topnav-hamburger .icon-close{ display: none; }
.topnav-hamburger.open .icon-menu{ display: none; }
.topnav-hamburger.open .icon-close{ display: block; }
.topnav-collapsible{
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    gap: 1.25rem;
    min-width: 0;
  }
.topnav-links{
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    column-gap: 0.25rem;
    flex: 1;
    min-width: 0;
  }
.topnav-link{
    background: none;
    border: none;
    color: var(--ink-dim);
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    border-radius: 62.4375rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none;
    transition: color 120ms ease;
  }
.topnav-link:hover,
  .topnav-link:focus-visible,
  .topnav-link:focus{
    outline: none !important;
    box-shadow: none !important;
    background: none;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.1rem;
    text-shadow: none;
  }
.topnav-games{
    position: relative;
  }
.topnav-games-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
.topnav-games-btn .chevron{
    width: 0.625rem;
    height: 0.625rem;
    flex: none;
    transition: transform 120ms ease;
  }
.topnav-games.open .topnav-games-btn .chevron,
  .topnav-games:hover .topnav-games-btn .chevron{
    transform: rotate(180deg);
  }
.topnav-games-panel{
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 0.625rem;
    margin-top: -0.0625rem;
    display: none;
    flex-direction: column;
    z-index: 20;
  }
.topnav-games-panel-inner{
    display: flex;
    flex-direction: column;
  }
.topnav-games:hover .topnav-games-panel,
  .topnav-games.open .topnav-games-panel{
    display: flex;
  }
.topnav-games.cl-hover-off:not(.open) .topnav-games-panel,
  .topnav-games.cl-hover-off:not(.open):hover .topnav-games-panel{
    display: none;
  }
.topnav-games.cl-hover-off:not(.open):hover .topnav-games-btn .chevron{
    transform: none;
  }
.topnav-games-item{
    display: flex;
    align-items: center;
    width: 100%;
  }
.topnav-games-item:hover{
    background: rgba(255,255,255,0.08);
  }
.topnav-games-badge{
    flex: none;
  }
@media (max-width: 53.75em){
.topnav-games-panel{
      position: static;
      display: none;
      padding-top: 0.375rem;
    }
.topnav-games.open .topnav-games-panel{
      display: flex;
    }
.topnav-games:hover .topnav-games-panel{
      display: none;
    }
.topnav-games.open:hover .topnav-games-panel{
      display: flex;
    }
}
.topnav-actions{
    display: flex;
    align-items: center;
    gap: 1.125rem;
    flex: none;
  }
.theme-select{
    background: rgba(255,255,255,0.06);
  }
.theme-select:hover{
    border-color: rgba(var(--accent-rgb), 0.5);
  }
.theme-select:focus-visible{
    outline: none;
    box-shadow: none;
  }
.theme-select option{
    background: var(--bg-1);
    color: var(--ink);
  }
.topnav-actions button{ padding: 0.5rem 1rem; font-size: 0.875rem; }
.nav-account{
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.nav-account-avatar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    font-family: var(--display);
    font-size: 0.8542rem;
    font-weight: 700;
    flex: none;
  }
.nav-account-name{
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
@media (max-width: 53.75em){
.topnav{ padding: 0.75rem 1rem; }
.topnav-hamburger{ display: flex; }
.topnav-collapsible{
      display: none;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.875rem;
      padding: 1rem 1.25rem 1.25rem;
      background: rgb(4,26,28);
      backdrop-filter: blur(1rem);
      -webkit-backdrop-filter: blur(1rem);
      border-bottom: 0.0625rem solid var(--panel-border);
      box-shadow: 0 1rem 1.875rem -0.875rem rgba(0,0,0,0.5);
    }
html[data-theme="light"] .topnav-collapsible{ background: rgb(238,247,247); }
html[data-theme="cyan"] .topnav-collapsible{ background: rgb(12,47,49); }
.topnav-collapsible.open{ display: flex; }
.topnav-links{
      position: static;
      transform: none;
      flex: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0.125rem;
    }
.topnav-link{ text-align: left; width: 100%; border-radius: 0.625rem; }
.topnav-actions{ flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.topnav-actions > button{ width: 100%; }
.theme-select{ width: 100%; text-align: left; }
.nav-account{ width: 100%; justify-content: space-between; }
}
.landing-view{ display: none; }
.landing-view.visible{ display: block; }
.landing-hero{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
.landing-hero-text{ min-width: 0; flex: 1 1 16rem; }
.landing-profile-switcher{
    position: relative;
    flex: none;
  }
.landing-profile-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    background: rgba(255,255,255,0.05);
    border: 0.0938rem solid var(--panel-border);
    border-radius: 62.4375rem;
    padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8854rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
  }
.landing-profile-btn:hover{ background: rgba(255,255,255,0.09); }
.landing-profile-avatar{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    font-family: var(--display);
    font-size: 0.8646rem;
    font-weight: 700;
    flex: none;
    overflow: hidden;
  }
.landing-profile-avatar img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
.landing-profile-avatar img.visible{ display: block; }
.landing-profile-name{
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.landing-profile-btn .chevron{
    width: 0.625rem;
    height: 0.625rem;
    flex: none;
    transition: transform 120ms ease;
  }
.landing-profile-switcher.open .landing-profile-btn .chevron{
    transform: rotate(180deg);
  }
.landing-profile-panel{
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 0.625rem;
    margin-top: -0.0625rem;
    min-width: 13.5rem;
    max-width: 18rem;
    display: none;
    flex-direction: column;
    z-index: 20;
  }
.landing-profile-switcher.open .landing-profile-panel{ display: flex; }
.landing-profile-panel-inner{
    display: flex;
    flex-direction: column;
    max-height: 18rem;
    overflow-y: auto;
  }
.landing-profile-item{
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
  }
.landing-profile-item:hover{ background: rgba(255,255,255,0.08); }
.landing-profile-item.active{
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--cyan);
  }
.landing-profile-item-avatar{
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 0.8438rem;
    font-weight: 700;
    flex: none;
    overflow: hidden;
  }
.landing-profile-item-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.landing-profile-item-name{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
@media (max-width: 30em){
.landing-hero{ flex-direction: column; align-items: stretch; }
.landing-hero-text{ flex: none; }
.landing-profile-switcher{ width: 100%; }
.landing-profile-btn{ width: 100%; justify-content: space-between; }
.landing-profile-name{ max-width: none; flex: 1; text-align: left; }
.landing-profile-panel{ left: 0; right: 0; min-width: 0; max-width: none; }
}
.landing-hero h1{
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
  }
.landing-hero p{ margin: 0; color: var(--ink-dim); font-size: 0.8438rem; }
.games-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
@media (max-width: 30em){
.games-grid{ grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size){
@media (max-width: 30em){
.track{ gap: 4.5rem; }
.box{ width: 4.5rem; height: 4.5rem; }
.box .target{ width: 2.0625rem; height: 2.0625rem; }
}
@media (min-width: 30.01em){
.track{ gap: 11.875rem; }
.box{ width: 6rem; height: 6rem; }
.box .target{ width: 2.75rem; height: 2.75rem; }
}
}
.game-card{
    position: relative;
    text-align: left;
    padding: 1.125rem 1.25rem 2.25rem;
    border-radius: var(--radius-md);
    border: 0.0938rem solid var(--panel-border);
    background: rgba(255,255,255,0.03);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    transition: border-color 120ms ease, background 120ms ease, transform 90ms ease;
  }
.game-card:hover{
    transform: translateY(-0.0625rem);
    border-color: rgba(255,255,255,0.28);
  }
.game-card-name{
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }
.game-card-desc{
    font-size: 0.875rem;
    color: var(--ink-dim);
    line-height: 1.45;
    margin: 0;
    padding-right: 1.5rem;
  }
.game-card .mode-info-btn{
    top: auto;
    bottom: 0.875rem;
    right: 0.875rem;
  }
body:has(#landingView.visible){ justify-content: flex-start; }
.instrument:has(#landingView.visible){ margin-top: 1.5rem; max-width: min(74rem, 100%); }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
html body .instrument:not(:has(#landingView.visible)):not(:has(#nbackGameView.visible)):not(:has(#relGameView.visible)){ width: calc(100% - 19.5rem); }
}
@media (min-width: 74.0625rem) and (max-width: 85.1875rem){
html:is([data-ui-size="115"], [data-ui-size="130"]) body .instrument:not(:has(#landingView.visible)):not(:has(#nbackGameView.visible)):not(:has(#relGameView.visible)){ width: 100%; }
}
@media (min-width: 85.25rem) and (max-width: 96.3125rem){
html[data-ui-size="130"] body .instrument:not(:has(#landingView.visible)):not(:has(#nbackGameView.visible)):not(:has(#relGameView.visible)){ width: 100%; }
}
.landing-view{ padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.25rem); }
.landing-view .landing-hero{
    position: relative; display: block; text-align: center;
    margin: 0 0 1.75rem; padding: 0 9rem;
  }
.landing-view .landing-hero-text{ flex: none; }
.landing-view .landing-profile-switcher{ position: absolute; top: 0; right: 0; }
.landing-view .landing-hero h1{
    font-family: var(--display); font-size: clamp(1.875rem, 3.4vw, 2.625rem); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.75rem; color: var(--ink);
  }
.landing-view .landing-hero p{
    margin: 0 auto; max-width: 52ch; font-size: 1.0313rem; line-height: 1.55; color: var(--ink-dim);
  }
.lp-chips{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin: 0 auto 2.75rem; max-width: 60rem;
  }
button.lp-chip{
    display: inline-flex; align-items: center; gap: 0.5rem;
    height: 2.625rem; padding: 0 1.0625rem; border-radius: 0.625rem;
    background: rgba(255,255,255,0.025);
    border: 0.0938rem solid rgba(var(--accent-rgb),0.22);
    color: var(--ink-dim); font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; line-height: 1;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
  }
button.lp-chip:hover{ transform: none; box-shadow: none; color: var(--ink); border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.05); }
button.lp-chip.active{
    color: var(--ink); border-color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb),0.13);
  }
.lp-chip-n{
    min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.06); color: var(--ink-dim);
  }
button.lp-chip.active .lp-chip-n{ background: rgba(var(--accent-rgb),0.25); color: var(--ink); }
.lp-chip-n:empty{ display: none; }
.lp-section + .lp-section{ margin-top: 2.75rem; }
.lp-section[hidden]{ display: none; }
.lp-section-head{ display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.125rem; }
.lp-section-head h2{
    margin: 0; font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.005em;
  }
.lp-count{
    font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 0.125rem 0.5625rem; border-radius: 62.4375rem;
    background: rgba(var(--accent-rgb),0.12); color: var(--cyan);
  }
.lp-rule{ flex: 1; height: 0.0625rem; background: linear-gradient(90deg, var(--panel-border), transparent); }
.landing-view .games-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
.landing-view .games-grid > .game-card.lp-span{ grid-column: 1 / -1; }
@media (max-width: 42em){
.landing-view .games-grid{ grid-template-columns: 1fr; }
}
.landing-view .game-card{
    position: relative; display: flex; flex-direction: column; gap: 0.875rem;
    padding: 1.5rem 1.5rem 1.375rem; border-radius: 1.125rem;
    border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.025);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }
.landing-view .game-card[hidden]{ display: none; }
.landing-view .game-card:not(.coming-soon):hover{
    transform: translateY(-0.1875rem);
    border-color: rgba(var(--accent-rgb),0.55);
    box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(0,0,0,0.7), 0 0 0 0.0625rem rgba(var(--accent-rgb),0.15);
  }
.landing-view .game-card:focus-visible{ outline: 0.125rem solid var(--cyan); outline-offset: 0.1875rem; }
.landing-view .game-card .mode-info-btn{ top: 1.125rem; right: 1.125rem; bottom: auto; }
.gc-top{ display: flex; align-items: center; gap: 1rem; padding-right: 2rem; }
.gc-icon{
    flex: none; width: 3.5rem; height: 3.5rem; border-radius: 0.9375rem;
    display: flex; align-items: center; justify-content: center; color: var(--cyan);
    background: rgba(var(--accent-rgb),0.13);
    border: 0.0625rem solid rgba(var(--accent-rgb),0.3);
  }
.gc-icon svg{ width: 2.55rem; height: 2.55rem; stroke-width: 1.4; }
.gc-titles{ min-width: 0; }
.landing-view .game-card-name{
    margin: 0; font-family: var(--display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink);
  }
.gc-full{ margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.3; color: var(--ink-dim); }
.landing-view .game-card-desc{
    margin: 0; padding: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); opacity: 0.8;
  }
.gc-foot{
    margin-top: auto; padding-top: 0.25rem;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: nowrap;
  }
.gc-tags{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; flex: 1 1 auto; }
.gc-tag{
    font-size: 0.75rem; font-weight: 600; padding: 0.3125rem 0.625rem; border-radius: 62.4375rem;
    background: rgba(255,255,255,0.05); color: var(--ink-dim);
  }
.gc-play{
    flex: none; display: inline-flex; align-items: center; gap: 0.4375rem;
    padding: 0.5625rem 1.125rem; border-radius: 62.4375rem;
    background: linear-gradient(var(--cyan), var(--cyan)); color: #052224;
    font-size: 0.9063rem; font-weight: 700; line-height: 1;
    box-shadow: none;
  }
.gc-play svg{ width: 0.9375rem; height: 0.9375rem; }
.lp-section--soon .lp-section-head h2{ font-size: 1rem; color: var(--ink-dim); }
html[data-theme="light"] button.lp-chip{ background: rgba(255,255,255,0.3); border-color: rgba(42,122,122,0.3); color: #2f4a4a; }
html[data-theme="light"] button.lp-chip:hover{ background: rgba(255,255,255,0.5); border-color: rgba(42,122,122,0.55); color: #1a2b2b; }
html[data-theme="light"] button.lp-chip.active{ background: rgba(42,122,122,0.14); border-color: #2a7a7a; color: #1a2b2b; }
html[data-theme="light"] .lp-chip-n{ background: rgba(42,122,122,0.1); color: #2f4a4a; }
html[data-theme="light"] button.lp-chip.active .lp-chip-n{ background: #2a7a7a; color: #fff; }
html[data-theme="light"] .lp-count{ background: rgba(42,122,122,0.14); color: #1f5f5f; }
html[data-theme="light"] .landing-view .game-card{
    border-color: rgba(42,122,122,0.3);
    background: rgba(255,255,255,0.4);
  }
html[data-theme="light"] .landing-view .game-card:not(.coming-soon):hover{
    border-color: #2a7a7a; background: rgba(255,255,255,0.5);
    box-shadow: 0 1rem 2rem -1.25rem rgba(26,43,43,0.4);
  }
html[data-theme="light"] .landing-view .game-card-desc{ color: #1f3535; opacity: 1; }
html[data-theme="light"] .gc-icon{ color: #1f5f5f; background: rgba(42,122,122,0.11); border-color: rgba(42,122,122,0.3); }
html[data-theme="light"] .gc-tag{ background: rgba(42,122,122,0.09); color: #2f4a4a; }
html[data-theme="light"] .gc-play{ background: #2a7a7a; color: #fff; box-shadow: none; }
@media (max-width: 48em){
.landing-view .landing-hero{ padding: 0; display: flex; flex-direction: column-reverse; gap: 1.25rem; }
.landing-view .landing-profile-switcher{ position: static; align-self: center; width: auto; }
.landing-view .landing-profile-btn{ width: auto; }
.lp-chips{ gap: 0.375rem; margin-bottom: 1.75rem; }
button.lp-chip{ height: 1.875rem; min-height: 0; min-width: 0; padding: 0 0.5625rem; font-size: 0.75rem; gap: 0.3125rem; border-radius: 0.4375rem; }
.landing-view{ padding: 1.5rem 1rem 1.75rem; }
.gc-foot{ flex-wrap: wrap; }
.gc-tags{ flex: 1 1 100%; }
.gc-play{ margin-left: auto; }
.landing-view .game-card .mode-info-btn{ width: 1.75rem; height: 1.75rem; min-width: 0; min-height: 0; }
.lp-chip-n{ min-width: 1.125rem; height: 1.125rem; font-size: 0.6875rem; padding: 0 0.25rem; }
.landing-view .landing-hero h1{ font-size: 1.625rem; }
.landing-view .landing-hero p{ font-size: 0.9375rem; }
.landing-view .game-card{ padding: 1.125rem; gap: 0.75rem; }
.gc-icon{ width: 2.875rem; height: 2.875rem; }
.gc-icon svg{ width: 2rem; height: 2rem; }
.landing-view .game-card-name{ font-size: 1.125rem; }
.landing-view .game-card-desc{ font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce){
.landing-view .game-card:not(.coming-soon):hover{ transform: none; }
}
.toast{
    position: fixed;
    left: 50%;
    bottom: 1.75rem;
    transform: translate(-50%, 0.75rem);
    width: max-content;
    max-width: calc(100% - 2rem);
    text-align: center;
    background: rgba(18,21,42,0.96);
    border: 0.0625rem solid var(--panel-border);
    color: var(--ink);
    padding: 0.625rem 1.125rem;
    border-radius: 62.4375rem;
    font-size: 0.8854rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 200;
  }
html[data-theme="light"] .toast{
    background: #eef7f7;
  }
.toast.visible{ opacity: 1; transform: translate(-50%, 0); }
.info-card.wide{ max-width: 36rem; }
#cctCalendarOverlay .info-card,
  #posnerCalendarOverlay .info-card,
  #cctMilestonesOverlay .info-card,
  #posnerMilestonesOverlay .info-card{
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
.info-overlay{ overscroll-behavior: contain; }
html.cogl-modal-open,
  html.cogl-modal-open body{
    overflow: hidden;
  }
.info-card .modal-close-x{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: var(--ink-dim);
    font-size: 0.9375rem;
    line-height: 1;
    box-shadow: none;
  }
.info-card.wide{ position: relative; }
.faq-item{
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    margin-bottom: 1rem;
    overflow: hidden;
  }
.faq-item:last-child{ margin-bottom: 0; }
.faq-q{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    background: none;
    border: none;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
.faq-q:hover, .faq-q:focus-visible{
    box-shadow: none;
    transform: none;
  }
.faq-icon{
    flex-shrink: 0;
    display: flex;
    color: var(--ink-dim);
    transition: transform 160ms ease, color 160ms ease;
  }
.faq-item.open .faq-icon{
    transform: rotate(180deg);
    color: var(--cyan);
  }
.faq-a{
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 1.375rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-dim);
    transition: max-height 220ms ease, padding 220ms ease;
  }
.faq-item.open .faq-a{
    max-height: 80rem;
    padding: 0 1.375rem 1.25rem;
  }
.pricing-tiers{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
  }
.pricing-tier{
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.0938rem solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    padding: 1.75rem 2rem 1.75rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
.pricing-tier:hover{
    transform: translateY(-0.125rem);
    border-color: rgba(255,255,255,0.22);
  }
.pricing-tier.highlight{
    border-color: var(--violet);
    background: rgba(var(--accent-rgb),0.08);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb),0.25);
  }
.pricing-tier.highlight:hover{
    border-color: var(--violet);
  }
.pricing-tier-badge{
    position: absolute;
    top: -0.6875rem;
    left: 1.25rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.8438rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bg-0);
    background: var(--violet);
    padding: 0.1875rem 0.625rem;
    border-radius: 1.25rem;
  }
.pricing-tier-head{ margin-bottom: 1.1rem; }
.pricing-tier-name{
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
.pricing-tier-price{
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 2.25rem;
    color: var(--ink);
  }
.pricing-tier-price .pricing-tier-period{
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--ink-dim);
  }
.pricing-tier-features{
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
  }
.pricing-tier-features li{
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 1rem;
    color: var(--ink-dim);
    line-height: 1.5;
  }
.pricing-tier-features li svg{
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    color: var(--cyan);
  }
.pricing-tier-cta{
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
.pricing-period-toggle-wrap{
    display: flex;
    justify-content: center;
    margin-bottom: 1.75rem;
  }
.pricing-period-toggle{
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 0.0625rem solid var(--panel-border);
    border-radius: 62.4375rem;
    background: rgba(255,255,255,0.03);
  }
.pricing-period-toggle .seg-btn{
    border: none;
    border-radius: 62.4375rem;
    background: transparent;
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    white-space: nowrap;
  }
.pricing-period-toggle .seg-btn.selected{
    background: rgba(var(--accent-rgb),0.16);
  }
.pricing-period-save{
    font-size: 0.8333rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--cyan);
    background: rgba(var(--accent-rgb),0.14);
    padding: 0.25rem 0.5625rem;
    border-radius: 62.4375rem;
    white-space: nowrap;
  }
.pricing-tier-billed-note{
    font-size: 0.8438rem;
    color: var(--ink-dim);
    margin: 0.1875rem 0 0;
  }
.page-header.upgrade-hero{
    text-align: center;
    max-width: none;
    margin: 2.5rem auto 2.5rem;
  }
.page-title.upgrade-hero-title{
    font-family: var(--sans);
    font-size: clamp(1.75rem, 4.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    max-width: 34ch;
    margin: 0 auto 1.25rem;
    text-wrap: balance;
  }
.page-intro.upgrade-hero-intro{
    max-width: 54rem;
    margin: 0 auto;
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
  }
.upgrade-vsl{
    position: relative;
    width: 100%;
    max-width: 42rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin: 2.5rem auto;
  }
.upgrade-vsl-play{
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.upgrade-vsl-play svg{ margin-left: 0.1875rem; }
.upgrade-vsl-label{
    margin: 0;
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--ink-dim);
  }
.upgrade-video-caption{
    max-width: 50rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-size: 0.9688rem;
    line-height: 1.65;
    color: var(--ink-dim);
  }
.upgrade-video-caption strong{
    color: var(--ink);
    font-weight: 700;
  }
.upgrade-features{
    max-width: 60rem;
    margin: 0 auto 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
@media (max-width: 48rem){
.upgrade-features{ grid-template-columns: repeat(2, 1fr); }
}
.upgrade-marquee{
    overflow: hidden;
    margin-bottom: 2.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
.upgrade-marquee-track{
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: max-content;
    animation: upgrade-marquee-scroll 38s linear infinite;
  }
.upgrade-marquee:hover .upgrade-marquee-track,
  .upgrade-marquee-track:focus-within{
    animation-play-state: paused;
  }
@keyframes upgrade-marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
.upgrade-testimonial{
    flex: 0 0 auto;
    width: 16.5rem;
    text-align: center;
    border: 0.0938rem solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    padding: 1.25rem 1.125rem;
  }
.upgrade-stars{
    color: var(--violet);
    font-size: 0.9375rem;
    letter-spacing: 0.125rem;
    margin-bottom: 0.625rem;
  }
.upgrade-quote{
    font-family: var(--display);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 0.75rem;
  }
.upgrade-attribution{
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--ink-dim);
    margin: 0;
  }
.upgrade-cta-wrap{
    display: flex;
    justify-content: center;
  }
.upgrade-cta-wrap--top{
    margin: 1.75rem 0 4rem;
  }
.upgrade-faq{
    max-width: 42rem;
    margin: 0 auto 2.5rem;
  }
.upgrade-faq-item{
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    margin-bottom: 1rem;
    overflow: hidden;
  }
.upgrade-faq-item:last-child{ margin-bottom: 0; }
.upgrade-faq-q{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.0625rem 3rem;
    background: none;
    border: none;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.9688rem;
    text-align: center;
    cursor: pointer;
    position: relative;
  }
.upgrade-faq-q:hover, .upgrade-faq-q:focus-visible{
    box-shadow: none;
    transform: none;
    outline: none;
  }
.upgrade-faq-icon{
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--cyan);
    transition: transform 160ms ease;
  }
.upgrade-faq-item.open .upgrade-faq-icon{
    transform: translateY(-50%) rotate(180deg);
  }
.upgrade-faq-a{
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--ink-dim);
    transition: max-height 220ms ease, padding 220ms ease;
  }
.upgrade-faq-item.open .upgrade-faq-a{
    max-height: 80rem;
    padding: 0 1.5rem 1.25rem;
  }
.upgrade-cta{
    padding: 0.875rem 2rem;
    font-size: 0.9688rem;
  }
@media (max-width: 45em){
.upgrade-testimonial{ width: 14rem; }
}
.profiles-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
.profile-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--radius-md);
    border: 0.0938rem solid var(--panel-border);
    background: rgba(255,255,255,0.02);
    text-align: center;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
  }
.profile-card:hover{
    transform: translateY(-0.125rem);
    border-color: rgba(255,255,255,0.28);
  }
.profile-card.active{
    border-color: var(--cyan);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.35);
  }
.profile-card-avatar{
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 700;
    overflow: hidden;
    flex: none;
  }
html:not([data-theme="light"]) :is(.nav-account-avatar, .landing-profile-avatar, .landing-profile-item-avatar, .profile-card-avatar){ color: var(--bg-0); }
.profile-card-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.profile-card-name{
    font-family: var(--sans);
    font-size: 0.8854rem;
    font-weight: 600;
    color: var(--ink);
    max-width: 100%;
    overflow-wrap: break-word;
  }
.profile-card-badge{
    font-size: 0.8333rem;
    font-weight: 700;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
.profile-card-delete{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    border: 0.0625rem solid var(--panel-border);
    color: var(--ink-dim);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8854rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
.profile-card:hover .profile-card-delete{ display: flex; }
.profile-card-delete:hover{ color: var(--bad); border-color: var(--bad); }
.profile-card{ padding: 0; cursor: default; }
.profile-card-main{ flex: 1 1 auto; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; margin: 0;
    padding: 1.25rem 0.75rem; border: none; border-radius: inherit; background: none; box-shadow: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.profile-card-main:hover{ transform: none; box-shadow: none; }
.profile-card.active .profile-card-main{ cursor: default; }
.profile-card:focus-within .profile-card-delete{ display: flex; }
@media (hover: none){
.profile-card-delete{ display: flex; top: 0.25rem; right: 0.25rem; }
}
.profile-card-dup{
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    border: 0.0625rem solid var(--panel-border);
    color: var(--ink-dim);
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
  }
.profile-card-dup svg{ display: block; width: 0.75rem; height: 0.75rem; pointer-events: none; }
.profile-card:hover .profile-card-dup, .profile-card:focus-within .profile-card-dup{ display: flex; }
.profile-card-dup:hover{ color: var(--cyan); border-color: var(--cyan); }
@media (hover: none){
.profile-card-dup{ display: flex; top: 0.25rem; left: 0.25rem; }
}
.profile-dup-note{ margin: 0 0 0.75rem; }
html[data-theme="light"] :is(.profile-card-delete, .profile-card-dup){ background: rgba(255,255,255,0.75); }
.profile-add-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.25rem 0.75rem;
    border-radius: var(--radius-md);
    border: 0.0938rem dashed var(--panel-border);
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    min-height: 8.125rem;
    font-family: var(--sans);
    font-size: 0.8854rem;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
  }
.profile-add-card:hover{ border-color: var(--cyan); color: var(--ink); }
.profile-add-card-icon{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.0938rem dashed var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
  }
.profile-form{
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.03);
  }
.profile-form-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.25rem;
  }
.profile-form-actions button{
    flex: 1 1 8rem;
    justify-content: center;
  }
button.ghost.danger{
    color: #ff8a8a;
    border-color: rgba(255,138,138,0.45);
  }
button.ghost.danger:hover{
    background: rgba(255,138,138,0.12);
    border-color: rgba(255,138,138,0.8);
  }
html[data-theme="light"] button.ghost.danger{ color: #b23d4e; border-color: rgba(178,61,78,0.5); }
html[data-theme="light"] button.ghost.danger:hover{ background: rgba(178,61,78,0.08); border-color: rgba(178,61,78,0.85); }
.contact-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
  }
.contact-card{
    display: flex;
    flex-direction: column;
    border: 0.0938rem solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    padding: 1.25rem 1.125rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
.contact-card:hover{
    transform: translateY(-0.125rem);
    border-color: rgba(255,255,255,0.22);
  }
.contact-card-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    margin-bottom: 0.875rem;
  }
.contact-card-title{
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
    margin: 0 0 0.375rem;
  }
.contact-card-desc{
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-dim);
    margin: 0 0 1rem;
    flex: 1;
  }
.contact-card-link{
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: none;
    word-break: break-word;
  }
.contact-card-link:hover{ text-decoration: underline; }
.contact-social-block{
    padding-top: 1.375rem;
    border-top: 0.0625rem solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.875rem;
  }
.contact-social-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.125rem;
  }
.contact-social-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-dim);
    transition: color .15s ease, transform .15s ease;
  }
.contact-social-link:hover{
    color: var(--ink);
    transform: translateY(-0.125rem);
  }
@media (max-width: 45em){
.pricing-tiers{ grid-template-columns: 1fr; }
.contact-grid{ grid-template-columns: 1fr; }
.contact-social-block{ justify-content: flex-end; }
}
.auth-form{ display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 0.375rem; }
.auth-form input{
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8854rem;
  }
.auth-form input::placeholder{ color: var(--ink-dim); }
.auth-note{
    font-size: 0.8646rem;
    color: var(--ink-dim);
    margin: 0.25rem 0 0;
    text-align: center;
  }
.avatar-picker{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
  }
.avatar-picker-circle{
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 0.0938rem dashed var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    flex: none;
    transition: border-color 120ms ease;
  }
.avatar-picker-circle:hover{ border-color: var(--cyan); }
.avatar-picker-initial{
    font-family: var(--display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink-dim);
  }
.avatar-picker-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
.avatar-picker-remove{
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--bg-1);
    border: 0.0625rem solid var(--panel-border);
    color: var(--ink-dim);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8646rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
.avatar-picker-label{
    background: none;
    box-shadow: none;
    padding: 0;
    font-family: var(--sans);
    font-size: 0.8646rem;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: underline;
    cursor: pointer;
  }
.nav-account-avatar{ position: relative; overflow: hidden; }
.nav-account-avatar-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
.auth-note button{
    background: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.8646rem;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }
.center-message--summary{
    justify-content: flex-start;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 0.625rem;
  }
.summary-meta{
    font-family: var(--sans);
    font-size: 0.8646rem;
    color: var(--ink-dim);
    margin-top: -0.25rem;
  }
.summary-panels{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 46rem;
    text-align: left;
    margin-top: 0.25rem;
  }
.summary-panel-head{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
  }
.summary-panel-icon{
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.4375rem;
    background: linear-gradient(var(--cyan), var(--cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.summary-panel-icon svg{
    width: 0.75rem;
    height: 0.75rem;
    color: var(--bg-0);
  }
.summary-panel-title{
    font-family: var(--display);
    font-size: 0.8854rem;
    font-weight: 600;
    color: var(--ink);
  }
.stat-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
.stat-card{
    position: relative;
    flex: 0 0 calc((100% - 0.75rem * (var(--cols, 4) - 1)) / var(--cols, 4));
    background: var(--panel);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 0.875rem 1rem 1rem;
    overflow: hidden;
  }
.stat-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0.1875rem;
    background: linear-gradient(var(--cyan), var(--cyan));
  }
.stat-card-label{
    font-size: 0.8438rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-dim);
    margin-bottom: 0.375rem;
     
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.3;
  }
.stat-card--clickable .stat-card-label{ padding-right: 1.5rem; }
.stat-card-value{
    font-family: var(--display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: normal;
  }
.stat-card-value .stat-card-sub{
    font-family: var(--sans);
    font-size: 0.8646rem;
    font-weight: 500;
    color: var(--ink-dim);
  }
@media (max-width: 26rem){
.stat-card{ flex-basis: calc(50% - 0.375rem); }
}
.stat-card--clickable:hover,
  .stat-card--clickable:focus-visible{
    outline: none;
  }
.routine-summary{
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin-bottom: 1.125rem;
  }
.routine-stat{
    flex: 1 1 7.5rem;
    min-width: 7rem;
    background: var(--panel);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
  }
.routine-stat-label{
    font-size: 0.8333rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-dim);
    margin-bottom: 0.25rem;
  }
.routine-stat-value{
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
.routine-empty{
    font-size: 0.8854rem;
    color: var(--ink-dim);
    padding: 0.5rem 0 0.75rem;
  }
.routine-actions{
    display: flex;
    gap: 0.625rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
  }
.cct-cal-cell.routine-due{
    border-color: rgba(var(--accent-rgb), 0.45);
    border-style: dashed;
  }
.progress-graph-overlay{
    position: fixed;
    inset: 0;
    background: rgba(6,8,16,0.6);
    backdrop-filter: blur(0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }
.progress-graph-overlay.visible{ opacity: 1; pointer-events: auto; }
.progress-graph-modal{
    width: min(42rem, 100%);
    max-height: min(34rem, 90vh);
    background: var(--bg-1);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.45);
    padding: 1.25rem 1.375rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform: scale(0.97);
    transition: transform 150ms ease;
  }
.progress-graph-overlay.visible .progress-graph-modal{ transform: scale(1); }
.progress-graph-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
.progress-graph-title{
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
  }
.progress-graph-sub{
    font-size: 0.8646rem;
    color: var(--ink-dim);
    margin-top: 0.1875rem;
  }
.progress-graph-actions{
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.progress-graph-toggle{
    font-size: 0.8646rem;
    padding: 0.5rem 0.875rem;
  }
.progress-graph-close{
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
.progress-graph-chart{
    flex: 1;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.progress-graph-svg{ width: 100%; height: auto; max-height: 18rem; }
.progress-graph-empty{
    color: var(--ink-dim);
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 1rem;
  }
.pg-axis-label{ font-family: var(--sans); font-size: 0.8333rem; fill: var(--ink-dim); }
.pg-bar{ fill: rgb(var(--accent-rgb)); fill-opacity: 0.75; }
.pg-bar:hover{ fill-opacity: 1; }
.pg-line{ fill: none; stroke: var(--cyan); stroke-linecap: round; stroke-linejoin: round; }
.pg-area{ fill: url(#pgAreaGrad); stroke: none; }
.pg-area-grad-start{ stop-color: var(--cyan); }
.pg-area-grad-end{ stop-color: var(--cyan); stop-opacity: 0; }
.sub-profile-note{
    font-size: 0.8854rem;
    color: var(--ink-dim);
    margin: 0 0 1rem;
  }
.profile-bar{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
.profile-select{
    flex: 1 1 auto;
    min-width: 6.25rem;
    font-size: 0.8854rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    padding: 0.4375rem 0.625rem;
  }
.profile-select option{
    background: var(--bg-1);
    color: var(--ink);
  }
.profile-bar-btn{
    font-size: 0.8646rem;
    padding: 0.4375rem 0.75rem;
    flex-shrink: 0;
  }
.profile-bar-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.cct-milestones-body{
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 1rem;
  }
.cct-milestones-section + .cct-milestones-section{
    margin-top: 1.125rem;
  }
.cct-milestones-section-title{
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink);
    margin: 0 0 0.5rem;
  }
.cct-milestone-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4375rem 0;
    border-bottom: 0.0625rem solid var(--panel-border);
    font-size: 0.8854rem;
  }
.cct-milestone-row:last-child{ border-bottom: none; }
.cct-milestone-label{ color: var(--ink-dim); }
.cct-milestone-value{
    font-family: var(--display);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
.cct-milestones-empty{
    color: var(--ink-dim);
    font-size: 0.8854rem;
  }
.cct-cal-tod{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }
.cct-cal-tod-chip{
    flex: 1 1 auto;
    min-width: 6rem;
    background: rgba(255,255,255,0.05);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.625rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8646rem;
  }
.cct-cal-tod-chip .tod-name{ color: var(--ink-dim); display: block; margin-bottom: 0.125rem; }
.cct-cal-tod-chip .tod-val{ font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.cct-cal-tod-chip.tod-best{ border-color: rgba(var(--accent-rgb),0.5); }
.cct-cal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
.cct-cal-month-label{
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
  }
.cct-cal-weekdays{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    color: var(--ink-dim);
    font-size: 0.8438rem;
    margin-bottom: 0.25rem;
  }
.cct-cal-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.1875rem;
  }
.cct-cal-cell{
    min-width: 0;
    padding: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0.0625rem solid transparent;
    border-radius: 0.5rem;
    color: var(--ink-dim);
    font-size: 0.8646rem;
    font-variant-numeric: tabular-nums;
    cursor: default;
    position: relative;
  }
.cct-cal-cell.other-month{ opacity: 0; pointer-events: none; }
.cct-cal-cell.has-session{
    color: var(--ink);
    border-color: var(--panel-border);
    cursor: pointer;
    background: rgba(255,255,255,0.04);
  }
.cct-cal-cell.has-session:hover{ border-color: rgba(var(--accent-rgb),0.5); }
.cct-cal-cell.has-session::after{
    content: '';
    position: absolute;
    bottom: 0.25rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--accent, var(--cyan));
  }
.cct-cal-cell.all-nulled.has-session::after{ background: var(--ink-dim); }
.cct-cal-cell.is-today{ border-color: var(--ink); }
.cct-cal-day-title{
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0.25rem 0 0.75rem;
  }
.cct-day-session-card{
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
.cct-day-session-card.nulled{ opacity: 0.5; }
.cct-day-session-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
  }
.cct-day-session-time{
    font-size: 0.8854rem;
    color: var(--ink-dim);
  }
.cct-day-session-actions{ display: flex; gap: 0.375rem; }
.cct-day-session-actions button{
    font-size: 0.8438rem;
    padding: 0.25rem 0.5rem;
  }
.cct-day-session-nulled-badge{
    font-size: 0.8438rem;
    color: var(--ink-dim);
    font-style: italic;
  }
.cct-cal-day-note-wrap{ margin-top: 0.5rem; }
.cct-cal-note-label{
    display: block;
    font-size: 0.8646rem;
    color: var(--ink-dim);
    margin-bottom: 0.375rem;
  }
textarea.cct-cal-note{
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.625rem;
    padding: 0.625rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8854rem;
    resize: vertical;
  }
textarea.cct-cal-note:focus{ outline: none; border-color: rgba(var(--accent-rgb),0.5); }
.summary-actions{
    display: flex;
    gap: 0.625rem;
    margin-top: 0.25rem;
  }
.game-view.posner-summary-active .readout,
  .game-view.posner-summary-active .footer,
  .game-view.posner-summary-active .semantic-progress-bar,
  .game-view.posner-summary-active .semantic-buttons,
  .game-view.posner-summary-active .instrument-head{
    display: none;
  }
.game-view.posner-summary-active .stage > *:not(.center-message--summary){
    display: none;
  }
.game-view.posner-summary-active .stage{
    height: auto;
    min-height: 21.25rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    overflow: visible;
  }
.game-view.posner-summary-active .center-message--summary{
    position: relative;
    inset: auto;
    width: 100%;
    overflow-y: visible;
  }
.semantic-pair{
    font-family: var(--display);
    font-size: clamp(1.5rem, 6cqw, 2.625rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 100%;
    padding: 0 1rem;
    overflow-wrap: break-word;
  }
.semantic-pair.negated{ color: var(--bad); }
.semantic-grid.negated .semantic-grid-cell{ color: var(--bad); }
.semantic-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
    gap: 0.625rem;
    max-width: 34rem;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }
.semantic-grid-cell{
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 0.0625rem solid var(--line);
    background: var(--panel);
    text-align: center;
  }
.semantic-grid-cell.rmt-highlight{
    border-color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.14);
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.4);
  }
.semantic-feedback,
  .linguistic-feedback,
  .classic-feedback,
  .geo-feedback{
    position: absolute;
    bottom: 1.125rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    max-width: calc(100% - 2rem);
    text-align: center;
    font-family: var(--display);
    font-size: 0.8854rem;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 62.4375rem;
    background: rgba(255,255,255,0.06);
    border: 0.0625rem solid rgba(255,255,255,0.08);
    opacity: 0;
    transition: opacity 100ms ease;
    pointer-events: none;
    z-index: 2;
  }
.semantic-feedback.visible,
  .linguistic-feedback.visible,
  .classic-feedback.visible,
  .geo-feedback.visible{ opacity: 1; }
.semantic-feedback.correct,
  .linguistic-feedback.correct,
  .classic-feedback.correct,
  .geo-feedback.correct{ color: var(--ok); border-color: rgba(82,224,160,0.35); }
.semantic-feedback.incorrect,
  .linguistic-feedback.incorrect,
  .classic-feedback.incorrect,
  .geo-feedback.incorrect{ color: var(--bad); border-color: rgba(255,122,122,0.35); }
.semantic-progress-bar{
    height: 0.25rem;
    margin: 0 2rem;
    border-radius: 62.4375rem;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
  }
.semantic-progress-fill{
    height: 100%;
    width: 0%;
    background: linear-gradient(var(--cyan), var(--cyan));
    transition: width 200ms ease;
  }
.semantic-buttons{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 2rem 0;
  }
.semantic-buttons button{
    flex: 1;
    padding: 0.875rem 1.25rem;
  }
.semantic-rule-desc{
    margin: 0;
    color: var(--ink-dim);
    font-size: 0.8438rem;
    line-height: 1.65;
    max-width: 42ch;
  }
.linguistic-pair{
    font-family: var(--display);
    font-size: clamp(1.25rem, 5cqw, 1.875rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 0 1.5rem;
    max-width: 100%;
    overflow-wrap: break-word;
  }
.linguistic-input-row{
    display: flex;
    gap: 0.625rem;
    width: 100%;
    max-width: 21.25rem;
    flex-wrap: wrap;
  }
.linguistic-word-input{
    flex: 1;
    min-width: 6.875rem;
    background: rgba(255,255,255,0.06);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.875rem;
    outline: none;
  }
.linguistic-word-input:focus{
    border-color: var(--violet);
  }
select.linguistic-word-input{
    width: 100%;
    max-width: 21.25rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) center, calc(100% - 0.9375rem) center;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
  }
select.linguistic-word-input option{
    background: var(--bg-1);
    color: var(--ink);
  }
.linguistic-input-error{
    margin: 0.25rem 0 0;
    color: var(--bad);
    font-size: 0.8646rem;
    min-height: 1rem;
    max-width: 21.25rem;
  }
.linguistic-word-list{
    width: 100%;
    max-width: 21.25rem;
    max-height: 8.125rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
  }
.linguistic-word-list:empty::before{
    content: "No words added yet.";
    color: var(--ink-dim);
    font-size: 0.875rem;
  }
.linguistic-word-list-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    background: rgba(255,255,255,0.05);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.625rem;
    padding: 0.4375rem 0.625rem;
    font-size: 0.8854rem;
    text-align: left;
  }
.linguistic-word-list-item span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.linguistic-word-remove{
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border-radius: 62.4375rem;
    line-height: 1;
    font-size: 0.8854rem;
  }
.linguistic-setup-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 21.25rem;
  }
.linguistic-setup-actions button{
    flex: 1;
  }
.linguistic-preset-card{
    max-width: 30rem;
  }
.linguistic-preset-card .linguistic-preset-list{
    max-width: none;
    max-height: 18.75rem;
  }
#semanticCategoryEditOverlay .linguistic-input-row button{
    flex: 1 1 100%;
  }
.linguistic-preset-modal-actions{
    display: flex;
    gap: 0.75rem;
    margin-top: 1.125rem;
  }
.linguistic-preset-modal-actions button{
    flex: 1;
  }
.linguistic-preset-list{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 10.625rem;
    overflow-y: auto;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
  }
.linguistic-word-list::-webkit-scrollbar,
  .linguistic-preset-list::-webkit-scrollbar{
    width: 0.5rem;
  }
.linguistic-word-list::-webkit-scrollbar-track,
  .linguistic-preset-list::-webkit-scrollbar-track{
    background: transparent;
  }
.linguistic-word-list::-webkit-scrollbar-thumb,
  .linguistic-preset-list::-webkit-scrollbar-thumb{
    background: linear-gradient(var(--cyan), var(--cyan));
    border-radius: 62.4375rem;
    border: 0.125rem solid transparent;
    background-clip: padding-box;
  }
.linguistic-word-list::-webkit-scrollbar-thumb:hover,
  .linguistic-preset-list::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(var(--cyan), var(--cyan));
    background-clip: padding-box;
    opacity: 0.85;
  }
.linguistic-preset-item{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8854rem;
  }
.linguistic-preset-item.already-added{
    opacity: 0.5;
  }
.linguistic-preset-item label{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
  }
.linguistic-preset-item input[type="checkbox"]{
    flex: 0 0 auto;
  }
.semantic-modal-desc{
    margin: -0.375rem 0 0.125rem;
    color: var(--ink-dim);
    font-size: 0.875rem;
    line-height: 1.55;
  }
.semantic-category-list{
    max-height: 16.25rem;
  }
.semantic-category-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.625rem;
    background: rgba(255,255,255,0.04);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.6875rem 0.875rem;
    font-family: var(--sans);
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
.semantic-category-item:hover{
    background: rgba(255,255,255,0.08);
    border-color: var(--violet);
  }
.semantic-category-count{
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 0.8542rem;
    font-weight: 500;
    color: var(--ink-dim);
  }
.home-view{ display: none; padding: 2.125rem 2.5rem 2.375rem; }
.home-view.visible{ display: block; }
.game-view{ display: none; }
.game-view.visible{ display: block; }
.menu-dropdown{
    position: relative;
    flex: none;
  }
.menu-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 0.0625rem solid var(--panel-border);
    color: var(--ink);
    border-radius: 62.4375rem;
    padding: 0.5rem 0.875rem;
    font-family: var(--sans);
    font-size: 0.8854rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
  }
.menu-btn:hover{
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.08);
  }
.menu-btn .chevron{
    width: 0.625rem;
    height: 0.625rem;
    transition: transform 120ms ease;
    flex: none;
  }
.menu-dropdown.open .menu-btn{
    border-color: var(--cyan);
  }
.menu-dropdown.open .menu-btn .chevron{
    transform: rotate(180deg);
  }
.menu-panel{
    position: absolute;
    display: none;
    flex-direction: column;
  }
.menu-dropdown.open .menu-panel{
    display: flex;
  }
.menu-item{
    width: 100%;
  }
.menu-item:hover{
    background: rgba(255,255,255,0.08);
  }
.mode-card{
    position: relative;
    text-align: left;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-md);
    border: 0.0938rem solid var(--panel-border);
    background: rgba(255,255,255,0.03);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    transition: border-color 120ms ease, background 120ms ease, transform 90ms ease;
  }
.mode-card:hover{
    transform: translateY(-0.0625rem);
    border-color: rgba(255,255,255,0.28);
  }
.mode-card.selected{
    border-color: var(--violet);
    background: rgba(var(--accent-rgb),0.14);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb),0.4);
  }
.mode-info-btn{
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.04);
    color: var(--ink-dim);
    cursor: pointer;
    padding: 0;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  }
.mode-info-btn:hover{
    border-color: var(--cyan);
    color: var(--ink);
    background: rgba(var(--accent-rgb),0.12);
  }
.mode-info-btn svg{
    width: 0.75rem;
    height: 0.75rem;
  }
.info-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6,7,14,0.6);
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
    z-index: 150;
    padding: 1.5rem;
    overflow-y: auto;
  }
.info-overlay.visible{ display: flex; }
.info-overlay > .info-card{ margin-top: auto; margin-bottom: auto; }
.info-card{
    width: 100%;
    max-width: 26rem;
    border-radius: var(--radius-md);
    border: 0.0625rem solid var(--panel-border);
    background: rgba(18,21,42,0.97);
    box-shadow: 0 1.875rem 5rem -1.875rem rgba(0,0,0,0.7);
  }
.info-card .info-title{
    font-family: var(--display);
    font-size: 0.8854rem;
    font-weight: 600;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.875rem;
  }
.info-card .info-poem{
    font-family: var(--display);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink);
    white-space: pre-line;
    margin: 0 0 1.25rem;
    background: none;
  }
.info-card .info-close{
    width: 100%;
  }
body.page-open .instrument{ display: none; }
.page-overlay{
    display: none;
    width: 100%;
    max-width: 56.25rem;
  }
#upgradeOverlay{
    max-width: 75rem;
  }
#pricingOverlay{
    max-width: 87.5rem;
  }
#pricingOverlay .page-header{ text-align: center; margin-left: auto; margin-right: auto; }
#aboutOverlay{
    max-width: 85.9375rem;
  }
body:has(#aboutOverlay.visible){ background: var(--bg-0); }
#aboutOverlay .page-header.upgrade-hero{ min-height: calc(100vh - var(--topnav-h, 4.75rem) - 0.75rem); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0 2.5rem; box-sizing: border-box; }
#aboutOverlay .about-freebies-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56em){
#aboutOverlay .about-freebies-grid{ grid-template-columns: minmax(0, 1fr); }
}
.faq-a p{ margin: 0 0 0.75rem; }
.faq-a p:last-child{ margin-bottom: 0; }
.faq-rows{ list-style: none; margin: 0.9rem 0 1rem; padding: 0; border-bottom: 0.0625rem solid rgba(150,213,217,0.16); }
.faq-rows li{ display: grid; grid-template-columns: 0.65rem 15rem minmax(0, 1fr); align-items: center; column-gap: 1.25rem; padding: 1.1rem 0.1rem; border-top: 0.0625rem solid rgba(150,213,217,0.16); }
.faq-rows .faq-row-dot{ width: 0.65rem; height: 0.65rem; border-radius: 0.1rem; background: var(--dot, var(--cyan)); }
.faq-rows strong{ color: var(--ink); font-weight: 700; font-size: 1em; }
.faq-rows .faq-row-desc{ color: inherit; font-size: 1em; line-height: 1.55; }
@media (max-width: 40em){
.faq-rows li{ grid-template-columns: 0.65rem minmax(0, 1fr); row-gap: 0.25rem; }
.faq-rows .faq-row-desc{ grid-column: 2; }
}
#aboutOverlay .upgrade-hero-title{ font-size: clamp(2rem, 5.336vw, 3.812rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; margin: 0 auto clamp(1.1rem, 2.86vh, 1.65rem); text-wrap: balance; }
#aboutOverlay .upgrade-hero-intro{ font-size: clamp(1.155rem, 2.31vw, 1.65rem); line-height: 1.5; max-width: 74.25rem; margin: 0 auto; }
#aboutOverlay .upgrade-hero-title{ font-size: clamp(2.2rem, 5.9vw, 4.2rem); max-width: 20ch; text-wrap: wrap; margin-bottom: clamp(1.25rem, 3.2vh, 2rem); }
#aboutOverlay .upgrade-hero-intro{ max-width: 34em; text-wrap: pretty; }
#upgradeOverlay .page-title.upgrade-hero-title{ font-size: clamp(1.8rem, 4.2vw, 2.75rem); max-width: none; margin-bottom: 0.3rem; text-wrap: balance; }
#upgradeOverlay .page-header.upgrade-hero{ margin-top: 0.35rem; margin-bottom: 0; }
.upg-grad{ background: linear-gradient(var(--cyan), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.upg-hero-sub{ max-width: 46ch; margin: 0 auto; font-size: clamp(1.2rem, 2.3vw, 1.7rem); font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
#upgradeOverlay .upgrade-cta-wrap--top{ display: flex; flex-direction: column; align-items: center; margin: 1rem 0 0.9rem; }
.upg-proof{ margin-top: 0.75rem; text-align: center; }
.upg-proof p{ margin: 0; }
.upg-proof-main{ font-size: 0.85rem; color: var(--ink); }
.upg-proof-stars{ color: var(--cyan); letter-spacing: 0.12em; margin-right: 0.35rem; }
.upg-proof-main strong{ font-weight: 700; }
.upg-proof-sub{ margin-top: 0.3rem !important; font-size: 0.78rem; color: var(--ink-dim); }
#upgradeOverlay .upgrade-cta-wrap--top .upg-proof{ margin-top: 0.55rem; }
#upgradeOverlay .upgrade-cta-wrap--top .upg-proof-sub{ margin-top: 0.15rem !important; }
#upgradeOverlay .upg-fold .upgrade-cta-wrap--top{ margin: 0.8rem 0 0.7rem; }
#upgradeOverlay .upg-pitch{ max-width: 38rem; margin: 0 auto 2.5rem; }
#upgradeOverlay .upg-hero-sub + .upgrade-hero-intro{ margin-top: 0.6rem; }
#upgradeOverlay .upg-fold{ padding-bottom: 0; }
#upgradeOverlay .upg-quotes{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 70rem; margin: 0 auto; }
#upgradeOverlay .upg-quotes .upgrade-testimonial{ width: auto; min-width: 0; margin: 0; padding: 0.7rem 0.9rem 0.75rem; display: flex; flex-direction: column; justify-content: center; }
#upgradeOverlay .upg-quotes .upgrade-stars{ margin-bottom: 0.25rem; }
#upgradeOverlay .upg-quotes .upgrade-quote{ margin: 0 0 0.35rem; padding: 0; border: 0; line-height: 1.4; quotes: none; }
@media (max-width: 48rem){
#upgradeOverlay .upg-quotes{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (max-width: 26rem){
#upgradeOverlay .upg-quotes .upgrade-testimonial{ padding: 0.8rem 0.7rem 0.85rem; }
#upgradeOverlay .upg-quotes .upgrade-quote{ font-size: 0.875rem; }
}
#upgradeOverlay .upg-fold .upg-quotes{ max-width: none; gap: 1.25rem; }
html body .upgrade-cta{ border-radius: 0.75rem; }
html body .pricing-tier-cta{ border-radius: 0.7rem; }
html body .topnav-cta{ border-radius: 0.6rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-testimonial{ padding: 0.9rem 1.15rem 0.95rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-stars{ font-size: 1rem; letter-spacing: 0.15rem; margin-bottom: 0.35rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-quote{ font-size: 1rem; line-height: 1.42; margin: 0 0 0.45rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-attribution{ font-size: 0.875rem; }
@media (max-width: 48rem){
#upgradeOverlay .upg-fold .upg-quotes{ gap: 0.75rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-quote{ font-size: 0.96875rem; }
}
@media (max-width: 26rem){
#upgradeOverlay .upg-fold .upg-quotes .upgrade-testimonial{ padding: 0.85rem 0.75rem 0.9rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-quote{ font-size: 0.9375rem; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-attribution{ font-size: 0.875rem; }
}
@media (max-width: 40rem){
#upgradeOverlay .upg-fold .upg-quotes{ grid-template-columns: minmax(0, 1fr); gap: 0.75rem; max-width: 32rem; margin-left: auto; margin-right: auto; }
#upgradeOverlay .upg-fold .upg-quotes .upgrade-quote{ font-size: 1rem; }
}
#upgradeOverlay .upg-feat-head{ margin-top: 2.75rem !important; }
#upgradeOverlay .upgrade-cta-wrap:not(.upgrade-cta-wrap--top){ flex-direction: column; align-items: center; }
#upgradeOverlay .upg-feat-head{ max-width: 42rem; margin: 3rem auto 1.75rem; padding: 0 1rem; text-align: center; }
#upgradeOverlay .upg-feat-k{ margin: 0 0 0.6rem; color: var(--cyan); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
#upgradeOverlay .upg-feat-intro{ margin: 0; color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.35; text-wrap: balance; }
html[data-theme="light"] #upgradeOverlay .upg-feat-k{ color: #1f5f5f; }
#upgradeOverlay .upg-eyebrow{ display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto 0.75rem; padding: 0.35rem 1.2rem;
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.45); border-radius: 62rem; background: rgba(var(--accent-rgb), 0.08); box-shadow: none;
    color: var(--cyan); font-size: clamp(1.0625rem, 2vw, 1.25rem); font-weight: 700; letter-spacing: 0; line-height: 1.35; text-transform: none; text-align: center; text-wrap: balance; }
#upgradeOverlay .upg-eyebrow > i{ display: inline-block; vertical-align: 0.1em; margin-right: 0.55rem; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--cyan); box-shadow: none; }
html[data-theme="light"] #upgradeOverlay .upg-eyebrow{ color: #1f5f5f; border-color: rgba(31, 95, 95, 0.35); background: rgba(31, 95, 95, 0.07); box-shadow: none; }
html[data-theme="light"] #upgradeOverlay .upg-eyebrow > i{ background: #2a7a7a; box-shadow: none; }
@media (max-width: 26rem){
#upgradeOverlay .upg-eyebrow{ font-size: 1rem; padding: 0.45rem 1rem; }
}
#upgradeOverlay .upgrade-vsl{ max-width: 42rem; margin: 1.1rem auto 0; }
#aboutOverlay .page-header .about-hero-stats{ max-width: 76rem; }
#aboutOverlay .upgrade-cta{ font-size: 1.32rem; padding: 1.155rem 2.86rem; }
@media (max-width: 26rem){
.upgrade-cta, #aboutOverlay .upgrade-cta{ padding-left: 1rem; padding-right: 1rem; }
#aboutOverlay .upgrade-cta{ font-size: 1.2rem; }
}
#aboutOverlay .upgrade-cta-wrap--top{ margin: clamp(1.65rem, 4.95vh, 2.75rem) 0 clamp(2.2rem, 8.8vh, 5.5rem); }
#upgradeOverlay .upgrade-cta-wrap--top .upgrade-cta{ font-size: 1.125rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.85rem 2.25rem; border-radius: 0.75rem; }
@media (max-width: 26rem){
#upgradeOverlay .upgrade-cta-wrap--top .upgrade-cta{ font-size: 1.0625rem; padding: 0.8rem 1.75rem; }
}
#aboutOverlay .about-hero-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; max-width: 79.2rem; margin: 0 auto; }
#aboutOverlay .about-hero-stat{ padding: 0.275rem 0.825rem; border-left: 0; text-align: center; }
#aboutOverlay .about-hero-stat + .about-hero-stat{ border-left: 0.0625rem solid var(--panel-border); }
#aboutOverlay .about-hero-stat-value{ font-size: clamp(1.87rem, 3.08vw, 2.75rem); }
#aboutOverlay .about-hero-stat-label{ font-size: 0.9625rem; letter-spacing: 0.08em; margin-top: 0.44rem; text-wrap: balance; }
@media (max-width: 40em){
#aboutOverlay .about-hero-stats{ grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
#aboutOverlay .about-hero-stat:nth-child(odd){ border-left: 0; }
}
.hero-mark{ background: linear-gradient(var(--cyan), var(--cyan)) no-repeat 0 97% / 0% 0.07em; }
.hero-anim .hero-mark{ animation: heroMark 0.75s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes heroMark{ to{ background-size: 100% 0.07em; } }
#upgHeroTitle .hero-mark{ background: none !important; padding-bottom: 0; }
#upgHeroTitle .hero-mark, #upgHeroTitle .upg-s{ display: inline-block; }
#upgHeroTitle{ max-width: none; font-size: clamp(1.3rem, calc(3.2vw + 0.6rem), 2.4rem); line-height: 1.25; letter-spacing: -0.01em; }
#upgHeroTitle.hero-anim .hero-mark{ animation-name: upgMark; }
@keyframes upgMark{ to{ background-size: 100% 0.12em; } }
@media (prefers-reduced-motion: reduce){
#upgHeroTitle .hero-mark{ background-size: 100% 0.12em; }
}
#upgradeOverlay #upgHeroTitle{ font-size: clamp(1.3rem, calc(2.6vw + 0.55rem), 2.05rem); line-height: 1.22; }
#upgradeOverlay .upg-eyebrow{ margin-bottom: 0.6rem; padding-top: 0.28rem; padding-bottom: 0.28rem; }
#upgradeOverlay .upg-fold .upgrade-cta-wrap--top{ margin: 1.5rem 0 0; }
#upgradeOverlay .upgrade-cta-wrap--top .upg-proof{ margin-top: 0.95rem; }
#upgradeOverlay .upgrade-cta-wrap--top .upg-proof-main{ font-size: 0.95rem; }
#upgradeOverlay .upgrade-cta-wrap--top .upg-proof-sub{ margin-top: 0.3rem !important; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce){
.hero-mark{ background-size: 100% 0.07em; }
.hero-anim .hero-mark{ animation: none; }
}
.about-link{ color: var(--cyan); text-decoration: underline; text-underline-offset: 0.15em; }
#studiesOverlay{
    max-width: 90rem;
  }
body:has(#studiesOverlay.visible){
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
#studiesOverlay .page-header{ text-align: center; margin-left: auto; margin-right: auto; }
#studiesOverlay .page-intro{ margin-left: auto; margin-right: auto; }
#studiesOverlay .studies-meta{ text-align: center; }
.page-overlay.visible{ display: block; }
.page-back{
    background: none;
    border: none;
    box-shadow: none;
    color: var(--ink-dim);
    font-family: var(--sans);
    font-size: 0.8854rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0 0.375rem;
    margin-bottom: 1.25rem;
    transition: color 120ms ease, transform 90ms ease;
  }
.page-back:hover{
    color: var(--ink);
    transform: none;
    box-shadow: none;
    background: none;
  }
.page-header{
    margin: 0 0 2.5rem;
    max-width: 62ch;
  }
.page-eyebrow{
    font-family: var(--display);
    font-size: 0.8646rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 0 0.75rem;
  }
.page-title{
    font-family: var(--display);
    font-size: clamp(1.75rem, 4vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 1rem;
  }
.page-intro{
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-dim);
    margin: 0;
    max-width: 52ch;
  }
.about-section{
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 0.0625rem solid var(--panel-border);
  }
.about-section:first-of-type{
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
.about-section-eyebrow{
    font-family: var(--display);
    font-size: 0.8438rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 0 0.625rem;
  }
.about-section-title{
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.6vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.875rem;
  }
.pricing-social-proof{
    margin-top: 3rem;
    padding-top: 2.25rem;
    border-top: 0.0625rem solid var(--panel-border);
    text-align: center;
  }
.pricing-social-rating{ margin-bottom: 1.75rem; }
.pricing-social-rating-stars{
    display: block;
    color: var(--violet);
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    margin-bottom: 0.5rem;
  }
.pricing-social-rating-text{
    font-size: 0.9375rem;
    color: var(--ink-dim);
  }
.pricing-testimonial-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
.pricing-testimonial{ width: auto; }
@media (max-width: 56em){
.pricing-testimonial-grid{ grid-template-columns: 1fr; }
}
.about-freebies-heading{
    text-align: center;
    max-width: none;
    margin: 0 auto 1.75rem;
  }
.about-freebies-heading .page-title{ margin: 0 0 0.75rem; }
.about-freebies-heading .page-intro{ margin: 0 auto; max-width: 46rem; }
.about-freebies-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 0.25rem;
  }
@media (max-width: 56em){
.about-freebies-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 28em){
.about-freebies-grid{ grid-template-columns: 1fr; }
}
.about-hero-stats{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: 56rem;
    margin: 2rem auto 0;
  }
.about-hero-stat{
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    padding-left: 0.875rem;
    border-left: 0.1875rem solid var(--cyan);
  }
.about-hero-stat-value{
    font-family: var(--display);
    font-size: clamp(1.0625rem, 2.6vw, 1.5rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    white-space: nowrap;
  }
.about-hero-stat-label{
    font-size: clamp(0.625rem, 1.6vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-top: 0.25rem;
  }
@media (max-width: 32em){
.about-hero-stats{ flex-wrap: wrap; justify-content: flex-start; }
.about-hero-stat{ flex: 1 1 calc(50% - 0.75rem); }
.about-hero-stat-value{ white-space: normal; }
}
#aboutOverlay .about-section-eyebrow{ font-size: 0.9375rem; }
#aboutOverlay .about-section-title{ font-size: clamp(1.4375rem, 3vw, 1.75rem); }
#aboutOverlay .contact-card-title{ font-size: 1.125rem; }
#aboutOverlay .contact-card-desc{ font-size: 1rem; line-height: 1.6; }
#aboutOverlay .about-faq-section > .about-section-eyebrow,
  #aboutOverlay .about-faq-section > .about-section-title{ text-align: center; }
#aboutOverlay .about-faq-section > .about-section-title{ margin-bottom: 1.5rem; }
#aboutOverlay .about-faq{ max-width: 46rem; margin: 0 auto 2.75rem; }
#aboutOverlay .faq-item{ margin-bottom: 1rem; }
#aboutOverlay .faq-item:last-child{ margin-bottom: 0; }
#aboutOverlay .faq-q{
    position: relative; justify-content: center; gap: 0.75rem;
    padding: 1.5rem 3.5rem; min-height: 4.8125rem; box-sizing: border-box;
    font-family: var(--sans); font-weight: 700; font-size: 1.125rem; line-height: 1.4;
    text-align: center; outline: none;
  }
#aboutOverlay .faq-icon{
    position: absolute; right: 1.5rem; top: 50%;
    transform: translateY(-50%);
    color: var(--cyan);
    transition: transform 160ms ease;
  }
#aboutOverlay .faq-item.open .faq-icon{ transform: translateY(-50%) rotate(180deg); color: var(--cyan); }
#aboutOverlay .faq-a{
    padding: 0 2rem;
    font-size: 1.0625rem; font-style: normal; line-height: 1.6; font-weight: 400;
    color: color-mix(in srgb, var(--ink) 80%, transparent);
    text-align: left;
  }
#aboutOverlay .faq-item.open .faq-a{ padding: 0 2rem 1.5rem; }
html[data-theme="light"] .faq-item,
  html[data-theme="light"] .upgrade-faq-item{
    border: 0.0625rem solid rgba(42,122,122,0.32);
    background: var(--bg-0);
    box-shadow: none;
    transition: background 140ms ease, border-color 140ms ease;
  }
html[data-theme="light"] .faq-item:hover,
  html[data-theme="light"] .upgrade-faq-item:hover{ background: var(--bg-0); border-color: rgba(42,122,122,0.45); }
html[data-theme="light"] .faq-item.open,
  html[data-theme="light"] .upgrade-faq-item.open{
    background: var(--bg-0);
    border-color: rgba(42,122,122,0.55);
  }
html[data-theme="light"] #aboutOverlay .faq-q,
  html[data-theme="light"] .upgrade-faq-q{ color: #1a2b2b; }
html[data-theme="light"] #aboutOverlay .faq-item .faq-a{
    color: #1f3535; font-size: 1.1875rem; line-height: 1.65; text-align: left; font-style: normal;
  }
html[data-theme="light"] #aboutOverlay .faq-item .faq-q{ font-size: 1.1875rem; }
html[data-theme="light"] .upgrade-faq-a{ color: #1f3535; }
.upgrade-faq-list{ margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.upgrade-faq-list li::marker{ color: var(--cyan); }
.upgrade-faq-ps{ margin: 0.9rem 0 0; }
.upgrade-faq-a{ text-align: left; font-style: normal; font-weight: 400; color: color-mix(in srgb, var(--ink) 80%, transparent); line-height: 1.6; }
html[data-theme="light"] #aboutOverlay .faq-icon,
  html[data-theme="light"] .upgrade-faq-icon{ color: #1f5f5f; }
#aboutOverlay .about-cta-bottom{ margin: 0; }
.studies-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }
.studies-filter-group{
    flex: 1 1 14rem;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
  }
.studies-filter-label{
    display: block;
    font-family: var(--display);
    font-size: 0.8021rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.5rem;
  }
.studies-search-wrap{ position: relative; display: flex; align-items: center; }
.studies-search-icon{
    position: absolute;
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
    color: var(--ink-dim);
    pointer-events: none;
  }
.studies-search-input{
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 0.0938rem solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.875rem 0.75rem 2.375rem;
    font-family: var(--sans);
    font-size: 0.9063rem;
    color: var(--ink);
    transition: border-color 120ms ease, background 120ms ease;
  }
.studies-search-input::placeholder{ color: var(--ink-dim); opacity: 0.85; }
.studies-search-input:focus{
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(255,255,255,0.07);
  }
.studies-category-select{ position: relative; }
.studies-category-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    width: 100%;
    border: 0.0938rem solid var(--panel-border);
    font-family: var(--sans);
    font-size: 0.9063rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
  }
.studies-category-btn:hover{ background: rgba(255,255,255,0.08); }
.studies-category-btn .chevron{
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    transition: transform 120ms ease;
  }
.studies-category-select.open .studies-category-btn .chevron{ transform: rotate(180deg); }
.studies-category-select.open .studies-category-btn{
    border-color: rgba(var(--accent-rgb), 0.55);
  }
.studies-category-panel{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 16.5rem;
    overflow-y: auto;
    display: none;
    z-index: 20;
  }
.studies-category-select.open .studies-category-panel{ display: block; }
.studies-category-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    width: 100%;
  }
.studies-category-item:hover{ background: rgba(255,255,255,0.08); }
.studies-category-item.active{ color: var(--cyan); }
.studies-category-item-check{
    visibility: hidden;
  }
.studies-category-item.active .studies-category-item-check{ visibility: visible; }
.studies-meta{
    font-size: 0.8438rem;
    color: var(--ink-dim);
    margin: 0 0 1rem;
  }
.studies-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr));
    gap: 1.25rem;
  }
.study-card{
    display: flex;
    flex-direction: column;
    border: 0.0938rem solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    padding: 1.625rem 1.75rem 1.75rem;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
  }
.study-card:hover{ transform: translateY(-0.125rem); border-color: rgba(255,255,255,0.22); }
.study-card-badge{
    align-self: flex-start;
    font-family: var(--display);
    font-size: 0.8021rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cyan);
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 62.4375rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1.125rem;
    max-width: calc(100% - 3rem);
  }
.study-card-row{ margin-bottom: 1.125rem; }
.study-card-row:last-child{ margin-bottom: 0; }
.study-card-label{
    display: block;
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.25rem;
  }
.study-card-value{
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
  }
.study-card-source-row{
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 0.0625rem solid var(--panel-border);
  }
.study-card-link{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: none;
    word-break: break-all;
  }
.study-card-link:hover{ text-decoration: underline; }
.study-card-link svg{ width: 1rem; height: 1rem; flex: none; }
.study-card-source{
    font-size: 0.8438rem;
    color: var(--ink-dim);
    margin: 0;
  }
.study-fav{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 62.4375rem;
    color: var(--ink-dim);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
  }
.study-fav:hover{
    transform: none;
    box-shadow: none;
    color: #ffc94d;
    background: rgba(255,201,77,0.12);
  }
.study-fav svg{
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
  }
.study-fav.is-fav{ color: #ffc94d; }
.study-fav.is-fav svg{ fill: currentColor; }
html[data-theme="light"] .study-fav:hover,
  html[data-theme="light"] .study-fav.is-fav,
  html[data-theme="light"] .studies-fav-toggle.active{ color: #b57800; }
.studies-filter-group--fav{ flex: 0 0 auto; min-width: 0; }
.studies-fav-toggle{
    justify-content: center;
    white-space: nowrap;
    width: auto;
  }
.studies-fav-toggle svg{
    width: 1rem;
    height: 1rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
  }
.studies-fav-toggle.active{
    color: #ffc94d;
    border-color: rgba(255,201,77,0.6);
  }
.studies-fav-toggle.active svg{ fill: currentColor; }
.study-drag{
    position: absolute; top: 1rem; right: 3.25rem; width: 2.25rem; height: 2.25rem; padding: 0;
    display: none; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 62.4375rem;
    color: var(--ink-dim); cursor: grab; touch-action: none;
  }
.study-drag:hover, .study-drag:focus-visible{ transform: none; box-shadow: none; color: var(--cyan); background: rgba(var(--accent-rgb), 0.12); }
.study-drag svg{ width: 1.125rem; height: 1.125rem; fill: currentColor; pointer-events: none; }
.studies-grid.reorderable .study-drag{ display: inline-flex; }
.studies-grid.reorderable .study-card-badge{ max-width: calc(100% - 5.5rem); }
.study-card.is-dragging{ z-index: 50; opacity: 0.93; border-color: var(--cyan); box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.45); transition: none; cursor: grabbing; }
.study-drop-ghost{ position: fixed; z-index: 1; pointer-events: none; box-sizing: border-box; border: 0.125rem dashed var(--cyan); border-radius: var(--radius-md); background: rgba(var(--accent-rgb), 0.07); }
body.studies-dragging .study-card:not(.is-dragging){ transition: transform .22s ease, border-color .15s ease; }
body.studies-dragging{ user-select: none; -webkit-user-select: none; cursor: grabbing; }
.studies-order-bar{ display: none; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.9rem; color: var(--ink-dim); }
.studies-order-bar.visible{ display: flex; }
.studies-order-reset{ font: inherit; color: var(--cyan); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
#guidesOverlay{ max-width: 75rem; }
body:has(#guidesOverlay.visible){ padding-left: 0.75rem; padding-right: 0.75rem; }
#guidesOverlay .page-header{ text-align: center; margin-left: auto; margin-right: auto; }
#guidesOverlay .page-intro{ margin-left: auto; margin-right: auto; }
#guidesOverlay .studies-meta{ text-align: center; }
.guides-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.5rem; }
.guide-card{
    position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    border: 0.0938rem solid var(--panel-border); border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
.guide-card:hover, .guide-card:focus-visible{
    transform: translateY(-0.1875rem); border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.25); outline: none;
  }
.guide-card-body{ display: flex; flex-direction: column; gap: 0.75rem; flex: 1; padding: 1.5rem 1.5rem 1.5rem; }
.guide-card .study-card-badge{ margin-bottom: 0; }
.guide-card .study-fav{ top: 0.5rem; right: 0.5rem; }
.guide-card-title{ font-family: var(--display); font-size: 1.25rem; line-height: 1.25; margin: 0; color: var(--ink); }
.guide-card-excerpt{ margin: 0; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; }
.guide-card-meta{ margin-top: auto; padding-top: 0.25rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-dim); }
.guides-grid.is-list{ grid-template-columns: 1fr; gap: 1rem; }
.guides-grid.is-list .guide-card{ flex-direction: row; }
.guides-grid.is-list .guide-card-body{ justify-content: center; gap: 0.5rem; padding: 1.25rem 3.5rem 1.25rem 1.75rem; }
.guides-grid.is-list .guide-card-meta{ margin-top: 0.25rem; }
.guides-grid.is-list .guide-card-excerpt{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 45rem){
.guides-grid.is-list .guide-card-body{ padding: 1rem 3rem 1rem 1.1rem; }
}
.layout-toggle{ display: inline-flex; border: 0.0938rem solid var(--panel-border); border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,0.05); }
.layout-toggle button{ display: inline-flex; align-items: center; background: none; border: none; border-radius: 0; padding: 0.75rem 0.95rem; color: var(--ink-dim); cursor: pointer; }
.layout-toggle button:hover{ transform: none; box-shadow: none; color: var(--ink); background: rgba(255,255,255,0.08); }
.layout-toggle button[aria-pressed="true"]{ color: var(--cyan); background: rgba(var(--accent-rgb), 0.14); }
.layout-toggle svg{ width: 1.1rem; height: 1.1rem; fill: currentColor; }
.guide-article{
    max-width: 75rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 12rem minmax(0, 44rem) 11.5rem;
    gap: 2rem;
    align-items: start;
  }
.guide-article > .page-back{ grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; margin: 1.25rem 0 0.75rem; padding: 0.25rem 0 0.25rem 0.9rem; font-size: 0.85rem; }
.guide-article .page-back:hover, html[data-theme] .guide-article .page-back:hover{ transform: none; box-shadow: none; background: none; color: var(--ink); }
.guide-article-main{ min-width: 0; }
.guide-article-main > .study-card-badge{ display: inline-block; }
.guide-title-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0.875rem 0 0.75rem; }
.guide-article-main h1{ font-family: var(--display); font-size: clamp(1.85rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0; color: var(--ink); }
.guide-nav, .guide-toc{
    position: sticky;
    top: calc(var(--topnav-h, 4.75rem) + 1rem);
    max-height: calc(100vh - var(--topnav-h, 4.75rem) - 2rem);
    overflow-y: auto;
  }
.guide-toc-title{
    font-family: var(--display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.5rem;
  }
.guide-nav-list, .guide-toc-list{ display: flex; flex-direction: column; }
.guide-nav-link, .guide-toc-link{
    display: block;
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
  }
.guide-nav-link{ padding: 0.55rem 0.9rem; margin-bottom: 0.2rem; border-radius: 0.5rem; }
.guide-toc-link{ padding: 0.32rem 0; }
.guide-nav-link:hover, .guide-toc-link:hover{ color: var(--ink); }
.guide-nav-link.active{ background: rgba(var(--accent-rgb), 0.14); color: var(--cyan); font-weight: 500; }
.guide-toc-link.active{ color: var(--cyan); }
@media (max-width: 68em){
.guide-article{ grid-template-columns: minmax(0, 46rem); max-width: 46rem; }
.guide-nav, .guide-toc{ display: none; }
}
.guide-article-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; color: var(--ink-dim); font-size: 0.9rem; }
.guide-save-btn{
    flex: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 2.25rem; height: 2.25rem; padding: 0; color: var(--ink-dim);
    background: rgba(255,255,255,0.07); border: none; border-radius: 0.5rem;
    transition: color 120ms ease, background 120ms ease;
  }
.guide-save-btn .guide-save-label{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide-save-btn:hover{ transform: none; box-shadow: none; color: #ffc94d; border-color: rgba(255,201,77,0.5); background: rgba(255,201,77,0.08); }
.guide-save-btn svg{ width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.guide-save-btn.is-fav{ color: #ffc94d; border-color: rgba(255,201,77,0.5); }
.guide-save-btn.is-fav svg{ fill: currentColor; }
html[data-theme="light"] .guide-save-btn:hover, html[data-theme="light"] .guide-save-btn.is-fav{ color: #b57800; }
.guide-article-body{ font-size: 1rem; line-height: 1.75; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.guide-article-body p{ margin: 0 0 1.25rem; }
.guide-article-body h2{ font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 2.5rem 0 1rem; color: var(--ink); scroll-margin-top: calc(var(--topnav-h, 4.75rem) + 1.25rem); }
.guide-article-body h3{ font-family: var(--display); font-size: 1.15rem; margin: 1.75rem 0 0.5rem; color: var(--ink); }
.guide-article-body ul, .guide-article-body ol{ margin: 0 0 1.25rem; padding-left: 1.4rem; }
.guide-article-body figure{ margin: 1.75rem 0; }
.guide-article-body figure img{ display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0.75rem; border: 0.0625rem solid var(--panel-border); }
.guide-article-body figcaption{ margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-dim); text-align: center; }
.guide-article-body li{ margin-bottom: 0.4rem; }
.guide-article-body blockquote{ margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 0.25rem solid rgba(var(--accent-rgb), 0.6); color: var(--ink-dim); font-style: italic; }
.guide-article-body a{ color: var(--cyan); }
.guide-article-body hr{ border: 0; border-top: 0.0625rem solid var(--panel-border); margin: 2.25rem 0; }
.guide-article-foot{ margin-top: 3rem; padding-top: 1.5rem; border-top: 0.0625rem solid var(--panel-border); }
.studies-search-input{ padding-right: 2.5rem; }
.search-clear{
    position: absolute; right: 0.5rem; width: 1.75rem; height: 1.75rem; padding: 0;
    display: none; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 62.4375rem;
    color: var(--ink-dim); cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
  }
.studies-search-wrap.has-value .search-clear{ display: inline-flex; }
.search-clear:hover, .search-clear:focus-visible{ transform: none; box-shadow: none; color: var(--ink); background: rgba(var(--accent-rgb), 0.16); }
.search-clear svg{ width: 0.875rem; height: 0.875rem; pointer-events: none; }
.studies-empty{
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ink-dim);
    font-size: 0.9375rem;
  }
@media (max-width: 45em){
.studies-grid{ grid-template-columns: 1fr; }
.studies-filters{ flex-direction: column; }
.studies-filter-group{ flex: 0 0 auto; }
}
.manual-note.muted{
    opacity: 0.45;
    transition: opacity 0.15s ease;
  }
.time-picker{
    display: flex;
  }
.time-picker-col{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.time-picker-label{
    font-family: var(--sans);
    font-size: 0.8646rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-dim);
    opacity: 0.8;
  }
.time-stepper{
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--panel);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 0.3125rem;
  }
.time-stepper-btn{
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--ink-dim);
    font-family: var(--sans);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
  }
.time-stepper-btn:hover{
    color: var(--ink);
    background: rgba(var(--accent-rgb), 0.16);
  }
.time-stepper-btn:active{
    background: rgba(var(--accent-rgb), 0.28);
  }
.time-stepper-select{
    flex: 1;
    min-width: 0;
    height: 2.25rem;
    background: rgba(255,255,255,0.09);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0 1.625rem 0 0.5rem;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.0625rem;
    text-align: center;
    text-align-last: center;
    font-variant-numeric: tabular-nums;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: calc(100% - 0.9375rem) center, calc(100% - 0.6875rem) center;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 120ms ease;
  }
.time-stepper-select:hover{
    border-color: rgba(var(--accent-rgb), 0.4);
  }
.time-stepper-select option{
    background: var(--bg-1);
    color: var(--ink);
  }
@media (pointer: coarse){
html body .time-stepper{ gap: 0.1rem; padding: 0.15rem; }
html body .time-stepper > .time-stepper-btn{ width: 2.4rem; height: 2.5rem; }
html body .time-stepper > .time-stepper-select{ height: 2.5rem; min-width: 1.4rem; padding: 0; background-image: none; }
html body .cl-pop:has(.cl-pop-tp){ width: min(26rem, calc(100vw - 1rem)); }
}
.start-btn{
    width: 100%;
  }
button:disabled{
    opacity: 0.4;
    cursor: not-allowed;
  }
button:disabled:hover{
    transform: none;
    box-shadow: none;
  }
.cct-home-streak:empty{ display: none; }
.cct-menu-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 0.0625rem solid var(--panel-border);
    color: var(--ink);
    border-radius: 62.4375rem;
    padding: 0.5rem 0.875rem;
    font-family: var(--sans);
    font-size: 0.8854rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
  }
.cct-menu-btn:hover{
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.08);
  }
.cct-menu-btn .chevron{
    width: 0.625rem;
    height: 0.625rem;
    transition: transform 120ms ease;
    flex: none;
  }
.menu-dropdown.open .cct-menu-btn{
    border-color: var(--cyan);
  }
.menu-dropdown.open .cct-menu-btn .chevron{
    transform: rotate(180deg);
  }
.cct-menu-panel{
    position: absolute;
    display: none;
    flex-direction: column;
  }
.menu-dropdown.open .cct-menu-panel{
    display: flex;
  }
.full-btn{ width: 100%; margin: 0.125rem 0 0.8125rem; }
.full-btn.ghost:hover{ transform: none; }
.settings-group-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 1.5rem);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem;
    margin: 0 -0.75rem;
    cursor: pointer;
    font-family: var(--display);
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: none;
  }
.settings-group-toggle:hover{ transform: none; box-shadow: none; color: var(--ink); background: rgba(255,255,255,0.05); }
.settings-group-toggle .chevron{
    width: 0.625rem;
    height: 0.625rem;
    color: var(--ink-dim);
    transition: transform 120ms ease;
    flex: none;
  }
.manual-note{
    font-size: 0.8542rem;
    line-height: 1.5;
    color: var(--ink-dim);
    padding: 0 0 0.8125rem;
  }
.cct-mode-card{
    text-align: left;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-md);
    border: 0.0938rem solid var(--panel-border);
    background: rgba(255,255,255,0.03);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    transition: border-color 120ms ease, background 120ms ease, transform 90ms ease;
  }
.cct-mode-card:hover{
    transform: translateY(-0.0625rem);
    border-color: rgba(255,255,255,0.28);
  }
.cct-mode-card.selected{
    border-color: var(--violet);
    background: rgba(var(--accent-rgb),0.14);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb),0.4);
  }
.cct-manual-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    font-size: 0.8854rem;
    padding: 0.625rem 0;
  }
.cct-manual-row + .cct-manual-row,
  .manual-time-block + .cct-manual-row{
    border-top: 0.0625rem solid rgba(255,255,255,0.055);
  }
.cct-manual-row label,
  .cct-manual-row > span:first-child{
    color: var(--ink-dim);
    flex: 1;
    letter-spacing: 0.005em;
  }
.cct-manual-row input[type="range"]{
    flex: 2;
    -webkit-appearance: none;
    appearance: none;
    height: 0.25rem;
    border-radius: 62.4375rem;
    background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) var(--fill, 0%), rgba(255,255,255,0.12) var(--fill, 0%), rgba(255,255,255,0.12) 100%);
    outline: none;
    cursor: pointer;
  }
.cct-manual-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: -0.3125rem;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    box-shadow: none;
    cursor: pointer;
  }
.cct-manual-row input[type="range"]::-moz-range-track{
    height: 0.25rem;
    border-radius: 62.4375rem;
    background: rgba(255,255,255,0.12);
  }
.cct-manual-row input[type="range"]::-moz-range-progress{
    height: 0.25rem;
    border-radius: 62.4375rem;
    background: linear-gradient(var(--cyan), var(--cyan));
  }
.cct-manual-row input[type="range"]::-moz-range-thumb{
    width: 0.875rem;
    height: 0.875rem;
    border: none;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    box-shadow: none;
    cursor: pointer;
  }
.cct-manual-value{
    font-family: var(--display);
    font-weight: 600;
    min-width: 2.75rem;
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }
.cct-manual-row select.manual-select{
    flex: 2;
    background: rgba(255,255,255,0.06);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.4375rem 1.875rem 0.4375rem 0.625rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.875rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: calc(100% - 1rem) center, calc(100% - 0.6875rem) center;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 120ms ease;
  }
.cct-manual-row select.manual-select:hover{
    border-color: rgba(var(--accent-rgb),0.4);
  }
.cct-manual-row select.manual-select option{
    background: var(--bg-1);
    color: var(--ink);
  }
.seg-toggle{
    flex: 2;
    display: flex;
    gap: 0.375rem;
  }
.seg-btn{
    flex: 1;
    text-align: center;
    padding: 0.4375rem 0.25rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.04);
    color: var(--ink-dim);
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  }
.seg-btn:hover{ border-color: rgba(255,255,255,0.28); }
.seg-btn.selected{
    border-color: var(--cyan);
    background: rgba(var(--accent-rgb),0.14);
    color: var(--ink);
  }
.cct-stage{
    position: relative;
    height: 18.75rem;
    margin: 0 0.75rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
  }
.cct-stage:focus-visible{ outline-offset: 0.1875rem; }
.game-view.cct-summary-active .instrument-head,
  .game-view.cct-summary-active .cct-readout,
  .game-view.cct-summary-active .keypad,
  .game-view.cct-summary-active .cct-footer{
    display: none;
  }
#cctGameView.cct-summary-active .instrument-head{
    display: none;
  }
.game-view.cct-summary-active .cct-stage{
    height: auto;
    min-height: 18.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
.speaker{
    position: relative;
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 50%;
    border: 0.0938rem solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 150ms ease, border-color 150ms ease;
  }
.speaker svg{ width: 2.125rem; height: 2.125rem; color: var(--ink-dim); transition: color 150ms ease; }
.speaker.playing{
    border-color: rgba(var(--accent-rgb),0.9);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb),0.5);
  }
.speaker.playing svg{ color: var(--cyan); }
.cct-n-badge{
    display: none;
    align-items: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--cyan);
    background: rgba(var(--accent-rgb), 0.1);
    border: 0.125rem solid rgba(var(--accent-rgb), 0.5);
    border-radius: var(--radius-sm);
    padding: 0.3125rem 0.8125rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
.cct-n-badge.visible{ display: inline-flex; }
.cct-n-badge--stage{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 0.0625rem rgba(var(--accent-rgb),0.3);
  }
.cct-n-badge--top{
    position: absolute;
    top: 0.875rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8854rem;
    padding: 0.3125rem 0.875rem;
    border-width: 0.0625rem;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 3;
  }
@keyframes cctNBadgeTopPulse{
    0%{ transform: translateX(-50%) scale(1); }
    45%{ transform: translateX(-50%) scale(1.12); }
    100%{ transform: translateX(-50%) scale(1); }
  }
@keyframes cctNBadgePulse{
    0%{ transform: translate(-50%, -50%) scale(1.12); }
    100%{ transform: translate(-50%, -50%) scale(1); }
  }
.cct-nback-info{
    position: absolute;
    top: 0.875rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.8646rem;
    color: var(--cyan);
    background: rgba(var(--accent-rgb), 0.12);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.5);
    border-radius: var(--radius-sm);
    padding: 0.3125rem 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }
.ripple{
    position: absolute;
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 50%;
    border: 0.0938rem solid rgba(var(--accent-rgb),0.55);
    opacity: 0;
    pointer-events: none;
  }
.visual-number{
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    min-height: 5.75rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 3.75rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
.visual-number.visible{ display: flex; }
@keyframes visualNumberPulse{
    0%{ transform: scale(1.18); color: var(--cyan); }
    100%{ transform: scale(1); color: var(--ink); }
  }
.ripple.animate{ animation: rippleOut 650ms ease-out; }
@keyframes rippleOut{
    0%{ opacity: 0.7; transform: scale(1); }
    100%{ opacity: 0; transform: scale(1.7); }
  }
.answer-box{
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
.answer-display{
    font-family: var(--display);
    font-size: 2.5rem;
    font-weight: 700;
    min-width: 6.25rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--ink);
    transition: color 150ms ease;
  }
.cct-goal{ width: 100%; max-width: 46rem; box-sizing: border-box; text-align: left; font-size: 0.86rem; line-height: 1.45; color: var(--ink-dim);
    border: 0.0625rem solid var(--panel-border); border-left: 0.1875rem solid rgb(var(--accent-rgb)); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; background: rgba(var(--accent-rgb),0.06); }
.cct-goal b{ color: var(--ink); font-weight: 700; }
.cct-goal[hidden]{ display: none; }
.cct-blocks:not(:empty){ margin-top: 0.75rem; }
.cct-readout{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1.25rem 2rem;
    gap: 1rem 0.25rem;
  }
.cct-cell .label{ font-size: 0.8438rem; color: var(--ink-dim); margin-bottom: 0.375rem; }
.cct-cell .value{ font-family: var(--display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cct-streak-dots{
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.25rem;
  }
.cct-streak-dot{
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 0.0625rem solid var(--panel-border);
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  }
.cct-streak-dot.correct{
    background: var(--ok);
    border-color: var(--ok);
    box-shadow: none;
    transform: scale(1.08);
  }
.cct-streak-dot.incorrect{
    background: var(--bad);
    border-color: var(--bad);
    box-shadow: none;
    transform: scale(1.08);
  }
.keypad{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0 2rem 0.5rem;
  }
.keypad button{
    background: rgba(255,255,255,0.05);
    color: var(--ink);
    border: 0.0625rem solid var(--panel-border);
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 0;
    border-radius: var(--radius-sm);
  }
.keypad button:hover{ box-shadow: none; background: rgba(255,255,255,0.1); transform: none; }
.keypad button.enter{
    background: linear-gradient(var(--cyan), var(--cyan));
    color: #052224;
  }
.cct-alpha-keypad{
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
  }
.cct-alpha-keypad button{
    padding: 0.5rem 0;
    font-size: 0.8854rem;
    text-transform: uppercase;
  }
.cct-footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.625rem 2rem 1.625rem;
  }
@media (max-width: 30em){
.game-view > .footer, .game-view > .cct-footer{ display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: 0.5rem; padding-left: 1rem; padding-right: 1rem; }
.game-view > .footer button, .game-view > .cct-footer button{ padding: 0.5rem 1rem; white-space: nowrap; }
}
.stat-card--clickable{
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, border-color 120ms ease,
                background 120ms ease, box-shadow 120ms ease;
  }
.stat-card--clickable::after{
    content: '\2197';
    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 62.4375rem;
    font-size: 0.8333rem;
    line-height: 1;
    color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.16);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.3);
    opacity: 1;
    transition: background 120ms ease, transform 120ms ease;
  }
.stat-card--clickable:hover,
  .stat-card--clickable:focus-visible{
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.1);
    transform: translateY(-0.125rem);
    box-shadow: none;
  }
.stat-card--clickable:hover::after,
  .stat-card--clickable:focus-visible::after{
    background: rgba(var(--accent-rgb), 0.32);
    transform: scale(1.1);
  }
.stat-card--clickable:active{
    transform: translateY(0);
    background: rgba(var(--accent-rgb), 0.16);
  }
.stat-card-cue{
    display: block;
    margin-top: 0.3125rem;
    font-family: var(--sans);
    font-size: 0.8333rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgb(var(--accent-rgb));
    opacity: 0;
    transition: opacity 120ms ease;
  }
.stat-card--clickable:hover .stat-card-cue,
  .stat-card--clickable:focus-visible .stat-card-cue{ opacity: 1; }
@media (hover: none){
.stat-card-cue{ opacity: 1; }
}
.stat-grid.grouped{
    display: block;
  }
.stat-group + .stat-group{ margin-top: 1.125rem; }
.stat-group-title{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-family: var(--sans);
    font-size: 0.8438rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
  }
.stat-group-cards{ justify-content: flex-start; }
.stat-group-title::after{
    content: '';
    flex: 1;
    height: 0.0625rem;
    background: var(--panel-border);
  }
.stat-group--key .stat-card-value{ font-size: 1.625rem; }
.stat-group--key .stat-card{
    background: rgba(var(--accent-rgb), 0.06);
    border-color: rgba(var(--accent-rgb), 0.22);
  }
:root{ --focus-ring: 0.125rem; }
a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  .game-card:focus-visible,
  .menu-item:focus-visible,
  .stat-card--clickable:focus-visible,
  .profile-card:focus-visible,
  .profile-add-card:focus-visible,
  .seg-btn:focus-visible,
  .pricing-tier:focus-visible,
  .topnav a:focus-visible,
  .modal-close-x:focus-visible{
    outline: var(--focus-ring) solid rgb(var(--accent-rgb));
    outline-offset: 0.1875rem;
    border-radius: var(--radius-sm);
  }
.info-card :focus-visible{ scroll-margin: 0.75rem; }
.stage:focus-visible,
  .cct-stage:focus-visible{ outline: none; }
.cl-dialog-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(4,6,14,0.72);
    backdrop-filter: blur(0.375rem);
    -webkit-backdrop-filter: blur(0.375rem);
    z-index: 400;
  }
.cl-dialog-overlay.visible{ display: flex; }
.cl-dialog{
    width: 100%;
    max-width: 26rem;
    background: var(--bg-1);
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: 0 1.75rem 4rem -1.5rem rgba(0,0,0,0.8);
  }
html[data-theme="light"] .cl-dialog{ background: #eef7f7; }
.cl-dialog-title{
    margin: 0 0 0.5rem;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
  }
.cl-dialog-body{
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-dim);
  }
.cl-dialog-list{
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.875rem;
    list-style: none;
    border: 0.0625rem solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--ink-dim);
  }
.cl-dialog-list li{ display: flex; gap: 0.5rem; align-items: baseline; }
.cl-dialog-list li::before{
    content: '\2022';
    flex: none;
    color: rgb(var(--accent-rgb));
  }
.cl-dialog-actions{
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
.cl-dialog-btn{
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    border-radius: 62.4375rem;
    border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
  }
html[data-theme="light"] .cl-dialog-btn{ background: rgba(42,122,122,0.08); }
.cl-dialog-btn:hover{ background: rgba(255,255,255,0.12); }
html[data-theme="light"] .cl-dialog-btn:hover{ background: rgba(42,122,122,0.16); }
.cl-dialog-btn--danger{
    background: var(--bad);
    border-color: var(--bad);
    color: #1a0b0f;
  }
html[data-theme="light"] .cl-dialog-btn--danger{
    background: var(--bad);
    color: #fff;
  }
.cl-dialog-btn--danger:hover{
    background: #ff5f5f;
    border-color: #ff5f5f;
  }
html[data-theme="light"] .cl-dialog-btn--danger:hover{ background: #b23d4e; }
.toast{ display: flex; align-items: center; gap: 0.5rem; overflow-wrap: anywhere; }
.cl-tab-note{ position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0rem)); transform: translateX(-50%); z-index: 260; display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: calc(100% - 2rem); padding: 0.625rem 0.625rem 0.625rem 1rem; background: var(--bg-1); border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-md); color: var(--ink); font-size: 0.9rem; line-height: 1.4; box-shadow: 0 1rem 2.5rem -1rem rgba(0,0,0,0.6); }
html[data-theme="light"] .cl-tab-note{ background: #eef7f7; }
.cl-tab-note-text{ min-width: 0; }
.cl-tab-note-btn{ flex: none; min-height: 2.5rem; padding: 0 1rem; border-radius: 62.4375rem; border: 0; background: var(--cyan); color: #052224; font-weight: 700; cursor: pointer; }
.cl-tab-note-x{ flex: none; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--ink-dim); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%; }
@media (max-width: 30em){
.cl-tab-note{ flex-wrap: wrap; }
.cl-tab-note-text{ flex: 1 1 100%; }
}
.toast::before{
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 62.4375rem;
    background: rgb(var(--accent-rgb));
    flex: none;
  }
.toast.toast--ok::before{ background: var(--ok); }
.toast.toast--bad::before{ background: var(--bad); }
.menu-group + .menu-group{
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 0.0625rem solid var(--panel-border);
  }
.menu-group-label{
    padding: 0.375rem 0.75rem 0.25rem;
    font-family: var(--sans);
    font-size: 0.8333rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    opacity: 0.8;
  }
.menu-item{
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
.menu-item-icon{
    flex: none;
    width: 1rem;
    height: 1rem;
    color: rgb(var(--accent-rgb));
  }
.menu-item-icon svg{ display: block; width: 100%; height: 100%; }
@media (max-width: 40rem){
button,
    .menu-item,
    .seg-btn,
    .theme-select,
    .modal-close-x,
    .mode-info-btn,
    .profile-card-delete{
      min-height: 2.75rem;
    }
.mode-info-btn,
    .modal-close-x,
    .profile-card-delete,
    .profile-card-dup{ min-width: 2.75rem; }
.stage, .cct-stage{ padding-left: 0.375rem; padding-right: 0.375rem; }
.center-message{ padding-left: 0.5rem; padding-right: 0.5rem; }
.stat-grid{ gap: 0.5rem; }
.stat-card{ padding: 0.75rem 0.75rem 0.8125rem; }
.info-overlay{ padding: 1rem; align-items: center; }
.info-card{
      width: 100%;
      max-height: calc(100vh - 2rem);
      max-height: calc(100dvh - 2rem);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
.cl-dialog{ max-width: 100%; }
.cl-dialog-actions{ flex-direction: column-reverse; }
.cl-dialog-btn{ width: 100%; }
.stat-grid .stat-card{ flex-basis: calc(50% - 0.375rem) !important; }
.stat-group-title{ font-size: 0.8333rem; }
}
@media (max-width: 20rem){
.stat-grid .stat-card{ flex-basis: 100% !important; }
}
.info-card{ padding: 1.75rem; }
.info-card > h2{
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.375rem;
  }
.info-card > * + *{ margin-top: 0.875rem; }
.info-card > .modal-close-x + *{ margin-top: 0; }
.topnav-cta{
    margin-left: 0.75rem;
    padding: 0.5rem 1.125rem;
    border-radius: 62.4375rem;
    border: none;
    background: linear-gradient(var(--cyan), var(--cyan));
    color: #052224;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
  }
.topnav-cta:hover{ filter: brightness(1.08); transform: translateY(-0.0625rem); }
.topnav-cta:active{ transform: translateY(0); }
html[data-theme="light"] .topnav-cta{ color: #f2fbfb; --cyan: #226b6b; }
.nav-icon-menu{ position: relative; flex: none; }
.nav-icon-row{ display: flex; align-items: center; gap: 0.625rem; flex: none; }
.nav-icon-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink);
    opacity: 0.8;
    cursor: pointer;
    transition: color 120ms ease, opacity 120ms ease, transform 120ms ease;
  }
.nav-icon-btn svg{
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    flex: none;
    display: block;
  }
.nav-icon-btn svg *{ stroke-width: 1.7; }
.nav-icon-btn.nav-streak-btn{ width: auto; min-width: 2.5rem; padding: 0 0.45rem; gap: 0.25rem; border-radius: 62rem; }
.nav-streak-btn svg{ width: 1.35rem; height: 1.35rem; min-width: 1.35rem; }
.nav-streak-n{ font-family: var(--sans); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.nav-streak-btn.on svg path{ fill: currentColor; }
.nav-icon-btn:hover{
    color: rgb(var(--accent-rgb));
    opacity: 1;
    transform: translateY(-0.0625rem);
  }
.nav-icon-panel{
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    display: none;
    flex-direction: column;
    z-index: 20;
  }
html[data-theme="light"] .nav-icon-panel{ background: #d4eaea; }
.nav-icon-menu.open .nav-icon-panel{ display: flex; }
.nav-icon-menu.open .nav-icon-btn{
    color: rgb(var(--accent-rgb));
    opacity: 1;
  }
.nav-icon-panel .menu-item{ justify-content: space-between; }
.nav-icon-check{ font-weight: 700; }
@media (max-width: 40rem){
.nav-icon-panel{ right: auto; left: 0; }
.topnav-cta{ min-height: 2.75rem; }
}
#nbackGameView.visible{ display:flex; flex-direction:column; height:calc(100svh - var(--nb-nav-offset, var(--topnav-h, 4.75rem))); margin-top:var(--nb-nav-offset, var(--topnav-h, 4.75rem)); }
#nbackGameView .nbg-stage{ flex:1; height:auto; }
body:has(#nbackGameView.visible){ padding:0; }
body:has(#nbackGameView.visible) .topnav{ display:block; }
body.nb-navhide:has(#nbackGameView.visible) .topnav{ display:none; }
.instrument:has(#nbackGameView.visible){ position:fixed; inset:0; width:100vw; height:100svh; max-width:none; margin:0; border:none; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; clip-path:inset(0); z-index:50; }
.nbg-stage{ position:relative; width:100%; height:100svh; min-height:24rem; overflow:visible; display:grid; grid-template-columns:1fr 3fr 3fr 1fr; grid-template-rows:1fr 6fr 1fr; user-select:none; }
.nbg-persp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:60svmin; overflow:visible; }
#nbackGameView .instrument-head{ position:relative; z-index:5; }
.nbg-scene{ position:absolute; width:60.3svmin; height:60.3svmin; transform-style:preserve-3d; animation:qbspin 97s linear infinite; will-change:transform; translate:0 0 -10svmin; scale:1; }
@keyframes qbspin{ from{transform:rotateX(var(--rsx,0deg)) rotateY(var(--rsy,0deg)) rotateZ(var(--rsz,0deg))} to{transform:rotateX(calc(var(--rsx,0deg) + 360deg)) rotateY(calc(var(--rsy,0deg) + 360deg)) rotateZ(calc(var(--rsz,0deg) + 360deg))} }
.nbg-scene.no-spin{ animation:none; transform:rotateX(var(--rsx,0deg)) rotateY(var(--rsy,0deg)) rotateZ(var(--rsz,0deg)); }
.nbg-frame{ position:absolute; width:100%; height:100%; }
.nbg-cell{ position:absolute; width:20.1svmin; height:20.1svmin; left:20.1svmin; top:20.1svmin; transform-style:preserve-3d; }
@keyframes nbTallyFlash{ 0%{ filter:brightness(2.2); opacity:.35; } 100%{ filter:none; opacity:1; } }
.nb-ext{ display:none; }
#nbStage.ext .nbg-keys{ display:none !important; }
#nbStage.ext .nb-ext{ display:flex; flex-direction:column; align-items:center; gap:0.5rem; grid-column:1 / -1; grid-row:3; z-index:3; padding:0.25rem; }
.nb-tip-pop{ position:fixed; z-index:2000; max-width:min(20rem,90vw); padding:0.6rem 0.75rem; border-radius:0.6rem; background:var(--bg-1); color:var(--ink); border:0.0625rem solid rgba(var(--accent-rgb),0.45); box-shadow:0 0.6rem 1.8rem rgba(0,0,0,0.45); font-size:0.8125rem; line-height:1.45; opacity:0; pointer-events:none; transform:translateY(-0.25rem); transition:opacity .12s ease, transform .12s ease; }
.nb-tip-pop.visible{ opacity:1; pointer-events:auto; transform:none; }
.nb-tip-pop{ white-space:pre-line; overflow-wrap:break-word; }
.nb-keybind-group{ margin:0.9rem 0 0.35rem; font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); }
.nb-keybind-btn.clash{ color:var(--nbg-bad); border-color:var(--nbg-bad); }
.nb-ctext-sm{ font-size:clamp(0.85rem,3.3svmin,1.7rem) !important; letter-spacing:0.01em; }
.nb-perstream .cct-manual-row{ padding-left:0.75rem; }
.nb-ctext{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,6svmin,3rem); color:#fff; text-shadow:0 0.1rem 0.35rem rgba(0,0,0,0.75); pointer-events:none; }
.nb-crosshair{ display:none; position:absolute; left:50%; top:50%; width:1.6rem; height:1.6rem; transform:translate(-50%,-50%); pointer-events:none; z-index:2; }
.nb-crosshair::before,.nb-crosshair::after{ content:''; position:absolute; background:var(--ink-dim); }
.nb-crosshair::before{ left:50%; top:0; bottom:0; width:0.125rem; transform:translateX(-50%); }
.nb-crosshair::after{ top:50%; left:0; right:0; height:0.125rem; transform:translateY(-50%); }
#nbStage.nb-cross .nb-crosshair{ display:block; }
.nbw-keys{ display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:center; max-width:min(52rem,96vw); }
.nbw-key{ position:relative; min-width:5.2rem; padding:0.45rem 0.6rem; border-radius:0.55rem; border:0.0625rem solid var(--panel-border); background:var(--bg-1); color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:0.1rem; cursor:pointer; font-size:0.75rem; }
.nbw-key b{ font-family:var(--display); font-size:1rem; }
.nbw-key.success{ background:rgba(16,185,129,0.3); border-color:#10b981; }
.nbw-key.failure{ background:rgba(244,63,94,0.3); border-color:#f43f5e; }
.nbw-key.late{ background:rgba(59,130,246,0.3); border-color:#3b82f6; }
.nbw-key .nbw-sc{ font-style:normal; font-size:0.6875rem; color:var(--ink-dim); }
.nbw-answer{ font-family:var(--display); font-size:1.1rem; padding:0.2rem 0.8rem; border-radius:0.5rem; }
.nbw-answer.success{ color:#10b981; font-weight:700; }
.nbw-answer.failure{ color:#f43f5e; font-weight:700; }
.nbw-pad{ display:grid; grid-template-columns:repeat(4,2.6rem); gap:0.3rem; }
.nbw-pad button{ height:2.2rem; border-radius:0.45rem; border:0.0625rem solid var(--panel-border); background:var(--bg-1); color:var(--ink); font-family:var(--display); cursor:pointer; }
.nbw-pad button.wide{ grid-column:span 4; }
.nbw-sub{ margin:0.9rem 0 0.25rem; font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); }
.nbw-chiprow{ align-items:flex-start; }
.nb-type-toggle .seg-btn.nb-mode-off{ display:none; }
.nb-mode-chips{ display:flex; flex-wrap:wrap; gap:0.35rem; justify-content:flex-end; }
.nb-mode-chip{ padding:0.25rem 0.6rem; border-radius:62.4375rem; border:0.0625rem solid var(--panel-border); background:transparent; color:var(--ink-dim); font-size:0.75rem; cursor:pointer; }
.nb-mode-chip.on{ color:var(--ink); border-color:rgb(var(--accent-rgb)); background:rgba(var(--accent-rgb),0.14); }
@keyframes nbLvAdvance{ 0%,49.9%{ background:rgba(16,185,129,0.35); box-shadow:0 0 0 0.125rem rgba(16,185,129,0.8); } 50%,100%{ background:transparent; box-shadow:none; } }
@keyframes nbLvFallback{ 0%,49.9%{ background:rgba(244,63,94,0.35); box-shadow:0 0 0 0.125rem rgba(244,63,94,0.8); } 50%,100%{ background:transparent; box-shadow:none; } }
.nb-lv-advance{ animation:nbLvAdvance 1s linear 4; border-radius:0.5rem; }
.nb-lv-fallback{ animation:nbLvFallback 1s linear 4; border-radius:0.5rem; }
.nb-lp-sub{ font-size:0.75rem; color:var(--ink-dim); margin-top:0.35rem; font-variant-numeric:tabular-nums; }
#nbSources.visible{ display:block; }
.nb-vcrank{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; pointer-events:none; z-index:1; }
#nbStage.vtally .nb-vcrank{ display:flex; }
#nbStage.vtally .nbg-persp{ display:none; }
.nb-vgrid{ display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:0.3125rem; width:58svmin; height:58svmin; }
.nb-vcell{ position:relative; flex:0 0 calc((100% - 0.3125rem) / 2); height:calc((100% - 0.3125rem) / 2); }
.nb-dp{ font-weight:700; }
.nb-recent-level{ font-family:var(--display); opacity:0.85; }
.nbg-keys.nb-tk{ display:none; }
#nbStage.tally .nbg-keys:not(.nb-tk){ display:none; }
#nbStage.tally .nbg-keys.nb-tk{ display:flex; }
.nb-tk .nbg-key{ grid-template-rows:auto 1fr; }
.nb-tk .nbg-key b{ font-size:clamp(2rem,5vw,4.2rem); line-height:1; }
.nb-exec-word{ display:none; grid-column:1 / -1; grid-row:1 / -1; align-self:center; justify-self:center; z-index:2; pointer-events:none; font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,9vmin,6.5rem); letter-spacing:0.02em; color:var(--ink); text-shadow:0 0.2rem 1.2rem rgba(0,0,0,0.35); margin-top:-16vh; }
#nbStage.exec .nbg-persp{ display:none; }
#nbStage.exec .nb-exec-word{ display:block; }
.nbg-face{ position:absolute; width:19.94svmin; height:19.94svmin; left:0.08svmin; top:0.08svmin; background-color:var(--nbg-bg); background-image:var(--nbg-shape); background-position:center; background-repeat:no-repeat; background-size:var(--nbg-bgsize,var(--nbg-size,82%) var(--nbg-size,82%)); transition:filter 0.05s ease-out; }
.nbg-tint > .nbg-face, .nbg-face.nbg-tint{ background-image:none; }
.nbg-face::after{ content:''; position:absolute; inset:0; display:none; pointer-events:none; background-color:var(--nbg-tint,transparent); background-image:var(--nbg-tint-img,none); background-size:cover; background-position:center;
    -webkit-mask-image:var(--nbg-mask); mask-image:var(--nbg-mask); -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:var(--nbg-size,82%); mask-size:var(--nbg-size,82%); }
.nbg-face.nb-up{ background-image:none !important; overflow:hidden; }
.nb-upimg{ position:absolute; inset:0; pointer-events:none; transition:none; background-image:var(--nbg-shape); background-position:center; background-repeat:no-repeat;
    background-size:var(--nbg-bgsize,var(--nbg-size,82%) var(--nbg-size,82%)); }
.sprite .nbg-face, .nbg-face.sprite{ background-image:none; }
.nb-ctext{ z-index:1; }
.nbg-pause{ position:absolute; inset:0; z-index:4; display:none; align-items:center; justify-content:center; flex-direction:column; gap:.75rem; background:rgba(8,12,20,.97); color:#fff; text-align:center; }
.nbg-pause.visible{ display:flex; }
.nbg-pause b{ font-family:var(--display); font-size:clamp(1.8rem,5vw,3rem); }
.nbg-pause span{ color:rgba(255,255,255,.7); }
.nb-badge{ display:inline-block; padding:.2rem .8rem; border-radius:62.4375rem; font-size:.8rem; font-weight:700; color:#052224; background:linear-gradient(var(--cyan), var(--cyan)); }
.nb-detail{ margin-top:.35rem; font-size:.78rem; color:var(--ink-dim); font-variant-numeric:tabular-nums; line-height:1.4; }
.nb-strip{ display:flex; gap:0.0625rem; margin-top:.5rem; height:.4rem; }
.nb-strip i{ flex:1 1 0; min-width:0.0625rem; border-radius:0.0625rem; background:rgba(128,128,128,.28); }
.nb-strip i.h, .nb-legend i.h{ background:#3fd9c7; }
.nb-strip i.m, .nb-legend i.m{ background:#f0b040; }
.nb-strip i.f, .nb-legend i.f{ background:#ff5a6a; }
.nb-rec{ max-width:34rem; text-align:center; font-size:.95rem; color:var(--ink); line-height:1.45; }
.nb-rec .dim{ color:var(--ink-dim); }
.nb-next{ list-style:none; margin:0.75rem auto 0; padding:0.6rem 0.8rem; max-width:34rem; display:grid; gap:0.35rem; text-align:left; font-size:0.8125rem; line-height:1.45; color:var(--ink-dim); border:0.0625rem solid var(--panel-border); border-radius:0.625rem; background:rgba(var(--accent-rgb),0.05); }
.nb-next b{ color:var(--ink); font-weight:600; }
.nbd-stats .nb-next{ flex:1 1 100%; margin:0.15rem 0 0; max-width:none; }
.nb-blocks{ margin-top:0.9rem; }
.nb-blocks:empty{ display:none; }
.nb-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 1rem; font-size:.75rem; color:var(--ink-dim); }
.nb-legend i{ display:inline-block; width:.6rem; height:.6rem; border-radius:0.125rem; margin-right:.3rem; vertical-align:baseline; }
.nb-progress{ background:var(--panel); border:0.0625rem solid var(--panel-border); border-radius:var(--radius-md); padding:.9rem 1rem; margin:1rem 0; }
.nb-float{ position:absolute; top:0.75rem; right:0.75rem; z-index:3; display:flex; align-items:center; }
.nb-hbtn{ height:2.5rem; padding:0 0.75rem; display:inline-flex; align-items:center; justify-content:center; gap:0.375rem; border-radius:0.5rem; border:none; background:rgba(var(--accent-rgb),0.14); color:var(--ink); font-family:var(--sans); font-size:0.8125rem; font-weight:600; line-height:1; cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; }
.nb-hbtn svg{ width:1rem; height:1rem; flex:none; }
.nb-hbtn--icon{ width:2.5rem; min-width:2.5rem; padding:0; }
.nb-hbtn--icon svg{ width:1.25rem; height:1.25rem; }
.nb-hbtn:hover{ transform:none; box-shadow:none; background:rgba(var(--accent-rgb),0.24); }
.game-back-arrow{ display:none; position:fixed; top:calc(var(--topnav-h, 4.75rem) + 0.75rem); left:1rem; z-index:60; }
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible) .game-back-arrow{ display:inline-flex; }
@media (max-width: 62rem){
.game-back-arrow{ display:none !important; }
}
.home-back-btn{
    display:none; position:fixed; top:calc(var(--topnav-h, 4.75rem) + 0.75rem); left:1rem; z-index:60;
    align-items:center; gap:0.375rem;
    background:none; border:none; border-radius:62.4375rem;
    padding:0.5rem 0.75rem;
    color:var(--ink-dim); font-family:var(--sans); font-size:0.9375rem; font-weight:600; line-height:1;
    cursor:pointer; white-space:nowrap;
    transition:color 120ms ease;
  }
.home-back-btn svg{ width:1rem; height:1rem; flex:none; }
.home-back-btn:hover{ color:var(--ink); }
@media (min-width: 70rem){
body:has(:is(#homeView,#cctHomeView,#nbackHomeView).visible) .home-back-btn{ display:inline-flex; }
body:has(:is(#homeView,#cctHomeView,#nbackHomeView).visible) :is(#backToGamesLink,#cctBackToGamesLink){ display:none; }
}
.instrument-head .meta .meta-timer#nbTimer.over{ color:#ff4d5a; opacity:1; animation:metaTimerPulse 0.6s ease-in-out 2; }
html[data-theme="light"] .instrument-head .meta .meta-timer#nbTimer.over{ color:#c8102e; }
#nbackGameView .instrument-head .meta .meta-timer,
  #nbackGameView .instrument-head .meta .meta-count{
    height:2.5rem;
    padding:0 1rem;
    gap:0.5rem;
    border-radius:0.625rem;
    font-size:1rem;
  }
#nbackGameView .instrument-head .meta .meta-timer::before{ width:1.25rem; height:1.25rem; }
.nb-float{ gap:1.25rem; }
.nb-float.running .nb-play{ border-radius:0.5rem; border:none; background:rgba(var(--accent-rgb),0.14); color:var(--ink); }
.nb-nlevel{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; font-family:var(--display); font-weight:800; font-size:clamp(5.544rem,26.928svmin,17.424rem); line-height:1; color:var(--ink); opacity:0.75; user-select:none; z-index:2; -webkit-text-stroke:0.03em var(--bg-0); paint-order:stroke fill; }
.nb-nlevel.visible{ display:flex; }
#nbSettingsBtn.active{ background:rgba(var(--accent-rgb),0.30); }
#nbDrawer{ position:fixed; top:var(--nb-nav-offset, var(--topnav-h, 4.75rem)); bottom:0; z-index:65; }
.nbg-scene.flat{ animation:none; transform:none; translate:0 -2.4rem 0; scale:1.28; }
.nbg-scene.flat .nb-ctext{ transform:var(--rb-inv,none); }
#nbStage.tally .nb-nlevel{ translate:0 0; }
.nbg-stage:has(.nbg-scene.flat) .nb-nlevel{ translate:0 -2.4rem; }
.nb-drawer{ position:absolute; top:3.75rem; left:0; bottom:0; z-index:6; width:min(28rem,92vw); box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; color:var(--ink); transform:translateX(-102%); visibility:hidden; }
.nb-drawer.open{ transform:none; visibility:visible; }
.nbd-head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--display); border-bottom:0.0625rem solid var(--panel-border); }
.nbd-icon-btn{ padding:0; flex:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.nbd-icon-btn:hover{ transform:none; box-shadow:none; }
.nbd-icon-btn svg{ width:1.05rem; height:1.05rem; }
.nbd-ico-sun{ display:none; }
.nb-drawer.is-light .nbd-ico-sun{ display:block; }
.nb-drawer.is-light .nbd-ico-moon{ display:none; }
.nbd-note{ margin:0 0 0.8rem; color:var(--ink-dim); }
.nbd-preset{ display:flex; align-items:center; }
.nbd-mode{ flex:1; text-align:center; border-radius:0.5rem; font-family:var(--display); font-weight:700; }
.nbd-label{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; color:var(--ink-dim); }
.nbd-label b{ font-family:var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.nbd-label b[hidden]{ display:none; }
.nbd-num{ width:4.25rem; padding:0.2rem 0.4rem; border-radius:0.375rem; border:0.0625rem solid var(--panel-border); background:var(--bg-1); color:var(--ink); font-family:var(--display); font-weight:600; font-size:0.875rem; text-align:right; font-variant-numeric:tabular-nums; }
.nbd-num:focus{ outline:none; border-color:rgb(var(--accent-rgb)); }
.nbd-stats{ display:flex; flex-wrap:wrap; gap:0.35rem 1rem; font-size:0.8125rem; color:var(--ink-dim); margin-bottom:0.75rem; }
.nbd-stats b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.nbd-btn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.5rem; }
.nbd-btn-grid button{ width:100%; padding:0.45rem 0.5rem; font-size:0.8125rem; }
.nbd-btn-grid.is-locked button{ opacity:0.45; }
#nbDrawer .nbd-btn-grid:has(> .nbd-bi){ grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr)); }
#nbDrawer .nbd-bi{ display:flex; align-items:center; gap:0.5rem; min-width:0; }
#nbDrawer .nbd-bi > button{ flex:1 1 auto; width:auto; min-width:0; }
#nbDrawer .nbd-bi > .nbd-info{ flex:none; margin-left:0; }
@media (pointer:coarse){
#nbDrawer .nbd-bi > .nbd-info::after{ inset:-0.6rem -0.45rem; }
}
:is(#nbDrawer,#nbackHomeView) .nb-seq-row label{ width:auto; min-width:2.75rem; white-space:nowrap; }
.nbd-danger{ color:var(--nbg-bad) !important; border-color:rgba(244,63,94,0.45) !important; }
.nbd-hint{ margin-top:0.75rem; font-size:0.75rem; }
.nbd-info{ display:inline; position:relative; margin-left:0.4rem; padding:0 0 0 0.64em; letter-spacing:0.64em; box-sizing:border-box; border:0.0625rem solid var(--ink-dim); border-style:none; border-radius:50%; font-weight:700; font-style:normal; line-height:1rem; cursor:help; }
.nbd-info::before{ content:''; position:absolute; left:50%; top:50%; width:inherit; height:inherit; box-sizing:border-box; border:0.0625rem solid; border-color:inherit; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.nbd-info:focus-visible{ outline:none; }
.nbd-info:focus-visible::before{ outline:var(--focus-ring) solid rgb(var(--accent-rgb)); outline-offset:0.125rem; }
@media (pointer:coarse){
:is(#nbDrawer,#nbackHomeView) .nbd-info{ position:relative; }
:is(#nbDrawer,#nbackHomeView) .nbd-info::after{ content:''; position:absolute; inset:-0.6rem -0.75rem; }
.nb-drawer .nbd-info::after{ content:''; position:absolute; inset:-0.5rem 0 -0.5rem -0.6rem; }
html body :is(.nb-drawer,#nbackHomeView) :not(.nbd-bi, .cl-share-line) > .nbd-info.nbd-info::after{ inset:auto; left:50%; top:50%; width:2.5rem; height:2.5rem; transform:translate(-50%,-50%); }
html body :is(.nb-drawer,#nbackHomeView) .nbd-label :not(.nbd-bi, .cl-share-line) > .nbd-info.nbd-info::after{ top:calc(50% - 0.95rem); height:1.75rem; transform:translateX(-50%); }
html body :is(.nb-drawer,#nbackHomeView) .cl-share-line > .nbd-info.nbd-info::after{ inset:auto; left:-0.5rem; right:auto; top:50%; width:2.5rem; height:2.5rem; transform:translateY(-50%); }
html body #nbDrawer .nbd-bi{ gap:1.1rem; }
html body #nbDrawer .nbd-bi > .nbd-info.nbd-info::after{ inset:auto; left:-0.95rem; top:50%; width:2.45rem; height:2.5rem; transform:translateY(-50%); }
}
.nb-drawer input[type="range"]{ -webkit-appearance:none; appearance:none; display:block; width:100%; border-radius:62.4375rem; background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) var(--fill,0%),rgba(128,128,128,0.28) var(--fill,0%),rgba(128,128,128,0.28) 100%); outline:none; cursor:pointer; }
.nb-drawer input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:1rem; height:1rem; border-radius:50%; background:rgb(var(--accent-rgb)); box-shadow:none; cursor:pointer; }
.nb-drawer input[type="range"]::-moz-range-track{ height:0.25rem; border-radius:62.4375rem; background:rgba(128,128,128,0.28); }
.nb-drawer input[type="range"]::-moz-range-progress{ height:0.25rem; border-radius:62.4375rem; background:linear-gradient(var(--cyan), var(--cyan)); }
.nb-drawer input[type="range"]::-moz-range-thumb{ width:1rem; height:1rem; border:none; border-radius:50%; background:rgb(var(--accent-rgb)); box-shadow:none; cursor:pointer; }
.nbd-row{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; color:var(--ink-dim); }
.nbd-row .seg-toggle{ flex:none; }
.nbd-row kbd{ font-family:var(--display); padding:0 0.3rem; border:0.0625rem solid var(--panel-border); border-radius:0.25rem; color:var(--ink-dim); }
.nbd-sep{ height:0.0625rem; background:var(--panel-border); }
.nbd-lock.is-locked{ opacity:0.4; }
.nb-drawer input:disabled{ cursor:not-allowed; }
.nb-drawer.nbd-page{ position:fixed; top:var(--topnav-h,4.75rem); z-index:65; width:min(28rem,92vw); }
.nbd-page .time-picker{ flex-wrap:nowrap; gap:0.5rem; margin-top:0.45rem; }
.nbd-page .time-picker-col{ flex:1 1 0; gap:0.3rem; }
.nbd-page .time-picker-label{ font-size:0.68rem; }
.nbd-page .time-stepper{ gap:0.15rem; padding:0.2rem; }
.nbd-page .time-stepper-btn{ width:1.6rem; height:2rem; font-size:1.15rem; }
.nbd-page .time-stepper-select{ height:2rem; font-size:0.95rem; padding:0 0.9rem 0 0.25rem; background-position:calc(100% - 0.6rem) center, calc(100% - 0.35rem) center; }
.nbd-page .time-stepper-btn:disabled, .nbd-page .time-stepper-select:disabled{ cursor:not-allowed; }
@media (max-width:30rem){
.nbd-page .time-stepper-btn{ width:1.25rem; }
}
.ih-left{ display:flex; align-items:center; gap:0.75rem; min-width:0; }
.instrument-head .dr-toggle{ width:2rem; min-width:2rem; height:2rem; flex:none; }
.instrument-head .dr-toggle svg{ width:1.05rem; height:1.05rem; }
.dr-toggle.active{ background:rgba(var(--accent-rgb),0.30); }
.game-settings-toggle{ display:none; position:fixed; top:calc(var(--topnav-h, 4.75rem) + 0.75rem); left:4rem; z-index:60; }
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView).visible) .game-settings-toggle[data-drawer="posner"],
  body:has(#cctGameView.visible) .game-settings-toggle[data-drawer="cct"]{ display:inline-flex; }
@media (max-width: 62rem){
.game-settings-toggle{ display:none !important; }
}
@media not all and (max-width: 62rem){
.instrument-head .dr-toggle{ display:none; }
}
.nbd-head-btns{ display:inline-flex; gap:0.4rem; }
.nbd-h{ font-family:var(--display); text-transform:uppercase; }
.nb-drawer select:disabled{ cursor:not-allowed; }
.nb-drawer{
    padding:1.25rem 1.5rem 2.5rem;
    background:var(--bg-1);
    border:none; border-right:0.0625rem solid var(--panel-border);
    border-radius:0 1rem 0 0;
    box-shadow:1.5rem 0 3rem -1rem rgba(0,0,0,0.5);
    scrollbar-width:thin; scrollbar-color:rgba(128,128,128,0.35) transparent;
    transition:transform 220ms cubic-bezier(0.2,0.8,0.2,1), visibility 0s linear 220ms;
  }
.nb-drawer.open{ transition:transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
@media (prefers-reduced-motion:reduce){
.nb-drawer, .nb-drawer.open{ transition:none; }
}
.nb-drawer::-webkit-scrollbar{ width:0.375rem; }
.nb-drawer::-webkit-scrollbar-thumb{ background:rgba(128,128,128,0.35); border-radius:62.4375rem; }
.nbd-head{ font-weight:650; letter-spacing:-0.01em; padding-bottom:1rem; margin-bottom:1.25rem; }
.nbd-icon-btn{ width:2rem; height:2rem; border-radius:0.625rem; background:transparent; border:0.0625rem solid var(--panel-border); color:var(--ink-dim); transition:color 120ms ease, background 120ms ease, border-color 120ms ease; }
.nbd-icon-btn:hover{ background:rgba(128,128,128,0.14); color:var(--ink); }
.nbd-note{ border:none; border-radius:0.625rem; background:rgba(var(--accent-rgb),0.07); padding:0.6rem 0.8rem; line-height:1.5; }
.nbd-preset{ gap:0.25rem; margin-bottom:0.5rem; padding:0.25rem; border-radius:0.75rem; background:rgba(128,128,128,0.09); border:0.0625rem solid var(--panel-border); }
.nbd-preset .nbd-icon-btn{ border-color:transparent; }
.nbd-preset .nbd-icon-btn:hover{ background:rgba(128,128,128,0.18); }
.nbd-mode{ border:none; background:transparent; padding:0.4rem 0.25rem; letter-spacing:0.16em; }
.nbd-h{ display:flex; align-items:center; gap:0.75rem; margin:1.75rem 0 0.75rem; font-weight:600; letter-spacing:0.14em; color:var(--ink-dim); }
.nbd-h::after{ content:""; flex:1; height:0.0625rem; background:var(--panel-border); }
.nbd-sep{ margin:1.25rem 0; }
.nbd-sep:has(+ .nbd-h){ display:none; }
.nbd-field{ margin-bottom:1.125rem; }
.nbd-label b{ font-weight:650; }
.nbd-row{ padding:0.5rem 0; }
.nbd-info{ border-color:currentColor; opacity:0.6; }
.nb-drawer input[type="range"]{ height:0.1875rem; margin:0.75rem 0 0.375rem; }
.nb-drawer input[type="range"]::-webkit-slider-thumb{ width:0.9rem; height:0.9rem; background:#fff; box-shadow:0 0 0 0.25rem rgba(var(--accent-rgb),0.25), 0 0.0625rem 0.25rem rgba(0,0,0,0.4); }
.nb-drawer input[type="range"]::-moz-range-thumb{ width:0.9rem; height:0.9rem; background:#fff; box-shadow:0 0 0 0.25rem rgba(var(--accent-rgb),0.25), 0 0.0625rem 0.25rem rgba(0,0,0,0.4); }
.nb-drawer .seg-toggle{ gap:0; padding:0.1875rem; border-radius:0.625rem; background:rgba(128,128,128,0.12); border:0.0625rem solid var(--panel-border); }
.nb-drawer .seg-btn{ border:none; background:transparent; border-radius:0.4375rem; color:var(--ink-dim); }
.nb-drawer .seg-btn:hover{ color:var(--ink); }
.nb-drawer .seg-btn.selected{ background:rgba(var(--accent-rgb),0.2); color:var(--ink); box-shadow:inset 0 0 0 0.0625rem rgba(var(--accent-rgb),0.4); }
.nb-drawer .nbd-btn{ border-radius:0.625rem; font-weight:600; transition:background 120ms ease, border-color 120ms ease; }
.nb-drawer .nbd-btn:hover:not(:disabled){ border-color:rgba(var(--accent-rgb),0.45); }
.nbd-row + .nbd-field{ margin-top:0.625rem; }
.nbd-field + .nbd-row{ margin-top:0.25rem; }
.nb-drawer .time-picker-label{ letter-spacing:0.1em; }
.nb-drawer .time-stepper{ background:rgba(128,128,128,0.1); border-radius:0.625rem; }
.nb-drawer .time-stepper-select{ background-color:rgba(128,128,128,0.14); border-color:transparent; }
.nb-drawer .time-stepper-select:hover{ border-color:rgba(var(--accent-rgb),0.45); }
.nb-drawer.nbd-page{ width:min(30rem,92vw); }
.nbd-head{ font-size:1.25rem; }
.nbd-label, .nbd-row, .nbd-label b{ font-size:0.96rem; }
.nbd-h{ font-size:0.75rem; }
.nbd-note{ font-size:0.84rem; }
.nbd-mode{ font-size:0.9rem; }
.nbd-info{ width:1.05rem; height:1.05rem; font-size:0.68rem; }
.nbd-row kbd{ font-size:0.78rem; }
.nbd-row .seg-toggle{ width:9rem; }
.nbd-page .nbd-row .seg-toggle{ width:13rem; }
.nb-drawer .seg-btn{ font-size:0.9rem; padding:0.45rem 0.25rem; }
.nb-drawer .nbd-btn{ font-size:0.9rem; }
.nb-drawer .time-picker-label{ font-size:0.7rem; }
.nb-drawer .time-stepper-select{ font-size:1.05rem; }
.nbd-btn{ flex:none; background:rgba(128,128,128,0.16); color:var(--ink); border:0.0625rem solid var(--panel-border); border-radius:0.5rem; padding:0.4rem 0.9rem; font-family:var(--sans); font-size:0.85rem; cursor:pointer; }
.nbd-btn:hover:not(:disabled){ background:rgba(var(--accent-rgb),0.18); }
.nbd-btn:disabled{ cursor:not-allowed; }
.nb-float .nb-play{ box-sizing:border-box; width:calc(2.2em + 4rem); padding:0.55rem 0; text-align:center; font-size:clamp(1.1rem,2.6vw,1.75rem); white-space:nowrap; }
#manualPanel, #cctManualPanel, #nbClassicOpts, #nbManualPanel{ display:none !important; }
#relSummaryView .cct-stage{ height:auto; min-height:18.75rem; margin-top:0.75rem; margin-bottom:0.75rem; }
#relSummaryView .center-message--summary{ position:relative; inset:auto; width:100%; overflow-y:visible; }
#nbackSummaryView .cct-stage{ height:auto; min-height:18.75rem; margin-top:0.75rem; margin-bottom:0.75rem; }
#nbackSummaryView .center-message--summary{ position:relative; inset:auto; width:100%; overflow-y:visible; }
.nb-drawer select.manual-select{
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 0.0625rem solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.4375rem 1.875rem 0.4375rem 0.625rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.875rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: calc(100% - 1rem) center, calc(100% - 0.6875rem) center;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 0.375rem;
  }
.nb-drawer select.manual-select option{ background: var(--bg-1); color: var(--ink); }
.nb-drawer select.manual-select:hover{ border-color: rgba(var(--accent-rgb),0.6); }
.nb-drawer select.manual-select:focus{ outline: none; border-color: rgb(var(--accent-rgb)); box-shadow: none; }
.nb-drawer select.manual-select:disabled{ opacity: 0.45; cursor: not-allowed; }
#nbToggles.visible{ display:block; }
#nbTallyOpts.visible{ display:block; }
#nbAutoOpts.visible{ display:block; }
#nbPatternSourceRow.visible{ display:flex; }
#nbPosSeqOpts.visible{ display:flex; }
#nbdPatternSourceField{ display:none; }
#nbdPatternSourceField.visible{ display:block; }
#nbdPosSeqOpts{ display:none; }
#nbdPosSeqOpts.visible{ display:flex; }
.nb-seq-rows{ display:flex; flex-direction:column; gap:0.5rem; width:100%; }
.nb-seq-row{ display:flex; align-items:center; gap:0.75rem; }
.nb-seq-row label{ flex-shrink:0; width:2.75rem; font-size:0.8125rem; color:var(--ink-dim); }
.nb-seq-row input[type="range"]{ flex:1; }
.nb-keybind-grid{ display:flex; flex-direction:column; gap:0.625rem; }
.nb-keybind-row{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; }
.nb-keybind-row > span{ font-size:0.9rem; }
.nb-keybind-btn{ min-width:6.5rem; padding:0.4rem 0.9rem; border-radius:0.5rem; border:0.0625rem solid var(--panel-border); background:var(--bg-1); color:var(--ink); font-family:var(--display); font-weight:600; letter-spacing:0.02em; cursor:pointer; text-align:center; }
.nb-keybind-btn:hover{ border-color:rgb(var(--accent-rgb)); }
.nb-keybind-btn.listening{ color:var(--ink-dim); font-weight:400; font-style:italic; border-color:var(--nbg-warn); animation:nbKeybindPulse 1s ease-in-out infinite; }
@keyframes nbKeybindPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
.nb-keybind-reset{ margin-top:0.25rem; }
.nb-keybind-overlay .progress-graph-modal{ width:min(26rem,100%); }
.nb-recent-overlay .progress-graph-modal{ width:min(56rem,100%); max-height:min(38rem,90vh); }
.nb-recent-table-wrap{ flex:1; overflow:auto; min-height:8rem; }
.nb-recent-table{ width:100%; border-collapse:collapse; font-size:0.8125rem; }
.nb-recent-table th{ position:sticky; top:0; background:var(--bg-1); text-align:left; font-weight:600; color:var(--ink-dim); padding:0.5rem 0.5rem; border-bottom:0.0625rem solid var(--panel-border); white-space:nowrap; }
.nb-recent-table td{ padding:0.4375rem 0.5rem; border-bottom:0.0625rem solid rgba(128,128,128,0.12); white-space:nowrap; color:var(--ink); }
.nb-recent-table th.center, .nb-recent-table td.center{ text-align:center; }
.nb-recent-pct{ display:inline-block; min-width:2.75rem; padding:0.125rem 0.375rem; border-radius:0.375rem; font-weight:600; font-size:0.75rem; }
.nb-recent-pct--great{ background:rgba(34,197,94,0.22); color:var(--nbg-ok); }
.nb-recent-pct--good{ background:rgba(163,230,53,0.2); color:#84cc16; }
.nb-recent-pct--warn{ background:rgba(250,204,21,0.2); color:var(--nbg-warn); }
.nb-recent-pct--bad{ background:rgba(244,63,94,0.18); color:var(--nbg-bad); }
.nb-recent-pct--none{ color:var(--ink-dim); background:none; }
.nb-recent-status{ display:inline-block; padding:0.125rem 0.5rem; border-radius:0.375rem; font-size:0.75rem; font-weight:600; color:#fff; }
.nb-recent-status--completed{ background:var(--nbg-ok); }
.nb-recent-status--cancelled{ background:var(--nbg-bad); }
.nb-recent-hide-status .nb-recent-table th:last-child, .nb-recent-hide-status .nb-recent-table td:last-child{ display:none; }
.nb-recent-empty{ color:var(--ink-dim); font-size:0.875rem; text-align:center; padding:2rem 1rem; }
.nb-pc-overlay .progress-graph-modal{ width:min(60rem,100%); }
.nb-pc-wrap{ width:100%; overflow-x:auto; position:relative; }
.nb-std-next{ position:absolute; left:50%; bottom:6.5rem; transform:translateX(-50%); z-index:5; }
.nb-pc-style{ width:auto !important; margin-right:0.5rem; font-size:0.8125rem; }
.nb-pc-tip{ display:none; position:absolute; pointer-events:none; background:var(--bg-1); border:0.0625rem solid var(--panel-border); border-radius:0.5rem; padding:0.5rem 0.65rem; font-size:0.75rem; color:var(--ink); box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.35); white-space:nowrap; z-index:2; }
.nb-pc-tip-h{ font-weight:600; margin-bottom:0.3rem; }
.nb-pc-wrap svg{ display:block; width:100%; min-width:32rem; height:auto; }
.nb-pc-legend{ display:flex; flex-wrap:wrap; gap:0.35rem 1rem; font-size:0.8125rem; color:var(--ink-dim); margin:0 0 0.5rem; }
.nb-pc-legend i{ display:inline-block; width:0.9rem; height:0.2rem; border-radius:0.1rem; vertical-align:middle; margin-right:0.35rem; }
.nb-pc-note{ font-size:0.75rem; color:var(--ink-dim); margin-top:0.5rem; }
.nb-recent-filter{ display:flex; align-items:center; gap:0.5rem; font-size:0.8125rem; color:var(--ink-dim); }
.nbg-keys{ z-index:2; display:flex; flex-direction:column; gap:0.5rem; justify-content:space-around; padding:0.25rem; }
.nbg-keys.l{ grid-column:1; grid-row:2; padding-right:2rem; }
.nbg-keys.r{ grid-column:4; grid-row:2; padding-left:2rem; }
.nbg-key{ flex:1; display:grid; grid-template-rows:auto auto 1fr; align-items:center; justify-items:center; border-radius:var(--radius-md); border:0.0625rem solid var(--panel-border); background:var(--panel); color:var(--ink); cursor:pointer; padding:0.5rem; font-family:var(--display); font-size:clamp(2rem,6vw,5rem); font-weight:700; }
.nbg-key small{ font-size:clamp(0.8rem,1.6vw,1.25rem); font-weight:500; }
.nbg-key .sc{ font-size:clamp(0.75rem,1.4vw,1.1rem); font-weight:500; min-height:1.2em; }
.nbg-key.warm:not(.off){ opacity:.5; }
.nbg-key.success{ background:var(--nbg-ok); color:#052e16; }
.nbg-key.failure{ background:var(--nbg-bad); color:#3f0715; }
.nbg-key.late{ background:var(--nbg-warn); color:#422006; }
html[data-theme="light"] .nbg-key.success{ background:var(--nbg-ok); color:#fff; }
html[data-theme="light"] .nbg-key.failure{ background:var(--nbg-bad); color:#fff; }
html[data-theme="light"] .nbg-key.late{ background:var(--nbg-warn); color:#fff; }
.nbg-left{ grid-column:4; grid-row:3; z-index:2; display:flex; align-items:center; justify-content:center; font-size:clamp(1.5rem,4vw,3.5rem); opacity:.3; font-family:var(--display); }
.nbg-toggles{ display:none; }
@media (max-width:43.75rem){
.nbg-stage{ grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; }
.nbg-keys.l{ grid-column:1; grid-row:3; flex-direction:row; padding:.25rem; height:6rem; }
.nbg-keys.r{ grid-column:2; grid-row:3; flex-direction:row; padding:.25rem; height:6rem; }
.nbg-left{ grid-row:1; grid-column:1; justify-content:flex-start; padding-left:1rem; }
}
@media (pointer: coarse){
button.lp-chip{ min-height: 2.5rem; }
.game-card .mode-info-btn::after{ content: ""; position: absolute; inset: -0.55rem; border-radius: 50%; }
}
[hidden]{ display: none !important; }
#homeView, #cctHomeView, #nbackHomeView{ display: none !important; }
.game-streak{ margin: 0 0 0 0.75rem; padding: 0.25rem 0.625rem; border-radius: 62.4375rem; font-size: 0.8125rem; font-weight: 600;
    background: rgba(var(--accent-rgb),0.1); color: var(--ink); white-space: nowrap; }
.game-streak:empty{ display: none; }
.game-menu-corner{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); right: 1rem; z-index: 60; }
.game-menu-corner .game-menu{ display: none; }
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView).visible) .game-menu--posner,
  body:has(#cctGameView.visible) .game-menu--cct,
  body:has(:is(#nbackGameView,#nbackSummaryView).visible) .game-menu--nback{ display: block; }
body:has(.page-overlay.visible) .game-menu-corner{ display: none; }
#nbackGameView .instrument-head > .ih-left{ margin-right: auto; }
#nbackGameView .instrument-head > .game-menu{ margin-left: 0.25rem; }
@media (max-width: 48em){
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible) .instrument{ margin-top: 2.75rem; }
}
.drawer-share{ margin-top: 1.25rem; padding-top: 1rem; border-top: 0.0625rem solid var(--panel-border); }
button.drawer-share-btn{ width: 100%; }
select.nbd-mode-select{
    flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center;
    background: none; border: none; color: var(--ink); cursor: pointer;
    font-family: var(--display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
  }
select.nbd-mode-select option{ background: var(--bg-1); color: var(--ink); text-transform: none; letter-spacing: 0; }
select.nbd-mode-select:focus-visible{ outline: 0.125rem solid var(--cyan); outline-offset: 0.125rem; border-radius: 0.375rem; }
.cct-ict-pad{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0 1.5rem 1.25rem; }
.cct-ict-pad button{ height: 3.5rem; font-size: 1.0625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.cct-ict-pad button[data-ict="nomatch"]{ background: rgba(255,255,255,0.06); color: var(--ink); border: 0.0625rem solid var(--panel-border); }
.cct-ict-pad kbd{ font-family: var(--sans); font-size: 0.8125rem; opacity: 0.7; }
html[data-theme="light"] .cct-ict-pad button[data-ict="nomatch"]{ background: rgba(255,255,255,0.5); border-color: rgba(42,122,122,0.3); }
@media (max-width: 48em), (pointer: coarse){
.cct-ict-pad{ gap: 0.625rem; padding: 0 1rem 1rem; }
.cct-ict-pad button{ height: 4.5rem; font-size: 1.25rem; border-radius: 1rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cct-ict-pad kbd{ display: none; }
}
.cct-ict-bg{ position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; background: #000; opacity: 0; pointer-events: none; }
.cct-ict-bg::before, .cct-ict-bg::after{ content: ''; position: absolute; background-image: var(--ict-img); background-position: center; background-repeat: no-repeat; }
.cct-ict-bg::after{ inset: 0; background-size: contain; }
@media (min-width: 64em){
.instrument:has(#cctGameView.visible){ zoom: 1.1; }
}
.cct-dir-badge{
    position: absolute; top: 0.875rem; left: 50%; transform: translateX(-50%); z-index: 2;
    padding: 0.25rem 0.75rem; border-radius: 62.4375rem;
    background: rgba(var(--accent-rgb),0.14); border: 0.0625rem solid rgba(var(--accent-rgb),0.4);
    font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--ink);
    opacity: 0; pointer-events: none;
  }
@keyframes cctDirPulse{ 0%{ transform: translateX(-50%) scale(1.18); color: var(--cyan); } 100%{ transform: translateX(-50%) scale(1); color: var(--ink); } }
select.manual-select{ color-scheme: dark; }
html[data-theme="light"] select.manual-select{ color-scheme: light; }
select.manual-select option{ background: var(--bg-1); color: var(--ink); font-weight: 500; }
select.manual-select optgroup{ background: var(--bg-0); color: var(--ink-dim); font-style: normal; font-weight: 700; font-size: 0.8125rem; }
select.manual-select option:checked{ background: rgba(var(--accent-rgb),0.35); color: var(--ink); }
.nbd-mine-btns{ display: flex; gap: 0.375rem; }
.nbd-mine-btns button{ padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.game-streak{ display: none !important; }
html[data-theme="light"] .cct-menu-panel{ background: #d4eaea; }
html[data-theme="light"] .cct-menu-panel .menu-item{ color: #1a2b2b; }
html[data-theme="light"] .cct-menu-panel .menu-item-icon{ color: #1f5f5f; }
html[data-theme="light"] .cct-menu-panel .menu-item:hover{ background: rgba(42,122,122,0.14); }
html[data-theme="light"] .cct-menu-panel .menu-group-label{ color: #3a5a5a; }
html[data-theme="light"] .cct-menu-panel .menu-group + .menu-group, html[data-theme="light"] .cct-menu-panel hr{ border-color: rgba(42,122,122,0.25); }
html[data-theme="light"] .game-menu .cct-menu-btn{ color: #1a2b2b; border-color: rgba(42,122,122,0.35); }
.nb-rb-moves{ display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.nb-rb-moves .nb-mode-chip{ font-size: 0.8125rem; padding: 0.3125rem 0.75rem; }
html[data-theme="light"] .nb-rb-moves .nb-mode-chip{ border-color: rgba(42,122,122,0.35); color: #2f4a4a; }
html[data-theme="light"] .nb-rb-moves .nb-mode-chip.on{ border-color: #2a7a7a; background: rgba(42,122,122,0.14); color: #1a2b2b; }
#aboutOverlay .about-founder{ text-align: center; }
.about-founder-title{
    margin: 0 0 1.5rem; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  }
.about-founder-body{ max-width: 46rem; margin: 0 auto; text-align: left; }
.about-founder-body p{ margin: 0 0 1.125rem; font-size: 1.0625rem; line-height: 1.75; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.about-founder-body p:last-child{ margin-bottom: 0; }
html[data-theme="light"] .about-founder-body p{ color: #1f3535; }
.lp-today{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.5rem;
    margin: 0.875rem auto 0 !important; font-size: 0.875rem !important; color: var(--ink-dim); }
.lp-today-label{ font-weight: 700; color: var(--ink); margin-right: 0.25rem; }
.lp-today-item{ color: var(--ink-dim); }
.lp-today-item.done{ color: var(--ink); font-weight: 600; }
.lp-today-item em{ font-style: normal; font-weight: 400; color: var(--ink-dim); }
.lp-today-sep{ opacity: 0.5; }
button.lp-today-link{ background: none; border: none; padding: 0; margin-left: 0.5rem; border-radius: 0; box-shadow: none;
    color: var(--cyan); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
html button.lp-today-link:hover, html button.lp-today-link:focus-visible{ transform: none; box-shadow: none; }
html button.lp-today-link:hover{ color: var(--ink); text-decoration-thickness: 0.125em; }
html[data-theme] :is(.clj-link, .cldp-link, .clr-never, .lp-today-link):hover{ box-shadow: none; transform: none; }
html[data-theme="light"] button.lp-today-link{ color: #1f5f5f; }
.cl-progress-card{ max-width: 40rem; position: relative; }
.clp-row{ padding: 0.875rem 0; border-top: 0.0625rem solid var(--panel-border); }
.clp-row:first-child{ border-top: none; padding-top: 0.25rem; }
.clp-name{ font-family: var(--display); font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.clp-stats{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.clp-stats div{ display: flex; flex-direction: column; gap: 0.125rem; }
.clp-stats b{ font-family: var(--display); font-size: 1.25rem; color: var(--ink); }
.clp-stats b.clp-last{ font-size: 0.9375rem; line-height: 1.75rem; }
.clp-stats span{ font-size: 0.75rem; color: var(--ink-dim); }
.clp-note{ margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-dim); line-height: 1.5; }
@media (max-width: 36em){
.clp-stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cl-keys-overlay .info-card{ max-width: 26rem; position: relative; }
.clk-h{ margin: 0.875rem 0 0.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.clk-row{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3125rem 0; font-size: 0.9063rem; color: var(--ink); }
.clk-keys{ display: inline-flex; gap: 0.25rem; }
.clk-row kbd{ min-width: 1.75rem; text-align: center; padding: 0.125rem 0.5rem; border-radius: 0.375rem; border: 0.0625rem solid var(--panel-border);
    background: rgba(255,255,255,0.05); font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
html[data-theme="light"] .clk-row kbd{ background: rgba(42,122,122,0.08); border-color: rgba(42,122,122,0.3); }
.summary-actions{ flex-wrap: wrap; justify-content: center; }
.cl-backup-label{ margin-top: 0.625rem !important; padding-top: 0.625rem; border-top: 0.0625rem solid var(--panel-border); }
details.stat-more{ margin-top: 1rem; }
details.stat-more > summary{ list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.8438rem; font-weight: 600; color: var(--ink-dim); padding: 0.25rem 0; }
details.stat-more > summary::-webkit-details-marker{ display: none; }
details.stat-more > summary::before{ content: '\25B8'; transition: transform 140ms ease; }
details.stat-more[open] > summary::before{ transform: rotate(90deg); }
details.stat-more > summary:hover{ color: var(--ink); }
details.stat-more[open] > .stat-group:first-of-type{ margin-top: 0.75rem; }
@media (max-width: 48em){
.game-back-arrow{ display: inline-flex !important; }
body:not(:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible)) .game-back-arrow{ display: none !important; }
:is(#cctGameView, #gameView, #geoView, #semanticView, #linguisticView) .instrument-head h1{ font-size: 1.125rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }
#nbackGameView .instrument-head{ gap: 0.375rem 0.5rem; padding: 0.75rem 0.875rem 0.5rem; }
#nbackGameView .instrument-head h1{ font-size: 1.0625rem; }
#nbackGameView .instrument-head .meta{ font-size: 0.75rem; }
#nbackGameView .instrument-head .nb-hbtn{ width: 2.25rem; height: 2.25rem; min-width: 2.25rem; }
.nb-drawer.nbd-page{ width: 100vw; border-radius: 0; }
}
.stat-grid > .stat-card{ flex-grow: 1; }
.cl-endsave[hidden]{ display: none !important; }
.nb-float{ z-index:5 !important; }
#nbackGameView .instrument-head{ position: relative; z-index: 30; }
.nbd-page .nbd-h{ margin: 1.75rem 0 0.625rem; }
.nbd-page .nbd-preset + .nbd-h, .nbd-page .nbd-note + .nbd-h{ margin-top: 1.25rem; }
.nbd-page .nbd-row{ min-height: 2.5rem; padding: 0.25rem 0; margin: 0; }
.nbd-page .nbd-field{ margin: 0.375rem 0 0.75rem; }
.nbd-page .nbd-row + .nbd-field, .nbd-page .nbd-field + .nbd-row{ margin-top: 0.375rem; }
.nbd-page .nbd-field > .nbd-label{ margin-bottom: 0.375rem; }
.nbd-page .nbd-field > .nbd-note, .nbd-page > .nbd-note{ margin: 0.25rem 0 0.75rem; }
.nbd-page .nbd-stats{ margin: 0 0 0.75rem; line-height: 1.5; }
.nbd-page .nbd-btn-grid{ gap: 0.5rem; margin: 0 0 0.5rem; }
.nbd-page .nbd-btn-grid button{ min-height: 2.25rem; }
.nbd-page .nbd-btn-grid .nbd-span2{ grid-column: 1 / -1; }
.nbd-page .nbd-sep{ margin: 1.5rem 0 1rem; }
.game-menu .cct-menu-btn, .game-menu .menu-btn{ border: none; 
    background: rgba(var(--accent-rgb),0.14); color: var(--ink); font-weight: 600; box-shadow: none; }
.game-menu .cct-menu-btn:hover, .game-menu .menu-btn:hover,
  .game-menu.open .cct-menu-btn, .game-menu.open .menu-btn{ background: rgba(var(--accent-rgb),0.22); }
.game-menu .cct-menu-btn, .game-menu .menu-btn{ height: 2.5rem; padding: 0 1rem; font-size: 1rem; border-radius: 0.625rem; }
.cct-n-head{ display: none; align-items: center; height: 2rem; padding: 0 0.75rem; border-radius: 0.5rem;
    background: rgba(var(--accent-rgb),0.14); color: var(--cyan); font-family: var(--display); font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.cct-n-head.visible{ display: inline-flex; }
@keyframes cctNHeadPulse{ 0%{ transform: scale(1); } 45%{ transform: scale(1.12); } 100%{ transform: scale(1); } }
.pg-grid{ stroke: rgba(var(--accent-rgb),0.08); stroke-width: 1; }
.pg-hit{ fill: transparent; cursor: default; }
.pg-hit:hover{ fill: rgba(var(--accent-rgb),0.18); }
.progress-graph-chart{ flex-wrap: wrap; }
.progress-graph-chart > svg{ flex: 1 1 100%; width: 100%; }
.pg-legend{ flex: 1 1 100%; width: 100%; display: flex; gap: 1.25rem; justify-content: center; margin-top: 0.4rem; font-size: 0.78rem; color: var(--ink-dim); }
.pg-legend span{ display: inline-flex; align-items: center; gap: 0.4rem; }
.nb-weak{ color: #f59e0b; font-style: normal; font-weight: 600; }
html[data-theme="light"] .nb-weak{ color: #b45309; }
.nb-sc-legend i{ display: inline-block; width: 1rem; height: 0.2rem; border-radius: 1rem; }
.nb-sc-legend b{ color: var(--ink); }
.nb-fatigue svg{ display: block; width: 100%; height: 3rem; margin-top: 0.5rem; }
.cct-mic{ position: absolute; left: 0.75rem; top: 0.75rem; z-index: 4; display: none; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 62.4375rem;
    background: rgba(var(--accent-rgb),0.14); color: var(--cyan); font-size: 0.75rem; font-weight: 600; pointer-events: none; }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(3)){ width: 14.5rem; }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(4)){ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1875rem; }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(5)){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nbd-page .nbd-row .seg-toggle > .seg-btn{ min-width: 0; overflow-wrap: break-word; }
.cct-mic.visible{ display: inline-flex; }
@keyframes cctMicPulse{ 50%{ opacity: 0.3; } }
.posner-review{ margin-top: 1rem; text-align: left; }
.posner-review details{ border: 0.0625rem solid var(--panel-border); border-radius: 0.75rem; background: rgba(var(--accent-rgb),0.04); }
.posner-review summary{ cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.posner-review ul{ list-style: none; margin: 0; padding: 0 1rem 0.75rem; max-height: 18rem; overflow-y: auto; }
.posner-review li{ padding: 0.55rem 0; border-top: 0.0625rem solid var(--panel-border); font-size: 0.85rem; }
.pr-q{ color: var(--ink); font-weight: 600; }
.pr-a{ display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.2rem; }
.pr-ok{ color: #3fd9a0; }
html[data-theme="light"] .pr-ok{ color: #0f6b4b; }
.pr-you{ color: var(--ink-dim); }
.posner-review-ok{ padding: 0.75rem 1rem; border-radius: 0.75rem; background: rgba(var(--accent-rgb),0.06); color: var(--ink-dim); font-size: 0.85rem; }
.geo-pair--flag{ flex-direction: column; align-items: center; gap: 0.35rem; }
.geo-flag{ font-size: 4.5rem; line-height: 1; font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.geo-pair--map{ position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); font-size: 1.4rem !important; z-index: 3; }
#geoStage.geo-stage--map{ min-height: min(30rem, 70vh); }
.geo-map{ position: absolute; inset: 3rem 0.75rem 0.75rem; z-index: 2; display: flex; align-items: center; justify-content: center; }
.geo-map svg{ width: 100%; height: 100%; cursor: crosshair; border-radius: 0.75rem; overflow: hidden; }
.geo-sea{ fill: rgba(var(--accent-rgb),0.06); }
.geo-land{ fill: rgba(var(--accent-rgb),0.28); stroke: rgba(var(--accent-rgb),0.55); stroke-width: 0.25; }
.geo-marks .geo-hit{ fill: #3fd9a0; }
.geo-marks .geo-miss{ fill: #ff4d5a; }
.geo-marks .geo-target{ fill: none; stroke: #ffd24d; stroke-width: 0.9; }
.semantic-pair.emo-pair .emo-face{ display: block; font-size: 4.5rem; line-height: 1.1; font-weight: 400; font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.semantic-pair.emo-pair .emo-word{ display: block; margin-top: 0.3rem; }
.posner-auto-on > button{ position: relative; overflow: hidden; }
.posner-auto-on > button::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.2rem; background: currentColor; opacity: 0.55; transform-origin: left center; animation: posnerAutoBar var(--posner-auto, 1s) linear forwards; }
@keyframes posnerAutoBar{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){
.posner-auto-on > button::after{ animation-duration: 0s; opacity: 0.3; }
}
.posner-between{ width: min(36rem, 100%); margin: 0 auto; padding: 0.85rem 1rem; border-radius: 0.9rem; border: 0.0625rem solid rgba(var(--accent-rgb),0.45); background: rgba(var(--accent-rgb),0.08); text-align: center; box-sizing: border-box; }
.posner-between[hidden]{ display: none; }
.center-message .posner-between .posner-between-msg{ margin: 0 auto; font-size: 0.95rem; font-weight: 600; color: var(--ink); max-width: 34rem; }
.center-message .posner-between .posner-between-sub{ margin: 0.3rem auto 0; font-size: 0.8rem; color: var(--ink-dim); max-width: none; font-variant-numeric: tabular-nums; }
.posner-between-btns{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; }
.center-message--summary.posner-between-on .summary-actions{ display: none; }
.center-message p.posner-next{ margin: 0 auto; max-width: 40rem; font-size: 0.85rem; color: var(--ink); }
.prq{ text-align: left; border: 0.0625rem solid var(--panel-border); border-radius: 0.75rem; padding: 0.6rem 0.85rem 0.7rem; background: rgba(128,128,128,0.05); min-width: 0; }
.prq-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(2rem, 5rem) 2.9rem minmax(0, 9rem); gap: 0.6rem; align-items: center; padding: 0.3rem 0; font-size: 0.8rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.prq-row + .prq-row{ border-top: 0.0625rem solid rgba(128,128,128,0.18); }
.prq-row > span:first-child{ color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prq-row i{ display: block; height: 0.45rem; border-radius: 0.3rem; background: rgb(var(--accent-rgb)); opacity: 0.75; min-width: 0.2rem; }
.prq-row.prq-low i{ background: var(--bad); }
.prq-row b{ color: var(--ink); text-align: right; }
.prq-row > span:last-child{ text-align: right; }
.prq-foot{ margin: 0.55rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--ink-dim); }
.prq-foot b{ color: var(--ink); font-weight: 600; }
.prq-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.4rem 1.25rem; }
.prq-list h4{ margin: 0.35rem 0 0.2rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.prq-list ul{ list-style: none; margin: 0; padding: 0; }
.prq-list li{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; padding: 0.25rem 0; border-top: 0.0625rem solid rgba(128,128,128,0.18); font-size: 0.8rem; color: var(--ink-dim); }
.prq-list li .prq-q{ flex: 1 1 8rem; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.prq-list li .prq-q, .prq-row > span:first-child, .posner-review .pr-q{ font-family: var(--sans), "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.prq-list li b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.prq-list li small{ flex: 1 1 100%; font-size: 0.72rem; color: var(--ink-dim); }
.prq-empty{ margin: 0; font-size: 0.8rem; color: var(--ink-dim); }
.stat-group--mix > .clb{ margin-top: 0.6rem; }
.prq-sheet{ margin-top: 1rem; }
.prq-sheet .prq-h{ margin: 0.9rem 0 0.4rem; font-size: 0.9rem; color: var(--ink); }
@media (max-width: 30rem){
.prq-row{ grid-template-columns: minmax(0, 1fr) 2.9rem; row-gap: 0.1rem; }
.prq-row i{ display: none; }
.prq-row > span:last-child{ grid-column: 1 / -1; text-align: left; font-size: 0.74rem; }
}
#routineOverlay .routine-card{ max-width: min(44rem, calc(100vw - 1.5rem)); text-align: left; }
.routine-items{ display: flex; flex-direction: column; gap: 0.45rem; margin: 0.9rem 0 0.6rem; }
.routine-none{ text-align: center; padding: 0.8rem 0.5rem; border: 0.0625rem dashed var(--panel-border); border-radius: 0.75rem; }
.routine-item{ display: grid; grid-template-columns: minmax(7rem, 1fr) auto auto auto; align-items: center; gap: 0.5rem 0.6rem; padding: 0.45rem 0.45rem 0.45rem 0.75rem;
    border-radius: 0.75rem; border: 0.0625rem solid var(--panel-border); background: rgba(128,128,128,0.06); }
.routine-item-name{ font-weight: 700; font-size: 0.92rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.routine-item-days{ display: flex; gap: 0.2rem; }
.routine-dchip, button.routine-dchip{ width: 2.1rem; height: 2.1rem; min-width: 0; padding: 0; border-radius: 0.5rem; border: 0.0625rem solid var(--panel-border); background: transparent;
    color: var(--ink-dim); font: inherit; font-size: 0.8rem; font-weight: 700; box-shadow: none; transform: none; cursor: pointer; }
button.routine-dchip:hover{ border-color: rgba(var(--accent-rgb),0.6); color: var(--ink); box-shadow: none; transform: none; background: transparent; }
button.routine-dchip.on{ background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.75); color: var(--ink); }
button.routine-dchip:focus-visible{ outline: 0.125rem solid rgb(var(--accent-rgb)); outline-offset: 0.06rem; }
.routine-item-min{ display: flex; align-items: center; gap: 0.3rem; }
.routine-item-min input{ width: 3.6rem; box-sizing: border-box; min-height: 2.1rem; padding: 0.25rem 0.35rem; border-radius: 0.5rem; border: 0.0625rem solid var(--panel-border);
    background: rgba(128,128,128,0.12); color: var(--ink); font: inherit; font-size: 0.88rem; text-align: right; font-variant-numeric: tabular-nums; }
.routine-item-min i{ font-style: normal; font-size: 0.78rem; color: var(--ink-dim); }
.routine-item-del, button.routine-item-del{ width: 2.1rem; height: 2.1rem; min-width: 0; padding: 0; border-radius: 0.5rem; border: 0; background: transparent; color: var(--ink-dim);
    font-size: 1.3rem; line-height: 1; box-shadow: none; transform: none; cursor: pointer; }
button.routine-item-del:hover{ color: var(--bad); background: rgba(128,128,128,0.12); box-shadow: none; transform: none; }
.routine-add-row{ margin: 0 0 0.9rem; }
.routine-add{ width: 100%; min-height: 2.6rem; box-sizing: border-box; padding: 0.45rem 0.75rem; border-radius: 0.75rem; border: 0.0625rem dashed rgba(var(--accent-rgb),0.6);
    background: rgba(var(--accent-rgb),0.06); color: var(--ink); font: inherit; font-weight: 600; color-scheme: dark; cursor: pointer; }
html[data-theme="light"] .routine-add{ color-scheme: light; }
.routine-week{ list-style: none; margin: 0 0 0.9rem; padding: 0.6rem 0.75rem; border-radius: 0.75rem; background: rgba(128,128,128,0.06); display: grid; gap: 0.25rem; font-size: 0.84rem; }
.routine-week li{ display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: 0.5rem; color: var(--ink); }
.routine-week li b{ color: var(--ink-dim); font-weight: 700; }
.routine-week li em{ font-style: normal; color: var(--ink-dim); }
.routine-summary[hidden], .routine-week[hidden]{ display: none; }
@media (max-width: 34em){
.routine-item{ grid-template-columns: minmax(0,1fr) auto auto; }
.routine-item-days{ grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
.routine-dchip, button.routine-dchip{ flex: 1 1 0; width: auto; max-width: 2.6rem; height: 2.4rem; }
.routine-item{ display: flex; flex-wrap: wrap; }
.routine-item-name{ flex: 1 1 6.5rem; overflow-wrap: break-word; }
.routine-item-min{ flex: none; margin-left: auto; }
.routine-item-del, button.routine-item-del{ flex: none; }
.routine-item-days{ flex: 1 1 100%; order: 1; }
}
.routine-summary .routine-stat:first-child{ flex: 2 1 10rem; }
.routine-stat-value{ overflow-wrap: normal; word-break: normal; }
.cl-sheet-card{ max-width: 40rem; position: relative; text-align: left; }
.cl-sheet-card p{ line-height: 1.55; }
.cl-sheet-list{ margin: 0.5rem 0 0.75rem; padding-left: 1.2rem; line-height: 1.6; }
.cl-sheet-dim{ color: var(--ink-dim); font-size: 0.85rem; }
.cl-sheet-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.cl-sheet-grid button{ width: 100%; }
.cl-weekly-link{ float: right; font-size: 0.75rem; padding: 0.3rem 0.7rem; letter-spacing: 0; text-transform: none; }
.wk-top{ margin-bottom: 0.75rem; }
.wk-bars{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; align-items: end; margin: 0.5rem 0 1rem; }
.wk-bar{ display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: var(--ink-dim); }
.wk-bar-col{ height: 4rem; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.wk-bar-col i{ display: block; width: 70%; border-radius: 0.3rem 0.3rem 0.1rem 0.1rem; background: rgb(var(--accent-rgb)); opacity: 0.8; }
.wk-bar em{ font-style: normal; color: var(--ink); font-size: 0.7rem; min-height: 0.9rem; }
.wk-table{ display: grid; gap: 0.1rem; }
.wk-row{ display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.8fr 1.3fr; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-top: 0.0625rem solid var(--panel-border); font-size: 0.82rem; color: var(--ink-dim); }
.wk-row b{ color: var(--ink); }
.wk-h{ border-top: none; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.wk-name{ color: var(--ink); font-weight: 600; }
.wk-d{ font-size: 0.72rem; margin-left: 0.15rem; color: var(--ink-dim); }
.wk-d.up{ color: #3fd9a0; }
.wk-d.down{ color: #f59e0b; }
html[data-theme="light"] .wk-d.up{ color: #0f6b4b; }
html[data-theme="light"] .wk-d.down{ color: #8a4b00; }
@media (max-width: 35rem){
.wk-row{ grid-template-columns: 1fr 1fr; }
.wk-h{ display: none; }
}
[data-quick]{ cursor: pointer; }
[data-quick]:hover{ filter: brightness(1.2); }
.cl-pop{ position: absolute; z-index: 5000; display: none; min-width: 13rem; padding: 0.8rem; border-radius: 0.75rem; background: var(--bg-1); border: 0.0625rem solid var(--panel-border); box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.45); }
.cl-pop.visible{ display: block; }
.cl-pop-t{ font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.5rem; }
.cl-pop-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cl-pop-row b{ font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-pop-row button{ width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1.1rem; }
.cl-pop-n{ font-size: 0.72rem; color: var(--ink-dim); margin-top: 0.4rem; }
.cl-pop-a{ display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.7rem; }
.cl-pop-a button{ padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.pg-grid--soft{ stroke: rgba(var(--accent-rgb),0.07); stroke-dasharray: 3 5; }
.progress-graph-svg .pg-axis-label{ font-size: 0.72rem; fill-opacity: 0.75; }
.pg-line{ stroke-width: 2.75; }
.pg-rawdot{ fill: var(--cyan); fill-opacity: 0.3; }
.pg-area-grad-start{ stop-opacity: 0.14; }
.pg-last{ fill: var(--cyan); stroke: var(--bg-1); stroke-width: 3; }
.pg-last-label{ font-family: var(--display); font-size: 0.95rem; font-weight: 700; fill: var(--ink); }
.pg-caption{ flex: 1 1 100%; text-align: right; font-size: 0.72rem; color: var(--ink-dim); opacity: 0.8; margin-top: 0.25rem; }
.cct-paused::after, .posner-paused::after{ content: "Paused"; position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 6;
    padding: 0.25rem 0.75rem; border-radius: 62.4375rem; background: rgba(var(--accent-rgb),0.16); color: var(--cyan); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
:where(html[data-theme="light"]) button{ color: #f2fbfb; }
html[data-theme="light"] .keypad button.enter{ color: #f2fbfb; }
html[data-theme="light"] .topnav-hamburger{ color: var(--ink); }
.nb-float{ gap: 0.5rem !important; }
.nb-float .nb-play, .nb-float .nb-extra{ width: auto !important; min-width: 6rem; padding: 0.6rem 1.15rem !important; font-size: 1.1rem !important; border-radius: 0.625rem; white-space: nowrap; }
.nb-float .nb-extra{ min-width: 0; border: none; background: rgba(var(--accent-rgb),0.1); color: var(--ink); }
@media (max-width: 43.75rem){
.nb-float .nb-play, .nb-float .nb-extra{ min-width: 0; padding: 0.4rem 0.7rem !important; font-size: 0.85rem !important; }
}
.cl-nullify.on{ color: #f59e0b; border-color: rgba(245,158,11,0.45); }
html[data-theme="light"] .cl-nullify.on{ color: #8a4b00; }
.cl-nullify:disabled{ opacity: 0.55; cursor: default; }
.guide-step{ display: inline-block; align-self: flex-start; width: max-content; margin: 0 0 0.35rem; padding: 0.15rem 0.55rem; border-radius: 62.4375rem; background: rgb(var(--accent-rgb)); color: #052224; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
html[data-theme="light"] .guide-step{ color: #f2fbfb; }
.nb-exrule{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:0.9rem; align-items:center; justify-content:center; pointer-events:none; z-index:3; opacity:0; transition:opacity .12s ease; font-family:var(--display); font-weight:700; color:var(--ink); }
.nb-exrule.on{ opacity:0.72; }
.nb-exrule-u{ display:flex; align-items:center; gap:0.3rem; padding:0.28rem 0.55rem; border-radius:0.6rem; background:color-mix(in srgb,var(--ink) 9%,transparent); border:0.0625rem solid color-mix(in srgb,var(--ink) 18%,transparent); font-size:clamp(1rem,3vmin,1.5rem); line-height:1; }
.nb-exrule-u svg{ width:1em; height:1em; opacity:0.8; }
.nb-expanel{ display:flex; flex-direction:column; gap:0.35rem; }
.nb-expanel .nb-exo{ padding-left:0.9rem; }
.nb-expanel .nb-exo > span{ opacity:0.8; font-size:0.92em; }
.nb-exo-ctl{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; justify-content:flex-end; }
.nb-exstep{ display:inline-flex; align-items:center; gap:0.25rem; }
.nb-exstep .seg-btn{ min-width:2rem; padding:0.25rem 0.5rem; border-radius:0.5rem; border:0.0625rem solid var(--line,rgba(255,255,255,.14)); }
.nb-exstep .seg-btn[disabled]{ opacity:0.35; cursor:default; }
.nb-exstep b{ min-width:2.4rem; text-align:center; font-variant-numeric:tabular-nums; }
.nb-exscale{ padding-left:0.9rem; font-size:0.78rem; opacity:0.6; margin:-0.1rem 0 0.35rem; }
.nb-expanel select.manual-select{ max-width:11rem; }
.nb-exnote{ margin-top:0.2rem; }
@media (max-width: 26rem){
#nbDrawer.nbd-page .nbd-row{ flex-wrap: wrap; }
#nbDrawer.nbd-page .nbd-row > span:first-child{ flex: 1 1 0; min-width: min-content; }
#nbDrawer.nbd-page .nbd-row > :last-child:not(:first-child){ margin-left: auto; }
#nbDrawer.nbd-page .nbd-row .seg-toggle{ min-width: min-content; }
#nbDrawer.nbd-page .nbd-row .seg-toggle > .seg-btn{ min-width: auto; }
}
.nbg-keys.nb-exk{ display:none; }
#nbStage.exec.ext .nbg-keys.nb-exk{ display:flex !important; }
#nbStage.exec #nbExtKeys{ display:none; }
.nb-exk.single{ justify-content:center; }
.nb-exk.single .nbg-key{ flex:0 0 calc(50% - 0.25rem); }
@media (orientation: landscape) and (min-width: 43.8125rem){
#nbStage.ext:not(.exec) :is(.nbg-persp,.nb-vcrank){ bottom: max(3.75rem, calc(12.5% + 0.25rem)); }
}
#nbStage.exec .nb-nlevel{ font-size:clamp(1.3rem,3.6vmin,2.2rem); font-weight:700; opacity:0.85; translate:0 calc(-16vh - 5.2rem) !important; }
#nbStage.exec .nb-nlevel::before{ content:"N\00a0=\00a0"; }
#nbStage.exs-rule .nb-nlevel{ font-size:clamp(1.2rem,3.2vmin,2rem); font-weight:700; opacity:0.85; }
.nb-float.nb-float-l{ left:0.75rem; right:auto; }
@media (max-width: 43.75rem){
.nb-float.nb-float-l{ top:2.9rem; }
}
.nbd-na{ opacity:0.4; cursor:not-allowed; }
.cl-pop:has(.cl-pop-tp){ min-width:min(22rem,94vw); }
.cl-pop-tp{ margin:0.2rem 0 0.6rem; }
.cl-pop-t{ display:flex; justify-content:space-between; align-items:baseline; gap:0.6rem; }
.cl-pop-now{ text-transform:none; letter-spacing:0; font-weight:500; }
.cl-pop-now b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.nb-upm{ position:absolute; width:0.0625rem; height:0.0625rem; margin:-0.0312rem 0 0 -0.0312rem; visibility:hidden; pointer-events:none; }
.nb-upm-c{ left:50%; top:50%; }
.nb-upm-r{ left:90%; top:50%; }
.nb-upm-d{ left:50%; top:90%; }
#nbStage.exec.ex-aud .nb-crosshair{ display:block; }
.nb-earcue{ position:absolute; left:50%; top:0.75rem; transform:translateX(-50%); z-index:4; pointer-events:none; display:none; padding:0.3rem 0.75rem; border-radius:62.4375rem;
    font-family:var(--display); font-weight:700; font-size:clamp(0.85rem,2.2vmin,1.15rem); letter-spacing:0.02em; color:var(--ink); background:rgba(var(--accent-rgb),0.16); border:0.0625rem solid rgba(var(--accent-rgb),0.45); }
.nb-earcue.on{ display:block; }
.nb-earcue.vary{ animation:nbEarPop 220ms ease-out; }
@keyframes nbEarPop{ from{ transform:translateX(-50%) scale(1.15); } to{ transform:translateX(-50%) scale(1); } }
@media (max-width:43.75rem){
.nb-earcue{ top:6.2rem; }
}
@media (orientation: landscape), (min-width: 64.0625rem){
#nbStage .nb-earcue.on ~ .nb-std-next{ left:calc(50% + 4.5rem * var(--cl-gt, 1)); transform:none; }
}
.cct-earcue{ position:absolute; left:0.75rem; top:0.75rem; z-index:6; pointer-events:none; display:none; padding:0.3rem 0.75rem; border-radius:62.4375rem;
    font-family:var(--display); font-weight:700; font-size:0.95rem; color:var(--ink); background:rgba(var(--accent-rgb),0.16); border:0.0625rem solid rgba(var(--accent-rgb),0.45); }
.cct-earcue.on{ display:block; }
@keyframes cctEarPop{ from{ transform:scale(1.15); } to{ transform:scale(1); } }
.cct-msitag{ position:absolute; right:0.75rem; top:0.75rem; z-index:6; pointer-events:none; display:none; padding:0.3rem 0.75rem; border-radius:62.4375rem; font-size:0.85rem; font-weight:600; color:var(--ink-dim); border:0.0625rem solid var(--panel-border); background:var(--panel); }
.cct-msitag.on{ display:block; }
@container (max-width: 28rem) and (min-height: 15rem){
.cct-msitag, .cct-earcue{ top:3.5rem; }
}
#relGameView.visible{ display:flex; flex-direction:column; height:calc(100svh - var(--topnav-h, 4.75rem)); margin-top:var(--topnav-h, 4.75rem); }
body:has(#relGameView.visible){ padding:0; }
.instrument:has(#relGameView.visible){ position:fixed; inset:0; width:100vw; height:100svh; max-width:none; margin:0; border:none; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; clip-path:inset(0); z-index:50; }
#relGameView .instrument-head{ position:relative; z-index:5; }
#relGameView .instrument-head .meta{ display:flex; align-items:center; gap:.5rem; }
#relGameView .instrument-head .meta .meta-timer,
  #relGameView .instrument-head .meta .meta-count{ height:2.5rem; padding:0 1rem; gap:0.5rem; border-radius:0.625rem; font-size:1rem; }
#relGameView .instrument-head .meta .meta-timer::before{ width:1.25rem; height:1.25rem; }
[data-quick]{ -webkit-user-select:none; user-select:none; }
@media (max-width:43.75rem){
#relGameView .instrument-head .meta .meta-timer{ display:none; }
#relGameView .instrument-head .meta .meta-count{ height:2rem; padding:0 .6rem; font-size:.8rem; }
}
#relGameView.visible{ position:relative; }
.rel-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:transparent; }
html.cl-cb .nbg-key.success{ color:#04202e !important; }
html.cl-cb .nbw-key.success{ background:rgba(86,180,233,.3) !important; border-color:var(--nbg-ok) !important; }
html.cl-cb .nbw-key.failure{ background:rgba(213,94,0,.3) !important; border-color:var(--nbg-bad) !important; }
html.cl-cb .nbw-key.late{ background:rgba(240,228,66,.3) !important; border-color:var(--nbg-warn) !important; }
html.cl-cb .nbw-answer.success{ color:var(--nbg-ok) !important; }
html.cl-cb .nbw-answer.failure{ color:var(--nbg-bad) !important; }
html.cl-cb .nb-strip i.h, html.cl-cb .nb-legend i.h{ background:var(--nbg-ok) !important; }
html.cl-cb .nb-strip i.m, html.cl-cb .nb-legend i.m{ background:var(--nbg-warn) !important; }
html.cl-cb .nb-strip i.f, html.cl-cb .nb-legend i.f{ background:var(--nbg-bad) !important; }
.gp-modal{ width:min(68rem, 96vw) !important; max-width:none !important; }
.gp-map{ position:relative; width:100%; aspect-ratio:360/150; max-height:62vh; border-radius:0.75rem; overflow:hidden; border:0.0625rem solid var(--panel-border); background:rgba(var(--accent-rgb),0.04); touch-action:none; }
.gp-map svg{ width:100%; height:100%; display:block; cursor:grab; user-select:none; }
.gp-map svg:active{ cursor:grabbing; }
.gp-hit{ fill:transparent; cursor:pointer; }
.gp-zoom{ position:absolute; top:0.6rem; right:0.6rem; z-index:2; display:flex; flex-direction:column; gap:0.3rem; }
.gp-zoom button{ width:2.1rem; height:2.1rem; border-radius:0.5rem; border:0.0625rem solid var(--panel-border); background:var(--bg-1); color:var(--ink); font-size:1.1rem; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 0.2rem 0.6rem rgba(0,0,0,0.3); }
.gp-zoom button:hover{ border-color:rgba(var(--accent-rgb),0.6); }
.gp-dot{ fill:var(--ink-dim); stroke:var(--bg-1, #0d1e26); stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.gp-pt:hover .gp-dot{ fill:var(--ink); }
.gp-pt:focus{ outline: none; }
.gp-pt:focus-visible .gp-dot{ fill: var(--ink); stroke: var(--cyan); stroke-width: 1.5; }
.gp-pt.on .gp-dot{ fill:var(--cyan); stroke:#fff; stroke-width:1.5; }
.gp-label{ fill:var(--ink); paint-order:stroke; stroke:var(--bg-0, #052224); stroke-width:2.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none; font-family:var(--sans); font-weight:600; }
.gp-map .geo-land{ stroke-width:1; vector-effect:non-scaling-stroke; }
.gp-pt.on .gp-label{ fill:var(--cyan); }
.gp-foot{ display:flex; align-items:flex-end; gap:1rem; margin-top:0.85rem; }
.gp-list{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:0.4rem; max-height:7.5rem; overflow:auto; }
.gp-done{ flex:none; padding:0.6rem 1.4rem; border-radius:0.625rem; border:none; background:linear-gradient(var(--cyan), var(--cyan)); color:#052224; font-weight:700; font-size:0.95rem; cursor:pointer; }
html[data-theme="light"] .gp-done{ color:#fff; }
.gp-chip{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.65rem; border-radius:62.4375rem; border:0.0625rem solid rgba(var(--accent-rgb),0.45); background:rgba(var(--accent-rgb),0.1); color:var(--ink); font-size:0.8125rem; font-weight:600; cursor:pointer; }
.gp-chip:hover{ background:rgba(var(--accent-rgb),0.2); }
.gp-chip span{ color:var(--ink-dim); }
.gp-empty{ font-size:0.8125rem; color:var(--ink-dim); }
@media (max-width: 40em){
.gp-modal .progress-graph-head{ flex-wrap:wrap; }
.gp-modal .progress-graph-head > div:first-child{ flex:1 1 12rem; }
.gp-modal .progress-graph-actions{ margin-left:auto; }
.gp-zoom{ flex-direction:row; right:auto; left:0.6rem; }
}
html .menu-panel, html .cct-menu-panel{
    top: calc(100% + 0.375rem); right: 0; min-width: 14rem; max-width: calc(100vw - 1rem);
    
    opacity: 1;
    
    overflow-y: auto; z-index: 40;
    
    transform-origin: top right; animation: clMenuIn 120ms ease-out;
  }
html .menu-panel.cl-up, html .cct-menu-panel.cl-up{ top: auto; bottom: calc(100% + 0.375rem); transform-origin: bottom right; }
@keyframes clMenuIn{ from{ opacity: 0; transform: translateY(-0.25rem) scale(0.98); } to{ opacity: 1; transform: none; } }
html[data-theme="light"] .menu-panel, html[data-theme="light"] .cct-menu-panel{
    border-color: rgba(42,122,122,0.28); box-shadow: 0 0.75rem 2rem -0.75rem rgba(26,43,43,0.35);
  }
.menu-panel .menu-group, .cct-menu-panel .menu-group{ display: flex; flex-direction: column; }
.menu-panel .menu-group + .menu-group, .cct-menu-panel .menu-group + .menu-group{ margin-top: 0; padding-top: 0; border-top: none; }
.menu-panel .menu-item, .cct-menu-panel .menu-item{
    min-height: 2.25rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem;
    font-size: 0.875rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  }
.menu-panel .menu-item:hover, .cct-menu-panel .menu-item:hover,
  .menu-panel .menu-item:focus-visible, .cct-menu-panel .menu-item:focus-visible{ background: rgba(var(--accent-rgb),0.12); }
.menu-panel .menu-item-icon, .cct-menu-panel .menu-item-icon{ width: 1rem; height: 1rem; color: rgb(var(--accent-rgb)); opacity: 0.9; }
@media (max-width: 40rem){
.menu-panel .menu-item, .cct-menu-panel .menu-item{ min-height: 2.75rem; }
}
.contact-grid.cl-two{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; width: 100%; }
@media (max-width: 40rem){
.contact-grid.cl-two{ grid-template-columns: 1fr; }
}
.contact-card-icon{ background: rgba(var(--accent-rgb),0.12); color: rgb(var(--accent-rgb)); }
#testingOverlay{ max-width: 64rem; }
.iq-wrap{ display: flex; flex-direction: column; gap: 1rem; }
.iq-card{ background: var(--panel, rgba(255,255,255,0.02)); border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }
.iq-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.iq-card-head h2{ margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.iq-count{ font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 62.4375rem; background: rgba(var(--accent-rgb),0.14); color: var(--cyan); }
.iq-count:empty{ display: none; }
.iq-head-acts{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
.iq-fields{ display: grid; grid-template-columns: 8rem 13rem minmax(0,1fr) 10.5rem; gap: 0.75rem 1rem; align-items: end; }
.iq-f{ display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.iq-f > span{ font-size: 0.78rem; font-weight: 600; color: var(--ink-dim); display: flex; align-items: center; gap: 0.35rem; }
.iq-f > span em{ font-style: normal; opacity: 0.7; font-weight: 500; }
.iq-f-note{ grid-column: 1 / -1; }
.iq-f input, .iq-filter select{ width: 100%; box-sizing: border-box; min-height: 2.5rem; padding: 0.5rem 0.7rem; border-radius: 0.625rem; border: 0.0625rem solid var(--panel-border);
    background: rgba(128,128,128,0.08); color: var(--ink); font: 500 0.9rem var(--sans); color-scheme: dark; }
html[data-theme="light"] .iq-f input, html[data-theme="light"] .iq-filter select{ color-scheme: light; background: rgba(255,255,255,0.6); }
.iq-f input:focus, .iq-filter select:focus{ outline: none; border-color: rgba(var(--accent-rgb),0.7); box-shadow: none; }
.iq-f input.bad{ border-color: #f87171; }
.iq-tip{ display: inline-flex; align-items: center; justify-content: center; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 0.0625rem solid currentColor; font: italic 700 0.62rem/1 serif; cursor: help; opacity: 0.8; }
.iq-seg{ display: flex; padding: 0.1875rem; border-radius: 0.625rem; background: rgba(128,128,128,0.12); border: 0.0625rem solid var(--panel-border); min-height: 2.5rem; box-sizing: border-box; }
.iq-seg button{ flex: 1; background: transparent; color: var(--ink-dim); border-radius: 0.4375rem; padding: 0.35rem 0.25rem; font-size: 0.8rem; box-shadow: none; transform: none; }
.iq-seg button:hover{ transform: none; box-shadow: none; color: var(--ink); }
.iq-seg button.on{ background: rgba(var(--accent-rgb),0.22); color: var(--ink); }
.iq-form-foot{ display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
.iq-err{ margin: 0 auto 0 0; font-size: 0.82rem; color: #f87171; min-height: 1em; }
.iq-stats{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0.75rem; }
.iq-stat{ position: relative; overflow: hidden; background: var(--panel, rgba(255,255,255,0.02)); border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem 0.9rem; min-width: 0; }
.iq-stat::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.1875rem; background: linear-gradient(var(--cyan), var(--cyan)); }
.iq-stat b{ display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.iq-stat span{ display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.3rem; }
.iq-stat small{ display: block; font-size: 0.75rem; color: var(--ink-dim); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; }
.iq-filter{ display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-dim); font-weight: 600; }
.iq-filter select{ width: auto; max-width: 14rem; min-height: 2.25rem; padding: 0.35rem 0.6rem; }
.iq-chart{ position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 12rem; }
.iq-chart svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.iq-chart .g{ stroke: rgba(var(--accent-rgb),0.1); stroke-width: 1; }
.iq-chart .g.mid{ stroke: rgba(var(--accent-rgb),0.28); stroke-dasharray: 4 4; }
.iq-chart .yl{ fill: var(--ink-dim); font: 600 0.7rem var(--sans); }
.iq-chart .xl{ fill: var(--ink-dim); font: 500 0.68rem var(--sans); }
.iq-chart .ln{ fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.iq-chart .ar{ fill: url(#iqGrad); }
.iq-chart .dt{ fill: var(--bg-1); stroke: var(--cyan); stroke-width: 2.5; }
.iq-chart .dt.best{ fill: var(--cyan); }
.iq-chart .hit{ fill: transparent; cursor: pointer; }
.iq-tipbox{ position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 0.75rem)); background: var(--bg-1); border: 0.0625rem solid rgba(var(--accent-rgb),0.3); border-radius: 0.5rem;
    padding: 0.4rem 0.6rem; font-size: 0.78rem; color: var(--ink); white-space: nowrap; box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(0,0,0,0.6); display: none; z-index: 2; }
.iq-tipbox b{ color: var(--cyan); }
.iq-empty{ display: flex; align-items: center; justify-content: center; height: 100%; min-height: 10rem; text-align: center; color: var(--ink-dim); font-size: 0.9rem; margin: 0; }
.iq-list{ display: flex; flex-direction: column; }
.iq-row{ display: grid; grid-template-columns: 7rem minmax(0,1.3fr) 6.5rem 6.5rem minmax(0,1.5fr) auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.25rem; border-top: 0.0625rem solid var(--panel-border); font-size: 0.88rem; color: var(--ink); }
.iq-row.h{ border-top: none; padding-top: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.iq-row > *{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.iq-row .sc b{ font-family: var(--display); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.iq-row .sc small{ display: block; font-size: 0.7rem; color: var(--ink-dim); }
.iq-row .nt{ color: var(--ink-dim); }
.iq-row .dim{ color: var(--ink-dim); }
.iq-act{ display: flex; gap: 0.25rem; justify-content: flex-end; }
.iq-act button{ width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: transparent; color: var(--ink-dim); box-shadow: none; transform: none; }
.iq-act button:hover{ background: rgba(var(--accent-rgb),0.12); color: var(--ink); box-shadow: none; transform: none; }
.iq-act button.del:hover{ background: rgba(248,113,113,0.14); color: #f87171; }
.iq-act svg{ width: 1rem; height: 1rem; }
.iq-row.editing{ background: rgba(var(--accent-rgb),0.07); border-radius: 0.5rem; }
@media (max-width: 56rem){
.iq-fields{ grid-template-columns: 8rem minmax(0,1fr); }
.iq-f-test, .iq-f-date{ grid-column: auto; }
.iq-stats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 40rem){
.iq-card{ padding: 0.95rem 0.9rem 1rem; }
.iq-f-sd, .iq-f-test{ grid-column: 1 / -1; }
.iq-f-score{ grid-column: 1; }
.iq-f-date{ grid-column: 2; grid-row: 1; }
.iq-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.iq-stat:first-child{ grid-column: 1 / -1; }
.iq-chart{ aspect-ratio: 4 / 3; }
.iq-form-foot{ flex-direction: column-reverse; align-items: stretch; }
.iq-form-foot button{ width: 100%; }
.iq-row{ grid-template-columns: minmax(0,1fr) auto auto; grid-template-areas: "t s a" "d p a" "n n n"; gap: 0.15rem 0.75rem; }
.iq-row.h{ display: none; }
.iq-row .tt{ grid-area: t; font-weight: 600; }
.iq-row .dd{ grid-area: d; font-size: 0.78rem; }
.iq-row .sc{ grid-area: s; text-align: right; }
.iq-row .pc{ grid-area: p; text-align: right; font-size: 0.78rem; }
.iq-row .nt{ grid-area: n; font-size: 0.8rem; }
.iq-row .nt:empty{ display: none; }
.iq-act{ grid-area: a; }
}
.iq-tests{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; }
.iq-t{ display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 0.95rem 0.8rem; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border);
    background: rgba(128,128,128,0.05); min-width: 0; transition: border-color 120ms ease, background 120ms ease; }
.iq-t:hover{ border-color: rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.05); }
.iq-t-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.iq-t-name{ margin: 0; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
.iq-t-area{ margin: 0; font-size: 0.8rem; color: var(--ink-dim); line-height: 1.4; }
.iq-badges{ flex: none; display: inline-flex; gap: 0.3rem; }
.iq-badge{ flex: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 62.4375rem;
    background: rgba(var(--accent-rgb),0.14); color: var(--cyan); }
.iq-badge.paid{ background: rgba(245,158,11,0.15); color: #f59e0b; }
.iq-badge.pdf{ background: rgba(var(--accent-rgb),0.15); color: var(--violet); }
html[data-theme="light"] .iq-badge.paid{ color: #b45309; }
.iq-t-foot{ display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }
.iq-t-open{ display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--cyan); text-decoration: none; padding: 0.35rem 0; }
.iq-t-open:hover{ text-decoration: underline; text-underline-offset: 0.15em; }
.iq-t-open svg{ width: 0.8rem; height: 0.8rem; }
.iq-t-log{ margin-left: auto; padding: 0.35rem 0.75rem; font-size: 0.78rem; border-radius: 0.5rem; background: rgba(var(--accent-rgb),0.12); color: var(--ink); box-shadow: none; }
.iq-t-log:hover{ background: rgba(var(--accent-rgb),0.22); box-shadow: none; transform: none; }
.iq-t-last{ font-size: 0.74rem; color: var(--ink-dim); }
.iq-t-last b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.iq-tfilter{ min-height: 2.25rem; width: 17rem; max-width: 100%; }
@media (max-width: 40rem){
.iq-tfilter{ width: 100%; }
.iq-t-log{ min-height: 2.5rem; }
}
:root{ --cl-gap: clamp(0.375rem, 1.6vh, 0.875rem); }
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible){
    padding-top: calc(var(--topnav-h, 4.75rem) + var(--cl-gap));
    padding-bottom: var(--cl-gap);
  }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible{ display: flex; flex-direction: column; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > *{ flex: none; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head{ order: 0; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.stage,.cct-stage){ order: 1; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .semantic-progress-bar{ order: 2; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.semantic-buttons,.keypad,.cct-ict-pad){ order: 3; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.readout,.cct-readout){ order: 4; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.footer,.cct-footer){ order: 5; }
:is(#cctGameView) > :is(.keypad,.cct-ict-pad){ padding-top: 0.75rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView).visible:not(.posner-summary-active) > .stage{
    height: var(--cl-stage-h, 21.25rem); min-height: 0; container-type: size;
  }
#cctGameView.cct-summary-active > .cct-stage > :not(.center-message--summary){ display: none; }
#cctGameView.cct-summary-active > :is(.cct-ict-pad,.keypad){ display: none; }
#cctGameView:not(.cct-summary-active) .speaker{ width: min(5.75rem, 36cqh); height: min(5.75rem, 36cqh); }
#cctGameView:not(.cct-summary-active) .visual-number{ font-size: min(3.75rem, 26cqh); min-width: min(5.75rem, 36cqh); min-height: min(5.75rem, 36cqh); }
#cctGameView:not(.cct-summary-active) .answer-display{ font-size: min(2.5rem, 16cqh); }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .center-message:not(.center-message--summary){ gap: min(0.75rem, 3cqh); padding-top: min(1.5rem, 5cqh); padding-bottom: min(1.5rem, 5cqh); }
body.cl-dock:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible) .instrument{ margin-top: 0; }
body.cl-dock .game-settings-toggle{ display: none !important; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView):not(.posner-summary-active):not(.cct-summary-active) > .instrument-head{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 0.5rem; padding: 0.75rem 0.875rem 0.625rem;
  }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .ih-left{ order: 1; flex: 1 1 0; min-width: 0; gap: 0.5rem; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .cct-head-center{ order: 2; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .meta{ order: 3; flex: none; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .game-menu{ order: 4; flex: none; display: block; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head h1{
    flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: clamp(1rem, 0.75rem + 1.2vw, 1.3125rem); line-height: 1.25;
  }
body.cl-dock .instrument-head .game-back-arrow{ position: static; display: inline-flex !important; flex: none; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head :is(.game-back-arrow,.dr-toggle){
    display: inline-flex; width: 2.25rem; min-width: 2.25rem; height: 2.25rem; flex: none;
  }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head .game-menu :is(.cct-menu-btn,.menu-btn){ height: 2.25rem; padding: 0 0.8rem; font-size: 0.9rem; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head .meta :is(.meta-timer,.meta-count),
  body.cl-dock #cctGameView .instrument-head .meta#cctTimeMeta{ height: 2.25rem; }
@media (max-width: 36rem){
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head{ padding: 0.625rem 0.75rem 0.5rem; row-gap: 0.5rem; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head::after{ content: ""; order: 3; flex: 0 0 100%; height: 0; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .game-menu{ order: 2; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .meta{ order: 4; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .cct-head-center{ order: 5; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head .meta :is(.meta-timer,.meta-count),
    body.cl-dock #cctGameView .instrument-head .meta#cctTimeMeta{ height: 2rem; font-size: 0.8rem; }
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible){ padding-left: 0.5rem; padding-right: 0.5rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView) > .readout{ padding: 0.75rem 1rem; gap: 0.625rem 0.375rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) :is(.cell,.cct-cell) .label{ font-size: 0.75rem; margin-bottom: 0.25rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) :is(.cell,.cct-cell) .value{ font-size: 1.0625rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView):not(.posner-summary-active):not(.cct-summary-active) > :is(.footer,.cct-footer){
      display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; padding: 0.25rem 0.75rem 0.875rem;
    }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.footer,.cct-footer) button{ padding: 0.5rem 0.75rem; font-size: 0.8125rem; white-space: nowrap; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .semantic-buttons{ padding-left: 0.75rem; padding-right: 0.75rem; }
#cctGameView > .cct-ict-pad{ padding: 0.75rem 0.75rem 0.75rem; gap: 0.5rem; }
#cctGameView > .keypad{ padding: 0.625rem 0.75rem 0.25rem; gap: 0.375rem; }
#cctGameView > .keypad button{ padding: 0.6rem 0; }
}
@media (orientation: landscape) and (max-height: 32rem){
.topnav{ padding: 0.25rem 1rem; }
.topnav-brand{ font-size: 0.95rem; }
.topnav-hamburger{ display: flex; width: 2.125rem; height: 2.125rem; }
.topnav-collapsible{
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.875rem;
      padding: 1rem 1.25rem 1.25rem; max-height: calc(100vh - var(--topnav-h, 3rem)); max-height: calc(100dvh - var(--topnav-h, 3rem)); overflow-y: auto; overscroll-behavior: contain;
      background: rgb(4,26,28); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
      border-bottom: 0.0625rem solid var(--panel-border); box-shadow: 0 1rem 1.875rem -0.875rem rgba(0,0,0,0.5);
    }
html[data-theme="light"] .topnav-collapsible{ background: rgb(238,247,247); }
html[data-theme="cyan"] .topnav-collapsible{ background: rgb(12,47,49); }
.topnav-collapsible.open{ display: flex; }
.topnav-links{ position: static; transform: none; flex: none; flex-direction: column; align-items: stretch; gap: 0.125rem; }
.topnav-link{ text-align: left; width: 100%; border-radius: 0.625rem; }
.topnav-actions{ flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.topnav-actions > button{ width: 100%; }
.theme-select{ width: 100%; text-align: left; }
.nav-account{ width: 100%; justify-content: space-between; }
.topnav-games-panel{ position: static; display: none; padding-top: 0.375rem; }
.topnav-games.open .topnav-games-panel{ display: flex; }
.topnav-games:hover .topnav-games-panel{ display: none; }
.topnav-games.open:hover .topnav-games-panel{ display: flex; }
body:has(:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible){ padding-left: 0.75rem; padding-right: 0.75rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView).visible:not(.posner-summary-active),
    #cctGameView.visible:not(.cct-summary-active){
      display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(13.5rem, 1fr);
      grid-template-rows: auto auto auto 1fr auto auto; column-gap: 0.75rem; align-items: start;
      padding-bottom: 0.5rem;
    }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > .instrument-head{ grid-column: 1 / -1; grid-row: 1; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > :is(.stage,.cct-stage){ grid-column: 1; grid-row: 2 / 6; margin: 0 0 0 0.5rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > :is(.readout,.cct-readout){ grid-column: 2; grid-row: 2; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > .semantic-progress-bar{ grid-column: 2; grid-row: 3; margin: 0.25rem 0.5rem 0 0; width: auto; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > :is(.semantic-buttons,.keypad,.cct-ict-pad){ grid-column: 2; grid-row: 5; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView).visible > :is(.footer,.cct-footer){ grid-column: 1; grid-row: 6; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head{ padding: 0.375rem 0.625rem 0.375rem; gap: 0.375rem 0.5rem; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head :is(.game-back-arrow,.dr-toggle){ width: 2rem; min-width: 2rem; height: 2rem; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head .game-menu :is(.cct-menu-btn,.menu-btn){ height: 2rem; padding: 0 0.7rem; font-size: 0.8125rem; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head .meta :is(.meta-timer,.meta-count),
    body.cl-dock #cctGameView .instrument-head .meta#cctTimeMeta{ height: 2rem; padding: 0 0.6rem; font-size: 0.8rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView) > .readout{ grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.125rem 0.5rem 0.25rem 0; gap: 0.375rem 0.25rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) :is(.cell,.cct-cell) .label{ font-size: 0.7rem; margin-bottom: 0.125rem; line-height: 1.2; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) :is(.cell,.cct-cell) .value{ font-size: 0.95rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .cell .value-sub{ font-size: 0.7rem; margin-top: 0; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .semantic-buttons{ padding: 0.375rem 0.5rem 0 0; gap: 0.5rem; }
#cctGameView > .cct-ict-pad button{ min-height: 2.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
#cctGameView > .keypad button{ padding: 0 0; height: 2.125rem; min-height: 0; font-size: 0.9rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView):not(.posner-summary-active):not(.cct-summary-active) > :is(.footer,.cct-footer){
      display: flex; justify-content: flex-end; align-items: center; padding: 0.375rem 0 0 0.5rem;
    }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.footer,.cct-footer) button{ padding: 0.4rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
}
#nbackGameView.visible{ height: calc(100vh - var(--nb-nav-offset, var(--topnav-h, 4.75rem))); height: calc(100dvh - var(--nb-nav-offset, var(--topnav-h, 4.75rem))); }
.instrument:has(#nbackGameView.visible){ height: 100vh; height: 100dvh; }
#relGameView.visible{ height: calc(100vh - var(--topnav-h, 4.75rem)); height: calc(100dvh - var(--topnav-h, 4.75rem)); }
#nbackGameView .nbg-stage{ min-height: 0; }
:is(#nbackGameView,#relGameView) .instrument-head > .ih-left{ flex: 1 1 auto; min-width: 0; }
:is(#nbackGameView,#relGameView) .instrument-head h1{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#nbackGameView,#relGameView) .instrument-head > .meta{ flex: none; }
#nbStage :is(.nbg-persp,.nb-vcrank){ inset: 3.25rem 12.5% 0.5rem; scale: var(--nb-fit, 1); }
#nbStage .nb-nlevel{ inset: 3.25rem 12.5% 0.5rem; }
#nbStage .nbg-scene.flat, #nbStage.tally .nbg-scene.flat{ translate: 0 0 0; }
#nbStage.nbg-stage:has(.nbg-scene.flat) .nb-nlevel{ translate: 0 0; }
@media (max-width: 43.75rem){
#nbStage :is(.nbg-persp,.nb-vcrank), #nbStage .nb-nlevel{ inset: 3.25rem 0 6.5rem; }
}
@media (orientation: portrait) and (min-width: 43.8125rem) and (max-width: 64rem){
#nbStage :is(.nbg-persp,.nb-vcrank), #nbStage .nb-nlevel{ inset: 3.5rem 0 7.75rem; }
}
@media (max-width: 26rem){
:is(#nbackGameView,#relGameView) .instrument-head .meta{ flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 0.3rem; }
:is(#nbackGameView,#relGameView) .instrument-head .meta .meta-count{ display: inline-block; line-height: 2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; padding: 0 0.5rem; }
#nbackGameView .nb-float button{ min-width: 0; padding: 0.35rem 0.55rem !important; font-size: 0.78rem !important; }
}
@media (orientation: landscape) and (max-height: 32rem){
:is(#nbackGameView,#relGameView) .instrument-head{ flex-wrap: nowrap; gap: 0.375rem 0.5rem; padding: 0.375rem 0.75rem; }
:is(#nbackGameView,#relGameView) .instrument-head .ih-left{ gap: 0.375rem; }
:is(#nbackGameView,#relGameView) .instrument-head .nb-hbtn{ width: 2rem; min-width: 2rem; height: 2rem; }
:is(#nbackGameView,#relGameView) .instrument-head .meta{ gap: 0.375rem; }
:is(#nbackGameView,#relGameView) .instrument-head .meta .meta-timer::before{ width: 0.95rem; height: 0.95rem; }
:is(#nbackGameView,#relGameView) .instrument-head .cct-menu-btn{ height: 2rem !important; min-height: 0 !important; padding: 0 0.7rem !important; font-size: 0.8rem !important; }
#nbackGameView .nb-float{ top: 0.5rem; right: 0.5rem; }
#nbackGameView .nb-float.nb-float-l{ top: 0.5rem !important; left: 0.5rem; }
#nbackGameView .nb-float button{ min-width: 0; min-height: 0; height: auto; padding: 0.35rem 0.7rem !important; font-size: 0.85rem !important; line-height: 1.2; }
#nbStage :is(.nbg-persp,.nb-vcrank), #nbStage .nb-nlevel{ inset: 3rem max(5.5rem, 12.5%) 0.5rem; }
#nbStage.ext :is(.nbg-persp,.nb-vcrank){ bottom: 0; }
#nbStage .nb-exec-word{ margin-top: 0; font-size: clamp(1.75rem, 12dvh, 4rem); }
}
@media (min-width: 53.8125em) and (max-width: 59.9375em){
.topnav{ padding: 0.75rem 1rem; }
.topnav-hamburger{ display: flex; }
.topnav-inner{ position: static; }
.topnav-collapsible{
      display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-radius: 0;
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.875rem;
      padding: 1rem 1.25rem 1.25rem;
      background: rgb(4,26,28); backdrop-filter: none; -webkit-backdrop-filter: none;
      border-top: 0.0625rem solid var(--panel-border); border-bottom: 0.0625rem solid var(--panel-border);
      box-shadow: 0 1.25rem 2rem -1rem rgba(0,0,0,0.55);
      max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain;
    }
html[data-theme="light"] .topnav-collapsible{ background: rgb(223,240,240); box-shadow: 0 1.25rem 2rem -1rem rgba(20,30,60,0.25); }
html[data-theme="cyan"] .topnav-collapsible{ background: rgb(4,26,28); }
.topnav-collapsible.open{ display: flex; }
.topnav-links{ position: static; transform: none; flex: none; flex-direction: column; align-items: stretch; gap: 0.125rem; }
.topnav-link{ text-align: left; width: 100%; border-radius: 0.625rem; }
.topnav-actions{ flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.topnav-actions > button{ width: 100%; }
.theme-select{ width: 100%; text-align: left; }
.nav-account{ width: 100%; justify-content: space-between; }
.topnav-games-panel{ position: static; display: none; padding-top: 0.375rem; }
.topnav-games.open .topnav-games-panel{ display: flex; }
.topnav-games:hover .topnav-games-panel{ display: none; }
.topnav-games.open:hover .topnav-games-panel{ display: flex; }
}
@media (max-width: 59.9375em), (orientation: landscape) and (max-height: 32rem){
.topnav-collapsible .topnav-cta{ margin-left: 0; }
.topnav-collapsible .nav-icon-row{ flex-wrap: wrap; row-gap: 0.5rem; }
.topnav-collapsible .nav-icon-menu{ display: contents; }
.topnav-collapsible .nav-icon-panel{
      position: static; order: 5; flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box;
      margin: 0; 
    }
.topnav-collapsible .nav-icon-panel .menu-item{ width: 100%; }
}
.nav-icon-panel{ min-width: 14rem; max-width: calc(100vw - 1.5rem); }
@media (pointer: coarse){
:is(.topnav, #landingView, .page-overlay, #infoOverlay, #loginOverlay, #signupOverlay, #routineOverlay,
        #clProgressOverlay, #clKeysOverlay, #clSheetOverlay, .cl-dialog-overlay)
      :is(button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])):not(.lp-chip):not(.lp-today-link):not(#switchToSignup):not(#switchToLogin):not(.avatar-picker-label):not(.lp-empty-reset):not(.topnav-brand){
      min-height: 2.5rem;
    }
.topnav-hamburger{ width: 2.5rem; height: 2.5rem; }
:is(.topnav, #landingView, .page-overlay, .info-overlay) :is(.modal-close-x, .study-fav, .study-drag, .profile-card-delete, .profile-card-dup, .iq-act button, .guide-save-btn){
      min-width: 2.5rem; min-height: 2.5rem;
    }
.studies-grid.reorderable .study-drag{ right: 3.5rem; }
.iq-seg{ min-height: 2.875rem; }
.iq-seg button{ min-height: 0; }
.iq-f input{ min-height: 2.875rem; }
.guide-nav-link, .guide-toc-link{ display: flex; align-items: center; min-height: 2.5rem; box-sizing: border-box; }
.landing-view .game-card .mode-info-btn{ z-index: 1; }
.landing-view .game-card .mode-info-btn::after{ content: ''; position: absolute; inset: -0.75rem; }
button.lp-chip{ position: relative; }
button.lp-chip::after{ content: ''; position: absolute; inset: -0.4rem -0.2rem; }
.lp-chips{ row-gap: 0.75rem; }
:is(.contact-card-link, .study-card-link, .iq-t-open, .topnav-brand, button.lp-today-link, #switchToSignup, #switchToLogin, .avatar-picker-label){
      padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; margin-top: -0.75rem !important; margin-bottom: -0.75rem !important;
    }
.contact-card-link{ display: inline-block; }
.contact-social-row{ gap: 0.25rem; }
.contact-social-link{ min-width: 2.5rem; min-height: 2.5rem; }
.contact-social-block{ padding-top: 0.75rem; }
}
.lp-today button.lp-today-link{ flex-basis: 100%; margin-left: 0; }
@media (max-width: 36em){
.lp-today{ column-gap: 0.75rem; }
.lp-today .lp-today-sep{ display: none; }
}
@media (max-width: 30em){
body:has(#landingView.visible:not([hidden])){ padding-left: 0.75rem; padding-right: 0.75rem; }
.landing-view{ padding-left: 0.875rem; padding-right: 0.875rem; }
}
@media (max-width: 26em){
#aboutOverlay .about-hero-stat{ padding-left: 0.375rem; padding-right: 0.375rem; }
#aboutOverlay .about-hero-stat-value{ font-size: 1.6rem; white-space: nowrap; }
#aboutOverlay .about-hero-stat-label{ font-size: 0.78rem; letter-spacing: 0.04em; }
}
@media (max-width: 30em){
#aboutOverlay .faq-q, .upgrade-faq-q{ padding-left: 2.5rem; padding-right: 2.5rem; }
#aboutOverlay .faq-icon, .upgrade-faq-icon{ right: 1rem; }
}
.contact-card-icon svg{ width: 1.125rem; height: 1.125rem; }
@media (max-width: 45em){
.studies-filter-group .layout-toggle button{ flex: 1 1 0; justify-content: center; }
}
@media (min-width: 48em){
.guides-grid:not(.is-list):has(> .guide-card:last-child:nth-child(even):nth-child(3n+1)),
    .guides-grid:not(.is-list):has(> .guide-card:last-child:nth-child(even):nth-child(3n+2)){
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 45.0625em) and (max-width: 64em){
.studies-grid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
}
@media (min-width: 40.0625rem){
.iq-row{ grid-template-columns: 7rem minmax(0,1.3fr) 6.5rem 6.5rem minmax(0,1.5fr) 4.5rem; }
}
@media (min-width: 40.0625rem) and (pointer: coarse){
.iq-row{ grid-template-columns: 7rem minmax(0,1.3fr) 6.5rem 6.5rem minmax(0,1.5fr) 5.25rem; }
}
@media (max-width: 60rem){
html[data-ui-size="130"] .iq-row{ grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "t a" "d s" "p s" "n n"; gap: 0.15rem 0.75rem; }
html[data-ui-size="130"] .iq-row.h{ display: none; }
html[data-ui-size="130"] .iq-row .tt{ grid-area: t; font-weight: 600; }
html[data-ui-size="130"] .iq-row .dd{ grid-area: d; font-size: 0.78rem; }
html[data-ui-size="130"] .iq-row .sc{ grid-area: s; text-align: right; }
html[data-ui-size="130"] .iq-row .pc{ grid-area: p; text-align: left; font-size: 0.78rem; }
html[data-ui-size="130"] .iq-row .nt{ grid-area: n; font-size: 0.8rem; }
html[data-ui-size="130"] .iq-row .nt:empty{ display: none; }
html[data-ui-size="130"] .iq-act{ grid-area: a; }
}
.iq-filter{ min-width: 0; max-width: 100%; }
.iq-filter select{ min-width: 0; max-width: min(14rem, 100%); }
.iq-row .nt{ white-space: normal; overflow-wrap: anywhere; }
.iq-stat small{ white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 40.0625rem) and (max-width: 56rem){
.iq-fields{ grid-template-columns: 8rem minmax(0,1fr) 11rem; }
.iq-f-score{ grid-column: 1; }
.iq-f-sd{ grid-column: 2 / -1; }
.iq-f-test{ grid-column: 1 / 3; }
.iq-f-date{ grid-column: 3; }
.iq-stats{ grid-template-columns: repeat(6, minmax(0,1fr)); }
.iq-stat{ grid-column: span 2; }
.iq-stat:nth-child(n+4){ grid-column: span 3; }
}
@media (max-width: 40rem){
.iq-fields{ grid-template-columns: minmax(0,2fr) minmax(0,3fr); }
.iq-row{ grid-template-columns: minmax(0,1fr) fit-content(5.5rem) auto; column-gap: 0.5rem; }
.iq-row .sc small{ white-space: normal; }
}
@media (max-width: 25em){
.upgrade-features{ grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 45.01em){
.pricing-tier{ min-height: calc(100vh - 8rem); }
}
@media (max-width: 45em){
.pricing-tier:first-child{ min-height: calc(100vh - 8rem); }
}
@media (max-width: 30em){
.profiles-grid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr)); gap: 0.75rem; }
}
.profile-form{ max-width: 30rem; }
#profileCreateForm{ margin-bottom: 1rem; }
.profile-form-actions button{ white-space: nowrap; }
.info-card:has(> .modal-close-x){ position: relative; }
:is(#infoOverlay, #loginOverlay, #signupOverlay, #routineOverlay, #clProgressOverlay, #clKeysOverlay, #clSheetOverlay) > .info-card{
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  }
.cl-progress-card > .info-title{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.cl-progress-card .cl-weekly-link{ float: none; margin-left: auto; }
@media (max-width: 30em){
.cl-progress-card .cl-weekly-link{ margin-left: 0; }
}
.clk-row > span:last-child{ text-align: right; }
@media (max-width: 68em){
.guide-article > .page-back{ padding-left: 0; }
}
html:has(body.page-open){ scroll-padding-top: calc(var(--topnav-h, 4.75rem) + 0.75rem); }
@media (min-width: 60em) and (max-width: 75em){
.topnav{ padding-left: 1rem; padding-right: 1rem; }
.topnav-inner{ gap: 0.75rem; }
.topnav-links{ column-gap: 0; }
.topnav-link{ padding-left: 0.6rem; padding-right: 0.6rem; }
.topnav-cta{ margin-left: 0.35rem; padding-left: 0.9rem; padding-right: 0.9rem; }
.nav-icon-row{ gap: 0.25rem; }
}
@media (min-width: 60em){
.topnav-games-panel-inner{ min-width: max-content; }
}
.topnav-games-item > span:first-child{ white-space: nowrap; }
@media (min-width: 60em) and (max-width: 62em){
.topnav-inner{ gap: 0.5rem; }
.topnav-link{ font-size: 0.875rem; padding-left: 0.45rem; padding-right: 0.45rem; }
.topnav-cta{ font-size: 0.875rem; margin-left: 0.25rem; padding-left: 0.8rem; padding-right: 0.8rem; }
.topnav-actions{ gap: 0.5rem; }
}
@media (max-width: 53.75em), (orientation: landscape) and (max-height: 32rem){
.topnav-inner{ position: static; }
.topnav-collapsible{
      top: 100%; left: 0; right: 0; margin: 0; border-radius: 0;
      background: rgb(4,26,28); backdrop-filter: none; -webkit-backdrop-filter: none;
      border-top: 0.0625rem solid var(--panel-border); border-bottom: 0.0625rem solid var(--panel-border);
      box-shadow: 0 1.25rem 2rem -1rem rgba(0,0,0,0.55);
      max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain;
    }
html[data-theme="light"] .topnav-collapsible{ background: rgb(223,240,240); box-shadow: 0 1.25rem 2rem -1rem rgba(20,30,60,0.25); }
html[data-theme="cyan"] .topnav-collapsible{ background: rgb(4,26,28); }
}
.info-card > .modal-close-x ~ .info-title{ padding-right: 2.75rem; }
:is(#geoView, #semanticView, #linguisticView).visible:not(.posner-summary-active) .semantic-buttons{ display: flex !important; }
:is(#geoView, #semanticView, #linguisticView) .semantic-buttons[style*="none"]{ opacity: 0.4; pointer-events: none; }
:is(#geoView, #semanticView, #linguisticView) .semantic-buttons[style*="none"] button{ box-shadow: none; }
.time-picker{ flex-wrap: nowrap !important; gap: clamp(0.35rem, 2vw, 1.125rem); }
.time-picker-col{ flex: 1 1 0 !important; min-width: 0; }
.cl-pop:has(.cl-pop-tp){ min-width: 0; width: min(22rem, calc(100vw - 1rem)); box-sizing: border-box; }
@media (max-width: 40rem){
.time-picker-label{ font-size: 0.68rem; letter-spacing: 0.06em; }
.time-stepper{ gap: 0.1rem; padding: 0.2rem; }
.time-stepper-btn{ width: 1.35rem; height: 2.1rem; font-size: 1.1rem; }
.time-stepper-select{ height: 2.1rem; font-size: 0.95rem; padding: 0 0.8rem 0 0.2rem; background-position: calc(100% - 0.55rem) center, calc(100% - 0.3rem) center; }
}
@media (max-width: 22rem){
.time-stepper-btn{ width: 1.05rem; }
}
.semantic-buttons .cl-ans-proxy{ display: none; }
.semantic-buttons.cl-proxy-on{ opacity: 1 !important; pointer-events: auto !important; }
.semantic-buttons.cl-proxy-on > button:not(.cl-ans-proxy){ display: none; }
.semantic-buttons.cl-proxy-on > .cl-ans-proxy{ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 1 1 100%; width: 100%; }
.info-card .info-poem.cl-gi{ font-style: normal; font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; white-space: normal; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--ink); }
.cl-gi p{ margin: 0 0 0.6rem; line-height: 1.55; }
.cl-gi ul{ margin: 0 0 0.7rem; padding-left: 1.1rem; color: var(--ink-dim); line-height: 1.5; }
.cl-gi li + li{ margin-top: 0.2rem; }
.cl-gi-example{ margin: 0 0 0.7rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: rgba(var(--accent-rgb),0.07); font-size: 0.88rem; color: var(--ink-dim); }
.cl-gi-example b{ display: block; margin-bottom: 0.3rem; color: rgb(var(--accent-rgb)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.cl-gi-example p{ margin: 0 0 0.3rem; }
.cl-gi-trains{ font-size: 0.85rem; color: var(--ink-dim); }
.cl-gi-trains b{ color: rgb(var(--accent-rgb)); font-weight: 700; margin-right: 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.instrument:has(#nbackGameView.visible), .instrument:has(#relGameView.visible){ height: auto; top: 0; bottom: 0; }
@media (max-width: 40rem), (orientation: landscape) and (max-height: 32rem){
#nbStage .nbg-persp{ perspective: 80svmin; }
}
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (max-height: 32rem){
#nbStage:not(.ext) .nbg-persp{ top: 0.25rem !important; bottom: 0.25rem !important; perspective: 80svmin; }
}
#rrtAnswers .rrt-ans-proxy{ display: none; }
#rrtAnswers.rrt-proxy-on > .rrt-ans-proxy{ display: inline-flex; align-items: center; justify-content: center; flex: 1 1 100%; width: 100%; grid-column: 1 / -1; opacity: 1; pointer-events: auto; }
.rrt-trend{ font-size: 0.72rem; font-weight: 700; color: var(--ink-dim); }
.rrt-trend.up{ color: var(--nbg-ok, #22c55e); }
.rrt-trend.down{ color: var(--nbg-bad, #ef4444); }
.rrt-speed{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm);
    background: rgba(var(--accent-rgb), 0.08); border: 0.0625rem solid rgba(var(--accent-rgb), 0.28); cursor: pointer; }
.rrt-speed:hover, .rrt-speed:focus-visible{ border-color: rgba(var(--accent-rgb), 0.55); }
.rrt-speed-v{ font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rrt-speed-v small{ font-size: 0.85rem; font-weight: 600; color: var(--ink-dim); }
.rrt-speed-l .rrt-trend{ display: block; margin-top: 0.2rem; font-size: 0.8rem; }
.rrt-speed-best{ margin-top: 0.25rem; font-size: 0.75rem; color: var(--ink-dim); }
.rrt-speed-r{ display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: 0 1 12rem; min-width: 8rem; }
.rrt-speed-r span{ font-size: 0.68rem; color: var(--ink-dim); }
.rrt-spark{ width: 100%; height: 2.4rem; overflow: visible; }
.rrt-spark path{ fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 36rem){
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head h1{
      white-space: normal; text-overflow: clip; overflow: hidden; overflow-wrap: normal;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2;
    }
}
@media (orientation: landscape) and (max-height: 32rem){
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head{ flex-wrap: nowrap; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head::after{ content: none; display: none; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .cct-head-center{ order: 2; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .meta{ order: 3; flex: none; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .game-menu{ order: 4; }
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head h1,
    :is(#nbackGameView,#relGameView) .instrument-head h1{
      font-size: 0.95rem; line-height: 1.12; white-space: normal; text-overflow: clip; overflow: hidden; overflow-wrap: normal;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
}
:is(#gameView,#geoView,#semanticView,#linguisticView) .semantic-buttons button,
  #cctGameView .cct-ict-pad button{ white-space: nowrap; min-width: 0; }
@media (orientation: landscape) and (max-height: 32rem){
:is(#gameView,#geoView,#semanticView,#linguisticView) > .semantic-buttons button{ padding-left: 0.5rem; padding-right: 0.5rem; }
#cctGameView > .cct-ict-pad button{ font-size: 1.05rem; padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (max-width: 22.5rem){
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView):not(.posner-summary-active):not(.cct-summary-active) > :is(.footer,.cct-footer){ flex-wrap: nowrap; gap: 0.3rem; padding-left: 0.5rem; padding-right: 0.5rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.footer,.cct-footer) button{ padding-left: 0.55rem; padding-right: 0.55rem; min-width: 0; }
}
.cl-pop:has(.cl-pop-tp){ width: min(24rem, calc(100vw - 1rem)); }
.cl-pop .time-picker{ gap: 0.5rem; }
.cl-pop .time-stepper{ gap: 0.15rem; padding: 0.2rem; min-width: 0; }
.cl-pop .time-stepper-btn{ width: 1.5rem; flex: none; font-size: 1.15rem; }
.cl-pop .time-stepper-select{ min-width: 0; padding: 0 0.85rem 0 0.2rem; font-size: 1rem; background-position: calc(100% - 0.6rem) center, calc(100% - 0.35rem) center; }
@media (max-width: 22rem){
.cl-pop .time-stepper-btn{ width: 1.1rem; }
.cl-pop .time-picker{ gap: 0.3rem; }
}
.nb-keybind-overlay .progress-graph-modal{ max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
body:has(:is(#nbackGameView,#relGameView).visible) .toast{
    top: calc(var(--nb-nav-offset, var(--topnav-h, 4.75rem)) + 0.75rem); bottom: auto; transform: translate(-50%, -0.75rem);
  }
body:has(:is(#nbackGameView,#relGameView).visible) .toast.visible{ transform: translate(-50%, 0); }
:is(#linguisticSetupScreen,#semanticSetupScreen) > *{ flex-shrink: 0; }
#linguisticSetupScreen > .linguistic-word-list{ flex-shrink: 1; min-height: 4.5rem; }
#posnerCalendarMonthView :is(.cct-cal-weekdays, .cct-cal-grid){ grid-template-columns: repeat(7, minmax(0, 1fr)); }
#posnerCalGrid .cct-cal-cell{ min-width: 0; padding: 0; }
@media (pointer: coarse){
.linguistic-word-remove{ min-width: 2.5rem; }
#posnerSubProfilesOverlay :is(select, button){ min-height: 2.5rem; }
}
:is(#linguisticPresetOverlay,#linguisticEditOverlay,#semanticCustomizeOverlay,#semanticCategoryEditOverlay,#semanticCategoryPickerOverlay) > .info-card{ margin-top: auto; margin-bottom: auto; }
@media (max-height: 32rem){
:is(#linguisticPresetOverlay,#linguisticEditOverlay,#semanticCustomizeOverlay,#semanticCategoryEditOverlay,#semanticCategoryPickerOverlay){ padding: 0.5rem; }
:is(#linguisticPresetOverlay,#linguisticEditOverlay,#semanticCustomizeOverlay,#semanticCategoryEditOverlay,#semanticCategoryPickerOverlay) > .info-card{ padding: 1rem 1.25rem; }
:is(#linguisticPresetOverlay,#linguisticEditOverlay,#semanticCustomizeOverlay,#semanticCategoryEditOverlay,#semanticCategoryPickerOverlay) :is(.linguistic-preset-list, .linguistic-word-list){ max-height: max(4.5rem, calc(100svh - 18rem)); }
#semanticCategoryEditOverlay .linguistic-input-row button{ flex: 0 0 auto; }
}
@media (max-width: 22.5rem){
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head .game-menu :is(.cct-menu-btn,.menu-btn){ padding: 0 0.6rem; }
}
@media (max-width: 21rem) and (orientation: portrait){
body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .game-menu{ order: 6; margin-left: auto; }
}
#nbStage .nb-std-next{ top: 0.75rem; bottom: auto; white-space: nowrap; }
@media (max-width: 43.75rem) and (orientation: portrait){
#nbStage :is(.nbg-persp,.nb-vcrank), #nbStage .nb-nlevel{ bottom: 8.75rem; }
#nbStage .nb-std-next{ top: auto; bottom: 6.3rem; }
}
@media (orientation: portrait) and (min-width: 43.8125rem) and (max-width: 64rem){
#nbStage :is(.nbg-persp,.nb-vcrank), #nbStage .nb-nlevel{ bottom: 10.5rem; }
#nbStage .nb-std-next{ top: auto; bottom: 7.6rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
#nbStage .nb-std-next{ top: 0.4rem; left: calc(50% + 1.5rem); transform: none; padding: 0.3rem 0.7rem; font-size: 0.85rem; line-height: 1.2; min-height: 2.25rem; }
}
@media (max-width: 48em){
#relGameView .instrument-head .nb-hbtn{ width: 2.25rem; height: 2.25rem; min-width: 2.25rem; }
}
@media (max-width: 26rem){
.nbd-page .nbd-row .seg-toggle{ width: min(13rem, 52%); }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(3)){ width: min(14.5rem, 62%); }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(4)){ width: min(16rem, 70%); }
.nbd-page .nbd-row > span{ min-width: 0; }
.nbd-page .nbd-row{ flex-wrap: wrap; }
:is(#nbDrawer, .nbd-page).nbd-page .nbd-row > span:first-child, #rrtDrawer .nbd-row.rrt-fhead > span{ flex: 100 1 7em; min-width: min-content; }
.nbd-page .nbd-row > :last-child:not(:first-child){ margin-left: auto; }
.nbd-page .nbd-row .seg-toggle{ min-width: min-content; }
.nbd-page .nbd-row .seg-toggle > .seg-btn{ min-width: auto; }
:is(#nbDrawer, .nbd-page).nbd-page .nbd-row > .seg-toggle:last-child:not(:first-child){ flex-grow: 1; }
:is(#nbDrawer, .nbd-page).nbd-page .nbd-row > .seg-toggle:has(> :nth-child(3)):not(:has(> :nth-child(4))){ width: 100%; }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(4)){ grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
.nbd-page .nbd-row .seg-toggle:has(> :nth-child(5)){ grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
.nbd-page .nbd-preset .nbd-mode{ padding-left: 0; padding-right: 0; letter-spacing: 0.06em; }
.nbd-page .time-picker{ gap: 0.3rem; }
.nbd-page .time-stepper{ gap: 0.1rem; padding: 0.12rem; }
.nb-drawer.nbd-page .time-stepper-select{ font-size: 0.95rem; }
html body :is(#nbackGameView,#relGameView) .instrument-head .meta :is(.meta-timer,.meta-count){ font-size: 0.72rem; padding: 0 0.45rem; gap: 0.3rem; }
html body :is(#nbackGameView,#relGameView) .instrument-head .cct-menu-btn{ padding: 0 0.55rem !important; }
}
@media (pointer: coarse){
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView,#nbackGameView,#relGameView) .instrument-head .nb-hbtn,
    body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) .instrument-head :is(.game-back-arrow,.dr-toggle){ width: 2.5rem; min-width: 2.5rem; height: 2.5rem; }
.game-back-arrow, .game-settings-toggle{ min-width: 2.5rem; min-height: 2.5rem; }
html body :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView,#nbackGameView,#relGameView) .instrument-head .game-menu :is(.cct-menu-btn,.menu-btn),
    html body .game-menu-corner :is(.cct-menu-btn,.menu-btn){ height: 2.5rem !important; min-height: 2.5rem !important; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.footer,.cct-footer) button,
    :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) :is(.center-message,.posner-wait) button,
    :is(#semanticCompleteScreen,#geoCompleteScreen,#linguisticCompleteScreen,#cctEndScreen,#nbEnd,#nbackSummaryView,#relSummaryView) button,
    #linguisticEditOverlay button, #nbStage .nb-std-next{ min-height: 2.5rem; }
:is(#semanticView,#geoView,#linguisticView,#gameView,#cctGameView,#nbackSummaryView,#relSummaryView) details.stat-more > summary{ min-height: 2.5rem; }
:is(#menuPanel,#cctMenuPanel,#nbMenuPanel,#relMenuPanel) .menu-item{ min-height: 2.5rem; }
.nb-drawer .nbd-icon-btn{ width: 2.5rem; height: 2.5rem; }
.nb-drawer .seg-btn, .nb-drawer .nbd-btn, .nb-drawer .nbd-btn-grid button, .nb-drawer .manual-select, .nb-drawer .nbd-num, .nb-drawer .full-btn,
    .nb-drawer select.nbd-mode-select, .nb-drawer .nb-mode-chip{ min-height: 2.5rem; }
.nb-drawer .time-stepper-btn, .nb-drawer .time-stepper-select, .cl-pop .time-stepper-btn, .cl-pop .time-stepper-select{ height: 2.5rem; }
.cl-pop button{ min-height: 2.5rem; }
.cl-pop .cl-pop-row button{ width: 2.5rem; }
#clSheetBody button, :is(#semanticCustomizeOverlay,#semanticCategoryPickerOverlay,#semanticCategoryEditOverlay,#linguisticPresetOverlay) button{ min-height: 2.5rem; }
.progress-graph-close{ width: 2.5rem; height: 2.5rem; }
.progress-graph-toggle, .progress-graph-overlay .manual-select, .nb-keybind-btn, .nb-keybind-reset{ min-height: 2.5rem; }
.info-card .modal-close-x{ min-width: 2.5rem; min-height: 2.5rem; }
:is(#cctCalendarOverlay,#posnerCalendarOverlay,#cctMilestonesOverlay,#posnerMilestonesOverlay,#nbInfoOverlay) button{ min-height: 2.5rem; }
}
.progress-graph-modal{ overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.progress-graph-overlay:not(.nb-recent-overlay) .progress-graph-modal > *{ flex-shrink: 0; }
@media (orientation: landscape) and (max-height: 32rem){
.progress-graph-overlay{ padding: 0.5rem; }
.progress-graph-modal{ max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); padding: 0.875rem 1rem 1rem; gap: 0.6rem; }
.progress-graph-svg{ max-height: calc(100vh - 8.5rem); max-height: calc(100dvh - 8.5rem); }
.cct-cal-tod{ flex-wrap: nowrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.cct-cal-tod-chip{ flex: 1 1 0; min-width: 0; padding: 0.3rem 0.5rem; font-size: 0.78rem; }
.cct-cal-tod-chip .tod-val{ font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cct-cal-cell{ aspect-ratio: auto; height: 2.25rem; }
}
:is(#semanticView).visible:not(.posner-summary-active) > .stage .semantic-grid{ gap: min(0.625rem, 2.2cqh) min(0.625rem, 2cqw); grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 28cqw), 1fr)); }
:is(#semanticView).visible:not(.posner-summary-active) > .stage .semantic-grid-cell{ font-size: clamp(0.7rem, 5.4cqh, 1.125rem); line-height: 1.15; padding: min(0.75rem, 2.4cqh) 0.3rem; }
@container (max-width: 23rem){
:is(#semanticView).visible:not(.posner-summary-active) > .stage .semantic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 32rem){
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView):not(.posner-summary-active):not(.cct-summary-active) > :is(.footer,.cct-footer){ flex-wrap: nowrap; gap: 0.3rem; }
:is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > :is(.footer,.cct-footer) button{ padding-left: 0.55rem; padding-right: 0.55rem; min-width: 0; }
}
.instrument:has(#rrtGameView.visible){
    height: calc(100vh - var(--topnav-h, 4.75rem) - 2 * var(--cl-gap, 0.75rem));
    height: calc(100dvh - var(--topnav-h, 4.75rem) - 2 * var(--cl-gap, 0.75rem));
    max-height: 60rem; min-height: 18rem; display: flex; flex-direction: column;
  }
#rrtGameView.visible{ flex: 1 1 auto; min-height: 0; }
#rrtGameView > .instrument-head{ gap: 0.5rem 0.75rem; padding: 1rem 1.5rem 0.75rem; }
#rrtGameView > .instrument-head > .ih-left{ display: flex; align-items: center; gap: 0.5rem; }
#rrtGameView > .instrument-head > .meta{ display: inline-flex; align-items: center; gap: 0.5rem; }
#rrtGameView .instrument-head .nb-hbtn{ width: 2.25rem; min-width: 2.25rem; height: 2.25rem; }
.rrt-goalbar{ height: 0.25rem; margin-top: 0.3rem; border-radius: 62rem; background: rgba(var(--accent-rgb), 0.14); overflow: hidden; }
.rrt-goalbar i{ display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(var(--cyan), var(--cyan)); transition: width 300ms ease; }
html[data-theme="light"] #rrtGameView > .rrt-stage{ background: rgba(42,122,122,0.09); }
.rrt-qhead{ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1rem 0; min-height: 1.6rem; }
.rrt-type{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); overflow: hidden; min-width: 0; flex: none; max-width: calc(100% - 4.75rem); }
.rrt-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 1rem 1rem;
    display: flex; flex-direction: column; justify-content: safe center; gap: 0.25rem; font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.2rem); line-height: 1.5; }
.rrt-sec{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin: 0.4rem 0 0.2rem; }
.rrt-premises{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.rrt-premises li, .rrt-conc{ padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.06); border: 0.0625rem solid rgba(var(--accent-rgb), 0.12); overflow-wrap: anywhere; }
.rrt-conc{ position: relative; background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.35); font-weight: 600; }
.rrt-body > .rrt-premises{ flex: 0 1 auto; min-height: 4.5rem; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 60rem){
.rrt-body > .rrt-premises.rrt-many{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-content: start; }
}
.rrt-w{ font-weight: 700; color: var(--ink); }
.rrt-w.rrt-emoji{ font-weight: 400; }
.rrt-rel{ color: var(--ink-dim); }
.rrt-neg, .rrt-neg .rrt-rel{ color: var(--bad); }
html.cl-cb .rrt-neg, html.cl-cb .rrt-neg .rrt-rel{ color: var(--nbg-bad); }
.rrt-op{ display: inline-block; padding: 0 0.4rem; margin: 0 0.15rem; border-radius: 0.35rem; font-size: 0.8em; font-weight: 800; letter-spacing: 0.06em;
    color: var(--cyan); background: rgba(var(--accent-rgb), 0.14); border: 0.0625rem solid rgba(var(--accent-rgb), 0.45); vertical-align: 0.05em; }
.rrt-meta{ font-style: italic; color: var(--violet); }
.rrt-noise{ display: inline-block; width: 1.6em; height: 1.6em; vertical-align: -0.45em; border-radius: 0.25rem; overflow: hidden; background: rgba(var(--accent-rgb), 0.08); }
.rrt-noise svg{ display: block; width: 100%; height: 100%; }
.rrt-car{ display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }
.rrt-car-lab{ display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.rrt-car-text{ font-size: 1.12em; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.08); border: 0.0625rem solid rgba(var(--accent-rgb), 0.2); text-align: center; overflow-wrap: anywhere; }
.rrt-car-nav{ display: flex; justify-content: space-between; gap: 0.75rem; }
.rrt-car-nav button{ flex: 1; padding: 0.55rem 0.9rem; }
.rrt-car-nav button:disabled{ opacity: 0.4; cursor: default; }
.rrt-fb{ position: absolute; left: 50%; top: 0.6rem; transform: translate(-50%, -0.5rem); opacity: 0; pointer-events: none; z-index: 3;
    padding: 0.35rem 0.9rem; border-radius: 62rem; font-weight: 700; font-size: 0.85rem; background: var(--bg-1); border: 0.0625rem solid var(--panel-border); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
    transition: opacity 140ms ease, transform 140ms ease; }
.rrt-fb.right{ color: var(--nbg-ok); border-color: var(--nbg-ok); }
.rrt-fb.wrong{ color: var(--nbg-bad); border-color: var(--nbg-bad); }
.rrt-fb.missed{ color: var(--nbg-warn); border-color: var(--nbg-warn); }
#rrtGameView > .rrt-timebar{ position: relative; margin: 0.5rem 1.5rem 0; }
.rrt-timebar i{ position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: linear-gradient(var(--cyan), var(--cyan)); opacity: 0.55; transform-origin: left center; }
.rrt-timebar.low i{ background: var(--nbg-bad); opacity: 0.7; }
.rrt-timebar.untimed i{ width: 0; }
.rrt-timebar.paused i{ opacity: 0.25; }
.rrt-timebar span{ position: relative; display: block; text-align: center; font-size: 0.7rem; line-height: 1.1rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.rrt-answers button{ flex: 1; padding: 0.875rem 1.25rem; font-size: 0.95rem; }
.rrt-answers button:disabled{ opacity: 0.4; cursor: default; transform: none; }
#rrtTimerBtn.on{ border-color: rgba(var(--accent-rgb), 0.55); }
@media (hover: none) and (pointer: coarse){
#rrtGameView .key{ display: none; }
}
@media (max-width: 48rem){
#rrtGameView > .instrument-head{ padding: 0.75rem 1rem 0.5rem; }
#rrtGameView > :is(.rrt-stage,.rrt-timebar){ margin-left: 1rem; margin-right: 1rem; }
}
@media (max-width: 36rem){
#rrtGameView > .instrument-head{ padding: 0.625rem 0.75rem 0.375rem; row-gap: 0.4rem; }
#rrtGameView > .instrument-head > .meta{ min-width: 0; }
#rrtGameView > :is(.rrt-stage,.rrt-timebar){ margin-left: 0.5rem; margin-right: 0.5rem; }
.rrt-answers button{ padding: 1rem 0.75rem; font-size: 1rem; }
.rrt-qhead{ padding: 0.5rem 0.75rem 0; }
.rrt-body{ padding: 0.4rem 0.6rem 0.75rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
.rrt-answers button{ padding: 0.75rem 0.5rem; }
#rrtGameView .instrument-head .nb-hbtn{ width: 2rem; min-width: 2rem; height: 2rem; }
.rrt-body{ font-size: 0.95rem; padding: 0.3rem 0.75rem 0.6rem; }
}
.rrt-ov .info-card{ max-width: 44rem; max-height: calc(100vh - 3rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; position: relative; text-align: left; }
.rrt-ov-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.rrt-ov-bar button{ padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.rrt-ov-bar select{ max-width: 100%; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); background: var(--bg-1); color: var(--ink); font: inherit; font-size: 0.85rem; }
.rrt-sumrow{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; }
.rrt-sumrow div{ padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.08); border: 0.0625rem solid var(--panel-border); min-width: 0; }
.rrt-sumrow b{ display: block; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rrt-sumrow span{ font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 30rem){
.rrt-sumrow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rrt-hlist{ display: flex; flex-direction: column; gap: 0.4rem; }
.rrt-hi{ border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); border-left-width: 0.25rem; background: rgba(var(--accent-rgb), 0.04); }
.rrt-hi.right{ border-left-color: var(--nbg-ok); }
.rrt-hi.wrong{ border-left-color: var(--nbg-bad); }
.rrt-hi.missed{ border-left-color: var(--nbg-warn); }
.rrt-hi > summary{ display: grid; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; cursor: pointer; list-style: none; font-size: 0.82rem; color: var(--ink-dim); }
.rrt-hi-n{ font-variant-numeric: tabular-nums; }
.rrt-hi-t{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrt-hi-a .ok{ color: var(--nbg-ok); }
.rrt-hi-a .bad{ color: var(--nbg-bad); }
.rrt-hi-a .miss{ color: var(--nbg-warn); }
.rrt-hi-s{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.rrt-hi-body{ padding: 0 0.75rem 0.75rem; font-size: 0.9rem; line-height: 1.5; }
.rrt-hi-body .rrt-premises li, .rrt-hi-body .rrt-conc{ padding: 0.3rem 0.6rem; }
.rrt-exp{ margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.07); color: var(--ink); overflow-x: auto; }
.rrt-exp p{ margin: 0 0 0.4rem; }
.rrt-exp svg{ max-width: 100%; height: auto; color: var(--ink); }
.rrt-hempty{ color: var(--ink-dim); font-size: 0.9rem; padding: 1rem 0; text-align: center; }
@media (pointer: coarse){
#rrtGameView .instrument-head .nb-hbtn{ width: 2.5rem; min-width: 2.5rem; height: 2.5rem; flex: none; }
#rrtGameView > .rrt-footer button, #rrtGameView .rrt-car-nav button, #rrtGameView .center-message button, #rrtMenuPanel .menu-item,
    .rrt-ov-bar :is(button,select), .rrt-calnav button{ min-height: 2.5rem; }
.rrt-hi > summary{ min-height: 2.5rem; }
}
@media (max-width: 30rem){
.rrt-hi-s{ display: none; }
}
.rrt-ov .stat-grid{ margin-bottom: 0.9rem; }
.rrt-levels{ display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.4rem; margin: 0.25rem 0 0.9rem; }
.rrt-levels div{ padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); font-size: 0.8rem; color: var(--ink-dim); }
.rrt-levels b{ color: var(--ink); }
.rrt-targets{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.rrt-targets div{ font-size: 0.8rem; color: var(--ink-dim); }
.rrt-targets b{ color: var(--ink); }
.rrt-cal{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; text-align: center; font-size: 0.75rem; }
.rrt-cal .h{ color: var(--ink-dim); font-weight: 700; padding: 0.2rem 0; }
.rrt-cal .d{ padding: 0.35rem 0.1rem; border-radius: 0.4rem; border: 0.0625rem solid transparent; color: var(--ink-dim); min-width: 0; }
.rrt-cal .d.on{ background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.45); color: var(--ink); font-weight: 700; }
.rrt-cal .d.today{ border-color: var(--cyan); }
.rrt-cal .d em{ display: block; font-style: normal; font-size: 0.62rem; color: var(--ink-dim); font-weight: 500; white-space: nowrap; letter-spacing: -0.02em; }
.rrt-calnav{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.rrt-calnav button{ padding: 0.3rem 0.8rem; }
#rrtGameView.rrt-min > .instrument-head{ flex-wrap: nowrap; }
#rrtGameView.rrt-min .rrt-fb{ top: 0.45rem; }
.rrt-chain{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
    align-items: center; justify-items: center; column-gap: 0.6rem; text-align: center; }
.rrt-chain > :first-child{ justify-self: end; text-align: right; }
.rrt-chain > :last-child{ justify-self: start; text-align: left; }
.rrt-chain > .rrt-rel{ font-size: 0.92em; line-height: 1.3; }
@media (max-width: 36rem){
.rrt-chain{ column-gap: 0.3rem; }
.rrt-chain > .rrt-rel{ font-size: 0.8em; }
}
html body #rrtGameView > .rrt-answers > :is(#rrtTrueBtn,#rrtFalseBtn,.rrt-ans-proxy){ box-shadow: none !important; transform: none !important; }
html body #rrtGameView > .rrt-answers > :is(#rrtTrueBtn,#rrtFalseBtn){ border: none !important; color: #fff !important; }
html body #rrtGameView > .rrt-footer > button.on{ color: var(--cyan) !important; }
.rrt-score{ order: 2; margin: 0 0.75rem; font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rrt-score b{ color: var(--ink); }
@media (max-width: 40rem){
.rrt-score{ margin: 0 0.35rem; }
}
:is(#rrtGameView, #schGameView, #motGameView, #srotGameView) .nb-rec .cl-next-lv{ display: block; margin-top: 0.45rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-dim); }
:is(#rrtGameView, #schGameView, #motGameView, #srotGameView) .nb-rec .cl-next-lv b{ color: var(--ink); }
:is(#schClock, #motClock, #srotClock).cl-clk-off, :is(#motGameView, #srotGameView) .cl-hudclk.cl-clk-off{ pointer-events: none !important; cursor: default !important; }
#rrtAnswers > #rrtUnkBtn, #rrtAnswers > .rrt-alt{ display: none; }
html body #rrtGameView > .rrt-answers > #rrtUnkBtn, html body #rrtGameView > .rrt-answers > .rrt-alt > button{
    min-height: 3.25rem; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; box-shadow: none !important; transform: none !important;
    background: rgba(var(--accent-rgb), 0.12) !important; color: var(--ink) !important; border: 0.0625rem solid var(--panel-border) !important; min-width: 0; }
html body #rrtGameView > .rrt-answers > .rrt-alt > button{ flex: none; padding: 0.55rem 0.5rem; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.rrt-choices{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.rrt-cn{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 0.4em; font-size: 0.8em; font-weight: 800;
    background: rgba(var(--accent-rgb), 0.16); color: var(--ink); font-variant-numeric: tabular-nums; }
.rrt-ct{ min-width: 0; overflow-wrap: anywhere; }
.rrt-choices--static li{ display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); }
.rrt-choices--static li.rrt-is-ans{ border-color: var(--nbg-ok); box-shadow: inset 0.25rem 0 0 var(--nbg-ok); }
.rrt-choices--static li.rrt-is-pick{ border-color: var(--nbg-bad); border-style: dashed; }
.rrt-optlist{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.rrt-optlist span{ padding: 0.15rem 0.6rem; border-radius: 62rem; border: 0.0625rem solid var(--panel-border); font-size: 0.85rem; color: var(--ink-dim); }
.rrt-optlist span.rrt-is-ans{ border-color: var(--nbg-ok); color: var(--ink); font-weight: 700; }
.rrt-optlist span.rrt-is-pick{ border-color: var(--nbg-bad); border-style: dashed; }
.rrt-hidenote{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-dim); margin: 0.2rem 0 0; }
.rrt-hidenote[hidden]{ display: none; }
.rrt-lie{ display: inline-block; padding: 0 0.45em; margin-right: 0.2em; border-radius: 62rem; font-size: 0.68em; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    line-height: 1.6; vertical-align: 0.14em; color: var(--bg-0); background: rgb(var(--accent-rgb)); }
.rrt-num{ font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cyan); }
.rrt-sym{ font-size: 1.12em; line-height: 1; font-weight: 700; }
#rrtGameView, #rrtHistoryOverlay{ --rrt-p0: #3cf0b8; --rrt-p1: #2fe6ff; --rrt-p2: #ffb86b; --rrt-p3: #c9a2ff; --rrt-p4: #ff94b8; --rrt-p5: #f2e27a; }
:is(#rrtGameView,#rrtHistoryOverlay).rrt-pal-cool{ --rrt-p0: #6fd3ff; --rrt-p1: #8fb0ff; --rrt-p2: #5fe3cc; --rrt-p3: #b3a6ff; --rrt-p4: #62d39f; --rrt-p5: #a9dcff; --rrt-rel: #93b8cf; }
:is(#rrtGameView,#rrtHistoryOverlay).rrt-pal-warm{ --rrt-p0: #ffb86b; --rrt-p1: #ff927f; --rrt-p2: #f2e27a; --rrt-p3: #ffa3c8; --rrt-p4: #ffd08f; --rrt-p5: #f7a072; --rrt-rel: #d9b9a3; }
:is(#rrtGameView,#rrtHistoryOverlay).rrt-pal-mono{ --rrt-p0: #e8feff; --rrt-p1: #b5eaf0; --rrt-p2: #d4f6f8; --rrt-p3: #9fdce4; --rrt-p4: #c6f1f4; --rrt-p5: #aee4ea; --rrt-rel: #7fa9b0; }
html[data-theme="light"] :is(#rrtGameView,#rrtHistoryOverlay){ --rrt-p0: #1f7a5c; --rrt-p1: #1f6a8b; --rrt-p2: #9a5316; --rrt-p3: #6a3fb0; --rrt-p4: #b0325c; --rrt-p5: #7a6a0f; }
html[data-theme="light"] :is(#rrtGameView,#rrtHistoryOverlay).rrt-pal-cool{ --rrt-p0: #1a5f8a; --rrt-p1: #2c4fa3; --rrt-p2: #12725f; --rrt-p3: #5a3fa3; --rrt-p4: #0f6a50; --rrt-p5: #2f5f80; --rrt-rel: #3f5f75; }
html[data-theme="light"] :is(#rrtGameView,#rrtHistoryOverlay).rrt-pal-warm{ --rrt-p0: #9a4f0f; --rrt-p1: #a8382a; --rrt-p2: #7a6000; --rrt-p3: #a3305f; --rrt-p4: #8a5a12; --rrt-p5: #9a3f10; --rrt-rel: #7a5a45; }
html[data-theme="light"] :is(#rrtGameView,#rrtHistoryOverlay).rrt-pal-mono{ --rrt-p0: #1a2b2b; --rrt-p1: #2e4d4d; --rrt-p2: #1f3838; --rrt-p3: #3d5c5c; --rrt-p4: #264242; --rrt-p5: #345454; --rrt-rel: #4f6b6b; }
.rrt-flash span{ font-family: var(--display); font-weight: 900; font-size: clamp(2.25rem, 9vw, 5rem); letter-spacing: 0.02em; color: var(--rrt-fc); text-align: center; padding: 0 1rem;
    text-shadow: 0 0.06em 0.5em color-mix(in srgb, var(--bg-0) 70%, transparent); }
.rrt-hfilter{ min-width: 0; }
.rrt-hfilter .seg-btn{ padding: 0.4rem 0.5rem; font-size: 0.8rem; white-space: nowrap; }
.rrt-hfilter .seg-btn small{ font-weight: 500; color: var(--ink-dim); margin-left: 0.35em; }
.rrt-hnote{ margin: -0.25rem 0 0.6rem; }
.rrt-ttable-wrap{ overflow-x: auto; overscroll-behavior-x: contain; margin: 0.25rem 0 0.4rem; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); }
.rrt-ttable{ width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rrt-ttable :is(th,td){ padding: 0.45rem 0.55rem; text-align: right; white-space: nowrap; border-bottom: 0.0625rem solid var(--panel-border); }
.rrt-ttable :is(th,td):first-child{ text-align: left; white-space: normal; min-width: 6rem; }
.rrt-ttable thead th{ font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.rrt-ttable tbody tr:last-child :is(th,td){ border-bottom: none; }
.rrt-ttable tbody th{ color: var(--ink); font-weight: 700; }
.rrt-ttable td{ color: var(--ink-dim); }
.rrt-ov-bar .rrt-ov-sels{ display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; max-width: 100%; }
.rrt-ov-bar .rrt-ov-sels select{ min-width: 0; flex: 1 1 10rem; }
.rrt-ttable .rrt-ts{ display: none; }
@media (max-width: 30rem){
.rrt-ttable{ font-size: 0.75rem; }
.rrt-ttable :is(th,td){ padding: 0.4rem 0.35rem; }
.rrt-ttable .rrt-ts{ display: inline; }
.rrt-ttable :is(th,td):first-child{ min-width: 0; }
}
@media (pointer: coarse){
.rrt-hfilter .seg-btn, .rrt-ttable tbody tr :is(th,td){ min-height: 2.5rem; }
.rrt-ttable tbody :is(th,td){ padding-top: 0.7rem; padding-bottom: 0.7rem; }
}
.rrt-exp table{ border-collapse: collapse; margin: 0.3rem 0 0.5rem; font-size: 0.82em; font-variant-numeric: tabular-nums; }
.rrt-exp :is(th,td){ padding: 0.22em 0.5em; text-align: center; border-bottom: 0.0625rem solid var(--panel-border); }
.rrt-exp th{ font-size: 0.86em; font-weight: 700; color: var(--ink-dim); vertical-align: bottom; line-height: 1.2; }
.rrt-exp tr > :first-child{ text-align: left; padding-left: 0; }
.rrt-exp ul, .rrt-exp ol{ margin: 0 0 0.4rem; padding-left: 1.2rem; }
@media (max-width: 30rem){
.rrt-exp table{ font-size: 0.74em; }
.rrt-exp :is(th,td){ padding: 0.2em 0.28em; }
}
.nb-drawer input.rrt-textin{ width: 100%; box-sizing: border-box; margin-top: 0.4rem; background: rgba(255,255,255,0.06); border: 0.0625rem solid var(--panel-border); border-radius: 0.5rem;
    padding: 0.45rem 0.625rem; color: var(--ink); font-family: var(--sans); font-size: 0.875rem; }
html[data-theme="light"] .nb-drawer input.rrt-textin, .nb-drawer.is-light input.rrt-textin{ background: rgba(255,255,255,0.7); }
.nb-drawer input.rrt-textin:focus{ outline: none; border-color: var(--cyan); }
@media (orientation: landscape) and (max-height: 32rem){
.rrt-flash span{ font-size: clamp(2rem, 8vh, 3.5rem); }
}
.rrt-shape{ display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; line-height: 0; }
.rrt-shape svg{ display: block; width: 100%; height: 100%; }
.rrt-study{ display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; min-width: 0; }
.rrt-study-map{ width: 100%; display: flex; justify-content: center; min-width: 0; }
.rrt-study-map svg{ display: block; width: min(100%, 16rem); height: auto; max-width: none !important; color: var(--ink); }
.rrt-study-legend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.85rem; font-size: 0.85rem; color: var(--ink-dim); max-width: 100%; }
.rrt-study-legend li{ display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.rrt-study-note{ margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-dim); max-width: 36ch; }
html body #rrtGameView .rrt-study .rrt-ready{ min-height: 2.75rem; padding: 0.5rem 1.5rem; border-radius: 0.75rem; font-weight: 800; letter-spacing: 0.03em; }
@media (orientation: landscape) and (max-height: 32rem){
.rrt-study{ gap: 0.2rem; }
.rrt-study-map svg{ width: auto; height: min(30vh, 8rem); }
}
@media (min-width: 64rem) and (min-height: 40rem){
.rrt-study-map svg{ width: min(100%, 19rem); }
}
html body #rrtDrawer.nb-drawer > :first-child{ padding-top: 1.1rem; }
#rrtDrawer .rrt-dsearch{ position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.45rem 0; background: var(--bg-1); box-shadow: 0 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.35); }
html[data-theme="light"] #rrtDrawer .rrt-dsearch input, #rrtDrawer.is-light .rrt-dsearch input{ background: rgba(255,255,255,0.75); }
#rrtDrawer .rrt-dsearch-n{ flex: none; font-size: 0.72rem; color: var(--ink-dim); white-space: nowrap; }
#rrtDrawer .rrt-dsearch-x{ flex: none; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0; align-items: center; justify-content: center;
    border-radius: 0.5rem; border: 0.0625rem solid var(--panel-border); box-sizing: border-box; }
#rrtDrawer .rrt-dsearch-x{ display: inline-flex; }
html body .nb-drawer:not(#rrtDrawer){ padding-top: 0 !important; }
html body .nb-drawer:not(#rrtDrawer) > .nbd-head{ position: sticky; top: 0; z-index: 5; background: var(--bg-1); padding-top: 1rem; box-shadow: 0 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.35); }
#rrtDrawer .rrt-dg{ margin: 0; }
#rrtDrawer .rrt-dgh{ cursor: pointer; user-select: none; border-radius: 0.35rem; }
@media (pointer: coarse){
#rrtDrawer .rrt-dgh{ min-height: 2.5rem; box-sizing: border-box; margin-top: 1rem; margin-bottom: 0.2rem; }
}
#rrtDrawer .rrt-dgh:hover, #rrtDrawer .rrt-dgh:focus-visible{ color: var(--ink); outline: none; }
#rrtDrawer.rrt-searching .nbd-note{ display: none; }
#rrtDrawer .rrt-fhead{ justify-content: flex-start; }
#rrtDrawer .rrt-fhead > .seg-toggle{ flex: none; }
#rrtDrawer .rrt-fold{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: 0 0.15rem 0 -0.3rem; padding: 0; border-radius: 0.4rem;
    border: none; background: transparent; color: var(--ink-dim); cursor: pointer; }
#rrtDrawer .rrt-own{ padding-left: 0.6rem; border-left: 0.125rem solid rgba(var(--accent-rgb), 0.18); }
#rrtDrawer .rrt-own2{ padding-left: 1.2rem; }
@media (pointer: coarse){
#rrtDrawer .rrt-fold{ width: 2.5rem; height: 2.5rem; }
}
#rrtDrawer .rrt-chips{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
#rrtDrawer .rrt-chip{ padding: 0.35rem 0.7rem; border-radius: 62rem; border: 0.0625rem solid var(--panel-border); background: transparent; color: var(--ink-dim); font: inherit; font-size: 0.8rem; cursor: pointer; min-height: 2rem; }
#rrtDrawer .rrt-chip.on{ color: var(--ink); border-color: var(--cyan); background: rgba(var(--accent-rgb), 0.16); font-weight: 700; }
#rrtDrawer .rrt-nums{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.4rem; }
#rrtDrawer .rrt-numin{ width: 100%; box-sizing: border-box; min-width: 0; background: rgba(255,255,255,0.06); border: 0.0625rem solid var(--panel-border); border-radius: 0.5rem; padding: 0.4rem 0.5rem; color: var(--ink); font: inherit; font-size: 0.875rem; }
#rrtDrawer .rrt-wts{ display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.4rem; }
#rrtDrawer .rrt-wt{ display: grid; grid-template-columns: auto minmax(0, 7rem) minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--ink-dim); min-width: 0; }
.rrt-paste{ width: 100%; box-sizing: border-box; margin: 0.4rem 0; min-height: 5rem; resize: vertical; background: rgba(255,255,255,0.06); border: 0.0625rem solid var(--panel-border); border-radius: 0.5rem;
    padding: 0.5rem 0.65rem; color: var(--ink); font-family: var(--mono, monospace); font-size: 0.8rem; overflow-wrap: anywhere; }
html[data-theme="light"] .rrt-paste{ background: rgba(255,255,255,0.8); }
.rrt-paste:focus{ outline: none; border-color: var(--cyan); }
.rrt-paste-msg{ min-height: 1.2em; margin: 0.2rem 0 0.5rem; font-size: 0.85rem; color: var(--ink-dim); }
.rrt-paste-btns{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.3rem 0; }
.rrt-paste-btns > *{ flex: 1 1 9rem; min-height: 2.5rem; }
.rrt-file{ position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; border: 0.0625rem solid var(--panel-border); cursor: pointer; font-size: 0.9rem; padding: 0.4rem 0.9rem; }
.rrt-file input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.rrt-legend{ list-style: none; margin: 0.2rem 0 0.8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.3rem 1rem; font-size: 0.88rem; }
.rrt-legend li{ display: flex; gap: 0.6rem; align-items: baseline; min-width: 0; }
.rrt-legend b{ flex: none; min-width: 3.6rem; font-size: 1.05em; color: var(--ink); letter-spacing: 0.08em; }
.rrt-legend span{ color: var(--ink-dim); min-width: 0; }
.rrt-tsec{ order: 1; display: inline-flex; align-items: center; gap: 0.15rem; margin-left: -0.2rem; font-size: 0.8rem; color: var(--ink-dim); flex: none; }
.rrt-tsec input{ width: 3.4em; box-sizing: border-box; padding: 0.3rem 0.35rem; border-radius: 0.5rem; border: 0.0625rem solid var(--panel-border); background: transparent; color: var(--ink); font: inherit; font-size: 0.85rem;
    font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; min-height: 2rem; }
.rrt-tsec input:focus{ outline: none; border-color: var(--cyan); }
@media (max-width: 40rem){
.rrt-tsec span{ display: none; }
.rrt-tsec input{ width: 2.9em; padding: 0.25rem 0.2rem; font-size: 0.8rem; }
}
.rrt-score small{ font-size: 0.7em; font-weight: 600; color: var(--ink-dim); }
.rrt-cdots{ display: inline-flex; gap: 0.25rem; margin-left: 0.5rem; vertical-align: 0.1em; }
.rrt-cdots i{ display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 0.0625rem solid var(--ink-dim); opacity: 0.6; }
.rrt-cdots i.cur{ border-color: var(--cyan); background: var(--cyan); opacity: 1; }
.rrt-cdots i.ok{ background: var(--nbg-ok); border-color: var(--nbg-ok); opacity: 1; }
.rrt-cdots i.bad{ background: var(--nbg-bad); border-color: var(--nbg-bad); opacity: 1; }
.rrt-cdots i.miss{ background: var(--nbg-warn); border-color: var(--nbg-warn); opacity: 1; }
.rrt-cdots i.done{ background: var(--ink-dim); opacity: 0.8; }
.rrt-lbox{ display: inline; padding: 0.1em 0.35em; margin: 0 0.1em; border-radius: 0.4em; border: 0.125rem solid var(--nbg-ok); box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.9; }
.rrt-lbox[data-lie="1"]{ border-color: var(--nbg-bad); }
html.cl-cb .rrt-lbox[data-lie="1"]{ border-style: dashed; }
.rrt-gapq{ display: inline-block; min-width: 1.4em; padding: 0 0.3em; border-radius: 0.3em; text-align: center; font-weight: 800; color: var(--ink-dim); background: rgba(var(--accent-rgb), 0.14); }
.rrt-symrel{ font-weight: 700; letter-spacing: 0.04em; }
.rrt-car-text .rrt-car-p + .rrt-car-p{ margin-top: 0.45rem; padding-top: 0.45rem; border-top: 0.0625rem solid rgba(var(--accent-rgb), 0.16); }
.rrt-axes{ display: flex; flex-direction: column; gap: 0.3rem; max-height: min(42vh, 22rem); overflow-y: auto; overscroll-behavior: contain; min-width: 0; padding: 0.1rem; }
.rrt-axrow{ display: grid; grid-template-columns: minmax(3.5rem, 7rem) minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.15rem 0.3rem; border-radius: 0.6rem; border: 0.0625rem solid transparent; min-width: 0; }
.rrt-axrow.focus{ border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.06); }
.rrt-axes.pre .rrt-axrow{ grid-template-columns: minmax(3.5rem, 7rem) minmax(0, 1fr) 3.2em; }
.rrt-axl{ font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrt-axs{ display: none; }
@media (max-width: 30rem), (orientation: landscape) and (max-height: 32rem){
.rrt-axn{ display: none; }
.rrt-axs{ display: inline; }
}
.rrt-axb{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; min-width: 0; }
html body #rrtGameView > .rrt-answers .rrt-axb > button{ min-height: 2.5rem; padding: 0.3rem 0.35rem; border-radius: 0.6rem; font-size: 0.88rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; white-space: normal;
    background: rgba(var(--accent-rgb), 0.08) !important; color: var(--ink) !important; border: 0.0625rem solid var(--panel-border) !important; box-shadow: none !important; transform: none !important; min-width: 0; }
.rrt-axd{ width: 3.2em; box-sizing: border-box; padding: 0.35rem 0.3rem; border-radius: 0.5rem; border: 0.0625rem solid var(--panel-border); background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; text-align: center; min-height: 2.5rem; }
.rrt-axd:focus{ outline: none; border-color: var(--cyan); }
.rrt-axhint{ margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--ink-dim); }
.rrt-gstat{ font-size: 0.9rem; font-weight: 700; color: var(--ink-dim); text-align: center; }
@media (orientation: landscape) and (max-height: 32rem){
.rrt-axes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 27vh; gap: 0.2rem 0.5rem; }
html body #rrtGameView > .rrt-answers .rrt-axb > button, .rrt-axd{ min-height: 2.1rem; font-size: 0.8rem; padding: 0.15rem 0.25rem; }
.rrt-axrow{ grid-template-columns: minmax(2.5rem, 4.5rem) minmax(0, 1fr) auto; padding: 0.05rem 0.2rem; }
.rrt-axes.pre .rrt-axrow{ grid-template-columns: minmax(2.5rem, 4.5rem) minmax(0, 1fr) 2.8em; }
.rrt-axhint{ display: none; }
}
.rrt-graphs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.4rem 0 0.2rem; min-width: 0; }
.rrt-graph{ margin: 0; min-width: 0; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.04); padding: 0.3rem; }
.rrt-graph figcaption{ font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); text-align: center; }
.rrt-graph svg{ display: block; width: 100%; height: auto; max-height: 38vh; }
.rrt-graph .rrt-ge{ stroke: var(--ink-dim); stroke-width: 0.8; fill: none; }
.rrt-graph .rrt-garr{ fill: var(--ink-dim); }
.rrt-graph .rrt-gn text{ font-weight: 800; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.rrt-graph .rrt-gn text.dim{ fill: var(--ink-dim); font-weight: 600; }
.rrt-graph .rrt-gn.pk{ cursor: pointer; }
@media (orientation: landscape) and (max-height: 32rem){
.rrt-graph figcaption{ font-size: 0.6rem; }
.rrt-graphs{ margin-top: 0.2rem; }
}
.rrt-hi.skipped{ border-left-color: var(--ink-dim); border-left-style: dashed; }
.rrt-hi.hid{ border-left-color: var(--panel-border); }
.rrt-hi-a .skip{ color: var(--ink-dim); font-style: italic; }
.rrt-hi-del{ display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 0.45rem; border: 0.0625rem solid transparent; background: transparent;
    color: var(--ink-dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.rrt-hi-del:hover, .rrt-hi-del:focus-visible{ color: var(--nbg-bad); border-color: var(--panel-border); outline: none; }
@media (pointer: coarse){
.rrt-hi-del{ width: 2.5rem; height: 2.5rem; }
}
.rrt-hi-acts{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }
.rrt-hi-acts button{ padding: 0.4rem 0.9rem; font-size: 0.82rem; min-height: 2.25rem; }
.rrt-mres{ margin: 0.2rem 0 0.4rem; font-size: 0.85rem; color: var(--ink-dim); }
.rrt-mres.ok b:first-child{ color: var(--nbg-ok); }
.rrt-mres.bad b:first-child{ color: var(--nbg-bad); }
.rrt-mres.miss b:first-child{ color: var(--nbg-warn); }
.rrt-hfilter .seg-btn:disabled{ opacity: 0.4; cursor: default; }
#rrtStatsOverlay{ --rrt-s0: var(--cyan); --rrt-s1: #f0a33c; --rrt-s2: #3cc98f; --rrt-s3: #c77dff; --rrt-s4: #ff6f91; --rrt-s5: #d6c94a; --rrt-s6: #7fa0ff; --rrt-s7: #9aa5a8; }
html[data-theme="light"] #rrtStatsOverlay{ --rrt-s0: var(--cyan); --rrt-s1: #a8600f; --rrt-s2: #1d7a52; --rrt-s3: #7a3fb0; --rrt-s4: #b3304f; --rrt-s5: #7d7314; --rrt-s6: #3a55b8; --rrt-s7: #5b6669; }
.rrt-tbar{ display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0.2rem 0 0.6rem; }
.rrt-trange{ flex: 0 1 16rem; min-width: 0; }
.rrt-trange .seg-btn{ padding: 0.4rem 0.5rem; font-size: 0.8rem; }
.rrt-tbar select{ flex: 1 1 10rem; min-width: 0; max-width: 100%; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); border: 0.0625rem solid var(--panel-border); background: var(--bg-1); color: var(--ink); font: inherit; font-size: 0.85rem; }
.rrt-strip{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.5rem; }
.rrt-strip div{ padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.08); border: 0.0625rem solid var(--panel-border); min-width: 0; }
.rrt-strip b{ display: block; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrt-strip span{ display: block; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrt-insight{ margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--ink-dim); }
.rrt-insight b{ color: var(--ink); }
.rrt-insight.up b{ color: var(--nbg-ok); }
.rrt-insight.down b{ color: var(--nbg-bad); }
.rrt-tchips{ display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.rrt-tchip{ display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 62rem; border: 0.0625rem solid var(--panel-border); background: transparent; color: var(--ink); font: inherit; font-size: 0.75rem; cursor: pointer; min-height: 2rem; }
.rrt-tchip i{ width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--rrt-sc); }
.rrt-tchip.off i{ background: transparent; border: 0.0625rem solid var(--rrt-sc); }
.rrt-tchart{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem; margin-bottom: 0.8rem; min-width: 0; }
.rrt-tax{ display: flex; flex-direction: column; justify-content: space-between; font-size: 0.68rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; text-align: right; padding-bottom: 1.1rem; }
.rrt-tplot{ min-width: 0; }
.rrt-tplot svg{ display: block; width: 100%; height: 9rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.05); border: 0.0625rem solid var(--panel-border); }
.rrt-tplot .grid{ stroke: var(--panel-border); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.rrt-tplot .ln{ fill: none; stroke: var(--rrt-sc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rrt-tplot .dt{ fill: none; stroke: var(--rrt-sc); stroke-width: 6; stroke-linecap: round; }
.rrt-txl{ display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ink-dim); margin-top: 0.2rem; }
#rrtStatsOverlay .s0{ --rrt-sc: var(--rrt-s0); }
#rrtStatsOverlay .s1{ --rrt-sc: var(--rrt-s1); }
#rrtStatsOverlay .s2{ --rrt-sc: var(--rrt-s2); }
#rrtStatsOverlay .s3{ --rrt-sc: var(--rrt-s3); }
#rrtStatsOverlay .s4{ --rrt-sc: var(--rrt-s4); }
#rrtStatsOverlay .s5{ --rrt-sc: var(--rrt-s5); }
#rrtStatsOverlay .s6{ --rrt-sc: var(--rrt-s6); }
#rrtStatsOverlay .s7{ --rrt-sc: var(--rrt-s7); }
.rrt-subd > summary{ cursor: pointer; font-size: 0.82rem; color: var(--ink-dim); padding: 0.35rem 0; min-height: 2rem; }
.rrt-stable{ width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rrt-stable :is(th,td){ padding: 0.4rem 0.55rem; text-align: right; white-space: nowrap; border-bottom: 0.0625rem solid var(--panel-border); }
.rrt-stable :is(th,td):first-child{ text-align: left; white-space: normal; }
.rrt-stable thead th{ font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.rrt-stable tr.grp th{ color: var(--ink); font-weight: 700; background: rgba(var(--accent-rgb), 0.06); }
.rrt-stable tbody th{ font-weight: 500; color: var(--ink); }
.rrt-stable td{ color: var(--ink-dim); }
.app-badges{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.125rem; margin:2.75rem auto 0; }
.app-badge{ display:block; flex:none; line-height:0; border-radius:0.75rem; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.app-badge img{ display:block; width:auto; height:4rem; aspect-ratio:3 / 1; max-width:none; }
@media (max-width: 40em){
.app-badge img{ height:3.25rem; }
.app-badges{ gap:0.875rem; }
}
@media (hover: hover){
.app-badge:hover img{ opacity:0.88; }
}
@media (max-width: 26em){
.app-badges{ gap:0.625rem; margin-top:2rem; }
.app-badge img{ height:min(3.25rem, calc((100vw - 3rem) / 6.3)); }
}
:root, html[data-theme="cyan"]{
    --dd-bg: #0a292c;
    --dd-bg-top: rgba(73,205,212,0.07);
    --dd-border: rgba(77,219,229,0.2);
    --dd-hairline: rgba(77,219,229,0.12);
    --dd-highlight: rgba(210,250,255,0.08);
    --dd-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.3), 0 1.25rem 2.75rem -0.75rem rgba(0,0,0,0.75);
    --dd-ink: #cfe7ea;
    --dd-ink-strong: #f4ffff;
    --dd-ink-dim: #86b8bf;
    --dd-hover: rgba(200,246,249,0.07);
    --dd-sel: rgba(73,205,212,0.1);
    --dd-sel-hover: rgba(73,205,212,0.16);
    --dd-accent: #49cdd4;
    --dd-trigger-bg: rgba(200,246,249,0.05);
    --dd-trigger-hover: rgba(200,246,249,0.09);
    --dd-trigger-border: rgba(77,219,229,0.24);
    --dd-trigger-border-strong: rgba(77,219,229,0.62);
    --dd-opt-solid: #0a292c;
    --dd-opt-sel-solid: #183740;
    --dd-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238ec7cf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 1.75 6 6l4.25-4.25'/%3E%3C/svg%3E");
    --dd-caret-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2349cdd4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 1.75 6 6l4.25-4.25'/%3E%3C/svg%3E");
    --dd-scheme: dark;
    --dd-radius: 0.875rem;
    --dd-pad: 0.3125rem;
    --dd-item-radius: 0.5625rem;
    --dd-row: 2.25rem;
    --dd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
html[data-theme="light"]{
    --dd-bg: #f4fbfb;
    --dd-bg-top: rgba(255,255,255,0.9);
    --dd-border: rgba(42,122,122,0.26);
    --dd-hairline: rgba(42,122,122,0.15);
    --dd-highlight: rgba(255,255,255,0.95);
    --dd-shadow: 0 0.0625rem 0.1875rem rgba(16,52,52,0.08), 0 1rem 2.25rem -0.75rem rgba(16,52,52,0.32);
    --dd-ink: #274443;
    --dd-ink-strong: #0b1a1a;
    --dd-ink-dim: #4f6e6e;
    --dd-hover: rgba(26,79,79,0.07);
    --dd-sel: rgba(42,122,122,0.13);
    --dd-sel-hover: rgba(42,122,122,0.19);
    --dd-accent: #1f6a6a;
    --dd-trigger-bg: rgba(255,255,255,0.55);
    --dd-trigger-hover: rgba(255,255,255,0.9);
    --dd-trigger-border: rgba(42,122,122,0.32);
    --dd-trigger-border-strong: rgba(31,95,95,0.7);
    --dd-opt-solid: #f4fbfb;
    --dd-opt-sel-solid: #d3e6e6;
    --dd-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233a5a5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 1.75 6 6l4.25-4.25'/%3E%3C/svg%3E");
    --dd-caret-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231f6a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 1.75 6 6l4.25-4.25'/%3E%3C/svg%3E");
    --dd-scheme: light;
  }
html .topnav-games-panel-inner,
  html .nav-icon-panel,
  html .landing-profile-panel-inner,
  html .studies-category-panel,
  html .menu-panel,
  html .cct-menu-panel{
    background: var(--dd-bg) !important;
    border: 0.0625rem solid var(--dd-border) !important;
    border-radius: var(--dd-radius) !important;
    box-shadow: inset 0 0.0625rem 0 var(--dd-highlight), var(--dd-shadow) !important;
    padding: var(--dd-pad) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--dd-ink);
    color-scheme: var(--dd-scheme);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb),0.35) transparent;
    overscroll-behavior: contain;
  }
html .topnav-games-panel-inner, html .landing-profile-panel-inner{ gap: 0.0625rem; }
html .studies-category-panel{ margin-top: 0.4375rem; }
html .studies-category-panel .studies-category-item + .studies-category-item{ margin-top: 0.0625rem; }
@media (max-width: 59.9375em), (orientation: landscape) and (max-height: 32rem){
html .topnav-collapsible .topnav-games-panel-inner,
    html .topnav-collapsible .nav-icon-panel{ box-shadow: inset 0 0.0625rem 0 var(--dd-highlight) !important; }
}
@keyframes ddIn{ from{ opacity: 0; transform: translateY(-0.375rem) scale(0.985); } to{ opacity: 1; transform: none; } }
@keyframes ddInUp{ from{ opacity: 0; transform: translateY(0.375rem) scale(0.985); } to{ opacity: 1; transform: none; } }
@keyframes ddFade{ from{ opacity: 0; } to{ opacity: 1; } }
html .topnav-games-panel-inner{ transform-origin: top right; }
html .landing-profile-panel-inner{ transform-origin: top right; }
html .nav-icon-panel{ transform-origin: top right; }
html .studies-category-panel{ transform-origin: top center; }
html .topnav-games.open .topnav-games-panel-inner,
  html .topnav-games:hover .topnav-games-panel-inner,
  html .nav-icon-menu.open .nav-icon-panel,
  html .landing-profile-switcher.open .landing-profile-panel-inner,
  html .studies-category-select.open .studies-category-panel,
  html .menu-dropdown.open .menu-panel,
  html .menu-dropdown.open .cct-menu-panel{ animation: ddIn 190ms var(--dd-ease) both; }
html .menu-dropdown.open .menu-panel.cl-up,
  html .menu-dropdown.open .cct-menu-panel.cl-up{ animation-name: ddInUp; }
@media (max-width: 59.9375em), (orientation: landscape) and (max-height: 32rem){
html .topnav-collapsible .topnav-games.open .topnav-games-panel-inner,
    html .topnav-collapsible .nav-icon-menu.open .nav-icon-panel{ animation: ddFade 160ms ease both; }
}
@media (prefers-reduced-motion: reduce){
html .topnav-games-panel-inner, html .nav-icon-panel, html .landing-profile-panel-inner, html .studies-category-panel,
    html .menu-panel, html .cct-menu-panel,
    html .topnav-games.open .topnav-games-panel-inner, html .topnav-games:hover .topnav-games-panel-inner,
    html .nav-icon-menu.open .nav-icon-panel, html .landing-profile-switcher.open .landing-profile-panel-inner,
    html .studies-category-select.open .studies-category-panel,
    html .menu-dropdown.open .menu-panel, html .menu-dropdown.open .cct-menu-panel{ animation: none !important; }
}
html .topnav-games-item,
  html .menu-item,
  html .landing-profile-item,
  html .studies-category-item{
    position: relative;
    min-height: var(--dd-row);
    box-sizing: border-box;
    padding: 0.4375rem 0.75rem 0.4375rem 0.8125rem !important;
    border-radius: var(--dd-item-radius) !important;
    background: transparent !important;
    color: var(--dd-ink) !important;
    font-family: var(--sans);
    font-size: 0.875rem !important;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.003em;
    text-align: left;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease, color 120ms ease !important;
  }
html .nav-icon-panel .menu-item{ display: flex; align-items: center; width: 100%; }
html .menu-panel .menu-item, html .cct-menu-panel .menu-item{ gap: 0.6875rem; }
@media (pointer: coarse){
html .topnav-games-item, html .menu-item, html .landing-profile-item, html .studies-category-item{ min-height: 2.75rem; }
}
@media (hover: hover){
html .topnav-games-item:hover, html .menu-item:hover, html .landing-profile-item:hover,
    html .studies-category-item:hover{ background: var(--dd-hover) !important; color: var(--dd-ink-strong) !important; }
}
html .topnav-games-item:focus, html .menu-item:focus, html .landing-profile-item:focus,
  html .studies-category-item:focus{ outline: none !important; box-shadow: none !important; }
html .topnav-games-item:focus-visible, html .menu-item:focus-visible, html .landing-profile-item:focus-visible,
  html .studies-category-item:focus-visible{ background: var(--dd-hover) !important; color: var(--dd-ink-strong) !important; }
html .landing-profile-item.active,
  html .studies-category-item.active,
  html .studies-category-item[aria-selected="true"],
  html .menu-item.active,
  html .menu-item[aria-checked="true"],
  html .topnav-games-item.active,
  html .topnav-games-item[aria-current="true"]{
    background: var(--dd-sel) !important;
    color: var(--dd-ink-strong) !important;
    font-weight: 600;
  }
html .landing-profile-item.active::before,
  html .studies-category-item.active::before,
  html .studies-category-item[aria-selected="true"]::before,
  html .menu-item[aria-checked="true"]::before,
  html .menu-item.active::before,
  html .topnav-games-item.active::before,
  html .topnav-games-item[aria-current="true"]::before{
    content: ""; position: absolute; left: 0.1875rem; top: 50%; width: 0.1875rem; height: 0.875rem;
    margin-top: -0.4375rem; border-radius: 1rem; background: var(--dd-accent);
  }
html .landing-profile-item.active:focus-visible, html .studies-category-item.active:focus-visible,
  html .studies-category-item[aria-selected="true"]:focus-visible,
  html .menu-item[aria-checked="true"]:focus-visible, html .menu-item.active:focus-visible,
  html .topnav-games-item.active:focus-visible, html .topnav-games-item[aria-current="true"]:focus-visible{ background: var(--dd-sel-hover) !important; }
@media (hover: hover){
html .landing-profile-item.active:hover, html .studies-category-item.active:hover,
    html .studies-category-item[aria-selected="true"]:hover,
    html .menu-item[aria-checked="true"]:hover, html .menu-item.active:hover,
    html .topnav-games-item.active:hover, html .topnav-games-item[aria-current="true"]:hover{ background: var(--dd-sel-hover) !important; }
}
html .nav-icon-check, html .landing-profile-item-check, html .studies-category-item-check{ color: var(--dd-accent) !important; flex: none; }
html .landing-profile-item-check, html .studies-category-item-check{ width: 0.9375rem; height: 0.9375rem; margin-left: auto; }
html .nav-icon-check{ font-size: 0.875rem; line-height: 1; margin-left: auto; padding-left: 0.75rem; }
html .menu-item .menu-item-icon{
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1rem; height: 1rem; color: rgb(var(--accent-rgb)) !important; opacity: 0.85;
    transition: opacity 120ms ease;
  }
html .menu-item .menu-item-icon svg{ width: 100%; height: 100%; }
html .menu-item:hover .menu-item-icon, html .menu-item:focus-visible .menu-item-icon{ opacity: 1; }
html .menu-panel:has(.menu-item-icon) .menu-item:not(:has(.menu-item-icon)),
  html .cct-menu-panel:has(.menu-item-icon) .menu-item:not(:has(.menu-item-icon)){ padding-left: 2.5rem !important; }
html .menu-panel .cl-endsave .menu-item, html .cct-menu-panel .cl-endsave .menu-item{ font-weight: 600; color: var(--dd-ink-strong) !important; }
html .menu-panel .menu-group-label,
  html .cct-menu-panel .menu-group-label,
  html .nav-icon-panel-label{
    margin: 0 !important;
    padding: 0.5625rem 0.75rem 0.3125rem 0.8125rem !important;
    font-family: var(--sans);
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    line-height: 1.2;
    color: var(--dd-ink-dim) !important;
    opacity: 1 !important;
    border: none;
  }
html .menu-panel .menu-group, html .cct-menu-panel .menu-group{ gap: 0.0625rem; }
html .menu-panel .menu-group:not([hidden]) ~ .menu-group:not([hidden]),
  html .cct-menu-panel .menu-group:not([hidden]) ~ .menu-group:not([hidden]){
    margin: 0.3125rem calc(-1 * var(--dd-pad)) 0 !important;
    padding: 0.3125rem var(--dd-pad) 0 !important;
    border-top: 0.0625rem solid var(--dd-hairline) !important;
  }
html .nav-icon-panel .menu-item + .nav-icon-panel-label,
  html .nav-icon-panel .menu-item + .nav-icon-panel-note{
    margin: 0.3125rem calc(-1 * var(--dd-pad)) 0 !important;
    border-top: 0.0625rem solid var(--dd-hairline) !important;
  }
html .nav-icon-panel .menu-item + .nav-icon-panel-label{ padding-top: 0.625rem !important; padding-left: calc(0.8125rem + var(--dd-pad)) !important; }
html .nav-icon-panel-note{
    margin: 0; padding: 0.5625rem calc(0.8125rem + var(--dd-pad)) 0.375rem !important;
    font-size: 0.75rem !important; line-height: 1.45; color: var(--dd-ink-dim) !important;
  }
html .nav-icon-panel .menu-item + .nav-icon-panel-note{ margin-bottom: calc(-1 * var(--dd-pad) + 0.25rem) !important; }
html .landing-profile-divider{
    height: 0.0625rem; border: none !important; background: var(--dd-hairline) !important;
    margin: 0.3125rem calc(-1 * var(--dd-pad)) !important;
  }
html .landing-profile-manage-item{ color: var(--dd-ink-dim) !important; }
html .landing-profile-item-avatar{ width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 0.0625rem var(--dd-border); }
html .topnav-games-panel{ min-width: 16rem; }
@media (max-width: 59.9375em), (orientation: landscape) and (max-height: 32rem){
html .topnav-collapsible .topnav-games-panel{ min-width: 0; }
}
html .topnav-games-item{ justify-content: space-between; gap: 1rem; }
html .topnav-games-badge{
    font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important;
    text-transform: uppercase !important; line-height: 1.2; padding: 0.1875rem 0.5rem !important; border-radius: 62.4375rem;
    display: inline-flex; align-items: center; gap: 0.3125rem;
  }
html .topnav-games-badge.available{ background: transparent !important; color: var(--dd-ink-dim) !important; padding-right: 0 !important; }
html .topnav-games-badge.available::before{
    content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 0.1875rem rgba(73,205,212,0.14);
  }
html[data-theme="light"] .topnav-games-badge.available::before{ box-shadow: 0 0 0 0.1875rem rgba(42,122,122,0.14); }
html .topnav-games-badge.upgrade{
    background: linear-gradient(var(--cyan), var(--cyan)) !important;
    color: #052224 !important; font-weight: 700 !important;
  }
html[data-theme="light"] .topnav-games-badge.upgrade{ color: #f2fbfb !important; }
html .chevron{ transition: transform 200ms var(--dd-ease) !important; }
html .nav-icon-menu.open .nav-icon-btn{ background-color: var(--dd-trigger-hover); }
html .menu-dropdown.open .menu-btn,
  html .menu-dropdown.open .cct-menu-btn,
  html .landing-profile-switcher.open .landing-profile-btn,
  html .studies-category-select.open .studies-category-btn{
    border-color: var(--dd-trigger-border-strong) !important;
    background-color: var(--dd-trigger-hover) !important;
  }
html .menu-dropdown.open .menu-btn .chevron,
  html .menu-dropdown.open .cct-menu-btn .chevron,
  html .landing-profile-switcher.open .landing-profile-btn .chevron,
  html .studies-category-select.open .studies-category-btn .chevron{ color: rgb(var(--accent-rgb)); }
html .studies-category-btn{
    border-width: 0.0625rem; border-color: var(--dd-trigger-border); background: var(--dd-trigger-bg);
    border-radius: 0.75rem; min-height: 2.75rem; padding: 0.625rem 0.875rem;
  }
@media (hover: hover){
html .studies-category-btn:hover{ background: var(--dd-trigger-hover); border-color: rgba(var(--accent-rgb),0.45); }
}
html .studies-category-btn .chevron, html .landing-profile-btn .chevron{ color: var(--dd-ink-dim); }
html .menu-btn:focus-visible, html .cct-menu-btn:focus-visible, html .studies-category-btn:focus-visible,
  html .landing-profile-btn:focus-visible, html .nav-icon-btn:focus-visible{
    outline: none !important; box-shadow: none !important;
    background-color: var(--dd-trigger-hover) !important; border-color: var(--dd-trigger-border-strong) !important;
  }
html .nav-icon-btn:focus-visible{ border-radius: 50%; color: rgb(var(--accent-rgb)); opacity: 1; }
html select{ color-scheme: var(--dd-scheme); }
html[data-theme="light"] select{ color-scheme: light; }
html:not([data-theme="light"]) select{ color-scheme: dark; }
html select option,
  html select optgroup{ background-color: var(--dd-opt-solid) !important; color: var(--dd-ink-strong) !important; }
html select optgroup{ color: var(--dd-ink-dim) !important; }
html select option:checked{ background-color: var(--dd-opt-sel-solid) !important; color: var(--dd-ink-strong) !important; }
html select:focus, html select:focus-visible{ outline: none !important; box-shadow: none !important; }
html select:focus-visible{ border-color: var(--dd-trigger-border-strong) !important; background-color: var(--dd-trigger-hover) !important; }
html select.nbd-mode-select:focus-visible{ border-radius: 0.375rem; }
html .theme-select,
  html .profile-select,
  html .iq-filter select,
  html select.manual-select{
    -webkit-appearance: none; appearance: none;
    background-color: var(--dd-trigger-bg) !important;
    background-image: var(--dd-caret) !important;
    background-repeat: no-repeat !important;
    background-size: 0.6875rem 0.4375rem !important;
    background-position: right 0.8125rem center !important;
    border: 0.0625rem solid var(--dd-trigger-border) !important;
    color: var(--ink);
    font-family: var(--sans);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
  }
html .theme-select{
    min-height: 2.5rem; box-sizing: border-box; line-height: 1.2;
    padding: 0.5rem 2.25rem 0.5rem 1rem !important;
    border-radius: 62.4375rem !important;
    font-size: 0.9375rem; font-weight: 600;
  }
html .profile-select{ padding-right: 2.125rem !important; min-height: 2.25rem; border-radius: 0.625rem !important; }
html .iq-filter select{ padding-right: 2.125rem !important; border-radius: 0.625rem !important; }
html select.manual-select{ padding-right: 2rem !important; background-position: right 0.6875rem center !important; }
@media (hover: hover){
html .theme-select:hover, html .profile-select:hover, html .iq-filter select:hover, html select.manual-select:hover{
      background-color: var(--dd-trigger-hover) !important; border-color: rgba(var(--accent-rgb),0.5) !important; background-image: var(--dd-caret-hot) !important;
    }
}
html .theme-select:focus-visible, html .profile-select:focus-visible, html .iq-filter select:focus-visible, html select.manual-select:focus-visible{
    background-image: var(--dd-caret-hot) !important; border-color: var(--dd-trigger-border-strong) !important;
  }
html select.manual-select:disabled, html .profile-select:disabled{ opacity: 0.45; cursor: not-allowed; }
html select.time-stepper-select{ transition: border-color 140ms ease, background-color 140ms ease; }
@media (max-width: 40rem){
html .theme-select{ min-height: 2.75rem; }
}
#aboutOverlay .about-freebies-grid.res-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 1.5rem; }
@media (max-width: 56em){
#aboutOverlay .about-freebies-grid.res-grid{ grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-left: auto; margin-right: auto; gap: 2.5rem; }
}
.res-card{ display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0; margin: 0; border: 0; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.res-card-title{ font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.res-card-shot{ position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 0.875rem; overflow: hidden; background: var(--bg-1);
    border: 0.0625rem solid rgba(var(--accent-rgb, 45, 212, 191), 0.22);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(var(--accent-rgb, 45, 212, 191), 0);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.res-card-shot::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: none; }
.res-img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.res-img--light{ display: none; }
html[data-theme="light"] .res-img--dark{ display: none; }
html[data-theme="light"] .res-img--light{ display: block; }
html[data-theme="light"] .res-card-shot{ background: #eef7f7; border-color: rgba(42, 122, 122, 0.25); box-shadow: 0 0.75rem 2rem rgba(20, 60, 60, 0.14); }
html[data-theme="light"] .res-card-shot::after{ background: none; }
.res-card-desc{ max-width: 30rem; font-size: 0.975rem; line-height: 1.6; color: var(--ink); opacity: 0.9; }
.res-card, .res-card:hover, .res-card:focus, .res-card:focus-visible, .res-card:active{ box-shadow: none !important; transform: none !important; border-radius: 0 !important; background: none !important; outline: none !important; }
@media (hover: hover){
.res-card:hover .res-card-shot{ transform: translateY(-0.25rem); border-color: rgba(var(--accent-rgb, 45, 212, 191), 0.55); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.4); }
.res-card:hover .res-img{ transform: scale(1.03); }
}
.res-card:focus{ outline: none; }
.res-card:focus-visible .res-card-shot{ border-color: rgba(var(--accent-rgb, 45, 212, 191), 0.9); box-shadow: none; }
@media (prefers-reduced-motion: reduce){
.res-card-shot, .res-img{ transition: none; }
.res-card:hover .res-card-shot, .res-card:hover .res-img{ transform: none; }
}
#contactOverlay .page-header{ text-align: center; max-width: none; width: 100%; }
#contactOverlay .page-header .page-intro{ margin-left: auto; margin-right: auto; max-width: 40rem; }
#testingOverlay .page-header{ text-align: center; max-width: none; width: 100%; margin-left: auto; margin-right: auto; }
#testingOverlay .page-header .page-title{ margin-left: auto; margin-right: auto; }
#testingOverlay .page-header .page-intro{ margin-left: auto; margin-right: auto; max-width: 40rem; }
.upgrade-features.upg-shots{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem); max-width: 66rem; margin: clamp(2rem, 5vw, 3.5rem) auto; }
@media (max-width: 48em){
.upgrade-features.upg-shots{ grid-template-columns: minmax(0, 1fr); max-width: 34rem; gap: 2.5rem; }
}
.upg-card{ cursor: default; }
#navBrand, #navBrand:hover, #navBrand:focus, #navBrand:active{ box-shadow: none !important; transform: none !important; background: none !important; border-radius: 0 !important; filter: none !important; outline: none !important; }
#navBrand:focus-visible{ text-decoration: underline; text-underline-offset: 0.3em; }
.csel-panel{ position: fixed; z-index: 100000; box-sizing: border-box; max-width: calc(100vw - 1rem); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--dd-pad, 0.3125rem); border-radius: var(--dd-radius, 0.875rem);
    background: var(--dd-bg, var(--bg-1));
    border: 0.0625rem solid var(--dd-border, var(--panel-border));
    box-shadow: inset 0 0.0625rem 0 var(--dd-highlight, rgba(255,255,255,0.06)), var(--dd-shadow, 0 1rem 2.5rem rgba(0,0,0,0.45));
    font-family: var(--sans); color: var(--dd-ink, var(--ink)); color-scheme: var(--dd-scheme, dark);
    opacity: 0; transform: translateY(-0.25rem) scale(0.98); transform-origin: top center;
    transition: opacity 0.16s ease, transform 0.19s var(--dd-ease, ease); }
.csel-panel.csel-up{ transform-origin: bottom center; transform: translateY(0.25rem) scale(0.98); }
.csel-panel.csel-in{ opacity: 1; transform: none; }
.csel-opt{ position: relative; display: flex; align-items: center; min-height: var(--dd-row, 2.25rem); box-sizing: border-box;
    padding: 0.4375rem 2rem 0.4375rem 0.8125rem; border-radius: var(--dd-item-radius, 0.5625rem);
    font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: nowrap; cursor: pointer; user-select: none; color: var(--dd-ink, var(--ink)); }
.csel-opt.csel-hot{ background: var(--dd-hover, rgba(255,255,255,0.06)); color: var(--dd-ink-strong, var(--ink)); }
.csel-opt.csel-sel{ background: var(--dd-sel, rgba(var(--accent-rgb),0.14)); color: var(--dd-ink-strong, var(--ink)); font-weight: 600; }
.csel-opt.csel-sel.csel-hot{ background: var(--dd-sel-hover, rgba(var(--accent-rgb),0.2)); }
.csel-opt.csel-sel::before{ content: ""; position: absolute; left: 0.1875rem; top: 50%; width: 0.1875rem; height: 0.875rem; margin-top: -0.4375rem; border-radius: 1rem; background: var(--dd-accent, rgb(var(--accent-rgb))); }
.csel-opt.csel-sel::after{ content: ""; position: absolute; right: 0.75rem; top: 50%; width: 0.3rem; height: 0.6rem; margin-top: -0.4rem;
    border: solid var(--dd-accent, rgb(var(--accent-rgb))); border-width: 0 0.125rem 0.125rem 0; transform: rotate(45deg); }
.csel-opt.csel-dis{ opacity: 0.45; cursor: default; }
.csel-group{ padding: 0.5rem 0.8125rem 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dd-ink-dim, var(--ink-dim)); }
.csel-group:not(:first-child){ margin-top: 0.25rem; border-top: 0.0625rem solid var(--dd-hairline, rgba(255,255,255,0.06)); }
select.csel-open{ border-color: var(--dd-trigger-border-strong, rgba(var(--accent-rgb),0.5)) !important; }
@media (pointer: coarse){
.csel-opt{ min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce){
.csel-panel{ transition: none; transform: none; }
}
.rrt-tpop .rrt-tpop-pre{ align-items: center; }
.rrt-tpop .rrt-tpop-edit{ display: inline-grid; place-items: center; width: 2rem; min-width: 2rem !important; padding: 0 !important; }
.rrt-tpop .rrt-tpop-edit svg{ width: 0.9rem; height: 0.9rem; }
.rrt-tpop .rrt-tpe{ display: inline-flex; align-items: center; border: 0.0625rem solid var(--panel-border); border-radius: 0.5rem; background: rgba(var(--accent-rgb), 0.06); overflow: hidden; }
.rrt-tpop .rrt-tpe input{ width: 3rem; min-width: 0; padding: 0.3rem 0.2rem 0.3rem 0.45rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 600; text-align: center; -moz-appearance: textfield; }
.rrt-tpop .rrt-tpe input:focus{ outline: none; background: rgba(var(--accent-rgb), 0.1); }
.rrt-tpop .rrt-tpe button{ border: 0 !important; background: transparent !important; color: var(--ink-dim); padding: 0.3rem 0.45rem !important; min-width: 0 !important; font-size: 0.95rem; line-height: 1; box-shadow: none !important; }
.rrt-tpop .rrt-tpe button:hover{ color: var(--bad, #e5536b); }
.rrt-tpop .rrt-tpe-add{ width: 2rem; min-width: 2rem !important; padding: 0 !important; font-size: 1.05rem; }
.rrt-tpop .rrt-tpe-row{ display: flex; justify-content: space-between; width: 100%; margin-top: 0.25rem; gap: 0.5rem; }
.rrt-tpop .rrt-tpe-row button{ flex: 1; }
.rrt-tpop .rrt-tpe-done{ background: linear-gradient(var(--cyan), var(--cyan)) !important; color: #052224 !important; border-color: transparent !important; font-weight: 700; }
#rrtGameView, #rrtHistoryOverlay{
    --rb-panel: rgba(var(--accent-rgb),0.055); --rb-sep: rgba(150,213,217,0.14); --rb-out: rgba(73,205,212,0.35);
    --rb-track: rgba(var(--accent-rgb),0.13); --rb-g1: var(--cyan); --rb-g2: var(--violet); --rb-hover: rgba(var(--accent-rgb),0.06);
    --rb-true: #1fbf5b; --rb-false: #e8384f; --rb-tile: rgba(var(--accent-rgb),0.1); --rb-tile-bad: rgba(255,127,140,0.12); --rb-tile-bad-ink: #ffb3bc;
    --rb-u: 1rem;
  }
html[data-theme="light"] :is(#rrtGameView, #rrtHistoryOverlay){
    --rb-panel: rgba(255,255,255,0.78); --rb-sep: rgba(26,43,43,0.1); --rb-out: rgba(42,122,122,0.45);
    --rb-track: rgba(42,122,122,0.15); --rb-g1: #23967a; --rb-g2: #23967a; --rb-hover: rgba(42,122,122,0.07);
    --rb-true: #179c4a; --rb-false: #d42d44; --rb-tile: rgba(42,122,122,0.1); --rb-tile-bad: rgba(201,74,92,0.12); --rb-tile-bad-ink: #b03246;
  }
.rrtb-ttl{ flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; row-gap: 0.2rem; }
#rrtBLvl:empty{ display: none; }
#rrtBSub[hidden]{ display: none; }
.rrtb-trk{ position: relative; flex: 1 1 auto; min-width: 0; height: 0.35rem; border-radius: 1rem; background: var(--rb-track); overflow: hidden; pointer-events: none; transition: background-color 120ms ease; }
.rrtb-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--rb-g1); transition: width 120ms linear, opacity 120ms ease; }
.rrtb-num{ flex: none; min-width: 2rem; text-align: right; font-family: var(--display); font-size: 0.85rem; line-height: 1.2; font-weight: 700; color: var(--cyan);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; pointer-events: none; transition: color 120ms ease; }
#rrtBName.rrtb-long, #rrtBName.rrtb-long ~ #rrtBLvl{ font-size: 1.7rem; }
#rrtBName.rrtb-xlong, #rrtBName.rrtb-xlong ~ #rrtBLvl{ font-size: 1.45rem; }
.rrtb-sr{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 40rem){
#rrtBName.rrtb-long, #rrtBName.rrtb-long ~ #rrtBLvl{ font-size: 1.45rem; }
#rrtBName.rrtb-xlong, #rrtBName.rrtb-xlong ~ #rrtBLvl{ font-size: 1.25rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
.rrtb-num{ font-size: 0.8rem; }
#rrtBName.rrtb-long, #rrtBName.rrtb-long ~ #rrtBLvl{ font-size: 1.3rem; }
#rrtBName.rrtb-xlong, #rrtBName.rrtb-xlong ~ #rrtBLvl{ font-size: 1.15rem; }
}
#rrtHistoryOverlay.info-overlay{ padding: 0 !important; overflow: hidden !important; align-items: stretch; justify-content: flex-end; background: rgba(0,0,0,0.45); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="light"] #rrtHistoryOverlay.info-overlay{ background: rgba(26,43,43,0.28); }
#rrtHistoryOverlay .info-card{ position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 22rem; max-width: 100%; max-height: none !important; height: auto; margin: 0; box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden !important; padding: 1.1rem 1.3rem 0 !important; border-radius: 0 !important;
    border: 0; border-left: 0.0625rem solid var(--panel-border); background: var(--rb-pane, var(--bg-1)) !important; box-shadow: -1rem 0 3rem rgba(0,0,0,0.45) !important; font-size: 0.88rem; }
html[data-theme="light"] #rrtHistoryOverlay .info-card{ --rb-pane: #f4fafa; box-shadow: -1rem 0 3rem rgba(26,43,43,0.18) !important; }
#rrtHistoryOverlay.visible .info-card{ animation: rrtbPanelIn 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes rrtbPanelIn{ from{ transform: translateX(100%); } to{ transform: none; } }
@keyframes rrtbSheetIn{ from{ transform: translateY(100%); } to{ transform: none; } }
#rrtHistoryOverlay .rrtb-hhead{ flex: none; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.85rem; min-height: 2.5rem; }
#rrtHistoryOverlay .rrtb-hhead .info-title{ flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; font-family: var(--display); font-size: 1.2rem !important; font-weight: 800; letter-spacing: -0.01em;
    text-transform: none !important; color: var(--ink) !important; line-height: 1.3; }
#rrtHistoryOverlay .rrtb-hhead .modal-close-x{ position: static !important; inset: auto; flex: none; width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; margin: 0 !important; border-radius: 0.5rem;
    background: rgba(var(--accent-rgb), 0.14) !important; border: 0 !important; color: var(--ink); display: grid; place-items: center; font-size: 1.2rem; line-height: 1; transform: none; }
#rrtHistoryOverlay .rrtb-grab{ display: none; }
#rrtHistoryOverlay .rrt-hscore{ flex: none; font-size: 0.85rem; font-weight: 800; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
#rrtHistoryOverlay .rrt-ov-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 -1.3rem; padding: 0 1.3rem 1.2rem; display: flex; flex-direction: column; }
#rrtHistoryOverlay .rrt-hfilter{ order: 1; margin: 0 0 0.65rem; flex: none !important; display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
#rrtHistoryOverlay .rrt-hfilter .seg-btn{ flex: none; min-height: 1.9rem !important; padding: 0.25rem 0.62rem !important; border-radius: 62rem !important; border: 0 !important; box-shadow: none !important;
    background: rgba(var(--accent-rgb), 0.08) !important; color: var(--ink-dim) !important; font-size: 0.75rem !important; font-weight: 700; }
#rrtHistoryOverlay [data-rrt-clear]{ order: 5; align-self: flex-start; margin: 0.4rem 0 0 -0.55rem; min-height: 1.9rem !important; padding: 0.2rem 0.55rem !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--ink-dim) !important; font-size: 0.75rem !important; font-weight: 600; }
#rrtHistoryOverlay [data-rrt-clear]:hover{ color: var(--bad) !important; }
@media (pointer: coarse){
#rrtHistoryOverlay .rrt-hfilter .seg-btn, #rrtHistoryOverlay [data-rrt-clear]{ min-height: 2.25rem !important; }
}
#rrtHistoryOverlay .rrt-hnote{ order: 4; margin: 0.8rem 0 0 !important; font-size: 0.72rem !important; color: var(--ink-dim); }
#rrtHistoryOverlay .rrt-hempty{ order: 3; color: var(--ink-dim); }
#rrtHistoryOverlay .rrt-hlist{ order: 3; display: flex; flex-direction: column; gap: 0 !important; }
#rrtHistoryOverlay .rrt-hi-n{ display: none; }
#rrtHistoryOverlay .rrt-hi-k{ grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; border-radius: 0.35rem; display: grid; place-items: center;
    font-size: 0.72rem; font-weight: 800; line-height: 1; background: var(--rb-tile); color: var(--ink-dim); }
@media (max-width: 40rem){
#rrtHistoryOverlay.info-overlay{ align-items: flex-end; justify-content: stretch; }
#rrtHistoryOverlay .info-card{ top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 82vh; height: 82dvh; padding: 0.55rem 1.1rem 0 !important; border-left: 0;
      border: 0.0625rem solid var(--panel-border); border-bottom: 0; border-radius: 1.4rem 1.4rem 0 0 !important; box-shadow: 0 -1rem 3rem rgba(0,0,0,0.5) !important; font-size: 0.95rem; touch-action: pan-y; }
#rrtHistoryOverlay.visible .info-card{ animation-name: rrtbSheetIn; }
}
@media (orientation: landscape) and (max-height: 32rem){
#rrtHistoryOverlay .info-card{ padding-top: 0.8rem !important; }
}
@media (prefers-reduced-motion: reduce){
#rrtHistoryOverlay.visible .info-card{ animation: none; }
.rrtb-fill, .rrtb-num{ transition: none; }
}
.rrt-hpop{ min-width: 15rem; max-width: min(22rem, calc(100vw - 1rem)); }
.rrt-hpop .rrt-hp-v{ font-size: 1.6rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rrt-hpop .rrt-tpop-step button{ font-weight: 700; }
.rrt-hpop .rrt-hp-note{ margin: 0.55rem 0 0; font-size: 0.75rem; color: var(--ink-dim); text-align: center; }
.rrt-hpop .rrt-hp-list{ display: flex; flex-direction: column; max-height: min(22rem, 55vh); overflow-y: auto; overscroll-behavior: contain; margin: 0.4rem -0.25rem 0.6rem; }
.rrt-hpop .rrt-hp-row{ display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.55rem; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.rrt-hpop .rrt-hp-row + .rrt-hp-row{ border-top: 0.0625rem solid rgba(var(--accent-rgb), 0.08); }
.rrt-hpop .rrt-hp-row input{ width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--cyan); flex: none; }
.rrt-hpop .rrt-hp-row.last{ opacity: 0.7; cursor: default; }
.rrt-hpop .rrt-hp-done{ width: 100%; padding: 0.55rem 0.75rem; border: 0 !important; border-radius: 0.6rem; font-weight: 700; background: linear-gradient(var(--cyan), var(--cyan)) !important; color: #052224 !important; }
@media (pointer: coarse){
.rrt-hpop .rrt-hp-row{ padding: 0.7rem 0.55rem; }
}
.rrt-run{ position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: content-box;
    margin: -0.45rem -0.2rem -0.45rem -0.45rem; padding: 0.45rem; border-radius: 0.6rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rrt-run > input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 1; -webkit-appearance: none; appearance: none; }
.rrt-run-box{ --rrt-run-fill: var(--cyan); --rrt-run-dark: rgba(0, 0, 0, 0.32);
    display: grid; place-items: center; width: 1.2rem; height: 1.2rem; box-sizing: border-box; border-radius: 0.34rem;
    border: 0.125rem solid rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.07);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
html[data-theme="light"] .rrt-run-box{ --rrt-run-dark: rgba(0, 0, 0, 0); border-color: rgba(42, 122, 122, 0.55); background: rgba(255, 255, 255, 0.85); }
.rrt-run-box svg{ width: 0.85rem; height: 0.85rem; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 120ms ease; }
.rrt-run > input:checked + .rrt-run-box{ background-color: var(--rrt-run-fill); background-image: linear-gradient(var(--rrt-run-dark), var(--rrt-run-dark)); border-color: transparent; }
.rrt-run > input:checked + .rrt-run-box svg{ opacity: 1; transform: none; }
.rrt-run > input:active + .rrt-run-box{ transform: scale(0.92); }
.rrt-run > input:focus{ outline: none; }
.rrt-run > input:focus-visible + .rrt-run-box{ outline: 0.125rem solid var(--cyan); outline-offset: 0.15rem; }
@media (pointer: coarse){
.rrt-run-box{ width: 1.35rem; height: 1.35rem; }
.rrt-run-box svg{ width: 0.95rem; height: 0.95rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
.rrt-run{ margin-top: -0.35rem; margin-bottom: -0.35rem; padding-top: 0.35rem; padding-bottom: 0.35rem; }
}
@keyframes rrtRunNudge{ 0%, 100%{ transform: none; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 35%{ transform: scale(1.18); box-shadow: 0 0 0 0.4rem rgba(var(--accent-rgb), 0.3); } }
@media (prefers-reduced-motion: reduce){
.rrt-run-box, .rrt-run-box svg{ transition: none; }
}
.rrt-corner{ display: none; position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; align-items: center; gap: 0.5rem; }
body.rrt-cornered .rrt-corner{ display: flex; }
.rrt-corner .nb-hbtn{ width: 2.25rem; min-width: 2.25rem; height: 2.25rem; flex: none; }
.rrt-corner .game-menu .cct-menu-btn{ height: 2.25rem; padding: 0 0.8rem; font-size: 0.9rem; }
html body .theme-select#themeSelect{ display: none !important; }
.nav-theme-btn .ntb-sun{ display: none; }
.nav-theme-btn .ntb-sys{ display: none; }
html[data-theme="light"] .nav-theme-btn .ntb-sun{ display: block; }
html[data-theme="light"] .nav-theme-btn .ntb-moon{ display: none; }
.nav-theme-btn svg{ width: 1.5rem; height: 1.5rem; min-width: 1.5rem; }
html body .nav-icon-btn:focus:not(:focus-visible){ background: none !important; color: var(--ink) !important; opacity: 0.8; }
@media (hover: none){
html body .nav-icon-btn:hover{ color: var(--ink); opacity: 0.8; transform: none; }
}
html body .nav-icon-btn, html body .nav-icon-btn:hover{ box-shadow: none !important; }
html body .nav-icon-btn .ntb-sun *{ stroke-width: 2.2; }
html body .nbd-head [aria-label="Toggle light / dark theme"], html body #nbdTheme{ display: none !important; }
body:not(.cl-dock) :is(#gameView,#geoView,#semanticView,#linguisticView):not(.posner-summary-active) > .instrument-head{ padding-top: 0.9rem !important; padding-bottom: 0.55rem !important; }
body:not(.cl-dock) :is(#gameView,#geoView,#semanticView,#linguisticView):not(.posner-summary-active) > .readout{ padding-top: 0.8rem !important; padding-bottom: 0.4rem !important; }
body:not(.cl-dock) :is(#gameView,#geoView,#semanticView,#linguisticView):not(.posner-summary-active) > .footer{ padding-top: 0.2rem !important; padding-bottom: 0.9rem !important; }
.cl-import-btn{ margin-top: 0.5rem !important; }
.cl-share-line{ display: flex; align-items: center; gap: 0.6rem; }
.cl-share-line + .cl-share-line{ margin-top: 0.625rem; }
.cl-share-line > button.drawer-share-btn{ flex: 1 1 auto; width: auto; min-width: 0; margin: 0 !important; }
:is(#nbDrawer, .nb-drawer) .cl-share-line > .nbd-info::after{ right: 0; }
:is(.cl-share-line, .nbd-bi) > .nbd-info{ flex: none; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; padding: 0; letter-spacing: 0; }
.rrt-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.rrt-prof{ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.7rem 0.9rem; border-radius: 0.7rem;
    border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.05); color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
.rrt-prof em{ font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--ink-dim); flex: none; }
.rrt-prof.on{ border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.12); cursor: default; }
.rrt-prof.on em{ color: rgb(var(--accent-rgb)); }
.rrt-prof-new{ display: flex; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
html[data-theme="light"] .rrt-prof-new input{ background: rgba(255,255,255,0.75); }
.rrt-prof-new input:focus{ outline: none; border-color: var(--cyan); }
.rrt-prof-new button{ flex: none; height: 2.5rem; }
#contactOverlay .cl-dc{ max-width: 36rem; margin: 0 auto; padding: clamp(3rem, 14vh, 8rem) 1.25rem 3rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
#contactOverlay .cl-dc-logo{ width: 5rem; height: 5rem; border-radius: 1.4rem; display: grid; place-items: center; margin-bottom: 1.75rem; color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); border: 0.0625rem solid rgba(var(--accent-rgb), 0.22); }
#contactOverlay .cl-dc-logo svg{ width: 2.75rem; height: 2.75rem; }
#contactOverlay .cl-dc-title{ font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.75rem; }
#contactOverlay .cl-dc-intro{ margin: 0 0 0.6rem; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--ink); font-weight: 600; }
#contactOverlay .cl-dc-text{ margin: 0 0 2rem; font-size: 1.05rem; line-height: 1.65; color: var(--ink-dim); max-width: 30rem; }
#contactOverlay .cl-dc-cta{ display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 2.25rem; border-radius: 0.85rem; font-weight: 700; font-size: 1.08rem; text-decoration: none; color: #fff; background: rgb(var(--accent-rgb)); transition: filter 150ms ease, transform 150ms ease; }
html[data-theme="cyan"] #contactOverlay .cl-dc-cta{ color: #052224; }
#contactOverlay .cl-dc-cta:hover{ filter: brightness(1.08); transform: translateY(-0.06rem); }
#contactOverlay .cl-dc-cta:focus-visible{ outline: 0.15rem solid rgb(var(--accent-rgb)); outline-offset: 0.2rem; }
@media (max-width: 30em){
#contactOverlay .cl-dc-cta{ width: 100%; }
}
#linguisticPair.ling-correction{ color: #3fd67f; }
html[data-theme="light"] #linguisticPair.ling-correction{ color: #14843f; }
#linguisticPair.ling-correction::before{ color: inherit !important; opacity: 0.85; }
#linguisticPair.ling-correction::before{ content: "Correct pair"; display: block; margin-bottom: 0.35em; font-size: 0.42em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
html[data-theme="light"] #aboutOverlay, html[data-theme="light"] #upgradeOverlay,
  html[data-theme="light"] #pricingOverlay, html[data-theme="light"] #contactOverlay,
  html[data-theme="light"] #studiesOverlay, html[data-theme="light"] #testingOverlay{ --cyan: #226b6b; --accent-rgb: 34, 107, 107; }
html body .cl-removed{ display: none !important; }
#contactOverlay .contact-grid.cl-one{ grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-left: auto; margin-right: auto; }
#nbdAutoMethodRow{ flex-wrap:wrap; }
#nbdAutoMethodRow .seg-toggle{ width:100%; }
#nbdCcOpts .nb-cc-intro{ margin:0.4rem 0 0.8rem; }
.nb-cc-status{ display:grid; gap:0.45rem; margin:0 0 0.9rem; padding:0.7rem 0.8rem; border:0.0625rem solid var(--panel-border); border-radius:0.625rem; background:rgba(var(--accent-rgb),0.05); font-size:0.8125rem; line-height:1.45; color:var(--ink-dim); }
.nb-cc-line{ display:grid; grid-template-columns:4.75rem minmax(0,1fr); gap:0.5rem; }
.nb-cc-line b{ color:var(--ink-dim); font-weight:600; }
.nb-cc-warn{ display:grid; gap:0.5rem; padding-top:0.45rem; border-top:0.0625rem solid var(--panel-border); color:var(--ink); }
.nb-cc-warn button{ justify-self:start; padding:0.35rem 0.7rem; font-size:0.8125rem; }
.nb-cc-grp{ display:grid; grid-template-columns:3.75rem minmax(0,1fr); gap:0.5rem; align-items:start; margin:0.45rem 0; }
.nb-cc-chips .nb-mode-chip{ min-height:1.75rem; }
.nb-cc-chips .nb-mode-chip:disabled{ cursor:default; }
.nb-cc-list{ list-style:none; margin:0 0 0.5rem; padding:0; display:grid; gap:0.4rem; }
.nb-cc-list small{ font-size:0.72rem; color:var(--ink-dim); }
.nb-cc-own{ opacity:0.5; }
.nb-cc-own :is(input,button,select){ cursor:not-allowed; }
.nb-audind{ position:absolute; left:50%; top:50%; width:min(34vmin,16rem); height:min(34vmin,16rem); transform:translate(-50%,-50%) scale(1); opacity:0; display:none; pointer-events:none; color:rgb(var(--accent-rgb)); transition:opacity 0.15s ease-out, transform 0.15s ease-out; z-index:2; }
.nb-audind svg{ display:block; width:100%; height:100%; }
.nb-audind.nb-red{ color:#D7263D; }
html.cl-cb .nb-audind.nb-red{ color:#D55E00; }
.nb-info-red{ margin-bottom:0.75rem; font-weight:600; color:var(--ink); }
#nbdEmoColRow .seg-toggle .seg-btn{ white-space:normal; line-height:1.2; }
.lp-continue{ margin: 0 0 1.75rem; }
.lp-continue[hidden]{ display: none; }
.lp-continue-card{ display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 1.125rem; cursor: pointer;
    border: 0.0625rem solid rgba(var(--accent-rgb),0.35);
    background: rgba(255,255,255,0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease; }
.lp-continue-card:hover{ border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 1rem 2rem -1.5rem rgba(0,0,0,0.7); }
.lp-continue-card:focus-visible{ outline: 0.125rem solid var(--cyan); outline-offset: 0.1875rem; }
.lpc-l{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.lpc-k{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.lpc-name{ font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.lpc-sub{ font-size: 0.875rem; color: var(--ink-dim); }
html[data-theme="light"] .lp-continue-card{ background: rgba(255,255,255,0.45); border-color: rgba(42,122,122,0.45); }
@media (max-width: 48em){
.nb-float.nb-float-l{ top:0.75rem !important; }
}
:root{ --rrt-pop-bg: #0d1e26; --rrt-pop-shadow: 0 0.75rem 2.25rem -0.5rem rgba(0,0,0,0.6); }
html[data-theme="light"]{ --rrt-pop-bg: #eef7f7; --rrt-pop-shadow: 0 0.75rem 2rem -0.75rem rgba(26,43,43,0.35); }
.rrt-tpop{ position: fixed; left: 0; top: 0; z-index: 900; box-sizing: border-box; width: min(17.5rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem; border-radius: var(--radius-md, 1rem); background: var(--rrt-pop-bg); color: var(--ink);
    border: 0.0625rem solid var(--panel-border); box-shadow: var(--rrt-pop-shadow); font-family: var(--sans); text-align: center; }
.rrt-tpop[hidden]{ display: none; }
.rrt-tpop:focus{ outline: none; }
.rrt-tpop-h{ display: flex; flex-direction: column; gap: 0.1rem; }
.rrt-tpop-h b{ font-size: 0.85rem; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
html body .rrt-tpop button{ appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0; box-sizing: border-box;
    min-height: 2.25rem; padding: 0 0.5rem; border-radius: var(--radius-sm, 0.625rem); border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.07);
    color: var(--ink); font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: none; transform: none; text-shadow: none; letter-spacing: 0; }
@media (hover: hover){
html body .rrt-tpop button:hover{ background: rgba(var(--accent-rgb), 0.15); border-color: rgba(var(--accent-rgb), 0.45); transform: none; box-shadow: none; }
}
html body .rrt-tpop button:focus-visible{ outline: 0.125rem solid var(--cyan); outline-offset: 0.0625rem; }
html body .rrt-tpop button.on{ background: rgba(var(--accent-rgb), 0.22); border-color: var(--cyan); color: var(--ink); }
.rrt-tpop-step{ display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: 0.4rem; align-items: stretch; }
.rrt-tpop-v{ display: flex; align-items: baseline; justify-content: center; gap: 0.15rem; border-radius: var(--radius-sm, 0.625rem); border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.04); padding: 0 0.4rem; }
.rrt-tpop-pre{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
html body .rrt-tpop .rrt-tpop-off{ width: 100%; }
.rrt-tpop-off.on i{ background: var(--cyan); }
.rrt-tpop.untimed :is(.rrt-tpop-step, .rrt-tpop-pre){ opacity: 0.6; }
@media (pointer: coarse){
#rrtStatsOverlay .seg-btn, #rrtTrendMetric{ min-height: 2.4rem; }
}
.instrument:has(> #schGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: max(20rem, min(60rem, calc(100svh - var(--topnav-h, 4.75rem) - 9rem))); margin: 0 auto; }
#schGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --sch-line: rgba(var(--accent-rgb), 0.42); --sch-glow: rgba(var(--accent-rgb), 0.13); --sch-bar: 3rem; --sch-a: var(--ink); --sch-b: #ff6b7d; }
#schGameView .sch-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#schGameView .sch-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; }
#schGameView .sch-hl, #schGameView .sch-hr{ display: flex; align-items: center; gap: 0.5rem; }
#schGameView .sch-head .nb-hbtn{ width: 2.25rem; min-width: 2.25rem; height: 2.25rem; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#schGameView .sch-head{ height: 0; overflow: visible; }
}
#schGameView .sch-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--sch-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#schGameView .sch-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--sch-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#schGameView .sch-ttl{ display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--ink); }
#schGameView .sch-fb{ font-size: 0.9rem; letter-spacing: 0.14em; }
#schGameView .sch-clock{ justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-dim); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
#schGameView .sch-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.4rem 1.1rem; }
#schGameView .sch-info{ flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
#schGameView .sch-lab{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
#schGameView .sch-find{ flex-direction: row !important; align-items: center; gap: 0.6rem !important; }
#schGameView .sch-find b.sch-ca{ color: var(--sch-a); }
#schGameView .sch-find b.sch-cb{ color: var(--sch-b); }
#schGameView .sch-find.off b{ color: transparent; }
#schGameView .sch-stat{ align-items: flex-end; text-align: right; }
#schGameView .sch-wrap{ position: relative; flex: 1 1 auto; min-height: 6rem; display: flex; align-items: center; justify-content: center; }
#schGameView .sch-grid{ display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); grid-template-rows: repeat(var(--n, 5), 1fr); gap: clamp(0.15rem, 1.1%, 0.45rem);
    width: 10rem; height: 10rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: filter 160ms ease, opacity 160ms ease; }
#schGameView .sch-cell{ appearance: none; -webkit-appearance: none; margin: 0; padding: 0; min-width: 0; min-height: 0; border-radius: 0.45rem; border: 0.0625rem solid rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--accent-rgb), 0.06); color: var(--ink); font-family: var(--display); font-weight: 750; font-size: var(--fs, 1.4rem); line-height: 1;
    display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; box-shadow: none; transform: none; }
#schGameView .sch-ctr{ display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--display); font-weight: 800; }
#schGameView .sch-ctr-t{ font-size: var(--cfs, 1.4rem); line-height: 1; color: var(--violet); }
#schGameView .sch-grid.sch-look-lines{ gap: 0.0625rem; background: rgba(var(--accent-rgb), 0.35); border: 0.0625rem solid rgba(var(--accent-rgb), 0.35); border-radius: 0.35rem; overflow: hidden; }
#schGameView .sch-hue0{ color: #ff8f8f; }
#schGameView .sch-hue1{ color: #ffb86b; }
#schGameView .sch-hue2{ color: #e6e36a; }
#schGameView .sch-hue3{ color: #7ee08a; }
#schGameView .sch-hue4{ color: #5fd4ff; }
#schGameView .sch-hue5{ color: #9aa8ff; }
#schGameView .sch-hue6{ color: #d08cff; }
#schGameView .sch-hue7{ color: #ff8fd0; }
html[data-theme="light"] #schGameView .sch-hue0{ color: #c0392b; }
html[data-theme="light"] #schGameView .sch-hue1{ color: #b35c00; }
html[data-theme="light"] #schGameView .sch-hue2{ color: #7a6a00; }
html[data-theme="light"] #schGameView .sch-hue3{ color: #1e7a34; }
html[data-theme="light"] #schGameView .sch-hue4{ color: #0b6f9c; }
html[data-theme="light"] #schGameView .sch-hue5{ color: #3946b3; }
html[data-theme="light"] #schGameView .sch-hue6{ color: #7b2fa8; }
html[data-theme="light"] #schGameView .sch-hue7{ color: #b0306f; }
@keyframes schOk{ from{ background-color: rgba(34,197,94,0.45); border-color: rgba(34,197,94,0.9); } }
@keyframes schBad{ 0%{ background-color: rgba(244,63,94,0.45); border-color: rgba(244,63,94,0.9); transform: translateX(0); } 25%{ transform: translateX(-0.18rem); } 50%{ transform: translateX(0.18rem); } 75%{ transform: translateX(-0.1rem); } 100%{ transform: translateX(0); } }
#schGameView .sch-ov-k{ margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
#schGameView .sch-ov-t{ margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
#schGameView .sch-ov-n{ margin: 0; font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; }
#schGameView .sch-ov-big{ margin: 0; font-family: var(--display); font-size: 3rem; font-weight: 800; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
#schGameView .sch-ov-cd{ font-family: var(--display); font-size: 5rem; font-weight: 800; color: var(--violet); line-height: 1; animation: schPop 600ms ease-out; }
@keyframes schPop{ from{ transform: scale(1.35); opacity: 0.2; } }
#schGameView .sch-pb{ display: inline-block; padding: 0.15rem 0.6rem; border-radius: 2rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(31,174,85,0.16); color: var(--nbg-ok); box-shadow: inset 0 0 0 0.0625rem rgba(31,174,85,0.5); }
html[data-theme="light"] #schGameView .sch-pb{ color: #14843f; }
#schGameView .sch-lv{ font-size: 0.85rem; font-weight: 700; color: var(--violet); margin: 0; }
#schGameView .sch-best{ font-size: 0.82rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; min-width: 0; }
@media (orientation: landscape) and (max-height: 32rem){
.instrument:has(> #schGameView.visible){ max-width: 52rem; }
#schGameView .sch-wrap{ grid-area: wrap; min-height: 0; }
}
.sch-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.sch-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sch-st-h{ margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--ink-dim); }
.sch-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.sch-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.sch-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sch-st-tbl th{ text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); padding: 0.35rem 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.25); }
.sch-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.sch-st-tbl small{ color: var(--ink-dim); }
.sch-hist .sch-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.sch-hist){ max-width: min(44rem, calc(100vw - 2rem)); }
.cl-sheet-card:has(.sch-st-tbl) #clSheetBody{ overflow-x: auto; }
.sch-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.sch-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.sch-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.sch-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.sch-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.sch-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.sch-prof-new input{ flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border-radius: 0.6rem; border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.05); color: var(--ink); font: inherit; }
.sch-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.sch-st-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sch-hist th:nth-child(5), .sch-hist td:nth-child(5){ display: none; }
}
.stage > .pcs-ov{ z-index: 12; gap: 0.8rem; padding: 1rem; }
.pcs-ov .pcs-box{ display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: min(26rem, 100%); }
.pcs-ov .pcs-tag{ margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-dim); max-width: none; }
.pcs-ov .pcs-ask{ margin: 0; font-size: 0.9rem; color: var(--ink); max-width: 32ch; }
.pcs-ov .pcs-item{ margin: 0; font-family: var(--display); font-size: clamp(3rem, 14vmin, 5.5rem); font-weight: 800; line-height: 1; color: var(--ink); max-width: none; }
.pcs-ov .pcs-ear{ display: inline-flex; width: 4.5rem; height: 4.5rem; color: var(--violet); }
.pcs-ov .pcs-ear svg{ width: 100%; height: 100%; }
.pcs-ov .pcs-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.3rem; width: min(15rem, 62vw, 34vh); aspect-ratio: 1; }
.pcs-ov .pcs-grid > i, .pcs-ov .pcs-grid > button{ border-radius: 0.35rem; background: rgba(var(--accent-rgb), 0.1); box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.3); }
.pcs-ov .pcs-grid > i.lit{ background: #ff3b55; box-shadow: none; }
.pcs-ov .pcs-pickgrid > button{ min-width: 0; min-height: 0; height: auto; padding: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--ink); transform: none; }
.pcs-ov .pcs-pickgrid > button:hover{ transform: none; box-shadow: inset 0 0 0 0.125rem var(--violet); }
.pcs-ov .pcs-pickgrid > button.on{ background: rgba(255,59,85,0.85); color: #ffffff; box-shadow: none; }
.pcs-ov .pcs-slots{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.pcs-ov .pcs-slots > span{ width: 2.1rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.45rem; font-family: var(--display); font-size: 1.1rem; font-weight: 800; color: var(--ink);
    background: rgba(var(--accent-rgb), 0.08); box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.3); }
.pcs-ov .pcs-slots > span.now{ box-shadow: inset 0 0 0 0.125rem var(--violet); }
.pcs-ov .pcs-keys{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; width: min(20rem, 100%); }
.pcs-ov .pcs-keys > button{ min-width: 0; padding: 0.6rem 0; font-family: var(--display); font-size: 1.2rem; font-weight: 800; border-radius: 0.55rem; transform: none;
    background: rgba(var(--accent-rgb), 0.12); color: var(--ink); box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.35); }
.pcs-ov .pcs-keys > button:hover{ transform: none; box-shadow: inset 0 0 0 0.125rem var(--violet); }
.pcs-ov .pcs-keys.pcs-num{ grid-template-columns: repeat(3, 1fr); width: min(15rem, 100%); }
.pcs-ov .pcs-keys > button:active{ background: rgba(var(--accent-rgb), 0.3); }
.pcs-ov .pcs-btns{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.pcs-ov .pcs-btns > button{ padding: 0.5rem 0.95rem; }
.pcs-ov .pcs-fbt{ margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 800; max-width: none; }
.pcs-ov .pcs-fbt.ok{ color: var(--ok); }
.pcs-ov .pcs-fbt.bad{ color: var(--bad); }
.pcs-ov .pcs-cmp{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.45rem 0.7rem; }
.pcs-ov .pcs-lab{ margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.pcs-ov .pcs-seq{ display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pcs-ov .pcs-seq > span{ min-width: 2rem; height: 2.2rem; padding: 0 0.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.4rem; font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: var(--ink);
    background: rgba(var(--accent-rgb), 0.08); }
.pcs-ov .pcs-seq > span.ok{ background: rgba(60,240,184,0.18); box-shadow: inset 0 0 0 0.0625rem var(--ok); }
.pcs-ov .pcs-seq > span.bad{ background: rgba(255,127,140,0.16); box-shadow: inset 0 0 0 0.0625rem var(--bad); }
.pcs-ov .pcs-seq .pcs-mini{ width: 2.6rem; gap: 0.1rem; }
.pcs-ov .pcs-seq > span:has(.pcs-mini){ height: auto; padding: 0.2rem; }
.pcs-ov .pcs-seq .pcs-mini > i{ border-radius: 0.1rem; }
.pcs-ov .pcs-note{ margin: 0; font-size: 0.8rem; color: var(--ink-dim); }
@media (max-height: 30em){
.stage > .pcs-ov{ gap: 0.45rem; padding: 0.5rem; }
.pcs-ov .pcs-box{ gap: 0.4rem; }
.pcs-ov .pcs-show{ width: min(10rem, 40vh); }
.pcs-ov .pcs-seq .pcs-mini{ width: 2rem; }
.pcs-ov .pcs-rbox{ display: grid; grid-template-columns: auto auto; grid-template-areas: "tag pad" "ask pad" "slots pad" "btns pad"; align-items: center; justify-items: center; column-gap: 1.25rem; row-gap: 0.45rem; width: auto; max-width: 100%; }
.pcs-ov .pcs-rbox > .pcs-tag{ grid-area: tag; }
.pcs-ov .pcs-rbox > .pcs-ask{ grid-area: ask; max-width: 22ch; }
.pcs-ov .pcs-rbox > .pcs-slots{ grid-area: slots; max-width: 14rem; }
.pcs-ov .pcs-rbox > .pcs-btns{ grid-area: btns; max-width: 14rem; }
.pcs-ov .pcs-rbox > .pcs-keys, .pcs-ov .pcs-rbox > .pcs-pickgrid{ grid-area: pad; }
.pcs-ov .pcs-rbox > .pcs-keys{ width: min(13rem, 42vw); gap: 0.35rem; }
.pcs-ov .pcs-rbox > .pcs-keys.pcs-num{ width: min(10rem, 34vw); }
.pcs-ov .pcs-rbox > .pcs-keys > button{ padding: 0.45rem 0; font-size: 1.05rem; }
.pcs-ov .pcs-rbox > .pcs-pickgrid{ width: min(12rem, 46vh); }
.pcs-ov .pcs-btns > button{ padding: 0.4rem 0.75rem; }
}
.cl-vor{ display: block; width: 100%; height: 100%; border-radius: 0.2rem; }
.cl-stim-emoji{ line-height: 1; }
.cl-stim-word{ font-family: var(--display); font-weight: 800; letter-spacing: 0.02em; }
.cl-stim-sym{ font-family: var(--display); font-weight: 800; }
.cl-dialog-kbd{ display: inline-block; margin-left: 0.45rem; padding: 0 0.35rem; border-radius: 0.3rem; font: inherit; font-size: 0.72em; font-weight: 800; line-height: 1.5; opacity: 0.75; box-shadow: inset 0 0 0 0.0625rem currentColor; }
@media (hover: none){
.cl-dialog-kbd{ display: none; }
}
.cl-sumview .cct-stage{ height: auto; min-height: 18.75rem; margin-top: 0.75rem; margin-bottom: 0.75rem; }
.cl-sumview .center-message--summary{ position: relative; inset: auto; width: 100%; overflow-y: visible; }
.game-view.cl-sum-on{ height: auto !important; min-height: 0 !important; }
.game-view.cl-sum-on > :not(.cl-sumview):not(.cl-sum-keep){ display: none !important; }
.cl-sumview[hidden]{ display: none !important; }
.instrument:has(> .game-view.cl-sum-on){ height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
html body .game-view.cl-sum-on.visible{ display: block !important; }
.game-view.cl-sum-on .instrument-head :is(.meta-timer, .meta-count){ display: none !important; }
.cl-sumview .stat-card.cl-sum-wide{ grid-column: 1 / -1; text-align: left; }
html[data-theme="light"] .cl-sumview .cl-sum-badge .nb-badge{ color: #fff; }
.cl-sumview .cl-sum-rows{ flex-direction: column; margin-top: 0.4rem; }
.cl-sumview .cl-sum-row{ grid-template-columns: 5.4rem minmax(0, 1fr) 4.2rem 5.2rem; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-sumview .cl-sum-row b{ color: var(--ink); text-align: right; }
.cl-sumview .cl-sum-row > span:last-child{ text-align: right; }
.cl-sumview .cl-sum-row i{ display: block; height: 0.45rem; border-radius: 0.3rem; background: linear-gradient(var(--cyan), var(--cyan)); min-width: 0.3rem; }
.cl-sumview .cl-sum-row.miss i{ background: var(--nbg-bad); opacity: 0.7; }
.cl-sumview .cl-sum-row.pb i{ background: #f5b301; }
.cl-sumview .cl-sum-row.pb b::before{ content: "\2605\00a0"; color: #e09a00; }
.cl-sumview .cl-sum-row.sb b::before{ content: "\2606\00a0"; color: var(--violet); }
.cl-sumview .cl-sum-foot{ margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink-dim); }
.cl-sumview .cl-sum-delta{ display: inline-block; padding: 0.05em 0.45em; border-radius: 1em; font-family: var(--sans); font-size: 0.8em; font-weight: 700; line-height: 1.35; white-space: nowrap; vertical-align: 0.08em; }
.cl-sumview .stat-card-sub .cl-sum-delta{ font-size: 0.92em; }
.cl-sumview .cl-sum-delta.good{ color: var(--nbg-ok); background: rgba(31,174,85,0.15); }
.cl-sumview .cl-sum-delta.bad{ color: var(--nbg-bad); background: rgba(217,58,79,0.13); }
.cl-sumview .cl-sum-delta.same{ color: var(--ink-dim); background: rgba(var(--accent-rgb), 0.1); }
html[data-theme="light"] .cl-sumview .cl-sum-delta.good{ color: #14843f; }
html[data-theme="light"] .cl-sumview .cl-sum-delta.bad{ color: #c42a40; }
@media (max-width: 30rem){
.cl-sumview .cl-sum-row{ grid-template-columns: 4.4rem minmax(0, 1fr) 3.6rem 4.4rem; font-size: 0.74rem; }
.cl-sumview .stat-card .cl-sum-rows{ grid-template-columns: max-content minmax(1.5rem, 1fr) max-content minmax(0, max-content); }
.cl-sumview .cl-sum-row > span:last-child{ white-space: normal; }
}
.instrument:has(> #motGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: min(76rem, 100%); margin: 0 auto; }
#motGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --mot-line: rgba(var(--accent-rgb), 0.42); --mot-glow: rgba(var(--accent-rgb), 0.13); --mot-bar: 3rem; }
#motGameView .mot-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#motGameView .mot-hl, #motGameView .mot-hr{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; }
#motGameView .mot-hl{ left: 1rem; }
#motGameView .mot-hr{ right: 1rem; }
}
#motGameView .mot-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--mot-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#motGameView .mot-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--mot-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#motGameView .mot-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.4rem 1.1rem; }
#motGameView .mot-ov{ position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 0.5rem; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 22.5rem){
#motGameView .mot-ov-k{ padding: 0 calc(2.6rem / var(--cl-fitz, 1)); min-height: calc(2.9rem / var(--cl-fitz, 1)); display: flex; align-items: flex-end; justify-content: center; }
}
@media (max-width: 40rem){
#motGameView .mot-bar{ position: relative; grid-template-columns: minmax(0, 1fr) auto; }
#motGameView .mot-fb{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
#motGameView .mot-btns button{ flex: 1 1 0; padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
.instrument:has(> #motGameView.visible){ max-width: 52rem; }
#motGameView .mot-wrap{ grid-area: wrap; min-height: 0; }
}
#motGameView .mot-wrap{ position: relative; flex: 1 1 auto; min-height: 8rem; border-radius: 0.7rem; overflow: hidden; background: var(--mot-stage, #072527);
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.18); }
@keyframes motBlink{ 0%, 100%{ opacity: 0.3; } 50%{ opacity: 1; } }
@keyframes motTurn{ 0%, 25%{ transform: rotate(0deg); } 55%, 80%{ transform: rotate(-90deg); } 100%{ transform: rotate(0deg); } }
#motGameView .mot-sq-opts > button{ position: relative; min-width: 0; min-height: 3.4rem; padding: 0.45rem; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; border-radius: 0.6rem; transform: none; }
@media (orientation: landscape) and (max-height: 32rem){
#motGameView .mot-sq-opts > button{ min-height: 2.6rem; font-size: 1.4rem; }
}
.clb{ grid-column: 1 / -1; flex: 1 1 100%; width: 100%; box-sizing: border-box; text-align: left; border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-md, 0.9rem); padding: 0.85rem 0.95rem 0.9rem; background: rgba(128,128,128,0.05); min-width: 0; }
.clb-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.clb-title{ font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.clb-title small{ display: block; font-weight: 500; font-size: 0.75rem; color: var(--ink-dim); }
.clb-tabs{ display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.clb-tabs button{ min-height: 2rem; padding: 0.2rem 0.65rem; border-radius: 62.4375rem; border: 0.0625rem solid var(--panel-border); background: transparent; color: var(--ink-dim);
    font: inherit; font-size: 0.78rem; font-weight: 600; box-shadow: none; transform: none; cursor: pointer; }
.clb-tabs button:hover{ color: var(--ink); background: rgba(var(--accent-rgb),0.08); box-shadow: none; transform: none; }
.clb-tabs button[aria-pressed="true"]{ background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.6); color: var(--ink); }
.clb-metrics{ margin-bottom: 0.5rem; }
.clb-svg{ display: block; width: 100%; height: auto; max-height: 14rem; overflow: visible; }
.clb-svg .clb-bar{ fill: rgba(var(--accent-rgb),0.55); }
.clb-svg .clb-line{ fill: none; stroke: rgb(var(--accent-rgb)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.clb-svg .clb-dot{ fill: rgb(var(--accent-rgb)); }
.clb-svg .clb-axis{ stroke: var(--panel-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.clb-svg text{ font-size: 0.75rem; fill: var(--ink-dim); font-family: var(--sans); }
.clb-table{ width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.clb-table th, .clb-table td{ padding: 0.3rem 0.4rem; border-top: 0.0625rem solid var(--panel-border); text-align: right; white-space: nowrap; }
.clb-table th:first-child, .clb-table td:first-child{ text-align: left; }
.clb-table th{ color: var(--ink-dim); font-weight: 600; border-top: none; }
.clb-tablewrap{ overflow-x: auto; }
.clb-empty{ font-size: 0.82rem; color: var(--ink-dim); margin: 0; }
.mot-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.mot-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mot-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.mot-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mot-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.mot-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.mot-hist .mot-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.mot-hist){ max-width: min(46rem, calc(100vw - 2rem)); }
.mot-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.mot-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.mot-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.mot-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.mot-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.mot-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.mot-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.mot-hist th:nth-child(6), .mot-hist td:nth-child(6){ display: none; }
}
.instrument:has(> #srotGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: min(76rem, 100%); margin: 0 auto; }
@media (min-width: 96.375rem) and (min-height: 32.0625rem){
.instrument:has(> #srotGameView.visible){ max-width: min(76rem, 100%, calc(100% - 13rem)); }
}
#srotGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --srot-line: rgba(var(--accent-rgb), 0.42); --srot-glow: rgba(var(--accent-rgb), 0.13); --srot-bar: 3rem; }
#srotGameView .srot-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#srotGameView .srot-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; }
#srotGameView .srot-hl, #srotGameView .srot-hr{ display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#srotGameView .srot-head{ height: 0; overflow: visible; }
#srotGameView .srot-hl, #srotGameView .srot-hr{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; }
#srotGameView .srot-hl{ left: 1rem; }
#srotGameView .srot-hr{ right: 1rem; }
}
#srotGameView .srot-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--srot-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#srotGameView .srot-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--srot-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#srotGameView .srot-ttl{ display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--ink); }
#srotGameView .srot-fb{ font-size: 0.9rem; letter-spacing: 0.14em; }
#srotGameView .srot-clock{ justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-dim); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
#srotGameView .srot-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.4rem 1.1rem; }
#srotGameView .srot-lab{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
#srotGameView .srot-stat{ align-items: flex-end; text-align: right; }
#srotGameView .srot-ov{ position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 0.5rem; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 22.5rem){
#srotGameView .srot-ov-k{ padding: 0 calc(2.6rem / var(--cl-fitz, 1)); min-height: calc(2.9rem / var(--cl-fitz, 1)); display: flex; align-items: flex-end; justify-content: center; }
}
#srotGameView .srot-ov-in{ margin: auto; max-width: 26rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
#srotGameView .srot-ov-k{ margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
#srotGameView .srot-ov-t{ margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
#srotGameView .srot-ov-n{ margin: 0; font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; }
#srotGameView .srot-foot{ flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
#srotGameView .srot-best{ font-size: 0.82rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; min-width: 0; }
#srotGameView .srot-btns{ display: flex; gap: 0.5rem; margin-left: auto; }
#srotGameView .srot-btns button[hidden]{ display: none; }
@media (max-width: 40rem){
#srotGameView.visible{ --srot-bar: 2.7rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.35rem); gap: 0.55rem; }
#srotGameView .srot-bar{ padding: 0 0.95rem; font-size: 0.82rem; letter-spacing: 0.1em; gap: 0.4rem; }
#srotGameView .srot-fb{ font-size: 0.78rem; letter-spacing: 0.08em; }
#srotGameView .srot-body{ padding: 0.8rem 0.75rem 0.85rem; gap: 0.65rem; }
#srotGameView .srot-best{ width: 100%; text-align: center; order: 2; }
#srotGameView .srot-btns{ width: 100%; margin: 0; }
}
@media (orientation: landscape) and (max-height: 32rem){
#srotGameView.visible{ --srot-bar: 2.3rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 0.8rem); gap: 0.4rem; max-width: none; }
.instrument:has(> #srotGameView.visible){ max-width: 52rem; }
#srotGameView .srot-body{ display: grid; grid-template-areas: "wrap head" "wrap info" "wrap ." "wrap foot"; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0.55rem 0.8rem; gap: 0.5rem 1rem; }
#srotGameView .srot-wrap{ grid-area: wrap; min-height: 0; }
#srotGameView .srot-stat{ align-items: flex-start; text-align: left; }
#srotGameView .srot-btns{ flex-direction: column; width: 100%; margin: 0; }
#srotGameView .srot-best{ width: 100%; text-align: left; order: 0; }
#srotGameView .srot-ov-t{ font-size: 1.1rem; }
}
#srotGameView .srot-wrap{ position: relative; flex: 1 1 auto; min-height: 8rem; border-radius: 0.7rem; overflow: hidden; background: var(--srot-stage, #072527);
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.18); }
#srotGameView .srot-cv{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-tap-highlight-color: transparent; }
#srotGameView .srot-msg{ position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; padding: 0.3rem 0.85rem; border-radius: 2rem;
    font-family: var(--display); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(5,34,36,0.62); color: #e8feff; box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.35); }
html[data-theme="light"] #srotGameView .srot-msg{ background: rgba(255,255,255,0.78); color: var(--ink); }
#srotGameView .srot-msg{ width: max-content; max-width: calc(100% - 7rem); white-space: normal; text-align: center; }
#srotGameView .srot-up{ color: var(--nbg-ok); font-size: 0.8em; }
#srotGameView .srot-down{ color: var(--nbg-bad); font-size: 0.8em; }
#srotGameView .srot-fsb{ width: 2.15rem; height: 2.15rem; min-width: 0; padding: 0; border-radius: 0.55rem; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(5,34,36,0.55); color: #e8feff; border: 0.0625rem solid rgba(var(--accent-rgb), 0.35); box-shadow: none; transform: none; }
html[data-theme="light"] #srotGameView .srot-fsb{ background: rgba(255,255,255,0.78); color: var(--ink); }
html.srot-full #srotGameView .srot-fshud{ display: inline-flex; position: absolute; top: max(0.75rem, env(safe-area-inset-top)); left: max(0.75rem, env(safe-area-inset-left));
    align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: 2rem; pointer-events: none; font-family: var(--display); font-size: 0.82rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums;
    background: rgba(5,34,36,0.55); color: #e8feff; box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.3); }
@media (pointer: coarse){
#srotGameView .srot-btns button, #srotGameView .srot-ab{ min-height: 2.6rem; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 32rem){
#srotGameView .srot-btns button{ min-height: 2.45rem; }
}
.srot-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.srot-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.srot-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.srot-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.srot-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.srot-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.srot-hist .srot-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.srot-hist){ max-width: min(46rem, calc(100vw - 2rem)); }
.srot-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.srot-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.srot-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.srot-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.srot-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.srot-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.srot-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.srot-hist th:nth-child(6), .srot-hist td:nth-child(6){ display: none; }
}
.instrument:has(> #cspanGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: min(76rem, 100%); margin: 0 auto; }
@media (min-width: 96.375rem) and (min-height: 32.0625rem){
.instrument:has(> #cspanGameView.visible){ max-width: min(76rem, 100%, calc(100% - 13rem)); }
}
#cspanGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --csp-line: rgba(var(--accent-rgb), 0.42); --csp-glow: rgba(var(--accent-rgb), 0.13); --csp-bar: 3rem; }
#cspanGameView .csp-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#cspanGameView .csp-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; }
#cspanGameView .csp-hl, #cspanGameView .csp-hr{ display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#cspanGameView .csp-head{ height: 0; overflow: visible; }
#cspanGameView .csp-hl, #cspanGameView .csp-hr{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; }
#cspanGameView .csp-hl{ left: 1rem; }
#cspanGameView .csp-hr{ right: 1rem; }
}
#cspanGameView .csp-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--csp-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#cspanGameView .csp-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--csp-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#cspanGameView .csp-ttl{ display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--ink); }
#cspanGameView .csp-fb{ font-size: 0.9rem; letter-spacing: 0.14em; }
#cspanGameView .csp-clock{ justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-dim); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
#cspanGameView .csp-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.4rem 1.1rem; }
#cspanGameView .csp-info{ flex: none; display: flex; align-items: center; }
#cspanGameView .csp-lab{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
#cspanGameView .csp-wrap{ display: flex; align-items: center; justify-content: center; }
#cspanGameView .csp-ov{ position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 0.5rem; overflow: auto; overscroll-behavior: contain; }
#cspanGameView .csp-ov-in{ margin: auto; max-width: 26rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
#cspanGameView .csp-ov-k{ margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
#cspanGameView .csp-ov-t{ margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
#cspanGameView .csp-ov-n{ margin: 0; font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; }
#cspanGameView .csp-foot{ flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
#cspanGameView .csp-best{ font-size: 0.82rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; min-width: 0; }
#cspanGameView .csp-btns{ display: flex; gap: 0.5rem; margin-left: auto; }
@media (max-width: 40rem){
#cspanGameView.visible{ --csp-bar: 2.7rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.35rem); gap: 0.55rem; }
#cspanGameView .csp-bar{ padding: 0 0.95rem; font-size: 0.82rem; letter-spacing: 0.1em; gap: 0.4rem; }
#cspanGameView .csp-fb{ font-size: 0.78rem; letter-spacing: 0.08em; }
#cspanGameView .csp-body{ padding: 0.8rem 0.75rem 0.85rem; gap: 0.65rem; }
#cspanGameView .csp-best{ width: 100%; text-align: center; order: 2; }
#cspanGameView .csp-btns{ width: 100%; margin: 0; }
#cspanGameView .csp-btns button{ flex: 1 1 0; padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
#cspanGameView.visible{ --csp-bar: 2.3rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 0.8rem); gap: 0.4rem; max-width: none; }
.instrument:has(> #cspanGameView.visible){ max-width: 52rem; }
#cspanGameView .csp-body{ display: grid; grid-template-areas: "wrap head" "wrap info" "wrap ." "wrap foot"; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0.55rem 0.8rem; gap: 0.5rem 1rem; }
#cspanGameView .csp-wrap{ grid-area: wrap; min-height: 0; }
#cspanGameView .csp-info{ grid-area: info; flex-wrap: wrap; justify-content: flex-start; }
#cspanGameView .csp-foot{ grid-area: foot; flex-direction: column; align-items: stretch; gap: 0.4rem; }
#cspanGameView .csp-btns{ flex-direction: column; width: 100%; margin: 0; }
#cspanGameView .csp-best{ width: 100%; text-align: left; order: 0; }
#cspanGameView .csp-ov-t{ font-size: 1.1rem; }
#cspanGameView .csp-ov-in{ gap: 0.4rem; }
}
#cspanGameView .csp-wrap{ position: relative; flex: 1 1 auto; min-height: 8rem; border-radius: 0.7rem; overflow: hidden; background: var(--csp-stage, #072527);
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.18); }
#cspanGameView .csp-msg{ position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; padding: 0.3rem 0.85rem; border-radius: 2rem;
    font-family: var(--display); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
    background: rgba(5,34,36,0.62); color: #e8feff; box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.35); }
html[data-theme="light"] #cspanGameView .csp-msg{ background: rgba(255,255,255,0.78); color: var(--ink); }
#cspanGameView .csp-info{ justify-content: flex-start; gap: 1.6rem; }
#cspanGameView .csp-up{ color: var(--nbg-ok); font-size: 0.8em; }
#cspanGameView .csp-down{ color: var(--nbg-bad); font-size: 0.8em; }
@media (max-width: 40rem){
#cspanGameView .csp-info{ gap: 0.9rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
#cspanGameView .csp-body{ grid-template-columns: minmax(0, 1fr) 11.5rem; }
#cspanGameView .csp-info{ gap: 0.5rem 1rem; }
}
#cspanGameView .csp-stage{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: auto; }
#cspanGameView .csp-proc, #cspanGameView .csp-store, #cspanGameView .csp-recall, #cspanGameView .csp-fbx{ width: 100%; max-width: 32rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: auto; text-align: center; }
#cspanGameView .csp-eq{ margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 5.5vw, 2.8rem); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
#cspanGameView .csp-ask{ margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
#cspanGameView .csp-yn{ display: flex; gap: 0.6rem; width: min(22rem, 100%); }
#cspanGameView .csp-yn button{ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.7rem 0.8rem; border-radius: 0.7rem; }
#cspanGameView .csp-tbar{ width: min(22rem, 100%); height: 0.3rem; border-radius: 0.2rem; background: rgba(var(--accent-rgb), 0.14); overflow: hidden; }
#cspanGameView .csp-sym{ display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 0.12rem; width: min(18rem, 60vw, 40vh); aspect-ratio: 1; padding: 0.3rem; border-radius: 0.5rem; background: rgba(var(--accent-rgb), 0.1); position: relative; }
#cspanGameView .csp-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.3rem; width: min(18rem, 64vw, 40vh); aspect-ratio: 1; }
#cspanGameView .csp-pickgrid > button{ min-width: 0; min-height: 0; height: auto; padding: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.1rem; font-weight: 800; color: var(--ink); transform: none; }
#cspanGameView .csp-pickgrid > button.on{ background: rgba(255,59,85,0.85); color: #ffffff; box-shadow: none; }
#cspanGameView .csp-letter{ margin: 0; font-family: var(--display); font-size: clamp(4rem, 14vw, 7rem); font-weight: 800; line-height: 1; color: var(--ink); }
#cspanGameView .csp-dots{ display: flex; gap: 0.35rem; }
#cspanGameView .csp-recall{ gap: 0.7rem; }
#cspanGameView .csp-slots{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
#cspanGameView .csp-letters{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; width: min(21rem, 100%); }
#cspanGameView .csp-rbtns{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
#cspanGameView .csp-fbt{ margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 800; }
#cspanGameView .csp-cmp{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.4rem 0.75rem; }
#cspanGameView .csp-seq{ display: flex; flex-wrap: wrap; gap: 0.3rem; }
#cspanGameView .csp-fbn{ margin: 0; font-size: 0.88rem; color: var(--ink-dim); }
#cspanGameView .csp-warn{ color: var(--nbg-bad); }
html[data-theme="light"] #cspanGameView .csp-warn{ color: #c42a40; }
#cspanGameView .csp-upt{ color: var(--nbg-ok); }
html[data-theme="light"] #cspanGameView .csp-upt{ color: #14843f; }
#cspanGameView .csp-info b.low{ color: var(--nbg-bad); }
@media (orientation: landscape) and (max-height: 32rem){
#cspanGameView .csp-grid, #cspanGameView .csp-sym{ width: min(12rem, 34vh); }
}
#cspanGameView .csp-ear{ display: inline-flex; align-items: center; justify-content: center; width: clamp(5rem, 14vw, 7rem); height: clamp(5rem, 14vw, 7rem); border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 0 0 0 0.125rem rgba(var(--accent-rgb), 0.4); color: var(--violet); animation: cspEar 700ms ease-out; }
@keyframes cspEar{ from{ transform: scale(0.85); opacity: 0.4; } to{ transform: none; opacity: 1; } }
@media (pointer: coarse){
#cspanGameView .csp-btns button{ min-height: 2.6rem; }
#cspanGameView .csp-go, #cspanGameView .csp-rbtns button{ min-height: 2.5rem; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 32rem){
#cspanGameView .csp-btns button{ min-height: 2.45rem; }
#cspanGameView .csp-letters > button{ min-height: 2.5rem; }
}
.csp-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.csp-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.csp-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.csp-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.csp-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.csp-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.csp-hist .csp-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.csp-hist){ max-width: min(46rem, calc(100vw - 2rem)); }
.csp-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.csp-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.csp-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.csp-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.csp-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.csp-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.csp-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.csp-hist th:nth-child(6), .csp-hist td:nth-child(6){ display: none; }
}
.instrument:has(> #ufovGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: min(76rem, 100%); margin: 0 auto; }
#ufovGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --ufov-line: rgba(var(--accent-rgb), 0.42); --ufov-glow: rgba(var(--accent-rgb), 0.13); --ufov-bar: 3rem; }
#ufovGameView .ufov-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#ufovGameView .ufov-hl, #ufovGameView .ufov-hr{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; }
#ufovGameView .ufov-hl{ left: 1rem; }
#ufovGameView .ufov-hr{ right: 1rem; }
}
#ufovGameView .ufov-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--ufov-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#ufovGameView .ufov-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--ufov-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#ufovGameView .ufov-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.4rem 1.1rem; }
#ufovGameView .ufov-ov{ position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 0.5rem; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 40rem){
#ufovGameView .ufov-bar{ position: relative; grid-template-columns: minmax(0, 1fr) auto; }
#ufovGameView .ufov-fb{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 32rem){
.instrument:has(> #ufovGameView.visible){ max-width: 52rem; }
#ufovGameView .ufov-wrap{ grid-area: wrap; min-height: 0; }
}
#ufovGameView .ufov-wrap{ position: relative; flex: 1 1 auto; min-height: 8rem; border-radius: 0.7rem; overflow: hidden; background: var(--ufov-stage, #072527);
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.18); }
@keyframes ufovPop{ from{ opacity: 0; transform: scale(0.86); } to{ opacity: 1; transform: none; } }
@keyframes ufovBlink{ 0%, 55%, 100%{ opacity: 0; } 60%, 70%{ opacity: 1; } }
.ufov-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.ufov-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ufov-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.ufov-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ufov-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.ufov-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.ufov-hist .ufov-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.ufov-hist){ max-width: min(46rem, calc(100vw - 2rem)); }
.ufov-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.ufov-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.ufov-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.ufov-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.ufov-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.ufov-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.ufov-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.ufov-hist th:nth-child(6), .ufov-hist td:nth-child(6){ display: none; }
}
@media (pointer: coarse){
html.ufov-full #ufovGameView .ufov-ctl > button, #ufovGameView .ufov-btns button{ min-height: 2.5rem; }
}
@keyframes ufovTurn{ 0%, 25%{ transform: rotate(0deg); } 55%, 80%{ transform: rotate(-90deg); } 100%{ transform: rotate(0deg); } }
.instrument:has(> #mdtGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: min(76rem, 100%); margin: 0 auto; }
@media (min-width: 96.375rem) and (min-height: 32.0625rem){
.instrument:has(> #mdtGameView.visible){ max-width: min(76rem, 100%, calc(100% - 13rem)); }
}
#mdtGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --mdt-line: rgba(var(--accent-rgb), 0.42); --mdt-glow: rgba(var(--accent-rgb), 0.13); --mdt-bar: 3rem; }
#mdtGameView .mdt-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#mdtGameView .mdt-hl, #mdtGameView .mdt-hr{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; }
#mdtGameView .mdt-hl{ left: 1rem; }
#mdtGameView .mdt-hr{ right: 1rem; }
}
#mdtGameView .mdt-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--mdt-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#mdtGameView .mdt-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--mdt-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#mdtGameView .mdt-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem 1.4rem 1.1rem; }
#mdtGameView .mdt-ov{ position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 0.5rem; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 40rem){
#mdtGameView .mdt-bar{ position: relative; grid-template-columns: minmax(0, 1fr) auto; }
#mdtGameView .mdt-fb{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 32rem){
.instrument:has(> #mdtGameView.visible){ max-width: 52rem; }
#mdtGameView .mdt-wrap{ grid-area: wrap; min-height: 0; }
}
#mdtGameView .mdt-wrap{ position: relative; flex: 1 1 auto; min-height: 8rem; border-radius: 0.7rem; overflow: hidden;
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb), 0.18); }
.mdt-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.mdt-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mdt-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.mdt-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mdt-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.mdt-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.mdt-hist .mdt-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.mdt-hist){ max-width: min(46rem, calc(100vw - 2rem)); }
.mdt-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.mdt-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.mdt-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.mdt-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.mdt-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.mdt-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.mdt-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.mdt-hist th:nth-child(6), .mdt-hist td:nth-child(6){ display: none; }
}
@keyframes mdtDrift{ from{ transform: translateX(0); } to{ transform: translateX(200%); } }
.mdt-cal{ display: flex; justify-content: center; padding: 0.75rem 0; overflow: hidden; }
.mdt-calcard{ aspect-ratio: 85.6 / 53.98; max-width: 100%; border-radius: 0.5rem; border: 0.125rem dashed var(--violet); background: rgba(var(--accent-rgb), 0.08); flex: none; }
html[data-theme="light"] .mdt-cal-warn{ color: #c42a40; }
#mdtCalR{ width: 100%; margin: 0.5rem 0; }
.mdt-cal-row{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (orientation: landscape) and (max-height: 32rem){
.cl-sheet-card:has(.mdt-cal){ max-width: calc(100vw - 1rem); }
}
@media (pointer: coarse){
html.mdt-full #mdtGameView .mdt-ctl > button, #mdtGameView .mdt-btns button{ min-height: 2.5rem; }
}
@keyframes mdtTurn{ 0%, 25%{ transform: rotate(0deg); } 55%, 80%{ transform: rotate(-90deg); } 100%{ transform: rotate(0deg); } }
.instrument:has(> #semschGameView.visible){ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 0; width: 100%; max-width: max(20rem, min(62rem, calc(100svh - var(--topnav-h, 4.75rem) - 7rem))); margin: 0 auto; }
#semschGameView.visible{ display: flex; flex-direction: column; gap: 0.75rem; height: calc(100svh - var(--topnav-h, 4.75rem) - 1.75rem); min-height: 15rem;
    --ssc-line: rgba(var(--accent-rgb), 0.42); --ssc-glow: rgba(var(--accent-rgb), 0.13); --ssc-bar: 3rem; --ssc-ok: #22c55e; --ssc-bad: #f43f5e; --ssc-miss: #f5b301; }
#semschGameView .ssc-h1{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#semschGameView .ssc-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; }
#semschGameView .ssc-hl, #semschGameView .ssc-hr{ display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 74.0625rem) and (min-height: 32.0625rem){
#semschGameView .ssc-head{ height: 0; overflow: visible; }
#semschGameView .ssc-hl, #semschGameView .ssc-hr{ position: fixed; top: calc(var(--topnav-h, 4.75rem) + 0.75rem); z-index: 60; }
}
#semschGameView .ssc-card{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0.125rem solid var(--ssc-line); border-radius: 0.9rem;
    box-shadow: none; background: linear-gradient(var(--panel), var(--panel)), var(--bg-0); transition: border-color 140ms ease, box-shadow 140ms ease; }
#semschGameView .ssc-bar{ flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; height: var(--ssc-bar); padding: 0 1.4rem;
    border-radius: 0.78rem 0.78rem 0 0; background: rgba(var(--accent-rgb), 0.08); border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.2);
    font-family: var(--display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
#semschGameView .ssc-ttl{ display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--ink); }
#semschGameView .ssc-fb{ font-size: 0.9rem; letter-spacing: 0.14em; }
#semschGameView .ssc-bar{ grid-template-columns: minmax(0, 1fr) auto; position: relative; }
#semschGameView .ssc-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem 1.4rem 1.1rem; }
#semschGameView .ssc-info{ flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
#semschGameView .ssc-lab{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
#semschGameView .ssc-wrap{ position: relative; flex: 1 1 auto; min-height: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
#semschGameView .ssc-grid{ display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(0.15rem, 0.9%, 0.4rem);
    width: 10rem; height: 10rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: filter 160ms ease, opacity 160ms ease; }
#semschGameView .ssc-cell{ appearance: none; -webkit-appearance: none; position: relative; margin: 0; padding: 5% 4%; min-width: 0; min-height: 0; border-radius: 0.5rem;
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.24); background: rgba(var(--accent-rgb), 0.06); color: var(--ink); font-family: var(--sans); font-weight: 600;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; overflow: hidden; cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease; -webkit-tap-highlight-color: transparent; box-shadow: none; transform: none; line-height: 1; }
@keyframes sscBad{ 0%{ background-color: rgba(244,63,94,0.5); border-color: rgba(244,63,94,0.95); transform: translateX(0); } 25%{ transform: translateX(-0.18rem); } 50%{ transform: translateX(0.18rem); } 75%{ transform: translateX(-0.1rem); } 100%{ transform: translateX(0); } }
@keyframes sscPop{ from{ opacity: 1; transform: translate(-50%, -10%); } to{ opacity: 0; transform: translate(-50%, -150%); } }
#semschGameView .ssc-rule{ grid-row: var(--rr) / span var(--rh); grid-column: var(--rc) / span var(--rw); min-width: 0; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35em; padding: 0.3em 0.6em; border-radius: 0.6rem; text-align: center;
    background: rgba(var(--accent-rgb), 0.15); border: 0.125rem solid rgba(var(--accent-rgb), 0.6); color: var(--ink); }
@media (orientation: landscape) and (max-height: 32rem){
.instrument:has(> #semschGameView.visible){ max-width: 56rem; }
#semschGameView .ssc-wrap{ grid-area: wrap; min-height: 0; }
}
.ssc-st-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.ssc-st-tiles b{ font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ssc-st-h{ margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--ink-dim); }
.ssc-spark{ display: block; width: 100%; height: 5.5rem; color: var(--violet); background: rgba(var(--accent-rgb), 0.05); border-radius: 0.5rem; }
.ssc-st-ax{ display: flex; justify-content: space-between; margin: 0.2rem 0 1rem; font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ssc-st-tbl{ width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; margin: 0 0 1rem; }
.ssc-st-tbl td{ padding: 0.4rem; border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.1); color: var(--ink); }
.ssc-hist .ssc-hn{ padding: 0.25rem 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.cl-sheet-card:has(.ssc-hist){ max-width: min(46rem, calc(100vw - 2rem)); }
.ssc-profs{ display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.ssc-prof{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-radius: 0.6rem; padding: 0.6rem 0.8rem; text-align: left; }
.ssc-prof small{ color: var(--ink-dim); font-weight: 500; margin-left: auto; }
.ssc-prof{ flex-wrap: wrap; row-gap: 0.15rem; }
.ssc-prof.on{ border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.12); }
.ssc-prof-new{ display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.ssc-prof-new input{ flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border-radius: 0.6rem; border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.05); color: var(--ink); font: inherit; }
.ssc-prof-act{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 30rem){
.ssc-st-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssc-hist th:nth-child(6), .ssc-hist td:nth-child(6), .ssc-hist th:nth-child(7), .ssc-hist td:nth-child(7){ display: none; }
}
.cl-sheet-card:has(.ssc-cw){ max-width: min(36rem, calc(100vw - 2rem)); }
.ssc-cw-lists{ display: flex; flex-direction: column; gap: 0.45rem; margin: 0.75rem 0; }
.ssc-cw-item{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.65rem;
    border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.05); }
.ssc-cw-main{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ssc-cw-main b{ color: var(--ink); overflow-wrap: anywhere; }
.ssc-cw-main small{ color: var(--ink-dim); font-size: 0.78rem; }
.ssc-cw-need{ color: var(--nbg-bad, #c42a40); }
html[data-theme="light"] .ssc-cw-need{ color: #c42a40; }
.ssc-cw-btns{ display: flex; gap: 0.35rem; }
.ssc-cw-btns button{ padding: 0.35rem 0.65rem; font-size: 0.8rem; }
.ssc-cw-msg:empty{ display: none; }
.ssc-cw-act{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.ssc-cw-f{ display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 0.8rem; font-weight: 600; color: var(--ink); }
.ssc-cw-f small{ font-weight: 500; color: var(--ink-dim); margin-left: 0.35rem; }
.ssc-cw-f input, .ssc-cw-f textarea{ width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem; border-radius: 0.6rem; border: 0.0625rem solid var(--panel-border);
    background: rgba(var(--accent-rgb), 0.05); color: var(--ink); font: inherit; font-weight: 500; resize: vertical; }
.ssc-cw-f input:focus, .ssc-cw-f textarea:focus{ outline: 0.125rem solid rgba(var(--accent-rgb), 0.6); outline-offset: 0; }
@media (max-width: 30rem){
.ssc-cw-item{ display: flex; flex-wrap: wrap; }
}
.clr-dialog{ max-width: 24rem; text-align: center; }
.clr-dialog .cl-dialog-title{ margin-bottom: 0.35rem; }
.clr-dialog .cl-dialog-body{ margin-bottom: 0.5rem; }
.clr-logo{ display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 0.9rem; border-radius: 1rem; color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); border: 0.0625rem solid rgba(var(--accent-rgb), 0.22); }
.clr-logo svg{ width: 2rem; height: 2rem; }
.clr-msg{ margin: 0 0 1.25rem; font-size: 0.9rem; line-height: 1.55; color: var(--ink-dim); }
.clr-dialog .cl-dialog-actions{ justify-content: center; }
.clr-submit{ background: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb)); color: #062327; }
.clr-submit:hover{ background: rgba(var(--accent-rgb), 0.85); }
html[data-theme="light"] .clr-submit{ background: #2a7a7a; border-color: #2a7a7a; color: #ffffff; }
html[data-theme="light"] .clr-submit:hover{ background: #23696a; }
.clr-submit:disabled{ opacity: 0.45; cursor: default; }
.clr-never{ display: inline-block; margin-top: 0.85rem; padding: 0.35rem 0.6rem; min-height: 0; border: 0; background: transparent; color: var(--ink-dim); font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.clr-never:hover{ color: var(--ink); background: transparent; transform: none; box-shadow: none; }
@media (max-height: 30em){
.clr-logo{ display: none; }
.clr-msg{ margin-bottom: 0.8rem; }
}
.cl-prefs-items{ display: flex; flex-direction: column; }
.cl-sheet-card:has(.cl-ds){ max-width: min(36rem, calc(100vw - 1.5rem)); }
.cl-ds{ display: flex; flex-direction: column; gap: 0.25rem; }
.cl-ds-note{ margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--ink-dim); }
.cl-ds-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-top: 0.0625rem solid var(--panel-border); }
.cl-ds-lab{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 10rem; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.cl-ds-lab small{ font-size: 0.78rem; font-weight: 400; color: var(--ink-dim); line-height: 1.35; }
.cl-ds-seg{ display: inline-flex; flex: 0 1 auto; max-width: 100%; padding: 0.1875rem; gap: 0.1875rem; border-radius: 0.75rem; border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.06); }
.cl-ds .cl-ds-opt{ flex: 1 1 0; min-width: 3.4rem; min-height: 2.5rem; margin: 0; padding: 0.35rem 0.6rem; border-radius: 0.5625rem; border: 0.0625rem solid transparent; background: transparent; box-shadow: none;
    color: var(--ink-dim); font: inherit; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transform: none; }
.cl-ds .cl-ds-opt:hover{ color: var(--ink); background: rgba(var(--accent-rgb), 0.08); transform: none; box-shadow: none; }
.cl-ds .cl-ds-opt.on{ color: var(--ink); background: var(--bg-1); border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.18); }
html[data-theme="light"] .cl-ds .cl-ds-opt.on{ background: #ffffff; }
.cl-ds-vol .cl-ds-lab{ flex-basis: 100%; }
.cl-ds-volrow{ display: flex; align-items: center; gap: 0.6rem; width: 100%; min-width: 0; }
.cl-ds .cl-ds-mute{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; border-radius: 0.6rem;
    border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.06); color: var(--ink); cursor: pointer; box-shadow: none; transform: none; }
.cl-ds .cl-ds-mute svg{ width: 1.35rem; height: 1.35rem; }
.cl-ds .cl-ds-mute .cl-ds-x{ display: none; }
.cl-ds .cl-ds-mute.on{ color: var(--bad); border-color: currentColor; }
.cl-ds .cl-ds-mute.on .cl-ds-x{ display: inline; }
.cl-ds .cl-ds-mute.on .cl-ds-w{ display: none; }
.cl-ds input[type="range"]{ -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 4rem; height: 2.5rem; margin: 0; background: transparent; cursor: pointer; }
.cl-ds input[type="range"]::-webkit-slider-runnable-track{ height: 0.375rem; border-radius: 62rem; background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0, rgb(var(--accent-rgb)) var(--fill, 100%), rgba(128,128,128,0.3) var(--fill, 100%)); }
.cl-ds input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.4375rem; border-radius: 50%; border: 0.125rem solid var(--bg-1); background: rgb(var(--accent-rgb)); box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.35); }
.cl-ds input[type="range"]::-moz-range-track{ height: 0.375rem; border-radius: 62rem; background: rgba(128,128,128,0.3); }
.cl-ds input[type="range"]::-moz-range-progress{ height: 0.375rem; border-radius: 62rem; background: rgb(var(--accent-rgb)); }
.cl-ds input[type="range"]::-moz-range-thumb{ width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 0.125rem solid var(--bg-1); background: rgb(var(--accent-rgb)); }
.cl-ds input[type="range"].muted{ opacity: 0.45; }
.cl-ds input[type="range"]:focus-visible{ outline: var(--focus-ring) solid rgb(var(--accent-rgb)); outline-offset: 0.125rem; border-radius: 0.5rem; }
.cl-ds-out{ flex: none; min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.cl-ds .cl-ds-test{ flex: none; min-height: 2.5rem; padding: 0.35rem 0.8rem; }
.cl-ds-foot{ display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding-top: 0.9rem; border-top: 0.0625rem solid var(--panel-border); }
.cl-ds-foot button{ min-height: 2.5rem; }
@media (max-width: 30rem){
.cl-ds-row{ padding: 0.6rem 0; }
.cl-ds-seg{ flex: 1 1 100%; }
.cl-ds .cl-ds-opt{ min-width: 0; padding: 0.35rem 0.25rem; }
.cl-ds .cl-ds-test{ padding: 0.35rem 0.6rem; }
.cl-ds-out{ min-width: 2.8rem; }
}
html[data-contrast="high"] body{ background: var(--bg-0); }
html[data-contrast="high"] :is(.info-card, .menu-panel, .cct-menu-panel, .nav-icon-panel, .topnav-games-panel-inner, .landing-profile-panel-inner, .studies-category-panel, .csel-panel, .nb-drawer, .progress-graph-modal, .cl-dialog, .toast){
    background: var(--bg-1) !important; border-color: var(--panel-border) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-contrast="high"] .topnav{ background: var(--bg-0) !important; border-bottom: 0.0625rem solid var(--panel-border) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-contrast="high"] :is(.game-card, .mode-card, .cct-mode-card, .menu-btn, .cct-menu-btn, .seg-btn, button.ghost, .nb-hbtn, .stat-card, .pricing-tier, .instrument, .stage, .cct-stage, .summary-panel){
    border-color: var(--panel-border) !important; }
html[data-contrast="high"] :is(.game-card, .mode-card, .cct-mode-card, .menu-btn, .cct-menu-btn, .seg-btn, button.ghost, .nb-hbtn, .stat-card, .pricing-tier, .summary-panel){ background-color: var(--bg-1) !important; }
html[data-contrast="high"] .seg-btn.selected{ background-color: rgb(var(--accent-rgb)) !important; color: var(--bg-0) !important; }
html[data-contrast="high"] :is(button, .seg-btn, .menu-btn, .cct-menu-btn, .nb-hbtn, input, select, textarea){ border-width: 0.125rem; }
html[data-contrast="high"] :focus-visible{ outline: var(--focus-ring) solid var(--ink) !important; outline-offset: 0.125rem !important; box-shadow: 0 0 0 calc(var(--focus-ring) + 0.125rem) var(--bg-0) !important; }
html[data-contrast="high"] :is(.stage, .cct-stage):focus-visible{ outline: none !important; box-shadow: none !important; }
html[data-contrast="high"] .nb-hbtn{ border: 0.125rem solid var(--panel-border) !important; color: var(--ink) !important; }
html[data-contrast="high"] .menu-item:hover, html[data-contrast="high"] .menu-item:focus-visible{ background: rgba(var(--accent-rgb), 0.22) !important; }
html[data-contrast="high"] .cl-ds .cl-ds-opt.on{ background: rgb(var(--accent-rgb)); color: var(--bg-0); }
html[data-contrast="high"] .cl-ds-seg{ background: var(--bg-1); }
html[data-contrast="high"] a{ text-decoration-thickness: 0.125em; }
#posnerCalModeToggle{ flex-wrap: wrap; }
#posnerCalModeToggle .seg-btn{ flex: 1 1 auto; }
@media (max-width: 30rem){
#posnerCalModeToggle .seg-btn{ flex-basis: 30%; }
}
.progress-graph-head{ flex-wrap: wrap; }
.progress-graph-head > :first-child{ flex: 1 1 0%; min-width: min-content; }
.progress-graph-actions{ margin-left: auto; flex-shrink: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.cct-cal-grid > .cct-cal-cell{ max-width: 100%; }
.cl-dialog{ max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
@media (pointer: coarse){
html body .time-stepper > .time-stepper-btn{ flex-shrink: 1; min-width: 1.25rem; }
}
@media (max-width: 36em){
.clp-stats > div:last-child{ grid-column: span 2; }
}
@media (max-width: 30rem){
.topnav-games-item > span:first-child{ white-space: normal; }
}
@media (max-width: 22.5rem){
html[data-ui-size="130"] body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .ih-left{ flex-wrap: wrap; row-gap: 0.25rem; }
html[data-ui-size="130"] body.cl-dock :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView) > .instrument-head > .ih-left > h1{ flex: 1 0 100%; }
}
@media (max-width: 25.9375rem){
html[data-ui-size="130"] body.cl-dock #geoView > .instrument-head > .ih-left{ flex-wrap: wrap; row-gap: 0.25rem; }
html[data-ui-size="130"] body.cl-dock #geoView > .instrument-head > .ih-left > h1{ flex: 1 0 100%; }
}
@media (max-width: 22.5rem){
html[data-ui-size="115"] body.cl-dock #geoView > .instrument-head > .ih-left{ flex-wrap: wrap; row-gap: 0.25rem; }
html[data-ui-size="115"] body.cl-dock #geoView > .instrument-head > .ih-left > h1{ flex: 1 0 100%; }
html[data-ui-size="130"] :is(#gameView,#geoView,#semanticView,#linguisticView,#cctGameView):not(.posner-summary-active):not(.cct-summary-active) > :is(.footer,.cct-footer) button{ padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.8rem; }
}
@media (orientation: landscape) and (max-height: 32rem){
:is(#schGameView, #semschGameView, #srotGameView, #cspanGameView, #mdtGameView, #motGameView, #ufovGameView).visible{ min-height: 10rem; }
}
@media (min-width: 53.8125em) and (max-width: 68.9375em){
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav{ padding: 0.75rem 1rem; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-hamburger{ display: flex; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-inner{ position: static; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible{
      display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-radius: 0;
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.875rem; padding: 1rem 1.25rem 1.25rem;
      background: rgb(4,26,28); backdrop-filter: none; -webkit-backdrop-filter: none;
      border-top: 0.0625rem solid var(--panel-border); border-bottom: 0.0625rem solid var(--panel-border); box-shadow: 0 1.25rem 2rem -1rem rgba(0,0,0,0.55);
      max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
html:is([data-ui-size="115"], [data-ui-size="130"])[data-theme="light"] .topnav-collapsible{ background: rgb(223,240,240); box-shadow: 0 1.25rem 2rem -1rem rgba(20,30,60,0.25); }
html:is([data-ui-size="115"], [data-ui-size="130"])[data-contrast="high"] .topnav-collapsible{ background: var(--bg-0); }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible.open{ display: flex; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-links{ position: static; transform: none; flex: none; flex-direction: column; align-items: stretch; gap: 0.125rem; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-link{ text-align: left; width: 100%; border-radius: 0.625rem; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-actions{ flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-actions > button{ width: 100%; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .theme-select{ width: 100%; text-align: left; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .nav-account{ width: 100%; justify-content: space-between; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-games-panel{ position: static; display: none; padding-top: 0.375rem; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-games-panel-inner{ box-shadow: none; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-games.open .topnav-games-panel{ display: flex; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-games:hover .topnav-games-panel{ display: none; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-games.open:hover .topnav-games-panel{ display: flex; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible .topnav-cta{ margin-left: 0; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible .nav-icon-row{ flex-wrap: wrap; row-gap: 0.5rem; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible .nav-icon-menu{ display: contents; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible .nav-icon-panel{ position: static; order: 5; flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; box-shadow: none; }
html:is([data-ui-size="115"], [data-ui-size="130"]) .topnav-collapsible .nav-icon-panel .menu-item{ width: 100%; }
}
@media (min-width: 69em) and (max-width: 87.4375em){
html[data-ui-size="130"] .topnav{ padding: 0.75rem 1rem; }
html[data-ui-size="130"] .topnav-hamburger{ display: flex; }
html[data-ui-size="130"] .topnav-inner{ position: static; }
html[data-ui-size="130"] .topnav-collapsible{
      display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-radius: 0;
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.875rem; padding: 1rem 1.25rem 1.25rem;
      background: rgb(4,26,28); backdrop-filter: none; -webkit-backdrop-filter: none;
      border-top: 0.0625rem solid var(--panel-border); border-bottom: 0.0625rem solid var(--panel-border); box-shadow: 0 1.25rem 2rem -1rem rgba(0,0,0,0.55);
      max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
html[data-ui-size="130"][data-theme="light"] .topnav-collapsible{ background: rgb(223,240,240); box-shadow: 0 1.25rem 2rem -1rem rgba(20,30,60,0.25); }
html[data-ui-size="130"][data-contrast="high"] .topnav-collapsible{ background: var(--bg-0); }
html[data-ui-size="130"] .topnav-collapsible.open{ display: flex; }
html[data-ui-size="130"] .topnav-links{ position: static; transform: none; flex: none; flex-direction: column; align-items: stretch; gap: 0.125rem; }
html[data-ui-size="130"] .topnav-link{ text-align: left; width: 100%; border-radius: 0.625rem; }
html[data-ui-size="130"] .topnav-actions{ flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; }
html[data-ui-size="130"] .topnav-actions > button{ width: 100%; }
html[data-ui-size="130"] .theme-select{ width: 100%; text-align: left; }
html[data-ui-size="130"] .nav-account{ width: 100%; justify-content: space-between; }
html[data-ui-size="130"] .topnav-games-panel{ position: static; display: none; padding-top: 0.375rem; }
html[data-ui-size="130"] .topnav-games-panel-inner{ box-shadow: none; }
html[data-ui-size="130"] .topnav-games.open .topnav-games-panel{ display: flex; }
html[data-ui-size="130"] .topnav-games:hover .topnav-games-panel{ display: none; }
html[data-ui-size="130"] .topnav-games.open:hover .topnav-games-panel{ display: flex; }
html[data-ui-size="130"] .topnav-collapsible .topnav-cta{ margin-left: 0; }
html[data-ui-size="130"] .topnav-collapsible .nav-icon-row{ flex-wrap: wrap; row-gap: 0.5rem; }
html[data-ui-size="130"] .topnav-collapsible .nav-icon-menu{ display: contents; }
html[data-ui-size="130"] .topnav-collapsible .nav-icon-panel{ position: static; order: 5; flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; box-shadow: none; }
html[data-ui-size="130"] .topnav-collapsible .nav-icon-panel .menu-item{ width: 100%; }
}
html.cl-nav-burger .topnav{ padding: 0.75rem 1rem; }
html.cl-nav-burger .topnav-hamburger{ display: flex; }
html.cl-nav-burger .topnav-inner{ position: static; }
html.cl-nav-burger .topnav-collapsible{
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-radius: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.875rem; padding: 1rem 1.25rem 1.25rem;
    background: rgb(4,26,28); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-top: 0.0625rem solid var(--panel-border); border-bottom: 0.0625rem solid var(--panel-border); box-shadow: 0 1.25rem 2rem -1rem rgba(0,0,0,0.55);
    max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
html.cl-nav-burger[data-theme="light"] .topnav-collapsible{ background: rgb(223,240,240); box-shadow: 0 1.25rem 2rem -1rem rgba(20,30,60,0.25); }
html.cl-nav-burger[data-contrast="high"] .topnav-collapsible{ background: var(--bg-0); }
html.cl-nav-burger .topnav-collapsible.open{ display: flex; }
html.cl-nav-burger .topnav-links{ position: static; transform: none; flex: none; flex-direction: column; align-items: stretch; gap: 0.125rem; }
html.cl-nav-burger .topnav-link{ text-align: left; width: 100%; border-radius: 0.625rem; }
html.cl-nav-burger .topnav-actions{ flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; }
html.cl-nav-burger .topnav-actions > button{ width: 100%; }
html.cl-nav-burger .theme-select{ width: 100%; text-align: left; }
html.cl-nav-burger .nav-account{ width: 100%; justify-content: space-between; }
html.cl-nav-burger .topnav-games-panel{ position: static; display: none; padding-top: 0.375rem; }
html.cl-nav-burger .topnav-games-panel-inner{ box-shadow: none; }
html.cl-nav-burger .topnav-games.open .topnav-games-panel{ display: flex; }
html.cl-nav-burger .topnav-games:hover .topnav-games-panel{ display: none; }
html.cl-nav-burger .topnav-games.open:hover .topnav-games-panel{ display: flex; }
html.cl-nav-burger .topnav-collapsible .topnav-cta{ margin-left: 0; }
html.cl-nav-burger .topnav-collapsible .nav-icon-row{ flex-wrap: wrap; row-gap: 0.5rem; }
html.cl-nav-burger .topnav-collapsible .nav-icon-menu{ display: contents; }
html.cl-nav-burger .topnav-collapsible .nav-icon-panel{ position: static; order: 5; flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; box-shadow: none; }
html.cl-nav-burger .topnav-collapsible .nav-icon-panel .menu-item{ width: 100%; }
[data-game-text] .semantic-pair{ font-size: min(calc(clamp(1.5rem, 6cqw, 2.625rem) * var(--cl-gt)), 9cqw); }
[data-game-text] .semantic-grid-cell{ font-size: min(calc(1.125rem * var(--cl-gt)), 7.5cqh); }
[data-game-text] .semantic-feedback, [data-game-text] .linguistic-feedback, [data-game-text] .classic-feedback, [data-game-text] .geo-feedback{ font-size: calc(0.8854rem * var(--cl-gt)); }
[data-game-text] .linguistic-pair{ font-size: min(calc(clamp(1.25rem, 5cqw, 1.875rem) * var(--cl-gt)), 8cqw); }
[data-game-text] .nb-ctext-sm{ font-size: calc(clamp(0.85rem,3.3svmin,1.7rem) * min(var(--cl-gt), 1.15)) !important; }
[data-game-text] .nb-ctext{ font-size: min(calc(clamp(1.2rem,6svmin,3rem) * var(--cl-gt)), 10svmin); }
[data-game-text] .nbw-answer{ font-size: calc(1.1rem * var(--cl-gt)); }
[data-game-text] .nb-exec-word{ font-size: min(calc(clamp(2.6rem,9vmin,6.5rem) * var(--cl-gt)), 15vmin); }
[data-game-text] .nbg-left{ font-size: calc(clamp(1.5rem,4vw,3.5rem) * var(--cl-gt)); }
[data-game-text] .geo-pair--map{ font-size: min(calc(1.4rem * var(--cl-gt)), 9cqw) !important; }
[data-game-text] .nb-exrule-u{ font-size: calc(clamp(1rem,3vmin,1.5rem) * var(--cl-gt)); }
[data-game-text] .nb-earcue{ font-size: calc(clamp(0.85rem,2.2vmin,1.15rem) * var(--cl-gt)); }
@media (orientation: landscape) and (max-height: 32rem){
[data-game-text] #nbStage .nb-exec-word{ font-size: min(calc(clamp(1.75rem, 12dvh, 4rem) * var(--cl-gt)), 15vmin); }
}
[data-game-text] :is(#semanticView).visible:not(.posner-summary-active) > .stage .semantic-grid-cell{ font-size: min(calc(clamp(0.7rem, 5.4cqh, 1.125rem) * var(--cl-gt)), 7.5cqh); }
.cl-sheet-card:has(.clkm){ max-width: 30rem; }
.clkm .clkm-top{ display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0 0.25rem; }
.clkm .clkm-top label{ font-size: 0.85rem; color: var(--ink-dim); flex: none; }
.clkm .clkm-top select{ flex: 1 1 auto; min-width: 0; min-height: 2.5rem; padding: 0 2.2rem 0 0.75rem; border-radius: 0.5rem; }
.clkm .nb-keybind-grid{ gap: 0.5rem; }
.clkm .nb-keybind-row > span{ min-width: 0; line-height: 1.3; }
.clkm .clkm-alt{ display: block; font-size: 0.75rem; color: var(--ink-dim); }
.clkm .nb-keybind-btn{ flex: none; min-width: 6.5rem; min-height: 2.5rem; }
.clkm .nb-keybind-btn.clkm-set{ border-color: rgb(var(--accent-rgb)); color: rgb(var(--accent-rgb)); }
html[data-theme="light"] .clkm .nb-keybind-btn.clkm-set{ color: #1f5f5f; }
.clkm .nb-keybind-btn:disabled{ cursor: default; opacity: 0.75; }
.clkm .nb-keybind-btn:disabled:hover{ border-color: var(--panel-border); }
.clkm .clkm-msg{ min-height: 1.4em; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }
.clkm .clkm-msg.bad{ color: var(--bad, #ef4444); }
html[data-theme="light"] .clkm .clkm-msg.bad{ color: #b42318; }
.clkm .clkm-btns{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.clkm .clkm-btns button{ min-height: 2.5rem; }
@media (max-width: 30rem){
.clkm .nb-keybind-btn{ min-width: 5rem; }
.clkm .clkm-btns button{ flex: 1 1 auto; }
}
#clJournalOverlay{ max-width: 64rem; }
#clJournalOverlay .page-header{ margin-bottom: 1.5rem; }
#cljTitle:focus{ outline: none; }
#cljInsIntro{ margin-bottom: 0.8rem; }
.clj-wrap{ display: flex; flex-direction: column; gap: 1rem; }
@media (pointer: coarse){
#clJournalOverlay .clj-back{ min-height: 2.75rem; padding-right: 1rem; }
}
.clj-card{ background: var(--panel, rgba(255,255,255,0.02)); border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }
.clj-card h2{ margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.clj-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.clj-dim{ color: var(--ink-dim); font-size: 0.85rem; line-height: 1.5; margin: 0; }
.clj-today-row{ display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.clj-today-row .clj-chips{ flex: 1 1 14rem; }
.clj-optrow{ display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 0.0625rem solid var(--panel-border); }
.clj-optrow > .clj-flabel{ margin: 0 0.25rem 0 0; }
.clj-btn, button.clj-btn{ background: rgba(var(--accent-rgb),0.1); color: var(--ink); border: 0.0625rem solid var(--panel-border); border-radius: 62.4375rem;
    padding: 0.4rem 0.85rem; min-height: 2.25rem; font-size: 0.8rem; box-shadow: none; transform: none; }
.clj-btn:hover{ background: rgba(var(--accent-rgb),0.18); box-shadow: none; transform: none; }
button.clj-btn.primary{ background: linear-gradient(var(--cyan), var(--cyan)); color: #052224; border-color: transparent; }
html[data-theme="light"] button.clj-btn.primary{ color: #fff; }
button.clj-btn.danger:hover{ background: rgba(201,74,92,0.14); color: var(--bad); }
button.clj-btn.small{ min-height: 2rem; padding: 0.25rem 0.7rem; font-size: 0.76rem; }
.clj-link{ background: none; border: none; box-shadow: none; padding: 0.3rem 0.1rem; min-height: 2rem; color: var(--cyan); font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; border-radius: 0.3rem; }
.clj-link:hover{ background: none; box-shadow: none; transform: none; color: var(--ink); }
.clj-tabs{ display: flex; padding: 0.1875rem; border-radius: 0.75rem; background: rgba(128,128,128,0.12); border: 0.0625rem solid var(--panel-border); width: 100%; box-sizing: border-box; }
.clj-tabs button{ flex: 1; background: transparent; color: var(--ink-dim); border-radius: 0.5625rem; padding: 0.5rem 0.5rem; min-height: 2.5rem; font-size: 0.85rem; box-shadow: none; transform: none; }
.clj-tabs button:hover{ transform: none; box-shadow: none; color: var(--ink); }
.clj-tabs button[aria-selected="true"]{ background: rgba(var(--accent-rgb),0.22); color: var(--ink); }
.clj-chips{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.clj-chip{ display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 62.4375rem;
    background: rgba(var(--accent-rgb),0.12); color: var(--ink); border: 0.0625rem solid rgba(var(--accent-rgb),0.22); line-height: 1.4; max-width: 100%; overflow-wrap: anywhere; }
.clj-chip.over{ border-style: dashed; }
.clj-days{ display: flex; flex-direction: column; gap: 0.75rem; }
.clj-day{ border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem 0.85rem; background: rgba(128,128,128,0.04); min-width: 0; }
.clj-day-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.4rem 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.clj-day-head h3{ margin: 0; font-family: var(--display); font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.clj-day-acts{ display: flex; gap: 0.35rem; flex-wrap: wrap; }
.clj-note{ margin: 0.5rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.clj-cal{ margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.clj-cal b{ font-weight: 700; color: var(--ink-dim); margin-right: 0.35rem; }
.clj-sess{ list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; }
.clj-s{ display: grid; grid-template-columns: 3.8rem minmax(0,1.4fr) 4.6rem minmax(0,1.2fr) auto; gap: 0.25rem 0.6rem; align-items: center; padding: 0.4rem 0.1rem; border-top: 0.0625rem solid var(--panel-border); font-size: 0.84rem; color: var(--ink); }
.clj-s > *{ min-width: 0; }
.clj-s .tm, .clj-s .du{ color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.clj-s .gm b{ font-weight: 700; }
.clj-s .gm small{ display: block; color: var(--ink-dim); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clj-s .ks{ font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.clj-s .ex{ grid-column: 2 / -1; display: flex; flex-direction: column; gap: 0.3rem; }
.clj-s .ex .clj-note{ margin: 0; font-size: 0.82rem; }
.clj-more{ display: flex; justify-content: center; margin-top: 0.9rem; }
.clj-addday{ display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.clj-addday label{ font-size: 0.8rem; font-weight: 600; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 0.4rem; }
.clj-input, .clj-form input[type="number"], .clj-form input[type="text"], .clj-form textarea{ box-sizing: border-box; min-height: 2.25rem; padding: 0.4rem 0.6rem; border-radius: 0.625rem; border: 0.0625rem solid var(--panel-border);
    background: rgba(128,128,128,0.08); color: var(--ink); font: 500 0.88rem var(--sans); color-scheme: dark; max-width: 100%; }
html[data-theme="light"] .clj-input, html[data-theme="light"] .clj-form input, html[data-theme="light"] .clj-form textarea{ color-scheme: light; background: rgba(255,255,255,0.65); }
.clj-input:focus, .clj-form input:focus, .clj-form textarea:focus{ outline: none; border-color: rgba(var(--accent-rgb),0.7); box-shadow: none; }
.clj-empty{ text-align: center; padding: 1.5rem 0.5rem; }
.clj-ins{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; }
.clj-ins-card{ border: 0.0625rem solid var(--panel-border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem 0.9rem; background: rgba(128,128,128,0.04); min-width: 0; }
.clj-ins-card h3{ margin: 0 0 0.35rem; font-family: var(--display); font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.clj-ins-say{ margin: 0 0 0.6rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink); }
.clj-ins-say.wait{ color: var(--ink-dim); }
.clj-bars{ display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.clj-bar{ display: grid; grid-template-columns: minmax(0,6.5rem) minmax(0,1fr) 3.4rem; gap: 0.5rem; align-items: center; font-size: 0.78rem; color: var(--ink); }
.clj-bar .lb{ overflow-wrap: anywhere; line-height: 1.25; }
.clj-bar .lb small{ display: block; color: var(--ink-dim); font-size: 0.7rem; }
.clj-bar .tr{ position: relative; height: 0.8rem; border-radius: 0.25rem; background: rgba(128,128,128,0.12); overflow: hidden; }
.clj-bar .tr::after{ content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.0625rem; background: var(--ink-dim); opacity: 0.6; }
.clj-bar .fl{ position: absolute; top: 0; bottom: 0; background: var(--cyan); border-radius: 0.2rem; }
.clj-bar .fl.neg{ background: var(--bad); }
:root{ --cl-off-ink: #729fa6; }
html[data-theme="light"]{ --cl-off-ink: #486666; }
html[data-contrast="high"]{ --cl-off-ink: var(--ink-dim); }
.clj-bar.thin{ color: var(--ink-dim); }
.clj-bar.thin .lb small, .clj-bar.thin .vl{ color: var(--cl-off-ink); }
.clj-bar.thin .vl{ font-weight: 400; }
.clj-bar.thin .tr{ background: none; border: 0.0625rem dashed var(--cl-off-ink); box-sizing: border-box; }
.clj-bar.thin .tr::after{ background: var(--cl-off-ink); opacity: 1; }
.clj-bar .vl{ text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.clj-foot{ margin: 0.9rem 0 0; }
.clj-form{ display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.25rem; }
.clj-field{ display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.clj-flabel{ font-size: 0.78rem; font-weight: 700; color: var(--ink-dim); letter-spacing: 0.02em; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin: 0; padding: 0; }
.clj-flabel em{ font-style: normal; font-weight: 500; opacity: 0.85; }
.clj-prefill{ margin: -0.25rem 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--ink-dim); opacity: 0.85; }
.clj-prefill[hidden]{ display: none; }
.clj-seg{ display: flex; padding: 0.1875rem; border-radius: 0.625rem; background: rgba(128,128,128,0.12); border: 0.0625rem solid var(--panel-border); box-sizing: border-box; min-width: 0; }
.clj-seg button{ flex: 1; min-width: 0; background: transparent; color: var(--ink-dim); border-radius: 0.4375rem; padding: 0.35rem 0.25rem; min-height: 2.25rem; font-size: 0.82rem; box-shadow: none; transform: none; }
.clj-seg button:hover{ transform: none; box-shadow: none; color: var(--ink); }
.clj-seg button[aria-pressed="true"]{ background: rgba(var(--accent-rgb),0.25); color: var(--ink); }
.clj-sleep{ display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.clj-sleep .clj-seg{ flex: 1 1 12rem; }
.clj-seg[data-name="tod"]{ flex-wrap: wrap; }
.clj-seg[data-name="tod"] button{ flex: 1 1 5.75rem; }
.clj-sleep label{ display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-dim); font-weight: 600; }
.clj-sleep input{ width: 5rem; }
.clj-form textarea{ width: 100%; min-height: 4.5rem; resize: vertical; line-height: 1.45; }
.clj-form-err{ color: var(--bad); font-size: 0.8rem; margin: 0; min-height: 1em; }
.clj-form-err:empty{ display: none; }
.clj-form-acts{ display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.clj-form-acts .clj-btn.danger{ margin-right: auto; }
#clSheetOverlay .cl-sheet-card:has(.clj-form){ max-width: 34rem; }
.clj-sum{ display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0.75rem auto 0.25rem; width: 100%; max-width: 36rem; box-sizing: border-box; text-align: center; }
.clj-sum-ci{ display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.35rem 0.4rem 0.35rem 0.9rem; border-radius: 62.4375rem;
    border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb),0.07); max-width: 100%; box-sizing: border-box; }
.clj-sum-q{ font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.clj-sum-acts{ display: inline-flex; align-items: center; gap: 0.5rem; }
.clj-sum .clj-btn{ min-height: 2.25rem; }
.clj-sum-x{ background: none; border: none; box-shadow: none; color: var(--ink-dim); width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.clj-sum-x:hover{ background: rgba(128,128,128,0.15); color: var(--ink); box-shadow: none; transform: none; }
.clj-sum-done{ margin: 0; font-size: 0.8rem; color: var(--ink-dim); }
.clj-prog-link{ margin-left: 0.4rem; }
.clj-chips > .clj-for{ font-size: 0.8rem; font-weight: 700; color: var(--ink); line-height: 1.4; padding: 0.2rem 0.25rem 0.2rem 0; overflow-wrap: anywhere; }
.clj-gci{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 0.0625rem dashed var(--panel-border); min-width: 0; }
.clj-gci > .clj-chips{ flex: 1 1 12rem; min-width: 0; }
.clj-gci > .clj-note{ flex: 1 1 100%; margin: 0; }
.clj-today-row + .clj-note + .clj-gci, .clj-today-row + .clj-gci{ margin-top: 0.75rem; }
.clj-for-sel{ width: 100%; min-height: 2.5rem; }
.clj-form-acts [hidden]{ display: none; }
.clj-sum-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.1rem; }
@media (pointer: coarse){
.clj-btn, .clj-seg button, .clj-tabs button, .clj-link, .clj-sum-x{ min-height: 2.5rem; }
.clj-sum-x{ width: 2.5rem; }
}
@media (max-width: 56rem){
.clj-ins{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 40rem){
.clj-card{ padding: 0.95rem 0.8rem 1rem; }
.clj-day{ padding: 0.7rem 0.7rem 0.75rem; }
.clj-s{ grid-template-columns: 3.8rem minmax(0,1fr) auto; }
.clj-s .du{ grid-column: 2; grid-row: 2; font-size: 0.76rem; }
.clj-s .ks{ grid-column: 2; grid-row: 3; }
.clj-s .gm{ grid-column: 2 / -1; }
.clj-s .bt{ grid-column: 3; grid-row: 2 / span 2; align-self: center; }
.clj-s .ex{ grid-column: 2 / -1; }
.clj-bar{ grid-template-columns: minmax(0,5.5rem) minmax(0,1fr) 3.1rem; }
}
@media (max-height: 30em) and (orientation: landscape){
.clj-form{ gap: 0.5rem; }
.clj-sum{ margin-top: 0.4rem; }
}
.clj-tabs{ max-width: 30rem; }
.clj-seg button small{ display: block; margin-top: 0.05rem; font-size: 0.68rem; font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clj-s .tm small{ display: block; font-size: 0.7rem; line-height: 1.2; white-space: nowrap; }
.clj-ins-card .clj-ins-act{ display: inline-block; margin: -0.2rem 0 0.35rem; min-height: 0; padding: 0.1rem 0; font-size: 0.78rem; }
.clj-parts-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.clj-parts-grid .clj-input{ width: 100%; min-height: 2.5rem; font-variant-numeric: tabular-nums; }
.clj-parts-prev{ margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-dim); }
.clj-wakerow{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.clj-wakerow .clj-input{ width: 9rem; min-height: 2.5rem; font-variant-numeric: tabular-nums; }
.clj-partsrow .clj-dim{ font-variant-numeric: tabular-nums; }
.clj-parts-prev:empty{ display: none; }
.clj-form-acts .clj-parts-def{ margin-right: auto; }
.cl-next-done{ display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 62.4375rem; font-size: 0.85rem; font-weight: 700; color: var(--ok, #2a9d6f); background: rgba(var(--accent-rgb),0.08); border: 0.0625rem solid var(--panel-border); }
.clj-sr{ position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clj-pf{ display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.clj-pf .clj-input{ min-height: 2.5rem; max-width: 14rem; }
.clj-pf .clj-seg{ width: 17rem; max-width: 100%; }
.clj-pf .clj-seg button[aria-pressed="true"]{ background: rgba(var(--accent-rgb),0.22); color: var(--ink); }
.clj-prog{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; margin-top: 0.85rem; }
.clj-pc{ border: 0.0625rem solid var(--panel-border); border-radius: 0.85rem; padding: 0.8rem 0.85rem 0.85rem; min-width: 0; background: rgba(128,128,128,0.05); }
.clj-pc-h{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin-bottom: 0.6rem; }
.clj-pc-h h3{ margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.clj-pc-h small{ font-size: 0.8rem; color: var(--ink-dim); overflow-wrap: anywhere; }
.clj-pc-m{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.clj-pm, button.clj-pm{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; text-align: left; padding: 0.6rem 0.7rem 0.5rem; border-radius: 0.7rem;
    border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb),0.06); color: var(--ink); font: inherit; box-shadow: none; transform: none; cursor: pointer; }
button.clj-pm:hover{ background: rgba(var(--accent-rgb),0.12); box-shadow: none; transform: none; }
button.clj-pm:focus-visible{ outline: 0.125rem solid rgb(var(--accent-rgb)); outline-offset: 0.1rem; }
.clj-pm.empty{ cursor: default; background: transparent; }
.clj-pm-h{ font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-dim); }
.clj-pm-v{ font-size: 1.3rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.clj-pm-d{ font-size: 0.75rem; font-weight: 600; color: var(--ink-dim); }
.clj-pm-d.good{ color: var(--ok, #2a9d6f); }
.clj-pm-d.bad{ color: var(--bad); }
.clj-spark{ display: block; width: 100%; height: 2.6rem; margin-top: 0.3rem; overflow: visible; }
.clj-spark path{ fill: none; stroke: rgb(var(--accent-rgb)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.clj-pm-one{ font-size: 0.78rem; margin-top: 0.3rem; min-height: 2.6rem; }
@media (max-width: 30em){
.clj-pf{ width: 100%; }
.clj-pf .clj-input{ flex: 1 1 8rem; max-width: none; }
.clj-pf .clj-seg{ flex: 1 1 100%; width: auto; }
}
.cld-item .cld-dot{ width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bad); flex: none; margin-left: 0.5rem; }
.cld-item .cld-dot[hidden]{ display: none; }
.cld-item > span:first-child{ white-space: nowrap; }
.cl-sheet-card:has(.cld){ max-width: min(38rem, calc(100vw - 2rem)); }
.cld{ font-size: 0.9rem; color: var(--ink); }
.cld h3{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); margin: 1.1rem 0 0.4rem; font-weight: 700; }
.cld ul{ margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; line-height: 1.5; }
.cld li{ margin: 0.15rem 0; }
.cld-status{ padding: 0.6rem 0.8rem; border-radius: 0.6rem; border: 0.0625rem solid var(--panel-border); background: rgba(var(--accent-rgb), 0.08); margin: 0.75rem 0 0.25rem; }
.cld-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 0.0625rem solid var(--panel-border); cursor: pointer; min-height: 2.5rem; }
.cld-row:first-of-type{ border-top: none; }
.cld-row small{ display: block; color: var(--ink-dim); font-size: 0.78rem; margin-top: 0.1rem; }
:root{ --cl-off-ink: #729fa6; }
html[data-theme="light"]{ --cl-off-ink: #486666; }
html[data-contrast="high"]{ --cl-off-ink: var(--ink-dim); }
.cld-row.off{ cursor: default; color: var(--ink-dim); }
.cld-row.off small{ color: var(--cl-off-ink); font-style: italic; }
.cld-row.off .cld-sw{ background: none; border: 0.0625rem dashed var(--cl-off-ink); }
.cld-row.off .cld-sw::after{ background: none; border: 0.0625rem solid var(--cl-off-ink); box-sizing: border-box; box-shadow: none; }
.cld-sw{ -webkit-appearance: none; appearance: none; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 1rem; margin: 0; position: relative; cursor: inherit;
    background: rgba(128,128,128,0.35); border: 0.0625rem solid var(--panel-border); transition: background 150ms ease; }
.cld-sw::after{ content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; box-shadow: 0 0.0625rem 0.2rem rgba(0,0,0,0.35); transition: transform 150ms ease; }
.cld-sw:checked{ background: rgb(var(--accent-rgb)); }
.cld-sw:checked::after{ transform: translateX(1.1rem); }
.cld-sw:focus-visible{ outline: 0.125rem solid rgb(var(--accent-rgb)); outline-offset: 0.15rem; }
.cld-errs{ display: flex; flex-direction: column; gap: 0.35rem; max-height: 40svh; overflow-y: auto; overscroll-behavior: contain; }
.cld-err{ border: 0.0625rem solid var(--panel-border); border-radius: 0.6rem; background: rgba(128,128,128,0.08); }
.cld-err summary{ cursor: pointer; padding: 0.5rem 0.7rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; min-height: 2.4rem; box-sizing: border-box; }
.cld-err summary b{ flex: 1 1 14rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cld-err summary span{ color: var(--ink-dim); font-size: 0.78rem; white-space: nowrap; }
.cld-err pre{ margin: 0; padding: 0 0.7rem 0.6rem; font-size: 0.74rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-dim); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cld-n{ display: inline-block; min-width: 1.4rem; padding: 0 0.35rem; border-radius: 0.6rem; background: rgba(var(--bad-rgb, 201,74,92), 0.18); color: var(--bad); font-weight: 700; text-align: center; }
.cld-btns{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.cld-btns > button{ flex: 1 1 auto; min-height: 2.5rem; white-space: nowrap; }
.cld-usage{ margin-top: 0.4rem; }
.cld-usage summary{ cursor: pointer; color: var(--ink-dim); font-size: 0.85rem; min-height: 2.4rem; display: flex; align-items: center; }
.cld-usage table{ width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.cld-usage td{ padding: 0.2rem 0.3rem; border-top: 0.0625rem solid var(--panel-border); overflow-wrap: anywhere; }
.cld-usage td:last-child{ text-align: right; font-variant-numeric: tabular-nums; width: 4rem; }
.cld-dim{ color: var(--ink-dim); font-size: 0.85rem; }
html{ -webkit-tap-highlight-color: transparent; }
html:not(.cl-kbd) :focus, html:not(.cl-kbd) :focus-visible{ outline: none !important; }
html[data-contrast="high"]:not(.cl-kbd) :focus-visible{ box-shadow: none !important; }
html.cl-kbd :focus-visible:not(.stage):not(.cct-stage):not(canvas):not([tabindex="-1"]){ outline: 0.125rem solid rgb(var(--accent-rgb)) !important; outline-offset: 0.125rem !important; }
html:not(.cl-kbd) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea):focus{ border-color: rgb(var(--accent-rgb)); }
html body .cldp-btn:focus-visible, html body .cldp-btn[aria-expanded="true"]{ box-shadow: none; }
html body :is(button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, .seg-btn, .game-card, .mode-card, .cct-mode-card, .stat-card--clickable, .lp-continue-card, .csel-opt):not(:disabled):not([aria-disabled="true"]):is(:active, .cl-press){ filter: brightness(0.88) !important; text-shadow: none !important; }
html:not([data-theme="light"]) body :is(button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, .seg-btn, .game-card, .mode-card, .cct-mode-card, .stat-card--clickable, .lp-continue-card, .csel-opt):not(:disabled):not([aria-disabled="true"]):is(:active, .cl-press){ filter: brightness(1.3) !important; }
.nbd-head.cl-has-search{ flex-wrap: wrap; row-gap: 0.75rem; }
.nbd-head .cl-dsearch{ flex: 1 0 100%; order: 3; position: relative; display: flex; align-items: center; min-width: 0;
    font-family: var(--sans); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; }
.cl-dsearch-ic{ position: absolute; left: 0.75rem; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; color: var(--ink-dim); pointer-events: none; }
.nb-drawer input.cl-dsearch-in{ flex: 1 1 auto; width: 100%; min-width: 0; height: 2.5rem; margin: 0; box-sizing: border-box; padding: 0 2.6rem 0 2.25rem;
    border-radius: 0.625rem; border: 0.0625rem solid var(--panel-border); background: rgba(128,128,128,0.12); color: var(--ink);
    font: inherit; -webkit-appearance: none; appearance: none; outline: none; }
.nb-drawer input.cl-dsearch-in::placeholder{ color: var(--ink-dim); opacity: 0.9; }
.nb-drawer input.cl-dsearch-in::-webkit-search-cancel-button, .nb-drawer input.cl-dsearch-in::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; display: none; }
.nb-drawer input.cl-dsearch-in:focus{ border-color: rgb(var(--accent-rgb)); }
.nb-drawer .cl-dsearch-x{ position: absolute; right: 0.25rem; top: 50%; width: 2rem; height: 2rem; min-height: 0; margin-top: -1rem; padding: 0; border: 0; border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink-dim); box-shadow: none; transform: none; }
.nb-drawer .cl-dsearch-x[hidden]{ display: none; }
.nb-drawer .cl-dsearch-x:hover{ color: var(--ink); background: rgba(128,128,128,0.16); box-shadow: none; transform: none; }
.nb-drawer .cl-dsearch-x svg{ width: 1rem; height: 1rem; }
.nb-drawer .cl-dsearch-none{ margin: 0.25rem 0 1rem; font-size: 0.875rem; color: var(--ink-dim); text-align: center; }
.nb-drawer .cl-dsearch-none[hidden]{ display: none; }
.nb-drawer.cl-dsearch-on .cl-ds-miss{ display: none !important; }
@media (pointer: coarse){
.nb-drawer input.cl-dsearch-in{ font-size: 1.125rem; }
.nb-drawer .cl-dsearch-x{ width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; right: 0; }
}
#motGameView .mot-turn, #ufovGameView .ufov-turn, #mdtGameView .mdt-turn{ display: none !important; }
.game-view .cl-turn{ display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: var(--topnav-h, 4.75rem); z-index: 110; align-items: center; justify-content: center;
    padding: 1.5rem; box-sizing: border-box; background: var(--bg-0); text-align: center; }
html:is(.mot-full, .ufov-full, .mdt-full, .srot-full) .game-view .cl-turn{ top: 0; z-index: 125; }
.game-view .cl-turn[hidden]{ display: none; }
.cl-turn-in{ max-width: 20rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.cl-turn-ic{ width: 4.5rem; height: 4.5rem; color: var(--violet); animation: clTurnIc 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes clTurnIc{ 0%, 25%{ transform: rotate(0deg); } 55%, 80%{ transform: rotate(-90deg); } 100%{ transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce){
.cl-turn-ic{ animation: none; }
}
.cl-turn-t{ margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.cl-turn-n{ margin: 0; font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; }
.cl-turn-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; }
.cl-turn-row button{ min-width: 8rem; min-height: 2.75rem; padding: 0.7rem 1.4rem; font-size: 1rem; }
.cl-turn-row button[hidden]{ display: none; }
:root{ --drz: 1; }
@media (min-width: 51.25rem) and (min-height: 37.5rem){
:root{ --drz: 1.08; }
}
@media (min-width: 80rem) and (min-height: 37.5rem){
:root{ --drz: 1.18; }
}
@media (min-width: 51.25rem) and (min-height: 37.5rem){
html body .nb-drawer.nbd-page{ width: min(calc(30rem * var(--drz)), 92vw); padding-left: calc(1.1rem * var(--drz)); padding-right: calc(1.1rem * var(--drz)); }
html body .nb-drawer.nbd-page > *{ zoom: var(--drz); }
html body .nb-tip-pop{ max-width: min(calc(20rem * var(--drz)), 90vw); padding: calc(0.6rem * var(--drz)) calc(0.75rem * var(--drz)); font-size: calc(0.8125rem * var(--drz)); }
}
@media (max-width: 36rem){
:is(#nbackGameView,#relGameView) .instrument-head h1{ white-space: normal; text-overflow: clip; overflow-wrap: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
}
@media (pointer: coarse){
:is(#schClock, #motClock, #srotClock, #cspanClock, #ufovClock, #mdtClock, #semschClock){ border: solid transparent; border-width: 0.8rem 0.6rem 0.8rem 0; margin: -0.8rem -0.6rem -0.8rem 0; }
#schSize{ border: solid transparent; border-width: 0.45rem 0.4rem 1.15rem 0; margin-top: -0.45rem; margin-bottom: -1.15rem; margin-right: -0.4rem; min-width: 3.7rem; }
#semschLv{ border: solid transparent; border-width: 0.8rem 0.2rem; margin: -0.8rem -0.2rem; }
#semschMode{ border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; margin-top: -1rem; margin-bottom: -1rem; }
:is(#schOv, #semschOv, #motOv, #srotOv, #cspanOv, #ufovOv, #mdtOv) > [style*="--cl-fitz"] button{ min-height: calc(2.5rem / var(--cl-fitz)); }
}
@media (hover: none){
.cl-kbd{ display: none; }
}
.cldp-btn{ display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; box-sizing: border-box; min-height: 2.25rem; padding: 0.4rem 0.65rem;
    border-radius: 0.625rem; border: 0.0625rem solid var(--panel-border); background: rgba(128,128,128,0.08); color: var(--ink); font: 500 0.88rem var(--sans);
    cursor: pointer; box-shadow: none; transform: none; white-space: nowrap; min-width: 9rem; text-align: left; }
html[data-theme="light"] .cldp-btn{ background: rgba(255,255,255,0.65); }
.cldp-btn:hover{ border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.08); transform: none; box-shadow: none; }
.cldp-btn:focus-visible, .cldp-btn[aria-expanded="true"]{ outline: none; border-color: rgba(var(--accent-rgb),0.7); }
.cldp-btn.bad{ border-color: #f87171; }
.cldp-btn svg{ width: 1rem; height: 1rem; flex: none; opacity: 0.75; }
.iq-f .cldp-btn{ width: 100%; min-height: 2.5rem; font-size: 0.9rem; }
.cldp-pop{ position: fixed; z-index: 460; width: 17.5rem; max-width: calc(100vw - 1rem); box-sizing: border-box; padding: 0.75rem; border-radius: var(--radius-md, 0.9rem);
    background: var(--bg-1); border: 0.0625rem solid var(--panel-border); box-shadow: 0 1.25rem 3rem -1rem rgba(0,0,0,0.6); color: var(--ink); display: none; }
html[data-theme="light"] .cldp-pop{ background: #eef7f7; box-shadow: 0 1.25rem 3rem -1rem rgba(20,60,60,0.35); }
.cldp-pop.open{ display: block; }
.cldp-head{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.cldp-title{ font: 700 0.95rem var(--display, var(--sans)); color: var(--ink); }
.cldp-nav{ width: 2.25rem; height: 2.25rem; min-width: 0; min-height: 0; padding: 0; border-radius: 0.6rem; border: 0.0625rem solid var(--panel-border); background: transparent; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; transform: none; font-size: 1.1rem; line-height: 1; }
.cldp-nav:hover{ background: rgba(var(--accent-rgb),0.1); transform: none; box-shadow: none; }
.cldp-nav:disabled{ opacity: 0.35; cursor: default; background: transparent; }
.cldp-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.15rem; }
.cldp-dow{ text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); padding: 0.2rem 0 0.3rem; }
.cldp-day{ min-width: 0; min-height: 2.15rem; padding: 0; border: 0; border-radius: 0.55rem; background: transparent; color: var(--ink); font: 500 0.85rem var(--sans); cursor: pointer; box-shadow: none; transform: none; }
.cldp-day:hover{ background: rgba(var(--accent-rgb),0.12); transform: none; box-shadow: none; }
.cldp-day.out{ color: var(--ink-dim); opacity: 0.55; }
.cldp-day.today{ box-shadow: inset 0 0 0 0.0625rem rgba(var(--accent-rgb),0.7); }
.cldp-day.sel{ background: rgb(var(--accent-rgb)); color: #062327; font-weight: 700; }
html[data-theme="light"] .cldp-day.sel{ background: #2a7a7a; color: #ffffff; }
.cldp-day:disabled{ opacity: 0.25; cursor: default; background: transparent; }
.cldp-day:focus-visible{ outline: 0.125rem solid rgb(var(--accent-rgb)); outline-offset: -0.125rem; }
.cldp-foot{ display: flex; justify-content: space-between; margin-top: 0.5rem; }
.cldp-link{ min-height: 2rem; padding: 0.25rem 0.5rem; border: 0; background: transparent; color: var(--cyan, rgb(var(--accent-rgb))); font: 600 0.8rem var(--sans); cursor: pointer; box-shadow: none; transform: none; border-radius: 0.4rem; }
html[data-theme="light"] .cldp-link{ color: #23696a; }
.cldp-link:hover{ background: rgba(var(--accent-rgb),0.1); transform: none; box-shadow: none; }
@media (pointer: coarse){
.cldp-day{ min-height: 2.5rem; }
.cldp-btn{ min-height: 2.5rem; }
}
@media (orientation: landscape) and (min-width: 64.0625em) and (min-height: 40.0625em) and (pointer: fine){
#nbStage:not(.exec) :is(.nbg-persp,.nb-vcrank), #nbStage:not(.exec) .nb-nlevel{ top: 0.75rem; }
}
#nbStage:not(.vtally):has(.nbg-scene:not(.flat)) .nbg-persp{ scale: calc(var(--nb-fit, 1) * var(--nb-cube, 1.1)); }
@media (orientation: landscape) and (min-width: 64.0625em) and (min-height: 40.0625em) and (pointer: fine){
#nbStage:not(.vtally):has(.nbg-scene:not(.flat)) .nbg-persp{ perspective: 60svmin; scale: calc(0.88 * var(--nb-cube, 1.1)); }
}
@media (orientation: landscape) and (pointer: fine) and (min-width: 64em){
.instrument:has(> :is(#gameView,#geoView,#semanticView,#linguisticView).visible){ zoom: var(--cl-big-z, 1); max-width: min(64rem, 100%); }
}
#nbackGameView .ih-left h1, #relGameView .ih-left h1, #geoTitle, #semanticTitle, #linguisticView .ih-left h1, #cctGameView .ih-left h1{ -webkit-user-select: none; user-select: none; }
.nb-title-dd.cct-menu-panel{ position: fixed; right: auto; z-index: 60; min-width: 11rem; }
.nb-title-dd.cct-menu-panel.open{ display: flex; }
.nb-title-dd .menu-item{ min-height: 2.5rem; flex: none; }
.nb-title-dd.cct-menu-panel{ overflow-y: auto; overscroll-behavior: contain; }
.nb-title-dd .nb-dd-h{ margin: 0.15rem 0.75rem 0.3rem; }
:is(#schMode, #cspanMode, #cspanSize, #srotMode, #srotSize), .cl-qcell{ cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.cl-qcell{ border-radius: 0.5rem; transition: background-color 0.15s; }
@media (hover: hover){
:is(#schMode, #cspanMode, #srotMode):hover{ color: var(--cyan); }
:is(#cspanSize, #srotSize):hover{ filter: brightness(1.2); }
.cl-qcell:hover{ background-color: rgba(var(--accent-rgb), 0.08); box-shadow: 0 0 0 0.3rem rgba(var(--accent-rgb), 0.08); }
html[data-theme="light"] :is(#schMode, #cspanMode, #srotMode):hover{ color: #1f5f5f; }
}
@media (pointer: coarse){
:is(#schMode, #cspanMode, #srotMode){ border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; margin-top: -1rem; margin-bottom: -1rem; }
:is(#cspanSize, #srotSize){ border: solid transparent; border-width: 0.45rem 0.4rem 1.15rem 0; margin-top: -0.45rem; margin-bottom: -1.15rem; margin-right: -0.4rem; }
}
html .nb-title-dd .menu-item.nb-dd-cur{ color: rgb(var(--accent-rgb)); font-weight: 700; }
html[data-theme="light"] .nb-title-dd .menu-item.nb-dd-cur{ color: #1f5f5f; }
.cl-sumview .cl-sum-rows{ display: grid; grid-template-columns: max-content minmax(1.5rem, 1fr) max-content max-content; align-items: center; gap: 0.3rem 0.5rem; }
.cl-sumview .cl-sum-row{ display: contents; }
@media (max-width: 30rem){
.cl-sumview .cl-sum-rows{ column-gap: 0.4rem; }
}
@media (pointer: coarse){
html body details.stat-more > summary{ min-height: 2.5rem; }
html body :is(.menu-panel, .cct-menu-panel) .menu-item{ min-height: 2.5rem; }
html body .nb-drawer input[type="range"]{ height: 2.5rem; margin: 0.15rem 0 0; background-size: 100% 0.1875rem; background-position: 0 50%; background-repeat: no-repeat; }
html body .nb-drawer input[type="range"]::-webkit-slider-thumb{ width: 1.35rem; height: 1.35rem; }
html body .nb-drawer input[type="range"]::-moz-range-thumb{ width: 1.35rem; height: 1.35rem; }
}