.reason-visual{position:relative;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-md);padding:1.25rem;overflow:hidden}@media(min-width:768px){.reason-visual{padding:1.5rem}}.dark .reason-visual{background:var(--surface-elevated)}.mock-window{position:relative}.mock-chrome{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.625rem .625rem 0 0;background:var(--surface-muted);border-bottom:1px solid var(--border-subtle)}.mock-dots{display:flex;gap:.375rem}.mock-dots span{width:.625rem;height:.625rem;border-radius:9999px;background:var(--border-strong)}.mock-dots span:nth-child(1){background:#ff5f57}.mock-dots span:nth-child(2){background:#febc2e}.mock-dots span:nth-child(3){background:#28c840}.mock-url{flex:1;min-width:0;font-size:.75rem;color:var(--foreground-subtle);background:var(--surface);border:1px solid var(--border);padding:.25rem .625rem;border-radius:.375rem;display:inline-flex;align-items:center;gap:.375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-tabs{display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem .75rem;border-bottom:1px solid var(--border-subtle);font-size:.65rem}.mock-tabs span{padding:.25rem .5rem;border-radius:.375rem;color:var(--foreground-subtle);font-weight:500}.mock-tabs span.active{background:var(--brand-soft);color:var(--brand-strong)}.mock-body{padding:1rem .875rem}.mock-title{font-weight:700;color:var(--foreground);font-size:.875rem;letter-spacing:-.01em}.mock-sub{font-size:.75rem;color:var(--foreground-muted);margin-top:.25rem;line-height:1.5}.mock-line{display:block;height:.4rem;width:100%;background:var(--surface-muted);border-radius:9999px;margin-top:.5rem}.mock-line.w-1\/2{width:50%}.mock-line.w-1\/3{width:33.33%}.mock-line.w-2\/3{width:66.67%}.mock-line.w-3\/4{width:75%}.mock-cta{margin-top:.875rem;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:.5rem;background:var(--gradient-brand);color:#fff;font-size:.7rem;font-weight:600}.mock-doc{background:var(--surface);border:1px solid var(--border);border-radius:.625rem;padding:1rem}.mock-doc-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.625rem;border-bottom:1px solid var(--border-subtle)}.mock-doc-head>span:first-child{font-weight:700;color:var(--foreground);font-size:.875rem}.mock-export{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .625rem;border-radius:.5rem;background:var(--gradient-brand);color:#fff;font-size:.65rem;font-weight:600;border:none}.mock-doc-section{margin-top:.875rem}.mock-label{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--foreground-subtle);margin-bottom:.375rem}.mock-skills{display:flex;gap:.375rem}.mock-skills span{padding:.2rem .5rem;border-radius:9999px;background:var(--brand-soft);color:var(--brand-strong);font-size:.65rem;font-weight:600}.mock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.mock-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:.625rem;overflow:hidden}.mock-card-cover{height:4.5rem;display:flex;align-items:center;justify-content:center;color:var(--foreground-subtle);background:var(--surface-muted)}.mock-card-body{padding:.625rem}.mock-pin{position:absolute;top:.375rem;right:.375rem;display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:9999px;background:var(--gold-soft);color:var(--gold-strong);font-size:.6rem;font-weight:700}.mock-tags{display:flex;gap:.375rem;margin-bottom:.5rem}.mock-chip{padding:.2rem .5rem;border-radius:9999px;font-size:.6rem;font-weight:600;background:var(--surface-muted);color:var(--foreground-subtle)}.mock-chip.active{background:var(--brand-soft);color:var(--brand-strong)}.mock-meta{margin-top:.625rem;display:flex;gap:.75rem;flex-wrap:wrap;font-size:.65rem;color:var(--foreground-subtle)}.mock-meta span{display:inline-flex;align-items:center;gap:.25rem}.mock-channels{display:flex;gap:.375rem;flex-wrap:wrap;margin:.625rem 0}.mock-channel{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .625rem;border:1px solid var(--border);border-radius:.5rem;font-size:.7rem;color:var(--foreground-muted);background:var(--surface)}.mock-form{margin-top:.625rem;display:flex;flex-direction:column;gap:.5rem}.mock-send{align-self:flex-start;display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .625rem;border-radius:.5rem;background:var(--gradient-brand);color:#fff;font-size:.65rem;font-weight:600;border:none}.mock-theme-pair{display:flex;align-items:center;gap:.875rem}.mock-theme-card{flex:1;border:1px solid var(--border);border-radius:.625rem;padding:.75rem;position:relative;min-height:6rem}.mock-theme-card.light{background:#fff}.mock-theme-card.dark{background:#181f25;border-color:#2c3540}.mock-theme-card.dark .mock-bar{background:#2c3540}.mock-theme-card.dark .mock-pill{color:#fff;background:#05b34d2e}.mock-bar{height:.5rem;width:100%;background:var(--surface-muted);border-radius:9999px;margin-bottom:.375rem}.mock-bar.w-2\/3{width:66.67%}.mock-pill{position:absolute;bottom:.5rem;left:.5rem;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:9999px;background:var(--brand-soft);color:var(--brand-strong);display:inline-flex;align-items:center;gap:.25rem}.mock-arrow{color:var(--foreground-subtle)}.mock-toggle{width:2.75rem;height:1.5rem;border-radius:9999px;background:var(--gradient-brand);position:relative;flex-shrink:0;box-shadow:var(--shadow-xs)}.mock-toggle-knob{position:absolute;top:.125rem;right:.125rem;width:1.25rem;height:1.25rem;background:#fff;border-radius:9999px;box-shadow:var(--shadow-xs)}.mock-palette{display:flex;gap:.375rem;margin:.625rem 0}.mock-palette span{width:2rem;height:2rem;border-radius:.5rem;border:1px solid var(--border)}.mock-palette-rows{display:flex;flex-direction:column;gap:.5rem}.mock-seo{display:flex;flex-direction:column;gap:.2rem}.mock-seo-url{font-size:.65rem;color:var(--foreground-subtle)}.mock-seo-title{font-size:.85rem;font-weight:600;color:var(--brand-strong)}.mock-seo-desc{font-size:.7rem;color:var(--foreground-muted)}.mock-seo-tags{margin-top:.625rem;display:flex;gap:.375rem;flex-wrap:wrap}.mock-code{font-family:var(--font-mono);font-size:.6rem;padding:.25rem .5rem;border-radius:.375rem;background:var(--surface-muted);color:var(--foreground-muted)}.mock-stat-row{display:flex;gap:1rem;align-items:center;margin-bottom:.875rem}.mock-stat{display:flex;flex-direction:column}.mock-stat b{font-size:1.1rem;font-weight:800;color:var(--foreground);line-height:1}.mock-stat i{font-size:.65rem;color:var(--foreground-subtle);font-style:normal;margin-top:.15rem}.mock-badge{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:9999px;background:var(--brand-soft);color:var(--brand-strong);font-size:.6rem;font-weight:700}.mock-chart{display:flex;align-items:flex-end;gap:.375rem;height:5rem}.mock-bar-chart{flex:1;background:var(--gradient-brand);border-radius:.25rem .25rem 0 0;animation:mockGrow .6s ease-out both;transform-origin:bottom}@keyframes mockGrow{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}.mock-links{list-style:none;padding:0;margin:.625rem 0 0}.mock-links li{display:flex;align-items:center;justify-content:space-between;padding:.5rem .625rem;border-bottom:1px solid var(--border-subtle)}.mock-links li:last-child{border-bottom:none}.mock-link-name{font-size:.75rem;color:var(--foreground);font-weight:500}.mock-link-count{font-size:.7rem;font-weight:700;color:var(--brand-strong);background:var(--brand-soft);padding:.15rem .5rem;border-radius:9999px}.mock-timeline{display:flex;align-items:center;gap:.375rem;margin:.625rem 0;flex-wrap:wrap}.mock-step{padding:.3rem .625rem;border-radius:.5rem;background:var(--surface-muted);color:var(--foreground-subtle);font-size:.65rem;font-weight:600}.mock-step.done{background:var(--brand-soft);color:var(--brand-strong)}.mock-step.active{background:var(--gradient-brand);color:#fff;box-shadow:var(--shadow-brand)}.mock-flow{display:flex;align-items:center;gap:.5rem;margin:.625rem 0;flex-wrap:wrap}.mock-flow-node{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.5rem;font-size:.7rem;color:var(--foreground);background:var(--surface)}.mock-flow-arrow{color:var(--brand)}.mock-flow-rows{display:flex;flex-direction:column;gap:.5rem}.mock-vcard{display:flex;flex-direction:column;align-items:center;text-align:center}.mock-qr{display:grid;grid-template-columns:repeat(5,1fr);gap:.125rem;width:7rem;height:7rem;margin:.5rem auto}.mock-qr span{background:var(--foreground);border-radius:.125rem}.mock-qr span:nth-child(2n){background:var(--surface-muted)}.mock-qr span:nth-child(3n){background:var(--brand)}.mock-qr span:nth-child(7n+1){background:var(--foreground)}.mock-vcard-actions{display:flex;gap:.5rem;margin-top:.625rem}.mock-qr-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .625rem;border-radius:.5rem;border:1px solid var(--border);color:var(--foreground);background:var(--surface);font-size:.65rem;font-weight:600}.mock-skill-list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.625rem}.mock-skill-name{font-size:.7rem;color:var(--foreground-muted);margin-bottom:.3rem;display:block}.mock-skill-track{height:.4rem;background:var(--surface-muted);border-radius:9999px;overflow:hidden}.mock-skill-fill{display:block;height:100%;background:var(--gradient-brand);border-radius:9999px;animation:mockGrowX .6s ease-out both;transform-origin:left}@keyframes mockGrowX{0%{transform:scaleX(.4)}to{transform:scaleX(1)}}.mock-quote{font-size:.85rem;color:var(--foreground);line-height:1.6;font-style:italic;padding-left:1rem;border-left:3px solid var(--brand)}.mock-author{display:flex;align-items:center;gap:.625rem;margin-top:.875rem}.mock-avatar{width:2rem;height:2rem;border-radius:9999px;background:var(--gradient-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}.mock-author b{display:block;font-size:.75rem;color:var(--foreground)}.mock-author i{font-size:.65rem;color:var(--foreground-subtle);font-style:normal}.mock-stars{display:inline-flex;gap:.125rem;margin-left:auto;color:var(--gold)}.mock-now-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.mock-badge-live{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:9999px;background:var(--brand-soft);color:var(--brand-strong);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.mock-badge-live .dot{width:.4rem;height:.4rem;border-radius:9999px;background:var(--brand);animation:pulse-soft 2s ease-in-out infinite}.mock-cal{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem;margin:.625rem 0}.mock-cal-cell{height:1.75rem;border-radius:.375rem;background:var(--surface-muted)}.mock-cal-cell.active{background:var(--gradient-brand)}.mock-cal-cell.taken{background:var(--surface-active);position:relative}.mock-cal-cell.taken:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 47%,var(--danger) 47%,var(--danger) 53%,transparent 53%);opacity:.35;border-radius:.375rem}.mock-input{flex:1;display:inline-flex;align-items:center;padding:.375rem .625rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);color:var(--foreground-subtle);font-size:.7rem}.mock-form{display:flex;gap:.375rem;margin-top:.625rem}.mock-sub-count{margin-top:.5rem;font-size:.65rem;color:var(--foreground-subtle)}.mock-sub-count b{color:var(--foreground);font-weight:800}.mock-lang-row{display:flex;gap:.375rem;margin:.625rem 0;flex-wrap:wrap}.mock-lang{width:2rem;height:2rem;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-muted);color:var(--foreground-muted);font-size:.65rem;font-weight:700;border:1px solid var(--border)}.mock-lang.active{background:var(--gradient-brand);color:#fff;border-color:transparent}.mock-string-row{display:flex;justify-content:space-between;align-items:center;padding:.375rem .625rem;border-radius:.5rem;background:var(--surface-muted);margin-top:.375rem;font-size:.65rem}.mock-string-key{font-family:var(--font-mono);color:var(--foreground-subtle)}.mock-string-val{color:var(--foreground);font-weight:600}.mock-lock{text-align:center}.mock-lock-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;background:var(--gold-soft);color:var(--gold-strong);margin-bottom:.5rem}.mock-lock .mock-form{justify-content:center}.mock-flow-node{display:inline-flex;align-items:center;gap:.375rem}.mock-code-window .mock-chrome{justify-content:space-between}.mock-code-window .mock-export{background:var(--gradient-brand);border:none;color:#fff}.mock-code{font-family:var(--font-mono);font-size:.7rem;padding:.875rem 1rem;background:#0f172a;color:#cbd5e1;border-radius:0 0 .625rem .625rem;line-height:1.65;overflow-x:auto}.mock-code .mock-key{color:#93c5fd}.mock-code .mock-str{color:#fcd34d}.mock-code .mock-num{color:#fda4af}.mock-code .mock-brace{color:#cbd5e1}.mock-code .mock-indent{padding-left:1.5rem}.mock-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.625rem 0}.mock-score{display:flex;flex-direction:column;align-items:center;padding:.625rem .25rem;border-radius:.5rem;background:var(--brand-soft);color:var(--brand-strong)}.mock-score b{font-size:1.25rem;font-weight:800;line-height:1}.mock-score i{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-style:normal;margin-top:.25rem;opacity:.85}@media(prefers-reduced-motion:reduce){.mock-bar-chart,.mock-skill-fill{animation:none}}