/* ============================================================
   FreeStenoHub — Touch Typing Tutor V2
   Complete new design + responsive mobile
============================================================ */

:root{
    --tt-navy:#19243A;
    --tt-dark:#101827;
    --tt-purple:#4F329A;
    --tt-purple2:#6D50C7;
    --tt-pink:#E72D76;
    --tt-blue:#376BD1;
    --tt-green:#168A59;
    --tt-amber:#C48713;
    --tt-red:#D7485F;
    --tt-bg:#F8F7FB;
    --tt-white:#FFFFFF;
    --tt-border:#E8E4EF;
    --tt-text:#263149;
    --tt-muted:#747490;
    --tt-shadow:0 16px 44px rgba(25,36,58,.08);
    --tt-shadow-sm:0 8px 24px rgba(25,36,58,.055);
}

.tt2-page{
    min-height:100vh;
    padding:28px 0 60px;
    overflow-x:clip;
    color:var(--tt-text);
    background:
        radial-gradient(circle at 5% 0%,rgba(79,50,154,.07),transparent 26rem),
        radial-gradient(circle at 96% 10%,rgba(231,45,118,.045),transparent 25rem),
        linear-gradient(180deg,#FCFBFD,var(--tt-bg));
}

.tt2-page *{box-sizing:border-box}
.tt2-shell{max-width:1500px}

/* ================= HERO ================= */

.tt2-hero{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:14px;
}

.tt2-hero-copy{
    min-height:300px;
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    color:#fff;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 15%,rgba(231,45,118,.22),transparent 18rem),
        linear-gradient(135deg,var(--tt-dark),#25244E 58%,var(--tt-purple));
    border-radius:24px;
    box-shadow:var(--tt-shadow);
}

.tt2-hero-copy::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-110px;
    bottom:-150px;
    border-radius:50%;
    border:36px solid rgba(255,255,255,.045);
}

.tt2-eyebrow{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    color:#EEE8F8;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    font-size:16px;
    font-weight:850;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.tt2-hero-copy h1{
    position:relative;
    z-index:1;
    max-width:800px;
    margin:16px 0 10px;
    color:#fff;
    font-size:clamp(34px,3.8vw,52px);
    line-height:1.03;
    letter-spacing:-1.5px;
    font-weight:900;
}

.tt2-hero-copy p{
    position:relative;
    z-index:1;
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:16px;
    line-height:1.65;
}

.tt2-hero-actions{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:24px;
}

.tt2-btn{
    min-height:43px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 15px;
    border-radius:11px;
    text-decoration:none!important;
    font-size:16px;
    font-weight:800;
}

.tt2-btn-primary{
    color:#fff!important;
    background:linear-gradient(135deg,var(--tt-purple2),var(--tt-pink));
    box-shadow:0 9px 20px rgba(79,50,154,.22);
}

.tt2-btn-light{
    color:#fff!important;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
}

/* access card */
.tt2-access-card{
    min-height:300px;
    padding:24px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--tt-border);
    border-radius:24px;
    box-shadow:var(--tt-shadow-sm);
}

.tt2-access-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    color:var(--tt-muted);
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:850;
}

.tt2-access-head i{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    color:var(--tt-purple);
    background:#F0EBFA;
    border-radius:11px;
}

.tt2-access-badge{
    margin-top:22px;
    padding:12px 14px;
    color:var(--tt-purple);
    background:#F2EDFA;
    border:1px solid #E2D9F3;
    border-radius:11px;
    font-size:16px;
    line-height:1.35;
    font-weight:850;
}

.tt2-access-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:15px;
}

.tt2-access-grid>div{
    padding:11px;
    background:#FAF9FC;
    border:1px solid #EEEAF3;
    border-radius:10px;
}

.tt2-access-grid small,
.tt2-access-grid strong{display:block}

.tt2-access-grid small{
    color:var(--tt-muted);
    font-size:16px;
    font-weight:750;
}

