/* ---------- the film ---------- */
/* The film reuses styles.css for every product component. These rules place
   them on a fixed stage, and pin the values styles.css takes from the window
   (media queries, vw clamps), so the film looks the same at any size. */
.uf{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;color:var(--red);font-family:var(--sans);-webkit-user-select:none;user-select:none;line-height:1.35;font-size:15px}
.uf.uf-portrait{aspect-ratio:9/16}
.uf.uf-fill{width:100vw;height:100vh;height:100dvh;aspect-ratio:auto}
.uf-stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#000;contain:strict}
.uf-ocean,.uf-dissolve{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.uf-rig{position:absolute;left:0;top:0;transform-origin:0 0}
.uf-app{position:relative}
.uf-hud{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.uf-machine{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.uf-titles{position:absolute;inset:0;overflow:hidden}
.uf-cream{position:absolute;inset:0;background:var(--cream)}
.uf-flash{position:absolute;inset:0;background:var(--red);visibility:hidden}
.uf-stage button{cursor:default}

/* masks: a word or line that slides up into view. They clip with clip-path,
   which leaves baselines alone, so mixed sizes still sit on one line. */
.uf-m{display:inline-block;vertical-align:baseline;clip-path:inset(0);padding:.12em .1em .18em .03em;margin:-.12em -.1em -.18em -.03em}
.uf-mi{display:inline-block}
.uf-line{display:block;clip-path:inset(0);padding:0 .2em .16em 0;margin:0 -.2em -.16em 0}
.uf-line>.uf-mi{display:block}

/* the app, pinned to its desktop look */
.uf .top{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:40px;padding:14px 24px}
.uf .wordmark{order:0;font-size:22px;transform-origin:0 50%}
.uf .navwrap{display:flex}
.uf .nav{gap:22px;font-size:17px;margin:0;order:0}
.uf .search{order:0;flex:none;max-width:760px}
.uf .go{font-size:15px}
.uf-input{flex:1;min-width:0;position:relative;font-size:19px;letter-spacing:-0.02em;padding:6px 0;white-space:nowrap;height:37px;display:flex;align-items:center}
.uf-ph{position:absolute;left:0;top:6px;color:var(--red-soft)}
.uf-caret{display:inline-block;width:1.5px;height:22px;background:var(--red);margin-left:1px;visibility:hidden}
.uf .go.uf-press{background:var(--red);color:var(--cream)}
.uf .meta{padding:12px 24px 0}
.uf .meta .tag{visibility:hidden}
.uf .board{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:22px;row-gap:90px;padding:56px 24px 160px}
.uf .card{grid-column:var(--cs)/span var(--sp);margin-top:var(--mt);width:auto;justify-self:stretch;visibility:hidden}
.uf .s{--vh:200px;--qs:18px}
.uf .m{--vh:260px;--qs:21px}
.uf .l{--vh:360px;--qs:32px}
.uf .h{--vh:440px;--qs:46px}
.uf .card .body{position:relative}
.uf-skin{position:absolute;inset:0;background:var(--cream);padding:12px;display:flex;flex-direction:column;gap:10px;clip-path:inset(0% 0% 0% 0%)}
.uf-skin i{display:block;height:28px;width:78%;background:rgba(255,26,0,.14)}
.uf-skin i+i{height:64px;width:100%;background:rgba(255,26,0,.09)}
.uf-bt{position:relative;display:inline-block}
.uf-strike{position:absolute;left:-3px;right:-3px;top:54%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.uf .bl li.uf-line{padding:5px 0;margin:0;border-bottom:1px solid var(--red-soft)}

/* the bar, the sheet and the cursor, on the screen layer */
.uf .tray{position:absolute;left:24px;right:24px;bottom:14px;top:auto;display:flex;flex-wrap:nowrap;padding:12px 14px;visibility:hidden}
.uf .tray-text{font-size:15px;flex:1 1 auto}
.uf .tray-tools{width:auto;gap:18px}
.uf .tray-tools .scope{padding:10px 18px;font-size:15px;margin-left:0}
.uf .flash{opacity:0;transition:none}
.uf .sheet{position:absolute;left:0;top:0;right:0;bottom:auto;display:block;overflow:visible;padding:0;background:none;visibility:hidden}
.uf-scrim{position:absolute;left:0;top:0;right:0;height:100%;background:rgba(17,17,17,.55)}
.uf .doc{position:relative;margin:40px auto 0;width:720px}
.uf .md{padding:40px 40px 34px}
.uf .md h1{font-size:54px;min-height:1.96em}
.uf .mods,.uf .send{padding-left:40px;padding-right:40px}
.uf .mod{flex-direction:row;gap:16px}
.uf .mod input{transform-origin:50% 50%}
.uf .send{position:relative;min-height:116px}
.uf-sent{position:absolute;left:40px;right:40px;top:24px;visibility:hidden}
.uf .send{padding-top:24px;padding-bottom:40px}
.uf-cursor{position:absolute;left:0;top:0;width:30px;height:30px;visibility:hidden}
.uf-cursor svg{display:block;width:30px;height:30px;overflow:visible}
.uf-ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:2px solid var(--red);border-radius:50%;opacity:0}

/* machinery: lens names decoding in mono */
.uf-mono{position:absolute;left:0;top:0;white-space:nowrap;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1;color:var(--cream);background:#111;padding:.18em .32em;visibility:hidden}
.uf-mono.uf-red{background:var(--red);color:var(--cream)}

/* title cards */
.uf-title{position:absolute;left:0;top:0;white-space:nowrap;font-weight:600;letter-spacing:-0.055em;line-height:.92;color:var(--red);visibility:hidden}
.uf-portrait .uf-title{white-space:normal}
.uf-big{font-size:1.7em;letter-spacing:-0.06em}
.uf-portrait .uf-big{font-size:1.45em}
.uf-fliptag{position:absolute;left:0;top:0;height:1.6em;font-size:28px;letter-spacing:.06em;text-transform:uppercase;perspective:600px;visibility:hidden}
.uf-fliptag span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;border:1.5px solid var(--red);padding:.25em .5em;backface-visibility:hidden;transform-origin:50% 50% -.6em}
.uf-fliptag span::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--red)}
.uf-fliptag span+span{background:var(--red);color:var(--cream)}
.uf-fliptag span+span::before{background:var(--cream)}
.uf-end{position:absolute;left:0;top:0;visibility:hidden;color:var(--red)}
.uf-endmark{font-weight:700;letter-spacing:-0.05em;line-height:.9;white-space:nowrap}
.uf-endmark sup{font-size:.32em;font-weight:500;vertical-align:top;position:relative;top:.18em;margin-left:.04em}
.uf-endline{font-weight:500;letter-spacing:-0.035em;line-height:1;white-space:nowrap}
.uf-endrule{height:2px;background:var(--red);transform-origin:0 50%}
.uf-endfoot{display:flex;justify-content:space-between;align-items:center;font-size:26px;letter-spacing:.06em;text-transform:uppercase}
.uf-endfoot>.uf-m>.uf-mi{display:inline-flex;align-items:center;gap:10px}
.uf-endfoot>.uf-m:first-child>.uf-mi::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--red)}

