/* Preview layer: keep KLYN's existing identity and interaction hooks. */
:root{--warm:#e6b18e;--mint:#aed1bb;--line:#ffffff1c}
body::before{background-image:linear-gradient(90deg,#101215f5,#101215e8 48%,#101215d1),url('site-assets/motion-20261001/3ds-max-background-20260930.webp')}
.site-header{background:#101215d9;backdrop-filter:blur(18px)}
.launch-notice{font-size:13px;border-radius:0;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 0;margin-top:0}
.hero{padding-top:70px;gap:46px 64px}.hero h1{font-weight:580}.hero .intro{font-size:17px}
.hero-comparison{width:100%;margin:0}.hero-comparison .compare{aspect-ratio:1}
.studio-stage,.studio-video-panel,.hero-comparison .compare{border-radius:16px}
.studio-tabs{top:-25px;gap:4px}.studio-tabs button{border:0!important;border-radius:8px 8px 0 0!important;background:transparent;color:#bac4cd;min-height:42px}
.studio-tabs button[aria-selected=true]{background:#243746;color:var(--blue)}
.studio-tabs:after{height:2px;box-shadow:none}
.demo-footnote{display:flex;gap:8px;align-items:center;margin-top:13px;font-size:12px;color:#b8c0c6}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block}
.hero .ai-providers{padding-top:4px}.ai-providers strong{font-size:22px}
.product-facts{font-size:12px;letter-spacing:.03em;padding-block:18px}
.warm{color:var(--warm)}.mint{color:var(--mint)}
.scene-gallery{padding-top:70px}.scene-gallery .section-head p{max-width:340px;font-size:15px}
.scene-grid{display:grid;grid-template-columns:1.15fr .65fr .65fr;grid-template-rows:250px 250px;gap:18px}
.scene-card{margin:0;position:relative;overflow:hidden;border-radius:14px;background:#202326;isolation:isolate}
.scene-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scene-card::after{content:'';position:absolute;inset:45% 0 0;pointer-events:none;background:linear-gradient(transparent,#090a0cbf)}
.scene-card figcaption{position:absolute;z-index:1;bottom:20px;left:22px;right:22px;display:flex;flex-direction:column;gap:3px;color:#fff;font-size:17px;font-weight:500}
.scene-card figcaption small{font-size:11px;font-weight:400;letter-spacing:.1em;color:#e4e4e1}
.scene-gather{grid-row:span 2}.scene-detail{grid-column:span 2}.scene-gather img{object-position:54% center}
.scene-gather figcaption{bottom:26px;left:26px;font-size:25px}
.scene-card:hover img{transform:scale(1.035)}
.compact-example{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:center;padding-block:70px}
.compact-example .section-head{display:block;margin:0}.compact-example h2{font-size:36px;max-width:340px}.compact-example .section-head p{margin:22px 0;max-width:325px;font-size:15px}
.compact-example .compare-group{margin:0;width:100%;max-width:680px}.compact-example .compare{border-radius:12px}
.compact-example .compare-controls{gap:8px;padding-top:8px}.compact-example .compare-controls label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.compact-example .compare-controls input{max-width:none;min-width:80px}.compact-example .compare-controls button{font-size:12px;padding:6px 10px}.compact-example .caption{font-size:11px;margin-bottom:0}
.compact-example .labels span{font-size:10px}.compact-example .divider:after{width:34px;height:34px;line-height:34px;font-size:18px}
#features .grid{gap:18px}#features .item{border:1px solid var(--line);border-radius:14px;padding:26px;background:#181e25b3}#features .item:nth-child(2){background:#24211ec9}#features .item:nth-child(2) small{color:var(--warm)}#features .item:nth-child(3){background:#1b2520c9}#features .item:nth-child(3) small{color:var(--mint)}#features .item h3{font-size:21px}#features .item p{font-size:15px}
.film-section .section-head h2{max-width:600px}.film-section .section-head p{max-width:330px;font-size:15px}.film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.film-card{min-width:0}.film-media{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#14181b}.film-media video{width:100%;aspect-ratio:1;object-fit:contain}
.film-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 2px}.film-caption h3{font-size:16px;font-weight:500}.film-caption span{font-size:11px;color:var(--mint);border:1px solid #aed1bb33;border-radius:20px;padding:3px 10px}
.film-media{position:relative}.film-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.film-start{position:absolute;inset:0;margin:auto;width:56px;height:56px;border:1px solid #ffffff80;border-radius:50%;background:#12191ba8;color:#fff;backdrop-filter:blur(8px);font-size:18px;padding-left:5px;transition:background .2s}.film-start:hover{background:#284737e6}.film-media.started .film-cover,.film-media.started .film-start{display:none}
.audience-card,.credit-panel{background:#171d22d9;border-radius:14px}
.closing-inner{background:#202a31;border-radius:18px}.section{border-color:#ffffff16}
.scene-card,.film-card{animation:none}
@media(min-width:801px){.hero{grid-template-columns:1fr 1.08fr}.hero h1{font-size:clamp(38px,4.25vw,59px)}}
@media(max-width:1050px) and (min-width:801px){.scene-grid{grid-template-rows:220px 220px}.compact-example{gap:30px}.compact-example h2{font-size:31px}.hero{gap:34px}.scene-card figcaption{left:16px;right:16px;font-size:15px}}
@media(max-width:800px){.hero{padding-top:34px;gap:26px}.hero-visual{width:100%}.scene-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px}.scene-gather{grid-row:auto;grid-column:span 2;aspect-ratio:1.15}.scene-quiet,.scene-daylight{aspect-ratio:.85}.scene-detail{aspect-ratio:1.8}.scene-card figcaption{left:14px;right:12px;bottom:14px;font-size:14px}.scene-gather figcaption{font-size:23px;left:22px}.compact-example{grid-template-columns:1fr;gap:25px;padding-block:52px}.compact-example h2{max-width:500px;font-size:32px}.compact-example .section-head p{max-width:500px;margin:16px 0}.film-grid{grid-template-columns:1fr}.film-media video{aspect-ratio:4/3}.film-caption h3{font-size:18px}.section-head p{max-width:500px!important}.demo-footnote{font-size:11px}.launch-notice{font-size:12px}.scene-gallery{padding-top:48px}}
@media(max-width:400px){.compact-example .compare-controls input{flex-basis:100%}.hero h1{font-size:37px}}
@media(prefers-reduced-motion:reduce){.scene-card img{transition:none}.scene-card:hover img{transform:none}}

/* Cinematic opening; the existing three-mode comparison follows below. */
.site-header{position:fixed;inset:0 0 auto;width:100%;background:linear-gradient(#1012158c,transparent);border-color:transparent;backdrop-filter:none;transition:background .35s,border-color .35s}
.past-intro .site-header{background:#101215e8;border-color:var(--line);backdrop-filter:blur(18px)}
.site-header:has(.nav.is-open){background:#101215f5;backdrop-filter:blur(18px)}
.site-header .nav a{color:#e9edf0}.cinema-intro{height:100svh;min-height:660px;position:relative;overflow:hidden;background:#141b1f;isolation:isolate}
.cinema-intro>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:56% center;z-index:-2}
.cinema-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#060c12a8, #080f1647 58%,#080e141f),linear-gradient(0deg,#0b111ad9,transparent 40%,#060b1250)}
.cinema-copy{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:60px;padding-bottom:90px;animation:cinema-enter 1s both}
.cinema-copy .eyebrow{font-size:12px;color:#c4e7ff;letter-spacing:.19em}.cinema-copy h1{font-size:clamp(58px,6.4vw,96px);line-height:1.01;letter-spacing:-.055em;font-weight:550;margin:24px 0}.cinema-copy h1 em{font-style:normal;color:#bce3ff}.cinema-copy p{font-size:19px;line-height:1.65;color:#eef2f5;margin:4px 0 0;text-shadow:0 1px 15px #0005}
.cinema-copy .actions{margin-top:32px}.cinema-cta{background:#15232a40;border-color:#ffffff50;color:white;backdrop-filter:blur(10px)}
.cinema-launch{font-size:12px;color:#d0d6dc;margin-top:20px}.cinema-bottom{position:absolute;bottom:28px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:18px}.cinema-scroll{display:flex;align-items:center;gap:20px;color:#d8e0e6;font-size:12px}.cinema-scroll span{font-size:22px;animation:scroll-nudge 2.5s ease-in-out infinite}.cinema-credit{display:flex;align-items:center;gap:22px;font-size:12px;letter-spacing:.08em;color:#e3e9ee}.cinema-credit i{font-style:normal;opacity:.45;margin:0 8px}
#cinema-toggle{height:44px;width:44px;border-radius:50%;border:1px solid #ffffff80;background:#15232a50;color:white;backdrop-filter:blur(10px)}
.hero .product-heading{font-size:clamp(38px,4.25vw,59px);font-weight:580;line-height:1.08;letter-spacing:-.045em;margin:22px 0}.hero .product-heading span{color:var(--blue)}
@keyframes cinema-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Edge-to-edge hover previews, without native player chrome or letterboxing. */
.film-grid{gap:24px}.film-card{position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .4s;transform-origin:center}
.film-media{border-radius:18px;cursor:pointer;transition:border-color .4s,box-shadow .5s}.film-media video{aspect-ratio:1;object-fit:cover;width:100%;height:100%;pointer-events:none}
.film-cover{transition:opacity .32s;object-fit:cover}.film-card.is-playing .film-cover{opacity:0}.film-start{inset:auto 18px 20px auto;width:42px;height:42px;font-size:15px;z-index:2;padding-left:2px;background:#17242670}
.film-card.is-playing .film-start{display:block}.film-progress{position:absolute;left:20px;right:20px;bottom:10px;height:2px;background:#ffffff24;opacity:0;transition:opacity .25s;pointer-events:none}.film-progress:before{content:'';display:block;width:var(--progress,0%);height:100%;background:var(--mint)}.film-card.is-playing .film-progress{opacity:1}
.film-card:focus-within{z-index:2}.film-caption h3{transition:color .25s}.film-card.is-playing h3{color:#d4ebdc}
@media(hover:hover) and (pointer:fine){.film-card:hover{transform:translateY(-6px) scale(1.025);z-index:2}.film-card:hover .film-media{box-shadow:0 20px 55px #0008;border-color:#b4d6c077}}

/* Provider labels respond to the pointer and reveal their destination. */
.ai-providers ul{gap:12px}.ai-providers li{min-width:0}.provider-link{--provider-color:#b7e2d2;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:120px;gap:5px;padding:18px 8px 26px;border:1px solid transparent;border-radius:14px;transition:border-color .35s,background .35s}
.ai-providers li:nth-child(2) .provider-link{--provider-color:#b6d6ff}.ai-providers li:nth-child(3) .provider-link{--provider-color:#ead3b3}.ai-providers li:nth-child(4) .provider-link{--provider-color:#d5c0f2}.ai-providers li:nth-child(5) .provider-link{--provider-color:#c3e4aa}
.provider-link:before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(110px circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--provider-color) 20%,transparent),transparent 90%);opacity:0;transition:opacity .35s}
.provider-link strong{transition:transform .25s ease,color .25s,text-shadow .25s}.provider-link>span:not(.provider-hint){transition:color .25s}
.ai-providers .provider-hint{position:absolute;bottom:11px;color:var(--provider-color);font-size:10px;letter-spacing:.02em;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}
.provider-link:hover,.provider-link:focus-visible{background:transparent}.provider-link:hover:before,.provider-link:focus-visible:before{opacity:1}.provider-link:hover strong,.provider-link:focus-visible strong{color:var(--provider-color);text-shadow:0 0 24px color-mix(in srgb,var(--provider-color) 45%,transparent);transform:translate(var(--text-x,0px),calc(var(--text-y,0px) - 3px))}.provider-link:hover .provider-hint,.provider-link:focus-visible .provider-hint{opacity:1;transform:none}
@media(max-width:800px){.cinema-intro{min-height:640px;max-height:980px}.cinema-copy{padding-top:84px;padding-bottom:110px}.cinema-copy h1{font-size:clamp(53px,11vw,76px)}.cinema-copy p{font-size:16px}.cinema-intro>video{object-position:58% center}.cinema-shade{background:linear-gradient(90deg,#080e1499,#080e1433),linear-gradient(0deg,#091118ee,transparent 75%)}.cinema-bottom{bottom:20px}.cinema-scroll{max-width:180px;font-size:10px;gap:8px}.cinema-credit{gap:12px;font-size:10px}.cinema-credit i{margin:0 3px}.cinema-copy .actions{gap:10px}.cinema-copy .button{padding:10px 15px;font-size:13px}.cinema-launch{font-size:10px}.hero .product-heading{font-size:clamp(37px,8vw,58px)}.film-media video{aspect-ratio:1}.provider-link{min-height:110px}.ai-providers .provider-hint{opacity:1;transform:none;font-size:9px}.provider-link strong{font-size:20px}.provider-link .provider-bfl{font-size:16px}}
@media(max-width:400px){.cinema-copy .actions .button{width:auto}.cinema-copy h1{font-size:53px}}
@media(prefers-reduced-motion:reduce){.cinema-copy,.cinema-scroll span{animation:none}.film-card:hover{transform:none}.provider-link:hover strong,.provider-link:focus-visible strong{transform:none}}

/* Comparisons remain on the first screen, over the cinematic background. */
.cinema-intro{min-height:820px}
.cinema-layout{height:100%;display:grid;grid-template-columns:.95fr 1.08fr;gap:58px;align-items:center;padding:128px 0 100px}
.cinema-layout .cinema-copy{height:auto;padding:0;min-width:0}.cinema-layout h1{font-size:clamp(46px,4.4vw,66px)}
.cinema-layout .cinema-copy p{font-size:17px}.cinema-layout .cinema-copy .button{padding-inline:17px;font-size:14px}
.cinema-layout .hero-comparison{width:100%;max-width:610px;justify-self:end;margin:0}
.cinema-layout .studio-stage{box-shadow:0 22px 70px #0006}.cinema-layout .studio-tabs button{background:#121c26c9;backdrop-filter:blur(12px)}
.cinema-layout .studio-tabs button[aria-selected=true]{background:#28445aed}.cinema-layout .demo-footnote{color:#e2e9ed;text-shadow:0 2px 8px #000}
.product-summary{padding:44px 0 18px;max-width:800px}.product-summary .intro{max-width:760px;margin:0;font-size:20px}.product-summary .note{margin-bottom:0}
.product-summary+.ai-providers{padding:20px 0 38px}
@media(min-width:801px) and (max-height:820px){.cinema-intro{min-height:760px}.cinema-layout{grid-template-columns:1fr 1fr;padding-top:112px;padding-bottom:90px}.cinema-layout .hero-comparison{max-width:530px}.cinema-layout h1{font-size:59px}}
@media(max-width:1050px) and (min-width:801px){.cinema-layout{gap:30px}.cinema-layout h1{font-size:48px}.cinema-layout .cinema-copy p{font-size:16px}}
@media(max-width:800px){.cinema-intro{height:auto;min-height:100svh;max-height:none}.cinema-layout{height:auto;grid-template-columns:1fr;gap:55px;padding-top:132px;padding-bottom:112px}.cinema-layout .cinema-copy{padding:0}.cinema-layout h1{font-size:clamp(50px,10vw,72px)}.cinema-layout .hero-comparison{margin-top:22px!important;max-width:580px;justify-self:center}.cinema-layout .cinema-copy p{font-size:16px}.cinema-bottom{bottom:24px}.cinema-layout .demo-footnote{font-size:10px}.product-summary .intro{font-size:17px}}
/* Source reveals and quieter video controls. */
.provider-link{border:0;border-radius:0;background:transparent}
.provider-link:before{inset:-12px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%)}
.provider-link:focus-visible{outline:2px solid var(--provider-color);outline-offset:2px;border-radius:8px}
.scene-card{cursor:pointer}
.scene-card img{display:block}
.scene-card .scene-source{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.scene-card.show-source .scene-source{opacity:1}
.scene-compare-toggle{position:absolute;top:16px;right:16px;z-index:2;border:1px solid #ffffff45;border-radius:30px;padding:7px 12px;min-height:36px;font-size:11px;font-weight:500;color:#fff;background:#111a21b0;backdrop-filter:blur(12px);cursor:pointer;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.scene-card:hover .scene-compare-toggle,.scene-card:focus-within .scene-compare-toggle,.scene-card.show-source .scene-compare-toggle{opacity:1;transform:none}
.scene-compare-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.film-media{aspect-ratio:1}
.film-media video,.film-cover{transform:scale(1.07);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .32s}
.film-card:hover .film-media video,.film-card:hover .film-cover{transform:scale(1.11)}
.film-start{inset:auto 18px 20px auto;margin:0;width:44px;height:44px;padding:0;display:grid!important;place-items:center;border:0;border-radius:0;background:transparent;backdrop-filter:none;transition:opacity .25s,transform .25s}
.film-start:hover{background:transparent}
.film-start svg{width:24px;height:24px;fill:currentColor;display:block;filter:drop-shadow(0 1px 4px #000b)}
.film-card.is-playing .film-start{opacity:0}
.film-card:hover .film-start,.film-card:focus-within .film-start{opacity:1}
.film-start:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(hover:none){.scene-compare-toggle{opacity:1;transform:none}.film-card.is-playing .film-start{opacity:.8}}
@media(prefers-reduced-motion:reduce){.scene-card .scene-source,.scene-compare-toggle,.film-media video,.film-cover{transition:none}.film-card:hover .film-media video,.film-card:hover .film-cover{transform:scale(1.07)}}

/* Flush controls and media: square edges meet without gutters. */
.studio-tabs{top:auto;bottom:100%;gap:0;transform:none}
.studio-tabs button{margin:0}
.actions,.cinema-copy .actions,.nav-actions,.compare-controls,.scene-grid,.film-grid{gap:0}
.studio-demo .compare-controls,.compact-example .compare-controls{gap:0;padding-top:0}
.actions>.button{margin:0}
.actions>.button:hover{transform:none}