:root{color-scheme:dark;--ink:#f6ede4;--muted:#b6adb2;--gold:#e9c69c;--surface:#191923}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 10% 5%,#31252d,transparent 52%),#101017;color:var(--ink);font:15px/1.55 system-ui,"Microsoft YaHei",sans-serif}
main{max-width:690px;margin:0 auto;padding:48px 22px 26px}
header{display:flex;align-items:center;gap:17px;margin-bottom:28px}
.mark{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#261e29;color:#ed6069;font-weight:800;font-size:32px}
h1,h2,p{margin:0}
h1{font-size:31px}
h2{font-size:21px}
.eyebrow{color:var(--gold);letter-spacing:.14em;font-size:11px;font-weight:650}
.current,form{border:1px solid #3a3441;border-radius:19px;background:var(--surface);padding:23px}
.current{display:flex;gap:18px;justify-content:space-between;align-items:center;margin-bottom:16px}
.current h2{margin:3px 0 4px}
.muted,footer{color:var(--muted)}
form h2{margin-bottom:6px}
label{display:block;margin:17px 0 6px;font-weight:650}
label .muted{font-weight:400;font-size:12px;margin-left:6px}
input,textarea{width:100%;border:1px solid #4a4352;border-radius:9px;background:#11111a;color:var(--ink);padding:10px 12px;font:inherit}
input:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
textarea{resize:vertical}
button,.secondary{border-radius:10px;padding:10px 17px;font:inherit;font-weight:650;text-decoration:none;white-space:nowrap}
button{border:0;background:var(--gold);color:#211915;cursor:pointer;margin-top:19px}
button:disabled{opacity:.62;cursor:wait}
.secondary{border:1px solid #514555;color:var(--gold)}
#result:not(:empty){margin-top:11px;color:var(--gold)}
#result.error{color:#ff9999}
footer{margin-top:16px;font-size:12px;text-align:center}
@media(max-width:420px){main{padding:30px 14px 18px}.current,form{padding:16px}.current{gap:8px}}