:root{font:17px system-ui,sans-serif;color:#183231;background:#eff6f4}*{box-sizing:border-box}body{margin:0;padding:36px 18px}main{max-width:470px;margin:auto;background:white;border:1px solid #d4e4df;border-radius:22px;padding:32px;box-shadow:0 14px 45px #174c3410}.mark{background:#116857;color:white;border-radius:13px;width:48px;height:48px;display:grid;place-items:center;font-size:32px;font-weight:800}.eyebrow{font-size:12px;letter-spacing:2px;color:#407166;margin-top:24px}h1{font-size:32px;margin:10px 0}p{line-height:1.5;color:#4e6863}label{display:block;margin:20px 0 8px;font-weight:600}input{display:block;width:100%;padding:13px;border:1px solid #abbfb9;border-radius:9px;font:inherit;margin-top:7px}input:focus{outline:3px solid #74c8b4}small,footer{color:#586d68;line-height:1.6}button{margin-top:24px;padding:14px;width:100%;border:0;border-radius:9px;background:#116857;color:white;font:inherit;font-weight:600;cursor:pointer}button:disabled{opacity:.5}#result{white-space:pre-line;margin-top:20px;line-height:1.6;overflow-wrap:anywhere}footer{font-size:13px;margin-top:26px;border-top:1px solid #e3eae7;padding-top:20px}@media(prefers-color-scheme:dark){:root{color:#e6f3ed;background:#10211e}main{background:#172e29;border-color:#33564c}p,small,footer{color:#b7cdc5}input{background:#10211e;color:#fff;border-color:#547568}}

html{-webkit-text-size-adjust:100%}body{min-height:100vh;min-height:100dvh}input{font-size:17px;min-height:48px;min-width:0}button{min-height:48px;touch-action:manipulation}input,button{max-width:100%}button:focus-visible{outline:3px solid #74c8b4;outline-offset:3px}h1,p,small,footer{overflow-wrap:anywhere}input{scroll-margin-block:24px}main{min-width:0}
@media(max-width:520px){body{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}main{padding:24px 20px;border-radius:16px;box-shadow:none}h1{font-size:28px;line-height:1.15}.eyebrow{margin-top:18px}label{margin-top:18px}footer{margin-top:22px;padding-top:16px}button{margin-top:20px}small{font-size:14px}}
@media(max-width:360px){main{padding:20px 16px}h1{font-size:26px}body{padding-left:8px;padding-right:8px}}
@media(max-height:540px) and (orientation:landscape){body{padding-top:10px;padding-bottom:10px}main{padding-top:20px}.mark{width:36px;height:36px;font-size:25px}.eyebrow{margin-top:12px}}