/* Native miaolay presentation for the supplied calculator and its compact formula readout. */
:root{--bg:#efede6;--card:color-mix(in srgb,#f8f6ef 78%,transparent);--card-solid:color-mix(in srgb,#f8f6ef 94%,transparent);--text:#20282d;--secondary:#69757a;--tertiary:#8e989b;--line:rgb(43 61 68/10%);--accent:#477f96;--accent-soft:rgb(71 127 150/12%);--key:rgb(248 246 239/64%);--function:rgb(102 124 132/9%);--danger:#a34f49;--radius:var(--radius-panel)}
html[data-theme="night"]{--bg:#101b29;--card:rgb(31 49 64/74%);--card-solid:rgb(38 58 74/92%);--text:#edf3f4;--secondary:#a9bac0;--tertiary:#738891;--line:rgb(211 235 243/10%);--accent:#a9d5e4;--accent-soft:rgb(129 194 216/13%);--key:rgb(138 173 188/12%);--function:rgb(138 173 188/8%);--danger:#e59a92}
body{background:radial-gradient(54rem 34rem at 50% -8rem,rgb(102 156 177/15%),transparent 72%),var(--bg);color:var(--text)}
.page{width:min(48rem,calc(100% - 2*var(--page-gutter)));padding-top:clamp(7.5rem,12vw,9rem)}
.eyebrow{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:lowercase}h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.055em}
.subtitle,.section-label,.status-inline,.meta,.examples{color:var(--secondary)}.section-title,.code,.amount,.calc-result{color:var(--text)}
html[data-language="en"] body[data-page-id="tool-currency-calculator"] :is(h1,.section-label,.section-title,.text-button,.dialog-title,.dialog-button,.formula-name) [data-e]{text-transform:lowercase}
.currency-head-actions .text-button{min-height:2.2rem;padding:.45rem .65rem;font-size:.7rem;line-height:1;white-space:nowrap}
.utility-companion{display:grid;width:min(100%,24rem);min-height:3.7rem;margin:1.2rem 0 0 auto;padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--radius-control);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.12rem .8rem;color:var(--text);background:color-mix(in srgb,var(--card-solid) 62%,transparent);text-decoration:none;transition:border-color 160ms ease,background-color 160ms ease,transform 100ms ease}.utility-companion>span{color:var(--tertiary);font-size:.62rem}.utility-companion>strong{font:400 .88rem/1.25 var(--font-display)}.utility-companion>small{grid-column:1;color:var(--secondary);font-size:.65rem}.utility-companion>.line-arrow{grid-row:1/span 3;grid-column:2}.utility-companion:active{transform:scale(.985)}
.calc-expression{min-width:0;overflow-x:auto;color:var(--secondary);font-family:var(--font-mono);font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;scrollbar-width:none}.calc-expression::-webkit-scrollbar{display:none}.calc-result{flex:0 0 auto;white-space:nowrap}
.converter,.calc-shell,.history-list,.rate-card,.formula-card{border-color:var(--line);background:var(--card);box-shadow:inset 0 1px rgb(255 255 255/12%),0 1.25rem 4rem rgb(20 38 48/7%)}
.converter,.calc-shell{border-radius:var(--radius-panel)}.currency-row:focus-within,.currency-row.active{background:var(--card-solid)}.currency-row.active::before{background:var(--accent)}.amount{color:var(--text);caret-color:var(--accent)}.amount::placeholder{color:var(--tertiary)}
.key,.text-button,.angle-toggle button,.dialog-button,.history-delete,.formula-card{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.key{border:1px solid color-mix(in srgb,var(--text) 11%,transparent);border-radius:var(--radius-control);color:var(--text);background:var(--key);box-shadow:inset 0 1px rgb(255 255 255/22%),0 .2rem .75rem rgb(20 39 49/5%);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));transition:transform 90ms cubic-bezier(.2,.8,.2,1),filter 90ms ease,box-shadow 90ms ease}
.key.function{color:var(--secondary);background:var(--function)}.key.operator{color:var(--accent);background:var(--accent-soft)}.key.equal{color:var(--bg);background:var(--accent)}
.key:active,.key.is-pressed{transform:scale(.94);filter:brightness(.91);box-shadow:inset 0 .22rem .7rem rgb(18 34 43/24%)}
.key:focus-visible,.text-button:focus-visible,.dialog-button:focus-visible,.formula-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.angle-toggle,.currency-group-list{background:color-mix(in srgb,var(--text) 7%,transparent)}.angle-toggle button{border-radius:var(--radius-control);color:var(--secondary)}.angle-toggle button.active{color:var(--text);background:var(--card-solid)}
.rate-card,.formula-card,.history-list{border-radius:var(--radius-control);box-shadow:none}.formula-card:hover{background:var(--card-solid)}
.currency-dialog{border-color:var(--line);border-radius:var(--radius-panel);color:var(--text);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%)}
.currency-option-check{border-color:color-mix(in srgb,var(--text) 18%,transparent)}.currency-option:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}.dialog-button{border-radius:var(--radius-control)}.dialog-button.primary{color:var(--bg);background:var(--accent)}footer{color:var(--tertiary)}
@media(hover:hover) and (pointer:fine){.key:hover{filter:brightness(1.04)}}
@media(hover:hover) and (pointer:fine){.utility-companion:hover{border-color:color-mix(in srgb,var(--text) 24%,transparent);background:var(--card-solid)}}
@media(min-width:901px){
  .page{width:min(76rem,calc(100% - 2*var(--page-gutter)));display:grid;grid-template-columns:minmax(22rem,.86fr) minmax(31rem,1.14fr);column-gap:clamp(1.4rem,3vw,3rem);align-items:start;padding-top:clamp(7.1rem,9vw,8.4rem)}
  .page>header{grid-column:1/-1;margin:0 0 1.8rem}
  .page>section:first-of-type{grid-column:1;min-width:0;min-height:37rem;padding:1rem;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--card);box-shadow:inset 0 1px rgb(255 255 255/12%),0 1.25rem 4rem rgb(20 38 48/7%)}
  .page>.calculator{grid-column:2;min-width:0;margin-top:0}
  .page>.history-section,.page>.rate-section,.page>.formula-section,.page>.utility-companion,.page>footer,.page>.relation-trail{grid-column:1/-1}
  .page>.history-section{margin-top:clamp(4rem,7vw,6.5rem)}
  .page>section:first-of-type>.section-head{min-height:3.3rem;margin:0 .35rem .75rem;align-items:center}
  .page>section:first-of-type .section-label{margin:0 0 .28rem}
  .page>section:first-of-type .section-title{margin:0}
  .page>section:first-of-type .status-inline{margin-top:.3rem}
  .page>section:first-of-type .converter{border-radius:var(--radius-control);background:color-mix(in srgb,var(--card-solid) 58%,transparent);box-shadow:none}
  .currency-row{min-height:7.35rem;padding-inline:1.35rem}
  .currency-row.active::before{top:1.55rem;bottom:1.55rem}
  .calculator .calc-shell{min-height:37rem;padding:1rem}
  .science-strip,.main-keys{gap:.55rem}
  .science-strip{margin-bottom:.55rem}
  .key{min-height:3.45rem}
  .calc-message{min-height:3.3rem;padding-top:.2rem}
  .angle-footer{margin-top:.65rem}
  .examples{max-width:34rem;margin-top:.8rem}
  .rate-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .formula-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){.page{width:calc(100% - 1rem);padding-top:calc(4.7rem + env(safe-area-inset-top))}header{margin:.05rem .35rem .45rem}h1{font-size:1.55rem}.currency-head-actions{flex-wrap:nowrap;gap:.35rem}.currency-head-actions .text-button{min-height:2.75rem;padding:.35rem .52rem;font-size:.66rem}.currency-row{min-height:3.15rem}.calc-message{min-height:2.05rem;padding-bottom:.35rem}.calc-expression{font-size:.66rem}.calc-result{font-size:.9rem}.science-strip .key,.main-keys .key{border-radius:calc(var(--radius-control) - 2px)}.science-strip .key{min-height:2.8rem}.main-keys .key{min-height:2.95rem}.utility-companion{width:100%;margin-top:1rem}}
@media(max-width:600px) and (max-height:740px){.page{padding-top:calc(4.7rem + env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){.key,.text-button,.angle-toggle button,.currency-option,.dialog-button,.history-delete,.formula-card{transition-duration:1ms}}
@media(prefers-reduced-transparency:reduce){.key,.currency-dialog{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card-solid)}}