.tt2-access-grid strong{
    margin-top:4px;
    color:var(--tt-navy);
    font-size:16px;
    line-height:1.2;
    font-weight:900;
    overflow-wrap:anywhere;
}

.tt2-access-card>p{
    margin:auto 0 0;
    padding-top:14px;
    color:var(--tt-muted);
    font-size:16px;
    line-height:1.5;
}

/* ================= NOTICE ================= */

.tt2-notice{
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:12px;
    align-items:center;
    margin-top:13px;
    padding:13px 15px;
    border-radius:14px;
}

.tt2-notice-warning{
    color:#7A5B12;
    background:#FFF9EC;
    border:1px solid #F0DFAD;
}

.tt2-notice-danger{
    color:#8D3041;
    background:#FFF2F4;
    border:1px solid #F2D4DB;
}

.tt2-notice-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.65);
}

.tt2-notice strong,
.tt2-notice p{display:block}

.tt2-notice strong{
    color:inherit;
    font-size:16px;
    font-weight:850;
}

.tt2-notice p{
    margin:3px 0 0;
    font-size:16px;
    line-height:1.45;
}

.tt2-notice a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    color:#fff!important;
    background:var(--tt-purple);
    border-radius:9px;
    text-decoration:none!important;
    font-size:16px;
    font-weight:800;
}

/* ================= BUILDER ================= */

.tt2-session-builder{
    display:grid;
    grid-template-columns:minmax(220px,.7fr) minmax(0,1.4fr) auto;
    gap:14px;
    align-items:center;
    margin-top:14px;
    padding:17px 18px;
    background:#fff;
    border:1px solid var(--tt-border);
    border-radius:18px;
    box-shadow:var(--tt-shadow-sm);
}

.tt2-builder-copy>span,
.tt2-builder-group>small{
    color:var(--tt-purple);
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:850;
}

.tt2-builder-copy h2{
    margin:4px 0 3px;
    color:var(--tt-navy);
    font-size:18px;
    font-weight:900;
}

.tt2-builder-copy p{
    margin:0;
    color:var(--tt-muted);
    font-size:16px;
}

.tt2-choice-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:7px;
}

.mode-btn{
    min-height:58px;
    display:grid;
    grid-template-columns:34px 1fr;
    gap:8px;
    align-items:center;
    padding:9px;
    text-align:left;
    color:var(--tt-text);
    background:#FAF9FC;
    border:1px solid #ECE8F1;
    border-radius:10px;
    cursor:pointer;
}

.mode-btn>i{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    color:var(--tt-purple);
    background:#F0EBFA;
    border-radius:9px;
}

.mode-btn strong,
.mode-btn small{display:block}

.mode-btn strong{
    color:var(--tt-navy);
    font-size:16px;
    font-weight:850;
}

.mode-btn small{
    margin-top:2px;
    color:var(--tt-muted);
    font-size:16px;
}

.mode-btn.active{
    background:#F2EDFA;
    border-color:#BFAFE1;
}

.mode-btn.active>i{
    color:#fff;
    background:var(--tt-purple);
}

.tt2-time-row{
    display:flex;
    gap:6px;
    margin-top:7px;
}

.time-btn{
    min-width:58px;
    min-height:40px;
    padding:0 10px;
    color:var(--tt-muted);
    background:#FAF9FC;
    border:1px solid #EAE6EF;
    border-radius:9px;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}

.time-btn.active{
    color:#fff;
    background:var(--tt-navy);
    border-color:var(--tt-navy);
}

/* ================= LAB ================= */

.tt2-lab{
    margin-top:14px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--tt-border);
    border-radius:22px;
    box-shadow:var(--tt-shadow);
}

