/* Layout: dark and Premiere native. Home is three color bands, one per tool. A tool page is name, price,
   one big video and four short tiles. Colors are Premiere label colors: Mango, Violet, Caribbean. */
:root{
  color-scheme:dark;
  --bg:#0E0F12; --panel:#16171B; --panel-2:#1F2025; --panel-3:#2A2C32; --line:#2C2E35;
  --ink:#F1F2F4; --dim:#9096A2; --on-color:#121316;
  --playhead:#5B9DFF; --clip:#7486D6; --audio:#4E9460; --title:#D98AB5;
  --reuse:#F0A93E; --nest:#A083F5; --motion:#2CC0AE; --yt:#E5484D;
  --sky-1:#2A3766; --sky-2:#5A6FB0; --ground:#1A2136; --skin:#E8B996;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-stretch:115%;font-weight:800;letter-spacing:-.015em;line-height:.98;text-wrap:balance}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--playhead);outline-offset:3px;border-radius:8px}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mark{display:grid;gap:3px;width:24px;flex:none}
.mark i{display:block;height:5px;border-radius:2px}
.mark i:nth-child(1){background:var(--reuse);width:58%;margin-left:42%}
.mark i:nth-child(2){background:var(--nest);width:78%;margin-left:8%}
.mark i:nth-child(3){background:var(--motion)}
.brand-name{font-family:var(--display);font-stretch:115%;font-weight:760;font-size:17px}
.nav{display:flex;gap:2px}
.nav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--dim);font-size:14px;font-weight:600;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--c);color:var(--on-color)}
@media (max-width:540px){.brand-name{display:none}.nav a{padding:6px 9px;font-size:13px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--c,var(--ink));color:var(--on-color);text-decoration:none;font-weight:700;font-size:15px;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}

/* ---------- home ---------- */
.intro{padding-block:clamp(48px,8vw,104px) clamp(28px,4vw,44px)}
.intro h1{font-size:clamp(46px,7.4vw,100px)}
.intro p{margin-top:16px;font-size:clamp(17px,1.8vw,21px);color:var(--dim)}
.bands{display:grid;gap:14px}
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;gap:24px 40px;padding:clamp(22px,3.6vw,44px);border-radius:var(--r);background:var(--c);color:var(--on-color);text-decoration:none;transition:transform .25s ease}
.band:hover{transform:translateY(-3px)}
@media (max-width:760px){.band{grid-template-columns:minmax(0,1fr)}}
.band h2{font-size:clamp(44px,6.4vw,88px)}
.band p{margin-top:10px;font-size:clamp(17px,1.9vw,22px);font-weight:600}
.go{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:9px 18px;border-radius:999px;background:var(--on-color);color:var(--ink);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.go::after{content:"→";transition:transform .2s ease}
.band:hover .go::after{transform:translateX(4px)}
.bundle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-block:14px clamp(56px,8vw,96px);padding:18px 18px 18px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.bundle-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-weight:600;font-size:17px}
.bundle-name span{color:var(--dim);font-weight:500;font-size:15px}
.bundle .btn{--c:var(--ink)}

/* band artwork */
.art{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:var(--on-color)}
.art-grid{position:absolute;inset:8%;display:grid;grid-template-columns:1fr 1fr;gap:6%}
.art-grid .thumb:first-child{box-shadow:0 0 0 3px var(--reuse)}
.art-nest i{position:absolute;left:10%;right:10%;height:12%;top:calc(24% + var(--row) * 17%);border-radius:4px;background:var(--clip);animation:unnest 5s cubic-bezier(.3,.7,.2,1) infinite}
.art-nest i:first-child{background:var(--nest);animation-name:nestfade}
.art-nest .t{background:var(--title);right:48%}
.art-nest .a{background:var(--audio)}
@keyframes unnest{0%,30%,100%{opacity:0;transform:translateY(calc(var(--dy) * 142%))}45%,85%{opacity:1;transform:none}}
@keyframes nestfade{0%,30%,100%{opacity:1}45%,85%{opacity:0}}
.art-motion{position:absolute;inset:0;animation:punch 5s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes punch{0%,30%,100%{transform:none}45%,85%{transform:translate(-23%,2.5%) scale(1.5)}}

/* ---------- tool page ---------- */
.tool-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:28px 40px;padding-block:clamp(44px,7vw,88px) clamp(24px,3.5vw,40px)}
.kicker{display:inline-flex;align-items:center;gap:9px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kicker i{width:16px;height:10px;border-radius:2px;background:var(--c)}
.tool-top h1{margin-top:14px;font-size:clamp(56px,10vw,132px)}
.tagline{margin-top:14px;font-size:clamp(19px,2.2vw,26px);font-weight:600;color:var(--c)}
.buybox{display:grid;justify-items:start;gap:12px}
.amount{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:clamp(44px,5vw,60px);line-height:1;font-variant-numeric:tabular-nums}
.req{font:500 12px var(--mono);color:var(--dim)}
.player{margin:0;padding:clamp(12px,3vw,40px);border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 20%,var(--panel)) 0%,var(--panel) 62%)}
.player > *{max-width:880px;margin-inline:auto}
.player video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:var(--on-color)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
@media (max-width:820px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tiles li{padding:18px 18px 20px;border-radius:12px;background:var(--panel);border-top:3px solid var(--c);font-size:clamp(16px,1.6vw,18px);font-weight:600;line-height:1.3}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.facts li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--dim)}
.install{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 32px;margin-top:clamp(48px,7vw,80px);padding:22px 24px;border:1px solid var(--line);border-radius:var(--r)}
@media (max-width:760px){.install{grid-template-columns:minmax(0,1fr)}}
.install h2{font-size:26px}
.install ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin:0;padding:0;list-style:none;counter-reset:s}
@media (max-width:760px){.install ol{grid-template-columns:minmax(0,1fr)}}
.install li{display:flex;gap:12px;align-items:baseline;counter-increment:s;font-weight:500}
.install li::before{content:counter(s);display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--c);color:var(--on-color);font:700 12px var(--mono);transform:translateY(-1px)}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:14px clamp(56px,8vw,96px)}
@media (max-width:640px){.more{grid-template-columns:minmax(0,1fr)}}
.more a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:var(--r);background:var(--c);color:var(--on-color);text-decoration:none}
.more b{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:26px}
.more a .go{margin:0}

