:root{--bg:#f1f5ec;--card:#fff;--ink:#1d2a3f;--mute:#5a6678;--leaf:#2b7a4b;--leaf2:#dcebdc;--sun:#e3a008;--line:#c9d6c4;--bad:#b3402a;
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:#121a15;--card:#1b261f;--ink:#e8efe6;--mute:#a1b0a3;--leaf:#5cc486;--leaf2:#22352a;--sun:#f0b73a;--line:#32463a;--bad:#ef8a73;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121a15;--card:#1b261f;--ink:#e8efe6;--mute:#a1b0a3;--leaf:#5cc486;--leaf2:#22352a;--sun:#f0b73a;--line:#32463a;--bad:#ef8a73;color-scheme:dark}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Nunito Sans",system-ui,sans-serif;
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background:var(--bg);opacity:.9;z-index:-1}
h1,h2,h3{font-family:Bitter,Georgia,serif;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.8rem,6vw,3rem);font-weight:800}h2{font-size:1.6rem}h3{font-size:1.15rem}
a{color:var(--leaf)}.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
header{background:var(--card);border-bottom:3px solid var(--sun);position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px}
.logo{font:800 1.3rem Bitter,serif;color:var(--ink);text-decoration:none;margin-right:auto}
.logo span{color:var(--leaf)}
nav a.t{color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;padding:4px 2px;border-bottom:2px solid transparent}
nav a.t.on,nav a.t:hover{border-color:var(--leaf)}
nav{display:flex;flex-wrap:wrap;gap:4px 14px}
.hero{padding:30px 0 10px}.hero p{max-width:60ch;color:var(--mute);font-size:1.05rem}
.card{background:var(--card);border:2px solid var(--ink);border-radius:4px 18px 4px 18px;padding:18px;margin:16px 0;box-shadow:5px 5px 0 var(--leaf2)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
label{display:block;font-weight:700;font-size:.9rem;margin:10px 0 4px}
input,select,textarea{width:100%;padding:10px;border:2px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:1px}
button,.btn{background:var(--leaf);color:#fff;border:0;padding:11px 20px;border-radius:6px;font:700 1rem "Nunito Sans",sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
:root[data-theme="dark"] button{color:#0d1a12}
.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.res{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.res div{background:var(--leaf2);padding:10px 12px;border-radius:8px}.res b{display:block;font:800 1.35rem Bitter,serif}.res small{color:var(--mute)}
.profit b{color:var(--leaf)}.loss b{color:var(--bad)}
.bar{display:flex;height:22px;border-radius:5px;overflow:hidden;margin:8px 0;border:1px solid var(--ink)}
.bar i{display:block}.leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--mute)}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}th{background:var(--leaf2);cursor:default}
.note{font-size:.85rem;color:var(--mute);border-left:4px solid var(--sun);padding-left:10px;margin-top:12px}
.pill{display:inline-block;background:var(--leaf2);border-radius:20px;padding:2px 10px;font-size:.8rem;margin:2px 2px 0 0}
.ad{min-height:90px;margin:18px 0;text-align:center;color:var(--mute);font-size:.75rem}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 140px}

footer{background:var(--ink);color:#e8efe6;margin-top:40px;padding:26px 0 calc(26px + env(safe-area-inset-bottom,0px));font-size:.9rem}
footer a{color:var(--sun);margin-right:14px}
ul.l{padding-left:20px}ul.l li{margin:4px 0}
@media (prefers-reduced-motion:no-preference){section.pg.on{animation:in .3s}}@keyframes in{from{opacity:.3}to{opacity:1}}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center;padding:26px 0 8px}.hero-i{width:100%;height:auto;border-radius:4px 28px 4px 28px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--sun)}
.hero p{margin:0 0 18px}.hero .btn{margin:0 8px 8px 0}
.banner{display:block;width:100%;height:auto;min-height:110px;max-height:240px;object-fit:cover;border-radius:4px 18px 4px 18px;border:2px solid var(--ink);margin:16px 0 4px}
.thumb{display:block;width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:12px;border:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:18px 0}.stats div{background:var(--ink);color:var(--bg);padding:12px;border-radius:8px;text-align:center;font-size:.85rem}.stats b{display:block;font:800 1.6rem Bitter,serif;color:var(--sun)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.steps li{counter-increment:s;background:var(--leaf2);border-radius:8px;padding:12px 12px 12px 48px;position:relative}.steps li::before{content:counter(s);position:absolute;left:12px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--leaf);color:#fff;font-weight:800;text-align:center;line-height:26px}
.cta{background:var(--leaf);color:#fff;border-radius:4px 18px 4px 18px;padding:20px;margin:16px 0}.cta h2{margin-bottom:.3em}.cta .btn{background:#fff;color:#1d2a3f;margin-top:6px}
@media (max-width:700px){.hero{grid-template-columns:minmax(0,1fr)}.hero-i{order:-1}nav{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}nav a.t{white-space:nowrap}}

html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}.grid>*,.hero>*,.row>*{min-width:0}
.thumb,.banner,.hero-i{max-width:100%}.wrap{width:100%}
@media (min-width:1100px){.wrap{max-width:1120px}.hero h1{font-size:3.2rem}}
@media (max-width:480px){.card{padding:14px}.res b{font-size:1.15rem}.stats b{font-size:1.3rem}h2{font-size:1.4rem}}