/* Learn section (tools, guides, quizzes). Uses the variables of site.css. No external requests. */
.crumbs{font-family:var(--mono);font-size:13px;color:var(--dim);margin-bottom:14px}
.crumbs a{color:var(--dim)}.crumbs a:hover{color:#fff}
.learn-head{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.learn-head h1{font-size:36px;line-height:1.15;font-weight:600}
.section-title{font-size:20px;font-weight:600;margin:34px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--text)}
a.card:hover{border-color:var(--accent-text);color:var(--text)}
.card h3{margin:0;font-size:17px;font-weight:600}
.card p{font-size:14px;color:var(--text2);line-height:1.5}
.card .go{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;color:var(--accent-text)}
.tool{display:flex;flex-direction:column;gap:18px;max-width:1000px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;align-items:start}
.tbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tbox h2{font-size:17px;font-weight:600}
.tlabel{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)}
.tfield{height:44px;padding:0 12px;border-radius:6px;border:1px solid var(--line2);background:var(--card);color:#fff;font:inherit;font-size:15px;width:100%;min-width:0}
.tfield.mono{font-family:var(--mono)}
.tfield:focus{border-color:var(--accent);outline:none}
.tfield.bad{border-color:var(--bad)}
.fgroup{display:flex;flex-direction:column;gap:6px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text2);cursor:pointer;line-height:1.4}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);flex:0 0 auto}
.toggle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tcol{display:flex;flex-direction:column;gap:8px}
.tgl{min-height:44px;border-radius:6px;border:1px solid var(--line2);background:var(--card);color:var(--dim);font-family:var(--mono);font-size:14px;cursor:pointer;padding:0 8px}
.tgl:hover{border-color:var(--accent-text)}
.tgl[aria-pressed=true]{border-color:var(--accent);background:var(--sel);color:#fff}
.big{font-family:var(--mono);font-size:44px;letter-spacing:.2em;text-align:center;color:#fff;line-height:1.2}
.sym{font-family:var(--mono);text-align:center;color:var(--accent-text);font-size:18px;letter-spacing:.06em}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-family:var(--mono);font-size:14px;line-height:1.7;white-space:pre;overflow-x:auto;margin:0;color:var(--text)}
.code.wrap-text{white-space:pre-wrap;word-break:break-all}
.copy{min-height:36px;padding:0 12px;font-size:13px}
.human{color:var(--text2);font-size:16px;line-height:1.6}
.human b{color:#fff;font-weight:500}
.hint-box{border-left:3px solid var(--accent);background:var(--alert-bg);padding:12px 14px;border-radius:0 6px 6px 0;font-size:14px;color:var(--text2);line-height:1.6}
.hint-box.warn{border-left-color:var(--warn)}
.hint-box b{color:var(--text);font-weight:500}
.hint-box ol,.hint-box ul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.ic{font-family:var(--mono);font-size:.92em;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1px 5px;word-break:break-word}
.explain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--text2)}
.explain .flag{font-family:var(--mono);color:var(--accent-text);font-weight:500}
.fs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fs-btn{width:100%;text-align:left;min-height:44px;padding:8px 12px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--text2);font-family:var(--mono);font-size:14px;cursor:pointer}
.fs-btn:hover{border-color:var(--line2)}
.fs-btn[aria-pressed=true]{border-color:var(--accent);background:var(--sel);color:#fff}
.badge{display:inline-block;align-self:flex-start;font-size:13px;padding:4px 10px;border-radius:6px;border:1px solid var(--line2);color:var(--text2)}
.badge b{color:var(--accent-text);font-weight:500}
.result{min-height:24px;font-size:15px;color:var(--text2)}
.result .ic{color:#fff}
.cron-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cron-fields label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);text-align:center}
.cron-fields .tfield{text-align:center;font-family:var(--mono)}
.cron-main{font-size:24px;text-align:center;letter-spacing:.12em;height:56px}
.range{width:100%;accent-color:var(--accent)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pwd{font-size:18px;text-align:center}
.ent{font-family:var(--mono);font-size:13px;padding:6px 10px;border-radius:6px;border:1px solid currentColor;align-self:flex-start}
.ent.weak{color:var(--bad)}.ent.fair{color:var(--warn)}.ent.good{color:var(--limit)}.ent.strong{color:var(--ok)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.prose-sm p{color:var(--text2);line-height:1.65;font-size:15px}
.prose-sm p+p{margin-top:8px}
@media (max-width:640px){
  .learn-head h1{font-size:28px}
  .big{font-size:34px}
  .cron-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:1fr}
  .toggle-grid{gap:8px}
  .tgl{font-size:13px}
}
.cards+.note,.tool .note{margin-top:4px}
.learn-more{margin-top:18px}
[hidden]{display:none!important}
ul.hint-box{margin:0;padding-left:32px;display:flex;flex-direction:column;gap:6px}
/* guides */
.guide{max-width:820px;display:flex;flex-direction:column;gap:14px}
.guide h2{font-size:22px;font-weight:600;margin-top:22px;scroll-margin-top:16px}
.guide h3{font-size:17px;font-weight:600;margin:10px 0 0}
.guide p,.guide li{color:var(--text2);line-height:1.65;font-size:16px}
.guide ol,.guide ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.guide b{color:var(--text);font-weight:500}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.toc ol{gap:4px}
.toc a{color:var(--accent-text)}
.keys-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table.keys{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
table.keys th,table.keys td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);color:var(--text2)}
table.keys th{background:var(--panel);color:var(--text);font-weight:500;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
table.keys tr:last-child td{border-bottom:0}
.meta-line{font-family:var(--mono);font-size:13px;color:var(--dim)}