/* ---------- the dark Premiere stage used by the demos ---------- */
.stage{min-width:0;overflow:hidden;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);color:var(--dim)}
.stage-bar b{font-weight:500;color:var(--ink)}
.tl{position:relative;padding:10px 12px 14px;--head:30px;--rowh:26px}
.ruler{display:flex;justify-content:space-between;margin-left:var(--head);padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--line);font:10px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.track{display:grid;grid-template-columns:var(--head) minmax(0,1fr);align-items:center;height:var(--rowh)}
.track + .track{margin-top:3px}
.track b{font:500 10.5px var(--mono);color:var(--dim)}
.lane{position:relative;height:100%;background:var(--panel-2);border-radius:3px}
.clip{position:absolute;top:2px;bottom:2px;left:calc(var(--x) * 1%);width:calc(var(--w) * 1%);display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:3px;background:var(--clip);color:var(--on-color);font:600 10px/1 var(--body)}
.c-reuse{background:var(--reuse)} .c-nest{background:var(--nest)} .c-title{background:var(--title)} .au{background:var(--audio)}
.playhead{position:absolute;top:6px;bottom:10px;left:calc(12px + var(--head) + (100% - 24px - var(--head)) * var(--p,0));width:2px;margin-left:-1px;background:var(--playhead);pointer-events:none;transition:left .6s cubic-bezier(.3,.7,.2,1)}
.playhead::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:10px;background:var(--playhead);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

/* thumbnails (RE:USE elements) */
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:5px;background:var(--panel-3)}
.t-lower::before{content:"";position:absolute;left:8%;bottom:16%;width:48%;height:16%;border-radius:2px;background:var(--reuse)}
.t-lower::after{content:"";position:absolute;left:8%;bottom:36%;width:30%;height:7%;border-radius:2px;background:var(--ink)}
.t-kill::before{content:"KILLS 12";position:absolute;right:8%;top:12%;padding:2px 4px;border-radius:2px;background:var(--on-color);font:600 7.5px var(--mono);color:var(--reuse)}
.t-map{background:linear-gradient(115deg,var(--motion) 0 45%,var(--panel-3) 45% 100%)}
.pill{position:absolute;left:50%;top:50%;padding:3px 7px;border-radius:999px;background:var(--yt);font:700 7.5px var(--body);letter-spacing:.06em;color:var(--on-color);transform:translate(-50%,-50%);animation:pop 1.6s ease-in-out infinite}
.art .pill{font-size:11px;padding:5px 11px}
@keyframes pop{0%,100%{transform:translate(-50%,-50%) scale(.9)}40%{transform:translate(-50%,-50%) scale(1.12)}60%{transform:translate(-50%,-50%) scale(1)}}

