:root{--bg-dark: #1a1a2e;--text-primary: #111827;--text-secondary: #6b7280;--text-muted: #9ca3af;--border: #e5e7eb;--bg-card: #ffffff;--bg-subtle: #f9fafb;--green-light: #ecfdf5;--green-border: #10b981;--yellow-light: #fefce8;--yellow-border: #f59e0b;--blue-primary: #2563eb;--blue-hover: #1d4ed8;--blue-light: #eff6ff;--success: #10b981}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text-primary);background:#f5f5f5;min-height:100vh}.header{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:68px;border-bottom:1px solid #e5e7eb}.header-left{display:flex;align-items:center;gap:12px;margin-left:40px}.header-logo{height:44px;width:auto;display:block}.header-right{text-align:right;line-height:1.3;margin-right:40px}.header-powered{font-size:13px;font-weight:600;color:#374151;letter-spacing:.01em}.header-brand{font-size:16px;font-weight:700;color:#374151}.header-author{font-size:11px;font-weight:600;color:#374151;letter-spacing:.01em}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.bounce{display:inline-block;animation:bounce 2s ease-in-out infinite}.main-content{max-width:960px;margin:0 auto;padding:0 16px 48px}.pill-badge{display:flex;justify-content:center;margin-top:28px;margin-bottom:12px}.pill-badge span{border:1px solid var(--border);border-radius:9999px;padding:8px 20px;background:#fff;font-size:14px;font-weight:500;color:var(--text-primary)}.kicker-text{text-align:center;font-size:12px;color:#666;margin-bottom:32px}.kicker-text a{color:var(--blue-primary);text-decoration:none}.kicker-text a:hover{text-decoration:underline}.instructions-card{max-width:720px;margin:0 auto 32px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.instructions-header{font-size:18px;font-weight:600;margin-bottom:16px}.step-box{border-radius:8px;padding:16px;margin-bottom:16px;border-left:4px solid}.step-box--green{background:var(--green-light);border-left-color:var(--green-border)}.step-box--yellow{background:var(--yellow-light);border-left-color:var(--yellow-border)}.step-box-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.step-box-title{font-size:15px;font-weight:600;color:var(--text-primary)}.badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:9999px}.badge--green{background:var(--green-border);color:#fff}.badge--yellow{background:var(--yellow-border);color:#78350f}.step-box ol{padding-left:20px;font-size:14px;color:var(--text-secondary);line-height:1.8}.tip-box{background:var(--blue-light);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--text-secondary);line-height:1.5}.prompt-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto 40px}.prompt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;overflow:hidden}.prompt-card-header{padding:20px 20px 0;display:flex;align-items:flex-start;justify-content:space-between}.prompt-card-title-group{flex:1}.prompt-card-title{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:2px}.prompt-card-desc{font-size:13px;color:var(--text-secondary)}.version-badge{background:#f3f4f6;font-size:12px;color:var(--text-secondary);border-radius:4px;padding:2px 8px;font-weight:500;white-space:nowrap;margin-left:8px}.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:16px 20px}.info-item{background:var(--bg-subtle);border-radius:6px;padding:8px 12px;font-size:13px;color:var(--text-secondary);line-height:1.4}.info-item-emoji{margin-right:4px}.preview-section{padding:0 20px 16px;flex:1}.preview-box{background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:12px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:12px;color:var(--text-secondary);max-height:120px;overflow:hidden;line-height:1.5;white-space:pre-wrap;word-break:break-word}.preview-char-count{text-align:center;font-size:12px;color:var(--text-muted);margin-top:8px}.copy-btn-wrapper{padding:0 20px 20px}.copy-btn{width:100%;background:var(--blue-primary);color:#fff;border:none;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s;font-family:inherit}.copy-btn:hover{background:var(--blue-hover)}.copy-btn--copied,.copy-btn--copied:hover{background:var(--success)}.workflow-section{max-width:960px;margin:0 auto 40px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.workflow-title{font-size:18px;font-weight:600;margin-bottom:24px}.workflow-steps{display:flex;align-items:flex-start;justify-content:center;gap:4px}.workflow-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;max-width:150px}.workflow-step-number{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin-bottom:8px}.workflow-step-number--purple{background:#8b5cf6}.workflow-step-number--blue{background:#3b82f6}.workflow-step-number--teal{background:#14b8a6}.workflow-step-number--orange{background:#f97316}.workflow-step-number--green{background:#22c55e}.workflow-step-label{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.workflow-step-sublabel{font-size:11px;color:var(--text-muted)}.workflow-arrow{color:var(--text-muted);font-size:20px;margin-top:8px;flex-shrink:0}.footer{background:var(--bg-dark);color:#fff;text-align:center;padding:36px 24px}.footer-brand{font-size:20px;font-weight:700;margin-bottom:6px}.footer-tagline{font-size:14px;color:var(--text-muted)}@media (max-width: 768px){.header{padding:12px 16px;height:auto;min-height:60px}.header-logo{height:34px}.prompt-cards{grid-template-columns:1fr}.workflow-steps{flex-direction:column;align-items:center;gap:12px}.workflow-arrow{transform:rotate(90deg);margin-top:0}.workflow-step{max-width:100%;flex-direction:row;gap:12px;text-align:left}.workflow-step-number{flex-shrink:0;margin-bottom:0}}@media (max-width: 480px){.header{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px}.header-right{text-align:left}.main-content{padding:0 12px 32px}.instructions-card{padding:16px}.info-grid{grid-template-columns:1fr}}