.page-testing{
  position:relative;
  isolation:isolate;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --testing-theme-surface:rgba(28,28,27,0.52);
  --testing-theme-border:rgba(255,255,255,.14);
  --testing-theme-border-hover:rgba(255,255,255,.2);
  --testing-theme-text:#E5E7EB;
  --testing-theme-muted:#B8C0D4;
  --testing-theme-accent:#60a5fa;
  --testing-theme-accent-soft:rgba(59,130,246,.12);
  --testing-theme-accent-border:rgba(59,130,246,.45);
  --testing-theme-dropdown-bg:rgba(28,28,27,0.95);
  --testing-theme-word:#E5E7EB;
  --testing-theme-pending:#9CA3AF;
  --testing-theme-correct:#B9E6B4;
  --testing-theme-wrong:#F08B8B;
  --testing-theme-caret:#8B5CF6;
  --testing-theme-bg-radial1:rgba(94,160,255,0.18);
  --testing-theme-bg-radial2:rgba(7,12,24,0.92);
  --testing-theme-bg-radial3:rgba(6,8,16,0.98);
  --t-surface:var(--testing-theme-surface);
  --t-surface-solid:var(--testing-theme-dropdown-bg);
  --t-surface-hover:var(--testing-theme-accent-soft);
  --t-border:var(--testing-theme-border);
  --t-border-hover:var(--testing-theme-border-hover);
  --t-border-strong:var(--testing-theme-border-hover);
  --t-text-primary:var(--testing-theme-word);
  --t-text-secondary:var(--testing-theme-text);
  --t-text-muted:var(--testing-theme-muted);
  --t-accent-blue:var(--testing-theme-accent);
  --t-accent-blue-text:var(--testing-theme-accent);
  --t-accent-blue-light:var(--testing-theme-text);
  --t-accent-blue-soft:var(--testing-theme-accent-soft);
  --t-accent-blue-border:var(--testing-theme-accent-border);
  --t-progress-track:var(--testing-theme-border);
  --t-success-bar:var(--testing-theme-correct);
  --t-error-bar:var(--testing-theme-wrong);
  --t-shadow-sm:0 8px 24px rgba(2,8,23,0.2);
  --t-shadow-md:0 16px 40px rgba(2,8,23,0.24);
  --t-shadow-xl:0 20px 52px rgba(2,8,23,0.34);
  --t-chart-grid:var(--testing-theme-border);
  --t-chart-axis:var(--testing-theme-muted);
  --t-chart-line:var(--testing-theme-accent);
  --t-chart-dot:var(--testing-theme-accent);
  --t-kb-wrap-bg:var(--testing-theme-surface);
  --t-kb-wrap-border:var(--testing-theme-border);
  --t-kb-key-bg:var(--testing-theme-surface);
  --t-kb-key-border:var(--testing-theme-border);
  --t-kb-key-color:var(--testing-theme-text);
  --t-kb-grey-bg:color-mix(in srgb, var(--testing-theme-surface) 72%, var(--testing-theme-border) 28%);
  --t-kb-grey-border:var(--testing-theme-border-hover);
  --t-kb-grey-color:var(--testing-theme-muted);
  --t-kb-space-color:var(--testing-theme-muted);
}

.page-testing::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  background:
    radial-gradient(circle at 50% 35%, var(--testing-theme-bg-radial1), transparent 55%),
    radial-gradient(circle at 50% 65%, var(--testing-theme-bg-radial2), var(--testing-theme-bg-radial3));
}

.page-testing[class*="testing-color-theme-"]::before{
  opacity:1;
}

[data-theme="light"] .page-testing:not([class*="testing-color-theme-"]){
  --testing-theme-surface:#ffffff;
  --testing-theme-border:rgba(148,163,184,0.65);
  --testing-theme-border-hover:rgba(100,116,139,0.55);
  --testing-theme-text:#334155;
  --testing-theme-muted:#64748b;
  --testing-theme-accent:#2563eb;
  --testing-theme-accent-soft:rgba(37,99,235,0.14);
  --testing-theme-accent-border:rgba(37,99,235,0.4);
  --testing-theme-dropdown-bg:#ffffff;
  --testing-theme-word:#334155;
  --testing-theme-pending:#9ca3af;
  --testing-theme-correct:#15803d;
  --testing-theme-wrong:#dc2626;
  --testing-theme-caret:#2563eb;
  --testing-theme-bg-radial1:transparent;
  --testing-theme-bg-radial2:#ffffff;
  --testing-theme-bg-radial3:#ffffff;
  --t-kb-wrap-bg:#f8fafc;
  --t-kb-wrap-border:rgba(100,116,139,0.42);
  --t-kb-key-bg:#ffffff;
  --t-kb-key-border:rgba(100,116,139,0.38);
  --t-kb-key-color:#334155;
  --t-kb-grey-bg:#f1f5f9;
  --t-kb-grey-border:rgba(100,116,139,0.44);
  --t-kb-grey-color:#64748b;
  --t-kb-space-color:#64748b;
}

[data-theme="light"] .page-testing,
[data-theme="light"] .page-testing .testing-lock-title,
[data-theme="light"] .page-testing .testing-lock-subtitle,
[data-theme="light"] .page-testing .testing-lock-copy,
[data-theme="light"] .page-testing .language-name,
[data-theme="light"] .page-testing .testing-extra-info,
[data-theme="light"] .page-testing .testing-stat-label,
[data-theme="light"] .page-testing .testing-stat-sub,
[data-theme="light"] .page-testing .testing-top,
[data-theme="light"] .page-testing .testing-result-stats{
  color:#000;
}

[data-theme="light"] .page-testing .char.active{
  color:#000;
}

