/* q7m4z.css */
:root{
  --bg:#eef4f8;
  --text:#172033;
  --muted:#5f6f85;
  --line:#cad8e4;
  --accent:#2f67ff;
  --accent-soft:#dfe9ff;
  --good:#16a34a;
  --bad:#dc2626;
  --yellow:#f6df4b;
  --paper:#f8fbfd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%}
body{
  font-family:"Times New Roman", Times, serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button,select,input{font:inherit}
button,select{cursor:pointer}
.app{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto;
  padding:7vh 0 70px;
}
.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;white-space:nowrap}
.brand-logo{display:block;width:auto;height:54px;max-width:min(310px,48vw);object-fit:contain}
.live-stats{display:flex;align-items:center;gap:30px}
.stat{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.stat-label{
  color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
}
.stat-value{font-size:20px;font-weight:700;letter-spacing:-.03em;min-width:30px}
.restart-btn{
  width:38px;height:38px;border:0;border-radius:50%;background:transparent;
  display:grid;place-items:center;color:var(--muted);transition:.15s ease;
}
.restart-btn:hover{background:rgba(23,32,51,.06);color:var(--text);transform:rotate(-18deg)}
.typing-zone{padding-top:42px;padding-bottom:70px;border-bottom:1px solid var(--line)}
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:22px;color:var(--muted);font-size:13px;
}
.summary strong{color:var(--text);font-weight:650}
.selects{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.select-wrap{display:inline-flex;align-items:center;gap:8px}
.select-label{
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
}
.simple-select{
  appearance:none;-webkit-appearance:none;
  border:1px solid rgba(132,145,163,.36);
  background-color:rgba(255,255,255,.40);
  color:var(--text);border-radius:10px;outline:none;
  padding:8px 34px 8px 12px;font-size:13px;font-weight:650;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.simple-select:hover{border-color:rgba(47,103,255,.48);background-color:rgba(255,255,255,.64)}

.simple-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,103,255,.10)}

#words-container{
  position:relative;
  width:min(78%,1000px);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  height:calc(3.36em + 24px); /* 2 baris + ruang bingkai */
  padding:12px 16px;
  overflow:hidden;
  outline:none;
  cursor:text;
  clip-path:inset(0);
  background:#fff;
  border:2px solid #111;
  border-radius:0;
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 5px #111;
  font-family:"Times New Roman", Times, serif;
  font-size:clamp(23px,2.05vw,30px);
  line-height:1.68;
  letter-spacing:0;
  word-spacing:0;
  font-weight:400;
  font-kerning:none;
  font-variant-ligatures:none;
  text-rendering:geometricPrecision;
  user-select:none;
  overflow-anchor:none;
}

#words{
  width:100%;
  height:100%;
  transform:translateY(0);
  transition:none;
  will-change:transform;
}
#words-container:focus-visible{box-shadow:0 0 0 3px rgba(47,103,255,.10);border-radius:8px}
#words-container.rtl{
  direction:rtl;
  text-align:right;
  font-family:"Times New Roman", Times, serif;
  font-size:clamp(28px,2.8vw,38px);
  line-height:1.74;
  letter-spacing:0;
  word-spacing:.06em;
  font-weight:400;
}
#words-container.rtl .word{
  display:inline-block;
  position:relative;
  margin:0 0 0 .42em;
  padding:0;
  color:#111827;
  opacity:1;
  letter-spacing:0;
}
.word.end-current::after{
  content:"";
  position:absolute;
  right:-2px;
  top:.10em;
  width:2px;
  height:1.08em;
  background:#f2f65a;
  border-radius:1px;
}
#words-container.rtl .word.end-current::after{
  right:auto;
  left:-2px;
}
.word{
  display:inline-block;
  position:relative;
  margin:0 .52em 0 0;
  padding:0;
  color:var(--text);
  opacity:1;
  border-radius:1px;
  white-space:nowrap;
}
.letter{position:relative;display:inline-block;color:#111827;opacity:1;transition:color .07s,background-color .07s;vertical-align:baseline}
.letter.correct{color:#7f8793}
.letter.incorrect{color:#dc2626}
.letter.incorrect.extra{
  position:relative;
  display:inline-block;
  text-decoration:underline;
  text-underline-offset:5px;
  pointer-events:none;
}
.letter.current{
  color:#111827 !important;
  background:#f2f65a;
  border-radius:1px;
  padding:0;
}
.letter.current::before{
  display:none;
}
.letter.missed{
  color:var(--bad);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
}

/* Results: inline, not popup */
.results{
  display:none;
  margin-top:58px;
  padding-top:38px;
  border-top:1px solid var(--line);
}
.results.show{display:block}
.results-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;
}
.results-kicker{
  color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
}
.results h2{margin:5px 0 0;font-size:26px;letter-spacing:-.035em}
.results-sub{margin:6px 0 0;color:var(--muted);font-size:13px}
.retry-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.45);color:var(--text);
  border-radius:10px;padding:9px 13px;font-weight:650;font-size:13px;
}
.retry-btn:hover{border-color:rgba(47,103,255,.4);background:white}
.result-metrics{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:34px;
}
.metric{padding:17px 16px;border-right:1px solid var(--line)}


/* FingerWPM typing privacy veil: hide the prompt until the user taps the board. */
#words-container.typing-privacy-locked{
  cursor:pointer;
}
#words-container.typing-privacy-locked #words{
  /* Blur the actual typing board while locked; keep the board visible, never cover it. */
  filter:blur(6px);
  opacity:.72;
  pointer-events:none;
  user-select:none;
}
#words-container.typing-privacy-locked::after{
  content:"Tap to start typing";
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--muted);
  font-size:15px;
  font-weight:750;
  letter-spacing:.02em;
  border-radius:8px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:none;
  text-shadow:0 1px 10px var(--bg);
}
body.theme-dark #words-container.typing-privacy-locked::after{
  background:transparent;
}


/* FingerWPM v24: the complete typing text is rendered by one HiDPI Canvas. */
#words{
  position:relative;
  width:100%;
  height:100%;
  transform:none !important;
  contain:layout paint;
}
#typing-board-canvas{
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  pointer-events:none;
  user-select:none;
  isolation:isolate;
}

/* FingerWPM performance pass v17: smooth same-origin navigation and cheaper below-fold paint. */
@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:ease-out}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:0s}}
.site-footer,.promo-video{content-visibility:auto;contain-intrinsic-size:1px 520px}


@media(max-width:900px){
  #words-container{
    width:calc(100% - 18px);
    padding-left:12px;
    padding-right:12px;
  }
}