.tt2-lab-head{
    min-height:84px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:15px 18px;
    color:#fff;
    background:
        radial-gradient(circle at 90% 10%,rgba(231,45,118,.18),transparent 13rem),
        linear-gradient(135deg,var(--tt-navy),#30265F);
}

.tt2-coach-current{
    display:grid;
    grid-template-columns:52px 1fr;
    gap:12px;
    align-items:center;
}

.tt2-target-key{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    color:#6B4A00;
    background:#FFD966;
    border-radius:13px;
    box-shadow:0 0 18px rgba(255,217,102,.25);
    font-size:21px;
    font-weight:900;
}

.tt2-coach-current small{
    display:block;
    color:#BFC4D0;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
}

.tt2-coach-current h2{
    margin:4px 0 0;
    color:#fff;
    font-size:16px;
    line-height:1.35;
    font-weight:800;
}

.tt2-coach-current h2 strong{color:#FFD966}
.tt2-coach-current h2 span{color:#9BD7FF}

.tt2-live-stats{
    display:flex;
    align-items:center;
    gap:7px;
}

.tt2-live-stats>div{
    min-width:72px;
    padding:8px 10px;
    text-align:center;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.09);
    border-radius:9px;
}

.tt2-live-stats small{
    display:block;
    color:#AAB0BF;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-weight:800;
}

.tt2-live-stats strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.tt2-live-stats>button{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    color:#fff;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
}

/* passage/input */
.tt2-passage-wrap{
    padding:18px;
    background:#FBFAFD;
    border-bottom:1px solid #F0EDF4;
}

.tt2-block-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:16px;
    margin-bottom:11px;
}

.tt2-block-head span{
    color:var(--tt-purple);
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-weight:850;
}

.tt2-block-head h3{
    margin:3px 0 0;
    color:var(--tt-navy);
    font-size:16px;
    font-weight:900;
}

.tt2-block-head>small{
    color:var(--tt-muted);
    font-size:16px;
}

.fshtyping-display{
    max-height:220px;
    overflow-y:auto;
    padding:18px;
    color:#465167;
    background:#fff;
    border:1px solid #E6E1EB;
    border-radius:13px;
    font-family:'JetBrains Mono','Courier New',monospace;
    font-size:17px;
    line-height:1.95;
    user-select:none;
}

.t-char{
    position:relative;
    padding:1px 1.5px;
    border-radius:3px;
}

.t-char.char-correct{
    color:#168A59!important;
    background:#E8F6EF;
    font-weight:700;
}

.t-char.char-wrong{
    color:#C6354F!important;
    background:#FFECEF;
    font-weight:800;
    text-decoration:underline wavy #D7485F;
}

.t-char.char-active{
    color:#fff!important;
    background:var(--tt-purple)!important;
    padding:2px 4px;
    border-radius:4px;
    font-weight:800;
}

.tt2-input-wrap{
    position:relative;
    padding:16px 18px;
    background:#fff;
    border-bottom:1px solid #F0EDF4;
}

.tt2-input-wrap label{
    position:absolute;
    left:31px;
    top:29px;
    z-index:2;
    padding:4px 7px;
    color:var(--tt-purple);
    background:#F2EDFA;
    border-radius:6px;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:850;
}

#mainTypingInput{
    width:100%;
    min-height:140px;
    resize:vertical;
    padding:44px 18px 16px;
    color:var(--tt-navy);
    background:#FAF9FC;
    border:1px solid #E6E1EB;
    border-radius:13px;
    outline:0;
    font-size:16px;
    line-height:1.75;
}

#mainTypingInput:focus{
    background:#fff;
    border-color:var(--tt-purple);
    box-shadow:0 0 0 4px rgba(79,50,154,.08);
}

#mainTypingInput:disabled{
    cursor:not-allowed;
    opacity:.65;
}

.tt2-locked-input{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    align-items:center;
    margin:16px 18px;
    padding:14px;
    cursor:pointer;
    background:#FAF9FC;
    border:1px dashed #D7D0E0;
    border-radius:12px;
}

.tt2-locked-input>span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    color:var(--tt-purple);
    background:#F0EBFA;
    border-radius:11px;
}

.tt2-locked-input strong,
.tt2-locked-input small{display:block}

