:root{--bg:#F6F1E7;--surface:#FFFDF8;--ink:#1F2A22;--muted:#565F54;--line:#E2D9C8;--green:#2F5D3A;--on-green:#fff;--blue:#2F6B8F;--accent:#E3A93B;--on-accent:#2B1F05;--ph-bg:#FFF4DC;--ph-line:#C98A12;--ph-ink:#7A4E00;--r:18px;--shadow:0 6px 20px rgba(47,93,58,.08);--serif:"Lora",Georgia,serif;--sans:"Nunito",system-ui,sans-serif}
[data-theme=dark]{--bg:#141A16;--surface:#1E2621;--ink:#F1ECE2;--muted:#B3BAAF;--line:#303A33;--green:#8CC79A;--on-green:#10200F;--blue:#8DBFDD;--ph-bg:#3A2E14;--ph-line:#E3A93B;--ph-ink:#F3CF85;--shadow:none}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans)}
h1,h2,h3{font-family:var(--serif);line-height:1.2;margin:0 0 .5em;color:var(--green)}
a{color:var(--blue)}img,svg{display:block;max-width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;font:800 16px var(--sans);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-green{background:var(--green);color:var(--on-green)}
.btn-ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.ph{display:inline-block;background:var(--ph-bg);color:var(--ph-ink);border:1.5px dashed var(--ph-line);border-radius:8px;padding:0 6px;font-weight:700;font-size:.95em}
.ph-box{display:grid;place-items:center;text-align:center;background:var(--ph-bg);color:var(--ph-ink);border:2px dashed var(--ph-line);border-radius:var(--r);padding:18px;font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);font-weight:800;font-size:13px}
.demo-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700}
.demo-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.logo{display:flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;color:var(--green);font:700 20px var(--serif);letter-spacing:.02em}
.logo svg,.logo img{width:40px;height:30px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}