/* Shared look for tappykeys.com guide pages (served at /learn/site.css) */
:root{--violet:#6B4DE6;--violet-d:#4F33C4;--violet-dd:#3D2699;--violet-l:#8F77F2;--lav:#F1EEFF;--lav-2:#E1DAFF;--lav-3:#C9BFF7;
  --teal:#45D6C4;--teal-d:#1FA595;--pink:#F66AA5;--pink-d:#D44585;--sun:#FFCB45;--sun-d:#E0A516;--orange:#FF9A5C;
  --ink:#241A52;--ink-2:#5F5690;
  --f-p:#F77FB0;--f-r:#FFA564;--f-m:#FFD04F;--f-i:#45D6C4;--f-t:#B9A8FF;
  --font:"Lexend","Avenir Next","Segoe UI",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--violet);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--violet);font-weight:600;text-underline-offset:3px}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

.top{max-width:1040px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:.16em}
.cap{width:34px;height:32px;border-radius:9px;background:var(--sun);color:var(--ink);display:grid;place-items:center;letter-spacing:0;box-shadow:0 4px 0 var(--sun-d)}
.nav{display:flex;align-items:center;gap:14px}
.nav a{color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.nav a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:var(--teal);color:var(--ink)!important;
  font:inherit;font-weight:700;font-size:17px;padding:12px 24px;text-decoration:none;box-shadow:0 5px 0 var(--teal-d);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--teal-d)}
.btn.sun{background:var(--sun);box-shadow:0 5px 0 var(--sun-d)}
.btn.small{font-size:15px;padding:9px 18px}

main{max-width:1040px;margin:0 auto;padding:4px 16px 56px}
.hero{color:#fff;padding:18px 0 28px;max-width:46em}
.crumb{margin:0;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#DCD4FF}
.crumb a{color:#DCD4FF;font-weight:600}
h1{margin:8px 0 12px;font-size:clamp(32px,5vw,50px);line-height:1.08;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.hero .lede{margin:0;font-size:clamp(17px,2vw,20px);color:#ECE8FF}
.card{background:#fff;border-radius:32px;padding:clamp(22px,4.5vw,52px);box-shadow:0 14px 0 -4px rgba(36,26,82,.22)}
.card > *:first-child{margin-top:0}
h2{font-size:clamp(22px,2.8vw,28px);line-height:1.2;margin:40px 0 10px;font-weight:800;text-wrap:balance}
h3{font-size:19px;line-height:1.3;margin:26px 0 6px;font-weight:700}
p,li{max-width:68ch}
ul,ol{padding-left:24px}
li{margin:6px 0}
.meta{color:var(--ink-2);font-size:14px}
.tip{background:var(--lav);border-radius:20px;padding:16px 20px;margin:18px 0}
.tip b{color:var(--violet)}
.tbl{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:2px solid var(--lav-2)}
th{background:var(--lav);font-weight:700}
td:first-child{font-weight:700;white-space:nowrap}

/* Play call-to-action */
.play-cta{display:flex;align-items:center;gap:22px;background:var(--violet);color:#fff;border-radius:28px;padding:22px 26px;margin:36px 0 8px}
.play-cta svg{width:92px;flex:none}
.play-cta b{display:block;font-size:22px;line-height:1.2}
.play-cta p{margin:4px 0 14px;color:#E4DEFF}
@media (max-width:560px){.play-cta{flex-direction:column;text-align:center}}

/* Related guides */
.related{margin-top:30px}
.related ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.related li{margin:0}
.related a{display:block;background:var(--lav);border-radius:18px;padding:14px 16px;text-decoration:none;color:var(--ink);height:100%}
.related a:hover{background:var(--lav-2)}
.related small{display:block;color:var(--violet);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* Topic cards */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:18px 0}
.topic{background:var(--lav);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:6px}
.topic h2{margin:0;font-size:22px}
.topic p{margin:0;font-size:15px;color:var(--ink-2)}
.topic .words{font-family:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,monospace;font-size:14px;color:var(--ink);background:#fff;border-radius:12px;padding:8px 10px}
.topic .btn{align-self:flex-start;margin-top:8px}
.swatch{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:800;box-shadow:0 4px 0 rgba(36,26,82,.2)}

/* Keyboard chart */
.chart-sheet{border:3px dashed var(--lav-3);border-radius:24px;padding:22px;margin:18px 0}
.chart-sheet h2{margin:0 0 4px;text-align:center}
.chart-sheet .sub{text-align:center;margin:0 auto 14px;color:var(--ink-2);max-width:none}
.kbchart{display:block;width:100%;height:auto}
.kbchart text{font-family:var(--font)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin:16px 0 4px;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;font-size:15px}
.legend i{width:22px;height:22px;border-radius:7px;display:inline-block}
.sheet-foot{text-align:center;font-size:14px;color:var(--ink-2);margin:10px 0 0;max-width:none}
.print-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}

footer{color:#DCD4FF;text-align:center;font-size:14px;padding-top:30px}
footer a{color:#fff;font-weight:600}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:8px}

@media print{
  @page{size:landscape;margin:12mm}
  body{background:#fff}
  .top,.hero,footer,.no-print,.play-cta,.related{display:none!important}
  main{padding:0;max-width:none}
  .card{box-shadow:none;padding:0;border-radius:0}
  .card > :not(.chart-sheet){display:none!important}
  .chart-sheet{border:0;padding:0;margin:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}