.kb-page{padding:56px 0 100px;display:flex;flex-direction:column;align-items:center}
.kb-intro{text-align:center;max-width:46ch;margin-bottom:20px}
.kb-intro .hero__eyebrow{margin-bottom:18px}
.kb-intro h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-0.02em;margin:0 0 10px}
.kb-intro p{color:var(--ink-soft);margin:0;line-height:1.6}
.kb-tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;max-width:fit-content;margin:0 auto 20px}
.kb-tab{border:none;background:transparent;padding:9px 18px;border-radius:999px;font-weight:600;font-size:.84rem;color:var(--ink-soft);cursor:pointer;transition:all var(--dur-fast) var(--ease);white-space:nowrap}
.kb-tab:hover{color:var(--ink)}.kb-tab.is-active{background:var(--ink);color:#fff}
.kb-content{width:100%;max-width:560px;margin-bottom:28px}
.kb-calculator{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.kb-input-group{display:flex;flex-direction:column;gap:4px}
.kb-input-group label{font-size:.74rem;font-weight:600;color:var(--ink-soft)}
.kb-textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--font-mono);font-size:.9rem;background:var(--bg);color:var(--ink);resize:vertical;transition:border-color var(--dur-fast) var(--ease)}
.kb-textarea:focus{outline:none;border-color:var(--accent)}
.kb-format-row{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.kb-format-btn{border:1px solid var(--line);background:transparent;padding:6px 14px;border-radius:999px;font-weight:600;font-size:.76rem;color:var(--ink-soft);cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.kb-format-btn:hover{color:var(--ink)}.kb-format-btn.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.kb-output-wrap{display:flex;flex-direction:column;gap:8px}
.kb-output-label{font-size:.7rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.kb-output-box{background:var(--ink);border-radius:10px;padding:14px;max-height:200px;overflow-y:auto}
.kb-output{font-family:var(--font-mono);font-size:.82rem;color:var(--highlight);word-break:break-all;white-space:pre-wrap;line-height:1.6}
.kb-copy-btn{border:1px solid var(--line);background:var(--surface);padding:8px 16px;border-radius:999px;font-weight:600;font-size:.8rem;cursor:pointer;transition:all var(--dur-fast) var(--ease);align-self:flex-end}
.kb-copy-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.kb-ascii{width:100%;max-width:560px;text-align:center}
.kb-ascii h2{font-family:var(--font-display);font-size:1.1rem;margin:0 0 12px}
.kb-ascii-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:8px;max-height:300px;overflow-y:auto}
.kb-ascii-cell{text-align:center;padding:6px 2px;border-radius:6px;font-family:var(--font-mono);font-size:.65rem;color:var(--ink);background:rgba(27,31,59,.02)}
.kb-ascii-cell span{display:block;font-size:.55rem;color:var(--ink-soft)}