.tt-app{--fg:#1e293b;--mut:#64748b;--line:#e2e8f0;--pri:#2563eb;max-width:920px;margin:20px auto;padding:20px;background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:14px;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Bengali","Nirmala UI","Vrinda","Kalpurush",sans-serif;box-sizing:border-box;position:relative;line-height:1.5}
.tt-app *{box-sizing:border-box}
.tt-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.tt-title{margin:0;font-size:22px;color:var(--fg)}
.tt-head-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tt-total{font-weight:600;color:#b45309;margin-left:4px}
.tt-btn{border:1px solid var(--line);background:#f8fafc;color:var(--fg);padding:7px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-family:inherit}
.tt-btn:hover{background:#eef2f7}
.tt-btn.on,.tt-btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.tt-note{display:none;margin:0 0 10px;padding:8px 12px;background:#fef9c3;border-radius:8px;font-size:13px}
@media (hover:none){.tt-note{display:block}}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tt-card{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 14px 12px 50px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;color:var(--fg)}
.tt-card:hover:not(:disabled){border-color:var(--pri);box-shadow:0 2px 10px rgba(37,99,235,.15)}
.tt-card.lock{opacity:.55;cursor:not-allowed}
.tt-num{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.tt-ct{font-weight:600;font-size:15px}
.tt-ck{font-size:12px;color:var(--mut)}
.tt-st{color:#f59e0b;letter-spacing:2px;font-size:15px}
.tt-ltop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tt-ltitle{font-weight:600;font-size:16px;flex:1;text-align:center}
.tt-stats{display:flex;gap:10px;margin-bottom:10px}
.tt-stat{flex:1;text-align:center;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px}
.tt-stat b{display:block;font-size:22px}
.tt-stat span{font-size:12px;color:var(--mut)}
.tt-bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
.tt-bar i{display:block;height:100%;width:0;background:#22c55e;transition:width .15s}
.tt-text{font-size:30px;line-height:1.9;padding:16px 18px;border:2px solid var(--line);border-radius:12px;background:#fff;outline:none;white-space:pre-wrap;word-break:break-word;min-height:90px}
.tt-text:focus{border-color:var(--pri)}
.tt-c{color:#94a3b8;border-radius:4px}
.tt-c.done{color:#16a34a}
.tt-c.cur{background:#dbeafe;color:var(--fg)}
.tt-c.err{background:#fecaca}
.tt-c.sp{display:inline-block;min-width:.45em}
.tt-hint{text-align:center;margin:10px 0 0;min-height:22px;font-size:14px;color:var(--mut)}
.tt-hint.run{color:var(--pri);font-weight:600}
.tt-kb{display:flex;flex-direction:column;gap:4px;margin-top:10px;user-select:none}
.tt-row{display:flex;gap:4px;justify-content:center}
.tt-key{flex:var(--w,1) 1 0;min-width:0;height:46px;border:1px solid #cbd5e1;border-radius:6px;background:var(--fl,#f1f5f9);position:relative;display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform .08s,background .08s}
.tt-key .s{position:absolute;top:1px;left:5px;font-size:10px;color:var(--mut)}
.tt-key .sm{font-size:11px;color:var(--mut)}
.tt-key.next{background:var(--fc,#93c5fd);border-color:#1e293b;box-shadow:0 0 0 2px #1e293b;transform:translateY(-1px);z-index:1}
.tt-key.ok{background:#86efac}
.tt-key.bad{background:#f87171}
.tt-row:last-child .tt-key{max-width:55%}
.tt-ov{position:absolute;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;border-radius:14px;z-index:5}
.tt-modal{background:#fff;padding:26px 30px;border-radius:14px;text-align:center;max-width:90%;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.tt-modal h3{margin:0 0 6px}
.tt-big{font-size:38px;color:#f59e0b;letter-spacing:6px}
.tt-mbtn{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
@media (max-width:600px){
  .tt-app{padding:12px}
  .tt-text{font-size:22px;padding:12px}
  .tt-key{height:32px;font-size:12px}
  .tt-key .s{font-size:8px;left:3px}
  .tt-stat b{font-size:18px}
}
.tt-sel{border:1px solid var(--line);background:#f8fafc;color:var(--fg);padding:6px 8px;border-radius:8px;font-size:13px;font-family:inherit}
.tt-intro{border:2px solid var(--line);border-radius:12px;padding:14px;background:#fff;text-align:center}
.tt-cap{font-size:22px;font-weight:600;min-height:34px;margin-bottom:6px;color:var(--pri)}
.tt-tip{margin:12px 0 0;color:var(--mut);font-size:14px}
.tt-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.tt-video iframe,.tt-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.tt-hands{display:block;width:100%;max-width:420px;margin:10px auto 0}
.tt-intro + .tt-mbtn{margin-top:14px}
@media (max-width:600px){.tt-cap{font-size:17px}}
/* standalone direct-link page */
body.tt-page{margin:0;background:#f1f5f9}
body.tt-page .tt-app{margin:0 auto;border-radius:0;border-top:0;border-bottom:0;min-height:100vh}
/* fullscreen */
.tt-app:fullscreen{max-width:none;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:auto;padding:24px 5vw;background:#fff}
.tt-app:-webkit-full-screen{max-width:none;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:auto;padding:24px 5vw;background:#fff}
.tt-app.tt-fake{position:fixed;inset:0;z-index:2147483000;max-width:none;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:auto;padding:24px 5vw;background:#fff}
.tt-app:fullscreen .tt-text,.tt-app.tt-fake .tt-text{font-size:clamp(28px,3.4vw,46px)}
.tt-app:-webkit-full-screen .tt-text{font-size:clamp(28px,3.4vw,46px)}
.tt-app:fullscreen .tt-key,.tt-app.tt-fake .tt-key{height:clamp(44px,6.5vh,72px)}
.tt-app:-webkit-full-screen .tt-key{height:clamp(44px,6.5vh,72px)}
.tt-app:fullscreen .tt-ov,.tt-app.tt-fake .tt-ov{position:fixed}
.tt-app:-webkit-full-screen .tt-ov{position:fixed}
.tt-fs{font-size:16px;line-height:1}