:root{--ink:#102c38;--muted:#667c84;--teal:#087f79;--teal-dark:#05645f;--mint:#dff5ed;--paper:#f7f5ed;--line:#102c3821;--warning:#a64721}*{box-sizing:border-box}html{background:var(--paper)}body{color:var(--ink);background:var(--paper);margin:0;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,system-ui,sans-serif}button,input{font:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #f3a83b}.page-shell{min-height:100vh;padding:64px 24px 28px;position:relative;overflow:hidden}.page-shell:before{content:"";pointer-events:none;opacity:.42;background-image:linear-gradient(#102c3809 1px,#0000 1px),linear-gradient(90deg,#102c3809 1px,#0000 1px);background-size:34px 34px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 70%);mask-image:linear-gradient(#000,#0000 70%)}.ambient{filter:blur(1px);pointer-events:none;border-radius:50%;position:absolute}.ambient-one{background:#1fae911c;width:430px;height:430px;top:-220px;right:-90px}.ambient-two{border:1px solid #087f7926;width:330px;height:330px;top:420px;left:-190px}.hero{width:min(1080px,100%);margin:0 auto 42px;position:relative}.network-badge{color:var(--teal-dark);letter-spacing:.04em;background:#ffffff8c;border:1px solid #087f7940;border-radius:999px;align-items:center;gap:9px;padding:9px 14px;font-size:13px;font-weight:700;display:inline-flex;position:absolute;top:8px;right:0}.network-badge span{background:#21ad82;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #21ad8221}.eyebrow,.section-label{color:var(--teal);letter-spacing:.16em;margin:0 0 10px;font-size:12px;font-weight:800}.hero h1{letter-spacing:-.055em;max-width:760px;margin:0;font-family:Georgia,Yu Mincho,serif;font-size:clamp(46px,7vw,83px);font-weight:500;line-height:1.03}.hero h1 span{color:var(--teal);font-family:inherit}.lead{max-width:650px;color:var(--muted);margin:24px 0 0;font-size:16px;line-height:1.9}.workspace{grid-template-columns:1fr 1.12fr;align-items:start;gap:20px;width:min(1080px,100%);margin:0 auto;display:grid;position:relative}.wallet-panel,.swap-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffc2;border-radius:24px;box-shadow:0 18px 70px #20434a14}.wallet-panel{padding:28px}.connect-state{flex-direction:column;align-items:flex-start;min-height:310px;display:flex}.wallet-icon{background:var(--mint);width:58px;height:58px;color:var(--teal);border-radius:17px;place-items:center;margin-bottom:24px;font-size:34px;font-weight:900;display:grid}.connect-state h2,.connected-state h2,.swap-card h2{letter-spacing:-.03em;margin:0;font-size:23px}.connect-state p:not(.section-label){color:var(--muted);margin:10px 0 28px;line-height:1.7}.button{cursor:pointer;border:0;border-radius:14px;min-height:52px;padding:0 22px;font-weight:800;transition:transform .15s,background .15s}.button:not(:disabled):hover{transform:translateY(-1px)}.button-primary{color:#fff;background:var(--teal);width:100%;box-shadow:0 8px 22px #087f793d}.button-primary:hover{background:var(--teal-dark)}.button:disabled{cursor:not-allowed;opacity:.62}.connect-actions{gap:10px;width:100%;margin-top:auto;display:grid}.wallet-compatibility-note{color:var(--muted);text-align:center;font-size:12px;line-height:1.5}.mobile-wallet-guide{text-align:center;width:100%;margin-top:14px}.connect-state .mobile-wallet-guide p{color:var(--muted);margin:0 0 7px;font-size:12px;line-height:1.6}.mobile-wallet-guide a{color:var(--teal-dark);text-underline-offset:3px;font-size:13px;font-weight:800}.qr-modal-backdrop{z-index:20;background:#081c23b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.qr-modal{text-align:center;background:#fffefa;border-radius:22px;width:min(390px,100%);padding:28px;position:relative;box-shadow:0 24px 80px #00000047}.qr-modal h2{margin:0;font-size:24px}.qr-modal p:not(.section-label){color:var(--muted);margin:10px 0 20px;font-size:13px;line-height:1.7}.qr-modal small{color:var(--muted);margin-top:16px;line-height:1.6;display:block}.qr-modal-close{width:36px;height:36px;color:var(--muted);background:var(--paper);cursor:pointer;border:0;border-radius:50%;font-size:23px;line-height:1;position:absolute;top:12px;right:14px}.qr-code-frame{border:1px solid var(--line);background:#fff;border-radius:18px;place-items:center;width:268px;height:268px;margin:0 auto;display:grid}.qr-code-frame svg{max-width:100%;height:auto;display:block}.qr-loading{color:var(--muted);justify-items:center;gap:12px;font-size:12px;display:grid}.qr-loading .status-spinner{border-radius:50%;width:28px;height:28px;display:block}.wallet-summary{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;display:flex}.text-button{color:var(--muted);cursor:pointer;background:0 0;border:0;text-decoration:underline}.balance-grid{gap:0;display:grid}.balance-grid>div{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:20px 0;display:flex}.balance-grid>div:last-child{border-bottom:0;padding-bottom:0}.balance-grid span{color:var(--muted);letter-spacing:.1em;font-size:11px;font-weight:800}.balance-grid strong{text-align:right;font-size:15px}.balance-grid i{background:#21ad82;border-radius:50%;width:8px;height:8px;margin-right:7px;display:inline-block}.network-note{color:var(--muted);margin:14px 0;font-size:12px;line-height:1.7}.button-secondary{width:100%;min-height:46px;color:var(--teal-dark);background:var(--mint);border:1px solid #087f7940}.button-secondary:not(:disabled):hover{background:#ccece1}.asset-message{color:var(--teal-dark);margin:10px 0 0;font-size:12px;line-height:1.6}.asset-mobile-fallback{gap:5px;margin-top:10px;display:grid}.asset-mobile-fallback a{width:fit-content;color:var(--teal-dark);text-underline-offset:3px;font-size:13px;font-weight:800}.asset-mobile-fallback small{color:var(--muted);font-size:11px;line-height:1.6}.jpyc-wallet-display{margin-top:14px}.jpyc-display-note,.jpyc-qr-note{color:var(--muted);margin:0 0 9px;font-size:11px;line-height:1.6}.jpyc-qr-note{color:#4d686f;background:#dff5ed8c;border-radius:9px;padding:9px 11px}.jpyc-display-button{margin-top:2px}.manual-import-toggle{color:var(--teal-dark);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;margin-top:10px;padding:0;font-size:12px;font-weight:800;text-decoration:underline}.manual-import-panel{border:1px solid var(--line);background:#ffffffa6;border-radius:11px;gap:7px;margin-top:9px;padding:12px;display:grid}.manual-import-panel>span{color:var(--muted);letter-spacing:.06em;font-size:10px;font-weight:800}.manual-import-address{align-items:center;gap:8px;display:flex}.manual-import-address code{overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;min-width:0;font-size:10px}.manual-import-address button{color:var(--teal-dark);background:var(--mint);cursor:pointer;border:1px solid #087f7940;border-radius:7px;flex:none;padding:5px 8px;font-size:11px;font-weight:800}.manual-import-panel small{color:var(--muted);font-size:10px;line-height:1.5}.network-warning{background:#fff2e9;border:1px solid #a6472133;border-radius:16px;gap:18px;margin-top:22px;padding:20px;display:grid}.network-warning strong,.network-warning span{display:block}.network-warning span{color:#81533e;margin-top:5px;font-size:13px}.network-success{color:var(--teal-dark);margin:0 0 14px;font-size:13px;font-weight:800}.button-warning{color:#fff;background:var(--warning)}.inline-error{color:#a33535;margin:18px 0 0;font-size:13px;line-height:1.6}.swap-card{padding:28px}.swap-card.is-locked .token-box,.swap-card.is-locked .swap-details{opacity:.65}.swap-card-header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px;display:flex}.protocol-pill{color:var(--teal-dark);background:var(--mint);white-space:nowrap;border-radius:8px;padding:8px 11px;font-size:12px;font-weight:800}.token-box{border:1px solid var(--line);background:#fffefa;border-radius:17px;padding:18px 20px}.token-box label,.token-box>span{color:var(--muted);font-size:13px;font-weight:700}.amount-row{justify-content:space-between;align-items:center;gap:16px;margin:9px 0 4px;display:flex}.amount-row input,.amount-row output{width:60%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0;font-size:29px;font-weight:700}.amount-row strong{white-space:nowrap;align-items:center;gap:8px;font-size:17px;display:flex}.token-mark{color:#fff;border-radius:50%;place-items:center;width:27px;height:27px;font-size:12px;display:inline-grid}.eth-mark{background:#6372a6}.jpyc-mark{background:var(--teal);font-size:15px}.token-box small{color:#8a999e;font-size:11px}.token-box small+small{margin-top:6px;display:block}.token-box .validation-error,.token-box .quote-error{color:#a33535}.token-box .quote-success{color:var(--teal-dark)}.token-box .quote-expired{color:var(--warning)}.quote-error button,.quote-expired button{color:inherit;font-size:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:800;text-decoration:underline}.amount-row output.quote-loading{width:auto;color:var(--teal);font-size:17px}.swap-arrow{z-index:2;width:34px;height:34px;color:var(--teal);background:var(--mint);border:4px solid #fff;border-radius:50%;place-items:center;margin:-7px auto;font-weight:900;display:grid;position:relative}.output-box{background:#dff5ed59}.swap-details{margin:24px 0}.swap-details div{justify-content:space-between;padding:8px 0;font-size:13px;display:flex}.swap-details dt{color:var(--muted)}.swap-details dd{margin:0;font-weight:700}.swap-button{color:#fff;background:var(--teal);width:100%;box-shadow:0 8px 22px #087f792e}.swap-button:not(:disabled):hover{background:var(--teal-dark)}.swap-button:disabled{color:#62777e;box-shadow:none;background:#dfe8e6}.gas-note{color:var(--muted);text-align:center;margin:14px 0 0;font-size:11px;line-height:1.6}.gas-note span{color:var(--teal)}.transaction-status{border-radius:14px;gap:13px;margin-top:14px;padding:16px;font-size:12px;line-height:1.6;display:flex}.transaction-status strong,.transaction-status a{display:block}.transaction-status a{width:fit-content;color:inherit;margin-top:5px;font-weight:800}.transaction-status p{overflow-wrap:anywhere;margin:4px 0 0}.transaction-status dl{margin:8px 0}.transaction-status dl div{justify-content:space-between;gap:12px;display:flex}.transaction-status dd{text-align:right;margin:0}.transaction-status button{color:inherit;cursor:pointer;background:0 0;border:0;margin-top:7px;padding:0;font-weight:800;text-decoration:underline}.transaction-status .jpyc-display-button{width:100%;min-height:46px;color:var(--teal-dark);background:var(--mint);border:1px solid #087f7940;padding:0 22px;text-decoration:none;display:block}.transaction-status .manual-import-address button{color:var(--teal-dark);background:var(--mint);border:1px solid #087f7940;margin-top:0;padding:5px 8px;text-decoration:none}.transaction-status .reset-swap-button{margin-top:9px;display:block}.transaction-hash{gap:5px;margin:10px 0;display:grid}.transaction-hash span{font-weight:800}.transaction-hash code{overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;background:#ffffff8c;border-radius:7px;max-width:100%;padding:7px 9px;font-size:10px;display:block}.transaction-hash button{width:fit-content}.transaction-status>span{border-radius:50%;flex:none;place-items:center;width:25px;height:25px;font-weight:900;display:grid}.transaction-status.is-progress{color:#225e67;background:#e8f3f3}.transaction-status.is-success{color:#12634c;background:#e5f6ee}.transaction-status.is-error{color:#913b32;background:#fff0ec}.status-spinner{border:3px solid #087f7933;border-top-color:var(--teal);animation:.8s linear infinite spin}.success-mark{color:#fff;background:#26956f}@keyframes spin{to{transform:rotate(360deg)}}.metamask-guide{border:1px solid var(--line);background:#ffffffa6;border-radius:24px;width:min(1080px,100%);margin:34px auto 0;padding:30px;position:relative;box-shadow:0 16px 60px #20434a0f}.metamask-guide-heading h2{letter-spacing:-.03em;margin:0;font-size:25px}.metamask-guide-heading>p:not(.section-label){max-width:830px;color:var(--muted);margin:11px 0 0;font-size:13px;line-height:1.8}.metamask-guide-heading>strong{color:var(--teal-dark);margin-top:9px;font-size:12px;display:block}.metamask-guide-group{border-top:1px solid var(--line);margin-top:30px;padding-top:26px}.metamask-guide-step-heading{align-items:center;gap:12px;margin-bottom:16px;display:flex}.metamask-guide-step-heading span{color:#fff;background:var(--teal);letter-spacing:.08em;border-radius:7px;flex:none;padding:6px 9px;font-size:11px;font-weight:900}.metamask-guide-step-heading h3{letter-spacing:-.02em;margin:0;font-size:18px}.metamask-guide-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:14px;display:grid}.metamask-guide-card{border:1px solid var(--line);background:#fffefa;border-radius:16px;min-width:0;overflow:hidden;box-shadow:0 8px 26px #20434a0f}.metamask-guide-copy{min-height:136px;padding:16px 15px 14px}.metamask-guide-copy h4{color:var(--ink);margin:0;font-size:14px;line-height:1.5}.metamask-guide-copy p{color:var(--muted);margin:7px 0 0;font-size:11px;line-height:1.7}.metamask-guide-image{border-top:1px solid var(--line);background:#f7f5edb3;place-items:start center;min-width:0;padding:12px;display:grid}.metamask-guide-image img{border-radius:10px;width:100%;max-width:230px;height:auto;display:block}.metamask-guide-address{background:var(--mint);border:1px solid #087f7938;border-radius:16px;grid-column:span 3;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:10px 16px;min-width:0;min-height:136px;padding:16px 18px;display:grid}.metamask-guide-address div{gap:6px;min-width:0;display:grid}.metamask-guide-address span{color:var(--teal-dark);letter-spacing:.04em;font-size:11px;font-weight:900}.metamask-guide-address code{min-width:0;color:var(--ink);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;font-size:12px}.metamask-guide-address small{color:#587077;font-size:10px;line-height:1.5}.metamask-guide-address button{color:#fff;background:var(--teal);cursor:pointer;border:1px solid #087f7947;border-radius:11px;min-height:44px;padding:0 15px;font-size:12px;font-weight:800}.metamask-guide-address button:hover{background:var(--teal-dark)}.metamask-guide-address p{color:#913b32;grid-column:1/-1;margin:0;font-size:11px}.metamask-guide-caution{color:var(--muted);margin:25px 0 0;font-size:10px;line-height:1.7}.glossary-section{border:1px solid var(--line);background:#ffffff94;border-radius:24px;width:min(1080px,100%);margin:34px auto 0;padding:28px;position:relative;box-shadow:0 14px 50px #20434a0d}.glossary-heading h2{letter-spacing:-.03em;margin:0;font-size:24px}.glossary-heading>p:last-child{color:var(--muted);margin:8px 0 0;font-size:13px;line-height:1.7}.glossary-chips{flex-wrap:wrap;gap:9px;margin-top:22px;display:flex}.glossary-chip{border:1px solid var(--line);color:#38545e;cursor:pointer;background:#ffffffb8;border-radius:999px;align-items:center;gap:6px;min-height:42px;padding:8px 14px;font-size:13px;font-weight:700;line-height:1.3;transition:border-color .15s,color .15s,background .15s;display:inline-flex}.glossary-chip:hover{background:#fff;border-color:#087f7959}.glossary-chip.is-selected{border-color:var(--teal);color:#fff;background:var(--teal)}.glossary-chip.is-selected span{font-size:11px;font-weight:900}.glossary-description{background:#dff5ed61;border:1px solid #087f7929;border-radius:15px;margin-top:18px;padding:19px 21px}.glossary-description strong{color:var(--teal-dark);font-size:16px}.glossary-description p{color:#4f686f;max-width:760px;margin:7px 0 0;font-size:13px;line-height:1.8}footer{color:#788b91;justify-content:space-between;align-items:center;gap:20px;width:min(1080px,100%);margin:28px auto 0;font-size:11px;display:flex;position:relative}footer span{letter-spacing:.15em;color:var(--warning);font-weight:900}footer p{text-align:right;margin:0}@media (max-width:800px){.page-shell{padding:34px 16px 22px}.network-badge{margin-bottom:28px;position:static}.hero h1{font-size:clamp(43px,13vw,65px)}.workspace{grid-template-columns:1fr}.metamask-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metamask-guide-address{grid-column:1/-1}.connect-state{min-height:260px}footer{flex-direction:column;align-items:flex-start}footer p{text-align:left}}@media (max-width:430px){.wallet-panel,.swap-card,.metamask-guide{border-radius:19px;padding:21px}.metamask-guide-heading h2{font-size:22px}.metamask-guide-step-heading{flex-direction:column;align-items:flex-start;gap:8px}.metamask-guide-grid{grid-template-columns:1fr}.metamask-guide-copy{min-height:0}.metamask-guide-image img{max-width:280px}.metamask-guide-address{grid-column:auto;grid-template-columns:1fr;min-height:0}.metamask-guide-address button{width:100%}.glossary-section{border-radius:19px;padding:21px}.glossary-chips{gap:8px}.glossary-chip{min-height:44px;padding:8px 12px;font-size:12px}.glossary-description{padding:16px}.lead{font-size:14px}.swap-card-header{align-items:flex-end}.amount-row input,.amount-row output{font-size:25px}.balance-grid>div{flex-direction:column;align-items:flex-start;gap:6px}.balance-grid strong{text-align:left}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}