.showcase-pointer{isolation:isolate;position:relative}.showcase-pointer-overlay{z-index:20;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.showcase-pointer-cursor{transform:translate3d(var(--cursor-x,0), var(--cursor-y,0), 0);will-change:transform;position:absolute;top:0;left:0}.showcase-pointer-cursor-body{opacity:0;transform:scale(calc(var(--showcase-pointer-cursor-scale,1) * .6));transform-origin:0 0;transition:opacity .22s ease-out,transform .26s ease-out}.showcase-pointer-cursor[data-visible] .showcase-pointer-cursor-body{opacity:1;transform:scale(var(--showcase-pointer-cursor-scale,1));transition:none;animation:.46s cubic-bezier(.34,1.56,.64,1) showcase-pointer-cursor-enter}@keyframes showcase-pointer-cursor-enter{0%{opacity:0;transform:scale(calc(var(--showcase-pointer-cursor-scale,1) * .4))}}.showcase-pointer-cursor-arrow{transform-origin:5px 4px;filter:drop-shadow(0 1px 1.5px #00000038)drop-shadow(0 3px 6px #00000024);transition:transform .14s cubic-bezier(.2,.8,.2,1);display:block;position:absolute;top:-4px;left:-5px;overflow:visible}.showcase-pointer-cursor[data-pressed] .showcase-pointer-cursor-arrow{transform:scale(.86)}.showcase-pointer-cursor-arrow-edge{fill:#fff;stroke:#fff;stroke-width:5px;stroke-linejoin:round}.showcase-pointer-cursor-arrow-fill{fill:var(--showcase-pointer-cursor-color);stroke:var(--showcase-pointer-cursor-color);stroke-width:1.4px;stroke-linejoin:round}.showcase-pointer-cursor-label-anchor{transform:translate3d(var(--label-dx,0), var(--label-dy,0), 0);will-change:transform;position:absolute;top:27px;left:19px}.showcase-pointer-cursor-label{box-sizing:border-box;background:var(--showcase-pointer-cursor-color);box-shadow:0 1px 2px #00000024, 0 4px 12px -2px color-mix(in srgb, var(--showcase-pointer-cursor-color) 45%, transparent);color:var(--showcase-pointer-cursor-text,#fff);letter-spacing:-.005em;white-space:nowrap;transform-origin:0 0;border-radius:.6em;padding:.32em .66em .36em;font:600 14px/1.25 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;animation:.52s cubic-bezier(.34,1.56,.64,1) both showcase-pointer-cursor-label-enter;display:inline-flex;position:relative;overflow:hidden}@keyframes showcase-pointer-cursor-label-enter{0%{opacity:0;transform:scale(.5)}}.showcase-pointer-cursor-label-text{perspective:12em;display:inline-block}.showcase-pointer-cursor-label-text[data-layer=out]{position:absolute;top:.32em;left:.66em}.showcase-pointer-cursor-char{white-space:pre;transform-origin:50% 50% -.55em;backface-visibility:hidden;display:inline-block}.showcase-pointer-cursor-label-mask{vertical-align:bottom;margin:-.12em;padding:.12em;display:inline-block;overflow:hidden}.showcase-pointer-cursor-label-mask>span{display:inline-block}.showcase-pointer-cursor-ripple{border:2px solid var(--showcase-pointer-cursor-color);background:color-mix(in srgb, var(--showcase-pointer-cursor-color) 18%, transparent);opacity:0;pointer-events:none;border-radius:50%;width:46px;height:46px;position:absolute;top:0;left:0}.showcase-pointer-cursor-selection{position:absolute;inset:0}.showcase-pointer-cursor-highlight{background:color-mix(in srgb, var(--showcase-pointer-cursor-color) 26%, transparent);box-shadow:inset 0 -1.5px 0 color-mix(in srgb, var(--showcase-pointer-cursor-color) 70%, transparent);border-radius:2px;position:absolute}.showcase-pointer-cursor-marquee{border:1px solid var(--showcase-pointer-cursor-color);background:color-mix(in srgb, var(--showcase-pointer-cursor-color) 10%, transparent);border-radius:2px;position:absolute}@media (prefers-reduced-motion:reduce){.showcase-pointer-cursor-body,.showcase-pointer-cursor[data-visible] .showcase-pointer-cursor-body,.showcase-pointer-cursor-label{animation:none}.showcase-pointer-cursor-arrow{transition:none}}.showcase-pointer-cursor-trail{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.component-showcase .component-preview-stage:has(>.mpc-stage){height:clamp(420px,62vh,560px);padding:0}.mpc-stage{--mpc-ground:var(--theme-background,#fff);--mpc-ink:var(--theme-ink,#171717);--mpc-muted:var(--theme-ink-muted,#17171794);--mpc-border:var(--theme-border,#1717171f);--mpc-surface:color-mix(in srgb, var(--mpc-ink) 2%, var(--mpc-ground));--mpc-sunken:color-mix(in srgb, var(--mpc-ink) 5%, var(--mpc-ground));--mpc-hover:color-mix(in srgb, var(--mpc-ink) 9%, var(--mpc-ground));--mpc-shadow:0 2px 8px #0000000a;--mpc-lift:0 12px 28px -12px #00000047;--mpc-accent:#0d99ff;background:var(--mpc-ground);width:100%;height:100%;min-height:420px;color:var(--mpc-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif}.mpc-demo{box-sizing:border-box;place-items:center;height:100%;padding:28px 20px 64px;font-size:13px;line-height:1.45;display:grid;overflow:hidden}.mpc-card{box-sizing:border-box;border:1px solid var(--mpc-border);background:var(--mpc-surface);box-shadow:var(--mpc-shadow);border-radius:18px}.mpc-title{letter-spacing:-.01em;margin:0;font-size:14px;font-weight:500}.mpc-muted,.mpc-eyebrow{color:var(--mpc-muted);margin:0;font-size:12px;font-weight:400}.mpc-eyebrow{margin-bottom:6px}.mpc-publish{gap:18px;width:min(100%,360px);padding:16px;display:grid}.mpc-publish-head{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;display:grid}.mpc-thumb{background:linear-gradient(135deg,#4a4a4a,#9a9a9a);border-radius:12px;width:40px;height:40px}.mpc-chip{border:1px solid var(--mpc-border);color:var(--mpc-muted);border-radius:999px;padding:3px 10px;font-size:12px;transition:background .3s ease-out,border-color .3s ease-out,color .3s ease-out}.mpc-chip.is-live{background:var(--mpc-ink);color:var(--mpc-ground);border-color:#0000}.mpc-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mpc-button{border:1px solid var(--mpc-border);height:36px;font:inherit;cursor:pointer;border-radius:999px;padding:0 16px;font-size:12.5px;transition:background .16s ease-out,border-color .16s ease-out,box-shadow .16s ease-out,transform .16s cubic-bezier(.2,.8,.2,1)}.mpc-button.is-secondary{background:var(--mpc-ground);color:var(--mpc-ink);box-shadow:var(--mpc-shadow)}.mpc-button.is-secondary:hover,.mpc-button.is-secondary[data-cursor-hover]{background:var(--mpc-sunken)}.mpc-button.is-secondary[data-active]{border-color:var(--mpc-ink)}.mpc-button.is-primary{border-color:var(--mpc-ink);background:var(--mpc-ink);color:var(--mpc-ground);font-weight:500}.mpc-button.is-primary:hover,.mpc-button.is-primary[data-cursor-hover]{background:color-mix(in srgb, var(--mpc-ink) 86%, var(--mpc-ground))}.mpc-button:active,.mpc-button[data-cursor-press]{transform:scale(.97)}.mpc-button.is-primary[data-state=publishing]{opacity:.6}.mpc-board-card{width:min(100%,620px);padding:8px}.mpc-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.mpc-column{background:var(--mpc-sunken);border-radius:12px;flex-direction:column;gap:8px;min-height:190px;padding:10px;display:flex}.mpc-column header{color:var(--mpc-muted);justify-content:space-between;padding:0 2px 2px;font-size:12px;display:flex}.mpc-count{font-variant-numeric:tabular-nums;text-align:right;min-width:18px}.mpc-task{border:1px solid var(--mpc-border);background:var(--mpc-ground);box-shadow:var(--mpc-shadow);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:10px;padding:10px 12px;transition:border-color .18s ease-out,box-shadow .18s ease-out;position:relative}.mpc-task:hover,.mpc-task[data-cursor-hover]{border-color:var(--theme-border-strong,#1717172e)}.mpc-task[data-dragging]{z-index:2;cursor:grabbing;box-shadow:var(--mpc-lift)}.mpc-task p{margin:6px 0 0;font-size:13px}.mpc-tag{color:var(--mpc-muted);align-items:center;gap:5px;font-size:11.5px;display:inline-flex}.mpc-tag:before{background:var(--tag,var(--mpc-muted));content:"";border-radius:50%;width:6px;height:6px}.mpc-tag.is-motion{--tag:#f97316}.mpc-tag.is-content{--tag:#0d99ff}.mpc-tag.is-ui{--tag:#8b5cf6}.mpc-tag.is-brand{--tag:#14ae5c}.mpc-select{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:24px;width:min(100%,660px);padding:20px;display:grid}.mpc-select .mpc-title{letter-spacing:-.02em;font-size:18px}.mpc-copy{color:var(--mpc-muted);margin:10px 0 0;font-size:14px;line-height:1.6}.mpc-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.mpc-tile{aspect-ratio:1;background:var(--tile);outline-offset:2px;border-radius:12px;outline:2px solid #0000;transition:outline-color .16s ease-out,transform .26s cubic-bezier(.34,1.56,.64,1)}.mpc-tile[data-cursor-selected]{outline-color:var(--showcase-pointer-cursor-color);transform:scale(.94)}.mpc-demo.is-scatter{padding:0;display:block}.mpc-scatter{width:100%;height:100%;font-size:13px;position:relative}.mpc-spot{box-sizing:border-box;gap:16px;padding:18px;display:grid;position:absolute}.mpc-spot p{margin:0}.mpc-spot-head,.mpc-row{align-items:center;gap:12px;display:flex}.mpc-row{justify-content:space-between}.mpc-spot.is-button{width:min(280px,38%);top:34%;left:5%}.mpc-spot.is-button .mpc-button{width:100%;height:40px;font-size:13px}.mpc-spot.is-switch{gap:14px;width:min(270px,38%);top:9%;right:11%}.mpc-spot.is-comments{gap:14px;width:min(330px,42%);top:58%;left:47%}.mpc-switch{background:var(--mpc-hover);cursor:pointer;border:0;border-radius:999px;flex:none;width:42px;height:24px;padding:0;transition:background .2s ease-out;position:relative}.mpc-switch span{background:var(--mpc-ground);border-radius:50%;width:18px;height:18px;transition:transform .26s cubic-bezier(.34,1.56,.64,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000038}.mpc-switch:hover,.mpc-switch[data-cursor-hover]{background:color-mix(in srgb, var(--mpc-ink) 16%, var(--mpc-ground))}.mpc-switch[aria-checked=true]{background:var(--mpc-ink)}.mpc-switch[aria-checked=true] span{transform:translate(18px)}.mpc-social{gap:8px;display:flex}.mpc-like{border:1px solid var(--mpc-border);background:var(--mpc-ground);height:36px;box-shadow:var(--mpc-shadow);color:var(--mpc-ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:999px;flex:none;align-items:center;gap:6px;padding:0 13px;font-size:12.5px;transition:background .16s ease-out,transform .16s cubic-bezier(.2,.8,.2,1);display:inline-flex}.mpc-like svg{fill:none;stroke:currentColor;stroke-width:1.8px;width:16px;height:16px;transition:fill .2s ease-out,color .2s ease-out,transform .36s cubic-bezier(.34,1.56,.64,1)}.mpc-like:hover,.mpc-like[data-cursor-hover]{background:var(--mpc-sunken)}.mpc-like:active,.mpc-like[data-cursor-press]{transform:scale(.94)}.mpc-like[data-liked] svg{color:#f24e9c;fill:currentColor;transform:scale(1.12)}.mpc-comment{box-sizing:border-box;border:1px solid var(--mpc-border);background:var(--mpc-ground);min-width:0;height:36px;box-shadow:var(--mpc-shadow);border-radius:999px;flex:1;transition:border-color .16s ease-out;display:flex}:is(.mpc-comment:has(input:focus-visible),.mpc-comment:has(input[data-cursor-focus])){border-color:var(--showcase-pointer-cursor-color,var(--mpc-accent))}.mpc-comment input{min-width:0;color:inherit;font:inherit;background:0 0;border:0;outline:0;flex:1;padding:0 4px 0 14px;font-size:12.5px}.mpc-comment input::placeholder{color:var(--mpc-muted)}.mpc-send{background:var(--mpc-ink);width:28px;height:28px;color:var(--mpc-ground);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;margin:3px;transition:transform .16s cubic-bezier(.2,.8,.2,1);display:grid}.mpc-send:hover,.mpc-send[data-cursor-hover]{transform:scale(1.06)}.mpc-send:active,.mpc-send[data-cursor-press]{transform:scale(.92)}.mpc-send svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.mpc-comment-row{background:var(--mpc-sunken);border-radius:12px;padding:8px 12px;font-size:12.5px;animation:.42s cubic-bezier(.2,.8,.2,1) mpc-comment-in}.mpc-comment-row b{color:var(--showcase-pointer-cursor-color);font-weight:500}@keyframes mpc-comment-in{0%{opacity:0;transform:translateY(6px)}}@media (width<=720px){.mpc-select{grid-template-columns:1fr}.mpc-scatter{flex-direction:column;justify-content:center;align-items:center;gap:28px;display:flex}.mpc-spot.is-button,.mpc-spot.is-switch,.mpc-spot.is-comments{width:min(100%,300px);position:static}.mpc-demo{padding:16px 16px 56px}}@media (prefers-reduced-motion:reduce){.mpc-button,.mpc-switch,.mpc-switch span,.mpc-like,.mpc-like svg,.mpc-send,.mpc-comment-row,.mpc-tile{transition:none;animation:none}}