:root{--bg0: #eef3f0;--bg1: #dfeae4;--ink: #12201a;--ink-soft: #3d5248;--line: rgba(18, 32, 26, .12);--accent: #0f7a5a;--accent-2: #c45c26;--panel: rgba(255, 255, 255, .72);--panel-solid: #f7faf8;--code-bg: #15241e;--code-ink: #d7ece3;--ok: #0f7a5a;--warn: #a15c12;--shadow: 0 18px 50px rgba(18, 32, 26, .08);--radius: 18px;--font: "Outfit", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:var(--font);color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,#c9e6d8 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#f0dcc8 0%,transparent 45%),linear-gradient(180deg,var(--bg0),var(--bg1));background-attachment:fixed}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(18,32,26,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(18,32,26,.04) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}#app{width:min(920px,calc(100% - 2rem));margin:0 auto;padding:2.5rem 0 4rem;position:relative;z-index:1}.brand{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;animation:rise .6s ease both}.brand-mark{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}.brand-mark span{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--accent),#1aa87a);box-shadow:0 0 0 4px #0f7a5a1f}.brand h1{margin:0;font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.03em;font-weight:700}.brand p{margin:0;max-width:38rem;color:var(--ink-soft);font-size:1.05rem;line-height:1.55}.config{position:sticky;top:.75rem;z-index:20;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);margin-bottom:1.5rem;animation:rise .7s ease both}.config-grid{display:grid;grid-template-columns:1.2fr 1fr auto;gap:.75rem;align-items:end}@media(max-width:760px){.config-grid{grid-template-columns:1fr}}label{display:grid;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--ink-soft)}input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:#0f7a5a8c;box-shadow:0 0 0 3px #0f7a5a1f}.hint{margin:.65rem 0 0;font-size:.8rem;color:var(--ink-soft)}.hint code{font-family:var(--mono);font-size:.78rem;background:#0f7a5a14;padding:.1rem .35rem;border-radius:6px}.tabs{display:flex;gap:.5rem;margin:1.25rem 0 1rem;padding:.3rem;width:fit-content;max-width:100%;border-radius:999px;background:#ffffff8c;border:1px solid var(--line);animation:rise .75s ease both}.tab{border:0;background:transparent;color:var(--ink-soft);font:inherit;font-weight:600;font-size:.9rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}.tab[aria-selected=true]{background:var(--ink);color:#fff}.flow{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.5rem;color:var(--ink-soft);font-size:.88rem;animation:rise .8s ease both}.flow span{padding:.35rem .65rem;border-radius:999px;background:#ffffff8c;border:1px solid var(--line)}.flow .arrow{border:0;background:transparent;padding:.35rem 0;opacity:.5}.steps{display:grid;gap:1rem}.step{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-solid);box-shadow:var(--shadow);overflow:hidden;animation:rise .85s ease both}.step.done{border-color:#0f7a5a59}.step-head{display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.15rem .35rem}.step-num{flex:0 0 auto;width:2rem;height:2rem;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;background:linear-gradient(145deg,#174d3c,var(--accent))}.step.done .step-num{background:var(--ok)}.step-head h2{margin:0;font-size:1.15rem;letter-spacing:-.02em}.step-head p{margin:.25rem 0 0;color:var(--ink-soft);font-size:.92rem;line-height:1.45}.step-body{padding:.75rem 1.15rem 1.15rem 3.9rem}@media(max-width:640px){.step-body{padding-left:1.15rem}}.checklist{margin:0 0 .9rem;padding:0;list-style:none;display:grid;gap:.45rem}.checklist li{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-soft);font-size:.94rem;line-height:1.45}.checklist strong{color:var(--ink);font-weight:600}.warn{margin:0 0 .9rem;padding:.75rem .9rem;border-radius:12px;background:#c45c2614;border:1px solid rgba(196,92,38,.18);color:#6d3a14;font-size:.88rem;line-height:1.45}.code-block{position:relative;margin:.65rem 0;border-radius:14px;background:var(--code-bg);color:var(--code-ink);overflow:hidden}.code-block header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .75rem;border-bottom:1px solid rgba(215,236,227,.08);font-size:.75rem;color:#d7ece3a6}.code-block pre{margin:0;padding:.9rem 1rem 1rem;overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}.btn{border:0;border-radius:10px;padding:.45rem .75rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:transform .12s,background .15s,color .15s}.btn:active{transform:scale(.97)}.btn-copy{background:#ffffff1a;color:#fff}.btn-copy:hover,.btn-copy.copied{background:var(--accent)}.btn-done{margin-top:.35rem;background:#0f7a5a1a;color:var(--accent)}.step.done .btn-done{background:var(--accent);color:#fff}.links a{color:var(--accent);font-weight:600;text-underline-offset:3px}.faq{margin-top:2rem;padding-top:.5rem;animation:rise .9s ease both}.faq h2{margin:0 0 .85rem;font-size:1.2rem}.faq details{border:1px solid var(--line);border-radius:14px;background:#ffffff8c;padding:.85rem 1rem;margin-bottom:.55rem}.faq summary{cursor:pointer;font-weight:600}.faq p{margin:.55rem 0 0;color:var(--ink-soft);font-size:.92rem;line-height:1.5}.toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%) translateY(120%);background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:999px;font-size:.88rem;font-weight:600;box-shadow:var(--shadow);transition:transform .25s ease;z-index:50}.toast.show{transform:translate(-50%) translateY(0)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}