.uf-logo{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden}
.uf-logo-in{color:var(--red)}
.uf-logo-in svg{display:block;width:100%;height:auto}

/* portrait recomposition */
.uf-portrait .top{grid-template-columns:auto 1fr;gap:24px}
.uf-portrait .navwrap{display:none}
/* the product's single column, as on a phone */
.uf-portrait .board{grid-template-columns:1fr;row-gap:44px}
.uf-portrait .card{grid-column:1;margin-top:0;width:var(--w1);justify-self:var(--j1)}
.uf-portrait .doc{width:680px}

/* the large play button, until the film has started */
.uf-play{position:absolute;left:50%;top:50%;z-index:3;width:clamp(64px,11%,112px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--red);cursor:pointer;display:grid;place-items:center;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.uf-portrait .uf-play{width:clamp(64px,20%,112px)}
.uf-play span{width:0;height:0;margin-left:9%;border-style:solid;border-width:clamp(11px,1.9vw,19px) 0 clamp(11px,1.9vw,19px) clamp(18px,3.1vw,31px);border-color:transparent transparent transparent var(--cream)}
.uf-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.uf-play:focus-visible{outline:none;box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--red)}
.uf.uf-started .uf-play{display:none}
.uf:not(.uf-started):has(.uf-play) .uf-ctl,.uf:not(.uf-started):has(.uf-play) .uf-pp{display:none}
/* play and pause, in the middle of the film: shown on hover, on focus and while paused */
.uf-pp{position:absolute;left:50%;top:50%;z-index:3;width:clamp(56px,9%,96px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--red);color:var(--cream);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s,transform .2s cubic-bezier(.2,.7,.2,1)}
.uf-portrait .uf-pp{width:clamp(56px,18%,96px)}
.uf-pp svg{width:38%;height:38%;fill:currentColor}
.uf-pp svg path[d^="M3 1.5v11"]{transform:translateX(8%);transform-origin:center}
.uf:hover .uf-pp,.uf.uf-paused .uf-pp,.uf-pp:focus-visible{opacity:1}
.uf-pp:hover{transform:translate(-50%,-50%) scale(1.06)}
.uf-pp:focus-visible{outline:none;box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--red)}
.uf.uf-record .uf-pp{display:none}

/* controls */
.uf-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.45));opacity:0;transition:opacity .25s;z-index:2}
.uf:hover .uf-ctl,.uf:focus-within .uf-ctl,.uf.uf-paused .uf-ctl,.uf.uf-dev .uf-ctl,.uf.uf-still .uf-ctl{opacity:1}
.uf-ctl button{width:34px;height:34px;display:grid;place-items:center;background:var(--cream);color:var(--red);flex:none;cursor:pointer}
.uf-ctl button:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.uf-ctl svg{width:14px;height:14px;fill:currentColor}
.uf-bar{flex:1;height:2px;background:rgba(237,229,223,.35);position:relative;overflow:hidden}
.uf-bar i{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.uf-count{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);min-width:3.5em;text-align:right}
.uf-dev-tools{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;background:rgba(0,0,0,.6);font:12px/1 ui-monospace,Menlo,monospace;color:var(--cream);z-index:2}
.uf-dev-tools button{background:var(--cream);color:var(--red);padding:5px 7px;cursor:pointer;font:inherit}
.uf-dev-tools input[type=range]{flex:1 1 260px;accent-color:var(--red)}
.uf.uf-record .uf-ctl,.uf.uf-record .uf-dev-tools{display:none}