/* Calculator demo v2: semantic tokens for the complete light/dark experience. */
:root{font-family:Inter,system-ui,sans-serif;font-synthesis:none;color-scheme:dark;--page:#0d1729;--ink:#e6f4ff;--muted:#a6bbd7;--eyebrow:#7fc5fa;--panel:#14233b;--border:#2d4966;--input:#0a1424;--inputborder:#52698a;--label:#b6c9df;--result:#64d7b8;--metric:#bed1e8;--divider:#2c405b;--footer:#9fb5d1}
:root[data-xep-theme="light"]{color-scheme:light;--page:#f3f7fc;--ink:#183152;--muted:#536b84;--eyebrow:#2464a4;--panel:#fff;--border:#d2deec;--input:#fff;--inputborder:#7e91aa;--label:#38536f;--result:#006e5b;--metric:#39536f;--divider:#dae4ee;--footer:#506b88}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-size:16px;line-height:1.5;min-height:100vh}
.wrap{margin:auto;max-width:900px;padding:48px 22px}
.eyebrow{color:var(--eyebrow);font-size:12px;letter-spacing:.17em;font-weight:800}
h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.045em;line-height:1.1;margin:14px 0}
.lead{color:var(--muted);max-width:620px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;min-width:0}
label{display:block;font-size:14px;color:var(--label);margin:16px 0 6px}
input{width:100%;border:1px solid var(--inputborder);border-radius:9px;background:var(--input);color:var(--ink);padding:13px;font:inherit}
input:focus-visible{outline:3px solid #4e9ef2;outline-offset:2px}
.result{font-size:clamp(30px,4.8vw,48px);font-weight:800;letter-spacing:-.04em;color:var(--result);margin:5px 0;overflow-wrap:anywhere}
.small{color:var(--muted);font-size:13px;line-height:1.6}
.metrics{margin-top:25px;border-top:1px solid var(--divider);padding-top:20px}
.metrics div{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin-bottom:12px;color:var(--metric);font-size:14px}
.metrics strong{color:var(--ink);overflow-wrap:anywhere}
.demo-footer{background:var(--xep-brand-primary,#102c54);color:var(--xep-brand-primary-on,#fff);margin-top:40px}
.demo-footer__inner{width:min(900px,100%);margin:0 auto;padding:20px 22px 28px}
.exchange-note,.legal{font-size:12px;color:inherit;opacity:.9;margin:7px 0;line-height:1.65}
@media(max-width:620px){.wrap{padding:35px 17px}.grid{grid-template-columns:1fr}.panel{padding:20px}.metrics div{gap:8px}}

/* Identity and footer standard. Does not override the existing light/dark tokens. */
.xep-header__brand{display:flex;align-items:center;gap:10px}
.xep-header__brand>span{display:block;min-width:0}
.xep-header__logo{display:block;flex:0 0 auto;width:46px;height:46px;object-fit:contain}
.brand-copyright{padding-top:13px;border-top:1px solid currentColor;opacity:.83;font-size:12px;line-height:1.5;margin-top:20px}
@media(max-width:380px){.xep-header__brand{gap:6px}.xep-header__logo{width:35px;height:35px}}