@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/kanit/400-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/kanit/400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:500;src:url('/fonts/kanit/500-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:500;src:url('/fonts/kanit/500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/kanit/600-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/kanit/600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root {
  --radius: 0.75rem;

  /* Paper and ink. Warm off-white page, white surfaces, green-black text. */
  --background: oklch(0.984 0.004 100);
  --foreground: oklch(0.2 0.018 165);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.967 0.006 100);

  /* One brand colour: "done" emerald. Amber only for warnings. */
  --brand: oklch(0.53 0.125 162);
  --brand-ink: oklch(0.4 0.095 162);
  --brand-soft: oklch(0.95 0.035 162);
  --amber: oklch(0.8 0.14 78);
  --amber-soft: oklch(0.96 0.045 85);

  --primary: var(--brand);
  --primary-foreground: oklch(0.99 0.004 160);
  --muted: var(--surface-2);
  --muted-foreground: oklch(0.47 0.016 165);
  --destructive: oklch(0.55 0.19 27);
  --border: oklch(0.91 0.008 110);
  --input: oklch(0.88 0.01 110);
  --ring: oklch(0.62 0.12 162);

  /* Elevation: a thin top highlight + two soft drop shadows reads as depth, not blur. */
  --shadow-color: 165 30% 12%;
  --elev-1: 0 1px 0 0 oklch(1 0 0 / 0.9) inset, 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 2px 6px -2px hsl(var(--shadow-color) / 0.08);
  --elev-2: 0 1px 0 0 oklch(1 0 0 / 0.9) inset, 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 10px 24px -10px hsl(var(--shadow-color) / 0.16),
    0 28px 56px -28px hsl(var(--shadow-color) / 0.22);
  --elev-3: 0 1px 0 0 oklch(1 0 0 / 0.95) inset, 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 18px 40px -16px hsl(var(--shadow-color) / 0.22),
    0 50px 90px -40px hsl(var(--shadow-color) / 0.3);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.155 0.01 165);
    --foreground: oklch(0.955 0.006 110);
    --surface: oklch(0.195 0.012 165);
    --surface-2: oklch(0.235 0.013 165);

    --brand: oklch(0.78 0.145 162);
    --brand-ink: oklch(0.84 0.12 162);
    --brand-soft: oklch(0.29 0.05 162);
    --amber: oklch(0.82 0.14 78);
    --amber-soft: oklch(0.3 0.05 78);

    --primary: var(--brand);
    --primary-foreground: oklch(0.2 0.03 165);
    --muted-foreground: oklch(0.72 0.014 150);
    --destructive: oklch(0.7 0.17 25);
    --border: oklch(1 0 0 / 0.09);
    --input: oklch(1 0 0 / 0.14);
    --ring: oklch(0.72 0.13 162);

    --shadow-color: 165 40% 2%;
    --elev-1: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 1px 2px hsl(var(--shadow-color) / 0.5);
    --elev-2: 0 1px 0 0 oklch(1 0 0 / 0.06) inset, 0 12px 28px -12px hsl(var(--shadow-color) / 0.7), 0 30px 60px -30px hsl(var(--shadow-color) / 0.8);
    --elev-3: 0 1px 0 0 oklch(1 0 0 / 0.07) inset, 0 20px 44px -18px hsl(var(--shadow-color) / 0.8), 0 60px 100px -40px hsl(var(--shadow-color) / 0.9);
  }
}

*,*::before,*::after{box-sizing:border-box;border-color:var(--border)}
html{font-family:Kanit,ui-sans-serif,system-ui,sans-serif;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color-scheme:light dark;scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.65;position:relative;isolation:isolate;min-height:100dvh;display:flex;flex-direction:column}
h1,h2,h3{font-weight:600;line-height:1.25;letter-spacing:-0.01em;text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}
strong,b{font-weight:500}
a{color:var(--brand-ink);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand-soft);color:var(--brand-ink)}
img{max-width:100%}

