/* SimpleSplit page: the pack pages' blocks (creator-packs/packs.css) under its own intro. */
/* The intro is the room: see "The studio" below. The buttons, the install tip and the sale status keep these. */
.app-name{display:block;margin-bottom:18px;font:600 12px/1.6 'DM Sans',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.app-lead{max-width:60ch;margin:0 auto 28px;font-size:18px;line-height:1.65;color:#b9b9bb;text-wrap:balance}
.app-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 14px}
.app-cta .button{font-size:15px}
.app-cta .install-tip{text-align:left}
/* Right under the intro: the app's window, beside how a split is picked. */
.pick-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.pick-split .block-head{margin:0}
@media(max-width:1000px){.pick-split{grid-template-columns:1fr}}
.app-shot{margin:0;border:1px solid var(--bezel-edge);border-radius:10px;overflow:hidden;background:#202020;box-shadow:0 34px 70px -36px #000}
.app-shot img{display:block;width:100%;height:auto;object-fit:contain}
.button.secondary{border:1px solid #545557;background:transparent;color:var(--text)}
.button.secondary:hover{border-color:var(--accent);color:var(--accent)}
.page-simplesplit .highlights{row-gap:40px}
.page-simplesplit kbd{display:inline-block;padding:1px 6px;border:1px solid #45464a;border-bottom-width:2px;border-radius:4px;background:#1d1e20;color:var(--text);font:600 13px/1.4 'DM Sans',Arial,sans-serif}
.extension-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px!important}
.extension-links a{color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.extension-links:not(:has(a:not([hidden]))){display:none}
/* Splits on a monitor: in the intro and in their own block, with zone labels sized like the zones (2380 : 1060). */
.in-use .eyebrow{font-family:'DM Sans',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;line-height:1.6;margin-bottom:18px}
.monitor-shot{margin:0}
.monitor-shot+.monitor-shot{margin-top:48px}
/* A monitor: a slim dark bezel catching the light along its top, a thicker chin with a logo mark and a power light,
   on a stand. The sides stay 10 px, so the zone labels below still line up with the zones. */
.monitor{position:relative;padding:10px 10px 22px;border-radius:14px;background:linear-gradient(180deg,#25262a 0%,#141517 100%);box-shadow:0 0 0 1px var(--bezel-edge),inset 0 1px 0 rgba(255,255,255,.08),0 34px 70px -36px #000}
.monitor img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 0 0 1px #000}
.monitor::before{content:'';position:absolute;left:50%;bottom:9px;width:34px;height:4px;margin-left:-17px;border-radius:2px;background:#393a3e}
.monitor::after{content:'';position:absolute;right:20px;bottom:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(232,173,96,.7)}
.stand{position:relative;width:22%;max-width:280px;height:54px;margin:0 auto}
.stand::before{content:'';position:absolute;left:50%;top:0;width:30%;height:44px;transform:translateX(-50%);background:linear-gradient(90deg,#17181a,#2c2d31 50%,#17181a);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.stand::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;border-radius:6px 6px 4px 4px;background:linear-gradient(180deg,#303135,#18191b);box-shadow:0 0 0 1px #2a2b2e,0 10px 18px -8px #000}
/* Each zone's size sits centered on a dimension line spanning the zone, ├── 2380 × 1392 ──┤, with what's in it below. */
.zone-labels{--dim:#58595d;display:flex;gap:6px;margin-top:16px;padding-inline:10px;font-size:14px;line-height:1.5;color:var(--soft);text-align:center}
.zone-labels span{min-width:0}
.zone-labels b{display:flex;align-items:center;gap:10px;margin-bottom:4px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;background:linear-gradient(var(--dim),var(--dim)) left center/1px 11px no-repeat,linear-gradient(var(--dim),var(--dim)) right center/1px 11px no-repeat}
.zone-labels b::before,.zone-labels b::after{content:'';flex:1;min-width:6px;height:1px;background:var(--dim)}
.zone-wide{flex:2380 1 0}
.zone-narrow{flex:1060 1 0}
.zone-game{flex:2293 1 0}
.zone-side{flex:1147 1 0}
.zone-third{flex:1 1 0}
.image-credit{display:block;margin-top:12px;padding-inline:10px;font-size:12px;line-height:1.5;color:#7e7f82}
@media(max-width:760px){.monitor{padding:5px 5px 12px;border-radius:9px}.monitor::before{bottom:5px;width:20px;height:3px;margin-left:-10px}.monitor::after{right:10px;bottom:4px;width:4px;height:4px}.stand{height:30px}.stand::before{height:24px}.stand::after{height:6px}.zone-labels{gap:4px;font-size:11px;padding-inline:5px}.zone-labels b{gap:4px;background-size:1px 8px}.zone-labels b::before,.zone-labels b::after{min-width:3px}}
/* The setup steps: two on this page, side by side, then stacked on a phone (packs.css has three). */
.setup-steps.two-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.setup-steps.two-steps{grid-template-columns:1fr}}
/* The tip about the browser and SmartScreen warnings an unsigned installer gets: a small panel under the
   download button on hover or keyboard focus, and after a click (.shown) until a click elsewhere. */
.download-wrap{position:relative;display:inline-flex}
.install-tip{position:absolute;top:calc(100% + 12px);left:0;z-index:5;width:max-content;max-width:calc(100vw - 40px);padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--raised);box-shadow:0 18px 40px -18px #000;font-size:13px;line-height:1.6;color:var(--soft);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;pointer-events:none}
.install-tip::before{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;border-left:1px solid var(--line);border-top:1px solid var(--line);background:var(--raised);transform:rotate(45deg)}
.install-tip b{color:var(--text);font-weight:600}
.download-wrap:hover .install-tip,.download-link:focus-visible+.install-tip,.install-tip.shown{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
@media(prefers-reduced-motion:reduce){.install-tip{transition:none}}

/* The studio: Jesse's own room, blurred and dark, with the monitor lit by its own screen. The header floats over it. */
.site-header{transition:background .5s,border-color .5s}
main{display:flow-root}
body.at-top .site-header{background:linear-gradient(rgba(16,17,18,.82),rgba(16,17,18,0));border-bottom-color:transparent;backdrop-filter:none}
.studio{position:relative;z-index:0;margin-top:-91px;background:#0b0c0d}
.studio-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100vh;padding-top:91px}
.studio-room{position:absolute;inset:0;background:url(/assets/simplesplit/hero-room.jpg) center 46%/cover no-repeat;opacity:calc(var(--room-alpha,1)*.85);animation:room-in 18s ease-out both;will-change:transform}
.studio-room::after{content:'';position:absolute;inset:0;background:radial-gradient(72% 68% at 50% 44%,rgba(16,17,18,0) 0%,rgba(16,17,18,.5) 52%,#101112 100%),linear-gradient(180deg,rgba(16,17,18,.55),rgba(16,17,18,0) 22%,rgba(16,17,18,0) 68%,#101112 100%)}
@keyframes room-in{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.studio-glow{position:absolute;left:50%;top:54%;width:68%;height:48%;transform:translate(-50%,-50%);border-radius:50%;background-color:var(--ambient,rgba(232,173,96,.35));filter:blur(80px);opacity:calc(var(--room-alpha,1)*.8);pointer-events:none}
.studio-wrap{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 40px;padding-block:26px 36px}
.studio-wrap>*{min-width:0}
.plate-copy{animation:rise 1.2s .25s cubic-bezier(.2,.7,.2,1) both}
.studio-cta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;animation:rise 1.2s .45s cubic-bezier(.2,.7,.2,1) both}
.studio .app-cta,.film .app-cta{justify-content:flex-end}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.studio .app-name,.film .app-name{margin:0 0 10px;font:600 12px/1.6 'DM Sans',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.studio h1,.film h1{margin:0 0 6px;font-family:'Manrope',Arial,sans-serif;font-size:clamp(2rem,2.9vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--text)}
.studio .app-lead,.film .app-lead{margin:0;max-width:44ch;font-size:17px;line-height:1.5;color:#d6d4cf;text-align:left}
.studio .compat,.film .compat{margin:0;text-align:right}
.rig{grid-column:1/-1;perspective:1800px;perspective-origin:50% 28%;margin-top:6px}
.rig-cam{transform-origin:50% 60%;will-change:transform}
.rig .monitor-shot{max-width:min(100%,calc((100vh - 390px)*2.25));margin:0 auto 118px;animation:rig-in 1.7s .1s cubic-bezier(.2,.7,.2,1) both;-webkit-box-reflect:below 2px linear-gradient(transparent 66%,rgba(0,0,0,.26))}
@keyframes rig-in{from{opacity:0;transform:translateY(70px) rotateX(18deg) scale(.9)}to{opacity:1;transform:none}}
.rig .monitor{background:linear-gradient(180deg,#2b2c30,#121315);box-shadow:0 0 0 1px #3b3c40,inset 0 1px 0 rgba(255,255,255,.1),0 70px 130px -40px rgba(0,0,0,.95),0 0 110px -10px var(--ambient,rgba(232,173,96,.3))}
.rig video{display:block;width:100%;height:auto;border-radius:3px;background:#000;box-shadow:0 0 0 1px #000}
.under-rig{grid-column:1/-1;animation:rise 1.2s .9s cubic-bezier(.2,.7,.2,1) both}
.scenes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.scenes button{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(16,17,18,.55);backdrop-filter:blur(10px);font-size:13px;line-height:1.4;color:var(--soft);transition:border-color .2s,color .2s,background .2s}
.scenes button b{font:500 12px/1 'Manrope',Arial,sans-serif;color:var(--accent)}
.scenes button:hover{border-color:#6a6b6f;color:var(--text)}
.scenes button.on{border-color:var(--accent);background:rgba(232,173,96,.14);color:var(--text)}
.loop-toggle{margin-left:6px;color:#9c9da0}.loop-toggle svg{width:12px;height:12px;fill:currentColor}.loop-toggle .icon-play,.loop-toggle.paused .icon-pause{display:none}.loop-toggle.paused .icon-play{display:block}
.under-rig .image-credit{text-align:center;margin-top:14px;padding:0}
.scroll-cue{display:none}
/* The nameplate that follows the reader, like the Secretlab bar. */
.nameplate{position:fixed;left:0;right:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:10px 40px;border-bottom:1px solid var(--line);background:rgba(16,17,18,.92);backdrop-filter:blur(18px);animation:plate-in .25s ease}
.nameplate[hidden]{display:none}
.plate-line{display:flex;align-items:baseline;gap:16px;min-width:0}
.plate-name{font:600 12px/1.6 'DM Sans',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.plate-text{font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:-.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nameplate .app-cta{flex-wrap:nowrap}
.nameplate .app-cta .button{min-height:40px;padding:8px 16px;font-size:14px;white-space:nowrap}
body:has(.mobile-nav:not([hidden])) .nameplate{display:none}
@keyframes plate-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
/* The thesis: one big line, six features drawn as line icons, and a thread down to the next section. */
.thesis{padding-block:150px 0;text-align:center}
.thesis-line{margin:0 auto 18px;max-width:15ch;font-size:clamp(40px,5vw,66px);font-weight:400;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.thesis-sub{margin:0 auto;max-width:48ch;font-size:17px;line-height:1.6;color:#b3b3b5}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 44px;max-width:1040px;margin:84px auto 0;text-align:left}
.feature-grid>div{padding-top:18px;border-top:1px solid #2e2f32;transition-delay:calc(var(--i,0)*.12s)}
.feature-grid b{display:block;font:500 13px/1 'Manrope',Arial,sans-serif;color:var(--accent)}
.feature-grid svg{width:54px;height:54px;margin:18px 0 16px;fill:none;stroke:#e9e7e2;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:#e9e7e2}
.feature-grid h3{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:-.2px}
.feature-grid p{margin:0;font-size:14px;line-height:1.65;color:#9c9da0}
.tour{display:flex;flex-direction:column;align-items:center;margin-top:100px}
.tour a{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 'DM Sans',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.tour a svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.3;color:var(--accent)}
.tour a:hover{color:var(--accent)}
.connector{display:block;width:1px;height:170px;margin-top:30px;background:linear-gradient(var(--accent),rgba(232,173,96,0));transform-origin:top;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .4s}
.tour.in .connector{transform:scaleY(1)}
/* Chapters: one line each, then the monitor. */
.chapters{padding-top:40px}
.chapter-line{margin:0 0 30px;max-width:19ch;font-size:clamp(32px,4vw,54px);font-weight:400;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.chapters .monitor-shot+.chapter-line{margin-top:110px}
.stats-wrap{padding-block:0 20px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats b{display:block;font:500 clamp(32px,3.2vw,46px)/1.1 'Manrope',Arial,sans-serif;letter-spacing:-.03em;color:var(--accent)}
.stats span{display:block;margin-top:10px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#9c9da0}
/* Slow reveals, like the Secretlab fade-ups. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* D: the pull-back. The stage sticks for one screen of scrolling while the camera pulls out of the screen. */
.pullback .studio{height:200vh}
.pullback .studio-stage{position:sticky;top:0;height:100vh;min-height:0}
.pullback .rig .monitor-shot,.pullback .plate-copy,.pullback .studio-cta,.pullback .under-rig{animation:none}
.pullback .plate-copy,.pullback .studio-cta,.pullback .under-rig{opacity:var(--copy-alpha,0);transition:none}
.pullback .scroll-cue{position:absolute;left:50%;bottom:26px;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);font:600 11px/1 'DM Sans',Arial,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:rgba(243,241,237,.85);opacity:var(--cue-alpha,1);pointer-events:none;animation:cue 2.2s ease-in-out infinite}
.pullback .scroll-cue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
/* F: the room. The real studio photo is the stage, and the drawn monitor sits exactly where the real one is,
   so the real speakers, desk and arm frame a crisp screen. */
body.room .studio-stage{height:100vh;min-height:620px}
body.room .studio-room{opacity:var(--room-alpha,1);animation:none;background-position:center center}
body.room .studio-room::after{background:linear-gradient(180deg,rgba(16,17,18,.7),rgba(16,17,18,0) 32%),linear-gradient(0deg,#101112,rgba(16,17,18,0) 12%)}
body.room .studio-wrap{position:static;display:block;width:100%;max-width:none;margin:0;padding:0;flex:1}
body.room .plate-copy{position:absolute;left:40px;top:calc(91px + 8px);z-index:3;animation:rise 1.2s .3s cubic-bezier(.2,.7,.2,1) both}
body.room .plate-copy .app-name{margin-bottom:6px}
body.room .plate-copy h1{font-size:2.2rem;margin-bottom:4px}
body.room .plate-copy .app-lead{font-size:15px}
body.room .studio-cta{position:absolute;right:40px;top:calc(91px + 10px);z-index:3;white-space:nowrap;gap:8px}
body.room .studio-cta .app-cta{flex-wrap:nowrap}
body.room .rig{position:absolute;left:calc(50% - max(5.2vh,2.9vw));top:calc(50% + max(3.8vh,2.14vw));width:max(144vh,81vw);margin:0;transform:translate(-50%,-50%);perspective:none;z-index:2}
body.room .rig .monitor-shot{max-width:none;margin:0;animation:none;-webkit-box-reflect:none}
body.room .rig .monitor{box-shadow:0 0 0 1px #2a2b2f,inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9),0 0 120px -10px var(--ambient,rgba(232,173,96,.25))}
body.room .stand{display:none}
body.room .studio-glow{top:calc(50% + max(3.24vh,1.82vw));width:76%;height:56%;opacity:.55}
body.room .under-rig{position:absolute;left:0;right:0;bottom:18px;z-index:3;animation:rise 1.2s .8s cubic-bezier(.2,.7,.2,1) both}
body.room .under-rig .image-credit{display:none}
@media(max-width:760px){body.room .studio-stage{height:auto;min-height:0}body.room .studio-wrap{position:relative;z-index:2;padding:22px 24px 36px}body.room .plate-copy,body.room .studio-cta,body.room .under-rig{position:static;opacity:1;animation:none}body.room .studio-cta{white-space:normal;margin-top:14px;align-items:stretch}body.room .studio-cta .app-cta{flex-wrap:wrap;justify-content:flex-start}body.room .studio-cta .compat{text-align:left}body.room .rig{position:static;width:auto;transform:none;margin-top:8px}body.room .rig-cam{transform:none!important}body.room .under-rig{margin-top:14px}body.room .studio-room::after{background:linear-gradient(180deg,rgba(16,17,18,.75),rgba(16,17,18,.35) 40%,#101112 100%)}}
@media(max-width:760px){
 .studio{margin-top:-75px}.studio-stage{padding-top:75px;min-height:0}
 .studio-wrap{grid-template-columns:1fr;align-items:start;padding-block:22px 36px}
 .studio h1{font-size:2.2rem}.studio .app-lead{font-size:16px}
 .studio-cta{align-items:stretch}.studio .app-cta{justify-content:flex-start}.studio .compat{text-align:left;white-space:normal}
 .rig{perspective:none;margin-top:8px}.rig .monitor-shot{max-width:none;margin-bottom:0;-webkit-box-reflect:none;animation:none}
 .studio-glow{width:140%;height:36%;top:60%}
 .scenes{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.scenes button{white-space:nowrap}
 .under-rig .image-credit{text-align:left}
 .nameplate{padding:8px 24px}.plate-text{display:none}.nameplate .secondary{display:none}
 .thesis{padding-top:84px}.thesis-line{font-size:38px}.feature-grid{grid-template-columns:1fr;gap:30px;margin-top:48px}.tour{margin-top:64px}.connector{height:110px}
 .chapter-line{font-size:30px}.chapters .monitor-shot+.chapter-line{margin-top:64px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:36px 0}
 .pullback .studio{height:auto}.pullback .studio-stage{position:static;height:auto}.pullback .plate-copy,.pullback .studio-cta,.pullback .under-rig{opacity:1}.pullback .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){.nameplate{animation:none}}
/* Wider than 16:9 (an ultrawide, for one): the room plate is fitted to the height and faded at the sides, and the monitor is sized by the height, so the copy and the chips keep clear of it. */
@media(min-aspect-ratio:16/9){body.room .studio-room{background-size:auto 100%}body.room .studio-room::after{background:linear-gradient(90deg,#101112 0%,rgba(16,17,18,0) 18%,rgba(16,17,18,0) 82%,#101112 100%),linear-gradient(180deg,rgba(16,17,18,.7),rgba(16,17,18,0) 32%),linear-gradient(0deg,#101112,rgba(16,17,18,0) 12%)}body.room .rig{width:144vh;left:calc(50% - 5.2vh);top:calc(50% + 3.8vh)}body.room .studio-glow{width:120vh}}