/* Centered apps with synchronized screenshot transitions. */
:root{--depth-ease:cubic-bezier(.22,1,.36,1);--panel-duration:650ms}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header{height:88px;max-width:1536px;justify-content:space-between}
.header nav{margin-left:auto;align-items:center;justify-content:flex-end;gap:24px}
/* Compact split buttons echo the supplied reference at half its height. */
.download-link{display:inline-flex;align-items:stretch;gap:0;min-height:34px;border:1px solid #26442e;border-radius:5px;background:linear-gradient(180deg,#3e6143,#315137);color:#fffef7;padding:0;font:inherit;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;overflow:hidden;box-shadow:0 3px 8px #17382229,0 1px 2px #17382220,inset 0 1px 0 #ffffff17;transition:transform .25s var(--depth-ease),box-shadow .25s,background .25s}
.download-link:is(:hover,:focus-visible){text-decoration:none;background:linear-gradient(180deg,#496f4c,#395e3f);box-shadow:0 5px 12px #17382233,0 2px 3px #17382220,inset 0 1px 0 #ffffff26;transform:translateY(-1px)}
.download-link:focus-visible{outline:2px solid #173822;outline-offset:4px}
.hero[data-feature=appearance] .download-link:focus-visible{outline-color:#f0f6d6}
.download-link:active{transform:translateY(1px);box-shadow:0 1px 3px #17382233}
.download-label{display:flex;align-items:center;justify-content:center;padding:8px 13px;text-decoration:none}
.download-arrow{display:grid;place-items:center;flex:0 0 34px;width:34px;min-height:32px;overflow:hidden;background:#112d1a29;border-left:1px solid #17382220;text-decoration:none}
.download-arrow svg{display:block;width:18px;height:18px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
.download-link:is(:hover,:focus-visible) .download-arrow svg{animation:download-fly .65s cubic-bezier(.4,0,.2,1) both}
@keyframes download-fly{0%{transform:translateY(0);opacity:1}44%{transform:translateY(26px);opacity:0}45%{transform:translateY(-26px);opacity:0}100%{transform:translateY(0);opacity:1}}
.wordmark{filter:brightness(1.05);mix-blend-mode:multiply}
.hero[data-feature=appearance] .brand,.hero[data-feature=appearance] .footer-brand{background:none;border-radius:0;padding:0}
.hero[data-feature=appearance] .wordmark{filter:invert(1) contrast(1.14);mix-blend-mode:screen}

.hero-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "orbit";align-items:start;padding:12px clamp(20px,3vw,56px) 12px;max-width:1680px;margin:auto}
.hero-layout .hero-copy{grid-area:copy;position:relative;min-width:0;width:100%;max-width:1000px;justify-self:center;text-align:center;padding:14px 12px 0;animation:none}
.hero-layout .hero-copy h1{font-size:clamp(51.2px,5.2vw,76.8px);line-height:1.02;letter-spacing:-.057em;font-weight:400}
.hero-layout .hero-copy .eyebrow{margin-bottom:18px}
.hero-layout .hero-copy .eyebrow strong{font-weight:800}
.outlook{border-bottom:1px solid #17382260;padding-bottom:3px}
.hero[data-feature=appearance] .outlook{border-color:#d2e68c66}
.mobile-break{display:none}
.hero-layout .intro{max-width:680px;font-size:16px;line-height:1.65;margin:23px auto 0}
.hero-layout .hero-showcase-slot{grid-area:orbit;min-width:0;display:flex;align-items:center;justify-content:center;padding:56px 0 76px;isolation:isolate}
.hero-layout .showcase{position:relative;width:min(100%,calc(130% - 494px));max-width:1404px;padding:0;margin:0 auto!important}
.hero-layout .showcase .device-stage{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));align-items:end;gap:0;position:relative;width:100%;height:auto;min-height:0;padding:12px 0 16px;perspective:none;isolation:isolate}
.hero-layout .device-wrap{position:relative!important;min-width:0;top:auto;left:auto;right:auto;width:auto;transform:none;animation:none!important;transition:none;filter:none;opacity:1;pointer-events:auto;cursor:pointer;touch-action:manipulation;will-change:auto;outline:none}
.hero-layout .mac-wrap{grid-column:4 / -1;grid-row:1;align-self:end;z-index:1}
.hero-layout .phone-wrap{grid-column:1 / span 5;grid-row:1;align-self:end;justify-self:start;width:86%;z-index:2;margin:0}
.hero-layout .device-float{position:relative;animation:none!important;transform:none;will-change:auto}
.device-wrap:focus-visible .device-float{outline:3px solid currentColor;outline-offset:7px;border-radius:18px}
.hero-layout .device-wrap:before{content:'';position:absolute;left:8%;right:8%;bottom:-28px;height:26px;background:radial-gradient(ellipse,#173b2255,transparent 72%);filter:blur(14px);pointer-events:none;z-index:-1}
.hero-layout .mac-window{padding:0;border:0;background:transparent;border-radius:12px;overflow:hidden;transform:none;transition:none;box-shadow:0 25px 48px -22px #15391765,0 4px 14px #15391724}
.hero-layout .mac-window img{border-radius:inherit;aspect-ratio:25/16}
.hero-layout .mac-window .screen-out{inset:0;top:0;left:0;width:100%;height:100%}
.hero-layout .phone-screen{border-radius:clamp(14px,2.4vw,34px);border:1px solid #ffffff85;background:#f7f8f2;overflow:hidden;box-shadow:0 25px 45px -19px #123c2c70,0 4px 12px #25452930}
.scene-info{flex:1;min-width:0}.scene-info>p:first-child{font-family:var(--serif);font-size:20px;letter-spacing:-.02em;line-height:1.4}
.interaction-hint{font-family:var(--font);font-size:12px;line-height:1.5;opacity:.75;margin-top:5px}
.screen-out{animation:none!important}

/* Click-to-open inspection stays in the top layer until deliberately dismissed. */
html{scrollbar-gutter:stable}
html.app-viewer-open{overflow:hidden}
.hero-layout .device-wrap{transition:transform 650ms var(--depth-ease),opacity 450ms;cursor:zoom-in}
.hero-layout .showcase[data-focus] .device-wrap{pointer-events:none}
.hero-layout .showcase[data-focus=mac] .mac-wrap,.hero-layout .showcase[data-focus=iphone] .phone-wrap{opacity:0}
.hero-layout .showcase[data-focus=mac] .phone-wrap{transform:translate(-18px,14px) scale(.84);opacity:.1}
.hero-layout .showcase[data-focus=iphone] .mac-wrap{transform:translate(18px,14px) scale(.9);opacity:.1}
.app-viewer{cursor:pointer;position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:20px 28px 16px;border:0;background:transparent;color:#f5f7ef;overflow:hidden}
.app-viewer[open]{display:flex;flex-direction:column;gap:16px}
.app-viewer::backdrop{background:#09100dc7;-webkit-backdrop-filter:blur(16px) saturate(.75);backdrop-filter:blur(16px) saturate(.75);animation:viewer-backdrop-in 400ms ease both}
.app-viewer.is-closing::backdrop{animation:viewer-backdrop-out 420ms ease both}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;width:100%;max-width:1800px;margin:0 auto}
.viewer-toolbar h2{font-size:24px;line-height:1.2;letter-spacing:-.035em}
.viewer-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 17px;border:1px solid #ffffff2e;border-radius:100px;background:#f0f6ec12;color:#f5f7ef;box-shadow:0 4px 12px #00000026,inset 0 1px 0 #ffffff0d;font-size:14px;backdrop-filter:blur(12px);transition:background 250ms,box-shadow 250ms}
.viewer-back:hover{background:#ffffff24;box-shadow:0 5px 16px #00000038,inset 0 1px 0 #ffffff17}
.viewer-back svg{width:18px;height:18px}
.viewer-stage{flex:1;min-height:0;width:100%;overflow:auto;overscroll-behavior:contain;padding:8px 4px 24px;scrollbar-width:thin;scrollbar-color:#dce5dc66 transparent}
.viewer-image-button{position:relative;display:block;width:min(1800px,calc(100vw - 80px));padding:0;margin:0 auto;border:0;border-radius:12px;background:none;line-height:0;cursor:pointer;touch-action:pan-x pan-y pinch-zoom}
.viewer-image{display:block;width:100%;height:auto;max-width:none;border-radius:12px;transform-origin:top left;box-shadow:0 24px 64px -20px #00000080,0 4px 20px #00000038}
.viewer-image-button .screen-out{inset:0;width:100%;height:auto;border-radius:inherit}
.app-viewer[data-platform=iphone] .viewer-image-button{width:min(420px,calc(100vw - 56px),max(280px,calc((100dvh - 170px)*.46)));border-radius:30px}
.app-viewer[data-platform=iphone] .viewer-image{border-radius:30px}
.viewer-controls{display:flex;align-items:center;justify-content:center;gap:18px;flex-shrink:0;min-height:50px}
.viewer-step{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #ffffff2e;border-radius:50%;background:#f0f6ec12;box-shadow:0 3px 9px #00000026,inset 0 1px 0 #ffffff0d;backdrop-filter:blur(12px);transition:background 250ms}
.viewer-step:hover{background:#ffffff24}
.viewer-step svg{width:20px;height:20px}
.viewer-caption{min-width:0;text-align:center}
#viewer-caption{font-size:14px;line-height:1.5}
#viewer-hint{font-size:12px;line-height:1.5;color:#c5cec5;margin-top:2px}
@keyframes viewer-backdrop-in{from{background:#09100d00;backdrop-filter:blur(0) saturate(1)}to{background:#09100dc7;backdrop-filter:blur(16px) saturate(.75)}}
@keyframes viewer-backdrop-out{from{background:#09100dc7;backdrop-filter:blur(16px) saturate(.75)}to{background:#09100d00;backdrop-filter:blur(0) saturate(1)}}

.privacy-main{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:clamp(30px,6vw,90px);align-items:center}
.privacy-content{min-width:0}
.privacy-copy{padding-top:26px;max-width:560px}
.privacy-copy>p{max-width:32ch;font-size:clamp(19px,1.65vw,23px);line-height:1.55;letter-spacing:-.015em;color:#e5cfef;text-wrap:pretty}
.privacy-promise{font-weight:500;color:#fff7ff}
.privacy-copy>p+p{margin-top:15px}
.privacy-art{position:relative;width:min(100%,370px);aspect-ratio:1;justify-self:center;border:0;background:none;padding:0;color:inherit;user-select:none;touch-action:manipulation;border-radius:36px}
.privacy-art img{position:absolute;display:block;height:auto;pointer-events:none;filter:drop-shadow(0 14px 13px #21133238);transition:transform 850ms var(--depth-ease),filter 850ms var(--depth-ease)}
.privacy-calendar{width:78%;top:-2%;right:-3%;transform:rotate(9deg)}
.privacy-envelope{width:84%;left:-5%;bottom:-1%;transform:rotate(-9deg)}
.privacy-art:is([aria-pressed=true],:focus-visible) .privacy-calendar{transform:translate(7%,-7%) rotate(15deg);filter:drop-shadow(0 20px 18px #21133245)}
.privacy-art:is([aria-pressed=true],:focus-visible) .privacy-envelope{transform:translate(-7%,7%) rotate(-15deg);filter:drop-shadow(0 20px 18px #21133245)}
@media(hover:hover) and (pointer:fine){
 .privacy-art:hover .privacy-calendar{transform:translate(7%,-7%) rotate(15deg);filter:drop-shadow(0 20px 18px #21133245)}
 .privacy-art:hover .privacy-envelope{transform:translate(-7%,7%) rotate(-15deg);filter:drop-shadow(0 20px 18px #21133245)}
}
.mascot-button .hello{top:0;right:-16px;padding:13px 21px 15px;border:1px solid #24462b20;border-radius:23px 25px 24px 9px;background:#fffef5;color:#21472d;box-shadow:0 7px 18px #5260241a,inset 0 1px 0 #ffffff;font-size:25px;line-height:1.1;white-space:nowrap;transform-origin:20% 100%;transform:translateY(7px) rotate(4deg) scale(.86);opacity:0;pointer-events:none;transition:transform 500ms var(--depth-ease),opacity 220ms}
.mascot-button .hello:after{content:'';position:absolute;left:16px;bottom:-7px;width:13px;height:13px;background:#fffef5;border-right:1px solid #24462b20;border-bottom:1px solid #24462b20;transform:skewY(-18deg) rotate(45deg);border-radius:0 0 4px 0}
.mascot-button:is(:hover,:focus-visible,.wiggle) .hello{opacity:1;transform:translateY(-4px) rotate(4deg) scale(1)}
.mascot-button:focus-visible img{transform:rotate(-9deg) translateY(-6px)}
.footer-actions{gap:16px}
.footer-subline{font-size:16px;line-height:1.6;margin-top:18px;max-width:410px}
.footer-bottom .made-in{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.made-in svg{width:22px;height:22px;stroke-width:1.5}
.footer-bottom .back-top:hover{text-decoration:none}
.back-top:is(:hover,:focus-visible) .back-label{text-decoration:underline;text-underline-offset:5px}
.download-dialog{position:fixed;max-width:430px;width:calc(100% - 40px);border:1px solid #d5ddc4;border-radius:22px;padding:42px 32px 28px;background:#fffef7;color:#173822;box-shadow:0 30px 100px #142e3440}
.download-dialog::backdrop{background:#18302355;backdrop-filter:blur(6px)}
.download-dialog .eyebrow{font-size:10px;margin-bottom:16px;max-width:280px}
.download-dialog h2{font-size:40px;margin-bottom:18px}
.download-dialog>p:not(.eyebrow){font-size:16px;line-height:1.6;max-width:315px}
.dialog-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:transparent;font-size:25px}
.dialog-return{margin-top:25px;border:0;border-radius:24px;padding:12px 20px;background:#1e402c;color:#f9fce8;font-size:14px}

/* Slow background glyphs stay behind the page and never intercept the pointer. */
.ambient-icons{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none;color:#355425;mask-image:linear-gradient(90deg,#000 0%,#000 16%,#0004 35%,#0004 65%,#000 86%,#000 100%)}
.ambient-icon{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);opacity:0;animation:icon-drift var(--duration) linear infinite;animation-delay:var(--delay);will-change:transform}
.ambient-icon svg{display:block;width:100%;height:100%;stroke-width:1.5}
.hero[data-feature=appearance] .ambient-icons{color:#e2edc4}
.hero[data-motion=paused] .ambient-icon{animation-play-state:paused}
@keyframes icon-drift{0%{transform:translate3d(0,75px,0) rotate(-20deg);opacity:0}15%,80%{opacity:.13}100%{transform:translate3d(var(--drift-x),-150px,0) rotate(55deg);opacity:0}}
@media(max-width:1100px){
 .hero-layout{padding:0 20px 10px}
 .hero-layout .hero-copy{max-width:1000px;padding:22px 0 0}
 .hero-layout .hero-copy h1{font-size:clamp(44.8px,7.2vw,67.2px)}
 .hero-layout .hero-showcase-slot{padding:44px 0 64px}
 .hero-layout .showcase{position:relative;width:calc(100% - 88px);max-width:1040px}
}
@media(max-width:720px){
 .ambient-icon:nth-child(n+17){display:none}
 .app-viewer{padding:14px 12px 12px}.app-viewer[open]{gap:10px}
 .viewer-toolbar{gap:12px}.viewer-toolbar h2{font-size:20px}.viewer-back{font-size:12px;padding:10px 12px;gap:7px}
 .viewer-image-button{width:calc(100vw - 40px)}
 .viewer-controls{gap:10px}#viewer-caption{font-size:13px}#viewer-hint{font-size:11px}
 .header{height:auto;min-height:92px;padding:12px 20px;gap:16px}.header nav{margin:0;gap:9px 12px;flex-wrap:wrap;justify-content:flex-end}
 .header .download-link{font-size:11px}.header .download-label{padding:8px 10px}.header .download-arrow{width:32px;flex-basis:32px}
 .hero-layout .hero-copy h1{font-size:clamp(36.8px,9.28vw,60.8px)}
 .hero-layout .intro{font-size:14px;max-width:340px;margin-top:20px}
 .mobile-break{display:block}
 .hero-layout .showcase .device-stage{padding:12px 0 16px}
 .hero-layout .phone-wrap{grid-column:1 / span 6;width:85%;margin:0}
 .hero-layout .mac-window{border-radius:8px}
 .hero-layout .showcase-bar{gap:14px;padding-top:12px}
 .scene-info>p:first-child{font-size:17px}.interaction-hint{font-size:11px}
 .privacy-main{grid-template-columns:minmax(0,1fr) 160px;grid-template-areas:"title art" "copy copy";gap:24px 14px}
 .privacy-content{display:contents}.privacy-title{grid-area:title}.privacy-copy{grid-area:copy;padding-top:0}
 .privacy-art{grid-area:art;width:160px;align-self:center}
 .privacy h2{font-size:clamp(35px,6.8vw,49px)}
 .footer-actions .download-link{font-size:12px}.footer-subline{font-size:14px;max-width:225px;margin-top:15px}.footer-top h2{max-width:265px}
 .mascot-button .hello{top:-8px;right:0;padding:10px 16px 12px;border-radius:19px 21px 20px 8px;font-size:21px}
}
@media(max-width:580px){
 .hero-layout .showcase-bar{align-items:flex-start;flex-direction:column;gap:5px}
 .scene-info>p:first-child{font-family:var(--font);font-size:14px;letter-spacing:0}
}
@media(max-width:480px){
 .privacy-main{grid-template-columns:1fr;grid-template-areas:"title" "art" "copy";gap:20px}
 .privacy h2{font-size:clamp(39px,10.6vw,49px)}
 .privacy-art{width:230px;margin:0 auto;aspect-ratio:1.15}
}
@media(max-width:420px){.header nav{flex-direction:column;align-items:flex-end;gap:8px}.header{min-height:122px}}
@media(pointer:coarse){.download-link{min-height:44px}}
@media(prefers-reduced-motion:reduce){
 .ambient-icons{display:none}
 .download-link{transition:none!important}.download-link:is(:hover,:focus-visible,:active){transform:none}.download-link:is(:hover,:focus-visible) .download-arrow svg{animation:none;transform:none}
 .privacy-art img,.mascot-button .hello{transition:none!important}
 .hero-layout .device-wrap{transition:none!important}
 .screen-out{animation-duration:.01ms!important}
}

/* Navigation sits outside the app edges without adding a controls row. */
.feature-carousel{position:absolute;inset:0;z-index:4;pointer-events:none}
.feature-carousel .feature-step{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto}
#feature-previous{left:-54px}
#feature-next{right:-54px}
.feature-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;opacity:.5;transition:opacity .2s;touch-action:manipulation}
.feature-step svg{width:21px;height:21px}
.feature-step:is(:hover,:focus-visible,:active){opacity:1}
@media(prefers-reduced-motion:reduce){.hero,.hero:before{transition:none!important}.feature-step{transition:none}}

/* The longer promise stays airy; the second line keeps its original emphasis. */
.hero-layout .hero-copy{max-width:1400px}
.hero-layout .hero-promise{display:inline-block;font-size:clamp(22.4px,3.04vw,46.4px);line-height:1.16;letter-spacing:-.045em;text-wrap:balance}
.hero-layout .hero-copy h1 em{font-size:.75em;margin-top:6.4px;transition:color 900ms ease}
.hero,.hero:before{transition-duration:900ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}
@media(max-width:720px){.hero-layout .hero-promise{font-size:clamp(22.4px,5.44vw,33.6px)}}

.download-short{display:none}
.bloated-word{display:inline-block;margin:0 .12em .06em .06em;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:.95em;font-style:normal;font-weight:900;line-height:1.1;letter-spacing:.01em;-webkit-text-stroke:.035em currentColor;transform:scale(1.08,1.14);text-shadow:0 .065em .035em #28133344}
@media(max-width:720px){
 .header{height:72px;min-height:72px;padding:12px 20px}
 .header nav{display:none}
 .hero-layout .showcase{width:calc(100% - 56px)}
 #feature-previous{left:-42px}
 #feature-next{right:-42px}
 .footer-top{display:grid;grid-template-columns:minmax(0,1fr) 100px;column-gap:8px;row-gap:0;padding-bottom:24px}
 .footer-top>div{display:contents}
 .footer-top .eyebrow,.footer-top h2{grid-column:1}
 .footer-top .mascot-button{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;width:100px;margin:0}
 .footer-actions{grid-column:1 / -1;display:flex;flex-direction:row;gap:12px;width:100%;margin-top:24px;align-items:stretch}
 .footer-actions .download-link{flex:1;min-width:0;min-height:44px;font-size:14px}
 .footer-actions .download-label{flex:1;padding:10px 8px}
 .footer-actions .download-long{display:none}
 .footer-actions .download-short{display:inline}
}

@media(max-width:720px){.hero-layout .hero-showcase-slot{padding:32px 0 52px}}

/* Separate the phone's surface from the Mac without changing their scale. */
.hero-layout .showcase .device-stage{--phone-drop:clamp(18px,2.8vw,42px);padding-bottom:calc(16px + var(--phone-drop))}
.hero-layout .phone-wrap{top:var(--phone-drop)}
.hero-layout .phone-wrap:after{content:'';position:absolute;left:-8%;right:-8%;bottom:-15px;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,#10291b66 0%,#10291b30 36%,transparent 72%);filter:blur(5px);pointer-events:none;z-index:-1}

/* App previews and mascot downloads are separate, accessible buttons. */
.hero-layout .device-float{isolation:isolate}
.device-open{position:relative;z-index:1;display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;border-radius:12px;line-height:0}
.device-open:focus-visible{outline:3px solid currentColor;outline-offset:7px}
.device-open .mac-window,.device-open .phone-screen{display:block;position:relative}
.mossman-peek{--peek-side:1;position:absolute;right:0;bottom:clamp(12px,2.4vw,34px);width:clamp(46px,8vw,120px);z-index:0;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;user-select:none;line-height:0;transform-origin:50% 80%;animation:mossman-turn 16s ease-in-out infinite both;filter:drop-shadow(0 8px 7px #173b2233)}
.mossman-peek img{display:block;width:100%;height:auto;pointer-events:none}
.phone-mossman{--peek-side:-1;left:0;right:auto;width:clamp(42px,7vw,100px);animation-delay:8s}
.mossman-peek:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.hero[data-peek-motion=paused] .mossman-peek,.device-stage:has(.mossman-peek:focus-visible) .mossman-peek{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.device-stage:has(.mossman-peek:hover) .mossman-peek{animation-play-state:paused}}
/* Each six-second appearance ends fully hidden; the next starts two seconds later. */
@keyframes mossman-turn{
  0%{visibility:hidden;transform:translateX(0) rotate(0deg)}
  .01%{visibility:visible;transform:translateX(0) rotate(0deg)}
  9%,25%{visibility:visible;transform:translateX(calc(54% * var(--peek-side))) translateY(-3%) rotate(calc(12deg * var(--peek-side)))}
  30%{visibility:visible;transform:translateX(calc(48% * var(--peek-side))) rotate(calc(6deg * var(--peek-side)))}
  37.5%,100%{visibility:hidden;transform:translateX(0) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.mossman-peek{animation:none;visibility:visible;transform:translateX(calc(48% * var(--peek-side))) rotate(calc(10deg * var(--peek-side)))}}