[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-title{
  color:var(--testing-theme-word) !important;
}

[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-sub{
  color:var(--testing-theme-text) !important;
}

[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-extra-info,
[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-stat-label,
[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-stat-sub,
[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-top,
[data-theme="light"] .page-testing[class*="testing-color-theme-"] .testing-result-stats,
[data-theme="light"] .page-testing[class*="testing-color-theme-"] .language-name{
  color:var(--testing-theme-text);
}

[data-theme="light"] .page-testing{
  --t-toggle-bg:rgba(255,255,255,0.92);
  --t-toggle-border:rgba(148,163,184,0.4);
  --t-toggle-hover:#f8fafc;
}
.page-testing:not(.testing-started) .testing-countdown,
.page-testing:not(.testing-started) .focus-counter,
.page-testing:not(.testing-started) .testing-header,
.page-testing:not(.testing-started) .testing-panel,
.page-testing:not(.testing-started) .typing-keyboard,
.page-testing:not(.testing-started) .kb-visual,
.page-testing:not(.testing-started) .focus-toggle-wrap{
  display:none;
}

.page-testing.results-open .testing-intro-modal{ display:none; }

.testing-intro-modal{
  position:relative;
  background:transparent;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  pointer-events:auto;
  min-height:60vh;
}

.testing-intro-modal.hidden{ display:none; }

.testing-intro-card{
  background:transparent;
  border-radius:0;
  padding:0;
  max-width:760px;
  width:100%;
  text-align:center;
  pointer-events:auto;
  position:relative;
  z-index:1;
}

.testing-intro-modal::before{
  content:'';
  position:fixed;
  inset:0;
  background:var(--t-bg-body, #1c1c1b);
  z-index:0;
}

.testing-lock-title{
  margin:0 0 10px;
  font-size:clamp(2.2rem,4.5vw,3.2rem);
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f8fafc;
}
.testing-lock-subtitle{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:rgba(94,160,255,0.75);
  margin-bottom:16px;
}
.testing-lock-copy{
  color:rgba(210,220,245,0.7);
  margin:0 auto 26px;
  line-height:1.6;
  font-size:15px;
  max-width:560px;
}
.testing-lock-card{
  display:flex;
  justify-content:center;
  margin:8px 0 26px;
}
.testing-lock-card-inner{
  width:320px;
  aspect-ratio:1.6/1;
  border-radius:16px;
  background:var(--t-bg-body, #1c1c1b);
  border:1px solid var(--t-border, rgba(255,255,255,.08));
  box-shadow:none;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.testing-card-sample{
  position:absolute;
  left:18px;
  right:18px;
  top:86px;
  display:flex;
  gap:14px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  opacity:0.22;
  pointer-events:none;
  z-index:1;
}

.testing-card-word{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(225,230,255,0.92);
  font-family: var(--typing-font, ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace);
  font-size:18px;
  letter-spacing:0.06em;
  text-transform:lowercase;
  filter: blur(0.2px);
}
.testing-lock-card-brand{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0.5;
  font-size:10px;
  font-weight:900;
  letter-spacing:-0.02em;
  color:#fff;
}
.testing-lock-card-icon{ font-size:14px; }
.testing-lock-card-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0.5;
  position:relative;
  z-index:2;
  color:#fff;
}
.testing-lock-card-line{
  display:block;
  width:32px;
  height:1px;
  background:rgba(94,160,255,0.4);
}
.testing-lock-card-label{
  font-size:8px;
  letter-spacing:0.3em;
  text-transform:uppercase;
}
.testing-lock-card-name{
  font-size:12px;
  font-weight:300;
}
.testing-lock-card-mark{
  position:absolute;
  inset:auto 14px 14px auto;
  font-size:56px;
  opacity:0.06;
}

.testing-intro-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.testing-intro-actions .intro-skip-wrap{
  width:100%;
  display:flex;
  justify-content:center;
}
.testing-intro-actions .intro-skip-btn{
  background:none;
  border:none;
  padding:0;
  font-size:11px;
  color:var(--t-text-muted, rgba(210,220,245,0.6));
  cursor:pointer;
  opacity:0.75;
}
.testing-intro-actions .intro-skip-btn:hover{ opacity:1; text-decoration:underline; }

.testing-intro-btn{
  border:none;
  background:#5ea0ff;
  color:#ffffff;
  font-weight:700;
  padding:12px 30px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  transition:transform .12s ease, filter .2s ease;
  box-shadow:none;
}
.testing-intro-btn:hover{ filter:brightness(1.05); }
.testing-intro-btn:active{ transform:scale(0.98); }
.page-testing .focus-counter{
  display:none;
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:32px;
  font-weight:700;
  color:#E5E7EB;
  letter-spacing:0.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Courier New",monospace;
}
.page-testing .focus-toggle-wrap{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px}
.page-testing .focus-toggle-input{position:absolute;opacity:0;pointer-events:none}
.page-testing .focus-toggle-switch{justify-content:center}
.page-testing .checkbox-wrapper-4 *{box-sizing:border-box}
.page-testing .checkbox-wrapper-4{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.page-testing .checkbox-wrapper-4 .cbx-btn{
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
  overflow:hidden;
  transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid var(--testing-theme-border);
  color:#E5E7EB;
}
.page-testing .checkbox-wrapper-4 .cbx-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.page-testing .checkbox-wrapper-4 .cbx-btn:active{transform:scale(0.98)}
.page-testing .checkbox-wrapper-4 .cbx-box{
  position:relative;
  width:18px;
  height:18px;
  border-radius:6px;
  transform:scale(1);
  border:1px solid rgba(229,231,235,0.45);
  transition:background-color 0.2s ease, border-color 0.2s ease;
  box-shadow:0 1px 1px rgba(0,0,0,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.page-testing .checkbox-wrapper-4 .cbx-box svg{display:block}
.page-testing .checkbox-wrapper-4 .cbx-box polyline{
  fill:none;
  stroke:#E5E7EB;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:16px;
  stroke-dashoffset:16px;
  transition:stroke-dashoffset 0.25s ease;
}
.page-testing .checkbox-wrapper-4 .cbx-text{line-height:18px;font-size:12px;letter-spacing:.02em;font-weight:600}
.page-testing .checkbox-wrapper-4 .cbx-btn.selected .cbx-box{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.45);
  animation:wave-4 0.4s ease;
}
.page-testing .checkbox-wrapper-4 .cbx-btn.selected .cbx-box polyline{stroke-dashoffset:0}
.page-testing .testing-header{display:flex;flex-direction:column;gap:6px;text-align:center;margin-bottom:8px}
.page-testing .testing-header-main{position:relative;width:100%;display:block}
.page-testing .testing-header-copy{width:100%;text-align:center}
.page-testing .testing-title{margin:0;font-size:28px;font-weight:800;color:#E5E7EB;letter-spacing:.01em}
.page-testing .testing-sub{margin:0;color:var(--muted);font-size:13px;letter-spacing:.01em}
.page-testing .testing-source-meta{position:absolute;top:0;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:min(320px, 42vw);text-align:right;color:var(--t-text-secondary, #E5E7EB)}
.page-testing .testing-source-meta.hidden{display:none}
.page-testing .testing-source-meta-line{margin:0;line-height:1.2}
.page-testing .testing-source-meta-title{font-size:15px;font-weight:500}
.page-testing .testing-source-meta-author{font-size:14px;color:var(--t-text-muted, #B8C0D4)}
.page-testing .testing-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:6px}
.page-testing .language-selector{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
  flex-shrink:0;
  padding:2px;
  border-radius:12px;
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  background:var(--t-surface, rgba(255,255,255,.04));
}
.page-testing .theme-selector{position:relative;display:inline-flex;align-items:center;gap:8px}
.page-testing .testing-layout-divider{
  display:none;
  width:1px;
  height:18px;
  background:rgba(255,255,255,.16);
  flex-shrink:0;
}
.page-testing .language-selector.with-os-switch .testing-layout-divider{display:block}
.page-testing .testing-os-switch-group{display:flex;align-items:center}
.page-testing .testing-os-switch{display:flex;gap:4px;flex-shrink:0;padding:0;border-radius:0;border:none;background:transparent}
.page-testing .testing-os-switch.hidden{display:none}
.page-testing .testing-os-btn{
  width:34px;
  height:24px;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--t-text-secondary, #E5E7EB);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.page-testing .testing-os-btn:hover{background:var(--t-surface-hover, rgba(255,255,255,.06));border-color:rgba(255,255,255,.08)}
.page-testing .testing-os-btn.selected{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.15));
  border-color:var(--t-accent-blue, rgba(59,130,246,.4));
  color:var(--t-accent-blue, #60a5fa);
}
.page-testing .language-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--t-text-secondary, #e5e7eb);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
}
.page-testing .language-btn:hover{background:var(--t-surface-hover, rgba(255,255,255,.08))}
.page-testing .language-btn:active{transform:scale(0.98)}
.page-testing .testing-os-logo{
  width:15px;
  height:15px;
  display:block;
  background-color:currentColor;
  opacity:.92;
}
.page-testing .testing-os-logo-win{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3.4 11.2 2v9.5H2V3.4Zm10.8-1.55L22 0.5v11h-9.2V1.85ZM2 12.5h9.2V22L2 20.6v-8.1Zm10.8 0H22v11.05L12.8 22V12.5Z'/%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 24 24'%3E%3Cpath fill='black' d='M2 3.4 11.2 2v9.5H2V3.4Zm10.8-1.55L22 0.5v11h-9.2V1.85ZM2 12.5h9.2V22L2 20.6v-8.1Zm10.8 0H22v11.05L12.8 22V12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-testing .testing-os-logo-mac{
  width:18px;
  height:18px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.65 12.53c.02 2.53 2.2 3.38 2.22 3.39-.02.06-.35 1.2-1.14 2.38-.68 1.01-1.39 2.01-2.49 2.03-1.08.02-1.43-.64-2.67-.64-1.24 0-1.63.62-2.64.66-1.05.04-1.84-1.05-2.53-2.06-1.42-2.05-2.5-5.79-1.05-8.31.72-1.25 2-2.04 3.4-2.06 1.06-.02 2.07.72 2.67.72.6 0 1.73-.89 2.92-.76.5.02 1.89.2 2.79 1.53-.07.04-1.67.98-1.65 2.92Zm-2.17-6.08c.57-.69.95-1.65.84-2.6-.82.03-1.82.55-2.4 1.24-.53.61-.99 1.59-.87 2.52.91.07 1.85-.46 2.43-1.16Z'/%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 24 24'%3E%3Cpath fill='black' d='M16.65 12.53c.02 2.53 2.2 3.38 2.22 3.39-.02.06-.35 1.2-1.14 2.38-.68 1.01-1.39 2.01-2.49 2.03-1.08.02-1.43-.64-2.67-.64-1.24 0-1.63.62-2.64.66-1.05.04-1.84-1.05-2.53-2.06-1.42-2.05-2.5-5.79-1.05-8.31.72-1.25 2-2.04 3.4-2.06 1.06-.02 2.07.72 2.67.72.6 0 1.73-.89 2.92-.76.5.02 1.89.2 2.79 1.53-.07.04-1.67.98-1.65 2.92Zm-2.17-6.08c.57-.69.95-1.65.84-2.6-.82.03-1.82.55-2.4 1.24-.53.61-.99 1.59-.87 2.52.91.07 1.85-.46 2.43-1.16Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-testing .theme-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:transparent;
  border:1px solid var(--testing-theme-border);
  border-radius:10px;
  color:var(--testing-theme-text);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.page-testing .theme-icon{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:currentColor;
  opacity:.92;
}
.page-testing .theme-icon svg{
  width:16px;
  height:16px;
  display:block;
}
.page-testing .theme-btn:hover{background:var(--t-surface-hover, rgba(59,130,246,.12));border-color:var(--t-border-hover, rgba(255,255,255,.2))}
.page-testing .theme-btn:active{transform:scale(0.98)}
.page-testing .testing-actions :is(
  .checkbox-wrapper-4 .cbx-btn
){
  min-height:auto;
  padding:6px 10px;
  border-radius:10px;
  letter-spacing:.02em;
  box-shadow:none;
  background:var(--t-surface, rgba(255,255,255,.04));
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  color:var(--t-text-secondary, #E5E7EB);
}
.page-testing .testing-actions :is(
  .checkbox-wrapper-4 .cbx-btn
):hover{
  background:var(--t-surface-hover, rgba(59,130,246,.12));
  border-color:var(--t-border-hover, rgba(255,255,255,.2));
}
.page-testing .testing-actions :is(
  .checkbox-wrapper-4 .cbx-btn
):active{
  transform:scale(0.98);
}
.page-testing .testing-actions :is(
  .checkbox-wrapper-4 .cbx-btn.selected
){
  border-color:var(--t-accent-blue-border, rgba(59,130,246,.45));
  background:var(--t-accent-blue-soft, rgba(59,130,246,.12));
  color:var(--t-accent-blue-light, #E5E7EB);
}
.page-testing .language-icon{display:none}
.page-testing .language-text{line-height:1}
.page-testing .theme-text{line-height:1}
.page-testing .language-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:200px;
  background:rgba(28,28,27,.95);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  z-index:100;
}
.page-testing .theme-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:min(560px, calc(100vw - 40px));
  background:rgba(28,28,27,.95);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  z-index:100;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  max-height:min(62vh, 520px);
  overflow:auto;
}
.page-testing .language-dropdown.hidden{display:none}
.page-testing .theme-dropdown.hidden{display:none}
.page-testing .language-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease;
}
.page-testing .language-option:hover{background:rgba(255,255,255,.08)}
.page-testing .language-option.selected{background:rgba(59,130,246,.15)}
.page-testing .theme-option{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  padding:9px 11px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease;
  color:#E5E7EB;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
}
.page-testing .theme-option-preview{display:inline-flex;align-items:center;gap:6px;min-width:28px}
.page-testing .theme-dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.page-testing .theme-dot-bg{background:var(--theme-preview-bg, #1f2937)}
.page-testing .theme-dot-text{background:var(--theme-preview-text, #e5e7eb)}
.page-testing .theme-option-label{line-height:1}
.page-testing .theme-option:hover{background:rgba(255,255,255,.08)}
.page-testing .theme-option.selected{background:rgba(59,130,246,.15)}
.page-testing .theme-dropdown-note{
  grid-column:1 / -1;
  margin-top:2px;
  padding:10px 12px 0;
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--testing-theme-muted, #9ca3af);
  font-size:11px;
  line-height:1.4;
}
.page-testing .language-flag{display:none}
.page-testing .language-name{font-size:12px;color:#E5E7EB;font-weight:600}
.page-testing .sound-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:#bdbdbd;border-radius:999px;padding:4px 10px;font-size:11px;cursor:pointer}
.page-testing .sound-toggle[data-on="1"]{border-color:var(--accent);color:var(--accent)}
.page-testing .sound-icon{width:14px;height:14px;display:inline-flex}
.page-testing .sound-icon svg{width:14px;height:14px;display:block}
.page-testing .testing-panel{margin-top:6px;padding:0;position:relative;overflow:visible}
.page-testing .testing-top{margin-top:10px}
.page-testing .testing-top{display:flex;justify-content:center;gap:14px;align-items:center;color:var(--muted);font-family:monospace;font-size:11px;background:transparent;border:none;box-shadow:none}
.page-testing .testing-stats{display:flex;gap:14px;flex-wrap:wrap}
.page-testing .text-viewport{width:100%;padding:0;box-sizing:border-box;border:none;border-radius:0;margin-top:12px}
.page-testing:not(.focus-mode):not(.focus-mode-2):not(.focus-mode-3) .text-viewport{
  text-align:center;
}
.page-testing:not(.focus-mode):not(.focus-mode-2):not(.focus-mode-3) .words{
  width:fit-content;
  max-width:100%;
  display:inline-flex;
}
.page-testing .text-viewport.words-mode{overflow:hidden;white-space:normal;height:calc(var(--line-h) * 3 + var(--row-gap) * 2 + var(--lines-viewport-extra))}
.page-testing .text-line{display:inline-block;padding-inline:clamp(8px,4vw,60px);transition:transform 160ms ease;will-change:transform}
.page-testing .words{width:100%;max-width:none;display:flex;flex-wrap:wrap;gap:var(--row-gap);justify-content:center;position:relative;margin:0 auto;text-align:center;overflow-x:visible;border:none;outline:none;user-select:none;color:var(--muted)}
.page-testing .word{display:inline-block;padding:4px 4px;background:transparent;border-radius:6px;color:var(--text);font-family:var(--typing-font);font-size:48px;letter-spacing:0.04em;line-height:var(--line-h);max-width:100%;word-break:break-word;overflow-wrap:anywhere}
.page-testing .word.pending{color:var(--muted)}
.page-testing .word.correct{color:#b9e6b4;background:transparent}
.page-testing .word.wrong{color:#f08b8b;background:transparent}
.page-testing .word.active{background:transparent}
.page-testing .char{display:inline;transition:color 120ms linear;position:relative}

/* Keep top-left utility key visible (grey) in Testing */
.page-testing .typing-keyboard .keyboard-row:first-child .keyboard-key:first-child.key-grey{
  background:rgba(207,216,220,0.08) !important;
  border-color:rgba(207,216,220,0.18) !important;
  color:rgba(207,216,220,0.5) !important;
  box-shadow:none !important;
}
.page-testing .char.correct{color:#b9e6b4}
.page-testing .char.wrong{color:#f08b8b}
.page-testing .char.active{color:#E5E7EB}
.page-testing .char.active::after{content:'';position:absolute;left:-1px;top:0;width:2px;height:100%;background:#8B5CF6;animation:blink 1s ease-in-out infinite}
.page-testing .char.active-end::after{content:'';position:absolute;right:-1px;top:0;width:2px;height:100%;background:#8B5CF6;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:0}}

/* ── Japanese Word Styling ── */
.page-testing .word.japanese-word{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  vertical-align:top;
  line-height:1.2;
  min-width:40px;
  margin-bottom:8px;
}

.page-testing .word.japanese-word .kana-display{
  font-size:28px;
  font-weight:700;
  color:#f472b6;
  line-height:1.2;
  margin-bottom:4px;
}

.page-testing .word.japanese-word .romaji-chars{
  font-size:18px;
  font-weight:500;
  letter-spacing:0.05em;
  color:#E5E7EB;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
}

.page-testing .word.japanese-word .romaji-chars .char{
  display:inline-block;
  transition:color 0.15s ease;
}

.page-testing .word.japanese-word .romaji-chars .char.correct{
  color:#60a5fa;
  font-weight:700;
}

.page-testing .word.japanese-word .romaji-chars .char.wrong{
  color:#ef4444;
  text-decoration:underline;
}

.page-testing .word.japanese-word .romaji-chars .char.active{
  color:#fff;
  background:rgba(59,130,246,0.3);
  border-radius:3px;
}

.page-testing .word.japanese-word.active .kana-display{
  color:#ec4899;
  text-shadow:0 0 10px rgba(236,72,153,0.3);
}

.page-testing .word.japanese-word.correct .kana-display{
  color:#b9e6b4;
  text-shadow:0 0 10px rgba(185,230,180,0.4);
}

.page-testing .word.japanese-word.wrong .kana-display{
  color:#ef4444;
  text-shadow:0 0 10px rgba(239,68,68,0.4);
}

.page-testing .word.japanese-word.correct .romaji-chars{
  color:#b9e6b4;
}

.page-testing .word.japanese-word.correct .romaji-chars .char{
  color:#b9e6b4;
}

.page-testing .word.japanese-word.wrong .romaji-chars{
  color:#f08b8b;
}

.page-testing .word.japanese-word.wrong .romaji-chars .char{
  color:#f08b8b;
}

.page-testing .word.japanese-word.wrong .romaji-chars .char.wrong{
  color:#ef4444;
  text-decoration:underline;
}
.page-testing .test-capture{opacity:0;position:fixed;left:-9999px}
.page-testing .testing-result{margin-top:18px;padding:18px}
.page-testing .testing-result-stats{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-family:monospace}
.page-testing .testing-results-page{display:none}
.page-testing .testing-results-shell{
  width:min(1360px, 96vw);
  max-width:1360px;
  padding:48px 56px 40px;
  display:flex;
  flex-direction:column;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  max-height:min(90vh, 1100px);
  overflow:auto;
}
.page-testing .testing-results-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.page-testing .testing-results-stats{display:block}
.page-testing .testing-results-grid{align-items:stretch}
.page-testing .testing-results-chart{
  width:100%;
  height:300px;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}
.page-testing .testing-results-chart canvas{width:100%;height:100%;display:block}
.page-testing .testing-stats-top{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:40px;
  row-gap:20px;
  margin-bottom:24px;
}
.page-testing .testing-stats-bottom{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:40px;
  margin-bottom:16px;
}
.page-testing .testing-extra-info{
  margin-top:8px;
  text-align:left;
  color:#E5E7EB;
  font-size:14px;
}
.page-testing .testing-extra-info #finalChars{color:#C4B5FD;font-weight:700}
.page-testing .testing-extra-info #finalCharsBreakdown{color:#C4B5FD}
.page-testing .testing-stat{display:flex;flex-direction:column;gap:6px}
.page-testing .testing-stat-label{color:#E5E7EB;font-size:22px;font-weight:700}
.page-testing .testing-stat-value{color:#C4B5FD;font-size:44px;font-weight:800;line-height:1.05}
.page-testing .testing-stat-sub{color:var(--muted);font-size:13px}
.page-testing .testing-extra-info{color:#E5E7EB;font-size:14px}
.page-testing .testing-results-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:40px;
  flex-wrap:wrap;
  row-gap:12px;
}
.page-testing .testing-results-btn{
  padding:8px 14px;
  border-radius:16px;
  border:none;
  background:#0f1320;
  color:#E5E7EB;
  cursor:pointer;
}
.page-testing #viewCertificate{
  background:#22D3EE;
  border:none;
  color:#0B0D14;
  font-weight:700;
}

.page-testing .yt-replay-panel{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.page-testing .yt-replay-screen{
  position:relative;
  min-height:110px;
  max-height:180px;
  overflow:auto;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(15,23,42,.58);
  line-height:1.85;
  font-size:18px;
  font-weight:600;
  letter-spacing:.01em;
}

.page-testing .yt-replay-char{
  white-space:pre;
  color:rgba(148,163,184,.58);
}

.page-testing .yt-replay-char.correct{
  color:#e2e8f0;
}

.page-testing .yt-replay-char.wrong{
  color:#f87171;
  background:rgba(248,113,113,.12);
  border-radius:4px;
}

.page-testing .yt-replay-cursor{
  position:absolute;
  top:14px;
  left:14px;
  width:2px;
  height:1.45em;
  border-radius:999px;
  background:#60a5fa;
  pointer-events:none;
  animation:blink 1s ease-in-out infinite;
}

.page-testing .yt-replay-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.page-testing .yt-replay-btn{
  padding:8px 12px;
}

.page-testing .yt-replay-speed-wrap{
  font-size:12px;
  color:rgba(148,163,184,.92);
  font-weight:700;
  margin-left:8px;
}

.page-testing .yt-replay-speed{
  min-height:34px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.6);
  color:#e2e8f0;
  font-size:13px;
  font-weight:700;
}

.page-testing .yt-replay-keyboard{
  overflow-x:auto;
  padding-bottom:4px;
}

.page-testing .yt-replay-keyboard .kb-hand-wrap,
.page-testing .yt-replay-keyboard .kb-finger-hint{
  display:none;
}
@media (max-width:980px){
  .page-testing .testing-results-grid{grid-template-columns:1fr;gap:40px}
  .page-testing .testing-stats-top{grid-template-columns:repeat(2, 1fr)}
  .page-testing .testing-stats-bottom{grid-template-columns:1fr}
}
@media (max-height:860px){
  .page-testing .testing-results-shell{
    padding:28px 32px 24px;
    max-height:92vh;
  }
  .page-testing.results-open .testing-results-page{
    padding:calc(16px + var(--topbar-offset)) 0 16px;
  }
  .page-testing .testing-results-grid{gap:32px}
  .page-testing .testing-results-chart{height:220px}
  .page-testing .testing-stats-top{
    column-gap:24px;
    row-gap:14px;
    margin-bottom:16px;
  }
  .page-testing .testing-stats-bottom{
    gap:24px;
    margin-bottom:10px;
  }
  .page-testing .testing-stat-label{font-size:18px}
  .page-testing .testing-stat-value{font-size:36px}
  .page-testing .testing-results-actions{
    margin-top:20px;
    gap:12px;
  }
  .page-testing .testing-results-btn{padding:8px 14px}
}
@media (max-height:760px){
  .page-testing.results-open .testing-results-page{
    padding:calc(12px + var(--topbar-offset)) 0 12px;
  }
  .page-testing .testing-results-shell{
    padding:22px 24px 18px;
    max-height:94vh;
  }
  .page-testing .testing-results-grid{gap:24px}
  .page-testing .testing-results-chart{height:200px}
  .page-testing .testing-stats-top{
    column-gap:20px;
    row-gap:10px;
    margin-bottom:12px;
  }
  .page-testing .testing-stats-bottom{
    gap:20px;
    margin-bottom:8px;
  }
  .page-testing .testing-stat-label{font-size:16px}
  .page-testing .testing-stat-value{font-size:32px}
  .page-testing .testing-results-actions{margin-top:16px}
  .page-testing .testing-results-btn{padding:7px 12px}
}
.page-testing.results-open .testing-results-page{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:calc(32px + var(--topbar-offset)) 0 32px;
}
.page-testing.results-open .testing-header,
.page-testing.results-open .testing-top,
.page-testing.results-open .typing-keyboard,
.page-testing.results-open .testing-countdown,
.page-testing.results-open .focus-toggle-wrap,
.page-testing.results-open .testing-panel{
  display:none;
}
.page-testing.results-open{
  max-width:none;
  width:100%;
}
.page-testing.results-open .testing-results-page{
  position:fixed;
  inset:0;
  z-index:15;
  overflow:auto;
}
.page-testing .testing-save-msg{margin-top:10px;color:var(--muted);font-size:12px}

.page-testing .result-title{
  margin:0 0 40px;
  font-size:30px;
  font-weight:800;
  color:#E5E7EB;
  letter-spacing:.01em;
  text-align:center;
}

.page-testing .modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.page-testing .action-btn{
  border:1px solid #22D3EE;
  background-color:#22D3EE;
  border-radius:12px;
  cursor:pointer;
  padding:10px 16px 10px 12px;
  transition:background-color .2s ease, border-color .2s ease, transform .12s ease;
  font-size:14px;
  color:#0B0F1A;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}
.page-testing .action-btn span{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-weight:700;
}
.page-testing .action-btn:hover{background-color:#0EA5E9;border-color:#0EA5E9}
.page-testing .action-btn:active{transform:scale(0.98)}
.page-testing .action-btn-ghost{
  background:transparent;
  border-color:#1F2937;
  color:#E5E7EB;
}
.page-testing .action-btn-ghost:hover{
  background:rgba(139,92,246,0.12);
  border-color:#8B5CF6;
}

.page-testing .result-chart{position:relative;width:100%;max-width:720px;margin:0 auto;overflow:hidden}
.page-testing .result-chart canvas{width:100%;height:200px;display:block}
.page-testing .result-chart-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;pointer-events:none}
.page-testing .chart-tooltip{
  position:fixed;
  transform:translate(-50%, -100%);
  background:#151A2E;
  border:1px solid #1F2937;
  color:#E5E7EB;
  font-size:11px;
  padding:6px 8px;
  border-radius:8px;
  pointer-events:none;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  z-index:60;
  white-space:nowrap;
}

.page-testing .testing-countdown{
  position:absolute;
  left:18px;
  top:28px;
  padding:0;
  background:transparent;
}
.page-testing .testing-countdown-time{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Courier New",monospace;
  font-size:34px;
  font-weight:500;
  color:#8B5CF6;
  letter-spacing:.02em;
}

@media (max-width:900px){
  .page-testing .testing-title{font-size:24px}
  .page-testing .testing-header-main{display:flex;flex-direction:column;align-items:center;padding-right:0}
  .page-testing .testing-source-meta{position:static;max-width:100%;align-items:center;text-align:center}
}

@media (max-width:900px), (pointer: coarse){
  .page-testing .kb-row,
  .page-testing .typing-keyboard,
  .page-testing .kb-visual,
  .page-testing .kb-hand-wrap,
  .page-testing .kb-finger-hint{
    display:none !important;
  }

  .page-testing .testing-header{
    padding-inline:8px;
  }

  .page-testing .testing-panel{
    min-height:220px;
    padding:0 0 calc(88px + env(safe-area-inset-bottom));
  }

  .page-testing.testing-started .testing-panel:focus-within{
    padding-bottom:calc(32vh + env(safe-area-inset-bottom));
  }

  .page-testing .text-line{
    padding-inline:12px;
  }

  .page-testing .words{
    justify-content:flex-start;
  }

  .page-testing .word{
    font-size:clamp(34px, 9vw, 42px);
    letter-spacing:0.02em;
  }
}

@media (max-width:760px){
  .page-testing .testing-countdown{
    position:static;
    margin:0 auto 10px;
    text-align:center;
  }
}

.page-testing.focus-mode{
  background:transparent;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-testing.focus-mode .testing-panel{
  background:transparent;
  box-shadow:none;
  border:none;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.page-testing.focus-mode .text-viewport{margin-top:0}
.page-testing.focus-mode .testing-top,
.page-testing.focus-mode .typing-keyboard,
.page-testing.focus-mode .kb-visual,
.page-testing.focus-mode .testing-countdown,
.page-testing.focus-mode #authNotice{
  display:none;
}
.page-testing.focus-mode .testing-header,
.page-testing.focus-mode-2 .testing-header,
.page-testing.focus-mode-3 .testing-header{
  display:flex;
  position:fixed;
  top:calc(var(--topbar-offset, 0px) + 16px);
  left:24px;
  right:24px;
  justify-content:flex-end;
  pointer-events:none;
  z-index:25;
}
.page-testing.focus-mode .testing-header-copy,
.page-testing.focus-mode-2 .testing-header-copy,
.page-testing.focus-mode-3 .testing-header-copy{
  display:none;
}
.page-testing.focus-mode .testing-actions,
.page-testing.focus-mode-2 .testing-actions,
.page-testing.focus-mode-3 .testing-actions{
  display:none;
}
.page-testing.focus-mode .testing-header-main,
.page-testing.focus-mode-2 .testing-header-main,
.page-testing.focus-mode-3 .testing-header-main{
  padding-right:0;
}
.page-testing.focus-mode .testing-source-meta,
.page-testing.focus-mode-2 .testing-source-meta,
.page-testing.focus-mode-3 .testing-source-meta{
  position:static;
  max-width:min(360px, 70vw);
  align-items:flex-end;
  text-align:right;
}
.page-testing.focus-mode.testing-started .focus-counter{display:block}
.page-testing.focus-mode .focus-toggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:auto;
}
.page-testing.focus-mode .text-viewport.words-mode{
  height:var(--line-h);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
}
.page-testing.focus-mode .words{
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:flex-start;
  gap:0;
}
.page-testing.focus-mode .word{font-size:44px}
.page-testing.focus-mode .text-line{display:inline-flex}
.page-testing.focus-mode .text-line{padding-inline:0}

.page-testing.focus-mode-2{
  background:transparent;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-testing.focus-mode-2 .testing-panel{
  background:transparent;
  box-shadow:none;
  border:none;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.page-testing.focus-mode-2 .text-viewport{margin-top:0}
.page-testing.focus-mode-2 .testing-top,
.page-testing.focus-mode-2 .typing-keyboard,
.page-testing.focus-mode-2 .kb-visual,
.page-testing.focus-mode-2 .testing-countdown,
.page-testing.focus-mode-2 #authNotice{
  display:none;
}
.page-testing.focus-mode-2.testing-started .focus-counter{display:block}
.page-testing.focus-mode-2 .focus-toggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:auto;
}
.page-testing.focus-mode-2 .text-viewport.words-mode{
  height:calc(var(--line-h) * 3 + var(--row-gap) * 2 + var(--lines-viewport-extra));
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
  overflow:hidden;
}
.page-testing.focus-mode-2 .words{
  flex-wrap:wrap;
  white-space:normal;
  justify-content:flex-start;
  gap:var(--row-gap);
}
.page-testing.focus-mode-2 .word{font-size:44px}
.page-testing.focus-mode-2 .text-line{
  display:block;
  width:100%;
  padding-inline:clamp(12px, 4vw, 60px);
}

.page-testing.focus-mode-3{
  background:transparent;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-testing.focus-mode-3 .testing-panel{
  background:transparent;
  box-shadow:none;
  border:none;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.page-testing.focus-mode-3 .text-viewport{margin-top:0}
.page-testing.focus-mode-3 .testing-header,
.page-testing.focus-mode-3 .testing-top,
.page-testing.focus-mode-3 .typing-keyboard,
.page-testing.focus-mode-3 .kb-visual,
.page-testing.focus-mode-3 .testing-countdown,
.page-testing.focus-mode-3 #authNotice{
  display:none;
}
.page-testing.focus-mode-3.testing-started .focus-counter{display:block}
.page-testing.focus-mode-3 .focus-toggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:auto;
}
.page-testing.focus-mode-3 .text-viewport.words-mode{
  height:clamp(120px, 20vh, 190px);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
  overflow:visible;
}
.page-testing.focus-mode-3 .text-viewport.words-mode .text-line{
  display:block;
  width:100%;
  transform:none !important;
  padding-inline:clamp(12px, 4vw, 60px);
}
.page-testing.focus-mode-3 .words{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:0;
  min-height:100%;
}
.page-testing.focus-mode-3 .word{
  display:none;
  font-size:clamp(56px, 7vw, 96px);
  line-height:1.25;
}
.page-testing.focus-mode-3 .word.active{
  display:inline-flex;
  align-items:center;
}
.page-testing.focus-mode-3 .words:not(:has(.word.active)) .word.pending:first-of-type,
.page-testing.focus-mode-3 .words:not(:has(.word.active)) .word.wrong:first-of-type{
  display:inline-flex;
  align-items:center;
}
.page-testing.testing-started.focus-mode .focus-toggle-wrap,
.page-testing.testing-started.focus-mode-2 .focus-toggle-wrap,
.page-testing.testing-started.focus-mode-3 .focus-toggle-wrap{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.page-testing.testing-started.focus-mode.focus-controls-visible .focus-toggle-wrap,
.page-testing.testing-started.focus-mode-2.focus-controls-visible .focus-toggle-wrap,
.page-testing.testing-started.focus-mode-3.focus-controls-visible .focus-toggle-wrap{
  opacity:1;
  pointer-events:auto;
}
@media (hover:none),(pointer:coarse){
  .page-testing.testing-started.focus-mode .focus-toggle-wrap,
  .page-testing.testing-started.focus-mode-2 .focus-toggle-wrap,
  .page-testing.testing-started.focus-mode-3 .focus-toggle-wrap{
    opacity:1;
    pointer-events:auto;
  }
}

.page-testing.results-open .testing-panel{display:none !important;}
.page-testing.results-open .focus-counter{display:none !important;}
.page-testing.results-open .kb-visual{display:none !important;}

/* ── Mobile Enhanced ── */
@media (max-width:900px),(pointer:coarse){
  .page-testing .testing-panel{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .page-testing .testing-actions{
    margin-top:2px;
    flex-wrap:wrap;
  }
  .page-testing .testing-top{
    order:2;
    position:static;
    background:transparent;
    border:1px solid transparent;
    border-radius:14px;
    backdrop-filter:none;
    flex-direction:column;
    margin-top:8px;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
    padding:8px;
  }
  .page-testing .testing-timer,
  .page-testing .testing-stats{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 12px;
  }
  .page-testing .testing-stats{
    font-size:12px;
  }
  .page-testing .testing-panel{
    min-height:180px;
  }
  .page-testing.testing-started .testing-panel:focus-within{
    padding-bottom:calc(44vh + env(safe-area-inset-bottom));
  }
  .page-testing.testing-started.kb-active .focus-toggle-wrap{
    display:none;
  }
}

[data-theme="light"] .page-testing .testing-top{
  background:transparent;
  border-color:transparent;
  backdrop-filter:none;
}

[data-theme="light"] .page-testing .settings-panel{
  background:rgba(255,255,255,0.96);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .page-testing .settings-row-label{
  color:#334155;
}
[data-theme="light"] .page-testing .settings-toggle-track{
  background:rgba(0,0,0,0.12);
}
[data-theme="light"] .page-testing .settings-toggle-track::after{
  background:#6366f1;
}
[data-theme="light"] .page-testing .settings-toggle-input:checked + .settings-toggle-track{
  background:rgba(99,102,241,0.25);
}
[data-theme="light"] .page-testing .settings-cycle-btn{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.1);
  color:#334155;
}

@media (max-width:760px){
  .testing-lock-card{
    display:none;
  }
  .testing-lock-title{
    font-size:clamp(1.6rem,6vw,2.4rem);
    margin-bottom:8px;
  }
  .testing-lock-subtitle{
    font-size:10px;
    margin-bottom:10px;
  }
  .testing-lock-copy{
    font-size:13px;
    margin-bottom:16px;
  }
  .testing-intro-btn{
    width:100%;
    max-width:340px;
    padding:14px 24px;
    font-size:13px;
  }
  .testing-intro-modal{
    min-height:auto;
    padding:0 0 24px;
  }
  .testing-intro-actions{
    margin-top:12px;
  }
  .page-testing .testing-title{
    font-size:20px;
  }
  .page-testing .testing-sub{
    font-size:12px;
  }
  .page-testing .word{
    font-size:clamp(26px,7.5vw,36px);
  }
  .page-testing .testing-countdown-time{
    font-size:30px;
  }
  .page-testing.results-open .testing-results-page{
    padding:calc(14px + var(--topbar-offset,64px)) 0 18px;
  }
  .page-testing .testing-results-shell{
    padding:20px 14px 24px;
    width:min(100% - 16px, 1200px);
  }
  .page-testing .result-title,
  .page-testing .yt-results-title{
    font-size:20px;
    margin-bottom:18px;
  }
  .page-testing .testing-results-grid,
  .page-testing .yt-main-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .page-testing .testing-results-chart{
    height:180px;
  }
  .page-testing .testing-stats-top{
    column-gap:12px;
    row-gap:12px;
    margin-bottom:16px;
  }
  .page-testing .testing-stat-value{
    font-size:30px;
  }
  .page-testing .testing-stat-label{
    font-size:14px;
  }
  .page-testing .testing-stats-bottom{
    gap:18px;
    margin-bottom:10px;
  }
  .page-testing .testing-results-actions,
  .page-testing .yt-actions{
    margin-top:18px;
    gap:10px;
  }
  .page-testing .testing-results-btn{
    width:100%;
    padding:12px 16px;
    text-align:center;
  }
}

@media (max-width:480px){
  .page-testing .word{
    font-size:clamp(22px,6.5vw,30px);
    padding:2px 3px;
  }
  .page-testing .testing-stats{
    font-size:11px;
    gap:6px 10px;
  }
  .page-testing .testing-countdown-time{
    font-size:26px;
  }
  .page-testing .testing-stat-value{
    font-size:26px;
  }
  .page-testing .testing-stat-label{
    font-size:12px;
  }
  .page-testing .testing-stats-top{
    grid-template-columns:repeat(3, 1fr);
    column-gap:8px;
  }
}

.page-testing .testing-title,
.page-testing .testing-sub,
.page-testing .language-btn,
.page-testing .theme-btn,
.page-testing .language-name,
.page-testing .theme-option{color:var(--testing-theme-text)}

.page-testing .language-btn,
.page-testing .checkbox-wrapper-4 .cbx-btn,
.page-testing .count-btn,
.page-testing .time-btn,
.page-testing .count-mode{
  background:var(--testing-theme-surface);
  border-color:var(--testing-theme-border);
}

.page-testing .language-dropdown,
.page-testing .theme-dropdown{
  background:var(--testing-theme-dropdown-bg);
  border-color:var(--testing-theme-border-hover);
}

.page-testing .words .word,
.page-testing .words .char{color:var(--testing-theme-word) !important}
.page-testing .words .word.pending{color:var(--testing-theme-pending) !important}
.page-testing .words .word.correct,
.page-testing .words .char.correct{color:var(--testing-theme-correct) !important}
.page-testing .words .word.wrong,
.page-testing .words .char.wrong{color:var(--testing-theme-wrong) !important}
.page-testing .char.active::after,
.page-testing .char.active-end::after{background:var(--testing-theme-caret) !important}
.page-testing .testing-countdown-time{color:#60a5fa}

.page-testing .testing-results-btn{
  border-color:var(--t-border);
  background:var(--t-surface);
  color:var(--t-text-secondary);
}
.page-testing .testing-results-btn:hover:not(:disabled){
  border-color:var(--t-border-hover);
  background:var(--t-surface-hover);
  color:var(--t-text-primary);
}

.page-testing .yt-replay-screen{border-color:var(--t-border);background:var(--t-surface);color:var(--t-text-primary)}
.page-testing .yt-replay-char{color:var(--t-text-muted)}
.page-testing .yt-replay-char.correct{color:var(--t-text-primary)}
.page-testing .yt-replay-char.wrong{color:var(--t-error-bar);background:var(--t-accent-blue-soft)}
.page-testing .yt-replay-cursor{background:var(--t-accent-blue)}
.page-testing .yt-replay-speed-wrap{color:var(--t-text-muted)}
.page-testing .yt-replay-speed{border-color:var(--t-border);background:var(--t-surface);color:var(--t-text-secondary)}

.page-testing .theme-option[data-theme="default"]{color:#dbeafe;--theme-preview-bg:#0f172a;--theme-preview-text:#e5e7eb}
.page-testing .theme-option[data-theme="olive"],.page-testing .theme-option[data-theme="olive-soft"],.page-testing .theme-option[data-theme="olive-deep"]{color:#ccd5ae;--theme-preview-bg:#2f3f2b;--theme-preview-text:#e8f0d0}
.page-testing .theme-option[data-theme="sunset"],.page-testing .theme-option[data-theme="sunset-soft"],.page-testing .theme-option[data-theme="sunset-deep"]{color:#ffd6a5;--theme-preview-bg:#582b2c;--theme-preview-text:#ffe4d6}
.page-testing .theme-option[data-theme="ocean"],.page-testing .theme-option[data-theme="ocean-soft"],.page-testing .theme-option[data-theme="ocean-deep"]{color:#8ecae6;--theme-preview-bg:#082f49;--theme-preview-text:#e6f7ff}
.page-testing .theme-option[data-theme="neon"],.page-testing .theme-option[data-theme="neon-soft"],.page-testing .theme-option[data-theme="neon-deep"]{color:#4ade80;--theme-preview-bg:#122016;--theme-preview-text:#defce9}
.page-testing .theme-option[data-theme="sakura"],.page-testing .theme-option[data-theme="sakura-soft"],.page-testing .theme-option[data-theme="sakura-deep"]{color:#f9a8d4;--theme-preview-bg:#4a1f3d;--theme-preview-text:#ffe9f4}
.page-testing .theme-option[data-theme="dusk"]{color:#c8b6ff;--theme-preview-bg:#2b2347;--theme-preview-text:#efe9ff}
.page-testing .theme-option[data-theme="mocha"]{color:#d6bfa7;--theme-preview-bg:#3a2a24;--theme-preview-text:#f7e9df}
.page-testing .theme-option[data-theme="nord"]{color:#88c0d0;--theme-preview-bg:#2e3440;--theme-preview-text:#e5edf5}
.page-testing .theme-option[data-theme="paper"]{color:#64748b;--theme-preview-bg:#f8fafc;--theme-preview-text:#334155}
.page-testing .theme-option[data-theme="mist"]{color:#7b8ca3;--theme-preview-bg:#eef2ff;--theme-preview-text:#4b5563}
.page-testing .theme-option[data-theme="peach"]{color:#d97757;--theme-preview-bg:#fff3ed;--theme-preview-text:#7c2d12}

.page-testing.testing-color-theme-olive{--testing-theme-surface:rgba(56,69,51,0.5);--testing-theme-border:rgba(121,135,119,0.85);--testing-theme-border-hover:rgba(204,213,174,0.65);--testing-theme-text:#dde5c2;--testing-theme-word:#e8f0d0;--testing-theme-pending:#a3b18a;--testing-theme-accent:#ccd5ae;--testing-theme-accent-soft:rgba(204,213,174,0.18);--testing-theme-accent-border:rgba(204,213,174,0.52);--testing-theme-dropdown-bg:rgba(47,63,43,0.96);--testing-theme-correct:#cfeccd;--testing-theme-wrong:#f8c0b8;--testing-theme-caret:#d6dfbe;--testing-theme-bg-radial1:rgba(204,213,174,0.2);--testing-theme-bg-radial2:rgba(43,58,40,0.95);--testing-theme-bg-radial3:rgba(30,43,28,0.99)}
.page-testing.testing-color-theme-sunset{--testing-theme-surface:rgba(92,45,46,0.52);--testing-theme-border:rgba(251,146,60,0.5);--testing-theme-border-hover:rgba(255,214,165,0.72);--testing-theme-text:#ffe0cd;--testing-theme-word:#ffe7d7;--testing-theme-pending:#f7b787;--testing-theme-accent:#ffd6a5;--testing-theme-accent-soft:rgba(255,214,165,0.22);--testing-theme-accent-border:rgba(255,214,165,0.6);--testing-theme-dropdown-bg:rgba(88,43,44,0.96);--testing-theme-correct:#d3efce;--testing-theme-wrong:#ffc6be;--testing-theme-caret:#ffd5ab;--testing-theme-bg-radial1:rgba(255,214,165,0.2);--testing-theme-bg-radial2:rgba(86,42,43,0.95);--testing-theme-bg-radial3:rgba(58,27,28,0.99)}
.page-testing.testing-color-theme-ocean{--testing-theme-surface:rgba(9,48,74,0.52);--testing-theme-border:rgba(56,189,248,0.5);--testing-theme-border-hover:rgba(125,211,252,0.72);--testing-theme-text:#dff4ff;--testing-theme-word:#e6f7ff;--testing-theme-pending:#7fb6cf;--testing-theme-accent:#8ecae6;--testing-theme-accent-soft:rgba(142,202,230,0.22);--testing-theme-accent-border:rgba(142,202,230,0.58);--testing-theme-dropdown-bg:rgba(8,47,73,0.96);--testing-theme-correct:#c8ecd9;--testing-theme-wrong:#f2c3c8;--testing-theme-caret:#97d3ec;--testing-theme-bg-radial1:rgba(142,202,230,0.2);--testing-theme-bg-radial2:rgba(8,45,70,0.95);--testing-theme-bg-radial3:rgba(5,29,45,0.99)}
.page-testing.testing-color-theme-neon{--testing-theme-surface:rgba(18,35,23,0.54);--testing-theme-border:rgba(74,222,128,0.5);--testing-theme-border-hover:rgba(134,239,172,0.72);--testing-theme-text:#dffce9;--testing-theme-word:#e8fdf0;--testing-theme-pending:#8fcdab;--testing-theme-accent:#4ade80;--testing-theme-accent-soft:rgba(74,222,128,0.22);--testing-theme-accent-border:rgba(74,222,128,0.58);--testing-theme-dropdown-bg:rgba(18,32,22,0.96);--testing-theme-correct:#c9efcf;--testing-theme-wrong:#f6c2cf;--testing-theme-caret:#72e29b;--testing-theme-bg-radial1:rgba(74,222,128,0.2);--testing-theme-bg-radial2:rgba(17,31,21,0.95);--testing-theme-bg-radial3:rgba(10,20,13,0.99)}
.page-testing.testing-color-theme-sakura{--testing-theme-surface:rgba(77,31,63,0.52);--testing-theme-border:rgba(244,114,182,0.5);--testing-theme-border-hover:rgba(251,207,232,0.72);--testing-theme-text:#ffe2f0;--testing-theme-word:#ffeaf5;--testing-theme-pending:#e8a8cd;--testing-theme-accent:#f9a8d4;--testing-theme-accent-soft:rgba(249,168,212,0.22);--testing-theme-accent-border:rgba(249,168,212,0.58);--testing-theme-dropdown-bg:rgba(74,31,61,0.96);--testing-theme-correct:#d5efd7;--testing-theme-wrong:#f9c0d8;--testing-theme-caret:#f7b6dd;--testing-theme-bg-radial1:rgba(249,168,212,0.2);--testing-theme-bg-radial2:rgba(72,30,59,0.95);--testing-theme-bg-radial3:rgba(48,20,38,0.99)}
.page-testing.testing-color-theme-dusk{--testing-theme-surface:rgba(50,38,82,0.5);--testing-theme-border:rgba(167,139,250,0.5);--testing-theme-border-hover:rgba(216,180,254,0.72);--testing-theme-text:#efe9ff;--testing-theme-word:#f5f0ff;--testing-theme-pending:#c4b5fd;--testing-theme-accent:#a78bfa;--testing-theme-accent-soft:rgba(167,139,250,0.22);--testing-theme-accent-border:rgba(167,139,250,0.62);--testing-theme-dropdown-bg:rgba(43,35,71,0.96);--testing-theme-correct:#bbf7d0;--testing-theme-wrong:#fecdd3;--testing-theme-caret:#c4b5fd;--testing-theme-bg-radial1:rgba(167,139,250,0.2);--testing-theme-bg-radial2:rgba(42,33,69,0.95);--testing-theme-bg-radial3:rgba(27,21,46,0.99)}
.page-testing.testing-color-theme-mocha{--testing-theme-surface:rgba(63,45,39,0.52);--testing-theme-border:rgba(191,143,112,0.5);--testing-theme-border-hover:rgba(236,196,167,0.72);--testing-theme-text:#f4e6dc;--testing-theme-word:#f7e9df;--testing-theme-pending:#d6bfa7;--testing-theme-accent:#d6bfa7;--testing-theme-accent-soft:rgba(214,191,167,0.22);--testing-theme-accent-border:rgba(214,191,167,0.62);--testing-theme-dropdown-bg:rgba(58,42,36,0.96);--testing-theme-correct:#cdeccf;--testing-theme-wrong:#ffd0c5;--testing-theme-caret:#e7c7ae;--testing-theme-bg-radial1:rgba(214,191,167,0.22);--testing-theme-bg-radial2:rgba(57,41,35,0.95);--testing-theme-bg-radial3:rgba(37,27,23,0.99)}
.page-testing.testing-color-theme-nord{--testing-theme-surface:rgba(53,64,83,0.5);--testing-theme-border:rgba(136,192,208,0.5);--testing-theme-border-hover:rgba(163,204,219,0.72);--testing-theme-text:#e5edf5;--testing-theme-word:#edf3f9;--testing-theme-pending:#a3becc;--testing-theme-accent:#88c0d0;--testing-theme-accent-soft:rgba(136,192,208,0.2);--testing-theme-accent-border:rgba(136,192,208,0.6);--testing-theme-dropdown-bg:rgba(46,52,64,0.96);--testing-theme-correct:#bde6d5;--testing-theme-wrong:#f1c9cc;--testing-theme-caret:#88c0d0;--testing-theme-bg-radial1:rgba(136,192,208,0.2);--testing-theme-bg-radial2:rgba(45,52,63,0.95);--testing-theme-bg-radial3:rgba(30,35,44,0.99)}
.page-testing.testing-color-theme-paper{--testing-theme-surface:rgba(255,255,255,0.92);--testing-theme-border:rgba(148,163,184,0.55);--testing-theme-border-hover:rgba(100,116,139,0.45);--testing-theme-text:#334155;--testing-theme-word:#1f2937;--testing-theme-pending:#94a3b8;--testing-theme-accent:#64748b;--testing-theme-accent-soft:rgba(148,163,184,0.2);--testing-theme-accent-border:rgba(100,116,139,0.48);--testing-theme-dropdown-bg:rgba(255,255,255,0.98);--testing-theme-correct:#15803d;--testing-theme-wrong:#dc2626;--testing-theme-caret:#334155;--testing-theme-bg-radial1:transparent;--testing-theme-bg-radial2:#f8fafc;--testing-theme-bg-radial3:#eef2f7}
.page-testing.testing-color-theme-mist{--testing-theme-surface:rgba(238,242,255,0.86);--testing-theme-border:rgba(148,163,184,0.58);--testing-theme-border-hover:rgba(124,140,159,0.48);--testing-theme-text:#475569;--testing-theme-word:#334155;--testing-theme-pending:#94a3b8;--testing-theme-accent:#7b8ca3;--testing-theme-accent-soft:rgba(148,163,184,0.2);--testing-theme-accent-border:rgba(124,140,159,0.5);--testing-theme-dropdown-bg:rgba(245,247,255,0.98);--testing-theme-correct:#15803d;--testing-theme-wrong:#dc2626;--testing-theme-caret:#64748b;--testing-theme-bg-radial1:rgba(191,201,222,0.25);--testing-theme-bg-radial2:#f5f7ff;--testing-theme-bg-radial3:#edf2fb}
.page-testing.testing-color-theme-peach{--testing-theme-surface:rgba(255,245,238,0.9);--testing-theme-border:rgba(245,177,136,0.56);--testing-theme-border-hover:rgba(231,146,96,0.48);--testing-theme-text:#7c2d12;--testing-theme-word:#9a3412;--testing-theme-pending:#c27050;--testing-theme-accent:#d97757;--testing-theme-accent-soft:rgba(245,177,136,0.24);--testing-theme-accent-border:rgba(217,119,87,0.5);--testing-theme-dropdown-bg:rgba(255,248,243,0.98);--testing-theme-correct:#16a34a;--testing-theme-wrong:#dc2626;--testing-theme-caret:#c2410c;--testing-theme-bg-radial1:rgba(245,177,136,0.28);--testing-theme-bg-radial2:#fff8f3;--testing-theme-bg-radial3:#fff1e7}

.page-testing.testing-color-theme-paper{--t-kb-wrap-bg:#f1f5f9;--t-kb-wrap-border:rgba(100,116,139,0.44);--t-kb-key-bg:#ffffff;--t-kb-key-border:rgba(100,116,139,0.4);--t-kb-key-color:#334155;--t-kb-grey-bg:#f8fafc;--t-kb-grey-border:rgba(100,116,139,0.44);--t-kb-grey-color:#64748b;--t-kb-space-color:#64748b}
.page-testing.testing-color-theme-mist{--t-kb-wrap-bg:#eef2ff;--t-kb-wrap-border:rgba(124,140,159,0.44);--t-kb-key-bg:#ffffff;--t-kb-key-border:rgba(124,140,159,0.38);--t-kb-key-color:#475569;--t-kb-grey-bg:#f5f7ff;--t-kb-grey-border:rgba(124,140,159,0.44);--t-kb-grey-color:#64748b;--t-kb-space-color:#64748b}
.page-testing.testing-color-theme-peach{--t-kb-wrap-bg:#fff1e7;--t-kb-wrap-border:rgba(217,119,87,0.44);--t-kb-key-bg:#ffffff;--t-kb-key-border:rgba(217,119,87,0.38);--t-kb-key-color:#9a3412;--t-kb-grey-bg:#fff8f3;--t-kb-grey-border:rgba(217,119,87,0.44);--t-kb-grey-color:#b45309;--t-kb-space-color:#b45309}

@media (max-width:760px){
  .page-testing .theme-dropdown{width:min(420px, calc(100vw - 24px));grid-template-columns:1fr;max-height:min(60vh, 460px)}
}