:root { font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#24334b;background:#eef3f8;color-scheme:light;font-synthesis:none }
* { box-sizing:border-box }
body { min-height:100dvh;margin:0;padding:32px 20px;display:grid;place-items:center;background:radial-gradient(ellipse at top left,#dce9f7,transparent 65%) }
main { width:min(100%,600px);padding:36px;background:#ffffffdc;border:1px solid #fff;border-radius:18px;box-shadow:0 16px 56px #344b6712 }
.brand { color:#58708c;font-size:13px;letter-spacing:.04em }
h1 { font-size:25px;line-height:1.4;margin:22px 0 10px }
p { font-size:15px;line-height:1.7;color:#58697e }
section { margin-top:24px }
label { display:block;font-size:14px;margin-bottom:8px }
textarea { display:block;width:100%;resize:vertical;padding:12px;border:1px solid #ccd7e4;border-radius:8px;font:13px/1.6 monospace;color:inherit;background:#f8fafc;overflow-wrap:anywhere }
button { margin-top:16px;border:0;border-radius:8px;padding:12px 20px;background:#325f94;color:#fff;font:inherit;cursor:pointer }
button:hover { background:#254b79 }
button:focus-visible,textarea:focus-visible { outline:3px solid #91b8e6;outline-offset:3px }
.hint { font-size:13px;margin-bottom:0 }
[hidden] { display:none!important }
@media(max-width:480px) { main { padding:25px 20px } h1 { font-size:23px } button { width:100% } }