:root{--bg:#eceff1;--fg:#0f1c24;--muted:#52616b;--panel:#f8fafb;--line:#c9d2d8;--accent:#9a6a12;--accent-fg:#fff;--accent-ink:#7a5209;--teal:#3d5566;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101a21;--fg:#e8eef2;--muted:#9aaab4;--panel:#16232c;--line:#2b3b46;--accent:#d9a441;--accent-fg:#1b1406;--accent-ink:#d9a441;--teal:#8fb0c4}}
:root[data-theme="dark"]{--bg:#101a21;--fg:#e8eef2;--muted:#9aaab4;--panel:#16232c;--line:#2b3b46;--accent:#d9a441;--accent-fg:#1b1406;--accent-ink:#d9a441;--teal:#8fb0c4}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 "Atkinson Hyperlegible",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;line-height:1.1;margin:0;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);background:#0f1c24;border-bottom:1px solid #2b3b46;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{font:800 22px "Bricolage Grotesque",sans-serif;text-decoration:none;letter-spacing:-.03em;color:#fff}
nav{display:flex;gap:20px}
nav a{text-decoration:none;color:#b4c1ca;font-weight:700}
nav a:hover{color:#fff}
.langsel{font:inherit;font-weight:700;color:#fff;background:#1a2a35;border:1px solid #33454f;border-radius:6px;padding:6px 10px}
.langsel option{background:#1a2a35;color:#fff}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:56px 0 48px}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800}
.hero p{color:var(--muted);max-width:46ch;margin:18px 0 26px}
.btn{display:inline-block;padding:11px 20px;border-radius:6px;font-weight:700;text-decoration:none;border:2px solid var(--accent);color:var(--accent-ink)}
.btn.main{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn+.btn{margin-left:8px}
.frame{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:10px}
.frame svg{display:block;width:100%;height:auto;max-width:100%}
.frame figcaption{font-size:14px;color:var(--muted);padding:8px 2px 0}
.guide{stroke:var(--accent);stroke-width:1.4;fill:none}
.safe{stroke:var(--teal);stroke-width:1.2;fill:none;stroke-dasharray:6 5}
section{padding:40px 0;border-top:1px solid var(--line)}
section>.wrap>h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:6px}
.lead{color:var(--muted);margin:0 0 24px;max-width:60ch}
.tool{display:grid;grid-template-columns:1.2fr 1.6fr auto;gap:20px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.tool:first-of-type{border-top:0}
.tool h3{font-size:22px}
.tool p{margin:0;color:var(--muted)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:13px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--teal);color:var(--teal)}
.tag.soon{border-color:var(--muted);color:var(--muted)}
.tag.cat{background:var(--teal);border-color:var(--teal);color:var(--bg)}
[hidden]{display:none!important}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.chip{font:inherit;font-weight:700;cursor:pointer;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:99px;padding:6px 16px}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.empty{color:var(--muted);padding:20px 0;border-top:1px solid var(--line);margin:0}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:26px;height:26px;color:#fff}
.mark path{stroke:#d9a441}
.mark circle{fill:#d9a441}
.lab{color:#d9a441;font-weight:800}
.dl{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:22px}
.dl-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dl-head h3{font-size:24px}
.ver{color:var(--muted);margin:4px 0 0}
details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-weight:700}
.scroll{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;min-width:480px;margin-top:10px;font-size:16px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:700}
.support{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.support p{margin:10px 0 0;color:var(--muted);max-width:52ch}
.coffee{justify-self:start;font-size:19px;padding:14px 26px}
footer{padding:28px 0 36px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
@media (max-width:760px){
.hero,.support{grid-template-columns:1fr;gap:28px}
.hero{padding-top:36px}
.tool{grid-template-columns:1fr;gap:12px}
}
.sec h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:6px}
.back{display:inline-block;margin:28px 0 12px;font-weight:700;color:var(--accent-ink)}
.tt{font-size:clamp(30px,5vw,48px);margin:0 0 12px;font-weight:800}
.tool h3 a{text-decoration:none}.tool h3 a:hover{text-decoration:underline}
.dl{margin-top:20px}.dl h2{font-size:24px}.dl .btn{margin:4px 8px 4px 0}
main{padding-bottom:40px}

.law h3{font-size:20px;margin:22px 0 4px}
.lp{margin:6px 0 0;max-width:70ch}
.it{margin:4px 0;padding-left:20px;max-width:70ch}
.lic{margin-top:28px}.lic a{color:var(--accent-ink);font-weight:700}