/* adobe-premiere-tips.com — Premiere Pro palette taken from the app icon.
   #00005B (icon ground) / #9999FF (glyph, dark grounds only, 2.5:1 on white)
   #4141C4 (same family, 7.6:1 on white — all text and links)                */

:root{
  --band:#00005B; --brand:#9999FF; --deep:#4141C4; --tint:#EDEDFF;
  --ground:#F3F4F8; --surface:#FFFFFF; --ink:#14161F; --ink2:#23283A;
  --meta:#39415C; --rule:#E1E3EC; --free:#1C7A52;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --grotesk:"Archivo","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--jp);
  font-size:18px;line-height:2;-webkit-font-smoothing:antialiased;
  text-size-adjust:100%;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep)}
:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:4px}

/* ---------------- header ---------------- */
.head{background:var(--band);color:#F2F2F6}
.head__in{max-width:1080px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:inherit;
  min-width:0;overflow:hidden}
.logo .mk{font-family:var(--grotesk);font-weight:700;font-size:25px;
  letter-spacing:-.015em;color:#fff;white-space:nowrap}
.logo .mk i{font-style:normal;color:var(--brand)}
.logo .tg{font-size:15px;color:#C9CCE4;white-space:nowrap}
.nav{display:flex;gap:24px;font-size:16.5px;flex:none}
.nav a{color:#DFE1F2;text-decoration:none;padding:4px 0;
  transition:color .15s,box-shadow .15s}
.nav a:hover{color:#fff;box-shadow:inset 0 -2px 0 var(--brand)}

/* ---------------- layout ---------------- */
.wrap{max-width:1080px;margin:0 auto;padding:26px 24px 70px;
  display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:32px;align-items:start}
.col{min-width:0}
.sect{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.sect h1{font-size:17.5px;font-weight:700;margin:0;letter-spacing:.02em}
.sect .ln{flex:1;height:1px;background:var(--rule)}

.cat{display:inline-block;font-size:15px;font-weight:700;letter-spacing:.04em;
  color:var(--deep);background:var(--tint);padding:3px 9px;border-radius:2px;
  text-decoration:none;margin-right:6px}
.cat:hover{background:#E0E0FC}
time{display:block;font-family:var(--mono);font-size:15px;color:var(--meta);
  margin-top:8px;font-variant-numeric:tabular-nums}

/* ---------------- listing ---------------- */
.lead{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  overflow:hidden;margin-bottom:22px}
.lead__img{width:100%}
.lead__bd{padding:18px 22px 22px}
.lead h2{font-size:25px;font-weight:700;line-height:1.6;margin:12px 0 0;letter-spacing:.005em}
.lead h2 a{color:inherit;text-decoration:none}
.lead h2 a:hover{color:var(--deep)}

.row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.row:last-of-type{border-bottom:0}
.row__a{flex:none;display:block}
.row__th{width:150px;height:92px;border-radius:4px;object-fit:cover;background:#E4E6EF}
.row__tx{min-width:0}
.row h3{font-size:17.5px;font-weight:500;line-height:1.65;margin:9px 0 0}
.row h3 a{color:inherit;text-decoration:none}
.row h3 a:hover{color:var(--deep)}

/* ---------------- ads ---------------- */
.ad{border-radius:5px;overflow:hidden}
/* Auto ads inject units we do not control; keep them inside the column so a wide
   creative can never push the page sideways. */
ins.adsbygoogle{max-width:100%!important;overflow:hidden}
.ad[data-ad-pending]{border:1px dashed #B7B9CA;background:#FAFAFE}
.ad[data-ad-pending]::after{content:"AdSense";display:flex;align-items:center;
  justify-content:center;height:100%;font-family:var(--mono);font-size:15px;
  letter-spacing:.14em;color:#5A607A}
/* No fixed reservation: a blocked or unfilled unit would otherwise leave a
   permanent blank gap. The unit sizes itself once an ad actually renders. */
.ad--feed{margin:18px 0}
.ad--art{margin:26px 0}
.ad:has(ins[data-ad-status="unfilled"]){display:none}

/* ---------------- sidebar ---------------- */
/* Nothing in this column sticks.
   A sticky column taller than the viewport can never be scrolled to its end,
   and a sticky ad paints over the cards that follow it — both were reported as
   "the lower half of the sidebar is unreachable". Plain flow avoids both. */
.side{display:flex;flex-direction:column;gap:18px;align-self:start}
.side > *{flex:none}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.card h2{font-size:16px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:3px;height:14px;background:var(--deep);border-radius:1px}
.pop{margin:0;padding:0;list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:11px}
.pop li{counter-increment:p;font-size:16px;line-height:1.65;padding-left:26px;position:relative}
.pop li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;
  font-family:var(--mono);font-size:15px;color:var(--deep);font-weight:500}
.pop a{color:var(--ink);text-decoration:none}
.pop a:hover{color:var(--deep)}
.tools{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.tools li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:16px}
.tools a{color:var(--ink);text-decoration:none}
.tools a:hover{color:var(--deep)}
.tools b{font-family:var(--mono);font-size:15.5px;color:var(--deep);font-weight:500;flex:none}
.tools b.free{color:var(--free)}
.more{display:block;margin-top:13px;font-size:15.5px;color:var(--deep);text-decoration:none}
.more:hover{text-decoration:underline}

/* ---------------- article ---------------- */
.ahero{background:var(--surface);border-bottom:1px solid var(--rule)}
.ahero__in{max-width:1080px;margin:0 auto;padding:28px 24px 24px}
.ahero h1{font-size:33px;font-weight:700;line-height:1.6;margin:12px 0 0;
  letter-spacing:.005em;max-width:26em;text-wrap:balance}
.art{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:26px 34px 34px;min-width:0}
.art .kv{border-radius:5px;margin-bottom:24px;width:100%}
.art .c p{font-size:18px;line-height:2.1;margin:0 0 18px;color:var(--ink2)}
.art .c p.fig{margin:22px 0}
.art .c img{border-radius:4px;border:1px solid var(--rule)}
.art .c h3{font-size:23px;font-weight:700;margin:32px 0 14px;padding-left:12px;
  border-left:4px solid var(--deep);line-height:1.6}
.art .c h2{font-size:25px;font-weight:700;margin:34px 0 14px;padding-bottom:8px;
  border-bottom:2px solid var(--rule);line-height:1.6}
.art .c ul{margin:0 0 18px;padding-left:1.3em}
.art .c li{font-size:18px;line-height:2;color:var(--ink2)}
.art .c strong{font-weight:700;color:var(--ink)}
.art .c code{font-family:var(--mono);font-size:.9em;background:#F1F2F8;
  padding:2px 6px;border-radius:3px}
.art .c hr{border:0;border-top:1px solid var(--rule);margin:28px 0}
.toc{background:#F6F7FD;border:1px solid #DCDFF3;border-radius:5px;
  padding:16px 20px;margin-bottom:26px}
.toc div{font-size:16px;font-weight:700;color:var(--deep);margin-bottom:8px}
.toc ol{margin:0;padding-left:1.4em}
.toc li{font-size:17px;line-height:1.9;color:var(--ink2)}
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;padding-top:20px;
  border-top:1px solid var(--rule)}
.tagrow a{font-size:15.5px;color:var(--meta);text-decoration:none;
  border:1px solid var(--rule);border-radius:3px;padding:3px 10px}
.tagrow a:hover{color:var(--deep);border-color:var(--deep)}
/* Article call to action — the buy / download link, made unmissable. */
.cta{margin:30px 0 26px;text-align:center}
.cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  max-width:100%;background:var(--deep);color:#fff;text-decoration:none;
  font-size:17px;font-weight:700;line-height:1.5;padding:16px 32px;border-radius:6px;
  box-shadow:0 2px 0 #2C2C93;transition:background-color .15s,transform .1s,box-shadow .1s}
.cta__btn::after{content:"→";font-weight:400}
.cta__btn:hover{background:#33339E}
.cta__btn:active{transform:translateY(2px);box-shadow:0 0 0 #2C2C93}

figure{margin:26px 0}
figure.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:5px;display:block}
figure iframe{max-width:100%;border:0}
/* The two embedded tools carry a hard width="800px"; without this they spill
   out of the column and sit on top of the sidebar. */
.art .c iframe{max-width:100%;border:0}
figcaption{font-size:16px;color:var(--meta);margin-top:9px;line-height:1.7}

/* ---------------- tools page ---------------- */
.tools-wrap{max-width:1080px;margin:0 auto;padding:26px 24px 80px}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.tool{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column}
/* Tool artwork is heterogeneous (1200x1200 product shots and wide article banners),
   so it is contained rather than cropped — the text baked into these images matters. */
.tool__im{display:block;background:#EBEDF5}
.tool__im img{width:100%;aspect-ratio:16/9;object-fit:contain}
.tool__bd{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.os{font-family:var(--mono);font-size:15px;letter-spacing:.1em;color:var(--meta)}
.tool h2{font-size:21px;font-weight:700;margin:7px 0 0;line-height:1.5}
.tool p{font-size:16.5px;color:var(--meta);line-height:1.85;margin:10px 0 0;flex:1}
.tool__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.pr{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--deep);
  font-variant-numeric:tabular-nums}
.pr.free{color:var(--free)}
.bt{font-size:16px;font-weight:700;color:#fff;background:var(--deep);
  padding:8px 16px;border-radius:4px;text-decoration:none;
  transition:background-color .15s}
.bt:hover{background:#33339E}
.tool .more{margin-top:12px}

/* ---------------- 404 ---------------- */
.nf{padding-top:60px}
.nf h1{font-size:28px;margin:0 0 12px}

/* ---------------- footer ---------------- */
.foot{background:var(--band);color:#C9CCE4;margin-top:40px}
.foot__in{max-width:1080px;margin:0 auto;padding:30px 24px 34px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.foot strong{display:block;font-family:var(--grotesk);font-size:18px;color:#fff}
.foot span{font-size:15.5px}
.foot nav{display:flex;gap:20px;margin-left:auto;font-size:16px}
.foot a{color:#DFE1F2;text-decoration:none}
.foot a:hover{color:#fff}
.foot small{font-size:15px;width:100%;color:#B9BEDE}

/* ---------------- responsive (keep last: same specificity, later wins) ------- */
@media (max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .head__in{padding:0 16px;height:56px;gap:12px}
  .logo .tg{display:none}
  .logo .mk{font-size:21px}
  .nav{gap:16px;font-size:16px}
  .wrap{padding:18px 16px 56px;gap:24px}
  .lead h2{font-size:21px}
  .lead__bd{padding:14px 16px 18px}
  .row{gap:13px;padding:14px 0}
  .row__th{width:104px;height:64px}
  .row h3{font-size:17px;margin-top:7px}
  .ahero__in{padding:20px 16px 18px}
  .ahero h1{font-size:25px}
  .art{padding:18px 18px 24px;border-radius:5px}
  .art .c p,.art .c li{font-size:17.5px;line-height:2.05}
  .art .c h3{font-size:19px;margin-top:26px}
      .tools-wrap{padding:22px 16px 60px}
  .foot__in{padding:24px 16px 28px}
  .foot nav{margin-left:0;width:100%;flex-wrap:wrap;gap:16px}
}
@media (max-width:400px){
  .head__in{padding:0 13px}
  .logo .mk{font-size:18px}
  .nav{gap:12px;font-size:15px}
  .row__th{width:92px;height:58px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}