:root{color-scheme:dark;--bg:#141716;--surface:#202521;--accent:#d7f5a0;--text:#f0f3ee;--muted:#a6b39e;--border:#353f31;--warning:#d3bb87;--mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;background:var(--bg);color:var(--text)}
.peso-page,.peso-page *{box-sizing:border-box}
.peso-page [hidden]{display:none!important}
.peso-page{margin:0;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;background:var(--bg)}
.peso{container-type:size;height:100%;width:100%;max-width:460px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 26px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.peso-page button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;min-height:44px;color:inherit}
.peso-page button:focus-visible,.peso-page a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.peso-page button:active{filter:brightness(1.25)}
.peso-page button:disabled{opacity:.6;cursor:wait}
.peso-page svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.peso-header,.currency-heading,.rate-line,.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.peso-header{flex:none;height:44px}
.peso-header h1{font-size:30px;letter-spacing:-1.6px;line-height:1;margin:0;font-weight:800}
.peso-header h1 span{color:var(--accent)}
.peso-header-actions{display:flex;align-items:center;gap:8px}
.peso-page .install-button{display:flex;align-items:center;gap:6px;border:1px solid #566645;border-radius:22px;background:#222920;color:var(--accent);padding:0 12px;height:44px;font-size:12px;font-weight:650;white-space:nowrap}
.peso-page .install-button svg{width:17px;height:17px}
.peso-page .icon-button{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--border);border-radius:50%;color:var(--muted)}
.calculator{display:flex;flex-direction:column;flex:1;min-height:0}
.amounts{flex:none}
.route{display:flex;align-items:center;gap:10px;color:var(--muted);font:9px var(--mono);letter-spacing:1.6px;margin:19px 0 24px}
.route-dot{height:5px;width:5px;border-radius:50%;background:var(--accent)}
.route-line{height:1px;width:28px;background:var(--border)}
.currency-heading{color:var(--muted);font-size:14px;line-height:1.25}
.currency-code{font:11px var(--mono);color:var(--text);letter-spacing:1px;border:1px solid var(--border);border-radius:5px;padding:5px 7px}
.amount-line{display:flex;align-items:baseline;gap:12px;margin-top:13px;min-width:0}
.currency-symbol{font:26px var(--mono);color:#7d8977;flex:none}
.peso output{display:block;min-width:0;font:400 55px/1.12 var(--mono);letter-spacing:-2.5px;white-space:nowrap}
.peso #amount{flex:1}
.divider{display:flex;align-items:center;gap:12px;margin:14px 0}
.divider>span{height:1px;background:var(--border);flex:1}
.peso .swap-button{height:44px;width:44px;border-radius:50%;border:1px solid #46513f;background:#222920;color:var(--accent);display:grid;place-items:center;flex:none}
.currency-result .currency-heading{color:#b2c3a0}
.currency-result .currency-code{color:var(--accent)}
.result-line{display:flex;align-items:baseline;gap:9px;color:var(--accent);margin-top:12px;min-height:65px}
.peso .result-line output{font-size:58px}
.result-line>span{font:22px var(--mono);color:var(--muted);flex:none}
.peso output.compact{font-size:34px;letter-spacing:-1.5px}
.peso output.very-compact{font-size:clamp(16px,4.7vw,22px);letter-spacing:-.75px}
.rate-line{font:10px var(--mono);letter-spacing:-.15px;color:var(--muted);gap:5px}
.rate-line #unit-rate{white-space:nowrap}
.rate-line button{border:0;background:none;color:var(--accent);font:9px var(--mono);letter-spacing:.25px;display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:0 0 0 5px;white-space:nowrap;min-width:44px}
.rate-line button.warning{color:var(--warning)}
.status-dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex:none}
.controls{flex:1;min-height:0;display:flex;flex-direction:column}
.quick-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 12px;flex:none}
.quick-row button{border:1px solid var(--border);background:#1c221b;color:#b3c4a7;border-radius:6px;height:44px;font:12px var(--mono)}
.quick-row #clear{background:transparent;color:var(--warning)}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(44px,1fr));gap:8px;margin-top:auto;flex:none;height:240px}
.keypad button{min-width:0;border:1px solid #2c322d;border-radius:10px;background:var(--surface);color:#e4e9e1;font:26px var(--mono);display:grid;place-items:center;padding:0}
.keypad button[data-key=","],.keypad button[data-key="backspace"]{background:#191e1a;color:var(--muted)}
@media(hover:hover){.keypad button:hover{background:#2c3528}}
.peso-dialog{box-sizing:border-box;border:1px solid #48513f;background:#1a1f1a;color:#e6ece1;border-radius:24px;width:calc(100% - 28px);max-width:430px;padding:0 22px 22px;font-size:14px;line-height:1.6;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);overflow-y:auto;overscroll-behavior:contain}
.peso-dialog::backdrop{background:#050906bb;backdrop-filter:blur(5px)}
.dialog-top{position:sticky;top:0;background:#1a1f1a;padding:18px 0 12px;z-index:1}
.peso-dialog h2{font-size:23px;line-height:1.2;letter-spacing:-.7px;margin:0}
.peso-dialog h3{font-size:15px;color:#e6ece1;margin:0 0 8px;font-weight:650}
.peso-dialog p{color:#b5bfae;margin:8px 0;overflow-wrap:anywhere}
.info-section{border-top:1px solid var(--border);padding:18px 0}
.peso-dialog .primary-button,.peso-dialog .secondary-button{display:block;width:100%;border-radius:10px;padding:12px 14px;margin-top:12px;font-size:13px;font-weight:650}
.peso-dialog .primary-button{background:var(--accent);color:#223018;border:1px solid var(--accent)}
.peso-dialog .secondary-button{background:transparent;color:var(--accent);border:1px solid #566645}
.peso-dialog #fetch-status,.peso-dialog .small{font-size:12px}
.peso-dialog a{color:var(--accent);text-underline-offset:4px}
.peso-dialog .warning{color:var(--warning)}
.info-footer{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);padding-top:18px;color:var(--muted);font-size:12px}
.peso-install-dialog .install-lead{margin:0 0 16px}
.install-platforms{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0}
.install-platforms button{border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--muted);font-size:12px}
.install-platforms button[aria-pressed=true]{background:#2c3725;border-color:#566645;color:var(--accent)}
.install-steps{list-style:none;counter-reset:install;padding:0;margin:0}
.install-steps li{counter-increment:install;position:relative;padding:12px 0 12px 38px;border-top:1px solid var(--border)}
.install-steps li::before{content:counter(install);position:absolute;left:0;top:14px;width:24px;height:24px;border:1px solid #566645;border-radius:50%;color:var(--accent);font:12px/22px var(--mono);text-align:center}
.install-steps strong{display:block;font-size:14px;line-height:1.6;color:var(--text);font-weight:650}
.install-steps span{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-top:3px}
.install-steps svg{vertical-align:middle;width:19px;height:19px;margin-left:3px;color:var(--accent)}
.peso-install-dialog .install-offline-note{border-top:1px solid var(--border);padding-top:14px;margin:12px 0 0;font-size:12px}
.install-offline-note strong{color:var(--accent);font-weight:500}
@media(display-mode:standalone){.peso-page .install-button{display:none}}
.no-script{position:fixed;inset:25% 20px auto;background:var(--bg);border:1px solid var(--warning);padding:20px;z-index:2}
@media(max-height:760px){.peso{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
@container(max-height:730px){.route{display:none}.currency-source{margin-top:8px}.amount-line{margin-top:8px}.peso output{font-size:46px}.divider{margin:6px 0}.result-line{margin-top:8px;min-height:52px}.peso .result-line output{font-size:48px}.peso output.compact{font-size:30px}.peso output.very-compact{font-size:clamp(16px,4.7vw,22px)}.quick-row{margin-top:8px;margin-bottom:8px}.keypad{height:200px}}
@media(max-width:350px){.peso{padding-left:18px;padding-right:18px}.currency-heading{font-size:13px}.rate-line{font-size:9px}}
@media(orientation:landscape) and (max-height:600px){.peso{max-width:920px;padding-left:max(26px,env(safe-area-inset-left));padding-right:max(26px,env(safe-area-inset-right))}.calculator{flex-direction:row;gap:26px;align-items:center}.amounts,.controls{width:calc(50% - 13px);flex:none}.controls{height:min(100%,264px)}.route{display:none}.currency-source{margin-top:0}.quick-row{margin-top:0}.keypad{height:200px}.currency-heading{font-size:12px}.currency-code{padding:4px 6px}.amount-line{margin-top:6px}.peso output{font-size:38px}.divider{margin:2px 0}.result-line{margin-top:6px;min-height:42px}.peso .result-line output{font-size:38px}.peso output.compact{font-size:28px}.peso output.very-compact{font-size:19px}.rate-line{font-size:9px}}
@media(prefers-reduced-motion:reduce){.peso-page *{scroll-behavior:auto}}

@container(max-height:570px){.currency-source{margin-top:4px}.currency-heading{font-size:12px}.currency-code{padding:4px 6px}.amount-line{margin-top:6px}.peso output{font-size:36px}.divider{margin:3px 0}.result-line{min-height:42px;margin-top:6px}.peso .result-line output{font-size:36px}.peso output.compact{font-size:28px}.peso output.very-compact{font-size:clamp(16px,4.7vw,22px)}.keypad{height:188px;gap:4px}}
