/* ---- Big test box: 90vw wide, 80vh tall on desktop ---- */
  .parent{
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}
  #typing-app{
    position: relative;
    width: min(80vw, 1500px);
    height: min(80vh, 820px);
    min-height: 420px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}
  #typing-area{ position:relative; overflow:hidden; cursor:text; background:var(--bt-bg); border:1px solid var(--bt-border); flex:1 1 auto; min-height:0; }
  #text-scroll{ position:relative; overflow:hidden; height:100%; scroll-behavior:smooth; }
  #text-display{ font-size:1.75rem; line-height:1.8; letter-spacing:.01em; user-select:none; }
  #typing-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; outline:none; resize:none; cursor:text; background:transparent; }
  #start-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:.75rem; transition:opacity .3s ease; pointer-events:none; }
  .active-word{ background-color:rgba(107,56,212,0.12); border-radius:4px; padding:0 2px; }
  .correct{ color:var(--bt-primary); }
  .incorrect{ color:var(--bt-error); text-decoration:underline; text-decoration-color:rgba(186,26,26,.5); }
  .untyped{ color:#8b899c; }
  #progress-bar{ transition:width .3s ease; height:6px; }

  @media (max-width:768px){
    #typing-app{ width:96vw; height:62vh; min-height:380px; }
    #text-display{ font-size:1.2rem; line-height:1.7; }
  }

  #result-modal{ position:fixed; inset:0; z-index:1050; display:none; align-items:center; justify-content:center; padding:1rem; }
  #result-modal.is-visible{ display:flex; }
  #modal-backdrop{ position:absolute; inset:0; background:rgba(19,27,46,.45); backdrop-filter:blur(2px); }
  .stat-box{ background:var(--bt-surface-alt); border-radius:14px; padding:1rem; text-align:center; }

  .accordion-button:not(.collapsed){ color:var(--bt-primary); background-color:var(--bt-surface-alt); box-shadow:none; }
  .accordion-button:focus{ box-shadow:none; border-color:var(--bt-border); }

  footer a{ color:var(--bt-text-muted); text-decoration:none; }
  footer a:hover{ color:var(--bt-primary); }
  .section-py{ padding:4rem 0; }
  @media (max-width:768px){ .section-py{ padding:2.5rem 0; } }

  .hero-1min{ background:var(--bt-surface); border-bottom:1px solid var(--bt-border); padding:2rem 0 2.5rem; }
  .benchmark-row{ display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px dashed var(--bt-border); }
  .benchmark-row:last-child{ border-bottom:none; }