.bento{--bento-pad:var(--space-32);gap:var(--space-8);grid-template-columns:minmax(0,1fr);display:grid}.bento__tile{gap:var(--space-16);padding:var(--bento-pad);border:var(--stroke-hairline) solid var(--line-subtle);flex-direction:column;display:flex;position:relative;overflow:hidden}.bento__tile--panel{background:var(--bg-panel)}.bento__tile--raised{background:var(--bg-raised)}.bento__tile--none{background:0 0}.bento__text{gap:var(--space-12);flex-direction:column;max-width:640px;display:flex}.bento__vector{line-height:0}.bento__vector svg,.bento__vector img{width:100%;height:auto}.bento__image{width:100%;line-height:0}.bento__image--top{order:-1}.bento__image--bottom{margin-top:auto}.bento__image--center{margin-block:auto}.bento__image--bleed{width:calc(100% + 2 * var(--bento-pad));margin-inline:calc(-1 * var(--bento-pad))}.bento__image--bleed.bento__image--bottom{margin-bottom:calc(-1 * var(--bento-pad))}.bento__image--bleed.bento__image--top{margin-top:calc(-1 * var(--bento-pad))}.bento__button{align-items:center;gap:var(--space-8);padding:var(--space-12) var(--space-16);border:var(--stroke-hairline) solid var(--accent-trace);transition:background .15s,color .15s;display:inline-flex}.bento__button--primary{background:var(--accent-trace);color:var(--bg-base)}.bento__button--primary:hover{background:var(--text-primary);border-color:var(--text-primary)}.bento__button--secondary{color:var(--accent-trace)}.bento__button--secondary:hover{background:var(--accent-trace);color:var(--bg-base)}@media (min-width:768px){.bento{grid-template-columns:repeat(min(var(--bento-cols), 2), minmax(0, 1fr));grid-auto-rows:minmax(var(--bento-row), auto)}.bento__tile{grid-column:span min(var(--span-c), 2);grid-row:span var(--span-r)}}@media (min-width:1024px){.bento{grid-template-columns:repeat(var(--bento-cols), minmax(0, 1fr))}.bento__tile{grid-column:span var(--span-c)}}
.live-demo{flex-direction:column;gap:0;margin:0;display:flex}.live-demo__screen{aspect-ratio:16/9;background:var(--bg-base);border:var(--stroke-hairline) solid var(--line-strong);position:relative;overflow:hidden}.live-demo__frame{background:#000;border:0;width:100%;height:100%;position:absolute;inset:0}.live-demo__start{cursor:pointer;place-items:center;display:grid;position:absolute;inset:0}.live-demo__start:after{content:"";background:color-mix(in srgb, var(--bg-base) 35%, transparent);transition:background .4s;position:absolute;inset:0}.live-demo__start:hover:after{background:color-mix(in srgb, var(--bg-base) 15%, transparent)}.live-demo__cta{z-index:1;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-24) var(--space-12) var(--space-12);color:var(--text-primary);background:color-mix(in srgb, var(--bg-base) 80%, transparent);border:var(--stroke-hairline) solid var(--line-strong);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1);display:inline-flex;position:relative}.live-demo__start:hover .live-demo__cta{border-color:var(--accent-trace);transform:scale(1.03)}.live-demo__start:focus-visible .live-demo__cta{outline:var(--stroke-hairline) solid var(--accent-trace);outline-offset:3px}.live-demo__play{width:32px;height:32px;color:var(--bg-base);background:var(--accent-trace);border-radius:var(--radius-full);place-items:center;display:grid}.live-demo__bar{align-items:center;gap:var(--space-8) var(--space-24);padding:var(--space-12) var(--space-16);border:var(--stroke-hairline) solid var(--line-subtle);background:var(--bg-panel);border-top:0;flex-wrap:wrap;display:flex}.live-demo__bar>:last-child{margin-left:auto}.live-demo__status{align-items:center;gap:var(--space-8);color:var(--text-primary);display:inline-flex}.live-demo__dot{border-radius:var(--radius-full);background:var(--text-muted);width:6px;height:6px}.live-demo__dot--on{background:var(--status-online);box-shadow:0 0 8px var(--status-online)}@media (prefers-reduced-motion:reduce){.live-demo__start:after,.live-demo__cta{transition:none}.live-demo__start:hover .live-demo__cta{transform:none}}