@property --ft-fold-s{syntax:"<length>";inherits:true;initial-value:18px}@layer components{.ft-fold,.ft-doc,.ft-thumb{--ft-ease:cubic-bezier(.23, 1, .32, 1);--ft-spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.3%, 1.043 24.4%, 1.035 28.2%, 1.007 38.8%, .998 48.3%, 1);--ft-page:linear-gradient(180deg, #fff, #f3f5f9);--ft-hi:#ffffffe6;display:block;position:relative}.dark .ft-fold,.dark .ft-doc,.dark .ft-thumb{--ft-page:linear-gradient(180deg, var(--color-surface-1), var(--color-surface-2));--ft-hi:#ffffff0f}.ft-fold:before,.ft-doc:before,.ft-thumb:before{content:"";z-index:-1;corner-shape:round;filter:blur(2px);height:10px;transition:transform .3s var(--ft-spring), opacity .3s var(--ft-ease);background:radial-gradient(closest-side,#00000038,#0000);border-radius:50%;position:absolute;bottom:-5px;left:15%;right:15%}.dark .ft-fold:before,.dark .ft-doc:before,.dark .ft-thumb:before{background:radial-gradient(closest-side,#0000008c,#0000)}.ft-fold{--ft-tint:var(--color-accent);width:100%;max-width:124px;color:var(--ft-tint)}.ft-fold:before{bottom:2px;left:12%;right:12%}.ft-fold-svg{filter:drop-shadow(0 2px 3px #10182829);width:100%;height:auto;display:block;overflow:visible}.ft-fold-b0{stop-color:color-mix(in oklab, var(--ft-tint) 72%, #000)}.ft-fold-b1{stop-color:color-mix(in oklab, var(--ft-tint) 60%, #000)}.ft-fold-p0{stop-color:color-mix(in oklab, var(--ft-tint) 80%, #fff)}.ft-fold-p1{stop-color:var(--ft-tint)}.ft-fold-p2{stop-color:color-mix(in oklab, var(--ft-tint) 86%, #000)}.ft-fold-sheet{fill:#fff;fill-opacity:.95}.dark .ft-fold-sheet{fill:#e8ecf5;fill-opacity:.9}.ft-fold-sheet2{fill:color-mix(in oklab, var(--ft-tint) 22%, #fff)}.dark .ft-fold-sheet2{fill:color-mix(in oklab, var(--ft-tint) 30%, #c9d2e6)}.ft-fold-lines{stroke:#c9ced9;stroke-width:1px;stroke-linecap:round}.ft-fold-paper,.ft-fold-pocket,.ft-fold-sheen,.ft-fold-mark{transform-box:fill-box;transition:transform .3s var(--ft-spring)}.ft-fold-pocket{transform-origin:50% 100%}.ft-fold-mark{pointer-events:none;position:absolute;inset:0}.ft-fold-glyph{aspect-ratio:1;width:26%;height:auto;color:color-mix(in oklab, var(--ft-tint) 70%, #000);opacity:.55;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%)}.ft-fold-glyph-hi{color:#fff;opacity:.35;transform:translate(-50%,calc(1px - 50%))}.ft-fold-initial{font-family:var(--font-heading);color:color-mix(in oklab, var(--ft-tint) 70%, #000);opacity:.55;text-shadow:0 1px #ffffff59;font-size:clamp(16px,20cqw,26px);font-weight:700;line-height:1;position:absolute;top:58%;left:50%;transform:translate(-50%,-50%)}.ft-fold-lock{aspect-ratio:1;color:#fff;filter:drop-shadow(0 1px 1px #00000040);--color-surface:color-mix(in oklab, var(--ft-tint) 80%, #000);width:27%;height:auto;position:absolute;top:57%;left:50%;transform:translate(-50%,-50%)}.ft-fold[data-bg] .ft-fold-glyph,.ft-fold[data-bg] .ft-fold-initial{color:#000;opacity:.25}.ft-doc{filter:drop-shadow(0 3px 5px #1018281f)drop-shadow(0 1px 1px #10182814);width:76px;height:100px;transition:transform .3s var(--ft-spring)}.dark .ft-doc{filter:drop-shadow(0 3px 6px #0006)}.ft-doc-back,.ft-doc-page{background:var(--ft-page);border:1px solid var(--color-border);border-radius:10px;position:absolute;inset:0}.ft-doc-back{opacity:.7;transform:translate(3px,3px)rotate(3deg)}.ft-doc-page{box-shadow:inset 0 1px 0 var(--ft-hi);clip-path:polygon(0 0, calc(100% - var(--ft-fold-s)) 0, 100% var(--ft-fold-s), 100% 100%, 0 100%);transition:--ft-fold-s .2s var(--ft-ease), clip-path .2s var(--ft-ease);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.ft-doc-fold{width:var(--ft-fold-s);height:var(--ft-fold-s);background:linear-gradient(225deg, transparent 50%, var(--color-surface-2) 50%);filter:drop-shadow(-1px 1px 1px #0000001f);border-bottom-left-radius:3px;position:absolute;top:0;right:0}.ft-doc-ic{width:28px;height:28px}.ft-doc-ext{background:color-mix(in srgb, currentColor 12%, transparent);letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700;line-height:1.1}.ft-doc-warn{corner-shape:round;background:var(--color-surface);color:#f59e0b;width:20px;height:20px;box-shadow:0 1px 2px #0000001f, 0 0 0 1px var(--color-border);border-radius:50%;place-items:center;display:grid;position:absolute;bottom:-4px;right:-4px}.ft-thumb{transition:transform .3s var(--ft-spring);margin-bottom:8px}.ft-thumb-in{border:3px solid var(--color-surface);background:var(--color-surface-1);width:100%;height:100%;box-shadow:0 0 0 1px var(--color-border), 0 3px 9px -2px #10182840, 0 1px 2px #1018281f;border-radius:10px;display:block;position:relative;overflow:hidden}.ft-thumb-in>img,.ft-thumb-img{object-fit:cover;border-radius:7px;width:100%;height:100%;display:block}.ft-thumb-in>img{animation:ft-thumb-fade .2s var(--ft-ease,ease-out) both}@keyframes ft-thumb-fade{0%{opacity:0;transform:scale(1.03)}}.ft-thumb-play{corner-shape:round;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;background:#00000059;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px #ffffff40}@media (hover:hover) and (pointer:fine){.ft-host:hover .ft-fold-pocket{transition:transform .2s var(--ft-ease);transform:translateY(2px)scaleY(.96)}.ft-host:hover .ft-fold-paper{transition:transform .2s var(--ft-ease);transform:translateY(-4px)}.ft-host:hover .ft-fold-mark{transition:transform .2s var(--ft-ease);transform:translateY(1.5%)}.ft-host:hover .ft-doc{--ft-fold-s:22px;transform:translateY(-3px)}.ft-host:hover .ft-thumb{transform:translateY(-3px)}.ft-host:hover .ft-fold:before,.ft-host:hover .ft-doc:before,.ft-host:hover .ft-thumb:before{opacity:.75;transform:scale(1.1,1.2)translateY(2px)}}@media (prefers-reduced-motion:reduce){.ft-fold-paper,.ft-fold-pocket,.ft-fold-mark,.ft-doc,.ft-doc-page,.ft-thumb{transition:none}.ft-thumb-in>img{animation:none}}}
