.mockup-theme{--m-text: #231f20;--m-text-muted: #6b6966;--m-bg: #fafaf9;--m-bg-card: #ffffff;--m-bg-surface: #f2f2f0;--m-bg-sidebar: #f8f8f8;--m-border: #e5e4e2;--m-bg-elevated: #fafaf9;--m-accent: #231f20;--m-accent-text: #ffffff;--m-shell-bg: #f5f5f5;--m-shell-border: #e5e4e2;--m-text-soft: rgba(61, 57, 55, .7);--m-text-faint: rgba(61, 57, 55, .4);--m-bg-surface-50: rgba(242, 242, 240, .5);--m-bg-surface-30: rgba(242, 242, 240, .3);--m-bg-hover: rgba(255, 255, 255, .5);--m-tint: rgba(35, 31, 32, .03);--m-border-subtle: rgba(35, 31, 32, .1);--m-border-faint: rgba(35, 31, 32, .05);--m-gradient-balance: linear-gradient( 135deg, #d8e4b9 0%, #d4e8f8 25%, #e0f0f0 50%, #f0e8e4 75%, #f8f0f4 100% )}.mockup-theme[data-theme=dark]{--m-text: #e8e6e3;--m-text-muted: #8a8682;--m-bg: #121110;--m-bg-card: #1a1917;--m-bg-surface: #252320;--m-bg-sidebar: #161514;--m-border: #2a2725;--m-bg-elevated: #1e1c1a;--m-accent: #e8e6e3;--m-accent-text: #121110;--m-shell-bg: #2a2725;--m-shell-border: #333333;--m-text-soft: rgba(160, 157, 154, .7);--m-text-faint: rgba(160, 157, 154, .4);--m-bg-surface-50: rgba(37, 35, 32, .5);--m-bg-surface-30: rgba(37, 35, 32, .3);--m-bg-hover: rgba(255, 255, 255, .06);--m-tint: rgba(232, 230, 227, .06);--m-border-subtle: rgba(232, 230, 227, .1);--m-border-faint: rgba(232, 230, 227, .05);--m-gradient-balance: linear-gradient( 135deg, #2a3522 0%, #1e2d3a 25%, #1e3030 50%, #2a2420 75%, #2a2028 100% )}@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter/Inter-Regular.woff2) format("woff2")}@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/inter/Inter-Medium.woff2) format("woff2")}@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/inter/Inter-SemiBold.woff2) format("woff2")}@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/inter/Inter-Bold.woff2) format("woff2")}@keyframes mockup-screen-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes mockup-screen-exit{0%{opacity:1}to{opacity:0}}@keyframes mockup-stagger-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.mockup-stagger-in{opacity:0;animation:mockup-stagger-in .3s cubic-bezier(0,0,.2,1) forwards;animation-delay:calc(var(--stagger-index, 0) * 60ms)}.mockup-screen-enter{animation:mockup-screen-enter .2s cubic-bezier(.4,0,.2,1) forwards}.mockup-screen-exit{animation:mockup-screen-exit .15s cubic-bezier(.4,0,.2,1) forwards}@media(prefers-reduced-motion:reduce){.mockup-stagger-in{opacity:1;animation:none}.mockup-screen-enter,.mockup-screen-exit{animation:none}.mockup-interactive{transition:none!important;transform:none!important}}.split-flap-board{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.split-flap-container{display:flex;justify-content:center;gap:3px}.flap-cell{position:relative;width:2rem;height:2.8rem;perspective:200px}.flap-top,.flap-bottom,.flap-flip-top,.flap-flip-bottom{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:var(--color-swoop-black);color:var(--color-swoop-sage);font-family:BDO Grotesk,SF Mono,Fira Code,monospace;font-size:1.5rem;font-weight:700;line-height:1;backface-visibility:hidden}.flap-top>span,.flap-bottom>span,.flap-flip-top>span,.flap-flip-bottom>span{position:absolute;left:0;width:100%;height:200%;display:flex;align-items:center;justify-content:center}.flap-top,.flap-flip-top{top:0;border-radius:6px 6px 0 0;border-bottom:1px solid rgba(255,255,255,.08)}.flap-top>span,.flap-flip-top>span{top:0}.flap-bottom,.flap-flip-bottom{bottom:0;border-radius:0 0 6px 6px;border-top:1px solid rgba(0,0,0,.3)}.flap-bottom>span,.flap-flip-bottom>span{top:-100%}.flap-top,.flap-bottom{z-index:1}.flap-flip-top{z-index:2;transform-origin:bottom center}.flap-flip-bottom{z-index:2;transform-origin:top center;transform:rotateX(90deg)}.flap-flip-top.flipping{animation:flipTopDown .3s ease-in forwards}.flap-flip-bottom.flipping{animation:flipBottomUp .3s ease-out .15s forwards}@keyframes flipTopDown{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flipBottomUp{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}:global(.dark) .flap-top,:global(.dark) .flap-bottom,:global(.dark) .flap-flip-top,:global(.dark) .flap-flip-bottom{background:#1a1a1a;border-color:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff0d}:global(.dark) .flap-top,:global(.dark) .flap-flip-top{border-bottom:1px solid rgba(255,255,255,.06)}:global(.dark) .flap-bottom,:global(.dark) .flap-flip-bottom{border-top:1px solid rgba(0,0,0,.5)}@media(min-width:768px){.split-flap-container{gap:6px}.flap-cell{width:3.75rem;height:5rem}.flap-top,.flap-bottom,.flap-flip-top,.flap-flip-bottom{font-size:3rem}.flap-top,.flap-flip-top{border-radius:8px 8px 0 0}.flap-bottom,.flap-flip-bottom{border-radius:0 0 8px 8px}}@media(max-width:379px){.split-flap-container{gap:2px}.flap-cell{width:1.6rem;height:2.3rem}.flap-top,.flap-bottom,.flap-flip-top,.flap-flip-bottom{font-size:1.2rem}}@media(prefers-reduced-motion:reduce){.flap-flip-top.flipping{animation-duration:.01s}.flap-flip-bottom.flipping{animation-duration:.01s;animation-delay:0s}}
