*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f4ef;color:#181a16;font-family:Inter,ui-sans-serif,system-ui,sans-serif;overflow-x:hidden}button,textarea{font:inherit}.topbar{width:min(1160px,calc(100% - 48px));height:78px;margin:auto;border-bottom:1px solid #d8d8d0;display:flex;align-items:center;gap:34px}.brand{font:700 21px Georgia,serif;letter-spacing:-.06em;color:inherit;text-decoration:none}.brand span{font-style:italic}.topbar nav{margin-left:auto;display:flex;gap:28px}.topbar nav a{font-size:12px;color:#777970;text-decoration:none}.topbar nav a:hover{color:#181a16}.theme{background:none;border:0;color:#777970;font-size:20px;cursor:pointer}.hero{text-align:center;padding:64px 16px 28px}.eyebrow,.section-label{font-size:10px;letter-spacing:.2em;color:#888a81}.eyebrow{margin:0 0 24px}.hero h1{font:400 clamp(34px,5vw,58px)/1.02 Georgia,serif;letter-spacing:-.05em;margin:0}.hero h1 em,h2 em{font-style:italic}.lede{color:#777970;font-size:14px;line-height:1.6;margin:16px 0 20px}.hero-cta{display:inline-flex;gap:18px;align-items:center;color:#181a16;text-decoration:none;font-size:12px;border-bottom:1px solid #181a16;padding-bottom:7px}.hero-cta span{font-size:17px}
/* Token banner (kontrak & harga) di atas hero — flat, solid, mengikuti lebar konten */
.token-banner{width:min(1000px,calc(100% - 40px));margin:20px auto 0;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;justify-content:center;font-size:12px;color:#4b4d45}
.token-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#888a81}
.token-banner .token-addr{border:0;background:#fff;border-bottom:1px solid #c8ef67;border-radius:0;padding:0 0 1px;font:12px ui-monospace,monospace;color:#4b4d45;cursor:copy}
.token-banner .token-addr:hover{color:#181a16;border-bottom-color:#181a16}
.token-banner .token-sep{color:#c9cac0}
.token-banner .token-price{font:600 12px ui-monospace,monospace;color:#6a872c}
.token-banner .token-rate{font:12px ui-monospace,monospace;color:#777970}
.token-banner small{font-size:10px;color:#92938a;letter-spacing:.08em;text-transform:uppercase}
body.dark .token-banner .token-addr{background:#1c1d19;color:#e8e9df}
body.dark .token-banner .token-addr:hover{color:#f3f2e9}
body.dark .token-banner .token-price{color:#c8ef67}
body.dark .token-banner .token-rate{color:#a7a89f}.challenge,.keyboard-section,.leaders,.demo,.about{width:min(1000px,calc(100% - 40px));margin:auto}.about{margin-top:72px}.about .section-label{margin-bottom:0}.section-label{border-top:1px solid #d8d8d0;padding-top:13px;display:flex;justify-content:space-between}.challenge-bar{display:flex;justify-content:space-between;align-items:center;margin-top:35px}.modes{display:flex;gap:24px}.mode,.restart{border:0;background:none;padding:0;color:#85867e;font-size:12px;cursor:pointer}.mode.active{color:#181a16;font-weight:600}.restart kbd{font:10px ui-monospace;color:#999;margin-left:8px}.stats{display:flex;gap:48px;margin:25px 0}.stats div{display:flex;gap:6px;align-items:baseline}.stats b{font:400 clamp(22px,2.5vw,30px) Georgia,serif}.stats small{color:#888a81;text-transform:uppercase;font-size:10px;letter-spacing:.1em}.typing-card{background:#fff;border:1px solid #e7e6df;padding:38px 42px 17px;box-shadow:0 18px 40px #40442b0b;cursor:text}.prompt{font:clamp(19px,2.6vw,30px)/1.45 Georgia,serif;min-height:142px;letter-spacing:-.025em;overflow-wrap:normal;word-break:normal;white-space:pre-wrap}.typing-card{overflow:hidden}.prompt span.correct{color:#181a16}.prompt span.pending{color:#b9bab2}.prompt span.current{background:#c8ef67;color:#283513;border-radius:2px}.prompt span.wrong{color:#bf5c52;text-decoration:underline}.typing-card textarea{position:absolute;opacity:0;width:1px;height:1px}.typing-foot{border-top:1px solid #deded6;padding-top:13px;display:flex;justify-content:space-between;color:#92938a;font-size:11px}.keyboard-wrap{margin-top:35px;background:#e8e8e1;border:1px solid #d6d6cd;border-radius:12px;padding:22px;box-shadow:inset 0 1px #fff;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c9cac0 transparent}.keyboard-wrap::-webkit-scrollbar{height:6px}.keyboard-wrap::-webkit-scrollbar-thumb{background:#c9cac0;border-radius:3px}.keyboard-wrap::-webkit-scrollbar-track{background:transparent}.keyboard{display:flex;flex-direction:column;gap:3px;user-select:none;width:100%;min-width:720px;container-type:inline-size;container-name:kb}.key-row{display:grid;grid-template-columns:repeat(160,minmax(0,1fr));gap:0;width:100%;height:clamp(26px,7.2cqw,58px);align-items:stretch}.key{position:relative;flex:1 1 0;min-width:0;height:100%;aspect-ratio:auto;border:3px solid #d8d7cf;border-radius:5px;background:#f8f8f3;background-clip:padding-box;color:#4b4d45;font:600 clamp(6px,1.4cqw,12px) ui-monospace,monospace;cursor:pointer;box-shadow:none;transition:.08s}.key[style*="--span"]{flex-grow:var(--span)}.key.active,.key:active{transform:translateY(2px);box-shadow:none;background:#c8ef67;border-color:#9fca43;color:#273513}.key::after{content:"";position:absolute;inset:20%;border-radius:50%;background:#c8ef67;filter:blur(10px);opacity:0;pointer-events:none}.key.active::after{animation:keyflash .45s ease-out}@keyframes keyflash{0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(2.2)}}#leaders{padding-top:150px}.leaders-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.leaders-head h2{font:400 clamp(38px,5vw,58px)/1 Georgia,serif;letter-spacing:-.04em;margin:28px 0 0}.leaders-head p{color:#777970;font-size:14px;line-height:1.6;margin:28px 0 0;text-align:right}.leader-controls{display:flex;justify-content:flex-end;align-items:center;margin:28px 0 14px}.leader-controls button{border:1px solid #d1d2c9;background:#fff;padding:8px 12px;color:#4b4d45;font-size:12px;cursor:pointer;border-radius:6px}.leader-controls button:hover{border-color:#9fca43}.leader-tabs{display:inline-flex;margin:28px 0 14px;border:1px solid #d1d2c9;border-radius:999px;background:#fff;overflow:hidden}.leader-tab{border:0;background:none;color:#4b4d45;font-size:12px;padding:8px 18px;cursor:pointer;transition:.15s}.leader-tab+.leader-tab{border-left:1px solid #d1d2c9}.leader-tab:hover{color:#273513;background:#f5f6ec}.leader-tab.active{background:#eef3d8;color:#3d5410;font-weight:600}.leader-loading{color:#92938a;font-size:13px;padding:20px 4px}.leader-table{background:#fff;border:1px solid #e7e6df;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px #40442b0b}.leader-row{display:grid;grid-template-columns:56px 44px 1fr 86px 96px;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #efeee7;font-size:13px}.leader-row.header{background:#f1f1ea;border-top:0;color:#888a81;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.leader-list{max-height:480px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9cac0 transparent}.leader-list::-webkit-scrollbar{width:8px}.leader-list::-webkit-scrollbar-thumb{background:#c9cac0;border-radius:4px}.leader-list::-webkit-scrollbar-track{background:transparent}.leader-row.header{position:sticky;top:0;z-index:1}.leader-row:not(.header):hover{background:#fafaf4}.leader-rank{font:700 13px ui-monospace,monospace;color:#4b4d45}.leader-row.top1 .leader-rank,.leader-row.top2 .leader-rank,.leader-row.top3 .leader-rank{color:#6a872c}.leader-avatar{width:32px;height:32px;border-radius:8px;object-fit:cover;background:#eef0e4;border:1px solid #e2e3d9}.leader-avatar-fallback{display:grid;place-items:center;font:700 13px Georgia,serif;color:#6a872c}.leader-row .typist{min-width:0}.leader-name{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.leader-x{display:block;color:#92938a;font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-name{color:inherit;text-decoration:none;border-bottom:1px solid #c8ef67}.leader-name:hover{color:#6a872c}.leader-wpm{font:700 15px ui-monospace,monospace}.leader-acc,.leader-time{color:#4b4d45;font-variant-numeric:tabular-nums}.empty-leaderboard{color:#92938a;font-size:13px;padding:20px 4px}.empty-leaderboard[hidden]{display:none}.demo{padding:150px 0;display:grid;grid-template-columns:1fr 1fr;gap:80px}.demo-box{display:flex;flex-direction:column;gap:14px}.demo-box textarea{height:150px;border:1px solid #d1d2c9;background:#fff;padding:18px;resize:none;outline:0}.demo-box textarea:focus{border-color:#9fca43}.demo-box button{background:#c8ef67;border:0;padding:14px;text-align:left;cursor:pointer}.about{padding-bottom:110px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}.steps article{border:1px solid #d8d8d0;border-radius:12px;padding:18px 18px 20px;min-height:176px;background:#fafaf6}.steps b{display:block;font:20px Georgia,serif;color:#8f927f;margin-bottom:20px}.steps h3{font:16px Georgia,serif;line-height:1.2;margin:0 0 9px}.steps p{color:#777970;font-size:13px;line-height:1.55;margin:0;max-width:26ch}body.dark .steps article{background:#242620;border-color:#3b3d35}.steps article:hover{border-color:#9fca43}footer{width:min(1160px,calc(100% - 48px));border-top:1px solid #d8d8d0;padding:22px 0 30px;margin:auto;display:flex;justify-content:space-between;color:#92938a;font-size:11px}@media(max-width:650px){.topbar{width:calc(100% - 28px);gap:16px}.topbar nav{gap:12px}.theme{font-size:18px;padding:1px 2px;margin-right:-2px}.hero{padding:90px 16px}.challenge,.leaders,.demo,.about{width:calc(100% - 24px)}.typing-card{padding:20px 14px 12px}.prompt{line-height:1.5;min-height:104px}.stats{gap:22px;margin:16px 0}.typing-foot{flex-wrap:wrap;gap:6px}.challenge-dialog .stats{gap:18px;margin:10px 0}.leader-row{grid-template-columns:24px 28px 1fr 44px 58px;gap:6px;padding:10px;font-size:12px}.leader-row.header{letter-spacing:.06em}.leader-avatar{width:24px;height:24px;border-radius:6px}.keyboard-wrap{padding:6px}.challenge-actions{flex-direction:column;align-items:stretch;gap:10px}.keyboard-note{font-size:11px}.leaders-head,.demo{display:block}.leaders-head p{margin-top:24px}.demo{padding:100px 0}.demo-box{margin-top:35px}.steps{grid-template-columns:1fr;gap:28px}footer{width:calc(100% - 28px);gap:20px;line-height:1.5}}body.dark{background:#1c1d19;color:#f3f2e9}body.dark .topbar,body.dark .section-label,body.dark .leader-table,body.dark .leader-row,body.dark footer,body.dark .typing-foot{border-color:#3b3d35}body.dark .topbar nav a,body.dark .lede,body.dark .leaders-head p,body.dark .stats small,body.dark .typing-foot,body.dark footer{color:#a7a89f}body.dark .typing-card,body.dark .demo-box textarea{background:#282a25;border-color:#3b3d35;color:#f3f2e9}body.dark .leader-table{background:#282a25;border-color:#3b3d35}body.dark .leader-row{border-color:#3b3d35;color:#f3f2e9}body.dark .leader-row.header{background:#22241f;color:#a7a89f}body.dark .leader-row:not(.header):hover{background:#22241f}body.dark .leader-rank{color:#c8ef67}body.dark .leader-avatar{background:#353832;border-color:#4a4d43}body.dark .leader-controls button{background:#282a25;border-color:#4a4d43;color:#e8e9df}body.dark .leader-tabs{background:#282a25;border-color:#4a4d43}body.dark .leader-tab{color:#e8e9df}body.dark .leader-tab+.leader-tab{border-left-color:#4a4d43}body.dark .leader-tab.active{background:#c8ef67;color:#273513}body.dark .keyboard-wrap{background:#292b26;border-color:#44463e}body.dark .key{background:#353832;border-color:#4a4d43;color:#e8e9df}body.dark .key.active{background:#c8ef67;color:#273513}body.dark .hero-cta,body.dark .mode.active{color:#f3f2e9}.keyboard-section{padding-top:10px;overflow:clip}.keyboard-wrap{margin-top:18px}.keyboard-note{color:#92938a;font-size:12px;margin:12px 2px 0}.challenge-modal[hidden]{display:none}.challenge-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px}.challenge-modal .modal-backdrop{position:absolute;inset:0;background:#171914b8;backdrop-filter:blur(5px)}.challenge-dialog{width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto}.challenge-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.challenge-actions .ghost{background:none;border:1px solid #d1d2c9;padding:8px 14px;color:#777970;font-size:12px;cursor:pointer;border-radius:6px}body.challenge-open{overflow:hidden}.challenge-dialog{width:min(1160px,59vw);padding:28px 40px 26px;margin:auto}@media(max-width:700px){.challenge-dialog{padding:18px 14px 14px}}.keyboard-wrap-modal{margin-top:18px;padding:22px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c9cac0 transparent}.keyboard-wrap-modal::-webkit-scrollbar{height:6px}.keyboard-wrap-modal::-webkit-scrollbar-thumb{background:#c9cac0;border-radius:3px}.keyboard-wrap-modal{container-type:inline-size}.keyboard-wrap-modal .key-row{height:clamp(26px,7.2cqw,58px)}.keyboard-wrap-modal .key{font:600 clamp(6px,1.4cqw,12px) ui-monospace,monospace}@media(max-width:700px){.keyboard-wrap-modal .key{border-width:2px}.keyboard-wrap-modal{padding:10px 6px}}}.challenge-dialog .stats{gap:32px;margin:14px 0}.challenge-dialog .typing-card{padding:26px 30px 14px}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}footer a:hover{color:#181a16;border-bottom-color:#c8ef67}body.dark footer a:hover{color:#f3f2e9}

/* Large desktop: give the live keyboard more room on wide screens. */
@media (min-width: 1441px) {
  .keyboard-section {
    width: min(1320px, calc(100% - 80px));
  }
  .keyboard-section .keyboard-wrap {
    padding: 28px;
  }
  .keyboard-section .keyboard {
    min-width: 960px;
  }
  .keyboard-section .key-row {
    height: clamp(40px, 7.2cqw, 76px);
  }
  .keyboard-section .key {
    font-size: clamp(8px, 1.4cqw, 16px);
  }
}



/* The label and note align with the other page sections; the frame may be wider. */
.keyboard-label-wrap,
.keyboard-note {
  width: min(1000px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
.keyboard-label-wrap {
  margin-top: 0;
}
.keyboard-section {
  width: min(1000px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  padding: 18px;
  background: #f5f4ef;
}
.keyboard-section .keyboard-wrap {
  margin-top: 0;
}
.keyboard-note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: calc(100% - 40px);
  min-height: 38px;
  padding: 0 18px;
  color: #3d5410;
  background: #eef3d8;
  border: 1px solid #c8ef67;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  margin: 14px auto 0;
  box-shadow: 0 5px 18px rgba(94, 125, 35, .12);
}
.keyboard-note::before {
  content: '↳';
  margin-right: 9px;
  color: #7b9d2d;
  font-size: 16px;
}
.keyboard-note::after {
  content: '↵';
  margin-left: 9px;
  color: #7b9d2d;
  font-size: 16px;
}
body.dark .keyboard-section {
  border-color: #3b3d35;
  background: #1c1d19;
}
body.dark .keyboard-note {
  color: #273513;
  background: #c8ef67;
  border-color: #b8df55;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
}
@media (max-width: 650px) {
  .keyboard-note {
    max-width: calc(100% - 24px);
    min-height: 34px;
    padding: 0 12px;
    font-size: 9px;
    letter-spacing: .05em;
  }
  .keyboard-note::before,
  .keyboard-note::after {
    font-size: 14px;
  }
}
@media (min-width: 1441px) {
  .keyboard-section {
    width: min(1320px, calc(100% - 80px));
  }
}