.demo-story{position:relative;height:calc(100svh + 2200px);min-width:0;--demo-muted:#697080;--demo-purple:#6956dd}
.demo-sticky{position:sticky;top:max(12px,calc((100svh - 670px)/2));height:670px;max-height:calc(100svh - 24px);display:flex;flex-direction:column;justify-content:center;isolation:isolate}
.demo-heading{text-align:center;padding:12px 12px 0;flex:0 0 auto}
.demo-heading .demo-kicker{font:500 11px/1.4 var(--font-mono),monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--demo-purple);margin:0 0 12px}
.demo-heading h2{font-family:var(--font-display),sans-serif;font-size:clamp(26px,3.2vw,42px);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:0}
.demo-heading>p:last-child{font-size:15px;color:var(--demo-muted);margin:10px 0 0}
.demo-scene{position:relative;flex:1 1 430px;min-height:330px;max-height:465px;width:100%;perspective:1400px;isolation:isolate;overflow:clip}
.demo-halo{position:absolute;inset:12% 10% 7%;border-radius:50%;background:radial-gradient(ellipse at 30% 50%,#e6dcfcad,transparent 65%),radial-gradient(ellipse at 70% 40%,#cfe9f8a6,transparent 65%);filter:blur(26px);pointer-events:none}
.demo-sheet{position:absolute;top:50%;left:50%;width:min(640px,calc(100% - 48px));transform:translate(-50%,-50%);border:1px solid #ffffffed;border-radius:24px;background:linear-gradient(130deg,#fffffff5,#ffffffba);box-shadow:inset 0 1px 0 white,-1px 0 0 #eac8d278,1px 0 0 #accbf381,0 24px 55px -23px #534c8b38,0 4px 12px #5a598008;overflow:hidden;backface-visibility:hidden;will-change:transform,opacity}
.demo-bar{height:43px;padding:0 17px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-bottom:1px solid #53577912;font:500 11px/1.2 var(--font-sans),sans-serif;color:var(--demo-muted);background:#ffffff48}
.demo-dots{display:flex;gap:5px}.demo-dots i{width:6px;height:6px;background:#b7b8c9;border-radius:50%}
.demo-connection{justify-self:end;display:flex;align-items:center;gap:5px;font-size:10px;color:#39826c}.demo-connection i{width:5px;height:5px;border-radius:50%;background:#52ab8e}.demo-connection svg{width:14px;height:14px;color:#9d96b2}
.demo-browserBody{display:grid;grid-template-columns:210px 1fr;min-height:285px}.demo-tree{border-right:1px solid #60608010;padding:22px 14px;background:#f7f6fe4d;display:flex;flex-direction:column;gap:7px}.demo-tree small{font-size:9px;letter-spacing:.12em;color:var(--demo-muted);padding-left:10px}.demo-tree b{font-size:12px;font-weight:600;margin:0 0 12px;padding-left:10px}.demo-tree>span{font-size:12px;color:#777889;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px}.demo-tree svg{width:17px;height:17px}.demo-tree>span.demo-selected{background:#eae5fc;color:#6450c5;box-shadow:inset 0 0 0 1px #6752da18}.demo-tree>span:not(:first-of-type){margin-left:14px}
.demo-destination{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;min-width:0}.demo-folderMark{color:#8775df;display:grid;place-items:center;width:66px;height:58px;border-radius:18px;background:linear-gradient(145deg,#ebe9ff,#d7cef854);box-shadow:inset 0 1px 0 white,0 10px 20px -10px #a394cf7a;margin-bottom:17px}.demo-folderMark svg{width:36px;height:36px;stroke-width:1.4}.demo-destination small,.demo-link small{font:500 9px/1.4 var(--font-mono),monospace;letter-spacing:.12em;color:var(--demo-muted)}
.demo-destination h3,.demo-link h3{font-size:24px;font-weight:500;letter-spacing:-.035em;margin:4px 0 0}.demo-destination p{font-size:11px;color:var(--demo-muted);margin:3px 0 20px}.demo-demoButton{font-size:11px;font-weight:500;background:linear-gradient(#3b3c48,#252632);color:white;border-radius:10px;padding:10px 14px;display:inline-flex;align-items:center;gap:14px;box-shadow:inset 0 1px 0 #ffffff48,0 7px 14px -6px #25263250}.demo-demoButton svg{width:15px;height:15px}
.demo-link{opacity:0;width:min(460px,calc(100% - 44px));padding:26px;display:grid;grid-template-columns:49px 1fr;column-gap:15px;row-gap:21px;overflow:visible;background:linear-gradient(135deg,#fffffff7,#f6f3fcea)}.demo-linkMark{width:49px;height:49px;border:1px solid white;border-radius:16px;background:linear-gradient(150deg,#b8abf550,#e9e4ff8c);color:#7a61d3;display:grid;place-items:center;box-shadow:0 8px 15px -8px #7669ae65,inset 0 1px 0 white}.demo-link h3{font-size:21px;margin:2px 0}.demo-link p{font-size:11px;margin:2px 0 0;color:var(--demo-muted)}.demo-address{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border:1px solid #5f558011;border-radius:12px;background:#ece9f775;padding:13px 12px;gap:12px;font:11px var(--font-mono),monospace;color:#727080}.demo-address>span:last-child{display:flex;align-items:center;gap:5px;font:500 10px var(--font-sans),sans-serif;color:#4e7e6d;white-space:nowrap}.demo-address svg{width:13px;height:13px}.demo-linkNote{position:absolute;left:0;right:0;top:calc(100% + 20px);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--demo-muted)}.demo-linkNote svg{width:16px;height:16px}
.demo-upload{height:330px;opacity:0}.demo-uploadHeading{padding:18px 24px;text-align:center;display:flex;flex-direction:column;gap:3px}.demo-uploadHeading b{font-size:14px;font-weight:550}.demo-uploadHeading span{font-size:10px;color:var(--demo-muted)}.demo-drop{position:absolute;inset:110px 27px 26px;border:1px dashed #9186bd55;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eeebff2e}.demo-drop>span{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#eee8fc;color:#8972d2;margin-bottom:8px}.demo-drop h3{font-size:21px;letter-spacing:-.03em;font-weight:500;margin:0}.demo-drop p{font-size:11px;margin:6px 0 0;color:var(--demo-muted)}
.demo-counter{position:absolute;z-index:4;left:50%;top:54%;transform:translate(-50%,-50%);opacity:0;text-align:center;pointer-events:none}.demo-counter>span{display:block;font-family:var(--font-display),sans-serif;font-size:clamp(58px,8vw,96px);line-height:.95;font-weight:500;letter-spacing:-.075em;color:#7460d3;font-variant-numeric:tabular-nums}.demo-counter b{font-weight:500}.demo-counter i{font-size:.44em;font-style:normal;letter-spacing:-.04em;margin-left:5px}.demo-counter small{display:block;margin-top:12px;font-size:11px;color:#7a758b;white-space:nowrap}
.demo-arrival{opacity:0;height:auto}.demo-arrivalHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 24px 13px}.demo-arrivalHeading>div{display:flex;align-items:center;gap:10px}.demo-arrivalHeading>div>svg{width:30px;height:30px;color:#8e7aca}.demo-arrivalHeading b,.demo-arrivalHeading small{display:block}.demo-arrivalHeading small{font:8px var(--font-mono),monospace;letter-spacing:.08em;color:var(--demo-muted)}.demo-arrivalHeading b{font-size:18px;font-weight:500;letter-spacing:-.025em;margin-top:3px}.demo-receipt{display:flex;align-items:center;gap:5px;font-size:10px;color:#3e866e;opacity:0}.demo-receipt svg{width:15px;height:15px}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 24px 20px}.demo-slot{aspect-ratio:1.58;border-radius:11px;background:#eae7f345;box-shadow:inset 0 0 0 1px #8b84a412}
.demo-file{position:absolute;z-index:5;left:0;top:0;width:126px;aspect-ratio:1.58;opacity:0;border-radius:9px;background:white;overflow:hidden;box-shadow:0 8px 20px -6px #40375d40,0 0 0 1px #ffffff;transform-origin:center;will-change:transform,opacity;--landed:0;pointer-events:none}.demo-thumbnail{position:relative;height:70%;background-size:cover;background-color:#d5d8e3}.demo-thumbnail:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#0c101334);pointer-events:none}.demo-thumbnail>span{position:absolute;z-index:1;left:6px;bottom:5px;color:white;font:7px var(--font-mono),monospace;display:flex;align-items:center;gap:3px;text-shadow:0 1px 3px #0005}.demo-thumbnail>span svg{width:10px;height:10px}.demo-thumbnail>i{position:absolute;right:5px;top:5px;z-index:2;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:#fffffff2;color:#397d69;opacity:var(--landed)}.demo-thumbnail>i svg{width:10px;height:10px}.demo-fileCaption{height:30%;display:flex;justify-content:space-between;align-items:center;gap:3px;padding:0 6px;font-size:7px;color:#767482}.demo-fileCaption b{font-weight:550;color:#37343f;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.demo-fileCaption>span{font-size:6px;white-space:nowrap}
.demo-controls{display:flex;flex-direction:column;align-items:center;padding:0 0 10px;flex:0 0 auto}.demo-chapters{position:relative;isolation:isolate;display:flex;padding:4px;border-radius:999px;gap:3px;border:1px solid #fffffff2;background:linear-gradient(#ffffffb3,#ffffff65);box-shadow:inset 0 1px 0 white,0 10px 25px -12px #5952693f}.demo-chapters button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:8px 17px;border:0;border-radius:999px;background:transparent;color:#777383;font-size:12px;font-weight:500;cursor:pointer;transition:color 300ms cubic-bezier(.22,1,.36,1),background-color 240ms ease}.demo-chapters svg{width:16px;height:16px}.demo-chapterPill{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:linear-gradient(#8874e6,#6b56cd);box-shadow:inset 0 1px 0 #ffffff65,0 3px 8px #7059ba28;pointer-events:none;opacity:0}.demo-chapters[data-pill-ready=true] .demo-chapterPill{opacity:1}.demo-chapters button[aria-pressed=true]{color:white}.demo-chapters:not([data-pill-ready]) button[aria-pressed=true]{background:linear-gradient(#8874e6,#6b56cd);box-shadow:inset 0 1px 0 #ffffff65,0 3px 8px #7059ba28}.demo-chapters button:focus-visible{outline:2px solid #7056c8;outline-offset:3px}.demo-chapters button:not([aria-pressed=true]):hover{background-color:#dcd5ed70}.demo-controls>p{display:flex;align-items:center;gap:9px;font-size:11px;color:#827a91;margin:12px 0 0}.demo-controls>p span{font-size:14px}.demo-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.demo-story{height:calc(100svh + 1800px)}.demo-sticky{height:650px;top:max(12px,calc((100svh - 650px)/2))}.demo-heading{padding-inline:0}.demo-heading .demo-kicker{font-size:9px;letter-spacing:.09em}.demo-heading h2{font-size:clamp(24px,5.8vw,34px)}.demo-heading>p:last-child{font-size:12px}.demo-scene{min-height:340px}.demo-sheet{width:calc(100% - 16px);border-radius:19px}.demo-browserBody{grid-template-columns:135px 1fr;min-height:260px}.demo-tree{padding:20px 8px;gap:8px}.demo-tree b{font-size:10px;padding-left:5px}.demo-tree small{font-size:8px;padding-left:5px}.demo-tree>span{font-size:10px;padding:6px 5px;gap:5px}.demo-tree>span:not(:first-of-type){margin-left:5px}.demo-tree svg{width:14px}.demo-destination{padding:12px 8px}.demo-destination h3{font-size:20px}.demo-destination small{font-size:8px}.demo-destination p{font-size:8px;text-align:center}.demo-demoButton{font-size:9px;gap:5px;padding:9px 8px}.demo-folderMark{width:58px;height:54px}.demo-bar{padding-inline:12px;font-size:10px;height:39px}.demo-connection{font-size:8px}.demo-dots{gap:4px}.demo-dots i{width:5px;height:5px}.demo-link{width:calc(100% - 30px);padding:22px;column-gap:11px;row-gap:18px}.demo-link p{font-size:10px}.demo-linkNote{font-size:10px}.demo-upload{height:320px}.demo-uploadHeading{padding:17px 10px}.demo-uploadHeading b{font-size:12px}.demo-drop{inset:102px 18px 20px}.demo-drop h3{font-size:20px}.demo-file{width:90px}.demo-counter{top:52%}.demo-counter>span{font-size:70px}.demo-counter small{font-size:10px}.demo-arrivalHeading{padding:16px 14px 14px}.demo-arrivalHeading small{font-size:6px}.demo-arrivalHeading b{font-size:16px}.demo-arrivalHeading>div>svg{width:24px;height:24px}.demo-receipt{font-size:8px}.demo-receipt svg{width:12px}.demo-grid{gap:9px;padding:0 14px 15px}.demo-slot{aspect-ratio:1.58}.demo-chapters button{padding:8px 12px;font-size:11px;gap:5px}.demo-chapters svg{width:14px;height:14px}.demo-controls>p{font-size:10px}}
@media(max-width:390px){.demo-browserBody{grid-template-columns:110px 1fr}.demo-tree b{font-size:9px}.demo-tree>span{font-size:9px;gap:3px}.demo-destination p{max-width:15ch}.demo-destination h3{font-size:18px}.demo-link{padding:19px}.demo-link p{font-size:9px}.demo-address{font-size:9px}.demo-chapters button{padding:8px 10px}.demo-connection{font-size:7px}.demo-arrivalHeading small{max-width:110px;line-height:1.4}.demo-receipt{max-width:70px}}
@media(prefers-reduced-motion:reduce),(max-height:560px){.demo-story{height:auto}.demo-sticky{position:relative;top:0;height:auto;max-height:none}.demo-scene{flex:none;height:420px}.demo-controls{padding-bottom:20px}.demo-heading{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.demo-chapters button{transition:none}.demo-sheet,.demo-file{will-change:auto}}

@media(pointer:coarse){.demo-chapters button{min-height:44px}}