/* RE:USE demo */
.rs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:560px){.rs{grid-template-columns:minmax(0,1fr)}}
.rs .gp{transition:box-shadow .3s}
.rs .cp{opacity:0;transform:translateY(-6px);transition:opacity .45s,transform .45s}
.marquee{position:absolute;top:30px;bottom:10px;left:calc(12px + var(--head) + (100% - 24px - var(--head)) * .265);width:calc((100% - 24px - var(--head)) * .235);border:1.5px dashed var(--ink);border-radius:4px;opacity:0;transition:opacity .3s}
[data-demo="reuse"][data-step="0"] .marquee{opacity:1}
[data-demo="reuse"][data-step="0"] .gp,[data-demo="reuse"][data-step="1"] .gp{box-shadow:0 0 0 1.5px var(--ink)}
[data-demo="reuse"][data-step="2"] .cp{opacity:1;transform:none}
[data-demo="reuse"] .playhead{--p:.27}
[data-demo="reuse"][data-step="2"] .playhead{--p:.66}
.rp{display:flex;flex-direction:column;gap:8px;padding:10px 12px 14px;border-left:1px solid var(--line)}
@media (max-width:560px){.rp{border-left:0;border-top:1px solid var(--line)}}
.rp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 11px var(--mono)}
.rp-tabs{display:flex;gap:2px;padding:2px;border-radius:6px;background:var(--panel-2)}
.rp-tabs i{padding:2px 7px;border-radius:4px;font-style:normal;font-size:9.5px;color:var(--dim)}
.rp-tabs i.on{background:var(--panel-3);color:var(--ink)}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.el{position:relative;margin:0;display:grid;gap:4px}
.el figcaption{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot,.fresh{position:absolute;inset:0 0 auto 0;aspect-ratio:16/9;border-radius:5px;transition:opacity .4s,transform .4s}
.slot{border:1px dashed var(--line)}
.fresh{opacity:0;transform:scale(.86);box-shadow:0 0 0 2px var(--reuse);overflow:hidden;background:var(--panel-3)}
.el-new figcaption{visibility:hidden}
[data-demo="reuse"]:not([data-step="0"]) .slot{opacity:0}
[data-demo="reuse"]:not([data-step="0"]) .fresh{opacity:1;transform:none}
[data-demo="reuse"]:not([data-step="0"]) .el-new figcaption{visibility:visible;color:var(--ink)}
.insert{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:3px;background:var(--reuse);font:700 7.5px var(--body);color:var(--on-color);opacity:0;transition:opacity .3s}
[data-demo="reuse"][data-step="2"] .insert{opacity:1}

/* NestFlow demo */
.nf .nest,.nf .inner{transition:opacity .5s ease,transform .55s cubic-bezier(.3,.7,.2,1)}
.nf .inner{opacity:0;transform:translateY(calc(var(--dy) * (var(--rowh) + 3px)))}
[data-demo="nest"][data-step="1"] .inner{opacity:1;transform:none;transition-delay:calc(var(--dy) * 60ms)}
[data-demo="nest"][data-step="1"] .nest{opacity:0}
[data-demo="nest"] .playhead{--p:.42}

/* Motion Library demo */
.ml{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:560px){.ml{grid-template-columns:minmax(0,1fr)}}
.monitor{display:grid;gap:10px;padding:14px}
.frame{position:relative;display:block;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:4px;background:var(--on-color)}
.layer{position:absolute;inset:0;transform:translate(calc((var(--px,960) - 960) / 19.2 * 1%),calc((var(--py,540) - 540) / 10.8 * 1%)) rotate(calc(var(--r,0) * 1deg)) scale(calc(var(--s,100) / 100));transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.scene{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 58%,var(--ground) 58.5%,var(--ground) 100%)}
.scene::before{content:"";position:absolute;left:8%;bottom:42%;width:34%;height:22%;background:var(--ground);clip-path:polygon(0 100%,30% 20%,55% 70%,78% 0,100% 100%)}
.cam{position:absolute;left:58%;top:30%;width:28%;aspect-ratio:1;border-radius:6%;background:var(--panel-3);overflow:hidden;box-shadow:0 0 0 2px var(--motion)}
.cam::before{content:"";position:absolute;left:34%;top:18%;width:32%;aspect-ratio:1;border-radius:50%;background:var(--skin)}
.cam::after{content:"";position:absolute;left:18%;top:58%;width:64%;height:60%;border-radius:40% 40% 0 0;background:var(--motion)}
.readout{font:500 11px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.readout b{font-weight:500;color:var(--playhead)}
.ml-panel{display:flex;flex-direction:column;gap:8px;padding:12px;border-left:1px solid var(--line)}
@media (max-width:560px){.ml-panel{border-left:0;border-top:1px solid var(--line)}}
.ml-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset{display:grid;gap:4px;padding:0;border:0;background:none;color:var(--dim);font-size:10.5px;text-align:left;cursor:pointer}
.preset .frame{box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s}
.preset .layer{transform:translate(calc((var(--px) - 960) / 19.2 * 1%),calc((var(--py) - 540) / 10.8 * 1%)) rotate(calc(var(--r) * 1deg)) scale(calc(var(--s) / 100));transition:none}
.preset[aria-pressed="true"]{color:var(--ink)}
.preset[aria-pressed="true"] .frame{box-shadow:0 0 0 2px var(--motion)}

/* ---------- footer, toast ---------- */
.foot{border-top:1px solid var(--line);padding-block:32px 44px;font-size:13.5px;color:var(--dim)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--ink)}
.mail{font-family:var(--mono);color:var(--ink);user-select:all}
.foot small{flex-basis:100%;font-size:12.5px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--on-color);font-size:14px;font-weight:500;transform:translateX(-50%)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- legal pages ---------- */
.doc{max-width:800px;padding-block:clamp(44px,7vw,88px) clamp(56px,8vw,96px)}
.doc h1{font-size:clamp(40px,6vw,64px)}
.doc .updated{margin-top:12px;font:500 12px var(--mono);color:var(--dim)}
.doc .lead{margin-top:24px;font-size:18px;color:var(--ink)}
.doc h2{margin-top:36px;font-size:22px}
.doc p,.doc li{margin-top:10px;color:var(--dim)}
.doc ul{margin:0;padding-left:20px}
.doc strong{font-weight:600;color:var(--ink)}