
:root{--ink:#17202a;--muted:#607080;--paper:#fffdf8;--panel:#f3f6f3;--line:#d9e1dc;--brand:#146b57;--brand2:#0b4a3d;--warm:#ffedc8;--danger:#8d2f23;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.68}
a{color:var(--brand2);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}.wrap{width:min(var(--max),calc(100% - 32px));margin:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:white;padding:10px;z-index:99}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{min-height:68px;display:flex;align-items:center;gap:26px}.brand{font-weight:850;font-size:1.35rem;text-decoration:none;color:var(--ink);letter-spacing:-.03em}.brand span{color:var(--brand)}
.navlinks{display:flex;gap:20px;align-items:center;margin-left:auto}.navlinks a{text-decoration:none;font-weight:650;color:var(--ink)}.menu-btn{display:none;margin-left:auto;background:white;border:1px solid var(--line);padding:8px 11px;border-radius:8px}
.hero{padding:68px 0 44px;background:linear-gradient(135deg,#eef8f2,#fff7e8)}.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center}.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--brand)}
h1,h2,h3{line-height:1.16;letter-spacing:-.035em}h1{font-size:clamp(2.35rem,5vw,4.8rem);margin:.15em 0 .25em}h2{font-size:clamp(1.65rem,3vw,2.55rem);margin:1.45em 0 .45em}h3{font-size:1.25rem;margin:1.25em 0 .3em}p{margin:.55em 0 1em}.lead{font-size:1.18rem;color:#34454f;max-width:760px}
.hero-card{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 16px 45px #183b2b14}.hero-card strong{font-size:1.15rem}.stat{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:white!important;border:0;border-radius:10px;padding:11px 17px;font-weight:760;text-decoration:none;cursor:pointer}.btn.secondary{background:white;color:var(--brand2)!important;border:1px solid var(--brand)}
.section{padding:52px 0}.section.tint{background:var(--panel)}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}.section-head h2{margin:0}.section-head p{max-width:650px;margin:0;color:var(--muted)}
.grid{display:grid;gap:20px}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:21px;display:flex;flex-direction:column}.card h3{margin:.2em 0 .45em}.card p{color:#4e5d66}.card .meta{font-size:.87rem;color:var(--muted);margin-top:auto}.icon{font-size:2rem}.card-link{text-decoration:none;color:inherit}.card-link:hover{transform:translateY(-2px);box-shadow:0 10px 28px #16382a12;transition:.18s}
.finder{background:#173e34;color:white;border-radius:20px;padding:28px}.finder label{display:block;font-weight:750;margin-bottom:8px}.finder select,.finder input{width:100%;padding:13px;border-radius:9px;border:0;font:inherit}.finder-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.finder-results a{background:white;color:var(--ink);padding:14px;border-radius:10px;text-decoration:none}
.breadcrumb{font-size:.9rem;color:var(--muted);padding:20px 0 0}.article-layout{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:46px;align-items:start}.article{padding-bottom:60px}.article h1{font-size:clamp(2.2rem,4vw,3.8rem)}.article-cover{border-radius:18px;border:1px solid var(--line);margin:18px 0 24px;width:100%;aspect-ratio:16/9;object-fit:cover}
.answer{font-size:1.13rem;background:#eaf6ef;border-left:5px solid var(--brand);padding:18px 20px;border-radius:8px}.safety{background:#fff3ec;border:1px solid #efc8b7;border-radius:12px;padding:17px}.safety strong{color:var(--danger)}
.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;position:sticky;top:88px}.toc strong{display:block;margin-bottom:8px}.toc a{display:block;padding:5px 0;text-decoration:none}.byline{display:flex;gap:13px;align-items:center;color:var(--muted);font-size:.92rem}.badge{background:var(--warm);padding:5px 9px;border-radius:999px;color:#5d461d;font-weight:750}
table{border-collapse:collapse;width:100%;margin:18px 0 26px;font-size:.95rem}th,td{text-align:left;vertical-align:top;border:1px solid var(--line);padding:12px}th{background:#edf3ef}
.steps{counter-reset:step;list-style:none;padding:0}.steps li{position:relative;padding:0 0 25px 55px}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;background:var(--brand);color:white;border-radius:50%;display:grid;place-items:center;font-weight:800}.steps li strong{display:block;font-size:1.08rem}
.callout{background:#f7f3e8;border:1px solid #e6dcc3;border-radius:12px;padding:18px}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related a{border:1px solid var(--line);border-radius:10px;padding:13px;text-decoration:none;background:white}
.tool-shell{display:grid;grid-template-columns:1fr 1fr;gap:26px}.calculator{background:white;border:1px solid var(--line);border-radius:16px;padding:22px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-weight:700;margin-bottom:5px}.field input,.field select{width:100%;padding:11px;border:1px solid #b9c7c0;border-radius:8px;font:inherit}.result{margin-top:18px;background:#eaf6ef;border-radius:12px;padding:18px;min-height:90px}.result .big{font-size:2rem;font-weight:850;letter-spacing:-.04em}.note{font-size:.9rem;color:var(--muted)}
.searchbox{width:100%;padding:15px;border:1px solid #aebdb5;border-radius:10px;font:inherit}.search-results{margin-top:18px}.search-item{padding:16px 0;border-bottom:1px solid var(--line)}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.check{background:white;border:1px solid var(--line);padding:13px;border-radius:9px}.check input{margin-right:8px}
.site-footer{background:#132a24;color:#dce9e3;padding:42px 0 24px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.site-footer a{color:#e8f5ef}.footer-bottom{border-top:1px solid #ffffff2d;margin-top:28px;padding-top:18px;color:#aebfb7;font-size:.9rem}
.notice{background:#fff8dd;border:1px solid #ead99b;padding:14px;border-radius:10px}.pill{display:inline-block;font-size:.82rem;background:#edf3ef;padding:4px 8px;border-radius:99px;margin-right:5px}
@media(max-width:900px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}.hero-grid,.article-layout,.tool-shell{grid-template-columns:1fr}.toc{position:static}.article-layout aside{order:-1}.finder-results,.related{grid-template-columns:1fr}.navlinks{display:none;position:absolute;top:68px;left:0;right:0;background:white;padding:18px 24px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.navlinks.open{display:flex}.menu-btn{display:block}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.grid-4,.grid-3,.grid-2,.fields,.checklist,.footer-grid{grid-template-columns:1fr}.hero{padding-top:42px}.section{padding:38px 0}.wrap{width:min(100% - 22px,var(--max))}h1{font-size:2.35rem}.article h1{font-size:2.25rem}}

/* Consent banner */
.consent-banner{position:fixed;z-index:9999;left:18px;right:18px;bottom:18px;display:flex;gap:24px;align-items:center;justify-content:space-between;max-width:1120px;margin:auto;padding:18px 20px;border:1px solid #d8e2dd;border-radius:14px;background:#fff;box-shadow:0 12px 40px rgba(15,45,35,.18)}
.consent-banner p{margin:.35rem 0 0;max-width:720px}.consent-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.consent-actions .btn{border:0;cursor:pointer;white-space:nowrap}.consent-actions a{font-size:.9rem}
@media(max-width:760px){.consent-banner{display:block;left:10px;right:10px;bottom:10px}.consent-actions{margin-top:14px}.consent-actions .btn{width:100%}}

.author-box{margin:2rem 0;padding:1.25rem;border:1px solid #cbd8d1;border-radius:14px;background:#f7faf8}.author-box h2{margin-top:0}.step-check{margin:.65rem 0 0;padding:.7rem .8rem;background:#f4f7f5;border-left:4px solid #517468;border-radius:0 8px 8px 0}.byline a{font-weight:700}

/* KalOnline documentation hub */
.doc-hero{background:linear-gradient(135deg,#102a43,#244e69);color:#fff;padding:3rem 0}.doc-hero .eyebrow{color:#ffd7a8}.doc-hero p{max-width:760px;font-size:1.12rem}.doc-nav{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}.doc-nav a{color:#fff;border:1px solid rgba(255,255,255,.35);padding:.5rem .75rem;border-radius:999px;text-decoration:none}.doc-nav a:hover{background:rgba(255,255,255,.12)}.diagram{margin:1.25rem 0;background:#f4f8fb;border:1px solid #dbe7ef;border-radius:16px;padding:.8rem;overflow:auto}.diagram img{display:block;width:100%;height:auto;min-width:640px}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}.topic-card{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem;border:1px solid #dbe2e8;border-radius:14px;background:#fff;text-decoration:none;color:inherit}.topic-card:hover{box-shadow:0 8px 24px rgba(20,45,60,.1);transform:translateY(-1px)}.topic-card span{color:#52606d}.callout{border-left:5px solid #d65b30;background:#fff6ed;padding:1rem 1.1rem;border-radius:10px;margin:1rem 0}.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;background:#111;margin:1.2rem 0 2rem}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.legacy-disclosure{font-size:.92rem;color:#52606d;border-top:1px solid #e2e8ee;padding-top:1rem;margin-top:2rem}@media(max-width:700px){.doc-hero{padding:2rem 0}.diagram img{min-width:560px}}

/* v2 final discoverability */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.hero-card form{display:grid;gap:10px}.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.library-card{display:block;border:1px solid var(--line);border-radius:22px;padding:30px;text-decoration:none;color:var(--ink);min-height:270px;box-shadow:0 12px 35px #173e340d}.library-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px #173e3418}.home-library{background:linear-gradient(145deg,#eef8f2,#fff)}.game-library{background:linear-gradient(145deg,#f1f0ff,#fff7ea)}.library-kicker{display:inline-block;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--brand2)}.library-card h3{font-size:clamp(1.6rem,3vw,2.3rem);max-width:560px}.text-link{font-weight:800}.featured-card{border:2px solid var(--brand)}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden}.trust-strip>div{padding:20px;border-right:1px solid var(--line)}.trust-strip>div:last-child{border-right:0}.trust-strip strong,.trust-strip span{display:block}.trust-strip span{font-size:.9rem;color:var(--muted);margin-top:5px}.kal-feature{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;background:#f3f1ff;border:1px solid #dad5f3;border-radius:20px;padding:28px}.kal-feature img{width:100%;background:white;border-radius:14px;padding:10px}.search-item{padding:16px 0;border-bottom:1px solid var(--line)}.editor-note{border-top:1px solid var(--line);margin-top:38px;padding-top:12px}.editor-note p{color:var(--muted)}@media(max-width:850px){.library-grid,.kal-feature,.trust-strip{grid-template-columns:1fr}.trust-strip>div{border-right:0;border-bottom:1px solid var(--line)}.trust-strip>div:last-child{border-bottom:0}}

/* v2 final discoverability */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.hero-card form{display:grid;gap:10px}.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.library-card{display:block;border:1px solid var(--line);border-radius:22px;padding:30px;text-decoration:none;color:var(--ink);min-height:270px;box-shadow:0 12px 35px #173e340d}.library-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px #173e3418}.home-library{background:linear-gradient(145deg,#eef8f2,#fff)}.game-library{background:linear-gradient(145deg,#f1f0ff,#fff7ea)}.library-kicker{display:inline-block;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--brand2)}.library-card h3{font-size:clamp(1.6rem,3vw,2.3rem);max-width:560px}.text-link{font-weight:800}.featured-card{border:2px solid var(--brand)}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden}.trust-strip>div{padding:20px;border-right:1px solid var(--line)}.trust-strip>div:last-child{border-right:0}.trust-strip strong,.trust-strip span{display:block}.trust-strip span{font-size:.9rem;color:var(--muted);margin-top:5px}.kal-feature{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;background:#f3f1ff;border:1px solid #dad5f3;border-radius:20px;padding:28px}.kal-feature img{width:100%;background:white;border-radius:14px;padding:10px}.search-item{padding:16px 0;border-bottom:1px solid var(--line)}.editor-note{border-top:1px solid var(--line);margin-top:38px;padding-top:12px}.editor-note p{color:var(--muted)}@media(max-width:850px){.library-grid,.kal-feature,.trust-strip{grid-template-columns:1fr}.trust-strip>div{border-right:0;border-bottom:1px solid var(--line)}.trust-strip>div:last-child{border-bottom:0}}
