:root{--bg:#f2f5f3;--s:#fff;--ink:#12201c;--mut:#5d6b66;--bd:#dde4e0;--p:#0f6b5c;--on:#fff;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#0d1512;--s:#16211d;--ink:#e9f1ed;--mut:#9fb0a8;--bd:#263631;--p:#35c2a8;--on:#06231d}}
*{box-sizing:border-box}html{scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
a{color:var(--p)}
.top{max-width: 760px;margin: 0 auto;position:sticky;top:0;z-index:5;background:var(--bg);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--bd)}
.logo{font-weight:800;font-size:20px;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
main{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:clamp(26px,6vw,36px);line-height:1.15;margin:8px 0;letter-spacing:-.025em}
h2{font-size:19px;margin:28px 0 10px}h2 a{color:inherit;text-decoration:none}
.hero{background:var(--p);color:var(--on);border-radius:24px;padding:24px 20px}
.hero h1{margin-top:0}.hero p{margin:0 0 16px;opacity:.92}.hero input{border:0}
input,textarea,select{width:100%;padding:13px 14px;border:1.5px solid var(--bd);border-radius:14px;background:var(--s);color:var(--ink);font:inherit;margin-top:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible,.b:focus-visible,.card:focus-visible,.bar a:focus-visible{outline:3px solid var(--p);outline-offset:2px}
input[type=color]{height:48px;padding:4px}
.g{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.g{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;align-items:center;gap:10px;background:var(--s);border:1px solid var(--bd);border-radius:16px;padding:10px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;line-height:1.25;min-height:62px}
.card[hidden],section[hidden]{display:none}
.card i{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-style:normal;font-size:21px;background:color-mix(in srgb,var(--k) 20%,transparent)}
.c-finance{--k:#0f9d84}.c-health{--k:#e0445f}.c-convert{--k:#3b6fd4}.c-date{--k:#d99a1b}.c-text{--k:#8a55d6}.c-utility{--k:#ee7a2c}.c-pdf-image{--k:#1f9ac0}
.bc{font-size:13px;color:var(--mut)}.bc a{color:inherit}
.lead{color:var(--mut);margin:0 0 16px}
#tool{background:var(--s);border:1px solid var(--bd);border-radius:20px;padding:16px}
label{display:block;margin-bottom:12px;font-size:14px;color:var(--mut)}
.b{display:inline-block;background:var(--p);color:var(--on);border:0;border-radius:14px;padding:13px 20px;font:inherit;font-weight:700;text-decoration:none;margin-top:6px;cursor:pointer}
#out{margin-top:14px;border-top:1px dashed var(--bd)}#out:empty{display:none}
.r{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}.r:last-child{border:0}.r b{text-align:right;word-break:break-word}
pre{white-space:pre-wrap;word-break:break-all;margin:10px 0;font:14px ui-monospace,Menlo,monospace}
.sw{height:60px;border-radius:12px;margin:10px 0}.qr{display:flex;justify-content:center;padding:16px;background:#fff;border-radius:12px;margin-top:10px}
.m{color:var(--mut)}
.txt ol{padding-left:22px}.txt p,.txt li{max-width:70ch}
.ex{background:var(--s);border:1px solid var(--bd);border-radius:14px;padding:2px 14px}
details{background:var(--s);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;margin-bottom:8px}summary{font-weight:700;cursor:pointer}details p{margin:8px 0 0}
.note{font-size:13px;color:var(--mut)}
footer{max-width:760px;margin:16px auto 0;padding:16px;font-size:14px;color:var(--mut);border-top:1px solid var(--bd)}footer a{margin-right:12px;color:inherit}
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;background:var(--s);border-top:1px solid var(--bd);padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));z-index:5}
.bar a{flex:1;max-width:130px;text-align:center;text-decoration:none;color:var(--mut);font-size:12px;font-weight:600;padding:4px;border-radius:12px}
.bar a b{display:block;font-size:20px;font-weight:400}.bar a.on{color:var(--p);background:color-mix(in srgb,var(--p) 14%,transparent)}
.c-math{--k:#d6409f}.c-developer{--k:#64748b}
.c-science{--k:#16a34a}.c-everyday{--k:#c0841a}.c-education{--k:#6366f1}