/* TypeToWork 1.2 — a quieter, more considered practice studio. */
:root{--bg:#f6f8f5;--surface:#fff;--ink:#18332c;--muted:#53655f;--accent:#0f7660;--tint:#e6f3eb;--line:#dce5dd;--soft:#f3f6f1;--control:#6b8279;--radius:20px}
body{background:radial-gradient(ellipse at 8% 6%,#e9f1e566,transparent 35%),var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;letter-spacing:-.15px}
body.dark{--bg:#10201d;--surface:#182b26;--ink:#eef6f0;--muted:#b0c5ba;--accent:#8cdec2;--tint:#244438;--line:#395348;--soft:#1d332b;--control:#8da99a;background:radial-gradient(ellipse at 8% 6%,#27433566,transparent 40%),var(--bg)}
.container{width:min(1200px,calc(100% - 64px))}h1,h2,h3{font-weight:700}h1{letter-spacing:-1.7px}h2{letter-spacing:-1px}.eyebrow{font-size:10px;letter-spacing:1.65px;font-weight:750;color:var(--accent)}
.topbar{background:transparent;border:0}.header-inner{min-height:100px}.brand{font-size:25px;letter-spacing:-1px;gap:9px}.brand-mark{width:38px;height:38px}.header-inner nav{gap:2px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:40px;box-shadow:0 3px 14px #17382b04}.header-inner nav a{border:0;padding:10px 21px;border-radius:30px;font-size:13px}.header-inner nav a.active{background:var(--ink);color:var(--surface)}.header-inner nav a:hover{text-decoration:none;background:var(--tint);color:var(--accent)}.header-inner .theme{border:0;width:40px;min-height:40px;margin:0 3px 0 8px;background:transparent}.theme svg{width:18px;height:18px}
.card{border-radius:var(--radius);box-shadow:0 5px 20px #17382b03}button,.button{border-radius:10px;font-size:13px;letter-spacing:-.1px;font-weight:650}.primary{background:#116b54;border-color:#116b54;box-shadow:0 5px 12px #116b5417}.primary:hover{background:#0a5642}.button svg,button svg{width:18px;height:18px}.text-link{font-size:13px;font-weight:700}
.home-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.65fr);gap:48px;align-items:center;padding:24px 0 36px}.home-hero{padding:12px 0 10px;min-width:0}.hero-badge{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:11px;font-weight:650;margin-bottom:24px;letter-spacing:0}.hero-badge>span{width:6px;height:6px;display:block;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--tint);flex-shrink:0}.home-hero h1{font-size:clamp(48px,4.35vw,61px);letter-spacing:-2.8px;line-height:1.1;font-weight:750}.home-hero h1>span{color:var(--accent)}.hero-description{font-size:16px;line-height:1.8;color:var(--muted);max-width:350px;margin:23px 0}.hero-skills{display:grid;gap:8px;font-size:12px;color:var(--muted)}.hero-skills>span{display:flex;align-items:center;gap:8px}.hero-skills svg{color:var(--accent);width:16px;height:16px}.hero-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;margin-top:26px}.hero-link svg{width:18px}.keyboard-art{margin-top:40px}.key-row{display:flex;gap:7px;align-items:flex-end;transform:rotate(-6deg);transform-origin:left center;width:max-content}.key-row kbd{display:grid;place-items:center;width:43px;height:45px;background:var(--surface);border:1px solid var(--line);border-bottom:4px solid #c9d6ca;border-radius:10px;color:var(--muted);font:600 16px/1 ui-monospace,monospace;box-shadow:0 6px 10px #163c2c05}.key-row kbd:nth-child(3){transform:translateY(-3px);background:var(--tint);color:var(--accent)}.key-row .enter-key{width:60px;background:#d8e9cb;color:#2a522d;border-bottom-color:#b5cba5}.keyboard-art>p{font-size:10px;letter-spacing:.5px;margin-top:16px;color:var(--muted)}
.home-layout .typing-workspace{padding:22px 24px 18px;border-color:#cfddd2;border-top:3px solid #84b197;border-radius:21px;box-shadow:0 22px 65px #183d2b0b,0 2px 8px #183d2b05;min-width:0}.tabs{background:var(--soft);padding:5px;border-radius:12px;border:1px solid var(--line);gap:4px;margin-bottom:22px}.tabs a{font-size:13px;border-radius:8px;min-height:40px}.tabs a.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 7px #183d2b0b}.workspace-heading{margin:0 0 16px}.workspace-heading h2{font-size:25px;letter-spacing:-.8px}.practice-pill{font-size:11px;background:var(--tint);padding:5px 8px;border-radius:30px;color:var(--accent)}.practice-pill svg{width:14px;height:14px}.test-setup{background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:11px 0 14px;margin-bottom:15px}.test-setup summary{font-size:11px;color:var(--muted);font-weight:600}.workspace-top{margin:11px 0 0;gap:12px}.context{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;flex:1}.context label{font-size:11px;font-weight:600}.context select{width:100%;padding:8px 25px 8px 9px;min-height:40px;font-size:12px;border-radius:8px;background:var(--soft)}.durations{gap:5px;flex-wrap:nowrap}.durations button{min-width:45px;padding:8px 9px;min-height:40px;font-size:12px;font-weight:600}.durations button.selected{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.practice-bar{padding-bottom:13px;gap:10px}.practice-status{font-size:11px}.status-dot{width:5px;height:5px}.practice-bar .timer{font-size:24px;letter-spacing:-.6px;gap:7px}.practice-bar .timer svg{width:18px;height:18px;color:var(--muted)}.size-controls button{min-width:32px;min-height:32px;font-size:11px;border-color:var(--line);border-radius:7px}.typing-surface{border:1px solid var(--line);border-radius:11px;background:var(--soft)}.typing-surface .preview-passage{height:145px;padding:21px 23px;font-size:21px;line-height:1.75;color:var(--muted)}.start-row{padding:17px 0 5px}.home-layout .start-row .primary{width:100%;min-height:46px;justify-content:center}.start-row p{font-size:11px;margin-top:8px}.practice-foot{gap:8px;margin-top:12px}.practice-foot p,.practice-foot #comparison-note{font-size:10px}.practice-rules{margin-top:12px;padding-top:10px;font-size:12px}.practice-rules summary{font-size:11px;color:var(--muted)}.practice-rules p{font-size:13px;line-height:1.7}.intro{padding:30px 0 28px}.intro h1{font-size:42px;letter-spacing:-1.8px}.intro p:last-child{font-size:15px}.typing-workspace{max-width:1000px;margin:auto}
.home-section{margin-top:62px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:25px}.section-heading h2{font-size:32px;line-height:1.2}.section-heading>p{font-size:13px;color:var(--muted);line-height:1.8}.section-heading .eyebrow{margin-bottom:9px}.exercise-grid{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.exercise-card{display:flex;flex-direction:column;gap:0;padding:25px;position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;min-width:0}.exercise-card:hover{transform:translateY(-3px);border-color:#9fbaa8;box-shadow:0 12px 30px #163a2b08}.exercise-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.exercise-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--accent)}.exercise-icon svg{width:22px;height:22px}.exercise-number{font:500 11px/1 ui-monospace,monospace;color:var(--muted)}.exercise-card h3{font-size:21px;letter-spacing:-.6px}.exercise-card p{font-size:13px;line-height:1.7;margin:7px 0 17px;max-width:280px}.exercise-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.exercise-tags span{font-size:10px;background:var(--soft);border:1px solid var(--line);padding:3px 7px;border-radius:5px;color:var(--muted)}.exercise-link{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-top:24px;padding-top:17px;border-top:1px solid var(--line);gap:8px;color:var(--ink)}.exercise-link>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--accent)}.exercise-link svg{width:15px;height:15px}
.routine-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:22px}.daily-spotlight{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;padding:36px;border-radius:21px;background:#173c32;color:#f1f8ef;overflow:hidden}.daily-spotlight:before{content:'';position:absolute;width:340px;height:340px;border:1px solid #ffffff0a;border-radius:50%;left:-170px;top:-230px;pointer-events:none}.daily-copy>.eyebrow{color:#b5d5a4}.daily-copy h2{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:15px 0}.daily-copy>p:not(.eyebrow){color:#c1d6ca;font-size:13px;line-height:1.8}.daily-button{background:#d5e9bd;color:#203f2e;border-color:#d5e9bd;margin-top:23px;padding:11px 14px;font-size:12px}.daily-button:hover{background:#e1f2ce;color:#203f2e}.daily-copy .daily-lengths{font-size:10px!important;margin-top:12px}.daily-steps{display:flex;flex-direction:column;gap:9px;justify-content:center}.daily-steps>div{display:flex;align-items:center;gap:12px;border:1px solid #ffffff1f;border-radius:11px;padding:14px 12px;background:#ffffff05}.daily-steps>div>span{font:500 10px/1 ui-monospace,monospace;color:#b3d39f}.daily-steps p{font-size:13px;font-weight:600;flex:1}.daily-steps small{display:block;font-size:10px;font-weight:400;color:#bdd2c7;margin-top:2px}.daily-steps svg{width:18px;height:18px;color:#b3d39f}.personal-spotlight{border:1px solid var(--line);border-radius:21px;background:#eaf0df;padding:30px;display:flex;align-items:flex-start;flex-direction:column}.personal-icon{color:#3f654b;margin-bottom:20px}.personal-icon svg{width:28px;height:28px}.personal-spotlight .eyebrow{font-size:9px;color:#42664b}.personal-spotlight h2{font-size:29px;line-height:1.2;color:#213f2d;margin-bottom:14px}.personal-spotlight>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#526649;margin-bottom:22px}.personal-spotlight .text-link{color:#254b35;margin-top:auto}.device-note{display:flex;align-items:center;gap:6px;color:#526649;font-size:10px;margin-top:20px}.device-note svg{width:14px;height:14px}
.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.guide-link{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px;color:var(--ink);transition:border-color .2s,transform .2s}.guide-link:hover{border-color:#9fbaa8;text-decoration:none;transform:translateY(-2px)}.guide-meta{display:flex;justify-content:space-between;gap:8px;width:100%;color:var(--muted);font-size:10px}.guide-meta span{margin:0;color:inherit}.guide-symbol{display:grid;place-items:center;color:var(--accent);background:var(--soft);width:42px;height:42px;border-radius:11px;margin:23px 0 17px!important}.guide-symbol svg{width:22px;height:22px}.guide-link h3{font-size:19px;letter-spacing:-.5px;line-height:1.3;max-width:240px;margin-bottom:24px}.guide-read{display:flex;justify-content:space-between;align-items:center;width:100%;margin:auto 0 0!important;font-size:11px;font-weight:650;color:var(--accent)}.guide-read svg{width:16px;height:16px}.home-trust{border-top:1px solid var(--line);padding-top:26px;margin:48px 0 10px;font-size:11px;gap:36px}.home-trust svg{width:16px;height:16px}footer{margin-top:34px;padding:30px 0 34px;background:transparent}.footer-inner .brand{font-size:21px}.footer-inner .brand-mark{width:31px;height:31px}.footer-inner p{margin:11px 0 0;font-size:11px}.footer-note{display:block;margin-top:5px;font-size:10px;letter-spacing:.3px;color:var(--muted)}footer .links{font-size:12px;gap:25px;padding-top:9px}
.page-head{padding:30px 0 26px}.page-head h1{font-size:38px;letter-spacing:-1.4px}.page-head p{font-size:15px}.panel{padding:30px}.office-grid .source{background:var(--soft)}.record{padding:20px 0}.record-title{font-size:10px;letter-spacing:1.3px}.record dl{gap:10px 16px}.record dd{font-size:17px}.office-entry fieldset{border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}.office-entry legend{padding:0 8px;font-size:14px}.entry-fields input{background:var(--soft);border-radius:8px;min-height:48px}.stats{gap:15px}.stat{border-radius:13px;padding:23px;background:var(--soft);border-color:var(--line)}.stat strong{font-size:39px;letter-spacing:-1.5px}.stat span{font-size:12px}.article{border-radius:20px;padding:40px 48px;margin-top:28px}.article h1{font-size:39px;line-height:1.15;letter-spacing:-1.3px}.article p{line-height:1.85}.best-card{border-radius:13px;background:var(--soft)}
.focused-practice .home-hero{display:none}.focused-practice .home-layout{display:block;padding:0}.focused-practice .home-layout .typing-workspace{margin-top:24px;max-width:1000px}.focused-practice .typing-surface .passage{height:230px}.focused-practice .typing-workspace{padding:24px 32px}.focused-practice .practice-bar{padding-bottom:20px}.focused-practice .practice-status{font-size:13px}.focused-practice .practice-bar .timer{font-size:29px}.focused-practice .practice-foot p{font-size:12px}.focused-practice .typing-surface.native-input .passage{height:135px}
body.dark .home-layout .typing-workspace{border-color:#486653;border-top-color:#8cae76;box-shadow:0 22px 65px #0002}body.dark .key-row kbd{border-bottom-color:#3d5a47}body.dark .key-row .enter-key{background:#b5d39f;color:#213c29;border-bottom-color:#6e8e62}body.dark .personal-spotlight{background:#cfdfb8;border-color:#cfdfb8}body.dark .daily-spotlight{background:#20493a;border:1px solid #3d6450}
@media(max-width:1099px){.home-layout{grid-template-columns:1fr;gap:30px;padding-top:26px}.home-hero{text-align:center;max-width:720px;margin:auto;padding:0}.hero-badge{justify-content:center;margin-bottom:17px}.home-hero h1{font-size:56px}.hero-description{max-width:510px;margin:18px auto}.hero-skills{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.hero-link{margin-top:18px}.keyboard-art{display:none}.home-layout .typing-workspace{width:100%;max-width:900px}.routine-grid{grid-template-columns:1fr 1fr}.daily-spotlight{grid-template-columns:1fr;padding:28px}.daily-steps{gap:7px}.daily-steps>div{padding:10px 12px}.exercise-card{padding:21px}.exercise-card h3{font-size:19px}.guide-link{padding:21px}.section-heading h2{font-size:29px}}
@media(max-width:760px){.container{width:calc(100% - 36px)}.header-inner{min-height:84px;gap:14px}.brand{font-size:22px}.header-inner nav a{padding:9px 14px;font-size:12px}.header-inner .theme{margin-left:2px}.home-section{margin-top:44px}.section-heading{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:21px}.section-heading h2{font-size:29px}.section-heading>p br{display:none}.exercise-grid{grid-template-columns:1fr;gap:12px}.exercise-card{padding:24px}.exercise-top{margin-bottom:17px}.exercise-card p{max-width:none}.exercise-tags{margin-top:0}.exercise-link{margin-top:18px;padding-top:14px}.routine-grid{grid-template-columns:1fr}.daily-spotlight{grid-template-columns:1.1fr 1fr;gap:22px;padding:29px}.daily-copy h2{font-size:28px}.personal-spotlight{padding:27px}.personal-spotlight h2 br{display:none}.personal-icon{margin-bottom:14px}.guide-grid{grid-template-columns:1fr;gap:12px}.guide-link{padding:23px}.guide-symbol{margin-top:19px!important;margin-bottom:13px!important}.guide-link h3{max-width:none;margin-bottom:20px}.home-trust{justify-content:flex-start;gap:12px 24px;margin-top:34px}.page-head h1{font-size:32px}.panel{padding:22px}.office-entry fieldset{padding:16px}.office-grid>.source{display:none}.stats{gap:10px}.stat{padding:17px}.stat strong{font-size:32px}.article{padding:28px}.article h1{font-size:32px}}
@media(max-width:600px){.container{width:calc(100% - 32px)}.header-inner{padding:15px 0 12px;min-height:0;gap:12px;flex-wrap:wrap}.brand{font-size:23px}.brand-mark{width:34px;height:34px}.header-inner nav{width:100%;gap:2px;padding:4px;justify-content:space-between}.header-inner nav a{padding:9px 12px;flex:1;text-align:center;font-size:12px}.header-inner .theme{width:35px;min-height:35px;flex-shrink:0}.home-layout{padding:20px 0 12px;gap:22px}.hero-badge{font-size:9px;margin-bottom:14px;letter-spacing:0}.home-hero h1{font-size:42px;letter-spacing:-1.8px;line-height:1.1}.hero-description{font-size:14px;line-height:1.7;margin:13px auto 0;max-width:335px}.hero-skills,.hero-link{display:none}.home-layout .typing-workspace{padding:15px;border-radius:16px;border-top-width:2px}.tabs{padding:4px;gap:2px;border-radius:10px;margin-bottom:17px}.tabs a{font-size:11px;min-height:38px;padding:6px 4px}.workspace-heading{margin-bottom:10px}.workspace-heading h2{font-size:22px}.practice-pill{font-size:10px;padding:4px 7px}.test-setup{padding:9px 0 11px;margin-bottom:12px}.test-setup summary{font-size:11px}.test-setup summary span{font-size:10px}.workspace-top{display:flex;flex-wrap:wrap;gap:12px}.context{grid-template-columns:1.2fr 1fr;width:100%}.context select{font-size:12px;padding-right:20px;min-height:42px}.durations{width:100%;gap:7px}.durations button{flex:1;min-width:0;font-size:12px}.practice-status{font-size:10px}.practice-bar .timer{font-size:22px;min-width:75px}.practice-bar .timer svg{width:16px}.size-controls{gap:3px}.size-controls button{min-width:30px;min-height:33px}.start-row{padding:4px 0 15px!important}.start-row .primary{width:100%;min-height:46px}.start-row p{font-size:10px}.typing-surface .preview-passage{height:124px;font-size:19px;padding:17px 16px}.practice-foot p,.practice-foot #comparison-note{font-size:10px}.practice-foot{margin-top:12px;gap:6px}.intro{padding:22px 0}.intro h1{font-size:32px}.intro p:last-child{font-size:14px}.daily-spotlight{grid-template-columns:1fr;padding:27px;gap:23px}.daily-copy h2{font-size:30px}.daily-steps{gap:8px}.daily-steps>div{padding:12px}.daily-button{width:100%;justify-content:space-between}.daily-copy .daily-lengths{text-align:center}.section-heading h2{font-size:28px}.section-heading h2 br{display:none}.home-trust{flex-direction:column;align-items:flex-start;gap:11px;padding-top:22px}.footer-inner{gap:21px}.footer-inner .brand{font-size:21px}footer .links{padding-top:0;font-size:11px;gap:23px}.page-head{padding-top:23px}.page-head h1{font-size:30px}.page-head p{font-size:14px}.office-entry{padding:18px}.entry-fields label{font-size:13px}.mobile-field-source{font-size:14px;padding:8px}.stat strong{font-size:29px}.stat span{font-size:11px}.article{padding:25px 21px}.article h1{font-size:29px}.focused-practice .header-inner{padding:10px 0;gap:10px;flex-wrap:nowrap}.focused-practice .header-inner nav{width:auto;border:0;box-shadow:none;background:transparent;padding:0}.focused-practice .theme{border:1px solid var(--control)}.focused-practice .typing-workspace,.focused-practice .home-layout .typing-workspace{margin-top:12px;padding:17px}.focused-practice .practice-status{font-size:11px}.focused-practice .practice-bar{padding-bottom:13px}.focused-practice .practice-bar .timer{font-size:24px}.focused-practice .typing-surface .passage{height:clamp(85px,calc(var(--viewport-height,100dvh) - 270px),210px);padding:18px 16px}.focused-practice .typing-surface.native-input .passage{height:90px}.focused-practice .practice-foot p{font-size:11px}}
@media(max-height:450px){.focused-practice .typing-workspace,.focused-practice .home-layout .typing-workspace{padding:10px 14px;margin-top:6px}.focused-practice .practice-bar{padding-bottom:7px}.focused-practice .typing-surface .passage{height:76px}.focused-practice .typing-surface.native-input .passage{height:65px}}