*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f5f5f7;--surface: #ffffff;--text: #1d1d1f;--text-secondary: #86868b;--border: #d2d2d7;--accent: #0071e3;--error: #d70015;--radius: 16px;--shadow: 0 2px 16px rgba(0, 0, 0, .06)}html{-webkit-font-smoothing:antialiased}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;line-height:1.5;position:relative;overflow-x:hidden}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.ambient__symbol{position:absolute;font-size:2.5rem;font-weight:600;color:var(--text-secondary);opacity:.05;animation:ambient-float 24s ease-in-out infinite}.ambient__symbol--1{top:12%;left:10%;animation-delay:0s}.ambient__symbol--2{top:22%;right:12%;animation-delay:-6s}.ambient__symbol--3{bottom:18%;left:14%;animation-delay:-12s}.ambient__symbol--4{bottom:24%;right:10%;animation-delay:-18s}.app{position:relative;z-index:1;width:100%;max-width:420px;animation:card-enter .6s ease both}.converter{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;overflow:visible}.card-header{text-align:center;margin-bottom:24px}.card-title{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}.card-lead{margin-top:6px;font-size:.8125rem;color:var(--text-secondary);line-height:1.5}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.field input{width:100%;font:inherit;font-size:1.125rem;color:var(--text);background:var(--bg);border:1px solid transparent;border-radius:10px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0071e326}.flag{width:24px;height:18px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px #0000000f;flex-shrink:0}.flag--placeholder{display:inline-block;box-shadow:none}.picker{position:relative}.picker-trigger{position:relative;display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:1rem;color:var(--text);text-align:left;background:var(--bg);border:1px solid transparent;border-radius:10px;padding:12px 36px 12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}.picker-trigger:hover{border-color:var(--border)}.picker.is-open .picker-trigger,.picker-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0071e326}.picker-trigger-flag{display:flex;flex-shrink:0}.picker-trigger-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-chevron{position:absolute;right:14px;top:50%;width:12px;height:12px;transform:translateY(-50%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform .15s}.picker.is-open .picker-chevron{transform:translateY(-50%) rotate(180deg)}.picker-panel{position:absolute;z-index:10;top:calc(100% + 6px);left:0;right:0;display:none;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0000001f;padding:6px;overflow:hidden;max-height:min(280px,50vh)}.picker.is-open .picker-panel{display:flex}.picker-search{flex-shrink:0;width:100%;font:inherit;font-size:.9375rem;color:var(--text);background:var(--bg);border:none;border-radius:8px;padding:10px 12px;margin-bottom:6px}.picker-search:focus{outline:none;box-shadow:0 0 0 3px #0071e326}.picker-search::-webkit-search-cancel-button{cursor:pointer}.picker-list{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;list-style:none;padding-bottom:4px}.picker-list.is-hidden{display:none}.picker-empty{flex-shrink:0;padding:16px 12px;font-size:.875rem;color:var(--text-secondary);text-align:center}.picker-divider{padding:8px 12px 4px;font-size:.6875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;list-style:none;pointer-events:none}.picker-option{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:8px;font-size:.9375rem;cursor:pointer;transition:background .1s}.picker-option:hover{background:var(--bg)}.picker-option[aria-selected=true]{background:#0071e314;color:var(--accent)}.picker-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.currencies{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:20px}.exchange-track{position:absolute;top:52px;bottom:52px;left:50%;width:2px;transform:translate(-50%);background:linear-gradient(180deg,transparent 0%,var(--border) 20%,var(--border) 80%,transparent 100%);opacity:0;transition:opacity .25s ease;pointer-events:none}.exchange-track__pulse{position:absolute;top:0;left:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #0071e373;transform:translate(-50%,-50%);opacity:0}.converter.is-exchanging .exchange-track{opacity:1}.converter.is-exchanging .exchange-track__pulse{opacity:1;animation:exchange-flow 1.1s ease-in-out infinite}.swap{display:flex;align-items:center;justify-content:center;align-self:center;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:color .15s,border-color .15s,box-shadow .15s;z-index:1}.swap:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px #0071e314}.swap:active{transform:scale(.92)}.swap.is-spinning{animation:swap-spin .5s ease}.recent{margin-top:20px}.recent-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.recent-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.recent-btn{font:inherit;font-size:.8125rem;color:var(--text-secondary);background:var(--bg);border:1px solid transparent;border-radius:999px;padding:6px 12px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.recent-btn:hover{color:var(--accent);border-color:var(--accent);background:#0071e30f}.result{margin-top:28px;text-align:center}.result-screen{position:relative;overflow:hidden;padding:20px 16px;border-radius:12px;background:linear-gradient(180deg,#fafafa 0%,var(--bg) 100%);border:1px solid rgba(0,0,0,.04)}.result-screen__scan{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translate(-120%);opacity:0;pointer-events:none}.converter.is-exchanging .result-screen__scan{opacity:1;animation:screen-scan 1.4s ease-in-out infinite}.result-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.result-value{margin-top:8px;font-size:2rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:opacity .2s ease}.result-value.loading{opacity:.35}.result-value.is-updated{animation:result-pop .45s ease}.rate-info{margin-top:8px;font-size:.875rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.rate-chart{margin-top:20px;padding-top:20px;border-top:1px solid var(--bg)}.rate-chart__label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.rate-chart__canvas{margin-top:10px;border-radius:10px;background:var(--bg);padding:8px 4px 4px;min-height:172px}.rate-chart__canvas.is-loading{position:relative;overflow:hidden}.rate-chart__canvas.is-loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);animation:screen-scan 1.4s ease-in-out infinite}.rate-chart__svg{display:block;width:100%;height:auto}.rate-chart__grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4;opacity:.9}.rate-chart__axis-line{stroke:var(--border);stroke-width:1}.rate-chart__tick{stroke:var(--text-secondary);stroke-width:1;opacity:.5}.rate-chart__line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.rate-chart__area{fill:url(#rate-chart-fill)}.rate-chart__dot{fill:var(--surface);stroke:var(--accent);stroke-width:2}.rate-chart__axis{font-size:9px;fill:var(--text-secondary);font-variant-numeric:tabular-nums}.rate-chart__axis--y,.rate-chart__axis--x{font-size:8.5px}.error{margin-top:16px;font-size:.875rem;color:var(--error);text-align:center}.disclaimer{margin-top:24px;padding-top:20px;border-top:1px solid var(--bg);text-align:center}.disclaimer-date{min-height:1.2em;font-size:.8125rem;color:var(--text-secondary)}.disclaimer-note{margin-top:6px;font-size:.6875rem;color:var(--text-secondary);line-height:1.65;opacity:.85}.disclaimer-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}.disclaimer-note a:hover{color:var(--accent)}@keyframes card-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes ambient-float{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(8px,-14px) rotate(6deg)}}@keyframes exchange-flow{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}to{top:100%;opacity:0}}@keyframes screen-scan{0%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes result-pop{0%{opacity:.5;transform:scale(.97)}60%{transform:scale(1.01)}to{opacity:1;transform:scale(1)}}@keyframes swap-spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@media(prefers-reduced-motion:reduce){.ambient__symbol,.app,.exchange-track__pulse,.result-screen__scan,.result-value.is-updated,.swap.is-spinning{animation:none!important}.converter.is-exchanging .exchange-track{opacity:.6}.converter.is-exchanging .exchange-track__pulse{opacity:.8;top:50%;animation:none}}