.tt2-locked-input strong{
    color:var(--tt-navy);
    font-size:16px;
    font-weight:850;
}

.tt2-locked-input small{
    margin-top:3px;
    color:var(--tt-muted);
    font-size:16px;
}

.tt2-locked-input>i{
    color:#B6B0BF;
    font-size:16px;
}

/* ================= FINGER COACH ================= */

.tt2-coach-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:18px;
    background:#FBFAFD;
    border-bottom:1px solid #F0EDF4;
}

.tt2-hand-card{
    padding:14px;
    background:#fff;
    border:1px solid #E8E3ED;
    border-radius:14px;
}

.tt2-hand-head{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
}

.tt2-hand-head>span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    color:var(--tt-purple);
    background:#F0EBFA;
    border-radius:10px;
}

.tt2-hand-head small,
.tt2-hand-head strong{display:block}

.tt2-hand-head small{
    color:var(--tt-muted);
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
}

.tt2-hand-head strong{
    margin-top:2px;
    color:var(--tt-navy);
    font-size:16px;
    font-weight:850;
}

.tt2-finger-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
}

.fshfinger-pill{
    min-height:78px;
    padding:9px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    text-align:center;
    color:#4B5568;
    background:#FAF9FC;
    border:1px solid #E9E5EF;
    border-radius:10px;
    transition:.15s ease;
}

.fshfinger-pill i{
    color:#A19AAA;
    font-size:16px;
}

.fshfinger-pill strong{
    font-size:16px;
    font-weight:850;
}

.fshfinger-pill small{
    color:#8A8494;
    font-size:16px;
}

.fshfinger-pill.active{
    color:#fff!important;
    background:var(--tt-purple)!important;
    border-color:var(--tt-purple)!important;
    transform:translateY(-2px);
    box-shadow:0 7px 15px rgba(79,50,154,.18);
}

