/* Guide pages for Easy Typing Practice. Light and dark follow the device. */
:root { --bg:#fbf8f1; --card:#ffffff; --text:#1d2230; --muted:#505b70; --line:#d9d2c3; --brand:#001634; --link:#0b3a8c; --accent:#b3141b; --btn:#001634; --btn-text:#ffffff; --note:#fff4d6; --note-line:#d9b24a;
  --f1:#fbd0e1; --f2:#fcd9bf; --f3:#f6eab0; --f4:#cdeccb; --f5:#c4ecea; --f6:#c9def8; --f7:#dcd0f6; --f8:#f1cde8; --keytxt:#1d2230; }
@media (prefers-color-scheme: dark) { :root { --bg:#141a26; --card:#1c2434; --text:#e6e9f0; --muted:#aab4c8; --line:#34405a; --brand:#0c2347; --link:#9cc0ff; --accent:#ff8a8f; --btn:#d9e6ff; --btn-text:#0b1830; --note:#2a2a1c; --note-line:#8a7430;
  --f1:#5d3345; --f2:#5d4330; --f3:#575230; --f4:#2f5133; --f5:#2c5256; --f6:#2f4569; --f7:#443a69; --f8:#5a3355; --keytxt:#eef1f8; } }
* { box-sizing: border-box; }
html { font-size: 106.25%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.65 "Atkinson Hyperlegible", Verdana, "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--card); padding: 8px; z-index: 9; }
.top { background: var(--brand); color: #fff; } .top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; } .brand img { border-radius: 8px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; } .top nav a { color: #e8efff; padding: 8px 2px; }
a { color: var(--link); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1 { font-size: 1.85rem; line-height: 1.25; margin: 1.2rem 0 .6rem; } h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; } .lead { font-size: 1.1rem; color: var(--muted); }
.crumbs { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; } .muted { color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1.2rem 0; }
.btn { display: inline-block; padding: 12px 18px; min-height: 44px; border-radius: 10px; border: 2px solid var(--btn); color: var(--text); background: var(--card); text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }
.btn.primary { background: var(--btn); color: var(--btn-text); }
.tbl { overflow-x: auto; margin: .8rem 0; } table { border-collapse: collapse; width: 100%; background: var(--card); } th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; } thead th { background: var(--brand); color: #fff; }
tbody th { font-weight: 700; width: 34%; }
.note { background: var(--note); border: 1px solid var(--note-line); border-radius: 10px; padding: 10px 14px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px; margin: .6rem 0; } summary { cursor: pointer; padding: 10px 0; font-weight: 700; } details p { margin: 0 0 12px; }
.kbd { margin: 1rem 0; overflow-x: auto; } .kbd svg { width: 100%; min-width: 620px; height: auto; display: block; }
.key rect { stroke: var(--line); stroke-width: 1.5; } .key.f1 rect { fill: var(--f1); } .key.f2 rect { fill: var(--f2); } .key.f3 rect { fill: var(--f3); } .key.f4 rect { fill: var(--f4); } .key.f5 rect { fill: var(--f5); } .key.f6 rect { fill: var(--f6); } .key.f7 rect { fill: var(--f7); } .key.f8 rect { fill: var(--f8); }
.key.home rect { stroke: var(--text); stroke-width: 3; }
.key text { fill: var(--keytxt); font-family: "Noto Sans Devanagari", "Nirmala UI", Mangal, "Atkinson Hyperlegible", Verdana, sans-serif; } .kl { font-size: 12px; opacity: .8; } .ks { font-size: 15px; } .km { font-size: 24px; font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; font-size: .9rem; } .legend li { display: flex; align-items: center; gap: 6px; } .sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }
.sw.f1 { background: var(--f1); } .sw.f2 { background: var(--f2); } .sw.f3 { background: var(--f3); } .sw.f4 { background: var(--f4); } .sw.f5 { background: var(--f5); } .sw.f6 { background: var(--f6); } .sw.f7 { background: var(--f7); } .sw.f8 { background: var(--f8); }
.card2 { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px 14px; margin: 1.2rem 0; } .card2 h2 { margin-top: 1rem; }
.row { display: grid; gap: 4px; margin: .7rem 0; } .row label { font-weight: 700; } input[type=number] { font: inherit; padding: 10px 12px; min-height: 44px; border-radius: 8px; border: 2px solid var(--line); background: var(--bg); color: var(--text); width: 100%; max-width: 280px; }
.result { font-weight: 700; font-size: 1.1rem; } .check { list-style: none; padding: 0; } .check li { margin: .5rem 0; } .check label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; } .check input { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: .4rem 0; } .chips a { display: inline-block; padding: 10px 14px; min-height: 44px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; font-weight: 700; }
main li > a, td a, th a { display: inline-block; padding: 6px 0; }
.foot { margin-top: 3rem; border-top: 1px solid var(--line); padding: 1rem 0 2rem; color: var(--muted); font-size: .92rem; }
@media print { .top, .foot, .cta .btn:not([onclick]), .crumbs { display: none; } body { background: #fff; color: #000; } }
@media (max-width: 520px) { h1 { font-size: 1.5rem; } tbody th { width: auto; } }