@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { --ink:#17251f; --deep:#102c23; --green:#64e7b7; --mint:#dbfaea; --paper:#f4f4ee; --line:#d7ddd5; --muted:#64736c; --danger:#bd3434; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC",system-ui,sans-serif; }
body::before { content:""; position:fixed; width:48rem; height:48rem; right:-20rem; top:-18rem; border-radius:50%; background:#d8f9e9; filter:blur(1px); z-index:-1; }
.shell { max-width:1180px; min-height:100vh; margin:0 auto; padding:34px 28px 70px; display:grid; grid-template-columns:1fr 490px; grid-template-areas:"hero panel" "docs docs"; gap:54px 82px; align-items:center; }
.hero { grid-area:hero; align-self:center; padding:18px 0; }
.brand { display:inline-block; color:var(--ink); font:600 21px/1 "DM Mono",monospace; text-decoration:none; letter-spacing:-1px; margin-bottom:82px; }.brand span { color:#32996f; }
.eyebrow,.doc-label { color:#438069; font-size:13px; font-weight:700; letter-spacing:.08em; }.eyebrow i { display:inline-block; width:8px; height:8px; margin-right:8px; vertical-align:1px; border-radius:50%; background:#47c996; box-shadow:0 0 0 5px #c5f3dd; }
h1 { font-size:clamp(40px,5vw,64px); line-height:1.18; margin:18px 0 22px; letter-spacing:-.06em; } h1 em { color:#31936b; font-style:normal; }
.intro { max-width:510px; color:#526159; line-height:1.85; font-size:15px; margin:0; }.facts { display:flex; gap:36px; margin-top:48px; }.facts div { display:grid; gap:5px; }.facts strong { font:500 18px "DM Mono",monospace; }.facts span { color:var(--muted); font-size:12px; }
.panel { grid-area:panel; background:#fff; box-shadow:0 25px 65px #1b3f3020; border:1px solid #e7ece7; border-radius:18px; padding:35px 38px; }.panel-head p { color:#42a879; font-weight:700; font-size:12px; letter-spacing:.08em; margin:0 0 8px; }.panel h2 { font-size:25px; letter-spacing:-.04em; margin:0 0 6px; }.panel-head span { color:var(--muted); font-size:13px; line-height:1.65; }
form { margin-top:27px; display:grid; gap:17px; } label { display:grid; gap:7px; color:#34433b; font-size:13px; font-weight:600; } label small { color:#829088; font-weight:400; } input,textarea { resize:vertical; width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; color:var(--ink); outline:0; font:14px "Noto Sans SC",sans-serif; background:#fcfdfb; transition:.18s; } input:focus,textarea:focus { border-color:#55bc8c; box-shadow:0 0 0 3px #d8f5e5; } button { border:0; border-radius:8px; cursor:pointer; font:600 14px "Noto Sans SC",sans-serif; } #submit-button { margin-top:4px; padding:13px; color:#fff; background:#173f30; transition:.18s; } #submit-button:hover { background:#245f48; transform:translateY(-1px); } #submit-button:disabled { opacity:.6; cursor:wait; transform:none; } #submit-button span { margin-left:7px; color:var(--green); }.hint { margin:0; color:#8a948e; font-size:11px; line-height:1.6; }
.result { margin-top:24px; padding:16px; border:1px solid #bae8d2; border-radius:10px; background:#f2fff8; }.result-title { display:flex; align-items:flex-start; gap:10px; }.result-title>span { display:grid; place-items:center; flex:none; width:20px; height:20px; color:#fff; border-radius:50%; background:#37af7a; font-size:12px; }.result-title div { display:grid; gap:2px; }.result-title b { font-size:14px; }.result-title small { color:#658174; font-size:11px; }.secret { display:flex; align-items:center; margin:13px 0 10px; border:1px solid #bde1cc; border-radius:6px; overflow:hidden; background:#fff; }.secret code { min-width:0; flex:1; overflow:hidden; padding:10px; text-overflow:ellipsis; white-space:nowrap; font:12px "DM Mono",monospace; }.secret button { align-self:stretch; padding:0 12px; border-radius:0; color:#246849; background:#dcf7e9; font-size:12px; }.usage { display:grid; gap:3px; color:#668375; font-size:11px; }.usage code { font:11px "DM Mono",monospace; color:#234f3b; }.message { min-height:18px; margin:13px 0 0; color:var(--danger); font-size:13px; }.message.warning { color:#9a6c13; }
.docs { grid-area:docs; display:grid; grid-template-columns:.72fr 1.4fr .75fr; gap:28px; padding:31px 33px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.docs h2 { max-width:220px; margin:8px 0 0; font-size:21px; letter-spacing:-.04em; line-height:1.38; }.docs pre { overflow:auto; margin:0; padding:17px 19px; border-radius:9px; color:#cbecdc; background:#102c23; font:11px/1.8 "DM Mono",monospace; }.rules { padding:2px 0; }.rules span { color:#438069; font-weight:700; font-size:12px; }.rules p { color:#5f6d66; font-size:12px; line-height:1.7; }.rules a { color:#287e59; font-size:12px; font-weight:700; text-decoration:none; }
@media (max-width:850px) { .shell { grid-template-columns:1fr; grid-template-areas:"hero" "panel" "docs"; gap:36px; padding:25px 19px 45px; }.brand { margin-bottom:52px; }.facts { margin-top:36px; }.panel { padding:28px 23px; }.docs { grid-template-columns:1fr; padding:25px 22px; gap:20px; }.docs h2 { max-width:none; } }
@media (max-width:420px) { .facts { gap:19px; }.facts strong { font-size:15px; }.panel { border-radius:13px; }.secret code { font-size:10px; } }