.fshfinger-pill.active i,
.fshfinger-pill.active small{color:#fff!important}

/* ================= LIVE SVG HAND COACH ================= */

.tt2-hand-visual{
    padding:22px;
    background:linear-gradient(135deg,#F9F7FC,#F3EFFA);
    border-bottom:1px solid #E8E3EF;
}
.tt2-hand-visual-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:8px;
}
.tt2-hand-visual-head span{
    color:var(--tt-purple);
    font-size:16px;
    letter-spacing:.08em;
    font-weight:850;
    text-transform:uppercase;
}
.tt2-hand-visual-head h3{margin:4px 0 0;color:var(--tt-navy);font-size:21px;font-weight:900}
.tt2-hand-visual-head p{max-width:420px;margin:0;color:var(--tt-muted);line-height:1.45;text-align:right}
.tt2-hand-svg{display:block;width:100%;max-width:650px;height:auto;margin:0 auto}
.tt2-svg-palm{fill:#D8C7B6;stroke:#B79D89;stroke-width:3}
.tt2-hand-finger{fill:#E6D4C1;stroke:#B79D89;stroke-width:3;transition:filter .2s ease,fill .2s ease,stroke .2s ease;transform-origin:center}
.tt2-nail{fill:#F7E8DF;stroke:none}
.tt2-hand-finger.active{fill:#8B65EA;stroke:#4F329A;filter:drop-shadow(0 0 11px rgba(109,80,199,.75));animation:tt-finger-pulse 1s ease-in-out infinite}
.tt2-hand-finger.active .tt2-nail{fill:#F7ECFF}
.tt2-hand-label{fill:#746B86;font-size:16px;font-weight:850;letter-spacing:2px;text-anchor:middle}
.tt2-finger-key-guide{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;padding-top:4px;color:#6D6480;font-size:16px;font-weight:750}
@keyframes tt-finger-pulse{50%{transform:translateY(-5px) scale(1.04)}}

/* The keyboard-only finger map has been retired in favour of the live hand guide. */
.tt2-keyboard-card--retired{display:none!important}

/* ================= KEYBOARD ================= */

.tt2-keyboard-card{
    padding:18px;
    background:#fff;
}

.tt2-kb-legend{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    color:var(--tt-muted);
    font-size:16px;
    font-weight:750;
}

.tt2-kb-legend span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.tt2-kb-legend b{
    width:8px;
    height:8px;
    border-radius:50%;
}

.tt2-kb-legend .is-target{background:#F6C946}
.tt2-kb-legend .is-correct{background:#168A59}
.tt2-kb-legend .is-error{background:#D7485F}

.fshvirtual-keyboard-wrapper{
    overflow-x:auto;
    padding-bottom:6px;
}

.fshvirtual-keyboard{
    min-width:650px;
    max-width:900px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    user-select:none;
}

.fshkb-row{
    display:flex;
    justify-content:center;
    gap:5px;
}

.fshkey{
    width:52px;
    height:49px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:#1F293C;
    background:#FAF9FC;
    border:1px solid #DCD7E2;
    border-radius:9px;
    font-size:16px;
    font-weight:850;
    transition:.12s ease;
}

.fshkey small{
    margin-top:2px;
    color:#8B8494;
    font-size:16px;
}

.fshkey.finger-l-pinky{border-bottom:3px solid #EC4899}
.fshkey.finger-l-ring{border-bottom:3px solid #8B5CF6}
.fshkey.finger-l-middle{border-bottom:3px solid #3B82F6}
.fshkey.finger-l-index{border-bottom:3px solid #06B6D4}
.fshkey.finger-r-index{border-bottom:3px solid #10B981}
.fshkey.finger-r-middle{border-bottom:3px solid #EAB308}
.fshkey.finger-r-ring{border-bottom:3px solid #F97316}
.fshkey.finger-r-pinky{border-bottom:3px solid #EF4444}

.fshkey.target-key{
    color:#6B4A00!important;
    background:#FFF2B7!important;
    border-color:#E6BF3F!important;
    transform:translateY(-3px);
    box-shadow:0 0 16px rgba(230,191,63,.35);
}

.fshkey.key-flash-ok{
    color:#fff!important;
    background:#168A59!important;
    border-color:#117248!important;
    transform:translateY(-2px);
}

.fshkey.key-flash-err{
    color:#fff!important;
    background:#D7485F!important;
    border-color:#B92E46!important;
    transform:translateY(-2px);
}

.fshspace-key{
    width:360px!important;
    max-width:80%;
    border-bottom:3px solid #747490!important;
}

/* ================= SCORE MODAL ================= */

#tutorScoreModal .modal-content{
    border:1px solid var(--tt-border)!important;
    border-radius:20px!important;
    box-shadow:0 26px 70px rgba(16,24,39,.22)!important;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1199px){
    .tt2-hero{grid-template-columns:1fr}
    .tt2-session-builder{grid-template-columns:1fr}
    .tt2-time-row{justify-content:flex-start}
}

@media(max-width:991px){
    .tt2-coach-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
    .tt2-page{padding-top:18px}
    .tt2-shell{padding-left:12px;padding-right:12px}
    .tt2-hero-copy{padding:24px;min-height:270px}
    .tt2-hero-copy h1{font-size:34px}
    .tt2-notice{grid-template-columns:40px 1fr}
    .tt2-notice a{grid-column:1/-1;justify-content:center}
    .tt2-choice-row{grid-template-columns:1fr}
    .tt2-lab-head{
        align-items:flex-start;
        flex-direction:column;
    }
    .tt2-live-stats{
        width:100%;
        overflow-x:auto;
    }
    .tt2-live-stats>div{flex:1;min-width:68px}
    .tt2-block-head{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }
    .tt2-finger-grid{grid-template-columns:repeat(5,minmax(70px,1fr));overflow-x:auto;padding-bottom:4px}
}

@media(max-width:575px){
    .tt2-hero-copy{padding:20px}
    .tt2-hero-copy h1{font-size:29px}
    .tt2-hero-actions{width:100%}
    .tt2-btn{flex:1}
    .tt2-access-grid{grid-template-columns:1fr}
    .tt2-session-builder{padding:14px}
    .tt2-coach-current{grid-template-columns:46px 1fr}
    .tt2-target-key{width:46px;height:46px}
    .tt2-live-stats{display:grid;grid-template-columns:repeat(4,1fr)}
    .tt2-live-stats>button{width:100%}
    .fshtyping-display{font-size:16px;line-height:1.8}
    #mainTypingInput{font-size:16px}
    .tt2-keyboard-card{padding:14px 10px}
}

@media(max-width:700px){
    .tt2-hand-visual{padding:16px}
    .tt2-hand-visual-head{align-items:flex-start;flex-direction:column;gap:7px}
    .tt2-hand-visual-head p{text-align:left}
    .tt2-hand-svg{min-width:0;margin-left:auto;transform:none}
    .tt2-hand-visual{overflow:visible}
}

/* Readability floor: no lesson, control or supporting copy is smaller than 15px. */
:root body .tt2-page :is(p,a,span,li,small,button,label,input,textarea,strong){font-size:16px!important}
.tt2-choice-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.mode-btn{min-height:74px}
.mode-btn>i{font-size:16px}
@media(max-width:991px){.tt2-choice-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.tt2-choice-row{grid-template-columns:1fr}.tt2-hand-svg{min-width:0}.tt2-finger-key-guide{justify-content:flex-start}}


/* ============================================================
   FreeStenoHub — 2026 Premium UI Refinement
   Visual-only layer. Existing IDs/classes and tutor behavior stay intact.
============================================================ */
.tt2-shell{max-width:1240px}
.tt2-hero{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:12px}
.tt2-hero-copy{min-height:270px;padding:30px 32px;border-radius:22px}
.tt2-access-card{min-height:270px;padding:21px;border-radius:22px}
.tt2-hero-copy h1{max-width:720px;font-size:clamp(32px,3.4vw,48px)}
.tt2-session-builder{padding:15px 16px;border-radius:16px}
.tt2-choice-row{grid-template-columns:repeat(4,1fr)}
.mode-btn{min-height:54px}
.tt2-lab{border-radius:20px}
.tt2-lab-head{min-height:78px}
.tt2-passage-wrap{padding:16px}
.fshtyping-display{max-height:195px;padding:16px;font-size:16px}
#mainTypingInput{min-height:120px}
.tt2-hand-visual{padding:18px 22px}
.tt2-hand-svg{max-width:570px}
.tt2-hand-visual-head h3{font-size:18px}
.tt2-finger-key-guide{font-size:16px}
#tutorScoreModal .modal-content{
    background:linear-gradient(180deg,#fff,#fbf9fe)!important;
}
@media(max-width:1100px){
    .tt2-choice-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:991.98px){
    .tt2-hero{grid-template-columns:1fr}
    .tt2-hero-copy,.tt2-access-card{min-height:auto}
    .tt2-session-builder{grid-template-columns:1fr}
}
@media(max-width:767.98px){
    .tt2-page{padding-top:16px}
    .tt2-hero-copy{padding:25px 20px}
    .tt2-choice-row{grid-template-columns:repeat(2,1fr)}
    .tt2-live-stats{width:100%;justify-content:space-between}
    .tt2-lab-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
    .tt2-choice-row{grid-template-columns:1fr 1fr}
    .tt2-hero-copy h1{font-size:32px}
}

/* Additional overrides for wider layout and bigger fonts */
.tt2-shell {
    max-width: 1400px !important;
    margin: 0 auto;
}
.tt2-choice-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
}
.mode-btn {
    min-height: 70px !important;
    padding: 12px 16px !important;
}
.mode-btn span small {
    font-size: 16px !important;
    display: block;
    opacity: 0.8;
    margin-top: 3px;
}
.mode-btn span strong {
    font-size: 18px !important;
}