/* TypingSpartan / Editorial Edition — a presentation-only alternative.
   Builds on existing site.css; the typing engine, markup behaviour and search URLs remain intact. */
:root {
 --ink:#252c2b;--muted:#536461;--teal:#007f82;--teal-dark:#00676a;
 --mint:#e6f0ec;--line:#b9c3bc;--bg:#f4f0e7;--white:#fffef9;
 --shadow:none;--round:10px;
}
body{background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-.005em}
.shell{width:min(1200px,calc(100% - 48px))}
.site-header{position:sticky;background:#f8f6ef;border-bottom:2px solid var(--ink);box-shadow:none}
.header-inner{min-height:76px}
.brand{font-weight:850;letter-spacing:-.055em;font-size:25px}
.brand img{filter:contrast(1.05)}
.header-links{gap:3px}
.header-links a{border-radius:3px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.065em;padding:11px 15px;color:#364541}
.header-links a:hover,.header-links a[aria-current=page]{background:var(--ink);color:#fffdf6}
.hero{padding:45px 0 30px;grid-template-columns:minmax(0,1fr) 240px;gap:25px;border-bottom:2px solid var(--ink);margin-bottom:25px}
.eyebrow,.guide-step-number,.guide-topic-kicker{letter-spacing:.22em;font-size:11px;font-weight:850;color:var(--teal-dark)}
h1{font-size:clamp(48px,6.7vw,83px);line-height:.95;letter-spacing:-.075em;font-weight:850;margin:18px 0 22px;max-width:820px}
h2{font-size:clamp(27px,3.4vw,41px);letter-spacing:-.052em;font-weight:830}
h3{font-weight:790}
.hero p{font-size:18px;max-width:610px;line-height:1.62;color:#4e625c}
.hero-keyboard{transform:rotate(-5deg);opacity:1;height:181px;margin-right:14px;filter:none}
.key-grid{gap:5px}
.key-grid span{border:1px solid #2c3d39;box-shadow:3px 4px 0 #2c3d39;border-radius:5px;background:#fffcf4;color:#25322f;font-weight:790}
.key-grid span:nth-child(8){background:var(--teal);border-color:#224c4a;color:white}
.card{background:var(--white);border:1.5px solid #687b73;border-radius:var(--round);box-shadow:none}
.practice-card{padding:0;overflow:hidden;border:2px solid var(--ink);background:#fffefa}
.card-top{padding:20px 25px;margin:0;border-bottom:2px solid var(--ink);background:#ede8dc;gap:14px}
.card-title{font-size:21px;font-weight:850;letter-spacing:-.04em;text-transform:none}
.title-symbol{background:var(--teal);color:#fff;padding:8px;display:inline-grid;place-items:center;border:1px solid #124745;border-radius:5px}
.card-title svg{color:#fff}
.btn{border:1.5px solid #52605a;border-radius:5px;background:#fffefa;padding:10px 14px;font-size:13px;font-weight:780;box-shadow:2px 2px 0 rgba(36,45,41,.1)}
.btn:hover{background:#e6f3f0;border-color:#174c4d}
.btn-primary{color:#fff;background:var(--teal);border-color:#1a4340;box-shadow:2px 2px 0 #213b35}
.btn-primary:hover{background:var(--teal-dark);color:white}
.mode-bar{padding:17px 25px 9px;background:#fffefa;margin:0;gap:10px}
.segmented{border:1px solid #99a9a0;border-radius:5px;background:#f3f0e8;gap:2px;padding:3px}
.segmented button{border-radius:3px;font-weight:790;font-size:12px;letter-spacing:.015em;color:#435851}
.segmented button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.workspace-grid{padding:13px 25px 26px;grid-template-columns:minmax(0,1fr) 190px;gap:0;background:#fffefa}
.test-column{padding-right:23px}
.sample{border:1.5px solid #b4bdb6;border-radius:5px;min-height:175px;background:#f4f3ec;color:#24332f;font:19px/1.92 "SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:0;padding:23px 25px}
.sample .done{background:#cde9e6;color:#00696b}
.sample .upcoming{color:#455650}
.sample .wrong{background:#ffdfd4;color:#a5352b}
.sample .current{background:#a1dcda;border-bottom:3px solid #007477}
.typing-input{border:1.5px solid #465b55;border-radius:5px;margin-top:13px;background:#fffefa;padding:18px 21px;line-height:1.8;min-height:106px;font-size:19px}
.typing-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #b7e8e3}
.helper{color:#52635e;font-size:12px;line-height:1.6}
.metrics{border-left:2px solid #3f514b;gap:0;padding:0 0 0 22px;justify-content:space-between}
.metric{padding:7px 0 11px;border-bottom:1px solid #cbd0c5;gap:10px}
.metric:last-child{border-bottom:0}
.metric-icon{border-radius:5px;background:#dcebe5;border:1px solid #bdd5ca;color:#006f71;width:34px;height:34px}
.metric label{font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:#5a6a63}
.metric strong{font-size:27px;letter-spacing:-.05em;color:var(--ink)}
.progress-track{height:5px;background:#e4e6db;border-radius:0}
.progress-fill{background:var(--teal)}
.status-message{font-weight:650}
.result-panel{border-radius:0;margin:0;border:0;border-top:2px solid #30443d;background:#e4f0eb;padding:25px}
.recent{border:1.5px solid #52645c;border-radius:6px;background:#e5eee8;padding:23px 25px}
.recent h3{font-size:23px}
.mini-stat{border:1px solid #7a9588;border-radius:4px;background:#fffcf5}
.section{padding:45px 0 18px}
.section h2{max-width:870px}
.section-intro{color:#53625b}
.search-choice-grid,.path-grid,.guide-grid,.guide-topic-grid{gap:11px}
.search-choice,.path-card,.guide-card,.guide-topic-card{border:1.5px solid #53665c;border-radius:5px;box-shadow:none!important;padding:22px;transition:background .15s ease,transform .15s ease}
.search-choice:hover,.path-card:hover,.guide-topic-card:hover{background:#e7f1ec;transform:translateY(-1px);border-color:#126d6c}
.search-choice-title{font-weight:850;font-size:18px;letter-spacing:-.025em}
.search-choice strong,.card-arrow{color:var(--teal-dark);text-decoration:underline;text-underline-offset:4px}
.path-icon,.metric-icon,.guide-topic-icon{border-radius:5px}
.path-icon{border:1px solid #b1d0c3}
.page-heading{border-bottom:2px solid #2b3a32;padding:43px 0 26px;margin-bottom:21px}
.page-heading h1{font-size:clamp(39px,5vw,61px);letter-spacing:-.065em;margin-top:0}
.lesson-menu,.lesson-detail,.overview-card,.history,.guide-article-content,.guide-aside-card,.guide-aside-links,.guide-hub-intro,.guide-hub-bottom{border-radius:6px;box-shadow:none}
.lesson-list button{border-radius:4px}
.lesson-list button[aria-current=true]{background:#d9eae1;border-color:#507c72;color:#144f4d}
.lesson-target,.lesson-input{border-radius:5px}
.guide-article-header h1{letter-spacing:-.06em}
.guide-article-content{background:#fffefa;border:1.5px solid #8b9a8d}
.guide-callout,.guide-exercise,.guide-end,.guide-aside-card,.guide-exercise-text{border-radius:5px}
.guide-callout{background:#e8f0e9}
.footer{background:#e5e4d9;border-top:2px solid var(--ink);margin-top:64px}
.footer-inner{padding:26px 0}
.footer a{color:#304d46}
/* Keep keyboard work visually calm and usable, even in this more editorial concept. */
@media(max-width:900px){
 .hero{grid-template-columns:minmax(0,1fr) 155px}
 .workspace-grid{grid-template-columns:minmax(0,1fr) 160px}
 .metrics{padding-left:14px}
 .test-column{padding-right:15px}
}
@media(max-width:760px){
 .shell{width:min(100% - 28px,1200px)}
 .site-header{border-bottom:2px solid var(--ink)}
 .hero{padding:32px 0 27px;grid-template-columns:1fr;gap:0;margin-bottom:18px}
 .hero h1{font-size:clamp(43px,10vw,64px)}
 .hero p{font-size:16px}
 .hero-keyboard{display:none}
 .practice-card{padding:0}
 .card-top{padding:16px;align-items:flex-start;flex-wrap:wrap}
 .card-title{font-size:19px}
 .mode-bar{padding:13px 15px 9px}
 .workspace-grid{display:flex;flex-direction:column;padding:10px 15px 20px}
 .test-column{padding-right:0}
 .sample{font-size:16px;line-height:1.85;padding:17px;min-height:130px}
 .typing-input{font-size:16px;padding:15px;min-height:100px}
 .metrics{border-left:0;border-top:2px solid #435850;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:13px 0 0;margin-top:14px;gap:8px 10px}
 .metric{padding:4px 0;gap:6px;border-bottom:0}
 .metric-icon{width:29px;height:29px}
 .metric strong{font-size:21px}
 .metric label{font-size:9px;letter-spacing:.035em}
 .recent{padding:18px}
 .search-choice-grid,.path-grid,.guide-grid{grid-template-columns:1fr}
 .header-links{border:1.5px solid #34453b;border-radius:5px;background:#f7f4eb}
}
@media(max-width:440px){
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card-top .actions{width:100%}
 .card-top .actions .btn{flex:1 1 auto}
 .segmented button{padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}