:root { --canvas-scale:1; --ink:#f6f7f8; --muted:#939599; --blue:#315cf5; --violet:#a855e6; --ease:cubic-bezier(.22,.78,.2,1); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#0d0f12; }
body { color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; user-select:none; }
button { color:inherit; font:inherit; }
button:focus-visible,[tabindex]:focus-visible { outline:2px solid #8298ff; outline-offset:5px; }

.deck { position:relative; width:100%; height:100%; overflow:hidden; background:#0d0f12; cursor:grab; }
.deck.is-pointer-dragging { cursor:grabbing; }
.slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateX(3.5vw) scale(.985); filter:blur(7px); transition:opacity .62s ease,transform .9s var(--ease),filter .8s ease,visibility 0s .9s; }
.slide.is-active { opacity:1; visibility:visible; transform:none; filter:none; transition-delay:0s; z-index:2; }
.slide.is-leaving-left { opacity:0; visibility:visible; transform:translateX(-3.5vw) scale(.99); filter:blur(6px); z-index:1; }
.slide.is-leaving-right { opacity:0; visibility:visible; transform:translateX(3.5vw) scale(.99); filter:blur(6px); z-index:1; }
.slide.is-preparing-left { transform:translateX(-3.5vw) scale(.985); }
.slide.is-preparing-right { transform:translateX(3.5vw) scale(.985); }
.canvas { position:absolute; left:50%; top:50%; width:1920px; height:1080px; overflow:hidden; transform:translate(-50%,-50%) scale(var(--canvas-scale)); transform-origin:center; background:#17181a; }
.canvas::after { content:""; position:absolute; inset:0; z-index:90; pointer-events:none; opacity:.13; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.ambient { position:absolute; pointer-events:none; border-radius:50%; filter:blur(10px); opacity:.25; }
.ambient--one { width:900px; height:900px; left:-160px; bottom:-380px; background:radial-gradient(circle,rgba(54,76,101,.7),transparent 67%); }
.ambient--two { width:900px; height:700px; right:-300px; top:-220px; background:radial-gradient(circle,rgba(66,44,78,.45),transparent 68%); }
.anim { opacity:0; transform:translateY(28px); }
.slide.is-active .anim { animation:layerIn .9s var(--delay,0s) both var(--ease); }
@keyframes layerIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

.overview-title { position:absolute; z-index:4; left:160px; top:142px; margin:0; font-size:80px; line-height:1.2; font-weight:800; letter-spacing:-.03em; color:transparent; background:linear-gradient(100deg,#315cf5,#a855e6); -webkit-background-clip:text; background-clip:text; }
.overview-subtitle { position:absolute; z-index:4; left:175px; top:276px; margin:0; font-size:20px; line-height:30px; }
.project-card { position:absolute; z-index:4; left:var(--x); top:456px; width:360px; height:360px; overflow:visible; border:0; border-radius:40px; background:linear-gradient(145deg,#373737,#292a2b); box-shadow:0 52px 90px rgba(0,0,0,.38); cursor:zoom-in; }
.slide.is-active .project-card { animation-name:cardIn; }
@keyframes cardIn { from { opacity:0; transform:translateY(42px) rotate(.7deg) scale(.94); } to { opacity:1; transform:none; } }
.project-card::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); pointer-events:none; }
.project-index { position:absolute; z-index:5; left:31px; top:-40px; font-size:64px; line-height:78px; font-weight:650; letter-spacing:-.035em; }
.project-image { position:absolute; inset:38px 0 auto; height:226px; overflow:hidden; border-radius:22px 22px 12px 12px; }
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease),filter .5s ease; }
.project-card:hover .project-image img { transform:scale(1.035) translateY(-3px); filter:brightness(1.08); }
.project-label { position:absolute; z-index:4; left:24px; bottom:24px; height:72px; display:flex; align-items:center; padding:0 32px; border:2px solid #616161; border-radius:100px; background:rgba(51,51,51,.55); box-shadow:0 12px 25px rgba(0,0,0,.22); backdrop-filter:blur(7px); font-size:24px; line-height:36px; font-weight:700; white-space:nowrap; }
.project-label[data-jump] { cursor:pointer; transition:border-color .25s ease,background .25s ease,transform .25s ease; }
.project-label[data-jump]:hover { border-color:#899cff; background:rgba(67,76,112,.78); transform:translateY(-2px); }

.folio-header { position:absolute; z-index:10; left:48px; top:24px; width:1848px; height:198px; display:grid; grid-template-columns:1fr 1fr 1fr 16px; align-items:start; color:rgba(255,255,255,.8); }
.folio-identity { display:flex; align-items:center; gap:12px; }
.stack-mark { position:relative; width:24px; height:24px; }
.stack-mark::before,.stack-mark::after { content:""; position:absolute; left:4px; width:15px; height:9px; border:1px solid rgba(255,255,255,.85); transform:rotate(30deg) skewX(-30deg); }
.stack-mark::before { top:3px; }
.stack-mark::after { top:10px; opacity:.65; }
.folio-identity span,.folio-context { display:flex; flex-direction:column; gap:2px; }
.folio-header small { font-size:10px; line-height:12px; font-weight:400; }
.folio-header b { margin-top:1px; font-size:18px; line-height:28px; }
.folio-context { justify-self:center; min-width:184px; }
.folio-context small { font-size:12px; line-height:18px; }
.folio-context b { font-size:16px; line-height:24px; font-weight:500; }
.part-mark { justify-self:end; width:10px; text-align:center; font-size:10px; line-height:15px; color:#939599; }

.project-intro { position:absolute; z-index:6; left:160px; top:224px; width:650px; }
.project-intro h1,.hierarchy-copy h1 { margin:0; color:transparent; background:linear-gradient(100deg,#315cf5,#a855e6); -webkit-background-clip:text; background-clip:text; font-weight:800; }
.project-intro h1 { font-size:64px; line-height:78px; letter-spacing:-.03em; }
.project-intro p { margin:28px 0 0; font-size:20px; line-height:30px; }
.title-reveal { clip-path:inset(0 100% 0 0); }
.slide.is-active .title-reveal { animation:titleReveal 1.05s var(--delay,0s) both var(--ease); }
@keyframes titleReveal { from { opacity:0; transform:translateY(18px); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
.project-tags { position:absolute; z-index:7; right:160px; top:408px; display:flex; gap:16px; }
.project-tags span { display:flex; align-items:center; height:48px; padding:0 24px; border:1px solid rgba(255,255,255,.8); border-radius:28px; font-size:20px; white-space:nowrap; }
.editor-card { position:absolute; z-index:5; left:166px; top:540px; width:1592px; height:916px; overflow:hidden; padding:12px; border:4px solid #565c66; border-radius:40px; background:#17181a; box-shadow:0 -24px 53px rgba(0,0,0,.2); cursor:zoom-in; }
.slide.is-active .editor-card { animation-name:editorRise; }
@keyframes editorRise { from { opacity:0; transform:translateY(100px) scale(.965); clip-path:inset(20% 0 0 0 round 40px); } to { opacity:1; transform:none; clip-path:inset(0 round 40px); } }
.editor-card img { display:block; width:100%; height:478px; object-fit:cover; border-radius:24px; }
.image-sheen { position:absolute; inset:12px; border-radius:24px; pointer-events:none; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.09) 48%,transparent 61%); transform:translateX(-110%); }
.slide.is-active .image-sheen { animation:sheen 1.2s .85s both ease; }
@keyframes sheen { to { transform:translateX(110%); } }

.hierarchy-panel { position:absolute; z-index:2; left:270px; top:134px; width:1586px; height:882px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:40px; background:linear-gradient(120deg,#32373f,#454b53); box-shadow:0 20px 40px rgba(0,0,0,.5); }
.slide.is-active .hierarchy-panel { animation-name:panelIn; }
@keyframes panelIn { from { opacity:0; transform:translateY(26px) scale(.985); clip-path:inset(0 0 100% 0 round 40px); } 45% { opacity:1; } to { opacity:1; transform:none; clip-path:inset(0 round 40px); } }
.perspective-editor { position:absolute; left:65px; top:205px; width:1460px; height:680px; overflow:hidden; border:4px solid #656c78; border-radius:32px; background:#111214; box-shadow:0 45px 95px rgba(0,0,0,.58); transform:rotate(3.8deg) skewX(-2deg); transform-origin:center; cursor:zoom-in; }
.perspective-editor img { width:100%; height:100%; object-fit:cover; filter:brightness(.83) contrast(1.06); }
.hierarchy-copy { position:absolute; z-index:7; left:120px; top:200px; width:480px; }
.hierarchy-copy h1 { font-size:32px; line-height:46px; }
.hierarchy-copy p { margin:16px 0 0; font-size:20px; line-height:30px; }
.callout { position:absolute; z-index:8; display:flex; flex-direction:column; gap:4px; font-size:16px; line-height:24px; }
.callout b { color:#fff; font-size:20px; line-height:30px; }
.callout span { color:#b2b5ba; }
.callout .line { position:absolute; display:block; background:rgba(255,255,255,.78); transform-origin:0 0; }
.callout .line::before { content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; }
.callout--screen { left:930px; top:220px; width:336px; }
.callout--tools { left:1420px; top:220px; width:336px; }
.callout--content { left:188px; top:558px; width:250px; }
.callout--canvas { left:306px; top:868px; width:90px; }
.callout--config { left:1656px; top:695px; width:210px; }
.line--down { left:-17px; top:44px; width:1px; height:154px; transform:scaleY(0); }
.line--down::before { left:-4px; top:-4px; }
.callout--tools .line--down { height:203px; }
.line--right { left:11px; top:18px; width:297px; height:1px; transform:translateX(0) scaleX(0); }
.line--right::before { left:-4px; top:-4px; }
.callout--canvas .line--right { width:540px; }
.line--left { right:212px; top:12px; width:92px; height:1px; transform-origin:right; transform:scaleX(0); }
.line--left::before { right:-4px; top:-4px; }
.slide.is-active .callout .line { animation:drawLine .75s calc(var(--delay) + .18s) both var(--ease); }
@keyframes drawLine { to { transform:none; } }

.folio-footer { position:absolute; z-index:12; left:48px; top:1038px; width:1824px; height:18px; display:grid; grid-template-columns:1fr 1fr 1fr; color:#a6abb2; font-size:12px; line-height:18px; letter-spacing:.06em; }
.folio-footer b { font-weight:700; }
.folio-footer span:nth-child(2) { text-align:center; }
.folio-footer span:last-child { text-align:right; }

.edge { position:fixed; z-index:100; top:50%; width:54px; height:86px; margin-top:-43px; padding:0; opacity:.24; border:0; background:transparent; font-size:24px; cursor:pointer; transition:opacity .25s ease,transform .25s ease; }
.edge:hover { opacity:1; transform:scale(1.08); }
.edge:disabled { opacity:0; pointer-events:none; }
.edge--prev { left:max(12px,env(safe-area-inset-left)); }
.edge--next { right:max(12px,env(safe-area-inset-right)); }
.deck-controls { position:fixed; z-index:110; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); height:42px; display:flex; align-items:center; gap:11px; padding:0 11px 0 16px; border:1px solid rgba(255,255,255,.13); border-radius:99px; background:rgba(10,12,15,.58); box-shadow:0 12px 35px rgba(0,0,0,.26); backdrop-filter:blur(20px); transform:translateX(-50%); opacity:.4; transition:opacity .3s ease; }
.deck-controls:hover,.deck-controls:focus-within { opacity:1; }
.dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#777b84; cursor:pointer; transition:.3s ease; }
.dot.is-active { width:20px; border-radius:9px; background:linear-gradient(90deg,#5577ff,#a652e8); }
.control-divider { width:1px; height:14px; background:rgba(255,255,255,.16); }
.deck-controls output { min-width:44px; color:#aeb2bb; font-size:9px; letter-spacing:.08em; }
.fullscreen-button { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.fullscreen-button:hover { background:rgba(255,255,255,.1); }
.fullscreen-button svg { width:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.swipe-tip { position:fixed; z-index:105; right:max(20px,env(safe-area-inset-right)); bottom:max(21px,env(safe-area-inset-bottom)); margin:0; color:rgba(255,255,255,.38); font-size:9px; letter-spacing:.08em; }

.image-dialog { width:100vw; height:100vh; max-width:none; max-height:none; padding:0; border:0; background:rgba(6,8,11,.94); color:#fff; opacity:0; transition:opacity .3s ease,display .3s allow-discrete,overlay .3s allow-discrete; }
.image-dialog[open] { display:grid; place-items:center; opacity:1; }
.image-dialog::backdrop { background:transparent; }
.image-dialog img { max-width:90vw; max-height:82vh; border-radius:14px; box-shadow:0 40px 120px rgba(0,0,0,.7); animation:zoomIn .55s both var(--ease); }
@keyframes zoomIn { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:none; } }
.image-dialog button { position:fixed; right:max(24px,env(safe-area-inset-right)); top:max(20px,env(safe-area-inset-top)); width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(255,255,255,.05); font-size:26px; font-weight:200; cursor:pointer; }
.image-dialog p { position:fixed; bottom:max(20px,env(safe-area-inset-bottom)); margin:0; color:#767b85; font-size:10px; }

.canvas--generated { color:#17181a; background:#f7f8fa; }
.generated-page { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; }
.generated-page > * { position:absolute; inset:0; width:1920px; height:1080px; }
.generated-page img { display:block; }
.generated-layer { opacity:0; translate:0 22px; }
.slide.is-active .generated-layer { animation:generatedLayerIn .82s var(--layer-delay,.12s) both var(--ease); }
@keyframes generatedLayerIn { from { opacity:0; translate:0 22px; filter:blur(5px); } to { opacity:1; translate:0 0; filter:none; } }

.canvas--layered::after { display:none; }
.layered-page { isolation:isolate; }
.layered-group { position:absolute; inset:0; width:1920px; height:1080px; opacity:0; pointer-events:none; }
.layered-asset { position:absolute; max-width:none; object-fit:fill; pointer-events:none; }
.slide.is-active .layered-group--fade { animation:layeredFade .62s var(--layer-delay) both ease-out; }
.slide.is-active .layered-group--rise { animation:layeredRise .82s var(--layer-delay) both var(--ease); }
.slide.is-active .layered-group--reveal { animation:layeredReveal .88s var(--layer-delay) both var(--ease); }
.slide.is-active .layered-group--soft { animation:layeredSoft 1s var(--layer-delay) both var(--ease); transform-origin:center; }
@keyframes layeredFade { from { opacity:0; } to { opacity:1; } }
@keyframes layeredRise { from { opacity:0; translate:0 28px; } to { opacity:1; translate:0 0; } }
@keyframes layeredReveal { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes layeredSoft { from { opacity:0; scale:1.018; } to { opacity:1; scale:1; } }
.hybrid-source-page { position:absolute; inset:0; width:1920px; height:1080px; }
.hybrid-layer { position:absolute; display:block; max-width:none; pointer-events:none; object-fit:fill; }
.hybrid-layer--top { left:0; top:0; width:1920px; opacity:1; clip-path:inset(0 100% 0 0); }
.hybrid-layer--body { opacity:0; will-change:opacity,transform,filter; }
.slide.is-active .hybrid-layer--top { animation:hybridTopReveal .78s .05s both var(--ease); }
.slide.is-active .hybrid-layer--rise { animation:hybridBodyRise .78s var(--hybrid-delay) both var(--ease); }
.slide.is-active .hybrid-layer--fade { animation:hybridBodyFade .72s var(--hybrid-delay) both ease-out; }
.slide.is-active .hybrid-layer--focus { animation:hybridBodyFocus .82s var(--hybrid-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .hybrid-layer--slide-left { animation:hybridSlideLeft .82s var(--hybrid-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .hybrid-layer--slide-right { animation:hybridSlideRight .82s var(--hybrid-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .hybrid-layer--drop { animation:hybridDrop .82s var(--hybrid-delay) both cubic-bezier(.16,1,.3,1); }
@keyframes hybridTopReveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes hybridBodyRise { from { opacity:0; transform:translate3d(0,24px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes hybridBodyFade { from { opacity:0; filter:blur(3px); } to { opacity:1; filter:none; } }
@keyframes hybridBodyFocus { from { opacity:0; transform:scale(.985); filter:blur(4px); } to { opacity:1; transform:scale(1); filter:none; } }
@keyframes hybridSlideLeft { from { opacity:0; transform:translate3d(34px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes hybridSlideRight { from { opacity:0; transform:translate3d(-34px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes hybridDrop { from { opacity:0; transform:translate3d(0,-34px,0); } to { opacity:1; transform:translate3d(0,0,0); } }

.hybrid-page-14 .cross-page { background:transparent !important; }
.hybrid-page-14 .cross-glow,
.hybrid-page-14 .cross-dots,
.hybrid-page-14 .cross-visual { display:none !important; }
.rebuild-host { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; }
.rebuild-slice { position:absolute; display:block; max-width:none; object-fit:fill; opacity:0; pointer-events:none; }
.rebuild-slice--zoom { pointer-events:auto; cursor:zoom-in; }
.slide.is-active .rebuild-slice--top { animation:rebuildRevealLeft .72s var(--rebuild-delay) both var(--ease); }
.slide.is-active .rebuild-slice--title { animation:rebuildFade .68s var(--rebuild-delay) both var(--ease); }
.slide.is-active .rebuild-slice--body-left { animation:rebuildRevealLeft .78s var(--rebuild-delay) both var(--ease); }
.slide.is-active .rebuild-slice--body-right { animation:rebuildRevealRight .78s var(--rebuild-delay) both var(--ease); }
.slide.is-active .rebuild-slice--footer { animation:rebuildFade .6s var(--rebuild-delay) both var(--ease); }
.slide.is-leaving-left .rebuild-slice,.slide.is-leaving-right .rebuild-slice { opacity:1; clip-path:inset(0); }
@keyframes rebuildFade { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:blur(0); } }
@keyframes rebuildRevealLeft { from { opacity:.25; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes rebuildRevealRight { from { opacity:.25; clip-path:inset(0 0 0 100%); } to { opacity:1; clip-path:inset(0); } }

/* Page-specific motion rebuild: exact Figma pixels, semantic animated regions. */
.motion-page-host { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; }
.motion-page { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; isolation:isolate; }
.motion-piece { position:absolute; display:block; max-width:none; opacity:0; overflow:hidden; background-repeat:no-repeat; background-size:1920px 1080px; transform-origin:center; will-change:transform,opacity,clip-path,filter; }
.motion-piece.rebuild-slice--zoom { pointer-events:auto; cursor:zoom-in; transition:filter .28s ease; }
.motion-piece.rebuild-slice--zoom:hover { filter:brightness(1.035) saturate(1.025); }

.slide.is-active .motion-piece--fade { animation:motionFade var(--motion-duration) var(--motion-delay) both ease-out; }
.slide.is-active .motion-piece--rise { animation:motionRise var(--motion-duration) var(--motion-delay) both var(--ease); }
.slide.is-active .motion-piece--pop { animation:motionPop .72s var(--motion-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .motion-piece--portrait { animation:motionPortrait 1s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:42% 58%; }
.slide.is-active .motion-piece--reveal-left { animation:motionRevealLeft .92s var(--motion-delay) both cubic-bezier(.25,.8,.25,1); }
.slide.is-active .motion-piece--reveal-right { animation:motionRevealRight .92s var(--motion-delay) both cubic-bezier(.25,.8,.25,1); }
.slide.is-active .motion-piece--tilt-left { animation:motionTiltLeft .94s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:right bottom; }
.slide.is-active .motion-piece--tilt-right { animation:motionTiltRight .94s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:left bottom; }
.slide.is-active .motion-piece--drop { animation:motionDrop .86s var(--motion-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .motion-piece--slide-left { animation:motionSlideLeft .9s var(--motion-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .motion-piece--float-right { animation:motionFloatRight .94s var(--motion-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .motion-piece--editor-rise { animation:motionEditorRise 1.04s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:center bottom; }
.slide.is-active .motion-piece--card-up { animation:motionCardUp .82s var(--motion-delay) both cubic-bezier(.2,.85,.2,1); transform-origin:center bottom; }
.slide.is-active .motion-piece--step-in { animation:motionStepIn .76s var(--motion-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .motion-piece--focus { animation:motionFocus 1.08s var(--motion-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .motion-piece--wipe-down { animation:motionWipeDown .9s var(--motion-delay) both cubic-bezier(.25,.8,.25,1); }
.slide.is-active .motion-piece--wipe-up { animation:motionWipeUp .9s var(--motion-delay) both cubic-bezier(.25,.8,.25,1); }
.slide.is-active .motion-piece--spread-left { animation:motionSpreadLeft .94s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:right center; }
.slide.is-active .motion-piece--spread-right { animation:motionSpreadRight .94s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:left center; }
.slide.is-active .motion-piece--fan-in { animation:motionFanIn .96s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:left bottom; }
.slide.is-active .motion-piece--scale-origin-left { animation:motionScaleLeft .92s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:left center; }
.slide.is-active .motion-piece--scale-origin-right { animation:motionScaleRight .92s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:right center; }
.slide.is-active .motion-piece--cinematic { animation:motionCinematic 1.24s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:58% 52%; }
.slide.is-active .motion-piece--phone { animation:motionPhone .88s var(--motion-delay) both cubic-bezier(.16,1,.3,1); transform-origin:center bottom; }
.slide.is-active .motion-piece--phone.motion-piece--idle { animation:motionPhone .88s var(--motion-delay) both cubic-bezier(.16,1,.3,1),motionPhoneFloat 5.2s calc(var(--motion-delay) + 1s) infinite ease-in-out; }
.slide.is-active .motion-piece--phone-hero { animation:motionPhoneHero 1.08s var(--motion-delay) both cubic-bezier(.16,1,.3,1),motionPhoneFloat 5.8s calc(var(--motion-delay) + 1.16s) infinite ease-in-out; transform-origin:58% bottom; }

@keyframes motionFade { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:none; } }
@keyframes motionRise { from { opacity:0; transform:translateY(38px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionPop { 0% { opacity:0; transform:scale(.84); filter:blur(7px); } 68% { opacity:1; transform:scale(1.018); filter:none; } 100% { opacity:1; transform:none; } }
@keyframes motionPortrait { from { opacity:0; transform:translate(-22px,34px) rotate(-2.4deg) scale(.92); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionRevealLeft { from { opacity:.08; clip-path:inset(0 100% 0 0); transform:translateX(-14px); } to { opacity:1; clip-path:inset(0); transform:none; } }
@keyframes motionRevealRight { from { opacity:.08; clip-path:inset(0 0 0 100%); transform:translateX(18px); } to { opacity:1; clip-path:inset(0); transform:none; } }
@keyframes motionTiltLeft { from { opacity:0; transform:translate(-36px,28px) rotate(-3deg) scale(.94); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionTiltRight { from { opacity:0; transform:translate(36px,28px) rotate(3deg) scale(.94); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionDrop { from { opacity:0; transform:translateY(-42px) scale(.96); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionSlideLeft { from { opacity:0; transform:translateX(-58px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionFloatRight { from { opacity:0; transform:translate(54px,18px) scale(.97); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionEditorRise { from { opacity:0; transform:translateY(78px) scale(.965); clip-path:inset(14% 0 0 0 round 24px); filter:blur(4px); } to { opacity:1; transform:none; clip-path:inset(0 round 0); filter:none; } }
@keyframes motionCardUp { 0% { opacity:0; transform:translateY(52px) scale(.94); filter:blur(5px); } 72% { opacity:1; transform:translateY(-4px) scale(1.006); filter:none; } 100% { opacity:1; transform:none; } }
@keyframes motionStepIn { from { opacity:0; transform:translateX(-42px); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes motionFocus { from { opacity:0; transform:scale(1.045); filter:blur(13px) brightness(.88); } to { opacity:1; transform:scale(1); filter:none; } }
@keyframes motionWipeDown { from { opacity:.1; clip-path:inset(0 0 100% 0); transform:translateY(-10px); } to { opacity:1; clip-path:inset(0); transform:none; } }
@keyframes motionWipeUp { from { opacity:.1; clip-path:inset(100% 0 0 0); transform:translateY(18px); } to { opacity:1; clip-path:inset(0); transform:none; } }
@keyframes motionSpreadLeft { from { opacity:0; transform:translateX(-48px) scale(.96); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes motionSpreadRight { from { opacity:0; transform:translateX(48px) scale(.96); clip-path:inset(0 0 0 100%); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes motionFanIn { from { opacity:0; transform:translateX(-78px) rotate(-2.6deg) scale(.95); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionScaleLeft { from { opacity:0; transform:perspective(900px) rotateY(-7deg) scale(.95); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionScaleRight { from { opacity:0; transform:perspective(900px) rotateY(7deg) scale(.95); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionCinematic { from { opacity:0; transform:scale(1.085) translateY(16px); filter:blur(11px) brightness(.75); } to { opacity:1; transform:scale(1); filter:none; } }
@keyframes motionPhone { 0% { opacity:0; transform:translateY(76px) rotate(.8deg) scale(.92); filter:blur(7px); } 74% { opacity:1; transform:translateY(-5px) rotate(-.2deg) scale(1.006); filter:none; } 100% { opacity:1; transform:none; } }
@keyframes motionPhoneHero { from { opacity:0; transform:translate(46px,70px) rotate(4deg) scale(.9); filter:blur(9px); } to { opacity:1; transform:none; filter:none; } }
@keyframes motionPhoneFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* Figma node layers: exported content nodes stay independent so each page can animate by hierarchy. */
.node-layer-host { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; }
.node-layer-scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; isolation:isolate; visibility:visible !important; }
.node-layer { position:absolute; display:block; max-width:none; object-fit:fill; opacity:0; pointer-events:none; will-change:transform,opacity,filter,clip-path; }
.node-layer.rebuild-slice--zoom { pointer-events:auto; cursor:zoom-in; transition:filter .24s ease; }
.node-layer.rebuild-slice--zoom:hover { filter:brightness(1.035) saturate(1.025); }
.figma-header-new { display:flex; align-items:center; justify-content:space-between; color:#606266; font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif; font-size:16px; font-weight:600; line-height:24px; white-space:nowrap; }
.figma-header-new__chapter,.figma-header-new__part { display:flex; align-items:center; }
.figma-header-new__chapter { gap:8px; }
.figma-header-new__chapter i { display:block; flex:none; width:5px; height:5px; border-radius:50%; background:currentColor; font-size:0; }
.figma-header-new__part { gap:8px; }
.figma-header-new__part b { font:inherit; }

.slide.is-active .node-layer--fade { animation:nodeFade .58s var(--node-delay) both ease-out; }
.slide.is-active .node-layer--rise { animation:nodeRise .74s var(--node-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .node-layer--portrait { animation:nodePortrait .9s var(--node-delay) both cubic-bezier(.16,1,.3,1); transform-origin:44% 58%; }
.slide.is-active .node-layer--reveal-left { animation:nodeRevealLeft .78s var(--node-delay) both cubic-bezier(.22,.8,.22,1); }
.slide.is-active .node-layer--reveal-right { animation:nodeRevealRight .78s var(--node-delay) both cubic-bezier(.22,.8,.22,1); }
.slide.is-active .node-layer--reveal-down { animation:nodeRevealDown .65s var(--node-delay) both cubic-bezier(.22,.8,.22,1); }
.slide.is-active .node-layer--wipe-down { animation:nodeWipeDown .72s var(--node-delay) both cubic-bezier(.22,.8,.22,1); }
.slide.is-active .node-layer--pop { animation:nodePop .66s var(--node-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .node-layer--card { animation:nodeCard .76s var(--node-delay) both cubic-bezier(.16,1,.3,1); transform-origin:center bottom; }
.slide.is-active .node-layer--card-left { animation:nodeCardLeft .84s var(--node-delay) both cubic-bezier(.16,1,.3,1); transform-origin:right center; }
.slide.is-active .node-layer--card-right { animation:nodeCardRight .84s var(--node-delay) both cubic-bezier(.16,1,.3,1); transform-origin:left center; }
.slide.is-active .node-layer--step { animation:nodeStep .7s var(--node-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .node-layer--callout { animation:nodeCallout .68s var(--node-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .node-layer--focus { animation:nodeFocus .96s var(--node-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .node-layer--cinematic { animation:nodeCinematic 1.08s var(--node-delay) both cubic-bezier(.16,1,.3,1); }
.slide.is-active .node-layer--phone { animation:nodePhone .8s var(--node-delay) both cubic-bezier(.16,1,.3,1); transform-origin:center bottom; }
.slide.is-active .node-layer--phone-hero { animation:nodePhoneHero .96s var(--node-delay) both cubic-bezier(.16,1,.3,1); transform-origin:center bottom; }
.slide.is-leaving-left .node-layer,.slide.is-leaving-right .node-layer { opacity:1; transform:none; filter:none; clip-path:inset(0); }

@keyframes nodeFade { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:none; } }
@keyframes nodeRise { from { opacity:0; transform:translateY(28px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodePortrait { from { opacity:0; transform:translate(-22px,36px) scale(.94) rotate(-1.5deg); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodeRevealLeft { from { opacity:.05; transform:translateX(-24px); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes nodeRevealRight { from { opacity:.05; transform:translateX(24px); clip-path:inset(0 0 0 100%); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes nodeRevealDown { from { opacity:.05; clip-path:inset(0 0 100% 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes nodeWipeDown { from { opacity:.1; transform:translateY(-12px); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes nodePop { 0% { opacity:0; transform:translateY(18px) scale(.88); } 74% { opacity:1; transform:translateY(-3px) scale(1.015); } 100% { opacity:1; transform:none; } }
@keyframes nodeCard { from { opacity:0; transform:translateY(48px) scale(.96); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodeCardLeft { from { opacity:0; transform:translateX(-48px) scale(.965); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodeCardRight { from { opacity:0; transform:translateX(48px) scale(.965); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodeStep { from { opacity:0; transform:translateX(-34px); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes nodeCallout { from { opacity:0; transform:translateY(-14px) scale(.96); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodeFocus { from { opacity:0; transform:scale(1.035); filter:blur(10px) brightness(.88); } to { opacity:1; transform:scale(1); filter:none; } }
@keyframes nodeCinematic { from { opacity:0; transform:scale(1.07) translateY(14px); filter:blur(10px) brightness(.78); } to { opacity:1; transform:none; filter:none; } }
@keyframes nodePhone { 0% { opacity:0; transform:translateY(64px) scale(.92); filter:blur(6px); } 76% { opacity:1; transform:translateY(-4px) scale(1.006); filter:none; } 100% { opacity:1; transform:none; } }
@keyframes nodePhoneHero { from { opacity:0; transform:translate(40px,58px) rotate(3deg) scale(.91); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }

/* Figma tail frame 2259:590. */
.canvas--tail { color:#17181a; background:linear-gradient(180deg,#fcfdff 0%,#f4f5f7 100%); }
.canvas--tail::after { display:none; }
.tail-page { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; }
.tail-title { position:absolute; left:676px; top:480px; width:569px; height:120px; margin:0; color:transparent; background:linear-gradient(90deg,#315cf5 0%,#a855e6 100%); -webkit-background-clip:text; background-clip:text; font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif; font-size:120px; font-weight:700; line-height:120px; letter-spacing:12px; white-space:nowrap; opacity:0; }
.slide.is-active .tail-title { animation:tailThanksIn 1s .12s both cubic-bezier(.16,1,.3,1); }
@keyframes tailThanksIn { from { opacity:0; transform:translateY(26px) scale(.96); filter:blur(10px); letter-spacing:18px; } to { opacity:1; transform:none; filter:none; letter-spacing:12px; } }

@media (prefers-reduced-motion:reduce) {
  .node-layer { animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
}

.special-page { position:absolute; inset:0; overflow:hidden; background:#f7f8fb; color:#111318; }
.cover-page { isolation:isolate; background:linear-gradient(145deg,#f9fbff 0%,#eef2f8 52%,#faf7ff 100%); }
.cover-static { position:absolute; inset:0; display:block; width:1920px; height:1080px; max-width:none; object-fit:fill; pointer-events:none; }
.cover-static--background { z-index:0; opacity:1; }
.cover-static--center { z-index:20; opacity:0; }
.slide.is-active .cover-static--center { animation:coverCenterIn .82s .06s both cubic-bezier(.16,1,.3,1); }
@keyframes coverCenterIn { from { opacity:0; transform:translateY(16px); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
.cover-page .cover-orb,.cover-page .cover-grid { display:none; }
.cover-page .cover-year,.cover-page .cover-title,.cover-page .cover-search,.cover-page .cover-sub { opacity:0 !important; pointer-events:none; animation:none !important; }
.cover-orb { position:absolute; border-radius:50%; filter:blur(2px); }
.cover-orb--a { width:1160px; height:920px; left:-410px; top:230px; background:radial-gradient(circle at 65% 35%,rgba(49,92,245,.24),rgba(143,90,225,.11) 45%,transparent 70%); --layer-delay:.04s; }
.cover-orb--b { width:1020px; height:850px; right:-250px; top:-260px; background:radial-gradient(circle at 40% 62%,rgba(168,85,230,.22),rgba(70,146,255,.1) 48%,transparent 72%); --layer-delay:.08s; }
.cover-grid,.cross-dots { position:absolute; width:480px; height:480px; opacity:.18; background-image:radial-gradient(#657087 2px,transparent 2px); background-size:32px 32px; --layer-delay:.12s; }
.cover-grid { left:412px; top:254px; }
.cover-year { position:absolute; z-index:20; left:0; top:240px; width:100%; margin:0; text-align:center; font-size:80px; line-height:1; font-weight:800; color:transparent; background:linear-gradient(90deg,#2754f2,#a34de5); background-clip:text; --layer-delay:.08s; }
.cover-title { position:absolute; z-index:20; left:377px; top:330px; width:1167px; display:flex; justify-content:center; gap:48px; font-size:120px; line-height:1.1; font-weight:650; letter-spacing:-.045em; --layer-delay:.16s; }
.cover-key { display:inline-grid; place-items:center; width:104px; height:104px; margin:0 4px; border-radius:22px; background:#fff; box-shadow:0 18px 40px rgba(46,52,66,.18); transform:rotate(8deg); font-size:78px; vertical-align:12px; }
.cover-search { position:absolute; z-index:20; left:680px; top:524px; width:560px; height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 24px; border:2px solid rgba(255,255,255,.8); border-radius:200px; background:rgba(255,255,255,.82); box-shadow:0 22px 38px rgba(75,80,95,.15); backdrop-filter:blur(20px); font-size:24px; --layer-delay:.28s; }
.cover-search-icon { width:22px; height:22px; border:3px solid #1c2028; border-radius:50%; position:relative; }
.cover-search-icon::after { content:""; position:absolute; right:-7px; bottom:-4px; width:9px; height:3px; border-radius:2px; background:#1c2028; transform:rotate(45deg); }
.cover-go { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#3b82f6; color:#fff; box-shadow:0 8px 16px rgba(49,92,245,.25); }
.cover-sub { position:absolute; z-index:20; left:0; top:636px; width:100%; margin:0; text-align:center; font-size:24px; line-height:40px; color:rgba(0,0,0,.6); --layer-delay:.38s; }
.cover-sticker { position:absolute; z-index:14; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(33,42,68,.16)); }
.cst-a { left:1766px; top:932px; width:124px; height:124px; --layer-delay:1.42s; }.cst-b { left:1775px; top:363px; width:209px; height:209px; --layer-delay:.80s; }
.cst-c { left:249px; top:710px; width:137px; height:137px; --layer-delay:1.02s; }.cst-d { left:258px; top:308px; width:119px; height:115px; --layer-delay:.60s; }
.cst-e { left:767px; top:333px; width:38px; height:36px; --layer-delay:.52s; }.cst-f { left:1437px; top:333px; width:38px; height:36px; --layer-delay:.56s; }

.cover-scene { position:absolute; z-index:5; display:block; max-width:none; object-fit:contain; pointer-events:none; opacity:1; transform-origin:center; }
.cover-scene--upper-left { left:0; top:488px; width:243px; height:268px; --float-distance:9px; --float-duration:5.4s; --float-phase:-1.2s; }
.cover-scene--left-rear { left:-6px; top:688px; width:501px; height:404px; --float-distance:7px; --float-duration:6.8s; --float-phase:-3.8s; }
.cover-scene--left-front { left:0; top:674px; width:393px; height:391px; --float-distance:12px; --float-duration:6.1s; --float-phase:-2.4s; }
.cover-scene--bottom-left { left:428px; top:896px; width:656px; height:184px; --float-distance:7px; --float-duration:7.2s; --float-phase:-4.6s; }
.cover-scene--bottom-center { left:840px; top:945px; width:644px; height:135px; --float-distance:10px; --float-duration:6.6s; --float-phase:-.8s; }
.cover-scene--right-small { left:1639px; top:586px; width:281px; height:269px; --float-distance:11px; --float-duration:5.8s; --float-phase:-3.1s; }
.cover-scene--right-large { left:1548px; top:652px; width:372px; height:428px; --float-distance:8px; --float-duration:7.4s; --float-phase:-5.2s; }
.cover-scene--sparkle-left { z-index:12; left:504px; top:934px; width:109px; height:132px; --float-distance:13px; --float-duration:4.9s; --float-phase:-2.7s; }
.cover-scene--sparkle-right { z-index:12; left:1287px; top:941px; width:308px; height:139px; --float-distance:10px; --float-duration:5.2s; --float-phase:-1.6s; }
.cover-scene--message { z-index:13; left:1172px; top:955px; width:63px; height:84px; --float-distance:12px; --float-duration:4.7s; --float-phase:-3.5s; }
.slide.is-active .cover-scene { animation:coverFloat var(--float-duration) var(--float-phase) ease-in-out infinite; }
.cover-page .cover-sticker { opacity:1; translate:0 0; --float-distance:10px; --float-duration:5.6s; --float-phase:-2s; }
.cover-page .cst-a,.cover-page .cst-c { --float-duration:6.4s; --float-phase:-4.1s; }
.cover-page .cst-b,.cover-page .cst-d { --float-distance:13px; --float-duration:5.1s; --float-phase:-1.3s; }
.cover-page .cst-e,.cover-page .cst-f { --float-distance:7px; --float-duration:4.6s; --float-phase:-3.2s; }
.slide.is-active .cover-page .cover-sticker { animation:coverFloat var(--float-duration) var(--float-phase) ease-in-out infinite; }
@keyframes coverFloat { 0%,100% { transform:translateY(calc(0px - var(--float-distance))); } 50% { transform:translateY(var(--float-distance)); } }
.slide.is-leaving-left .cover-scene,.slide.is-leaving-right .cover-scene { opacity:1; }

.cross-page { background:linear-gradient(140deg,#fcfdff,#eef1f7); }
.cross-glow { position:absolute; inset:-200px; background:radial-gradient(circle at 72% 56%,rgba(74,101,226,.18),transparent 38%),radial-gradient(circle at 18% 78%,rgba(164,91,225,.14),transparent 34%); --layer-delay:.04s; }
.cross-dots { left:54px; top:96px; --layer-delay:.1s; }
.cross-part { position:absolute; left:48px; top:96px; display:flex; align-items:center; width:150px; height:92px; --layer-delay:.14s; }
.cross-part i { width:6px; height:88px; background:#315cf5; }
.cross-part div { display:flex; flex-direction:column; margin-left:32px; }.cross-part small { font-size:12px; font-weight:600; }.cross-part b { margin-top:-8px; font-size:72px; line-height:86px; }
.cross-title,.cross-and,.cross-gradient { position:absolute; margin:0; font-weight:800; white-space:nowrap; }
.cross-title { left:80px; top:280px; font-size:56px; line-height:72px; --layer-delay:.2s; }
.cross-and { left:80px; top:366px; font-size:56px; line-height:72px; --layer-delay:.26s; }
.cross-gradient { left:196px; top:360px; font-size:64px; line-height:78px; color:transparent; background:linear-gradient(90deg,#315cf5,#a855e6); background-clip:text; --layer-delay:.3s; }
.cross-copy { position:absolute; left:80px; top:478px; margin:0; font-size:24px; line-height:36px; --layer-delay:.38s; }
.cross-option { position:absolute; left:80px; top:662px; width:232px; height:80px; display:flex; align-items:center; gap:12px; padding:16px; border-radius:12px; background:#fff; box-shadow:0 18px 36px rgba(47,58,92,.1); font-size:20px; --layer-delay:.48s; }
.cross-option--two { left:352px; --layer-delay:.56s; }.cross-option em { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#315cf5; color:#fff; font-size:14px; font-style:normal; font-weight:700; }
.cross-visual { position:absolute; left:786px; top:9px; width:1600px; height:1332px; object-fit:cover; --layer-delay:.24s; }
.cross-kicker { position:absolute; left:80px; bottom:36px; font-size:12px; font-weight:700; letter-spacing:.1em; color:#7a808a; --layer-delay:.66s; }

.directory-button { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:#aeb2bb; font-size:12px; cursor:pointer; }
.directory-button:hover { background:rgba(255,255,255,.1); color:#fff; }
.drawer-scrim { position:fixed; inset:0; z-index:190; visibility:hidden; opacity:0; background:rgba(4,6,9,.48); backdrop-filter:blur(4px); transition:.35s ease; }
.drawer-scrim.is-open { visibility:visible; opacity:1; }
.page-drawer { position:fixed; z-index:200; top:0; right:0; width:min(440px,92vw); height:100%; padding:28px 20px 24px; color:#f2f4f7; background:rgba(16,18,23,.94); border-left:1px solid rgba(255,255,255,.1); box-shadow:-30px 0 80px rgba(0,0,0,.38); backdrop-filter:blur(28px); transform:translateX(102%); transition:transform .48s var(--ease); }
.page-drawer.is-open { transform:none; }
.page-drawer header { display:flex; align-items:flex-start; justify-content:space-between; padding:0 8px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.page-drawer header small { color:#777e8b; font-size:10px; letter-spacing:.12em; }.page-drawer h2 { margin:6px 0 0; font-size:28px; }
.page-drawer header button { width:38px; height:38px; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:transparent; font-size:25px; font-weight:200; cursor:pointer; }
.page-drawer nav { height:calc(100% - 86px); overflow:auto; padding:6px 0 30px; scrollbar-width:thin; scrollbar-color:#3f4350 transparent; }
.page-drawer h3 { margin:24px 10px 8px; color:#7f8795; font-size:11px; letter-spacing:.09em; font-weight:600; text-transform:uppercase; }
.page-drawer nav button { width:100%; min-height:44px; display:grid; grid-template-columns:38px 1fr; align-items:center; padding:7px 10px; border:0; border-radius:10px; background:transparent; color:#aeb3bd; text-align:left; cursor:pointer; }
.page-drawer nav button:hover { background:rgba(255,255,255,.06); color:#fff; }.page-drawer nav button.is-current { background:linear-gradient(90deg,rgba(73,102,247,.22),rgba(168,85,230,.1)); color:#fff; }
.page-drawer nav button span { color:#666e7d; font-size:10px; letter-spacing:.08em; }.page-drawer nav button b { overflow:hidden; font-size:13px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }

@media (orientation:portrait) { .edge { display:none; } .deck-controls { opacity:.75; } .swipe-tip { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; } }