/* The faint grid behind the top of the page, as on the front page. */
.paper-grid{position:absolute;inset:0 0 auto 0;height:34rem;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,color-mix(in oklch,var(--foreground) 5%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 5%,transparent) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,black 30%,transparent 75%)}

.wrap{width:100%;max-width:72rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.wrap{padding:0 1.5rem}}

/* The key: the logo's mark and the main button, the same shape as on the front page. */
.keycap{--key-top:oklch(0.62 0.13 162);--key-face:oklch(0.52 0.125 162);--key-skirt:oklch(0.36 0.09 162);--key-ink:oklch(0.99 0.01 160);position:relative;display:inline-grid;place-items:center;color:var(--key-ink);background:linear-gradient(180deg,var(--key-top) 0%,var(--key-face) 100%);border-radius:28%;box-shadow:0 1px 0 0 oklch(1 0 0 / 0.95) inset,0 -2px 0 0 oklch(0 0 0 / 0.04) inset,0 5px 0 0 var(--key-skirt),0 6px 1px 0 oklch(0 0 0 / 0.06),0 14px 22px -10px oklch(0.3 0.05 162 / 0.35);transform:translateY(-2px);transition:transform .16s cubic-bezier(.3,.7,.4,1.4),box-shadow .16s ease;text-decoration:none}
@media(prefers-color-scheme:dark){.keycap{--key-top:oklch(0.8 0.14 162);--key-face:oklch(0.72 0.14 162);--key-skirt:oklch(0.45 0.1 162);--key-ink:oklch(0.18 0.03 165);box-shadow:0 1px 0 0 oklch(1 0 0 / 0.12) inset,0 5px 0 0 var(--key-skirt),0 14px 24px -10px oklch(0 0 0 / 0.7)}}
a.keycap:active{transform:translateY(2px);box-shadow:0 1px 0 0 oklch(1 0 0 / 0.9) inset,0 1px 0 0 var(--key-skirt),0 3px 6px -3px oklch(0 0 0 / 0.2)}

.top{display:flex;align-items:center;gap:.5rem;height:4rem}
.logo{display:inline-flex;align-items:center;gap:.625rem;color:var(--foreground);text-decoration:none;font-size:1.125rem;font-weight:600;letter-spacing:-0.025em;border-radius:.75rem}
.logo .mark{width:2rem;height:2rem;flex:none;border-radius:.5rem}
.logo b{font-weight:600;color:var(--brand)}
.menu{display:flex;margin-left:1rem}
.menu a{border-radius:.5rem;padding:.375rem .625rem;font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground);text-decoration:none;transition:background .15s,color .15s}
.menu a:hover{background:var(--surface);color:var(--foreground)}
.menu a[aria-current]{color:var(--foreground)}
.menu a.own{color:var(--brand-ink)}
.menu a[hidden]{display:none}
.promise{margin-left:auto;display:flex;align-items:center;gap:.375rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:.375rem .75rem;font-size:.75rem;line-height:1rem;color:var(--muted-foreground);box-shadow:var(--elev-1);white-space:nowrap}
.promise svg,.foot svg{width:.875rem;height:.875rem;color:var(--brand);flex:none}
@media(min-width:640px){.promise{font-size:.875rem;line-height:1.25rem}}
/* As on the front page: the menu is for wide screens; a phone or tablet keeps the logo and the promise. */
@media(max-width:1023px){.menu{display:none}}

main{padding-top:1.5rem;padding-bottom:4rem;flex:1;width:100%}
.meta{font-size:.875rem;color:var(--muted-foreground)}
.meta a{color:inherit}
.crumbs{display:flex;flex-wrap:wrap;gap:.375rem;font-size:.875rem;color:var(--muted-foreground);list-style:none;margin:0 0 1rem;padding:0}
.crumbs li+li::before{content:'›';margin-right:.375rem}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--foreground);text-decoration:underline}
.tag{display:inline-flex;align-items:center;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);padding:.2rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none}

