:root{--bg:#f5f8fb;--surface:#fff;--text:#0b1a2b;--muted:#6b7280;--accent:#0066d6;--accent-2:#004fa3;--glass:hsla(0,0%,100%,.7)}*{box-sizing:border-box}body,html{height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#f6f9fc,#eef6fb);color:var(--text);margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px}.wrapper{max-width:880px;width:100%;padding:32px;margin:0 auto}header{margin-bottom:20px;display:flex;align-items:center;gap:18px}.site-logo{width:72px;height:72px;object-fit:contain;border-radius:12px;box-shadow:0 6px 18px rgba(12,30,60,.08)}.site-title{font-weight:800;font-size:1rem;letter-spacing:.2px}h1{font-size:2.1rem;color:var(--accent);margin:0}.subtitle{color:var(--muted);font-size:1rem;margin-top:6px}.content{background:var(--surface);border:1px solid rgba(2,50,100,.04);padding:38px 30px 34px;border-radius:18px;box-shadow:0 16px 48px rgba(0,40,120,.13),0 1.5px 0 rgba(0,102,214,.08);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.content:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(8,30,60,.12)}.content p{position:relative;font-size:1.13rem;line-height:1.7;margin:18px 0;padding-left:38px;display:inline-block;text-align:left;max-width:520px}.content p:first-child:before{background:url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%230066d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20"/></svg>') no-repeat 50%/contain}.content p:first-child:before,.content p:last-child:before{content:"";display:inline-block;position:absolute;left:-32px;top:6px;width:28px;height:28px;opacity:.7}.content p:last-child:before{background:url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%230066d6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/></svg>') no-repeat 50%/contain}footer{position:fixed;left:0;bottom:0;width:100vw;text-align:center;background:transparent;color:var(--muted);font-size:.97rem;padding:12px 0 32px;z-index:10;box-shadow:none;border:none}ul{margin:8px 0 0 20px}code{background:#f3f7fb;padding:3px 8px;border-radius:6px;font-size:.95em}.response-box{background:#0f1724;color:#e6f0ff;padding:12px 14px;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:.9rem;white-space:pre-wrap;overflow:auto;max-height:300px;border:1px solid rgba(2,50,100,.06)}.lead,.muted{color:var(--muted)}.lead{font-size:1rem;margin-bottom:14px}input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(8,30,60,.06);background:linear-gradient(180deg,var(--glass),hsla(0,0%,100%,.98));font-size:1rem;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{box-shadow:0 6px 18px rgba(2,70,180,.06);border-color:var(--accent-2)}.btn{display:inline-block;padding:10px 18px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--accent);text-decoration:none;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.btn:hover{transform:translateY(-2px);opacity:.98}.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;padding:10px 18px;border-radius:12px;border:none;box-shadow:0 8px 20px rgba(1,48,120,.12)}.divider{border:none;border-top:1px solid rgba(2,50,100,.04);margin:20px 0}@media (max-width:800px){.wrapper{padding:20px}h1{font-size:1.6rem}.subtitle{font-size:.92rem}.site-logo{width:56px;height:56px}.content{padding:20px;border-radius:12px}}@media (max-width:420px){header{gap:12px}h1{font-size:1.3rem}}