:root{--bg: #f6f7fb;--bg-grad: radial-gradient(1200px 600px at 80% -10%, #eef2ff 0%, transparent 55%), radial-gradient(1000px 500px at -10% 10%, #ecfeff 0%, transparent 50%), #f6f7fb;--surface: #ffffff;--surface-2: #fbfcfe;--border: #e7e9f1;--text: #1a1d29;--text-secondary: #646b7a;--text-muted: #9aa1b1;--accent: #4f6ef7;--accent-2: #7c3aed;--accent-soft: #6366f1;--accent-light: #eef2ff;--gradient: linear-gradient(135deg, #6366f1 0%, #4f6ef7 45%, #22d3ee 100%);--gradient-soft: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);--danger: #ef4444;--danger-light: #fef2f2;--success: #10b981;--success-light: #ecfdf5;--warning: #f59e0b;--warning-light: #fffbeb;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);--shadow: 0 4px 14px rgba(16, 24, 40, .07);--shadow-md: 0 12px 28px -8px rgba(16, 24, 40, .14);--shadow-lg: 0 20px 44px -14px rgba(79, 110, 247, .32);--ring: 0 0 0 4px rgba(79, 110, 247, .18);--ease: cubic-bezier(.22, .61, .36, 1)}:root[data-theme=dark]{--bg: #0e1015;--bg-grad: radial-gradient(1200px 600px at 80% -10%, #1a1f3a 0%, transparent 55%), radial-gradient(1000px 500px at -10% 10%, #102330 0%, transparent 50%), #0e1015;--surface: #171a21;--surface-2: #1c2029;--border: #2a2f3a;--text: #e8eaf0;--text-secondary: #a6adbd;--text-muted: #6b7280;--accent: #6d83ff;--accent-2: #a86bff;--accent-soft: #818cf8;--accent-light: #1e2440;--gradient: linear-gradient(135deg, #6366f1 0%, #6d83ff 45%, #22d3ee 100%);--gradient-soft: linear-gradient(135deg, #1a1f3a 0%, #152033 100%);--danger: #f87171;--danger-light: #2a1717;--success: #34d399;--success-light: #0f2920;--warning: #fbbf24;--warning-light: #2a2410;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow: 0 4px 14px rgba(0, 0, 0, .45);--shadow-md: 0 12px 28px -8px rgba(0, 0, 0, .6);--shadow-lg: 0 20px 44px -14px rgba(109, 131, 255, .45);--ring: 0 0 0 4px rgba(109, 131, 255, .3)}:root[data-theme=dark] .topbar{background:#0e1015d1}:root[data-theme=dark] .hero-title{background:linear-gradient(120deg,#e8eaf0 20%,#6d83ff,#22d3ee);-webkit-background-clip:text;background-clip:text}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans SC,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--accent);text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;border-radius:var(--radius);padding:9px 18px;font-size:14px;font-weight:500;transition:transform .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}button:active:not(:disabled){transform:translateY(1px) scale(.99)}button:disabled{opacity:.5;cursor:not-allowed}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--gradient);background-size:160% 160%;color:#fff;box-shadow:var(--shadow);background-position:0% 50%}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-lg);background-position:100% 50%;transform:translateY(-1px)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){filter:brightness(1.05)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:var(--surface);border-color:var(--border);color:var(--text)}input,textarea,select{font-family:inherit;font-size:14px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;outline:none;background:var(--surface);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);width:100%}input::placeholder,textarea::placeholder{color:var(--text-muted)}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring)}textarea{resize:vertical;line-height:1.7}input[type=color]{padding:3px 4px;cursor:pointer}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d9def0}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);background:var(--surface);border:1px solid var(--border);font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all .15s var(--ease)}.pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.badge-ai{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--warning);background:var(--warning-light);padding:2px 8px;border-radius:var(--radius-full);font-weight:500}.badge-ok{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--success)}.page{max-width:960px;margin:0 auto;padding:40px 24px 72px}.page-narrow{max-width:640px;margin:0 auto;padding:40px 24px 72px}.section-title{font-size:20px;font-weight:700;letter-spacing:-.01em}.divider{height:1px;background:var(--border);border:none;margin:16px 0}.topbar{position:sticky;top:0;z-index:20;background:#ffffffd1;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}.topbar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--text)}.brand-mark{width:32px;height:32px;border-radius:10px;background:var(--gradient);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}.app-controls{position:fixed;top:14px;right:16px;z-index:60;display:flex;gap:8px}.app-control-btn{width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);box-shadow:var(--shadow-sm)}.app-control-btn:hover{color:var(--accent);border-color:var(--accent)}.topbar-inner{padding-right:92px}.hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--gradient-soft);border:1px solid var(--border);padding:56px 40px 48px;text-align:center}.hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient);opacity:.06;pointer-events:none}.hero-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-soft);background:var(--surface);border:1px solid var(--border);padding:5px 14px;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.hero-title{font-size:40px;line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:20px 0 12px;background:linear-gradient(120deg,#1a1d29 30%,#4f6ef7 70%,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-sub{color:var(--text-secondary);font-size:15px;max-width:460px;margin:0 auto}.float-shape{position:absolute;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;filter:blur(2px);opacity:.5;pointer-events:none;animation:float 16s ease-in-out infinite}.progress-step{display:flex;align-items:center;gap:8px}.progress-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;background:var(--border);transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}.progress-dot.active{background:var(--gradient);transform:scale(1.08);box-shadow:var(--shadow)}.progress-dot.passed{background:var(--accent)}.progress-line{width:36px;height:3px;border-radius:3px;background:var(--border);position:relative;overflow:hidden}.progress-line.filled:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient);transform-origin:left;animation:growX .4s var(--ease) forwards}.progress-label{font-size:13px;color:var(--text-secondary);font-weight:400}.progress-label.active{color:var(--text);font-weight:600}.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--accent-light);border-top-color:var(--accent);animation:spin .7s linear infinite}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f14266b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.overlay-card{background:var(--surface);border-radius:var(--radius-lg);padding:32px 40px;text-align:center;box-shadow:var(--shadow-md);animation:scaleIn .25s var(--ease)}.success-ring{width:84px;height:84px;border-radius:50%;background:var(--success-light);display:grid;place-items:center;margin:0 auto 20px;animation:scaleIn .4s var(--ease)}.success-ring svg{width:44px;height:44px}.success-ring .check-path{stroke:var(--success);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:36;stroke-dashoffset:36;animation:drawCheck .5s .2s var(--ease) forwards}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes growX{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes drawCheck{to{stroke-dashoffset:0}}@keyframes float{0%,to{transform:translateY(0) translate(0) rotate(0)}33%{transform:translateY(-18px) translate(10px) rotate(8deg)}66%{transform:translateY(12px) translate(-8px) rotate(-6deg)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes pulseRing{0%{box-shadow:0 0 #4f6ef759}to{box-shadow:0 0 0 12px #4f6ef700}}.animate-in{opacity:0;animation:fadeInUp .5s var(--ease) forwards;animation-delay:var(--d, 0ms)}.markdown-preview h1{font-size:1.5em;margin:.6em 0 .3em}.markdown-preview h2{font-size:1.3em;margin:.6em 0 .3em}.markdown-preview h3{font-size:1.15em;margin:.5em 0 .2em}.markdown-preview h4{font-size:1em;margin:.5em 0 .2em}.markdown-preview p{margin:.4em 0}.markdown-preview ul,.markdown-preview ol{margin:.4em 0;padding-left:1.5em}.markdown-preview li{margin:.2em 0}.markdown-preview blockquote{border-left:3px solid var(--accent);padding-left:12px;margin:.5em 0;color:var(--text-secondary);background:var(--accent-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.markdown-preview code{background:var(--bg);padding:2px 6px;border-radius:4px;font-family:SF Mono,Consolas,Liberation Mono,Menlo,monospace;font-size:.9em}.markdown-preview pre{background:var(--bg);padding:12px 16px;border-radius:var(--radius);overflow-x:auto;margin:.5em 0;border:1px solid var(--border)}.markdown-preview pre code{background:none;padding:0}.markdown-preview a{color:var(--accent);text-decoration:none}.markdown-preview a:hover{text-decoration:underline}.markdown-preview img{max-width:100%;border-radius:var(--radius);margin:.5em 0}.markdown-preview hr{border:none;border-top:1px solid var(--border);margin:1em 0}@media (max-width: 720px){.hero{padding:40px 20px 36px}.hero-title{font-size:30px}.page,.page-narrow{padding:24px 16px 56px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}:root[data-reduce-motion=true] *,:root[data-reduce-motion=true] *:before,:root[data-reduce-motion=true] *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}