@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:#16332e;background:#f6f4ee;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}.app{width:min(100%,510px);padding:0 24px max(28px,env(safe-area-inset-bottom));margin:0 auto}.topbar{height:82px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d8ddd5}.brand{font-weight:700;font-size:13px;letter-spacing:.14em;display:flex;align-items:center;gap:9px}.brand-mark{width:30px;height:30px;border-radius:9px;background:#183e36;color:#fff;font-size:23px;line-height:26px;text-align:center;letter-spacing:0}.top-label{color:#87918c;font-size:10px;font-weight:700;letter-spacing:.15em}.intro{padding:37px 0 28px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:700;color:#668377;display:flex;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;background:#ed9f6e;box-shadow:0 0 0 3px #f7dfcc}.intro h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(50px,12vw,66px);line-height:1.04;letter-spacing:-.04em;margin:19px 0 16px}.intro em{font-weight:400;color:#b87853}.intro p{line-height:1.55;color:#71817a;font-size:14px;margin:0}.converter{background:#fff;border:1px solid #e6e9e2;border-radius:25px;padding:21px 19px 17px;box-shadow:0 17px 45px #16332e0b,0 2px 7px #16332e08}.field label{display:block;color:#617a70;font-weight:700;font-size:12px;margin-bottom:10px}.input-row{border:1px solid #e4e9e2;border-radius:15px;min-height:81px;display:flex;align-items:center;padding:0 14px 0 16px;gap:5px;transition:border-color .18s,box-shadow .18s}.input-row:focus-within{border-color:#74a390;box-shadow:0 0 0 3px #74a39025}.input-row input{min-width:0;flex:1;width:100%;border:0;outline:0;color:#173e35;font-weight:700;font-size:clamp(25px,7.5vw,34px);letter-spacing:-.05em;background:transparent;padding:9px 0;font-variant-numeric:tabular-nums}.currency{text-align:right;flex:0 0 auto;min-width:80px;border-left:1px solid #e6ebe5;padding-left:13px}.currency-code{display:block;color:#183e36;font-size:13px;font-weight:700;white-space:nowrap}.currency-name{display:block;color:#8b9b92;font-size:11px;margin-top:3px;white-space:nowrap}.swap-line{display:flex;align-items:center;gap:12px;margin:12px 0}.swap-line span{height:1px;background:#e8ece6;flex:1}.swap-line button{width:49px;height:49px;border:0;background:#174538;color:white;border-radius:15px;display:grid;place-items:center;box-shadow:0 4px 10px #17453822;transition:transform .15s,background .15s}.swap-line button:active{transform:rotate(180deg)}.swap-line button:hover{background:#23664f}.validation{min-height:0;margin:0;color:#a35135;font-size:12px}.validation:not(:empty){padding:10px 0 0}.rate{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid #e8ece6;padding-top:15px;margin-top:19px}.rate span{font-size:10px;color:#84948c;letter-spacing:.12em;font-weight:700}.rate strong{font-size:13px;color:#27654f;white-space:nowrap}.quick{margin-top:27px}.quick>span{font-size:10px;color:#8a988f;letter-spacing:.15em;font-weight:700}.quick-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.quick button{border:1px solid #dae2d8;background:#fffdf8;border-radius:10px;color:#3d6252;font-size:12px;font-weight:700;padding:10px 13px;min-height:43px}.quick button:active,.quick button:hover{background:#e8f3e9;border-color:#95bd9e}footer{border-top:1px solid #dce3da;margin-top:35px;padding-top:14px;color:#819189;font-size:11px;line-height:1.65}footer p{margin:7px 0}footer strong{font-weight:600}footer a{color:#27654f;text-underline-offset:2px}@media(max-width:355px){.app{padding-left:15px;padding-right:15px}.top-label{font-size:9px}.converter{padding:17px 13px}.input-row{padding-left:11px;padding-right:10px}.currency{padding-left:8px;min-width:70px}.currency-code{font-size:11px}.currency-name{font-size:10px}.intro h1{font-size:49px}}@media(min-width:650px){.app{padding-top:10px}.intro{padding-top:50px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}