:root{--bg:#171518;--ink:#f4eee6;--muted:#c4bac2;--accent:#ff8b77;--line:#453d44;--paper:#eee8df;--paper-ink:#2b2329;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bg);color-scheme:dark}*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:24px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}a:hover{text-decoration:underline;text-underline-offset:5px}::selection{background:var(--accent);color:var(--bg)}.wrap{max-width:1440px;margin:auto;padding-inline:clamp(24px,4vw,64px)}h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.035em;text-wrap:balance}h1{font-size:clamp(48px,6.6vw,88px);line-height:1;max-width:12ch;margin:0}h1 span{color:var(--accent)}h2{font-size:clamp(30px,3.6vw,48px);font-weight:500;line-height:1.1;margin:0}h3{font-size:25px;line-height:1.2;font-weight:500;margin:0 0 14px}p{font-size:15px;line-height:1.7;margin:0}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}.muted{color:var(--muted)}.skip{position:absolute;top:-100px;background:var(--ink);color:var(--bg);padding:16px;z-index:10}.skip:focus{top:5px}.site-header{display:flex;justify-content:space-between;align-items:center;max-width:1440px;margin:auto;padding:16px clamp(24px,4vw,64px);gap:24px}.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}.brand img{width:42px;height:42px;object-fit:contain}.site-header nav{display:flex;gap:28px;font-size:14px}.site-header nav a{display:flex;align-items:center;min-height:44px}.site-header nav a[aria-current]{color:var(--accent)}.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;padding-top:48px;padding-bottom:44px;align-items:end}.intro>div>p:first-child{font-size:21px;line-height:1.45;max-width:30ch;margin-bottom:14px}.intro .muted{max-width:42ch}.jump-links{display:flex;gap:26px;margin-top:18px;font-size:13px}.jump-links a{min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.film-screen{aspect-ratio:426/192;background:#0a090b;position:relative;overflow:hidden}.film-poster{display:block;width:100%;height:100%;padding:0;border:0;background:#100f13;position:relative;text-align:left}.film-poster>img{width:100%;height:100%;object-fit:cover;display:block}.play-label{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:14px;padding:17px 20px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600}.play-label>span{font-size:12px;padding-left:16px;border-left:1px solid #b8b1b9}.play-label svg{fill:currentColor;stroke:0}.film-poster:hover .play-label{background:var(--accent)}.film-screen iframe{border:0;position:absolute;inset:0;width:100%;height:100%}.film-caption{display:grid;grid-template-columns:1fr 1fr;gap:9%;padding-top:24px;padding-bottom:64px}.film-caption h2{font-size:clamp(25px,2.6vw,35px)}.tags{font-size:12px;color:var(--accent);margin-top:12px}.film-caption>div>p:not(.tags){color:var(--muted);max-width:53ch}.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-size:14px;margin-top:10px}.app-section{background:var(--paper);color:var(--paper-ink);padding-block:64px}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px}.section-heading>p{max-width:37ch;color:var(--muted);font-size:14px}.app-section .section-heading>p{color:#665862}.app-tabs{display:flex;gap:30px;border-bottom:1px solid #c8bdc2;margin-bottom:24px}.app-tabs button{background:none;border:0;border-bottom:3px solid transparent;color:#65565e;padding:14px 0;font-size:20px;text-align:left}.app-tabs button span{font-size:12px;display:block;margin-top:5px}.app-tabs button[aria-selected=true]{border-color:#a03c29;color:var(--paper-ink)}.app-screen{position:relative;display:block;background:#090d14;box-shadow:0 18px 35px #30213126}.app-screen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}.app-screen>span,.storyboard>span{position:absolute;right:16px;bottom:16px;background:#171518ed;color:#f4eee6;padding:12px 16px;font-size:12px}.app-caption{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;margin-top:30px}.app-caption p{font-size:14px;max-width:56ch;color:#65545f}.app-caption .preview-note{font-weight:600;color:#2b2329;margin-bottom:8px}.workflow-section{padding-top:74px;padding-bottom:74px}.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.workflow-visual{padding:22px;background:#242028;margin-bottom:24px;min-height:265px;overflow:hidden}.visual-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;margin-bottom:22px}.visual-title>span{font-size:12px;color:#d3c0cc}.scene-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.scene-frames>div{aspect-ratio:1.15;overflow:hidden;position:relative}.scene-frames img{width:300%;height:200%;max-width:none;position:absolute;top:0;left:0;object-fit:fill}.scene-frames>div:nth-child(2) img{left:-100%}.scene-frames>div:nth-child(3) img{left:-200%}.scene-flow{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:12px;margin-top:18px}.scene-flow b{font-weight:400;color:var(--accent)}.workflow-visual>p{font-size:12px;color:var(--muted);margin-top:18px}.workflow-grid article>p{color:var(--muted);max-width:55ch;font-size:14px}.sample-search{display:flex;gap:10px;align-items:center;background:#342d37;padding:12px;font-size:12px}.sample-search svg{width:16px;height:16px}.transcript{margin-top:8px}.transcript p{display:flex;gap:14px;border-bottom:1px solid #453d44;padding:10px 0;font-size:12px;line-height:1.5}.transcript time{color:#b9abb6;font-variant-numeric:tabular-nums}.transcript mark{background:#5a393c;color:#ffccbf;padding:2px}.workflow-grid details{margin-top:16px;font-size:13px}.workflow-grid summary{cursor:pointer;color:var(--accent);min-height:44px;align-content:center}.workflow-grid details p{font-size:13px;color:var(--muted);padding-top:8px}.dark-study{padding-block:64px;background:#231d24}.study-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:30px}.study-heading>div>p{color:var(--accent);margin-top:16px;font-size:13px}.study-heading>p{max-width:36ch;color:var(--muted);font-size:14px}.storyboard{position:relative;display:block}.storyboard img{width:100%;height:auto;display:block}.study-foot{display:flex;justify-content:space-between;gap:50px;margin-top:24px;color:var(--muted)}.study-foot p{font-size:13px;max-width:53ch}.next-section{padding-block:65px}.next-section>p{margin-top:16px;color:var(--muted)}.next-list{margin-top:28px;border-top:1px solid var(--line)}.next-list>div{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;border-bottom:1px solid var(--line);padding:24px 0}.next-list h3{font-size:21px;margin:0}.next-list p{color:var(--muted);font-size:14px}footer.wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;align-items:center;padding-top:20px;padding-bottom:28px}.back-link{min-height:44px;display:flex;align-items:center;font-size:14px}.signature{width:100%;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:12px;line-height:1.6}
@media(min-width:1400px){.workflow-visual{min-height:315px}}
@media(max-width:700px){.site-header{gap:12px}.brand span{display:none}.site-header nav{gap:18px;font-size:12px}.intro{display:block;padding-top:26px;padding-bottom:30px}.intro h1{font-size:clamp(48px,11vw,70px);max-width:14ch;margin-bottom:26px}.intro>div>p:first-child{font-size:19px;max-width:35ch}.intro .muted{font-size:14px}.jump-links{margin-top:12px;gap:24px}.film-feature{padding-inline:0}.film-screen{min-height:0}.play-label{left:14px;bottom:14px;padding:12px;gap:8px;font-size:12px}.play-label>span{padding-left:8px}.film-caption{display:block;padding:24px 24px 40px}.film-caption>div+div{margin-top:20px}.film-caption h2{font-size:28px}.film-caption .tags{font-size:12px}.section-heading,.study-heading{display:block}.section-heading>p,.study-heading>p{margin-top:20px}.app-section,.dark-study{padding-block:40px}.app-tabs{gap:22px}.app-tabs button{font-size:17px}.app-tabs button span{font-size:12px}.app-screen>span{right:8px;bottom:8px;padding:9px;font-size:12px}.app-caption{display:block;margin-top:24px}.app-caption>div+div{margin-top:20px}.workflow-section{padding-block:42px}.workflow-grid{grid-template-columns:1fr;gap:36px}.workflow-visual{padding:18px;min-height:0}.workflow-grid h3{font-size:24px}.study-foot{display:block}.study-foot p+p{margin-top:16px}.storyboard>span{position:static;display:block;text-align:right;background:transparent;padding:12px 0}.next-section{padding-block:42px}.next-list>div{display:block;padding-block:20px}.next-list p{margin-top:12px}.signature{display:block}.signature>span{display:block;margin-top:10px}.visual-title>span{font-size:12px}footer h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(min-width:701px){.workflow-grid{row-gap:0}.workflow-grid>article{display:grid;grid-template-rows:subgrid;grid-row:span 4}.workflow-visual{min-height:300px}.workflow-grid article>h3{margin-bottom:14px}.workflow-grid article>details{align-self:start}}

.app-project+.app-project{margin-top:64px;border-top:1px solid #c8bdc2;padding-top:42px}
.app-project-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:24px 0 18px}
.app-project-heading h3{font-size:32px;margin:0}
.app-project-heading>span{font-size:13px;color:#65545f}
.app-screen video{display:block;width:100%;aspect-ratio:11/7;object-fit:contain;background:#080c12}
.motion-toggle{background:transparent;border:0;border-bottom:1px solid #8b747c;padding:10px 0;min-height:44px;color:#49353f;font-size:13px}
.project-anchor{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#8b3426}
@media(max-width:700px){.app-project-heading{display:block}.app-project-heading h3{font-size:28px;margin-bottom:8px}.app-project+.app-project{margin-top:40px;padding-top:24px}}

.sample-badge{position:absolute;top:10px;right:12px;bottom:auto!important;background:#171518dd!important;padding:6px 10px!important;color:#f4eee6;font-size:11px!important;z-index:2;pointer-events:none}
.app-screen video{aspect-ratio:1100/760}
.tech-note{margin-top:12px;font-size:12px!important}
.project-anchor+.project-anchor{margin-left:18px}
.reel-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none}.play-label{z-index:2}
.bye-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:34px;align-items:start}
.bye-film video{display:block;width:100%;aspect-ratio:9/16;background:#0a090b}.bye-film>p{margin-top:12px;font-size:12px;color:var(--muted)}
.bye-board h3{margin-top:26px}.bye-board>p{font-size:14px;color:var(--muted)}.bye-board .board-credit{font-size:12px;margin-top:16px;max-width:60ch}
@media(max-width:700px){.bye-layout{grid-template-columns:1fr}.bye-film{width:75%;max-width:330px;margin:auto}.bye-board h3{font-size:25px}.project-anchor+.project-anchor{margin-left:0;display:flex}}

.bye-open{display:block;width:100%;position:relative;padding:0;border:0;background:#0a090b;text-align:left}.bye-open video{pointer-events:none}.bye-play{position:absolute;left:16px;right:16px;bottom:20px;display:flex;align-items:center;justify-content:center;gap:12px;min-height:50px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;padding:12px}.bye-play svg{fill:currentColor;stroke:0}.bye-open:hover .bye-play{background:var(--accent)}
.style-viewport{overflow:hidden;aspect-ratio:3/2;background:#100e13}.style-track{display:flex;height:100%;transition:transform .65s cubic-bezier(.16,1,.3,1)}.frame-pair{flex:0 0 100%;display:flex;gap:8px;height:100%}.style-frame{position:relative;overflow:hidden;width:50%;height:100%}.style-frame img{position:absolute;width:400%;height:200%;max-width:none;object-fit:fill}.style-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.style-controls button{background:none;border:1px solid var(--line);min-width:44px;min-height:44px}.style-controls span{font-size:12px;color:var(--muted)}
#bye-dialog{padding:0;border:1px solid var(--line);background:#100e13;color:var(--ink);width:min(1000px,96vw);max-width:96vw;max-height:96dvh;overflow:auto}#bye-dialog::backdrop{background:#08070ae8}.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px}.dialog-bar h2{font-size:20px;margin:0}.dialog-bar>div{display:flex;gap:12px}.dialog-bar button{background:transparent;border:0;min-height:44px;padding:10px;font-size:13px}#bye-player{height:min(76dvh,800px);background:#000}#bye-player video,#bye-player iframe{width:100%;height:100%;object-fit:contain;border:0;display:block}#bye-player:fullscreen{height:100vh;width:100vw}.player-error{padding:20px;color:var(--ink)}
@media(max-width:700px){.dialog-bar{padding:8px 10px;gap:6px}.dialog-bar h2{font-size:16px}.dialog-bar>div{gap:0}.dialog-bar button{padding:8px;font-size:12px}#bye-player{height:75dvh}.bye-play{left:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.style-track{transition:none}}

/* Match the Bye dialog to its portrait master, rather than a landscape stage. */
#bye-dialog{width:min(94vw,45dvh)}
#bye-dialog .dialog-bar{padding:8px 10px;gap:6px}
#bye-dialog .dialog-bar h2{font-size:16px}
#bye-dialog .dialog-bar>div{gap:0}
#bye-dialog .dialog-bar button{padding:8px;font-size:12px}
#bye-player{height:auto;aspect-ratio:9/16;width:100%}
#bye-player:fullscreen{aspect-ratio:auto;height:100vh;width:100vw}

.early-film{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding-bottom:64px}.early-screen{aspect-ratio:16/9;position:relative;background:#09090b;overflow:hidden}.early-screen>img,.early-screen>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}.early-screen>button{position:absolute;inset:0;width:100%;border:0;background:transparent;text-align:left}.early-screen .play-label{left:14px;bottom:14px;padding:12px;font-size:12px;gap:8px}.early-copy h2{font-size:32px;margin:12px 0 18px}.early-copy>p:not(.tags){color:var(--muted);max-width:38ch}.early-copy .tags{margin:0}@media(max-width:700px){.early-film{grid-template-columns:1fr;gap:22px;padding-bottom:40px}.early-copy h2{font-size:28px}}

.watch-heading{padding-top:64px;padding-bottom:30px}.watch-heading p{margin-top:16px;color:var(--muted)}#film{padding-top:56px}.footer-phone{display:flex;width:fit-content;margin-top:0}@media(max-width:700px){.watch-heading{padding-top:40px}#film{padding-top:36px}}

#scene-builder>.section-heading .tags{margin:0 0 12px}#scene-builder .app-screen video{aspect-ratio:16/10}.scene-description{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:30px}.scene-description p{font-size:14px;color:var(--muted);line-height:1.7}.scene-description .tags{color:var(--accent);margin:0 0 12px;font-size:12px}.scene-description .scene-disclosure{font-size:12px;margin-top:16px}@media(max-width:700px){.scene-description{grid-template-columns:1fr;gap:24px}}

#scene-builder .app-screen video{aspect-ratio:960/906}

.scene-brand{display:inline-flex;align-items:center;gap:13px;font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.045em;line-height:1.1}.scene-brand .scene-brand-mark{width:43px;height:43px;fill:none;stroke:var(--accent);stroke-width:1.7;flex:none}.scene-brand-light{font-weight:400}.scene-brand-dot{color:var(--accent)}@media(max-width:700px){.scene-brand{gap:10px;font-size:32px}.scene-brand .scene-brand-mark{width:34px;height:34px}}

/* White, type-led product wordmark. */
.scene-brand{gap:.16em;color:#f4eee6;font-family:'Space Grotesk',sans-serif;font-weight:700;font-style:italic;font-size:clamp(29px,3.8vw,44px);letter-spacing:-.065em;line-height:1.15}.scene-brand>span{display:inline-block}@media(max-width:700px){.scene-brand{font-size:31px;gap:.16em}}

.scene-logo{display:block;width:280px;max-width:100%;height:auto}#scene-builder .app-screen{max-width:100%;width:min(100%,calc((100dvh - 210px)*1.4));margin-inline:auto}#scene-builder .app-screen video{width:100%;height:auto;aspect-ratio:960/686;object-fit:contain}#scene-builder .section-heading>*{min-width:0}@media(max-width:700px){.scene-logo{width:230px}#scene-builder .app-screen{width:100%}}
.scene-logo{width:190px;max-width:100%}@media(max-width:700px){.scene-logo{width:170px}}

/* One dark tools collection: SceneBuilder, J-Snitch and Network Controller. */
.tools-heading{padding-bottom:28px;border-bottom:1px solid #ffffff24}
#workflows>.motion-toggle{margin-bottom:36px}
#apps{background:transparent;color:inherit;padding-top:0}
#apps .app-caption p,#apps .app-project-heading>span{color:var(--muted)}
#apps .app-caption .preview-note{color:var(--accent)}
#apps .app-project{border-top:1px solid #ffffff24;padding-top:28px}
#workflows>.motion-toggle{color:var(--muted);border-color:#ffffff40}