:root{--bg:#f7efe5;--bg-2:#e9f2ff;--ink:#141414;--muted:#5b5b5b;--card:hsla(0,0%,100%,.85);--accent:#ff7a59;--accent-2:#2f6f6d;--shadow:hsla(0,0%,8%,.08)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at 10% -20%,#ffe5c2 0,transparent 60%),radial-gradient(800px 500px at 90% 0,#d8f2ff 0,transparent 55%),linear-gradient(135deg,var(--bg),var(--bg-2));min-height:100vh}.mono,code,pre{font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,monospace}main{max-width:1100px;margin:0 auto;padding:32px 20px 40px;display:flex;flex-direction:column;gap:28px}h1{font-size:clamp(28px,3vw,40px);margin:12px 0 6px}h2{margin:0 0 14px}h3{margin:0 0 6px;font-size:16px}p{margin:0;color:var(--muted)}.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-gap:24px;gap:24px;align-items:stretch;animation:rise .6s ease both}.hero-panel{background:var(--card);border-radius:18px;padding:16px;border:1px solid hsla(0,0%,8%,.08);box-shadow:0 10px 30px var(--shadow);display:flex;flex-direction:column;gap:16px}.panel-row{display:flex;justify-content:space-between;gap:16px;align-items:center}.token-row{display:flex;gap:8px;flex:1 1}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:20px;gap:20px}.card{background:var(--card);border-radius:18px;padding:18px;border:1px solid hsla(0,0%,8%,.08);box-shadow:0 10px 30px var(--shadow);animation:rise .6s ease both;animation-delay:.1s}.card.code{grid-column:span 2}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px}label{font-size:13px;color:var(--muted)}input,select{border:1px solid hsla(0,0%,8%,.12);border-radius:12px;padding:10px 12px;font-size:14px;background:#fff}button{border-radius:12px;border:none;background:var(--accent);color:#1b1b1b;padding:10px 14px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}button.ghost{background:#fff;border:1px solid hsla(0,0%,8%,.18)}.actions{display:flex;flex-wrap:wrap;gap:10px}.hint{font-size:12px;color:var(--muted)}pre{background:#10131f;color:#d7e3ff;padding:12px;border-radius:12px;min-height:220px;overflow:auto}.divider{height:1px;background:hsla(0,0%,8%,.12);margin:16px 0}footer{display:flex;justify-content:space-between;color:var(--muted)}.badge,footer{font-size:12px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:600;background:#fff;border:1px solid hsla(0,0%,8%,.1)}.badge-accent{background:#fff2e8;color:#a83f22}.badge-ok{background:#e9f9f1;color:#21714f}.badge-warn{background:#fff6d7;color:#946200}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.hero{grid-template-columns:1fr}.card.code{grid-column:span 1}footer{flex-direction:column;gap:6px}}