@layer components{.ide-preview-section{padding-block:6rem}.ide-preview-root{position:relative;overflow:hidden}.ide-preview-shell{margin-inline:auto;border:1px solid color-mix(in srgb, var(--c-text) 12%, transparent);background:color-mix(in srgb, var(--c-bg) 95%, var(--c-text));max-width:72rem;box-shadow:0 20px 60px color-mix(in srgb, var(--c-text) 8%, transparent);contain:layout paint;isolation:isolate;border-radius:2rem;margin-top:3.5rem;padding:.5rem;overflow:hidden}.ide-preview-frame{border:1px solid color-mix(in srgb, var(--c-text) 10%, transparent);background:var(--c-bg);border-radius:1.55rem;position:relative;overflow:hidden}.ide-preview-frame:before{content:"";background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-primary) 35%, transparent) 50%, transparent 100%);pointer-events:none;opacity:.8;height:1px;position:absolute;inset:0 0 auto}.ide-preview-topbar{border-bottom:1px solid color-mix(in srgb, var(--c-text) 10%, transparent);background:color-mix(in srgb, var(--c-bg) 96%, var(--c-text));justify-content:space-between;align-items:center;gap:1rem;min-height:3.25rem;padding:.875rem 1.125rem;display:flex}.ide-preview-traffic{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.ide-preview-dot{width:.75rem;height:.75rem;box-shadow:inset 0 1px 1px color-mix(in srgb, var(--c-bg) 30%, transparent);border-radius:50%;display:inline-block}.ide-preview-dot--red{background:var(--c-accent)}.ide-preview-dot--yellow{background:color-mix(in srgb, var(--c-accent) 40%, var(--c-secondary))}.ide-preview-dot--green{background:var(--c-secondary)}.ide-preview-workspace{text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb, var(--c-text) 50%, transparent);font-size:.75rem;font-weight:500;line-height:1rem;overflow:hidden}.ide-preview-grid{isolation:isolate;grid-template-columns:1fr;min-height:360px;display:grid;position:relative}.ide-preview-sidebar{z-index:2;background:color-mix(in srgb, var(--c-bg) 97%, var(--c-text));padding:1rem;position:relative}.ide-preview-sidebar--left{border-bottom:1px solid color-mix(in srgb, var(--c-text) 10%, transparent)}.ide-preview-sidebar--right{border-top:1px solid color-mix(in srgb, var(--c-text) 10%, transparent)}.ide-preview-label{letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb, var(--c-text) 50%, transparent);margin:0;font-size:.7rem;font-weight:700;line-height:1rem}.ide-preview-stack{gap:.625rem;display:grid}.ide-preview-stack--explorer{margin-top:.875rem}.ide-preview-stack--agent{margin-top:.625rem}.ide-preview-card{width:100%}.ide-preview-path{color:color-mix(in srgb, var(--c-text) 80%, transparent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.8125rem;line-height:1.125rem}.ide-preview-editor{z-index:1;background:radial-gradient(circle at top right, color-mix(in srgb, var(--c-primary) 12%, transparent) 0%, transparent 45%), var(--c-bg);min-width:0;padding:1.125rem 1.25rem;position:relative}.ide-preview-editor-header{color:var(--c-text);align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.ide-preview-filename{font-size:.875rem;font-weight:600;line-height:1.25rem}.ide-preview-icon{flex-shrink:0;width:1rem;height:1rem}.ide-preview-icon--md{width:1.15rem;height:1.15rem}.ide-preview-icon--brand{color:var(--c-primary)}.ide-preview-icon--success{color:var(--c-secondary)}.ide-preview-code{gap:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.84rem;line-height:1.2rem;display:grid}.ide-preview-code-line{pointer-events:none;opacity:0;will-change:opacity, transform;gap:.875rem;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);display:flex;transform:translate(-12px)}.ide-preview-code-line[data-visible=true]{opacity:1;will-change:auto;transform:translate(0,0)}.ide-preview-line-number{text-align:right;width:1.25rem;color:color-mix(in srgb, var(--c-text) 40%, transparent);-webkit-user-select:none;user-select:none;flex-shrink:0}.ide-preview-line-text{overflow-wrap:anywhere;min-width:0;color:color-mix(in srgb, var(--c-text) 85%, transparent)}.ide-preview-agent-header{align-items:center;gap:.5rem;display:flex}.ide-preview-agent-title{color:var(--c-text);margin:0;font-size:.95rem;font-weight:600}.ide-preview-agent-panels{gap:.875rem;margin-top:.875rem;display:grid}.ide-preview-agent-group{gap:.5rem;display:grid}.ide-preview-group-label{letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--c-text) 55%, transparent);align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;line-height:1rem;display:inline-flex}.ide-preview-message{min-height:auto;color:color-mix(in srgb, var(--c-text) 85%, transparent);margin:0;font-size:.8125rem;line-height:1.35rem}.ide-preview-check-row{align-items:center;gap:.5rem;width:100%;min-width:0;display:inline-flex}.ide-preview-check-icon{flex-shrink:0}.ide-preview-check-text{min-width:0;color:color-mix(in srgb, var(--c-text) 80%, transparent);font-size:.8125rem;line-height:1.125rem}@media (min-width:1024px){.ide-preview-grid{grid-template-columns:210px minmax(0,1fr) 280px}.ide-preview-sidebar--left{border-right:1px solid color-mix(in srgb, var(--c-text) 10%, transparent);border-bottom:0}.ide-preview-sidebar--right{border-left:1px solid color-mix(in srgb, var(--c-text) 10%, transparent);border-top:0}}@media (max-width:767px){.ide-preview-section{padding-block:4.5rem}.ide-preview-shell{border-radius:1.5rem;margin-top:2.5rem;padding:.375rem}.ide-preview-frame{border-radius:1.15rem}.ide-preview-topbar,.ide-preview-sidebar,.ide-preview-editor{padding:.9375rem}.ide-preview-code{gap:.7rem}}@media (prefers-reduced-motion:reduce){.ide-preview-code-line{opacity:1;will-change:auto;transition:none;transform:none}.ide-preview-frame:before{opacity:.5}}}