:root{color-scheme:dark;--bg:#090b0a;--panel:#121613;--line:#29312b;--muted:#96a49b;--text:#f2f6f3;--accent:#b7f7cc;--warning:#edc78b;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,summary,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}button:disabled{opacity:.5;cursor:wait}a{color:inherit}.app-shell{max-width:1160px;margin:auto;padding:0 56px}.topbar{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #222824}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:21px;font-weight:650;letter-spacing:.03em}.coin{height:40px;width:40px;border:1px solid #518568;border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:26px;font-weight:500}.brand-sub{display:block;font-size:8px;color:var(--muted);font-weight:500;letter-spacing:.21em;margin-top:2px}.tool-label{display:flex;gap:8px;align-items:center;color:#b3beb7;font-size:11px;letter-spacing:.07em}.tool-label>span{width:5px;height:5px;background:#8a9f92;border-radius:50%}main{display:grid;grid-template-columns:1fr 455px;gap:70px;align-items:start;padding:62px 0 50px}.intro{padding-top:54px}.eyebrow{font-size:10px;letter-spacing:.19em;color:#8da898;margin:0 0 25px}.intro h1{font-size:47px;line-height:1.5;letter-spacing:.015em;font-weight:500;margin:0}.intro-text{font-size:14px;line-height:2.1;color:#95a69b;margin:21px 0 0}.intro-art{height:222px;margin:43px 0 0;position:relative;display:flex;align-items:center;gap:26px}.orb{height:152px;width:152px;display:grid;place-items:center;position:relative;border-radius:50%;border:1px solid #456550;background:radial-gradient(circle at 28% 22%,#385541 0%,#13241a 43%,#0d160f 68%);box-shadow:inset -4px -4px 13px #0006,0 0 55px #8ce7a512}.orb:after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid #627f6650}.orb span{font-size:100px;font-weight:400;color:#bfeacd;text-shadow:0 4px 2px #0004;line-height:1}.art-line{width:57px;height:1px;background:linear-gradient(90deg,#4e6655,#1d2d23);position:relative}.art-line:after{content:"";width:5px;height:5px;border-right:1px solid #57725f;border-top:1px solid #57725f;transform:rotate(45deg);position:absolute;right:0;top:-2px}.art-yen{font-size:64px;font-weight:300;color:#6b8373}.desktop-caption{font-size:10px;letter-spacing:.12em;color:#b7c5bc}.desktop-caption span{display:block;color:#596e61;font-size:8px;margin-top:10px;letter-spacing:.16em}.calculator{background:var(--panel);border:1px solid #2b342d;border-radius:24px;padding:25px 27px 0;box-shadow:0 24px 90px #0005;overflow:hidden}.calc-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;font-weight:550}.arrow{color:#5f7566;padding:0 8px}.status-badge{display:flex;align-items:center;gap:6px;background:#1b3023;color:#a9d9ba;border:1px solid #294332;border-radius:30px;font-size:9px;letter-spacing:.01em;padding:5px 9px;font-weight:400}.status-badge i{height:4px;width:4px;border-radius:100%;background:currentColor}.status-badge.warning,.status-badge.sample{background:#342b1c;border-color:#514126;color:var(--warning)}.status-badge.pending,.status-badge.manual{background:#242c27;border-color:#39483e;color:#b5c5ba}.result-block{padding:28px 0 23px}.result-heading{display:flex;align-items:center;justify-content:space-between}.result-heading h2{font-size:13px;font-weight:500;color:#bbc7be;letter-spacing:.04em;margin:0}.result-heading>span{font-size:10px;color:#758a7b;letter-spacing:.08em}.total-row{display:flex;gap:7px;align-items:baseline;color:var(--accent);margin-top:13px;min-height:64px;font-variant-numeric:tabular-nums}.yen{font-size:25px;font-weight:400}.total-row output{font-size:48px;letter-spacing:-.04em;font-weight:500;white-space:nowrap;line-height:1.2;min-width:0}.result-description{color:#8b9e91;font-size:10px;line-height:1.5;margin:6px 0 0;min-height:15px}.quantity-block{border-top:1px solid var(--line);padding-top:18px}.field-top{display:flex;align-items:center;justify-content:space-between}.field-top label{font-size:11px;color:#a8b7ad}.clear-button{padding:3px 0 3px 12px;font-size:10px;background:none;border:0;color:#9eb4a6}.amount-row{display:flex;align-items:baseline;gap:15px;margin-top:10px}.amount-row input{min-width:0;width:100%;background:none;border:0;border-radius:2px;padding:0;color:var(--text);font-size:34px;line-height:1.35;letter-spacing:-.025em;font-weight:450;font-variant-numeric:tabular-nums}.amount-row>span{font-size:13px;color:#83998a}.field-error{font-size:10px;color:var(--warning);margin:4px 0 0;line-height:1.5}.field-error:empty{display:none}.presets{display:flex;align-items:center;gap:8px;margin:16px 0 18px}.presets button{border:1px solid #2f3c33;background:#1b241e;border-radius:7px;flex:1;padding:7px 0;font-size:11px;color:#bbd2c4;transition:background .15s}.presets button:hover{background:#2d3d32}.presets>span{font-size:9px;color:#647a6c;margin-left:2px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keypad button{height:54px;border:1px solid #303b33;background:#202922;border-radius:10px;font-size:22px;font-weight:400;display:grid;place-items:center;transition:background .1s,transform .1s;touch-action:manipulation}.keypad button:hover{background:#2d3a30}.keypad button:active{background:#405445;transform:scale(.96)}.keypad button.secondary{background:#18201b;color:#b6c6bb}.rate-panel{margin-top:23px;padding:16px 0 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.rate-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.rate-top h2{font-size:10px;font-weight:500;margin:0;color:#9caea1}.rate-top>span{font-size:9px;color:#91a597}.rate-value{display:flex;align-items:baseline;gap:9px;margin-top:11px;font-variant-numeric:tabular-nums}.rate-value>span{font-size:11px;color:#a5b7ac}.rate-value .equals{color:#5d7264;font-size:13px}.rate-value strong{font-size:20px;font-weight:500;letter-spacing:-.02em}.rate-value>span:last-child{font-size:10px;margin-left:auto}.rate-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:4px}.rate-bottom>span{font-size:10px;color:#8ba091}.icon-button{display:flex;align-items:center;gap:5px;border:0;background:none;font-size:9px;color:#b1c7b9;padding:3px 0 3px 10px}.timestamp{font-size:9px;color:#778e7e;margin:4px 0 0;line-height:1.6}.rate-warning{margin:6px 0 0;font-size:10px;color:var(--warning);line-height:1.65}.rate-warning:empty{display:none}.rate-settings-toggle{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;background:none;color:#a4b7ab;font-size:10px;padding:16px 0}.rate-settings-toggle>span{margin-left:auto;font-size:15px;color:#7a9182}.rate-settings{padding:0 0 18px}.rate-settings label{display:block;font-size:11px;color:#afc1b5;line-height:1.6;margin-bottom:8px}.manual-row{display:flex;gap:8px}.manual-row input{min-width:0;flex:1;background:#0c110e;border:1px solid #3a4c3f;border-radius:7px;padding:10px;color:#e6f3eb;font-size:16px}.manual-row button{border:0;border-radius:7px;background:var(--accent);color:#12331e;font-size:12px;padding:9px 16px}.rate-settings #rate-help,.sample-note{font-size:9px;color:#889f90;line-height:1.65;margin:7px 0 0}.sample-button{margin-top:13px;padding:0;color:#b4cdbd;background:none;border:0;font-size:10px;text-decoration:underline;text-underline-offset:3px}.details{margin:0 -27px;background:#0f1410;border-top:1px solid #252f28}.details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 27px;font-size:10px;color:#90a497}.details summary::-webkit-details-marker{display:none}.details summary>span{font-size:16px;line-height:12px;transition:transform .15s}.details[open] summary>span{transform:rotate(180deg)}.details-content{padding:0 27px 15px;color:#91a799;font-size:10px;line-height:1.9}.details-content p{margin:0 0 10px}.details-content a{color:#bad9c5;text-underline-offset:3px}footer{display:flex;gap:13px;align-items:center;border-top:1px solid #222824;padding:24px 0 35px;color:#6f8376}footer p{font-size:10px;margin:0;line-height:1.8}.footer-mark{font-size:25px;color:#5e7767}.footer-right{margin-left:auto;font-size:8px;letter-spacing:.18em;color:#4c6454}.mobile-break{display:none}[hidden]{display:none!important}@media(min-width:1200px){main{gap:100px}}@media(max-width:900px){.app-shell{padding:0 32px}main{grid-template-columns:1fr 420px;gap:30px}.intro h1{font-size:33px}.intro-art{gap:14px}.orb{width:110px;height:110px}.orb span{font-size:72px}.art-line{width:30px}.art-yen{font-size:44px}}@media(max-width:720px){.app-shell{max-width:490px;padding:0 21px}.topbar{height:82px;border:0}.brand{font-size:18px;gap:9px}.coin{width:34px;height:34px;font-size:24px}.brand-sub{font-size:7px}.tool-label{font-size:10px}main{display:block;padding:7px 0 27px}.intro{padding:0 2px 26px}.eyebrow,.intro-art,.desktop-caption,.desktop-break{display:none}.intro h1{font-size:26px;line-height:1.5;letter-spacing:.025em}.intro-text{font-size:11px;margin:7px 0 0;line-height:1.65;color:#84998c}.calculator{border-radius:20px;padding:21px 22px 0;box-shadow:0 15px 45px #0004}.calc-top{font-size:10px}.result-block{padding:25px 0 21px}.result-heading h2{font-size:12px}.total-row{margin-top:13px;min-height:58px}.total-row output{font-size:44px}.yen{font-size:24px}.quantity-block{padding-top:16px}.amount-row input{font-size:30px}.keypad{gap:7px}.keypad button{height:52px;font-size:22px}.presets{margin:14px 0 17px}.rate-panel{margin-top:20px}.details{margin:0 -22px}.details summary{padding:15px 22px}.details-content{padding:0 22px 15px}footer{padding:21px 2px 30px;gap:10px}.footer-right{display:none}.mobile-break{display:initial}footer p{font-size:9px}}@media(max-width:370px){.app-shell{padding:0 13px}.calculator{padding:19px 17px 0}.total-row output{font-size:40px}.details{margin:0 -17px}.details summary{padding:15px 17px}.details-content{padding:0 17px 15px}.intro h1{font-size:24px}.rate-top>span{font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#source-label{color:inherit;text-decoration:underline;text-underline-offset:3px}#timestamp{line-height:1.8}#update-policy{line-height:1.6;margin-top:6px}

.price-option{padding:18px 0 12px}.price-option h3{margin:0;color:#bdcfc3;font-size:12px;letter-spacing:.05em;font-weight:500}.price-option .total-row{margin-top:7px;min-height:0}.price-option .total-row output{font-size:44px}.rounding-note{margin:5px 0 0;font-size:9px;line-height:1.6;color:#819b8a}.transfer-option{border-top:1px solid #29362d;padding-top:16px}.transfer-option .total-row{color:#d5e8dd}.result-block{padding-bottom:21px}.result-description{margin-top:7px}#source-label{font-size:10px}@media(max-width:720px){.price-option .total-row output{font-size:40px}.price-option{padding-top:15px;padding-bottom:12px}}@media(max-width:370px){.price-option .total-row output{font-size:36px}.rate-value{gap:6px}.rate-value>span{font-size:10px}}

.input-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#0d120f;padding:4px;border:1px solid #2b3a30;border-radius:10px;margin-top:20px}.input-mode-switch button{border:0;background:none;border-radius:7px;padding:10px 5px;color:#8fa99a;font-size:12px}.input-mode-switch button[aria-pressed="true"]{background:#b7f7cc;color:#12331e;font-weight:600}.input-mode-switch+.result-block{padding-top:19px}.reverse-note,.input-help{font-size:10px;color:#91aa9b;line-height:1.65;margin:8px 0 0}.input-help{font-size:9px}.keypad button:disabled{cursor:default;opacity:.25}.total-row output{max-width:100%;overflow-wrap:anywhere}@media(max-width:370px){.input-mode-switch button{font-size:11px}.result-heading h2{font-size:11px}}


/* With the introductory hero removed, keep one centered calculator column. */
.app-shell main{display:block;max-width:455px;margin:0 auto;padding:24px 0 40px}@media(max-width:720px){.app-shell main{max-width:none;padding:7px 0 27px}}

/* Compact phone layout. Content remains in normal flow so zoom, errors and
   the software keyboard can increase the page height without hiding controls. */
@media (max-width:720px) {
  .app-shell { padding:0 12px; }
  .topbar { height:auto; min-height:48px; gap:12px; padding:2px 0; }
  .brand { min-height:44px; font-size:16px; gap:8px; }
  .coin { width:30px; height:30px; font-size:21px; }
  .brand-sub { font-size:6px; }
  .app-shell main { padding:4px 0 20px; }
  .calculator { padding:8px 12px 0; border-radius:16px; overflow:visible; }
  .calc-top { gap:8px; flex-wrap:wrap; }
  .status-badge { padding:4px 8px; }
  #transaction-caption { display:none; }
  .input-mode-switch { margin-top:4px; padding:1px; gap:4px; border-radius:9px; }
  .input-mode-switch button { min-height:44px; min-width:0; padding:6px 3px; font-size:12px; line-height:1.3; }
  .input-mode-switch + .result-block {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:10px;
    row-gap:3px;
    padding:6px 0;
  }
  .result-heading, .result-description, .reverse-note { grid-column:1 / -1; }
  .result-heading { gap:8px; }
  .result-heading h2 { font-size:11px; }
  .price-option { min-width:0; padding:4px 0 0; }
  .price-option h3 { font-size:11px; }
  .transfer-option { border-top:0; border-left:1px solid var(--line); padding-left:10px; }
  .price-option .total-row { width:100%; gap:4px; margin-top:4px; }
  .price-option .yen { flex:none; font-size:16px; }
  .price-option .total-row output { min-width:0; font-size:30px; }
  /* fitNumbers() reduces each result to a 14px floor. Only at that floor allow
     very long values to wrap rather than spill into the neighbouring result. */
  .price-option output[style*="font-size: 14px"] { white-space:normal; overflow-wrap:anywhere; }
  .rounding-note { margin-top:3px; line-height:1.4; }
  .result-description, .reverse-note { margin:0; line-height:1.5; }
  .quantity-block { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; padding-top:4px; }
  .field-top { display:contents; }
  .field-top label { grid-column:1; grid-row:1; align-self:end; line-height:1.4; }
  .clear-button { grid-column:2; grid-row:1 / 3; align-self:center; min-width:44px; min-height:44px; padding:4px; font-size:11px; }
  .amount-row { grid-column:1; grid-row:2; margin-top:0; gap:8px; }
  .amount-row input { min-height:44px; }
  .quantity-block .input-help, .field-error { grid-column:1 / -1; margin-top:3px; line-height:1.5; }
  .presets { gap:6px; margin:4px 0; }
  .presets button { min-height:44px; min-width:0; padding:6px 2px; font-size:11px; }
  .presets > span { font-size:9px; }
  .keypad { gap:4px; }
  .keypad button { height:auto; min-height:44px; padding:8px 4px; border-radius:8px; font-size:20px; line-height:1.2; }
  .rate-panel { margin-top:14px; padding-top:12px; }
  .icon-button, #source-label { min-height:44px; display:inline-flex; align-items:center; }
  .icon-button { min-width:44px; }
  #reference-disclosure { padding-bottom:12px; }
}

/* Six presets per input direction, arranged in two rows. */
.presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.presets button { min-width:0; min-height:44px; }

/* Readable, concise status remains outside the optional calculation rules. */
#timestamp,#update-policy,#base-rate { font-size:12px; line-height:1.6; }
.rate-warning { font-size:13px; line-height:1.6; }
#reference-disclosure { font-size:12px; line-height:1.6; margin:12px 0 4px; padding:0; }
.calculation-rules { padding-bottom:12px; }
.calculation-rules summary { min-height:44px; padding:12px 0; font-size:14px; line-height:20px; cursor:pointer; }
.calculation-rules > div { font-size:13px; line-height:1.7; color:var(--muted); padding:4px 0 8px; overflow-wrap:anywhere; }

/* Leave room between the focused amount field and preset buttons. */
@media (max-width:720px) { .quantity-block + .presets { margin-top:12px; } }

.quote-status { grid-column:1 / -1; margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--warning); }