:root{--ink:#111d3a;--paper:#f5f8ff;--accent:#4f7cff;--pop:#62ddd0;--top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--right:var(--safe-area-inset-right,env(safe-area-inset-right,0px));--bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--left:var(--safe-area-inset-left,env(safe-area-inset-left,0px))}*{box-sizing:border-box}html{min-height:100%;background:var(--ink);touch-action:manipulation}body{margin:0;min-width:280px;color:var(--ink);background:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.app{width:min(100%,620px);min-height:100dvh;margin:auto;padding:calc(var(--top) + 18px) max(calc(var(--right) + 16px),16px) calc(var(--bottom) + 24px) max(calc(var(--left) + 16px),16px);overflow:hidden;background:var(--paper)}header{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}header img{max-width:100%;border:3px solid var(--ink);border-radius:20px}header p{margin:0;font-size:10px;font-weight:900;letter-spacing:.13em}h1{margin:2px 0 0;font-size:clamp(28px,8.8vw,46px);line-height:1.06;letter-spacing:-.055em;overflow-wrap:anywhere}.intro{margin:18px 0;padding:11px 14px;color:var(--paper);background:var(--ink);border-radius:12px;font-weight:800}.card{padding:20px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--pop)}.step{display:flex;gap:12px;align-items:center;margin-bottom:18px}.step>b{display:grid;flex:0 0 46px;height:46px;place-items:center;background:var(--accent);border:2px solid var(--ink);border-radius:50%}.step small{font-size:11px;font-weight:800}.step h2{margin:0;font-size:21px;line-height:1.2}.field{margin-top:15px}.field label{display:block;margin-bottom:7px;font-size:14px;font-weight:800}.input{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:52px;overflow:hidden;background:var(--paper);border:2px solid var(--ink);border-radius:12px}.input input{width:100%;min-width:0;min-height:50px;padding:10px 12px;color:var(--ink);background:transparent;border:0;outline:0;font:inherit;font-size:18px;font-weight:850}.input span{padding:0 12px;font-size:12px;font-weight:800}.input:focus-within{box-shadow:0 0 0 4px var(--pop)}.error{min-height:22px;margin:7px 0 0;color:#a31332;font-size:13px;font-weight:700}button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;margin-top:14px;padding:12px 16px;color:var(--paper);background:var(--ink);border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:900}button:active{opacity:.78;transform:scale(.98)}button:focus-visible,input:focus-visible{outline:4px solid var(--pop);outline-offset:3px}.result[hidden],#input-view[hidden]{display:none}.hero{padding:20px;background:var(--accent);border:3px solid var(--ink);border-radius:18px}.hero small{display:block;font-weight:800}.hero strong{display:block;margin:2px 0;font-size:clamp(50px,16vw,82px);line-height:1;letter-spacing:-.07em}.hero span{font-weight:900}.bar{height:16px;margin:17px 0;overflow:hidden;background:#ddd;border:2px solid var(--ink);border-radius:999px}.bar i{display:block;width:0;height:100%;background:var(--pop);transition:width .2s ease}h3{margin:0;font-size:24px}footer{padding-top:24px;text-align:center;font-size:9px;font-weight:900;letter-spacing:.14em}@media(min-width:680px){body{padding:24px}.app{min-height:calc(100dvh - 48px);border-radius:26px}.card{padding:26px}}@media(max-width:340px){.card{padding:15px}h1{font-size:27px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}