/* An article: one column at a width that reads well in Thai. */
article.post{max-width:46rem;margin:0 auto}
.post h1{margin-top:1rem;font-size:clamp(1.85rem,4.4vw,2.75rem);line-height:1.3;letter-spacing:-0.02em}
.post .meta{margin-top:.875rem}
figure{margin:1.75rem 0 0}
.cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.25rem;border:1px solid var(--border);background:var(--surface-2);box-shadow:var(--elev-2)}
figcaption{margin-top:.625rem;font-size:.75rem;color:var(--muted-foreground)}
.intro{margin-top:1.75rem;font-size:1.1875rem;line-height:1.8;color:var(--foreground)}
.card{border:1px solid var(--border);border-radius:1rem;background:var(--surface);box-shadow:var(--elev-1)}
.toc{margin-top:1.75rem;padding:1.25rem 1.5rem}
.toc strong{font-size:.875rem;color:var(--muted-foreground);font-weight:500}
/* The headings carry their own numbers, so the list adds none. */
.toc ol{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.25rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.post section{scroll-margin-top:1.5rem}
.post h2{margin:2.75rem 0 .75rem;font-size:1.5rem;line-height:1.4}
.post section p,.post section li{font-size:1.0625rem;line-height:1.9}
.post section p+p{margin-top:1rem}
.post ul{margin:.75rem 0 0;padding-left:1.25rem;display:grid;gap:.5rem}
.post li::marker{color:var(--brand)}
.faq h3{margin:1.5rem 0 .375rem;font-size:1.125rem;line-height:1.5}
.more-to-read{margin-top:3rem}
.more-to-read>h2{font-size:1.375rem;margin:0}
.more-to-read .grid{margin-top:1rem;grid-template-columns:repeat(auto-fill,minmax(min(13rem,100%),1fr))}
.more-to-read .grid h3{font-size:1rem;line-height:1.5;font-weight:500}
.cta{margin-top:3rem;padding:1.5rem;display:grid;gap:.75rem;justify-items:start;background:var(--brand-soft);border-color:transparent}
.cta h2{margin:0;font-size:1.375rem}
.cta p{color:var(--foreground)}
.button{min-height:3rem;padding:0 1.5rem;border-radius:.875rem;font-size:1rem;font-weight:500;margin-top:.5rem}

/* The list of articles. */
.lead{max-width:46rem;margin-top:1.5rem}
.lead h1{margin-top:1rem;font-size:clamp(2rem,5vw,3.25rem);line-height:1.2;letter-spacing:-0.02em}
.lead h1 em{font-style:normal;color:var(--brand)}
.lead .intro{color:var(--muted-foreground);font-size:1.125rem;margin-top:1rem}
.chips{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:.3rem .875rem;font-size:.875rem;color:var(--foreground);text-decoration:none;box-shadow:var(--elev-1)}
.chips a:hover{border-color:var(--brand)}
.chips small{color:var(--muted-foreground);font-size:.75rem;margin-left:.25rem}
.shelf{margin-top:3rem;scroll-margin-top:1.5rem}
.shelf>h2{font-size:1.5rem}
.shelf>p{margin-top:.25rem;color:var(--muted-foreground)}
.shelf .grid{margin-top:1.25rem}
.grid{margin-top:2.25rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:1rem}
.grid .card{overflow:hidden;display:grid;align-content:start;transition:box-shadow .2s,transform .2s}
.grid .card:hover{box-shadow:var(--elev-2);transform:translateY(-2px)}
.grid .card>a{display:block;color:inherit;text-decoration:none}
.grid .cover{border-radius:0;border:0;border-bottom:1px solid var(--border);box-shadow:none}
.grid .body{padding:1rem 1.125rem 1.25rem;display:grid;gap:.5rem}
.grid h3{font-size:1.1875rem;line-height:1.45;font-weight:600;margin:0}
.grid p.sum{font-size:.9375rem;color:var(--muted-foreground)}
.grid .more{font-size:.875rem;font-weight:500;color:var(--brand-ink)}

/* The product page of the Premiere Pro panel, and its install guide. */
.product{max-width:60rem;margin:0 auto}
.product .hero{margin-top:1.5rem;max-width:46rem}
.product h1{margin-top:1rem;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.15;letter-spacing:-0.02em}
.product h1 em{font-style:normal;color:var(--brand)}
.product .intro{color:var(--muted-foreground)}
.buy{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.buy .button{margin-top:0}
.buy .price{font-size:1.5rem;font-weight:600;letter-spacing:-0.02em}
.buy .price s{font-size:1.0625rem;font-weight:400;color:var(--muted-foreground);margin-right:.125rem}
.buy .price .alt{font-size:1rem;font-weight:400;color:var(--muted-foreground);letter-spacing:0;margin-left:.375rem}
.buy small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted-foreground);letter-spacing:0}
.quiet{display:inline-flex;align-items:center;min-height:3rem;padding:0 1.25rem;border:1px solid var(--border);border-radius:.875rem;background:var(--surface);color:var(--foreground);text-decoration:none;font-weight:500;box-shadow:var(--elev-1)}
.quiet:hover{border-color:var(--brand)}
.product section{margin-top:3.25rem}
.product section>h2{font-size:1.625rem;line-height:1.35}
.product section>p.sub{margin-top:.375rem;color:var(--muted-foreground)}
.tabs{margin-top:1.25rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:.75rem}
.tabs .card{padding:1rem 1.125rem}
.tabs h3{font-size:1.0625rem;color:var(--brand-ink)}
.tabs p{margin-top:.25rem;font-size:.9375rem;color:var(--muted-foreground)}
.shots{margin:2.25rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1rem}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border-radius:1rem;border:1px solid var(--border);box-shadow:var(--elev-2);background:#0e1512}
.shots figcaption{margin-top:.5rem;text-align:center}
@media(max-width:640px){.shots{grid-template-columns:repeat(2,1fr)}}
.facts{margin:1.25rem 0 0;display:grid;gap:.5rem}
.facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:.875rem;background:var(--surface)}
.facts dt{color:var(--muted-foreground);font-size:.9375rem}
.facts dd{margin:0}
@media(max-width:520px){.facts div{grid-template-columns:1fr;gap:.125rem}}
.know{margin:1.25rem 0 0;padding:1.25rem 1.25rem 1.25rem 2.5rem;display:grid;gap:.625rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface)}
.know li::marker{color:var(--brand)}
.steps{margin:1rem 0 0;padding-left:1.5rem;display:grid;gap:.625rem;font-size:1.0625rem;line-height:1.8}
.steps li::marker{color:var(--brand);font-weight:600}
.guide-shot{margin:.75rem 0 .25rem}
.guide-shot img{display:block;max-width:100%;height:auto;border-radius:.75rem;border:1px solid var(--border);box-shadow:var(--elev-1)}
.quiet-note{margin-top:.75rem;font-size:.9375rem;color:var(--muted-foreground)}
.warn{margin-top:1rem;padding:.875rem 1rem;border-radius:.875rem;background:var(--brand-soft);color:var(--foreground);font-size:.9375rem}
.legal{margin-top:3rem;font-size:.8125rem;color:var(--muted-foreground)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface-2);padding:.1em .35em;border-radius:.375rem;overflow-wrap:anywhere}

.foot{border-top:1px solid var(--border)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding-top:1.5rem;padding-bottom:1.5rem;font-size:.875rem;color:var(--muted-foreground)}
.foot .note{margin-left:auto;display:flex;align-items:center;gap:.375rem}

.skip{position:absolute;left:-10000px}
.skip:focus{left:.75rem;top:.75rem;z-index:10;background:var(--surface);color:var(--foreground);padding:.75rem 1rem;border-radius:.75rem;box-shadow:var(--elev-2)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}