@layer components{.xdemo{min-width:0;margin:0}.xdemo-steps{flex-wrap:wrap;gap:.5rem;display:flex}.xstep{border:1px solid var(--border);background:var(--background);height:2.25rem;color:var(--foreground);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover), transform var(--dur-press) var(--ease-out);border-radius:999px;align-items:center;gap:.5rem;padding:0 .875rem 0 .375rem;font-size:.875rem;font-weight:500;display:inline-flex;position:relative}.xstep-n,.xstep-ic{background:var(--muted);width:1.5rem;height:1.5rem;color:var(--foreground);font-variant-numeric:tabular-nums;border-radius:999px;place-items:center;font-size:.75rem;display:inline-grid}.xstep-ic{padding:4px}.xstep[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}.xstep[aria-pressed=true] .xstep-n,.xstep[aria-pressed=true] .xstep-ic{background:var(--background);color:var(--foreground)}.xstep:active{transform:scale(var(--press-scale))}.xstep:focus-visible{box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);outline:none}@media (hover:hover) and (pointer:fine){.xstep:not([aria-pressed=true]):hover{background:var(--muted)}}@media (pointer:coarse){.xstep:after{content:"";position:absolute;inset:-5px 0}}.xdemo-say{min-height:2lh;color:var(--muted-foreground);max-width:62ch;margin:.75rem 0 1rem;font-size:.875rem;line-height:1.375rem}.xdemo-cap{color:var(--muted-foreground);max-width:70ch;margin-top:.75rem;font-size:.8125rem;line-height:1.25rem}.xwin{border:1px solid var(--border);border-radius:calc(var(--radius) * 1.4);background:var(--card);overflow:hidden}.xwin-bar{background:var(--muted);border-bottom:1px solid var(--border);align-items:center;gap:.75rem;height:44px;padding:0 .75rem 0 1rem;display:flex}.xwin-dots{gap:6px;display:inline-flex}.xwin-dots i{background:color-mix(in oklch, var(--border), var(--foreground) 14%);border-radius:999px;width:10px;height:10px}.xwin-url{background:var(--background);max-width:420px;height:28px;color:var(--muted-foreground);border-radius:999px;flex:1;align-items:center;gap:6px;margin:0 auto;padding:0 12px;font-size:.8125rem;display:inline-flex}.xwin-url .ic{width:13px;height:13px}.xwin-ext{border-radius:calc(var(--radius) * .8);width:28px;height:28px;transition:background-color var(--dur-fast) var(--ease-hover);place-items:center;display:inline-grid}.xwin-ext i{background:var(--primary);width:20px;height:20px;color:var(--primary-foreground);border-radius:6px;place-items:center;font-size:9px;font-style:normal;font-weight:700;display:inline-grid}.xwin-ext[data-on]{background:var(--background)}.xwin-body{grid-template-columns:minmax(0,1fr) 360px;height:600px;display:grid;position:relative}.xchat{flex-direction:column;justify-content:space-between;min-width:0;padding:2rem 2rem 1.5rem;display:flex}.xchat-thread{gap:14px;max-width:520px;display:grid}.xline{background:var(--muted);border-radius:999px;height:10px;display:block}.xline-me{border-radius:var(--radius);justify-self:end;height:34px;margin:.5rem 0 .75rem}.xline-me+.xline{margin-top:2px}.xchat-box{border:1px solid var(--input);border-radius:calc(var(--radius) * 1.4);background:var(--background);min-height:96px;transition:border-color var(--dur-base) var(--ease-out);padding:.75rem 52px .75rem 1rem;position:relative}.xchat-box[data-filled]{border-color:var(--foreground)}.xchat-label{color:var(--muted-foreground);margin-bottom:4px;font-size:.75rem;font-weight:500;display:block}.xchat-ph{color:var(--muted-foreground)}.xchat-text{color:var(--foreground);animation:smp-x-insert var(--spring-glide-dur) var(--spring-glide) both;font-size:.875rem;line-height:1.375rem}@keyframes smp-x-insert{0%{opacity:0;transform:translateY(calc(10px * var(--motion-scale)))}}.xchat-send{border-radius:calc(var(--radius) * .8);background:var(--muted);width:32px;height:32px;color:var(--muted-foreground);transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);place-items:center;display:grid;position:absolute;bottom:10px;right:10px;transform:rotate(-90deg)}.xchat-send .ic{width:16px;height:16px}.xchat-box[data-filled] .xchat-send{background:var(--primary);color:var(--primary-foreground)}.xpanel{border-left:1px solid var(--border);background:var(--background);min-height:0;transition:opacity var(--dur-fast) var(--ease-hover);flex-direction:column;display:flex;overflow:hidden}.xp-top{border-bottom:1px solid var(--border);flex:none;align-items:center;gap:10px;height:52px;padding:0 .75rem 0 1rem;display:flex}.xp-top b{font-family:var(--font-heading);font-size:.9375rem;font-weight:600}.xp-logo{background:var(--primary);width:28px;height:28px;color:var(--primary-foreground);border-radius:8px;place-items:center;font-size:11px;font-weight:700;display:inline-grid}.xp-more{border-radius:calc(var(--radius) * .8);background:var(--muted);place-items:center;width:32px;height:32px;margin-left:auto;display:inline-grid}.xp-view{scrollbar-width:thin;min-height:0;animation:smp-x-view var(--spring-snappy-dur) var(--spring-snappy) both;flex:1;padding:.75rem 1rem 1rem;overflow:auto}@keyframes smp-x-view{0%{opacity:0;transform:translateX(calc(12px * var(--motion-scale)))}}.xp-search{border:1px solid var(--border);border-radius:var(--radius);background:var(--background);height:38px;color:var(--muted-foreground);align-items:center;gap:.5rem;padding:0 10px 0 12px;font-size:.875rem;display:flex}.xp-search .ic{width:16px;height:16px}.xp-search kbd{margin-left:auto}.xp-chips{gap:6px;margin:10px 0 4px;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),#0000)}.xp-chips span{border:1px solid var(--border);color:var(--muted-foreground);border-radius:999px;flex:none;padding:3px 10px;font-size:.8125rem}.xp-label{color:var(--muted-foreground);margin:12px 2px 6px;font-size:.75rem;font-weight:500}.xp-label-in{margin-top:8px}.xp-rows{gap:8px;list-style:none;display:grid}.xp-row{text-align:left;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);width:100%;color:var(--foreground);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-hover), transform var(--dur-press) var(--ease-out);gap:4px;padding:10px 12px 11px;display:grid}.xp-row:active{transform:scale(var(--press-scale))}@media (hover:hover) and (pointer:fine){.xp-row:hover{border-color:color-mix(in oklch, var(--border), var(--foreground) 20%)}}.xp-row-top{align-items:baseline;gap:6px;min-width:0;display:flex}.xp-row-top b{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:.875rem;font-weight:600;overflow:hidden}.xp-row-top small{color:var(--muted-foreground);flex:none;font-size:.75rem;font-weight:500}.xp-pin{width:13px;height:13px;color:var(--muted-foreground);align-self:center}.xp-row-text{color:var(--foreground);-webkit-box-orient:vertical;font-size:.875rem;line-height:1.6;display:-webkit-box;overflow:hidden}.xp-row-tags{color:var(--muted-foreground);font-size:.75rem}.xp-detail-head{margin:-4px 0 6px}.xp-back{border-radius:calc(var(--radius) * .8);height:32px;color:var(--foreground);cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:0 8px 0 2px;font-size:.875rem;font-weight:500;display:inline-flex}.xp-back .ic{width:16px;height:16px}@media (hover:hover) and (pointer:fine){.xp-back:hover{background:var(--muted)}}.xp-used{color:var(--muted-foreground);font-size:.8125rem}.xp-title{font-family:var(--font-heading);letter-spacing:-.01em;margin:2px 0 .75rem;font-size:1.0625rem;font-weight:700;line-height:1.5rem}.xp-fill{border:1px solid var(--border);border-radius:calc(var(--radius) * 1.4);min-width:0;margin:0 0 10px;padding:6px 12px 12px}.xp-fill legend{padding:0 4px;font-size:.875rem;font-weight:500}.xp-field{color:var(--muted-foreground);gap:4px;font-size:.8125rem;display:grid}.xp-left{color:var(--muted-foreground);margin-top:6px;font-size:.8125rem}.xp-block{border:1px solid var(--border);border-radius:calc(var(--radius) * 1.4);background:var(--card);color:var(--foreground);margin:0;padding:12px 14px;font-size:.875rem;line-height:1.6}.xp-actions{margin-top:10px}.xp-toast{border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);animation:smp-rise-in var(--dur-base) var(--ease-out) both;align-items:center;gap:6px;margin-top:10px;padding:9px 12px;font-size:.8125rem;font-weight:500;display:flex}.xp-toast .ic{width:16px;height:16px}.xpop{z-index:10;background:var(--popover);width:min(380px,100% - 24px);color:var(--popover-foreground);border:1px solid var(--border);border-radius:calc(var(--radius) * 1.4);box-shadow:var(--shadow-popover);transform-origin:100% 0;animation:smp-pop-in var(--dur-fast) var(--ease-out) both;position:absolute;top:8px;right:12px;overflow:hidden}.xwin[data-step=popup] .xpanel{opacity:.4}.xpop-search{border:1.5px solid var(--foreground);border-radius:var(--radius);height:44px;color:var(--muted-foreground);align-items:center;gap:.5rem;margin:10px;padding:0 12px;display:flex}.xpop-search .ic{width:18px;height:18px}.xpop-search input{min-width:0;color:var(--foreground);background:0 0;border:0;outline:none;flex:1;font-size:.9375rem}.xpop-label{color:var(--muted-foreground);padding:0 14px 6px;font-size:.75rem;font-weight:500}.xpop-rows{gap:2px;padding:0 6px 6px;list-style:none;display:grid}.xpop-row{text-align:left;border-radius:calc(var(--radius) * .8);width:100%;color:var(--foreground);cursor:pointer;background:0 0;border:0;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:2px 8px;padding:8px 10px;display:grid}.xpop-row[data-active]{background:var(--muted)}.xpop-sq{background:var(--muted);width:12px;height:12px;box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--border), var(--foreground) 14%);border-radius:3px}.xpop-row b{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;overflow:hidden}.xpop-row small{color:var(--muted-foreground);font-size:.75rem}.xpop-text{color:var(--muted-foreground);white-space:nowrap;text-overflow:ellipsis;grid-column:2/-1;font-size:.875rem;overflow:hidden}.xpop-none{color:var(--muted-foreground);padding:10px 14px;font-size:.8125rem}.xpop-foot{border-top:1px solid var(--border);color:var(--muted-foreground);gap:1rem;padding:10px 14px;font-size:.75rem;display:flex}.xpop-foot span{align-items:center;gap:5px;display:inline-flex}@media (width<=860px){.xwin-body{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:640px}.xpanel{border-left:0;grid-row:1}.xchat{border-top:1px solid var(--border);grid-row:2;padding:.75rem}.xchat-thread{display:none}.xchat-box{min-height:0}.xchat-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.xwin-url{max-width:none}}@media (width<=639px){.xwin-dots{display:none}.xwin-bar{padding-left:.75rem}.xdemo-steps{scrollbar-width:none;flex-wrap:nowrap;margin:0 -1rem;padding:5px 1rem;overflow-x:auto}.xdemo-steps::-webkit-scrollbar{display:none}}}