@font-face{font-family:Geist;src:url(/demo-kit/fonts/Geist-Variable.28258d06.woff2) format("woff2");font-weight:100 900;font-display:swap}:root{--stage-bg: #17151b;--stage-ink: #f4f1f7;--stage-ink-2: #aaa5b0;--post-bg: #0f0e13;--paper: #fbfaf7;--paper-ink: #1b1820;--paper-ink-2: #6f6a76;--glass: rgba(28, 25, 33, .58);--glass-hover: rgba(40, 36, 46, .66);--panel: rgba(23, 21, 27, .8);--quiet: rgba(255, 255, 255, .12);--rule: rgba(255, 255, 255, .08);--r-bubble: 20px;--r-post: 28px;--post-pad: 8px;--soft-shadow: 0 12px 32px rgba(10, 6, 12, .32), 0 2px 6px rgba(10, 6, 12, .18);--post-shadow: 0 24px 64px rgba(6, 3, 8, .5), 0 2px 8px rgba(6, 3, 8, .3), inset 0 0 0 1px rgba(255, 255, 255, .06);--demo-sans: Geist, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--label-strip: 48px;--controls-strip: 64px;--approve-h: 50px;--approve-bar-h: calc(var(--s-2) + var(--approve-h))}@property --inset-top{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --inset-right{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --inset-bottom{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --inset-left{syntax: "<length>"; inherits: false; initial-value: 0px;}html[data-kit],html[data-kit] body{background:var(--stage-bg)}html[data-kit] body{margin:0;color:var(--stage-ink);font-family:var(--demo-sans);-webkit-tap-highlight-color:transparent}.demo{--focus: #bca3e9;--inset-top: env(safe-area-inset-top, 0px);--inset-right: env(safe-area-inset-right, 0px);--inset-bottom: env(safe-area-inset-bottom, 0px);--inset-left: env(safe-area-inset-left, 0px);--h1-reading: clamp(28px, 6vw, 40px);--h1-opening: clamp(32px, 5.4vw, 64px);display:grid;gap:var(--s-5);max-width:560px;margin:0 auto;padding:calc(var(--s-6) + var(--safe-t)) max(var(--s-4),var(--safe-r)) calc(var(--s-7) + var(--safe-b)) max(var(--s-4),var(--safe-l))}.demo [hidden]{display:none!important}.demo :focus{outline:none}.demo :focus-visible{outline:3px solid var(--focus);outline-offset:4px}.demo .demo-cta h2:focus{outline:none}.demo-title{margin:0;font-size:var(--h1-reading);line-height:1.1;font-weight:600;letter-spacing:0;text-wrap:balance}.demo-scene,.demo-results,.demo-controls{display:none}.demo:not(.is-live):not(.is-static)>:not(.demo-title,.demo-loader){animation:demo-reveal .4s var(--ease-out) 3s both!important}.demo:not(.is-live):not(.is-static) video[data-poster]{display:none}.demo:not(.is-live):not(.is-static) .demo-approve-bar{display:none}@keyframes demo-reveal{0%{opacity:0}to{opacity:1}}.demo-lines{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}.demo-line{position:relative;padding:12px 18px 14px;border-radius:var(--r-bubble);background:var(--paper);color:var(--paper-ink);box-shadow:var(--soft-shadow)}.demo-who{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;line-height:16px;color:var(--paper-ink-2)}.demo-who i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--who, var(--paper-ink-2));box-shadow:0 0 0 1px #1b182038}.demo-who b{font-weight:600;color:var(--paper-ink)}.demo-say{display:block;font-size:17px;line-height:24px;text-wrap:pretty}.demo-post{padding:var(--post-pad);border-radius:var(--r-post);background:var(--post-bg);color:var(--stage-ink);box-shadow:var(--post-shadow)}.demo-post-media{position:relative;border-radius:calc(var(--r-post) - var(--post-pad));overflow:hidden;background:#000}.demo-post-media video{display:block;width:100%;height:auto;max-height:70svh;aspect-ratio:9 / 16;object-fit:contain}.demo:not(.is-live):not(.is-static) .demo-post-media{aspect-ratio:9 / 16;max-width:39.375svh;margin-inline:auto}.demo-hook{position:absolute;z-index:1;box-sizing:border-box;left:11.111%;top:20.9635%;width:77.778%;translate:0 -50%;margin:0;padding:.35em .6em;border-radius:10px;background:#fff;color:var(--paper-ink);font-size:15px;line-height:1.2;font-weight:800;text-align:center;text-wrap:balance;pointer-events:none}.demo-hook-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}.demo:not(.is-live):not(.is-static) .demo-post-media{container-type:inline-size}.demo:not(.is-live):not(.is-static) .demo-hook{top:15.625%;min-height:10.677%;translate:none;display:grid;align-content:center;font-size:max(11px,min(4.4cqi,22px))}.demo:not(.is-live):not(.is-static) .demo-hook-text{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}.demo-post-body{display:grid;gap:2px;padding:var(--s-3) var(--s-2) 0}.demo-post-more,.demo-post-rest{display:contents}.demo-post-body p{margin:0}.demo-caption{font-size:15px;line-height:20px}.demo-credit{font-size:13px;line-height:18px;color:var(--stage-ink-2)}.demo-post-body .demo-rules{display:flex;align-items:flex-start;gap:6px;margin-top:var(--s-2);font-size:13px;line-height:16px;color:var(--stage-ink-2)}.demo .demo-rules svg{flex:none;width:16px;height:16px}.demo-rules circle{fill:#3fca7c2e}.demo-rules path{fill:none;stroke:#49d184;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.demo-original{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3);margin:var(--s-3) 0}.demo-original-clip{display:grid;gap:var(--s-1);justify-items:center;margin:0}.demo-original-clip video{display:block;width:96px;height:auto;aspect-ratio:9 / 16;object-fit:cover;border-radius:10px;background:#000}.demo-original-clip figcaption{font-size:11px;line-height:14px;color:var(--stage-ink-2)}.demo.is-live .demo-original-clip{--orig-w: 64px;position:relative}.demo.is-live .demo-original-clip video{width:var(--orig-w);aspect-ratio:3 / 4;object-position:50% 24%}.demo.is-live .demo-original-clip:has(>video:not([controls])):before,.demo.is-live .demo-original-clip:has(>video:not([controls])):after{content:"";position:absolute;top:calc(var(--orig-w) * 2 / 3);left:50%;pointer-events:none}.demo.is-live .demo-original-clip:has(>video:not([controls])):before{width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#0f0e1399;box-shadow:inset 0 0 0 1px #ffffff3d}.demo.is-live .demo-original-clip:has(>video:not([controls])):after{margin:-6px 0 0 -3px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff}.demo-evidence{font-size:13px;line-height:18px;color:var(--stage-ink-2)}.demo-approve-bar{padding:var(--s-2);background:var(--post-bg)}.demo-approve{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--approve-h);padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--stage-ink);color:var(--paper-ink);font:600 17px/1 var(--demo-sans);cursor:pointer}.demo-approve-label{opacity:calc(1 - var(--check, 0))}.demo .demo-approve-mark{position:absolute;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:calc(24px * (1 - var(--check, 0)));opacity:min(1,calc(var(--check, 0) * 4))}.demo .demo-approve:focus-visible{outline:2px solid var(--stage-ink);outline-offset:3px;box-shadow:0 0 0 6px #f4f1f724,0 0 22px #f4f1f752}.demo.is-approved .demo-approve:disabled{opacity:1}.demo.is-live .demo-post{position:relative}.demo.is-live .demo-post:after{content:"";position:absolute;z-index:1;left:var(--more-x, 50%);bottom:calc(var(--post-pad) + var(--approve-bar-h) + 6px);width:9px;height:9px;margin-left:-4.5px;border:solid var(--stage-ink-2);border-width:0 2px 2px 0;rotate:45deg;opacity:0;transition:opacity .16s var(--ease-out);pointer-events:none}.demo.is-live .demo-post.has-more:after{opacity:1}.demo-cta{text-align:center}.demo-cta-panel{width:min(520px,100%);margin:0 auto}.demo-cta h2{margin:0 0 var(--s-5);font-size:clamp(28px,4.2vw,40px);line-height:1.15;font-weight:600;letter-spacing:0;text-wrap:balance}.demo-cta-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1) var(--s-2);margin:0}.demo-cta-actions a,.demo-cta-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s-5);border-radius:var(--r-pill);font:400 17px/1 var(--demo-sans)}.demo .demo-cta-primary{grid-column:1 / -1;justify-self:center;background:var(--stage-ink);color:var(--paper-ink);font-weight:600}.demo .demo-cta-secondary,.demo .demo-cta-again{min-height:44px;margin:0;padding:0 var(--s-2);border:0;border-radius:8px;background:none;color:var(--stage-ink);font:400 17px/22px var(--demo-sans);text-align:center;text-wrap:balance;cursor:pointer;transition:background-color .16s var(--ease-out)}@media(hover:hover)and (pointer:fine){.demo :is(.demo-cta-secondary,.demo-cta-again):hover{background:#ffffff14}}.demo.is-live .demo-cta-panel{padding:var(--s-6) var(--s-5) var(--s-5);border-radius:var(--r-post);background:var(--panel);box-shadow:var(--soft-shadow);-webkit-backdrop-filter:saturate(140%) blur(20px);backdrop-filter:saturate(140%) blur(20px)}.demo-picker{box-sizing:border-box;padding:var(--s-3);border-radius:var(--r-post);background:var(--panel);color:var(--stage-ink);box-shadow:var(--soft-shadow);-webkit-backdrop-filter:saturate(140%) blur(20px);backdrop-filter:saturate(140%) blur(20px)}.demo-picker-title{margin:var(--s-1) var(--s-2) var(--s-3);font-size:15px;line-height:20px;font-weight:600}.demo-picker-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}.demo-pick{position:relative;display:grid;align-content:start;gap:6px;min-width:0;min-height:44px;margin:0;padding:6px;border:0;border-radius:calc(var(--r-post) - var(--s-3));background:#ffffff0f;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .16s var(--ease-out),scale .16s var(--ease-out)}@media(hover:hover)and (pointer:fine){.demo-pick:not([aria-disabled=true]):hover{background:#ffffff1c}}.demo-pick:not([aria-disabled=true]):active{scale:.98}.demo-pick[aria-disabled=true]{cursor:default}.demo-pick-tile{display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:calc(var(--r-post) - var(--s-3) - 6px);background:#000}.demo-pick-name{display:block;padding:0 var(--s-1) 2px;font-size:13px;line-height:16px;font-weight:600;overflow-wrap:anywhere}.demo-pick:has(.demo-pick-hook){gap:var(--s-1);padding:10px var(--s-3) var(--s-3)}.demo-pick:has(.demo-pick-hook) .demo-pick-name{padding:0;font-size:15px;line-height:20px}.demo-pick-hook{display:block;font-size:13px;line-height:18px;color:var(--stage-ink-2);text-wrap:pretty;overflow-wrap:anywhere}.demo-pick.is-picked{background:#ffffff24}.demo-picker.is-picked .demo-pick:not(.is-picked){opacity:calc(1 - .5 * var(--check, 0))}.demo-pick-check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--stage-ink);opacity:0;pointer-events:none}.demo-pick-check:after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid var(--paper-ink);border-width:0 2px 2px 0;rotate:45deg}.demo-pick.is-picked .demo-pick-check{opacity:var(--check, 0);scale:calc(.9 + .1 * var(--check, 0))}.demo.is-live:not(.is-static) .demo-picker{position:absolute;left:0;top:0;z-index:5;width:min(456px,calc(100vw - 32px - var(--safe-l) - var(--safe-r)));translate:var(--x, 0px) var(--y, 0px);opacity:calc(var(--pick-in, 1) * (1 - var(--pick-out, 0)));transform:translateY(calc((1 - var(--pick-in, 1)) * 12px + var(--pick-out, 0) * 8px)) scale(calc(.98 + .02 * var(--pick-in, 1)))}.demo.is-live.shape-short:not(.is-static) .demo-picker{width:clamp(300px,44vw,380px)}.demo.is-live.shape-short:not(.is-static) .demo-picker[data-choice=style]{width:min(600px,calc(100vw - 32px - var(--safe-l) - var(--safe-r)))}.demo.is-live.shape-short:not(.is-static) .demo-picker[data-choice=style] .demo-picker-title{margin-bottom:var(--s-2)}.demo.is-live.shape-short:not(.is-static) .demo-picker[data-choice=style] .demo-pick{padding:var(--s-2) var(--s-3) 10px}@media(prefers-reduced-motion:reduce){.demo.is-live:not(.is-static) .demo-picker{transform:none}}@media(max-width:359.98px){.demo.is-live .demo-pick-hook,.demo.is-static .demo-pick-hook{font-size:12px;line-height:16px}.demo.is-live .demo-pick:has(.demo-pick-hook){padding:var(--s-2) 10px 10px}}@media(max-width:479.98px){.demo.is-live.shape-tall:not(.is-static) .demo-picker[data-choice=style] .demo-picker-options{grid-template-columns:minmax(0,1fr)}.demo.is-live.shape-tall:not(.is-static) .demo-picker[data-choice=style] .demo-pick{grid-template-columns:56px minmax(0,1fr);align-items:center;gap:0 var(--s-3);min-height:52px;padding:10px 44px 10px var(--s-3)}.demo.is-live.shape-tall:not(.is-static) .demo-picker[data-choice=style] .demo-pick-hook{text-wrap:balance}.demo.is-live.shape-tall:not(.is-static) .demo-picker[data-choice=style] .demo-pick-check{top:calc(50% - 11px);right:var(--s-3)}}@media(max-width:359.98px){.demo.is-live.shape-tall:not(.is-static) .demo-picker[data-choice=style] .demo-pick{grid-template-columns:48px minmax(0,1fr);gap:0 var(--s-2);padding-right:40px}.demo.is-live.shape-tall:not(.is-static) .demo-picker[data-choice=style] .demo-pick-check{right:10px}}.demo-control{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--s-4);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);background:var(--glass);color:var(--stage-ink);font:400 15px/1 var(--demo-sans);cursor:pointer;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.demo-control:after{content:"";position:absolute;inset:-4px}.demo .demo-control svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}@media(hover:hover){.demo-control:hover:not(:disabled){background:var(--glass-hover)}}.demo.is-live{position:fixed;inset:0;display:block;max-width:none;height:100svh;margin:0;padding:0;overflow:hidden}.demo.is-live .demo-scene{display:block;position:absolute;inset:0}.demo-stage{position:absolute;inset:0}.demo-stage canvas{display:block;width:100%;height:100%}.demo-dip{position:absolute;inset:0;background:var(--stage-bg);opacity:var(--dip, 0);pointer-events:none}.demo-loader{position:fixed;z-index:1;left:50%;top:55%;width:56px;height:80px;translate:-50% -50%;pointer-events:none}@media(max-height:540px){.demo-loader{top:calc((var(--s-6) + var(--safe-t) + 2.2 * var(--h1-reading) + 100svh - var(--controls-strip) - var(--safe-b) - var(--s-2) - 2.16 * var(--h1-opening)) / 2);scale:.7}}.demo.is-live:not(.is-loading)>.demo-loader{display:none}.demo.is-static>.demo-loader{display:none}.demo:not(.is-live):not(.is-static)>.demo-loader{animation:demo-loader-out .4s var(--ease-out) 3s both!important}@keyframes demo-loader-out{0%{opacity:1}to{opacity:0;visibility:hidden}}.demo-loader-shadow{position:absolute;left:9px;bottom:1px;width:38px;height:6px;border-radius:50%;background:radial-gradient(closest-side,#000000bf,#0000);animation:demo-loader-shadow .7s infinite}.demo-loader-cube{position:absolute;left:6px;bottom:7px;width:44px;height:42px;border-radius:11px;background:radial-gradient(4.5px 2.5px at 7px 26px,#ff7d94d9,#ff7d9400),radial-gradient(4.5px 2.5px at 37px 26px,#ff7d94d9,#ff7d9400),linear-gradient(140deg,#f4bb9f,#e9773f 42%,#b65d31);transform-origin:50% 100%;animation:demo-loader-hop .7s infinite}.demo-loader-cube:after{content:"";position:absolute;left:5px;top:2px;width:11px;height:6px;border:solid rgba(255,255,255,.7);border-width:2px 0 0 2px;border-top-left-radius:9px 6px}.demo-loader-crown,.demo-loader-crown:before,.demo-loader-crown:after{position:absolute;left:50%;height:4px;border-radius:2px;background:linear-gradient(#f4bb9f,#ec8c5a);translate:-50% 0}.demo-loader-crown{top:-3px;width:25px}.demo-loader-crown:before,.demo-loader-crown:after{content:""}.demo-loader-crown:before{top:-2.5px;width:16px}.demo-loader-crown:after{top:-5px;width:9px}.demo-loader-eye{position:absolute;top:14px;left:12px;width:5px;height:12px;border-radius:1.5px;background:#0b0b12}.demo-loader-eye:last-child{left:27px}@keyframes demo-loader-hop{0%{transform:translateY(0) scale(1.12,.88);animation-timing-function:var(--ease-out)}14%{transform:translateY(0) scale(1);animation-timing-function:var(--ease-out)}22%{transform:translateY(-3px) scale(.94,1.08);animation-timing-function:cubic-bezier(.5,1,.89,1)}54%{transform:translateY(-18px) scale(1);animation-timing-function:cubic-bezier(.11,0,.5,0)}84%{transform:translateY(0) scale(.96,1.05);animation-timing-function:var(--ease-out)}to{transform:translateY(0) scale(1.12,.88)}}@keyframes demo-loader-shadow{0%{transform:scaleX(1.1);opacity:1;animation-timing-function:var(--ease-out)}14%{transform:scale(1);opacity:1;animation-timing-function:var(--ease-out)}22%{transform:scale(.94);opacity:.92;animation-timing-function:cubic-bezier(.5,1,.89,1)}54%{transform:scale(.62);opacity:.5;animation-timing-function:cubic-bezier(.11,0,.5,0)}84%{transform:scaleX(.98);opacity:1;animation-timing-function:var(--ease-out)}to{transform:scaleX(1.1);opacity:1}}@media(prefers-reduced-motion:reduce){.demo-loader-cube,.demo-loader-shadow{animation:none}}.demo.is-live:not(.is-static) .demo-title{position:absolute;z-index:3;left:50%;bottom:calc(var(--controls-strip) + var(--safe-b) + var(--s-2));width:min(16ch,calc(100vw - 32px));translate:-50% 0;font-size:var(--h1-opening);line-height:1.08;letter-spacing:-.009em;text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.35);pointer-events:none}.demo.is-live.shape-short:not(.is-static):not(.is-opened) .demo-title{width:calc(100vw - 32px);font-size:clamp(24px,4.4vw,40px)}.demo.is-live.is-opened .demo-title,.demo.is-static .demo-title{position:absolute;z-index:3;left:max(var(--s-4),var(--safe-l));top:calc(var(--safe-t) + 14px);bottom:auto;width:auto;max-width:calc(100vw - 32px);translate:none;overflow:hidden;font-size:15px;line-height:20px;letter-spacing:0;text-align:left;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 12px rgba(0,0,0,.45)}.demo.is-live.is-opened:not(.is-static) .demo-title{filter:opacity(var(--label-fade, 1));animation:demo-settle .36s var(--ease-out) both}@keyframes demo-settle{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:none}}.demo.is-live:not(.is-static) .demo-lines{position:absolute;inset:0;z-index:2;pointer-events:none}.demo.is-live:not(.is-static) .demo-line{position:absolute;left:0;top:0;width:max-content;overflow:hidden;translate:var(--x, 0px) var(--y, 0px);transform-origin:var(--tail-x, 50%) 100%}.demo.is-live:not(.is-static) .demo-line[aria-current=true]{animation:demo-bubble-in .3s var(--ease-out) both}@keyframes demo-bubble-in{0%{opacity:0;scale:.92}to{opacity:1;scale:1}}.demo.is-live.shape-wide .demo-line{max-width:360px;max-height:132px}.demo.is-live.shape-tall .demo-line{max-width:calc(100vw - 32px);max-height:140px}.demo.is-live.shape-short .demo-line{max-width:300px;max-height:120px}.demo.is-live.shape-tall .demo-line{padding:12px 16px 13px}.demo.is-live.shape-tall .demo-say{font-size:16px;line-height:22px}.demo.is-live.shape-short .demo-line{padding:10px 14px 12px}.demo.is-live.shape-short .demo-say{font-size:15px;line-height:20px}.demo.is-live:not(.is-static) .demo-line:is(.tail-down,.tail-left,.tail-right){overflow:visible}.demo.is-live:not(.is-static) .demo-line:after{content:"";position:absolute;display:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:3px;background:var(--paper);rotate:45deg}.demo.is-live .demo-line.tail-down:after{display:block;left:var(--tail-x, 50%);top:100%}.demo.is-live .demo-line.tail-left:after{display:block;left:0;top:var(--tail-y, 50%)}.demo.is-live .demo-line.tail-right:after{display:block;left:100%;top:var(--tail-y, 50%)}.demo.is-live .demo-line.tail-left{transform-origin:0 var(--tail-y, 50%)}.demo.is-live .demo-line.tail-right{transform-origin:100% var(--tail-y, 50%)}.demo.is-live:not(.is-static) .demo-post{position:absolute;left:0;top:0;z-index:4;width:clamp(260px,calc((100svh - 200px)*.52),320px);max-height:calc(100svh - var(--label-strip) - var(--controls-strip) - var(--safe-t) - var(--safe-b));display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(var(--post-pad) + var(--approve-bar-h));visibility:hidden;opacity:var(--fade, 1);transform:translate3d(calc(var(--post-x, 0px) + var(--dx, 0px)),calc(var(--post-y, 0px) + var(--dy, 0px)),0) perspective(900px) rotateX(var(--tilt, 0deg)) scale(var(--scale, 1));transform-origin:50% 100%;pointer-events:none}.demo.is-live:not(.is-static) .demo-post.is-up{visibility:visible}.demo.is-live:not(.is-static) .demo-post.is-waiting{pointer-events:auto}.demo.is-live:not(.is-static) .demo-post-media{flex:none}.demo.is-live:not(.is-static) .demo-post-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start}.demo.is-live:not(.is-static) .demo-post-body{padding-bottom:20px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent)}.demo.is-live:not(.is-static) .demo-approve-bar{position:absolute;left:var(--post-pad);right:var(--post-pad);bottom:var(--post-pad);padding:calc(var(--approve-bar-h) - var(--approve-h)) 0 0}.demo.is-live:not(.is-static) .demo-post-media video{aspect-ratio:3 / 4;max-height:40svh}.demo.is-live .demo-post-media,.demo.is-static .demo-post-media{container-type:inline-size}.demo.is-live .demo-post-media video,.demo.is-static .demo-post-media video{object-fit:cover;object-position:50% 55.2%;object-position:50% -24.537cqi}.demo.is-live .demo-original-clip video{border-radius:8px}.demo.is-live .demo-hook,.demo.is-static .demo-hook{left:var(--plate-x, 11.111cqi);top:calc(var(--plate-y, 3.241cqi) + var(--plate-h, 18.981cqi) / 2);width:var(--plate-w, 77.778cqi);font-size:max(12px,min(4.4cqi,22px))}@container (max-width: 199.98px){.demo.is-live .demo-hook,.demo.is-static .demo-hook{left:0;top:0;width:100%;translate:none;border-radius:0;padding-inline:6px;font-size:12px}}.demo.is-live.shape-wide:not(.is-static) .demo-post-media{position:relative;flex:0 1000 auto;aspect-ratio:3 / 4;max-height:40svh;min-height:150px}.demo.is-live.shape-wide:not(.is-static) .demo-post-media video{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}.demo.is-live.shape-wide:not(.is-static) .demo-post-body{flex:0 1 auto}.demo.is-live.shape-tall .demo-post{width:calc(100vw - 24px - var(--safe-l) - var(--safe-r));height:calc(50svh - var(--controls-strip) - var(--safe-b));max-height:none}.demo.is-live.shape-tall:not(.is-static) .demo-post-media{position:relative;flex:1 1 0;min-height:150px;max-height:calc((100vw - 24px - 2 * var(--post-pad) - var(--safe-l) - var(--safe-r)) * .75)}.demo.is-live.shape-tall:not(.is-static) .demo-post-media video{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}.demo.is-live.shape-tall:not(.is-static) .demo-post-body{position:relative;flex:0 1 auto;padding-top:var(--s-2)}.demo.is-live.shape-tall:not(.is-static) .demo-post-rest{display:grid;gap:2px;position:absolute;top:100%;left:var(--s-2);right:var(--s-2);padding:2px 0 20px}.demo.is-live.shape-tall:not(.is-static) .demo-original-clip{--orig-w: 48px}.demo.is-live.shape-tall:not(.is-static) .demo-post-body{min-height:calc(64px + 20px + var(--s-1))}@media(max-height:730px){.demo.is-live.shape-tall:not(.is-static) .demo-post{--card-inner: calc(50svh - var(--controls-strip) - var(--safe-b) - 2 * var(--post-pad) - var(--approve-bar-h));--clip-w: max(calc(var(--card-inner) * .75), 136px);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:var(--s-3)}.demo.is-live.shape-tall:not(.is-static) .demo-post{--more-x: calc((var(--clip-w) + var(--s-3) + 100%) / 2)}.demo.is-live.shape-tall:not(.is-static) .demo-post-media{width:var(--clip-w);max-height:none;min-height:0}.demo.is-live.shape-tall:not(.is-static) .demo-post-body{min-height:0;padding:var(--s-1) var(--s-2) 20px 0}.demo.is-live.shape-tall:not(.is-static) .demo-post-rest{display:contents}.demo.is-live.shape-tall:not(.is-static) .demo-original-clip{--orig-w: 64px}}@media(max-height:600px){.demo.is-live.shape-tall:not(.is-static) .demo-post{--approve-h: 48px;--approve-bar-h: calc(var(--s-1) + var(--approve-h));column-gap:10px;--more-x: calc((var(--clip-w) + 10px + 100%) / 2)}.demo.is-live.shape-tall:not(.is-static) .demo-post-body{padding-right:var(--s-1)}.demo.is-live.shape-tall:not(.is-static) .demo-caption{font-size:14px;line-height:18px}}.demo.is-live.shape-short:not(.is-static) .demo-post{--card-h: calc(100svh - var(--label-strip) - var(--controls-strip) - var(--safe-t) - var(--safe-b));--card-inner: calc(var(--card-h) - 2 * var(--post-pad) - var(--approve-bar-h));--more-x: calc((var(--card-inner) * .75 + var(--s-3) + 100%) / 2);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:var(--s-3);width:max(260px,min(calc(var(--card-inner) * .75 + 248px),45vw));height:var(--card-h)}.demo.is-live.shape-short:not(.is-static) .demo-post-media{width:calc(var(--card-inner) * .75);height:100%}.demo.is-live.shape-short:not(.is-static) .demo-post-media video{width:100%;height:100%;max-height:none;aspect-ratio:auto}.demo.is-live.shape-short:not(.is-static) .demo-post-body{padding-top:var(--s-1)}.demo.is-live .demo-results{display:block;position:absolute;left:0;top:0;z-index:3;width:min(320px,calc(100vw - 32px));height:auto;aspect-ratio:2 / 1;border-radius:var(--r-bubble);visibility:hidden;translate:var(--x, 0px) var(--y, 0px);opacity:var(--fade, 1);filter:drop-shadow(0 12px 24px rgba(10,6,12,.32)) drop-shadow(0 2px 6px rgba(10,6,12,.18));pointer-events:none}.demo.is-live .demo-results.is-shown{visibility:visible}@media(max-height:400px){.demo.is-live.shape-short .demo-results{width:280px}}.demo.is-live .demo-controls{display:flex;position:absolute;z-index:7;right:max(var(--s-4),var(--safe-r));bottom:max(var(--s-4),var(--safe-b));gap:var(--s-2)}.demo.is-live.shape-tall .demo-controls{right:auto;left:50%;translate:-50% 0}.demo.is-live:not(.is-static) .demo-cta{position:absolute;inset:0;z-index:6;pointer-events:none;animation:demo-end .7s var(--ease-out) both}.demo.is-live:not(.is-static) .demo-cta-panel{position:absolute;left:0;top:0;width:min(520px,calc(100vw - 32px));margin:0;translate:var(--x, 0px) var(--y, 0px);pointer-events:auto}@keyframes demo-end{0%{opacity:0}to{opacity:1}}.demo.is-live.shape-short:not(.is-static) .demo-cta-panel{width:clamp(280px,40vw,360px);padding:var(--s-5) var(--s-5) var(--s-2)}.demo.is-live.shape-tall:not(.is-static) .demo-cta-panel{width:calc(100vw - 32px - var(--safe-l) - var(--safe-r));padding:var(--s-5) var(--s-5) var(--s-2)}.demo.is-live:is(.shape-short,.shape-tall):not(.is-static) .demo-cta h2{margin-bottom:var(--s-4);font-size:24px;line-height:1.15}.demo.is-live:is(.shape-short,.shape-tall):not(.is-static) .demo-cta-primary{justify-self:stretch;min-height:44px;padding:0 var(--s-4)}@media(max-height:700px){.demo.is-live.shape-tall:not(.is-static) .demo-cta-panel{padding:var(--s-4) var(--s-4) var(--s-2)}.demo.is-live.shape-tall:not(.is-static) .demo-cta h2{margin-bottom:var(--s-3);font-size:20px;line-height:1.2}}.demo.is-live:not(.is-static) .demo-cta-panel{container-type:inline-size}.demo.is-live.shape-wide:not(.is-static) .demo-cta-actions{grid-template-columns:repeat(2,auto);justify-content:center}@container (max-width: 340px){.demo.is-live:not(.is-static) :is(.demo-cta-secondary,.demo-cta-again){padding:0 var(--s-1);font-size:15px;line-height:18px}}@container (max-width: 249px){.demo.is-live:not(.is-static) .demo-cta-actions{grid-template-columns:minmax(0,1fr)}}.demo:not(.is-live):not(.is-static) .demo-cta-panel{container-type:inline-size}@container (max-width: 340px){.demo:not(.is-live):not(.is-static) :is(.demo-cta-secondary,.demo-cta-again){padding:0 var(--s-1);font-size:15px;line-height:18px}}@container (max-width: 249px){.demo:not(.is-live):not(.is-static) .demo-cta-actions{grid-template-columns:minmax(0,1fr)}}.demo.is-static{--zone-t: calc(var(--safe-t) + var(--label-strip));--zone-b: calc(var(--safe-b) + var(--controls-strip));--text-w: clamp(280px, 40vw, 560px);--zone-w: calc(100vw - var(--text-w) - max(var(--s-4), var(--safe-r)));--zone-h: calc(100svh - var(--zone-t) - var(--zone-b));--still-w: min(var(--zone-w), var(--zone-h) * 16 / 9);position:fixed;inset:var(--zone-t) auto 0 0;width:var(--text-w);display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s-4);height:auto;overflow-y:auto;scroll-padding-block:var(--s-2);padding:var(--s-2) var(--s-4) calc(var(--safe-b) + var(--s-4)) max(var(--s-4),var(--safe-l));isolation:isolate}.demo.is-static:before,.demo.is-static:after{content:"";flex:1 0 0}.demo.is-static:before{margin-bottom:calc(-1 * var(--s-4))}.demo.is-static:after{margin-top:calc(-1 * var(--s-4))}.demo.is-static .demo-scene{position:fixed;z-index:-1;inset:auto;left:calc(var(--text-w) + (var(--zone-w) - var(--still-w)) / 2);top:calc(var(--zone-t) + (var(--zone-h) - var(--still-w) * 9 / 16) / 2);width:var(--still-w);height:calc(var(--still-w) * 9 / 16);border-radius:var(--r-bubble);background:var(--stage-bg) center / cover no-repeat}.demo.is-static .demo-scene.still-feed{background-image:url("/demo/cube/still-feed.2f4e7d27.jpg")}.demo.is-static .demo-scene.still-edit{background-image:url("/demo/cube/still-edit.29682cb0.jpg")}.demo.is-static .demo-scene.still-set{background-image:url("/demo/cube/still-set.1349ce3b.jpg")}.demo.is-static .demo-scene.still-posted{background-image:url("/demo/cube/still-posted.efad03fe.jpg")}.demo[data-track=text].is-static .demo-scene.still-textfeed{background-image:url("/demo/cube/still-textfeed.890b39bf.jpg")}.demo[data-track=text].is-static .demo-scene.still-textdesk{background-image:url("/demo/cube/still-textdesk.7b3b68aa.jpg")}.demo[data-track=text].is-static .demo-scene.still-textset{background-image:url("/demo/cube/still-textset.9a7d09a4.jpg")}.demo[data-track=text].is-static .demo-scene.still-textposted{background-image:url("/demo/cube/still-textposted.24ee4b8a.jpg")}.demo.is-static .demo-stage{display:none}.demo.is-static .demo-title{position:fixed}.demo.is-static .demo-lines{width:min(520px,100%);justify-items:start}.demo.is-static .demo-post{width:min(360px,100%);align-self:center}.demo.is-static .demo-picker{width:min(456px,100%)}.demo.is-static .demo-post:not(.is-up){display:none}.demo.is-static .demo-post-media video{aspect-ratio:3 / 4;max-height:44svh}.demo.is-static .demo-results{display:none;position:static;width:min(320px,100%);translate:none;visibility:visible;opacity:1;align-self:center}.demo.is-static .demo-results.is-shown{display:block}.demo.is-static .demo-controls{display:flex;position:fixed;z-index:7;right:max(var(--s-4),var(--safe-r));bottom:max(var(--s-4),var(--safe-b));gap:var(--s-2)}.demo.is-static .demo-cta{padding:var(--s-4) 0 var(--s-2)}.demo.is-static .demo-cta-panel{container-type:inline-size}@container (max-width: 400px){.demo.is-static .demo-cta h2{margin-bottom:var(--s-4);font-size:24px;line-height:1.15}.demo.is-static .demo-cta-primary{justify-self:stretch;min-height:44px;padding:0 var(--s-4)}.demo.is-static :is(.demo-cta-secondary,.demo-cta-again){padding:0 var(--s-1);font-size:15px;line-height:18px}}@media(max-aspect-ratio:4/5){.demo.is-static .demo-scene.still-feed{background-image:url("/demo/cube/still-feed-tall.3bfd5d7c.jpg")}.demo.is-static .demo-scene.still-edit{background-image:url("/demo/cube/still-edit-tall.191b6daa.jpg")}.demo.is-static .demo-scene.still-set{background-image:url("/demo/cube/still-set-tall.13205f43.jpg")}.demo.is-static .demo-scene.still-posted{background-image:url("/demo/cube/still-posted-tall.b7eab302.jpg")}.demo[data-track=text].is-static .demo-scene.still-textfeed{background-image:url("/demo/cube/still-textfeed-tall.71f498cc.jpg")}.demo[data-track=text].is-static .demo-scene.still-textdesk{background-image:url("/demo/cube/still-textdesk-tall.e290c0dc.jpg")}.demo[data-track=text].is-static .demo-scene.still-textset{background-image:url("/demo/cube/still-textset-tall.f2b4bf1e.jpg")}.demo[data-track=text].is-static .demo-scene.still-textposted{background-image:url("/demo/cube/still-textposted-tall.0453ffe1.jpg")}}@media(max-aspect-ratio:4/5){.demo.is-static{--pad-y: var(--s-2);--bar-h: calc(var(--s-2) + var(--approve-h));--clip-want: 150px;--clip-min: 150px;--still-floor: 120px;--words-min: 0px;--card-min: calc(var(--clip-want) + 2 * var(--post-pad) + var(--bar-h) + var(--words-min));--still-h: min(100vw * 700 / 720, 46svh, max(var(--still-floor), calc(100svh - var(--zone-t) - var(--zone-b) - var(--card-min) - 2 * var(--pad-y))));--card-h: calc(100svh - var(--zone-t) - var(--still-h) - var(--zone-b) - 2 * var(--pad-y));top:calc(var(--zone-t) + var(--still-h));right:0;bottom:var(--zone-b);width:auto;padding:var(--pad-y) max(var(--s-4),var(--safe-r)) var(--pad-y) max(var(--s-4),var(--safe-l))}.demo.is-static:before,.demo.is-static:after{content:none}.demo.is-static .demo-scene{left:0;top:var(--zone-t);width:100vw;height:var(--still-h);border-radius:0;background-position:50% 50%}.demo.is-static .demo-scene:is(.still-set,.still-posted){background-position:50% 42%}.demo[data-track=text].is-static .demo-scene:is(.still-textset,.still-textposted){background-position:50% 42%}.demo.is-static .demo-lines:not(:has(>li:not([hidden]))){display:none}.demo.is-static .demo-post{display:flex;flex-direction:column;max-height:var(--card-h)}.demo.is-static .demo-post-media{position:relative;flex:0 1000 auto;aspect-ratio:3 / 4;max-height:44svh;min-height:var(--clip-min)}.demo.is-static .demo-post-media video{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto}.demo.is-static .demo-post-body{position:relative;flex:0 1 auto;min-height:clamp(0px,calc(var(--card-h) - var(--clip-min) - 2 * var(--post-pad) - var(--bar-h)),calc(64px + 20px + var(--s-1)));overflow-y:auto;overscroll-behavior:contain;align-content:start;padding-top:var(--s-1)}.demo.is-static .demo-post-body{padding-bottom:20px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent)}.demo.is-static .demo-post-rest{display:grid;gap:2px;position:absolute;top:100%;left:var(--s-2);right:var(--s-2);padding:2px 0 20px}.demo.is-static .demo-original-clip{--orig-w: 48px}.demo.is-static .demo-approve-bar{flex:none;padding:var(--s-2) 0 0}}@media(max-aspect-ratio:4/5)and (max-height:699.98px){.demo.is-static{--clip-min: 120px;--still-floor: 180px;--words-min: 44px}.demo.is-static:has(.demo-post.is-up){--words-min: 132px}}.demo[data-track=text] .demo-glyphs{position:absolute;width:0;height:0;overflow:hidden}.demo[data-track=text] .demo-post-body{gap:var(--s-2);padding-inline:var(--s-1)}.demo[data-track=text] .demo-topic{padding:0 var(--s-3);font-size:13px;line-height:18px;color:var(--stage-ink-2)}.demo[data-track=text] .demo-topic-text{color:var(--stage-ink);font-weight:600}.demo-tpost{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--s-2);margin:0;padding:var(--s-3);border-radius:var(--r-bubble);background:#ffffff0f}.demo-tpost-avatar{grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:calc(var(--r-bubble) - var(--s-3));background:var(--avatar, var(--stage-ink-2));color:var(--paper-ink)}.demo .demo-tpost-avatar svg{width:20px;height:20px}.demo-post-body .demo-tpost-author{grid-column:2;grid-row:1;font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}.demo-post-body .demo-tpost-when{grid-column:2;grid-row:2;font-size:13px;line-height:16px;color:var(--stage-ink-2)}.demo-post-body .demo-tpost-app{grid-column:3;grid-row:1;font-size:13px;line-height:20px;font-weight:600;color:var(--stage-ink-2)}.demo-post-body .demo-tpost-text{grid-column:1 / -1;margin-top:var(--s-2);font-size:15px;line-height:20px;white-space:pre-line;text-wrap:pretty;overflow-wrap:anywhere}.demo[data-track=text] .demo-post-body .demo-rules{padding:0 var(--s-3)}.demo[data-track=text].is-live.shape-tall:not(.is-static) .demo-post-rest,.demo[data-track=text].is-static .demo-post-rest{position:static;display:contents}.demo[data-track=text].is-live:not(.is-static) .demo-post-body{flex:1 1 auto;min-height:0;padding-inline:var(--s-1)}.demo[data-track=text].is-live.shape-tall:not(.is-static) .demo-post,.demo[data-track=text].is-live.shape-short:not(.is-static) .demo-post{display:flex;--more-x: 50%}@media(max-height:600px){.demo[data-track=text].is-live.shape-tall:not(.is-static) .demo-tpost-text{font-size:14px;line-height:18px}}.demo[data-track=text].is-static .demo-post-body{flex:1 1 auto;min-height:0}.demo[data-track=text] .demo-post-body:focus-visible{outline:2px solid var(--stage-ink);outline-offset:-2px;border-radius:calc(var(--r-post) - var(--post-pad));box-shadow:inset 0 0 0 6px #f4f1f724;-webkit-mask-image:none;mask-image:none}.demo-pick:has(.demo-pick-glyph){gap:var(--s-2);padding:var(--s-2)}.demo .demo-pick-glyph{display:block;box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:calc(var(--r-post) - var(--s-3) - var(--s-2));background:var(--avatar, var(--stage-ink-2));color:var(--paper-ink)}.demo-pick:has(.demo-pick-glyph) .demo-pick-name{padding:0 var(--s-1) var(--s-1);font-size:15px;line-height:20px}@media(max-width:359.98px){.demo-pick:has(.demo-pick-glyph) .demo-pick-name{font-size:13px;line-height:16px}}.demo-pick-desc{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.demo[data-track=text] .demo-pick-hook{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.demo-line[data-actor="nora"]{--who:#e9773f}.demo-line[data-actor="leo"]{--who:#a5d24c}.demo-line[data-actor="remy"]{--who:#52c9a8}.demo-line[data-actor="iris"]{--who:#c784de}.demo-line[data-actor="kai"]{--who:#ddd5c4}[data-business="coffee"]{--avatar:#a5d24c}[data-business="gym"]{--avatar:#ddd5c4}[data-business="realestate"]{--avatar:#c784de}