/* v1.33.0 the public website (site.py) - the studio's new look: light green ground, white cards, deep green actions.
   Mobile first; no web fonts from elsewhere (the studio's own Noto Sans Thai); no layout shift (sizes on media). */
@font-face { font-family: "Studio Sans"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/studio/web/font-thai.woff2) format("woff2-variations"), url(/studio/web/font-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Studio Sans"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/studio/web/font-latin.woff2) format("woff2-variations"), url(/studio/web/font-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 {
  --ink: #e8edf1; --ink2: #d8dfe4; --muted: #bfc6cb; --faint: #8b9399;
  --green: #0d578c; --green-deep: #0d4872; --green-hi: #35c27a; --tint: rgba(105, 211, 151, .14); --soft: rgba(20, 42, 60, .62);
  --ground: rgba(20, 42, 60, .62); --card: #0d2030; --edge: rgba(140, 195, 230, .302); --line: rgba(140, 195, 230, .248); --forest: #152531;
  --r: 16px; --r-sm: 10px; --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 24px rgba(0, 0, 0, .23);
  --wrap: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.7 "Studio Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 6vw, 48px); font-weight: 700; }
h2 { font-size: clamp(23px, 3.6vw, 31px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 650; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--green-hi); outline-offset: 2px; border-radius: 6px; }
.s-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.s-wrap--narrow { max-width: 780px; }
.s-muted { color: var(--muted); }
.s-skip { position: absolute; left: -9999px; top: 8px; background: var(--card); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.s-skip:focus { left: 8px; }
.s-preview { background: rgba(230, 198, 101, .14); color: #eddeb4; text-align: center; font-size: 14px; padding: 8px 16px; }

/* header */
.s-head { position: sticky; top: 0; z-index: 20; background: rgba(20, 42, 60, .558); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.s-head__in { display: flex; align-items: center; gap: 14px; min-height: 64px; flex-wrap: wrap; }
.s-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; }
.s-brand img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }
.s-nav { display: flex; gap: 4px; margin-left: auto; order: 2; }
.s-nav a { color: var(--ink2); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 15px; }
.s-nav a:hover, .s-nav a[aria-current] { background: var(--tint); color: var(--green-deep); }
.s-head__login { order: 3; }
@media (max-width: 640px) {
  .s-head__in { gap: 6px 10px; padding-top: 8px; padding-bottom: 6px; }
  .s-nav { order: 3; width: 100%; margin: 0 -6px; overflow-x: auto; }
  .s-head__login { order: 2; margin-left: auto; }
}

/* buttons */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--green); color: #fff; text-decoration: none; font-weight: 650; font-size: 16px; border: 1px solid var(--green);
  transition: background .15s, box-shadow .15s; }
.s-btn:hover { background: var(--green-deep); color: #fff; box-shadow: 0 6px 18px rgba(13, 87, 140, .22); }
.s-btn--ghost { background: var(--card); color: var(--green-deep); border-color: var(--edge); }
.s-btn--ghost:hover { background: var(--tint); color: var(--green-deep); box-shadow: none; }
.s-head .s-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.s-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* hero */
.s-hero { background: radial-gradient(1200px 520px at 85% -10%, rgba(105, 211, 150, .14) 0%, rgba(105, 211, 150, 0) 60%),
  linear-gradient(180deg, rgba(20, 42, 60, .62) 0%, var(--ground) 100%); padding: 48px 0 40px; }
.s-hero__in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .s-hero__in { grid-template-columns: 1.05fr 1fr; gap: 48px; } .s-hero { padding: 72px 0 64px; } }
.s-lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink2); max-width: 60ch; }
.s-hero__media { margin: 0; }
.s-hero__media figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.s-play { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .59); aspect-ratio: 16 / 9; background: #101c24; }
.s-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.s-play:hover img { transform: scale(1.02); }
.s-play__btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(13, 32, 48, .94); box-shadow: 0 8px 30px rgba(0, 0, 0, .6); }
.s-play__btn::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--green); }
.s-play__video { width: 100%; border-radius: 20px; background: #000; aspect-ratio: 16 / 9; }

/* sections */
.s-sec { padding: 52px 0; }
.s-sec--tint { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.s-sec__head a { font-weight: 600; text-decoration: none; }
.s-answer .s-wrap { max-width: 860px; }
.s-answer p { font-size: 18px; color: var(--ink2); }
.s-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .s-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .s-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.s-feature { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.s-feature p { color: var(--ink2); margin-bottom: .6em; }
.s-feature a { font-weight: 600; text-decoration: none; }
.s-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: st; }
@media (min-width: 800px) { .s-steps { grid-template-columns: repeat(4, 1fr); } }
.s-steps li { counter-increment: st; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); padding: 22px 20px 18px; position: relative; }
.s-steps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green);
  color: #fff; font-weight: 700; margin-bottom: 12px; }
.s-steps p { color: var(--ink2); margin: 0; }
.s-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .s-checks { grid-template-columns: repeat(2, 1fr); } }
.s-checks li { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 14px 16px 14px 48px; position: relative; }
.s-checks li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--tint); }
.s-checks li::after { content: ""; position: absolute; left: 22px; top: 21px; width: 7px; height: 11px; border: solid var(--green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* cards */
.s-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden;
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.s-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, .23), 0 14px 34px rgba(0, 0, 0, .35); }
.s-card__media { position: relative; aspect-ratio: 16 / 9; background: #101c24; overflow: hidden; }
.s-card__media img { width: 100%; height: 100%; object-fit: cover; }
.s-card__media--tall img { object-fit: contain; }
.s-card__body { padding: 16px 18px 18px; }
.s-card__body h3 { margin: 6px 0 4px; font-size: 17px; }
.s-card__body p { color: var(--muted); font-size: 15px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-card time { font-size: 13px; color: var(--muted); }
.s-tag { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--green-deep); background: var(--tint); border-radius: 999px; padding: 1px 10px; }
.s-dur { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 12.5px; border-radius: 6px; padding: 1px 7px; }

/* FAQ */
.s-faq__item { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-sm); margin-bottom: 10px; }
.s-faq__item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; position: relative; }
.s-faq__item summary::-webkit-details-marker { display: none; }
.s-faq__item summary h3 { margin: 0; font-size: 17px; }
.s-faq__item summary::after { content: ""; position: absolute; right: 20px; top: 24px; width: 9px; height: 9px; border: solid var(--green); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s; }
.s-faq__item[open] summary::after { transform: rotate(-135deg); top: 28px; }
.s-faq__item > div { padding: 0 18px 4px; color: var(--ink2); }

/* call to action */
.s-band { background: var(--forest); color: #e8f3ed; padding: 56px 0; text-align: center; }
.s-band h2 { color: #fff; }
.s-band p { max-width: 60ch; margin: 0 auto 1em; }
.s-band .s-actions { justify-content: center; }
.s-band .s-btn { background: var(--green-hi); border-color: var(--green-hi); color: #d0f7eb; }
.s-band .s-btn:hover { background: #0d2030; border-color: rgba(140, 195, 230, .156); color: var(--green-deep); }

/* inner pages */
.s-page { padding-top: 24px; padding-bottom: 56px; }
.s-crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--muted); }
.s-crumbs li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--faint); }
.s-crumbs a { color: var(--muted); text-decoration: none; }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.s-chips a { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge); text-decoration: none; color: var(--ink2); font-size: 15px; }
.s-chips a[aria-current] { background: var(--green); border-color: var(--green); color: #fff; }
.s-player { margin: 8px 0 18px; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 14px 40px rgba(0, 0, 0, .59); }
.s-player video { width: 100%; aspect-ratio: 16 / 9; }
.s-player--tall { max-width: 420px; }
.s-player--tall video { aspect-ratio: 9 / 16; }
.s-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; }
.s-facts div { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 8px 14px; }
.s-facts dt { font-size: 12.5px; color: var(--muted); }
.s-facts dd { margin: 0; font-weight: 650; }
.s-chapters ol { list-style: none; margin: 0 0 24px; padding: 0; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; }
.s-chapters li + li { border-top: 1px solid var(--line); }
.s-chapters a { display: block; padding: 10px 16px; color: var(--ink); text-decoration: none; }
.s-chapters a:hover { background: var(--soft); }
.s-chapters span { display: inline-block; min-width: 52px; color: var(--green); font-variant-numeric: tabular-nums; font-weight: 650; }
.s-prose { max-width: 760px; }
.s-prose h2 { margin-top: 1.4em; }
.s-prose h3 { margin-top: 1.2em; }
.s-prose figure { margin: 1.4em 0; }
.s-prose figure img { border-radius: 12px; }
.s-prose figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.s-prose blockquote { margin: 1.2em 0; padding: 4px 18px; border-left: 4px solid var(--green-hi); background: var(--soft); border-radius: 0 10px 10px 0; color: var(--ink2); }
.s-prose pre { background: #121f29; color: #d8efe2; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 14px; }
.s-prose code { font-size: .92em; background: var(--tint); border-radius: 5px; padding: 1px 5px; }
.s-prose pre code { background: none; padding: 0; }
.s-prose hr { border: 0; border-top: 1px solid var(--edge); margin: 2em 0; }
.s-table { overflow-x: auto; margin: 1.2em 0; }
.s-table table { border-collapse: collapse; width: 100%; background: var(--card); font-size: 15px; }
.s-table th, .s-table td { border: 1px solid var(--edge); padding: 8px 12px; text-align: left; vertical-align: top; }
.s-table th { background: var(--soft); }
.s-transcript details { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 24px; }
.s-transcript summary { cursor: pointer; font-weight: 600; color: var(--green-deep); }
.s-transcript p { margin: 10px 0 0; color: var(--ink2); }
.s-ai-note { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 28px; }
.s-article h1 { font-size: clamp(28px, 5vw, 40px); }
.s-byline { color: var(--muted); font-size: 15px; }
.s-cover { margin: 0 0 24px; }
.s-cover img { border-radius: 16px; }
.s-prose .s-work { margin: 1.4em 0; max-width: 420px; }
.s-nb { white-space: nowrap; }
.s-work-top { display: grid; gap: 8px 32px; }
.s-work-top .s-player { margin-top: 4px; }
@media (min-width: 860px) { .s-work-top.is-tall { grid-template-columns: minmax(300px, 400px) 1fr; align-items: start; } }

/* footer */
.s-foot { background: var(--card); border-top: 1px solid var(--edge); padding: 36px 0 28px; font-size: 15px; }
.s-foot__in { display: grid; gap: 18px; }
@media (min-width: 800px) { .s-foot__in { grid-template-columns: 1.2fr 2fr; } .s-foot__copy, .s-foot__social { grid-column: 1 / -1; } }
.s-foot p { margin: 4px 0 0; color: var(--muted); }
.s-foot nav, .s-foot__social { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.s-foot a { color: var(--ink2); text-decoration: none; }
.s-foot a:hover { color: var(--green); }
.s-foot__copy { font-size: 13px; color: var(--faint); }

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

/* ---------------------------------------------------------------- v1.33.3 the studio's frame (owner, 21 Oct 19:27 "ทำไม ไม่เหมือน หน้าระบบ"):
   the white menu on the left as in the studio (its pages open ชมสตูดิโอ), a top bar with ☰ on a phone / tablet */
.s-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-btn .s-ico { width: 18px; height: 18px; stroke-width: 2; }
.s-studio .s-side { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: 248px; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px 16px; background: #0d2030; border-right: 1px solid var(--edge); overflow-y: auto; }
.s-studio .s-body { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }
.s-studio .s-body > main { flex: 1 0 auto; }
.s-side__top { display: flex; align-items: center; gap: 10px; padding: 0 6px 10px; }
.s-studio .s-brand { font-size: 16.5px; line-height: 1.3; }
.s-studio .s-brand img { width: 40px; height: 40px; border-radius: 12px; }
.s-side__login1, .s-menubtn { display: none; }
.s-studio .s-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; order: 0; width: auto; overflow: visible; }
.s-studio .s-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink2); text-decoration: none;
  font-size: 15px; line-height: 1.35; }
.s-studio .s-nav a .s-ico { color: var(--muted); }
.s-studio .s-nav a:hover { background: var(--soft); color: var(--ink); }
.s-studio .s-nav a[aria-current] { background: var(--tint); color: var(--green-deep); font-weight: 650; }
.s-studio .s-nav a[aria-current] .s-ico { color: var(--green-deep); }
.s-nav__label { margin: 14px 12px 4px; font-size: 12.5px; font-weight: 650; color: var(--muted); letter-spacing: .02em; }
.s-nav__label:first-child { margin-top: 2px; }
.s-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--ground); font-size: 14.5px; }
.s-side__foot small { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.s-side__foot .s-btn { min-height: 44px; }
@media (max-width: 1099px) {
  .s-studio .s-side { position: sticky; bottom: auto; width: auto; flex-direction: column; gap: 0; padding: 0; border-right: 0; border-bottom: 1px solid var(--edge);
    overflow: visible; background: rgba(13, 32, 48, .97); }
  .s-studio .s-body { margin-left: 0; }
  .s-side__top { min-height: 60px; padding: 8px 14px; }
  .s-studio .s-brand { margin-right: auto; }
  .s-studio .s-brand img { width: 34px; height: 34px; }
  .s-side__login1 { display: inline-flex; min-height: 40px; padding: 0 16px; font-size: 15px; }
  .s-menubtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--edge); background: #0d2030; color: var(--ink); cursor: pointer; }
  .s-studio .s-nav { padding: 0 10px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .s-nav__label { grid-column: 1 / -1; }
  .s-side:not(.is-open) .s-nav { display: none; }      /* collapsed from the first paint (no layout shift); ☰ opens it (site.js) */
  .s-side.is-open .s-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 70px); overflow-y: auto; background: #0d2030;
    border-bottom: 1px solid var(--edge); box-shadow: 0 18px 40px rgba(0, 0, 0, .47); padding-top: 6px; }
  .s-side__foot { display: none; }
}
@media (max-width: 420px) { .s-side__login1 { padding: 0 12px; } .s-studio .s-brand span { font-size: 15px; } }

/* home: the hero card, a peek at the studio's pages */
.s-studio .s-hero { background: none; padding: 28px 0 8px; }
.s-hero__card { display: grid; gap: 28px; align-items: center; background: var(--card); border: 1px solid var(--edge); border-radius: 20px;
  padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); }
@media (min-width: 1000px) { .s-hero__card { grid-template-columns: 1.15fr 1fr; gap: 40px; } }
.s-studio .s-hero h1 { font-size: clamp(28px, 4.4vw, 44px); }
.s-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--tint);
  color: var(--green-deep); font-size: 14px; font-weight: 650; }
.s-eyebrow .s-ico { width: 16px; height: 16px; }
.s-peek { background: var(--ground); border: 1px solid var(--edge); border-radius: 16px; padding: 18px; }
.s-peek__t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 650; color: var(--green-deep); }
.s-peek__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s-peek__grid a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 12px; background: #0d2030;
  border: 1px solid var(--edge); color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.3; }
.s-peek__grid a .s-ico { color: var(--green); }
.s-peek__grid a:hover { border-color: var(--green-hi); background: var(--soft); }
.s-peek__note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.s-panel { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); }
.s-studio .s-answer .s-wrap { max-width: var(--wrap); }
.s-feature__ico { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 12px;
  background: var(--tint); color: var(--green-deep); }
.s-feature__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }

/* everything the studio does (from the manual) */
.s-map__grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .s-map__grid { display: block; column-count: 2; column-gap: 18px; }
  .s-map__grid .s-map__card { break-inside: avoid; margin-bottom: 18px; } }   /* cards of uneven length packed in two columns */
.s-map__card { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.s-map__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.s-map__head h3 { margin: 2px 0 2px; }
.s-map__head p { margin: 0; color: var(--muted); font-size: 15px; }
.s-map__ico { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 12px;
  background: var(--tint); color: var(--green-deep); }
.s-map__card ul { list-style: none; margin: 10px 0 0; padding: 0; }
.s-map__card li { padding: 10px 0; border-top: 1px solid var(--line); }
.s-map__card li strong { display: block; font-weight: 650; }
.s-map__card li span { display: block; color: var(--ink2); font-size: 14.5px; line-height: 1.6; }
.s-map__card li em { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line);
  color: var(--green-deep); font-style: normal; font-size: 13px; }
.s-map__more summary { cursor: pointer; padding: 10px 0 2px; border-top: 1px solid var(--line); color: var(--green-deep); font-weight: 650; }
.s-map__more ul { margin-top: 4px; }
.s-map__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 650; text-decoration: none; }
.s-map__go .s-ico { width: 18px; height: 18px; }

/* the latest versions */
.s-upd { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s-upd li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 14px 16px; }
.s-upd__v { font-weight: 700; color: var(--green-deep); }
.s-upd time { color: var(--muted); font-size: 14px; }
.s-upd strong { flex-basis: 100%; font-weight: 500; color: var(--ink2); }
.s-studio .s-foot { margin-top: 24px; }

/* v1.33.3 the home hero's idea box (like a prompt box in the studio): the idea opens the create page in ชมสตูดิโอ, prefilled */
.s-idea { margin: 4px 0 14px; }
.s-idea__label { display: block; margin-bottom: 6px; font-weight: 650; font-size: 15px; }
.s-idea__box { display: flex; gap: 10px; align-items: flex-end; padding: 10px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--edge);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .23); }
.s-idea__box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(13, 87, 140, .15); }
.s-idea textarea { flex: 1; min-width: 0; min-height: 52px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.55; padding: 6px 8px; }
.s-idea .s-btn { flex: none; min-height: 48px; }
.s-idea__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.s-idea__chips a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--soft); color: var(--ink2); text-decoration: none; }
.s-idea__chips a:hover { border-color: var(--green-hi); color: var(--green-deep); }
.s-idea__note { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 520px) { .s-idea__box { flex-direction: column; align-items: stretch; } .s-idea .s-btn { width: 100%; } }

/* ================================================================ v1.33.3 the studio's new look on the website too (owner 21 Oct 19:56-20:06): liquid glass in
   the logo's emerald + gold, with the aqua aurora of AI; the deep emerald glass menu with the whole logo on top (when chosen),
   light glass cards on a soft emerald / gold / aqua ground, gold for "เข้าสู่ระบบ" and the idea box's button */
:root {
  --ink: #daf4ec; --ink2: #d7e1e8; --muted: #c4ccd2;
  --green: #0e5587; --green-deep: #0a4168; --green-hi: #2fb88f; --tint: rgba(19, 145, 107, .12); --soft: rgba(13, 32, 48, .6);
  --ground: rgba(20, 42, 60, .62); --card: rgba(13, 32, 48, .64); --edge: rgba(140, 195, 230, .122); --line: rgba(140, 195, 230, .13);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .114), 0 1px 2px rgba(5, 34, 54, .06), 0 14px 34px -18px rgba(5, 34, 54, .3);
  --gold: linear-gradient(180deg, #f6e5a5 0%, #eaca6c 40%, #d7b04e 74%, #c69d3e 100%);
  --gold-hover: linear-gradient(180deg, #feeea6 0%, #eed27d 40%, #deb958 74%, #caa449 100%);
  --gold-shadow: inset 0 1px 0 rgba(255, 255, 255, .084), inset 0 -1px 0 rgba(122, 90, 18, .35), 0 10px 22px -12px rgba(186, 149, 68, .95);
  --pill: linear-gradient(180deg, #27b087 0%, #105789 55%, #0d5181 100%);
  --pill-hover: linear-gradient(180deg, #2fbd92 0%, #128a66 55%, #0e578b 100%);
  --pill-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .47), 0 6px 14px -6px rgba(12, 79, 127, .7), 0 0 18px -6px rgba(45, 212, 162, .55);
  --dark-glass: linear-gradient(180deg, rgba(11, 70, 111, .92) 0%, rgba(6, 45, 72, .94) 48%, rgba(3, 25, 40, .97) 100%);
  --ai: linear-gradient(115deg, #13916b 0%, #14b887 38%, #22d3ee 62%, #e6c567 100%);
}
body { background: var(--ground); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62vmax 46vmax at 8% 0%, rgba(19, 145, 107, .3), transparent 62%),
    radial-gradient(52vmax 40vmax at 100% 0%, rgba(230, 197, 103, .34), transparent 60%),
    radial-gradient(44vmax 30vmax at 62% 38%, rgba(45, 212, 162, .2), transparent 66%),
    radial-gradient(56vmax 46vmax at 88% 100%, rgba(14, 85, 135, .24), transparent 62%),
    radial-gradient(46vmax 36vmax at 18% 100%, rgba(241, 212, 120, .22), transparent 60%),
    linear-gradient(165deg, rgba(105, 211, 145, .14) 0%, rgba(20, 42, 60, .62) 48%, rgba(209, 187, 123, .14) 100%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(10, 65, 104, .2) 1px, transparent 1.5px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(80% 70% at 60% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 70% at 60% 30%, #000 0%, transparent 75%); }
:focus-visible { outline-color: #14b887; }

/* the menu */
.s-studio .s-side { color: #e6f4ec; border-right: 0;
  background: radial-gradient(130% 34% at 50% 0%, rgba(241, 212, 120, .2), transparent 72%),
    radial-gradient(150% 40% at 30% 100%, rgba(45, 212, 162, .34), transparent 72%), var(--dark-glass);
  box-shadow: inset -1px 0 0 rgba(241, 212, 120, .3), 14px 0 44px -24px rgba(3, 25, 40, .6); }
.s-studio .s-side :focus-visible { outline-color: #f1d478; }
.s-studio .s-brand, .s-studio .s-brand:hover { color: #f6f8fa; }
.s-side__top { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(241, 212, 120, .22);
  border-image: linear-gradient(90deg, transparent, rgba(140, 195, 230, .13), rgba(241, 212, 120, .5), rgba(140, 195, 230, .13), transparent) 1; }
.s-brand--logo { flex: 1 1 auto; justify-content: center; }
.s-studio .s-brand .s-brand__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: min(150px, 18vh); border-radius: 0; object-fit: contain; }   /* a wide logo fills the width, a square one stops at 150px */
.s-nav__label { color: rgba(241, 212, 120, .82); }
.s-studio .s-nav a { color: rgba(232, 245, 238, .84); }
.s-studio .s-nav a .s-ico { color: rgba(176, 224, 199, .85); }
.s-studio .s-nav a:hover { background: rgba(13, 32, 48, .09); color: #fff; }
.s-studio .s-nav a:hover .s-ico { color: #f1d478; }
.s-studio .s-nav a[aria-current] { color: #fff; font-weight: 650; background: linear-gradient(180deg, rgba(13, 32, 48, .2), rgba(13, 32, 48, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .036), inset 0 0 0 1px rgba(241, 212, 120, .6), 0 10px 22px -12px rgba(0, 0, 0, .6); }
.s-studio .s-nav a[aria-current] .s-ico { color: #f1d478; }
.s-side__foot { background: rgba(13, 32, 48, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .013), inset 0 1px 0 rgba(255, 255, 255, .017); }
.s-side__foot small { color: rgba(230, 244, 236, .74); }
.s-side__foot .s-btn, .s-side .s-side__login1 { color: #2b1d03; border-color: transparent; background: var(--gold); box-shadow: var(--gold-shadow); }
.s-side__foot .s-btn:hover, .s-side .s-side__login1:hover { color: #2b1d03; background: var(--gold-hover); box-shadow: var(--gold-shadow); }
@media (max-width: 1099px) {
  .s-studio .s-side { border-bottom: 1px solid rgba(241, 212, 120, .3); box-shadow: 0 14px 34px -18px rgba(3, 25, 40, .6);
    background: radial-gradient(60% 120% at 0% 0%, rgba(241, 212, 120, .16), transparent 70%), radial-gradient(70% 90% at 100% 100%, rgba(45, 212, 162, .22), transparent 70%),
      var(--dark-glass); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
  .s-side__top { margin: 0; border: 0; }
  .s-brand--logo { flex: 0 1 auto; margin-right: auto; justify-content: flex-start; }
  .s-studio .s-brand .s-brand__logo { height: 44px; max-height: none; max-width: 46vw; }
  .s-menubtn { background: rgba(13, 32, 48, .1); border-color: rgba(140, 195, 230, .031); color: #f1faf5; }
  .s-side.is-open .s-nav { background: linear-gradient(180deg, rgba(6, 45, 72, .98), rgba(3, 25, 40, .99)); border-bottom: 1px solid rgba(241, 212, 120, .3);
    box-shadow: 0 24px 50px -16px rgba(3, 25, 40, .7); }
}

/* buttons */
.s-btn { border-color: transparent; background: var(--pill); box-shadow: var(--pill-shadow); }
.s-btn:hover { background: var(--pill-hover); box-shadow: var(--pill-shadow); }
.s-btn--ghost { background: rgba(13, 32, 48, .72); color: var(--green-deep); border-color: rgba(140, 195, 230, .208);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .114), 0 1px 2px rgba(5, 34, 54, .06); }
.s-btn--ghost:hover { background: rgba(13, 32, 48, .95); color: var(--green-deep); border-color: rgba(140, 195, 230, .585); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px -10px rgba(5, 34, 54, .4); }

/* glass cards */
.s-hero__card, .s-panel, .s-feature, .s-map__card, .s-steps li, .s-checks li, .s-card, .s-faq__item, .s-upd li, .s-facts div, .s-chapters ol,
.s-transcript details, .s-peek { -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--edge); box-shadow: var(--shadow); }
.s-hero__card { background: radial-gradient(60% 80% at 100% 0%, rgba(230, 197, 103, .16), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(45, 212, 162, .14), transparent 70%), var(--card); }
.s-peek { background: rgba(13, 32, 48, .42); }
.s-peek__grid a { background: rgba(13, 32, 48, .78); border-color: rgba(140, 195, 230, .133); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(5, 34, 54, .06); }
.s-peek__grid a:hover { background: #0d2030; border-color: rgba(140, 195, 230, .52); }
.s-sec--tint { background: rgba(13, 32, 48, .3); border-color: rgba(140, 195, 230, .094); }
.s-eyebrow { background: linear-gradient(90deg, rgba(19, 145, 107, .14), rgba(34, 211, 238, .16)); color: #81eacb; box-shadow: inset 0 0 0 1px rgba(13, 148, 108, .2); }
.s-studio .s-hero h1 { color: #cbf7ea; }
.s-feature__ico, .s-map__ico { background: linear-gradient(160deg, #105789, #062d48); color: #f1d478;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 0 0 1px rgba(241, 212, 120, .35), 0 8px 18px -10px rgba(13, 148, 108, .7); }
.s-steps li::before { background: var(--pill); box-shadow: var(--pill-shadow), 0 0 0 1px rgba(215, 176, 78, .7); }
.s-checks li::before { background: rgba(19, 145, 107, .16); }
.s-tag { background: rgba(19, 145, 107, .12); }
.s-chips a { background: rgba(13, 32, 48, .66); border-color: rgba(140, 195, 230, .182); }
.s-chips a[aria-current] { background: var(--pill); border-color: transparent; box-shadow: var(--pill-shadow), 0 0 0 1px rgba(215, 176, 78, .7); }
.s-map__card li em { background: rgba(13, 32, 48, .7); }
.s-band { background: radial-gradient(60% 120% at 0% 0%, rgba(241, 212, 120, .18), transparent 65%), radial-gradient(60% 120% at 100% 100%, rgba(45, 212, 162, .26), transparent 65%),
  linear-gradient(180deg, #0a4168, #041d2f); }
.s-band .s-btn { color: #2b1d03; background: var(--gold); box-shadow: var(--gold-shadow); }
.s-band .s-btn:hover { color: #2b1d03; background: var(--gold-hover); }
.s-band .s-btn--ghost, .s-band .s-btn--ghost:hover { color: #fff; background: rgba(13, 32, 48, .1); border-color: rgba(140, 195, 230, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .022); text-shadow: none; }
.s-band .s-btn--ghost:hover { background: rgba(13, 32, 48, .18); }
.s-foot { background: rgba(13, 32, 48, .55); border-top-color: rgba(140, 195, 230, .125); }

/* the hero's idea box: edged like the studio's AI box (emerald - aqua - gold); its button gold */
.s-idea__box { border: 1.5px solid transparent; background: linear-gradient(rgba(13, 32, 48, .95), rgba(13, 32, 48, .95)) padding-box, var(--ai) border-box;
  box-shadow: 0 12px 28px -16px rgba(13, 148, 108, .7); }
.s-idea__box:focus-within { border-color: transparent; box-shadow: 0 0 0 4px rgba(45, 212, 162, .2), 0 12px 28px -14px rgba(13, 148, 108, .75); }
.s-idea .s-btn { color: #2b1d03; background: var(--gold); box-shadow: var(--gold-shadow); }
.s-idea .s-btn:hover { color: #2b1d03; background: var(--gold-hover); }
.s-idea__chips a { background: rgba(13, 32, 48, .7); border-color: rgba(140, 195, 230, .182); }
.s-idea__chips a:hover { background: #0d2030; border-color: rgba(13, 148, 108, .45); color: #81eacb; }

@media (prefers-reduced-transparency: reduce) {
  :root { --card: #0d2030; }
  .s-studio .s-side { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, #0a4168, #041d2f); }
}

/* v1.33.4 the menu without group titles (owner 21 Oct 23:16): the studio's pages, a silver-gold line, the website's pages */
.s-nav__sep { display: block; height: 1px; margin: 10px 8px;
  background: linear-gradient(90deg, transparent, rgba(226, 229, 232, .4), rgba(241, 212, 120, .5), rgba(226, 229, 232, .4), transparent); }
@media (max-width: 1099px) { .s-nav__sep { grid-column: 1 / -1; margin: 6px 4px; } }

/* v1.34 the price page (/pricing): prices in credits from the studio's own price list */
.s-price h2 { margin-top: 36px; }
.s-price__exs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 12px 0; }
.s-price__ex { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); padding: 18px 20px; }
.s-price__ex h3 { margin: 0 0 6px; font-size: 17px; }
.s-price__ex p { margin: 0; }
.s-price__num { margin-top: auto !important; padding-top: 14px; font-size: 15px; }
.s-price__num strong { font-size: 30px; background: linear-gradient(90deg, #8decd0, #0d946c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-price__baht { font-size: 13px; color: var(--muted); }
.s-price__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 900px) { .s-price__two { grid-template-columns: 1fr; } }
.s-price__table th { white-space: nowrap; }
.s-price__table .s-price__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-price__table thead th:not(:first-child) { text-align: right; }
.s-price__band { margin-top: 36px; border-radius: var(--r); }

/* ================================================================ v1.34.2 colour (owner 22 Oct 04:23-05:48: the look "A" everywhere +
   the home page's top as "B"): every page its colour - the menu's icons and the studio pages' tiles on colour, the features' and the
   studio map's icons in colour, a thin colour line on the cards, the headings green to aqua; the home page opens on a deep emerald
   band (white words, a gold line) */
body::before { background:
    radial-gradient(60vmax 44vmax at 4% -6%, rgba(19, 145, 107, .44), transparent 62%),
    radial-gradient(50vmax 40vmax at 104% -4%, rgba(230, 197, 103, .48), transparent 60%),
    radial-gradient(44vmax 30vmax at 62% 40%, rgba(45, 212, 162, .28), transparent 66%),
    radial-gradient(40vmax 30vmax at 26% 70%, rgba(139, 92, 246, .1), transparent 66%),
    radial-gradient(56vmax 46vmax at 88% 100%, rgba(14, 165, 233, .2), transparent 62%),
    linear-gradient(160deg, rgba(105, 211, 149, .14) 0%, rgba(105, 211, 179, .14) 46%, rgba(215, 190, 116, .14) 100%); }
.s-studio .s-nav a .s-ico, .s-studio .s-peek__grid a .s-ico { box-sizing: content-box; padding: 5px; border-radius: 9px; color: #fff;
  background: var(--tab, linear-gradient(135deg, #34d3a3, #0b558a)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .042), 0 4px 10px -4px rgba(0, 0, 0, .6); }
.s-studio .s-peek__grid a .s-ico { width: 16px; height: 16px; padding: 4px; border-radius: 8px; }
.s-studio .s-nav a { padding-top: 6px; padding-bottom: 6px; }
.s-studio a[href="/tour#templates"] { --tab: linear-gradient(135deg, #ecc142, #b45309); }
.s-studio a[href="/tour#quick"] { --tab: linear-gradient(135deg, #22d3ee, #0e7490); }
.s-studio a[href="/tour#jobs"], .s-studio .s-nav a[href="/works/"] { --tab: linear-gradient(135deg, #60a5fa, #2563eb); }
.s-studio a[href="/tour#series"] { --tab: linear-gradient(135deg, #a78bfa, #7c3aed); }
.s-studio a[href="/tour#podcast"] { --tab: linear-gradient(135deg, #fb7185, #e11d48); }
.s-studio a[href="/tour#library"] { --tab: linear-gradient(135deg, #f472b6, #be185d); }
.s-studio .s-nav a[href="/pricing"] { --tab: linear-gradient(135deg, #f0d068, #a16207); }
.s-studio a[href="/tour#manual"], .s-studio .s-nav a[href="/blog/"] { --tab: linear-gradient(135deg, #2dd4a2, #115688); }
.s-studio .s-nav a[href="/about"], .s-studio .s-nav a[data-owner] { --tab: linear-gradient(135deg, rgba(20, 42, 60, .62), #475569); }
.s-studio .s-nav a[aria-current] .s-ico { color: #fff; box-shadow: 0 0 0 2px #f1d478, 0 6px 14px -4px rgba(0, 0, 0, .6); }
/* headings: green to aqua; cards: a thin colour line on top */
.s-studio h1 { width: fit-content; max-width: 100%; color: #86ebcd; background: linear-gradient(100deg, #86ebcd 0%, #0d946c 55%, #0891b2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.s-studio h2 { color: #8aeccf; }
.s-studio .s-feature, .s-studio .s-map__card, .s-studio .s-card, .s-studio .s-faq__item, .s-studio .s-price__ex {
  background-image: linear-gradient(90deg, #10b986, #14b887 35%, #22d3ee 60%, #e5ad2a); background-size: 100% 3px; background-repeat: no-repeat; background-position: top; }
.s-studio .s-feature__ico, .s-studio .s-map__ico { color: #fff; background: linear-gradient(135deg, #34d3a3, #0b558a); }
.s-studio .s-feature:nth-child(6n+2) .s-feature__ico, .s-studio .s-map__card:nth-child(6n+2) .s-map__ico { background: linear-gradient(135deg, #ecc142, #b45309); }
.s-studio .s-feature:nth-child(6n+3) .s-feature__ico, .s-studio .s-map__card:nth-child(6n+3) .s-map__ico { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.s-studio .s-feature:nth-child(6n+4) .s-feature__ico, .s-studio .s-map__card:nth-child(6n+4) .s-map__ico { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.s-studio .s-feature:nth-child(6n+5) .s-feature__ico, .s-studio .s-map__card:nth-child(6n+5) .s-map__ico { background: linear-gradient(135deg, #fb7185, #e11d48); }
.s-studio .s-feature:nth-child(6n) .s-feature__ico, .s-studio .s-map__card:nth-child(6n) .s-map__ico { background: linear-gradient(135deg, #60a5fa, #2563eb); }
/* the home page's top (the "B" band): deep emerald to sea blue, white words, a gold line; its idea box and the studio's pages stay white */
.s-studio .s-hero__card { color: #eef6fb; border: 0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(241, 212, 120, .36), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(34, 211, 238, .36), transparent 60%), linear-gradient(115deg, #083b5f 0%, #115688 55%, #0e7490 100%);
  box-shadow: 0 24px 50px -24px rgba(8, 59, 95, .85), inset 0 -4px 0 #e6c567; }
.s-studio .s-hero__card h1 { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.s-studio .s-hero__card .s-lead, .s-studio .s-hero__card .s-idea__label { color: #fff; }
.s-studio .s-hero__card .s-idea__note, .s-studio .s-hero__card .s-idea__chips > span, .s-studio .s-hero__card .s-peek__note { color: rgba(238, 246, 251, .88); }
.s-studio .s-hero__card .s-eyebrow { color: #fff; background: rgba(13, 32, 48, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .036); }
.s-studio .s-hero__card .s-idea__chips a, .s-studio .s-hero__card .s-btn--ghost { color: #fff; background: rgba(13, 32, 48, .14); border-color: rgba(140, 195, 230, .062); box-shadow: none; }
.s-studio .s-hero__card .s-idea__chips a:hover, .s-studio .s-hero__card .s-btn--ghost:hover { background: rgba(13, 32, 48, .26); color: #fff; }
.s-studio .s-hero__card .s-peek { background: rgba(13, 32, 48, .14); border-color: rgba(140, 195, 230, .047); }
.s-studio .s-hero__card .s-peek__t { color: #fff; }
.s-studio .s-hero__card .s-peek__grid a { background: rgba(13, 32, 48, .93); }
.s-studio .s-hero__card .s-peek__grid a:hover { background: #0d2030; }
.s-studio .s-hero__card .s-peek__t .s-ico { color: #f1d478; }
.s-studio .s-hero__card :focus-visible { outline-color: #f1d478; }
@media (prefers-reduced-transparency: reduce) {
  .s-studio .s-hero__card .s-peek, .s-studio .s-hero__card .s-idea__chips a, .s-studio .s-hero__card .s-btn--ghost { background: #124a73; }
}

/* ================================================================ v1.35.0 คลัง Prompt (owner 22 Oct 09:17-10:44: the mock-up "ชอบ ลองทำมาก่อน"):
   /prompts/ (cards with the example pictures, the category links, the type and search filters of site.js), a category, one prompt
   (the examples, the words per tool, a box per [PLACEHOLDER], ทำในสตูดิโอเลย, how to keep the look elsewhere) */
.s-studio .s-nav a[href="/prompts/"] { --tab: linear-gradient(135deg, #818cf8, #4f46e5); }
.p-page [hidden] { display: none !important; }
.s-studio .s-nav a[hidden] { display: none; }          /* v1.39.1: ตั้งค่า until site.js knows an owner is looking */
.s-side__foot strong { overflow-wrap: anywhere; }
.p-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.p-i .p-solid { fill: currentColor; stroke: none; }
.p-top { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.p-top > div:first-child { flex: 1 1 520px; min-width: 0; }
.p-top .s-lead { margin-bottom: 0; }
.p-tally { display: flex; gap: 10px; }
.p-tally div { background: rgba(13, 32, 48, .74); border: 1px solid rgba(140, 195, 230, .156); border-radius: 14px; padding: 8px 16px; min-width: 92px; text-align: center; }
.p-tally strong { display: block; font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.p-tally span { font-size: 13px; color: var(--muted); }
.p-tally__image strong { color: #abc1f1; } .p-tally__video strong { color: #f0a4b5; } .p-tally__design strong { color: #0d946c; }
.p-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 20px 0 8px; }
.p-bar .s-chips { margin: 0; }
.p-search { position: relative; flex: 1 1 260px; max-width: 380px; margin-left: auto; }
.p-search .p-i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.p-search input { width: 100%; min-height: 44px; border-radius: 999px; border: 1px solid rgba(140, 195, 230, .234); background: rgba(13, 32, 48, .88);
  padding: 0 16px 0 42px; font: inherit; font-size: 15px; color: var(--ink); }
.p-types { display: flex; gap: 6px; margin: 6px 0 18px; flex-wrap: wrap; }
.p-types button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ink2); background: rgba(13, 32, 48, .58); border: 1px solid rgba(140, 195, 230, .156); }
.p-types button.is-on { background: #0d2030; border-color: #0d946c; color: #86ebcd; font-weight: 600; }
.p-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.p-dot--image { background: #2563eb; } .p-dot--video { background: #e11d48; } .p-dot--design { background: #0d946c; }
.p-fest { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 14px 18px; border-radius: 16px; margin: 0 0 22px; color: #f5e1c2;
  background: linear-gradient(100deg, #fff7ed 0%, #fef3c7 60%, #f6e3a1 100%); border: 1px solid #f0da9f; }
.p-fest strong { font-size: 16px; } .p-fest .p-i { color: #ecb388; }
.p-fest a { color: #f8dbd1; font-weight: 600; }
.p-fest__days { margin-left: auto; font-size: 13.5px; background: #0d2030; border-radius: 999px; padding: 3px 12px; color: #f5cec1; font-weight: 600; }
.p-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.p-grid .p-card.is-more, .p-grid .p-card.is-out { display: none; }
.p-card { display: flex; flex-direction: column; background: #0d2030; border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 24px rgba(0, 0, 0, .23); }
.p-card__link { display: block; }
.p-shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(155deg, #115688, #e5ad2a); }
.p-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-shot--product { background: radial-gradient(70% 55% at 82% 10%, #f6e3a1, transparent 70%), linear-gradient(155deg, #115688, #17415f); }
.p-shot--people { background: radial-gradient(70% 55% at 82% 10%, #fed7aa, transparent 70%), linear-gradient(155deg, #c2410c, #7c2d12); }
.p-shot--viral { background: radial-gradient(70% 55% at 82% 10%, #a5f3fc, transparent 70%), linear-gradient(155deg, #7c3aed, #1e1b4b); }
.p-shot--design { background: radial-gradient(70% 55% at 82% 10%, #fdba74, transparent 70%), linear-gradient(155deg, #2563eb, #1e3a8a); }
.p-shot--festival { background: radial-gradient(70% 55% at 82% 10%, #f6e3a1, transparent 70%), linear-gradient(155deg, #b91c1c, #14532d); }
.p-shot.has-img { background: rgba(20, 42, 60, .62); }
.p-shot:not(.has-img)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(13, 32, 48, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M5 17l4.5-4.5 3 3 2.5-2.5L19 17'/%3E%3C/svg%3E") center / 27px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.p-badge { position: absolute; z-index: 1; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: #fff;
  background: rgba(15, 23, 42, .66); border-radius: 999px; padding: 2px 10px; }
.p-badge .p-i { width: 12px; height: 12px; }
.p-badge--v { background: rgba(190, 18, 60, .88); }
.p-ratio { position: absolute; z-index: 1; right: 10px; top: 10px; font: 600 12px/1.6 ui-monospace, Menlo, monospace; color: #fff; background: rgba(15, 23, 42, .5);
  border-radius: 6px; padding: 0 6px; }
.p-ph { position: absolute; left: 10px; bottom: 10px; font-size: 12px; color: rgba(255, 255, 255, .92); border: 1px dashed rgba(140, 195, 230, .109); border-radius: 6px; padding: 0 6px; }
.p-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p-card__body .s-tag { align-self: flex-start; }
.p-card__body h3, .p-card__body h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.p-card__body h3 a, .p-card__body h2 a { color: var(--ink); text-decoration: none; }
.p-card__body h3 a:hover, .p-card__body h2 a:hover { color: var(--green-deep); text-decoration: underline; }
.p-card__body p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.p-card__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.p-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.p-flag { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 0 7px; background: rgba(230, 202, 101, .14); color: #f0cda6; }
.p-copy { display: none; align-items: center; gap: 6px; white-space: nowrap; flex: none; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer;
  font: 600 13px/1 inherit; font-family: inherit; color: #fff; background: linear-gradient(120deg, #10b986, #0d946c 50%, #0891b2); }
.s-js .p-copy { display: inline-flex; }
.p-copy .p-i { width: 15px; height: 15px; }
.p-copy.is-done { background: #0b558a; }
.p-copy--big { padding: 9px 18px; font-size: 15px; }
.p-more { text-align: center; margin: 26px 0 8px; }
.p-none { text-align: center; margin: 26px 0; }
.p-build { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 34px 0 10px; padding: 22px 24px; border-radius: 20px; color: #eef6fb;
  background: radial-gradient(120% 140% at 100% 0%, rgba(241, 212, 120, .36), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(34, 211, 238, .36), transparent 60%),
    linear-gradient(115deg, #083b5f 0%, #115688 55%, #0e7490 100%); box-shadow: 0 24px 50px -24px rgba(8, 59, 95, .85), inset 0 -4px 0 #e6c567; }
.s-studio .p-build h2, .p-build h2 { color: #fff; margin: 0 0 4px; font-size: 23px; }
.p-build p { margin: 0; color: rgba(238, 246, 251, .9); }
.p-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none;
  color: #2b1d03; background: linear-gradient(180deg, #f6e5a5 0%, #eaca6c 40%, #d7b04e 74%, #c69d3e 100%); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .084), inset 0 -1px 0 rgba(122, 90, 18, .35), 0 10px 22px -12px rgba(186, 149, 68, .95); }
.p-gold:hover { color: #2b1d03; background: linear-gradient(180deg, #feeea6 0%, #eed27d 40%, #deb958 74%, #caa449 100%); }
.p-gold:focus-visible { outline-color: #f1d478; }
.p-sec { margin-top: 42px; }
.p-sec .s-faq__a { padding: 0 18px 14px; color: var(--ink2); }
/* one prompt */
.p-item { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 30px; align-items: start; }
.p-gal { position: sticky; top: 20px; margin: 0; }
.p-main { display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .6); background: rgba(20, 42, 60, .62); }
.p-main img { width: 100%; height: auto; display: block; }
.p-shot.p-main { border-radius: 20px; }
.p-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.p-thumb { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(20, 42, 60, .62); box-shadow: 0 0 0 1px var(--edge); }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-thumb.is-on { box-shadow: 0 0 0 3px #f1d478; }
.p-cap { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.p-cap b { color: var(--ink2); font-weight: 600; }
.p-dl { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.p-dl .s-btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
.p-dl .p-i { width: 17px; height: 17px; }
.s-studio .p-h1 { font-size: clamp(28px, 4vw, 40px); }
.p-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.p-meta > * { font-size: 13.5px; border-radius: 999px; padding: 2px 12px; background: rgba(13, 32, 48, .78); border: 1px solid rgba(140, 195, 230, .156); color: var(--ink2); text-decoration: none; }
.p-meta a:hover { border-color: #0d946c; color: #86ebcd; }
.p-meta__t { border-color: transparent !important; font-weight: 600; }
.p-meta__t--image { background: rgba(76, 113, 240, .14) !important; color: #d6def8 !important; }
.p-meta__t--video { background: rgba(240, 76, 88, .14) !important; color: #f7d1dc !important; }
.p-meta__t--design { background: rgba(76, 240, 191, .14) !important; color: #85e9cb !important; }
.p-desc { color: var(--ink2); }
.p-box { background: #0d2030; border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 24px rgba(0, 0, 0, .23); }
.p-tabs { display: flex; gap: 4px; padding: 6px; background: rgba(20, 42, 60, .62); border-bottom: 1px solid var(--line); overflow-x: auto; }
.p-tabs button { flex: none; padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; }
.p-tabs button.is-on { background: #0d2030; color: #86ebcd; box-shadow: 0 1px 2px rgba(0, 0, 0, .41); }
.p-vh { margin: 12px 16px 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.s-js .p-vh { display: none; }
.s-js .p-var:not(.is-on) { display: none; }
.p-code { margin: 0; padding: 14px 16px; font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: #eaeef3; }
.p-code mark { background: #fef08a; color: #713f12; border-radius: 4px; padding: 0 3px; }
.p-code mark.is-set { background: rgba(20, 42, 60, .62); color: #b3edca; }
.p-box__foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line); background: #0d2030; }
.p-box__foot small { color: var(--muted); }
.p-note { margin: 12px 0 0; font-size: 14.5px; color: #f8dbd1; background: rgba(240, 167, 76, .14); border: 1px solid rgba(240, 164, 76, .45); border-radius: 12px; padding: 10px 14px; }
.p-note--soft { color: #f6daca; background: rgba(230, 202, 101, .14); border-color: #f6e3a1; }
.p-fill { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(13, 32, 48, .74); border: 1px dashed rgba(140, 195, 230, .325); display: grid; gap: 10px; }
.p-fill__t { margin: 0; font-weight: 650; }
.p-fill label { display: grid; gap: 4px; }
.p-fill label span { font-size: 14px; color: var(--ink2); }
.p-fill input { width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid var(--edge); padding: 0 12px; font: inherit; background: #0d2030; color: var(--ink); }
.p-cta { margin-top: 18px; padding: 20px 22px; border-radius: 20px; color: #eef6fb;
  background: radial-gradient(120% 140% at 100% 0%, rgba(241, 212, 120, .36), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(34, 211, 238, .36), transparent 60%),
    linear-gradient(115deg, #083b5f 0%, #115688 55%, #0e7490 100%); box-shadow: 0 24px 50px -24px rgba(8, 59, 95, .85), inset 0 -4px 0 #e6c567; }
.s-studio .p-cta h2, .p-cta h2 { color: #fff; font-size: 22px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.p-cta h2 .p-i { color: #f1d478; width: 22px; height: 22px; }
.p-cta > p { margin: 0 0 10px; color: rgba(238, 246, 251, .92); }
.p-cta ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.p-cta li { display: flex; gap: 9px; align-items: flex-start; }
.p-cta li .p-i { color: #86efac; margin-top: 5px; }
.p-cta__row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.p-cta__row small { color: rgba(238, 246, 251, .86); }
.p-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; margin: 14px 0; }
.p-steps > div { background: #0d2030; border: 1px solid var(--edge); border-radius: 14px; padding: 14px 16px; counter-increment: s; }
.p-steps > div::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-bottom: 8px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #34d3a3, #0b558a); }
.p-steps h3 { font-size: 16.5px; margin: 0 0 4px; }
.p-steps p { margin: 0; font-size: 14.5px; color: var(--muted); }
.p-howto { background: #0d2030; border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; }
.p-howto dl { margin: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.p-howto dt, .p-howto dd { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.p-howto dt { font-weight: 650; background: rgba(20, 42, 60, .62); }
.p-howto dt:first-of-type, .p-howto dt:first-of-type + dd { border-top: 0; }
.p-howto code, .p-fix code { font: 13.5px ui-monospace, Menlo, monospace; background: rgba(105, 158, 211, .14); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.p-fix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.p-fix div { background: #0d2030; border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; }
.p-fix b { display: block; margin-bottom: 4px; }
.p-fix p { margin: 0; font-size: 14px; color: var(--muted); }
.p-hidden { border-radius: 12px; margin-bottom: 12px; }
@media (max-width: 900px) {
  .p-item { grid-template-columns: minmax(0, 1fr); }
  .p-gal { position: static; }
  .p-steps, .p-fix { grid-template-columns: minmax(0, 1fr); }
  .p-howto dl { grid-template-columns: minmax(0, 1fr); }
  .p-howto dd { border-top: 0; padding-top: 0; }
  .p-build { grid-template-columns: minmax(0, 1fr); }
  .p-search { max-width: none; margin-left: 0; }
  .p-tally { width: 100%; } .p-tally div { flex: 1; }
}
@media (max-width: 560px) {
  .p-bar .s-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .p-bar .s-chips a { flex: none; }
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .p-card__body { padding: 9px 10px 10px; gap: 4px; }
  .p-card__body h3, .p-card__body h2 { font-size: 14.5px; }
  .p-card__body p, .p-card__foot > span, .p-card__body .s-tag, .p-flags { display: none; }
  .p-card__foot { justify-content: flex-end; }
  .p-shot:not(.has-img)::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; background-size: 19px; }
  .p-ph { display: none; }
}

/* ================================================================ v1.43.5 the article page (owner, 27 Oct 09:26 "ออกแบบหน้าตาบทความ ... ถูกหลัก SEO/GEO/AEO/AIO";
   the design approved 09:39): the hub and reading time, the author with both dates, the short answer box, the studio's clip, a table
   of contents (beside the text on a wide screen, folded under the answer on a phone), questions, sources, tags, the author's box,
   related articles and the studio's button; the hubs and tags pages (a big newest card, then the grid) */
.s-art__head { max-width: 860px; margin-bottom: 26px; }
.s-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 12px; font-size: 14px; color: var(--muted); }
.s-art__cat { padding: 3px 12px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 600; text-decoration: none; }
.s-art__cat:hover { background: var(--green-deep); color: #fff; }
.s-art__head h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.3; margin: 0; }
.s-art__head .s-lead { margin: 14px 0 0; }
.s-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.s-byline__who { display: inline-flex; flex-direction: column; line-height: 1.4; }
.s-byline__who a { color: var(--ink); font-weight: 650; text-decoration: none; }
.s-byline__who small { font-size: 13px; color: var(--muted); }
.s-byline__upd { padding: 2px 10px; border-radius: 999px; background: var(--card); border: 1px solid rgba(140, 195, 230, .39); color: var(--green-deep); font-weight: 600; }
.s-ava { flex: none; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--green-deep); font-weight: 700; font-size: 16px; }
.s-ava--lg { width: 64px; height: 64px; font-size: 24px; }
.s-art__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.s-art__main { min-width: 0; max-width: 780px; }
.s-art__side { display: none; }
@media (min-width: 1240px) {
  .s-art__cols { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; align-items: start; }
  .s-art__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
  .s-toc--in { display: none; }
}
.s-short { background: var(--card); border: 1px solid rgba(140, 195, 230, .364); border-radius: 18px; padding: 22px 24px; margin: 0 0 22px; box-shadow: var(--shadow); }
.s-short__label { display: inline-block; margin: 0; padding: 2px 12px; border-radius: 999px; background: var(--tint); color: var(--green-deep); font-size: 13px; font-weight: 700; }
.s-short__text { margin: 10px 0 0; font-size: 18px; line-height: 1.75; color: var(--ink); }
.s-short__pts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.s-short__label + .s-short__pts, .s-short > .s-short__pts:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.s-short__pts p { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink2); }
.s-short__pts ul { margin: 6px 0 0; padding-left: 22px; }
.s-short__pts li { margin: 4px 0; }
.s-toc { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; }
.s-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; line-height: 1.5; counter-reset: toc; }
.s-toc li { counter-increment: toc; }
.s-toc a { display: flex; gap: 8px; padding: 7px 10px; border-radius: 10px; color: var(--ink2); text-decoration: none; }
.s-toc a::before { content: counter(toc) "."; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-toc a:hover, .s-toc a[aria-current] { background: var(--tint); color: var(--green-deep); }
.s-toc--in { margin: 0 0 22px; padding: 0 14px; }
.s-toc--in summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; font-weight: 700; }
.s-toc--in summary::-webkit-details-marker { display: none; }
.s-toc--in summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--green); }
.s-toc--in[open] summary::after { content: "−"; }
.s-toc--in ol { padding-bottom: 12px; }
.s-toc--side { padding: 16px 14px; }
.s-toc--side > p { margin: 0 10px 8px; font-weight: 700; }
.s-art__work { margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--edge);
  border-radius: 18px; padding: 16px; }
.s-art__work .s-player { flex: 1 1 320px; margin: 0; }
.s-art__work.is-tall .s-player { flex: 0 1 240px; }
.s-art__work figcaption { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-art__work figcaption small { font-size: 13px; font-weight: 700; color: var(--green-deep); }
.s-art__work figcaption strong { font-size: 19px; line-height: 1.45; }
.s-art__work figcaption span { font-size: 14.5px; color: var(--muted); }
.s-art__work figcaption a { margin-top: 8px; font-weight: 600; }
.s-art .s-prose { max-width: none; font-size: 17px; line-height: 1.8; }
.s-art .s-prose h2 { font-size: clamp(23px, 2.6vw, 28px); line-height: 1.4; margin-top: 1.7em; scroll-margin-top: 80px; }
.s-art .s-prose ol { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 12px; }
.s-art .s-prose ol > li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.s-art .s-prose ol > li::before { content: counter(step); width: 34px; height: 34px; border-radius: 999px; background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; line-height: 1; margin-top: 2px; }
.s-art .s-prose blockquote { border: 1px solid #e8d7a2; background: rgba(230, 200, 101, .14); color: #f3ead3; border-radius: 16px; padding: 14px 20px; }
.s-art .s-prose blockquote strong { color: #ecdcaf; }
.s-art .s-table table { border-radius: 14px; overflow: hidden; }
/* v1.58.23 กล่องสี: > [!tip] … (seven kinds, each its own colour; the words stay light on the dark page) */
.s-prose .s-callout { --co: #4fa3e8; margin: 1.3em 0; padding: 14px 20px 6px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--co) 55%, transparent);
  border-left-width: 5px; background: color-mix(in srgb, var(--co) 13%, transparent); color: inherit; }
.s-prose .s-callout__t { margin: 0 0 6px; font-weight: 700; color: color-mix(in srgb, var(--co) 70%, #fff); }
.s-prose .s-callout p { margin: 0 0 10px; }
.s-prose .s-callout ul { margin: 0 0 10px; padding-left: 22px; }
.s-prose .s-callout--note { --co: #4fa3e8; }
.s-prose .s-callout--tip { --co: #2fbf71; }
.s-prose .s-callout--important { --co: #a37bf0; }
.s-prose .s-callout--warning { --co: #e9b93c; }
.s-prose .s-callout--caution { --co: #ef5d5d; }
.s-prose .s-callout--summary { --co: #2cc597; }           /* (the mockups' green teal, 162° - not 1.43.10's cyan, not the old mint) */
.s-prose .s-callout--example { --co: #f08a4b; }
.s-art__faq, .s-art__src { margin-top: 40px; }
.s-art__faq h2, .s-art__src h2 { font-size: clamp(22px, 2.4vw, 26px); scroll-margin-top: 80px; }
.s-art__faq .s-faq__a { padding: 0 18px 6px; color: var(--ink2); }
.s-art__src ol { padding-left: 22px; color: var(--ink2); font-size: 15px; line-height: 1.8; }
.s-art__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; }
.s-art__tags > span { font-size: 14px; color: var(--muted); margin-right: 2px; }
.s-art__tags a { padding: 4px 14px; border-radius: 999px; background: var(--card); border: 1px solid rgba(140, 195, 230, .364); color: var(--green-deep);
  text-decoration: none; font-size: 14px; }
.s-art__tags a:hover { background: var(--tint); }
.s-author { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 26px; background: var(--card); border: 1px solid var(--edge);
  border-radius: 18px; padding: 20px 22px; }
.s-author > div { flex: 1 1 260px; min-width: 0; }
.s-author p { margin: 0; }
.s-author__by { font-size: 13px; color: var(--muted); }
.s-author__name { font-size: 19px; font-weight: 700; }
.s-author__role { font-size: 15px; color: var(--ink2); }
.s-author__bio { margin-top: 8px !important; font-size: 15px; color: var(--muted); line-height: 1.65; }
.s-author a { display: inline-block; margin-top: 8px; font-weight: 600; }
.s-art__try { background: var(--dark-glass, #0d3c5e); color: #fff; border-radius: 18px; padding: 18px; }
.s-art__try p { margin: 0 0 6px; font-size: 14px; color: #d4ece0; line-height: 1.6; }
.s-art__try p strong { color: #fff; font-size: 17px; }
.s-art__try .p-gold { width: 100%; margin-top: 8px; }
.s-art__cats { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 16px 18px; }
.s-art__cats > p { margin: 0 0 6px; font-weight: 700; }
.s-art__cats ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.s-art__cats a { display: block; padding: 5px 0; color: var(--ink2); text-decoration: none; }
.s-art__cats a.is-here, .s-art__cats a:hover { color: var(--green-deep); font-weight: 600; }
.s-art__rel { margin-top: 48px; }
.s-art__rel h2 { font-size: 24px; }
.s-art__band { margin: 48px 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  background: var(--dark-glass, #0d3c5e); color: #e8f3ed; border-radius: 24px; padding: 30px 28px; }
.s-art__band > div:first-child { flex: 1 1 340px; }
.s-art__band h2 { margin: 0; color: #fff; font-size: clamp(22px, 2.6vw, 28px); }
.s-art__band p { margin: 6px 0 0; color: #d4ece0; }
.s-art__band .s-actions { margin: 0; }
.s-art__band .s-btn--ghost { color: #fff; background: rgba(13, 32, 48, .1); border-color: rgba(140, 195, 230, .055); box-shadow: none; }
.s-post__meta { margin-top: auto; font-size: 13px; color: var(--muted); }
.s-post .s-card__body h2 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; margin: 0; }
.s-blog__cats { margin: 4px 0 18px; }
.s-blog__count { margin: 8px 0 14px; font-size: 14px; color: var(--muted); }
.s-blog__tags { margin: 0 0 22px; }
.s-blog__feat { margin-bottom: 18px; }
@media (min-width: 860px) {
  .s-post--big { flex-direction: row; }
  .s-post--big .s-card__media { flex: 1 1 46%; }
  .s-post--big .s-card__media img { height: 100%; object-fit: cover; }
  .s-post--big .s-card__body { flex: 1 1 54%; padding: 26px 28px; justify-content: center; gap: 10px; }
}
@media (max-width: 560px) {
  .s-short { padding: 18px; }
  .s-short__text { font-size: 16.5px; }
  .s-art__band { padding: 24px 18px; }
  .s-art__band .s-actions, .s-art__band .s-actions a { width: 100%; }
}

/* ================================================================ v1.43.8 the new look (the owner's design of 27 Oct, canvas
   "หน้าแรกใหม่ KAORANK"): a dark top bar and footer on every page; the home page dark forest green + gold with a mint glow.
   Headings in Kanit (OFL, self-hosted - FONT-LICENSE-KANIT.txt); the other pages keep their light reading area. */
@font-face { font-family: "Studio Display"; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/studio/web/font-display-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Studio Display"; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/studio/web/font-display-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 {
  --dk: #031824; --dk2: #081c2a; --dk-card: rgba(16, 40, 60, .62); --dk-card2: rgba(17, 49, 72, .72); --dk-edge: rgba(140, 195, 230, .338);
  --dk-ink: #f1f8fd; --dk-ink2: #d6eee7; --dk-muted: #aabac6; --mint: #5ff0c5; --mint2: #7ff0ce; --gold-ink: #efd993;
  --go: linear-gradient(90deg, #5ff0c5, #f0da91); --go-hover: linear-gradient(90deg, #7ff6d2, #f4e4ac);
  --display: "Studio Display", "Studio Sans", "Noto Sans Thai", sans-serif;
}
.s-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s-soon { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: rgba(234, 202, 108, .16);
  border: 1px solid rgba(234, 202, 108, .45); color: var(--gold-ink); font-size: 11px; font-weight: 600; line-height: 1.6; vertical-align: middle; }
.s-btn--go { color: #142430; background: var(--go); border-color: transparent; font-weight: 700; box-shadow: 0 8px 24px -10px rgba(95, 240, 197, .8); }
.s-btn--go:hover { color: #142430; background: var(--go-hover); box-shadow: 0 10px 28px -10px rgba(240, 218, 145, .85); }
.s-btn--line { color: #deeefa; background: transparent; border: 1px solid #3ee6b4; box-shadow: none; }
.s-btn--line:hover { color: #fff; background: rgba(62, 230, 180, .12); box-shadow: none; }
.s-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); margin: 0; padding: 10px 18px; border-radius: 12px;
  background: #0e283a; color: #f1f8fd; border: 1px solid rgba(234, 202, 108, .5); font-size: 15px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); }
.s-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* the top bar (every page) */
.s-studio.s-top .s-body { margin-left: 0; }
.s-studio.s-top .s-side { position: sticky; top: 0; bottom: auto; left: auto; width: auto; height: auto; z-index: 40; display: block; padding: 0; gap: 0;
  overflow: visible; color: var(--dk-ink2); border: 0; border-bottom: 1px solid rgba(140, 195, 230, .182);
  background: rgba(1, 19, 29, .9); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: none; }
.s-top .s-side__top { max-width: 1380px; margin: 0 auto; min-height: 70px; padding: 10px 28px; display: flex; align-items: center; gap: 12px 26px;
  border: 0; border-image: none; }
.s-studio.s-top .s-brand { flex: none; margin: 0; color: #efd993; font-family: var(--display); font-size: 19px; letter-spacing: .02em; }
.s-studio.s-top .s-brand img { width: 40px; height: 40px; border-radius: 10px; }
.s-studio.s-top .s-brand--logo { flex: none; justify-content: flex-start; }
.s-studio.s-top .s-brand .s-brand__logo { height: 46px; width: auto; max-height: none; max-width: 220px; border-radius: 0; }
.s-studio.s-top .s-nav { flex: 1 1 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 2px 20px; padding: 0; margin: 0;
  position: static; background: none; box-shadow: none; border: 0; max-height: none; overflow: visible; }
.s-studio.s-top .s-nav > a, .s-top .s-nav > .s-soonbtn, .s-top .s-drop > summary { display: inline-flex; align-items: center; gap: 4px; padding: 8px 2px;
  border-radius: 0; color: var(--dk-ink2); background: none; border: 0; border-bottom: 2px solid transparent; box-shadow: none; text-decoration: none;
  font: inherit; font-size: 15px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.s-studio.s-top .s-nav > a:hover, .s-top .s-nav > .s-soonbtn:hover, .s-top .s-drop > summary:hover { color: #fff; background: none; }
.s-studio.s-top .s-nav > a[aria-current] { color: var(--mint2); background: none; box-shadow: none; font-weight: 600; border-bottom-color: #3ee6b4; }
.s-top .s-drop { position: relative; }
.s-top .s-drop > summary { list-style: none; }
.s-top .s-drop > summary::-webkit-details-marker { display: none; }
.s-top .s-drop__chev { width: 14px; height: 14px; transition: transform .15s; }
.s-top .s-drop[open] .s-drop__chev { transform: rotate(180deg); }
.s-top .s-drop__menu { position: absolute; top: calc(100% + 10px); left: -14px; z-index: 50; width: 300px; display: grid; gap: 2px; padding: 10px;
  border-radius: 16px; background: linear-gradient(180deg, #0c2c42, #071d2c); border: 1px solid var(--dk-edge); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); }
.s-top .s-drop__t { margin: 2px 8px 6px; font-size: 12.5px; color: var(--gold-ink); }
.s-studio.s-top .s-drop__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--dk-ink2);
  text-decoration: none; font-size: 14.5px; background: none; box-shadow: none; }
.s-studio.s-top .s-drop__menu a .s-ico { color: var(--mint2); }
.s-studio.s-top .s-drop__menu a:hover { background: rgba(13, 32, 48, .07); color: #fff; }
.s-studio.s-top .s-drop__menu a[hidden] { display: none; }
.s-top .s-drop__all { border-top: 1px solid rgba(140, 195, 230, .182); margin-top: 4px; }
@media (max-width: 1279px) { .s-top .s-side.is-open .s-drop__all { border-top: 0; margin-top: 0; } }
.s-top__act { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.s-top .s-lang { height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(140, 195, 230, .39); background: rgba(16, 40, 60, .6);
  color: var(--dk-ink2); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; cursor: pointer; }
.s-top .s-lang .s-ico { width: 16px; height: 16px; }
.s-studio.s-top .s-side .s-side__login1 { display: inline-flex; min-height: 42px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 600;
  color: #deeefa; background: transparent; border: 1px solid #3ee6b4; box-shadow: none; }
.s-studio.s-top .s-side .s-side__login1:hover { color: #fff; background: rgba(62, 230, 180, .12); }
.s-top .s-top__start { min-height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15.5px; }
.s-top .s-top__start[hidden] { display: none; }
.s-studio.s-top .s-menubtn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px;
  border: 1px solid rgba(140, 195, 230, .39); background: rgba(16, 40, 60, .6); color: var(--dk-ink); cursor: pointer; }
.s-top .s-side :focus-visible { outline-color: #eaca6c; }
@media (max-width: 1279px) {      /* tablet / narrow computer: the row folds under ☰ */
  .s-studio.s-top .s-menubtn { display: inline-flex; }
  .s-studio.s-top .s-side:not(.is-open) .s-nav { display: none; }
  .s-studio.s-top .s-side.is-open .s-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 12px; padding: 10px 18px 18px; max-height: calc(100vh - 72px); overflow-y: auto;
    background: linear-gradient(180deg, rgba(8, 29, 44, .99), rgba(1, 19, 29, .99)); border-bottom: 1px solid var(--dk-edge); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); }
  .s-studio.s-top .s-side.is-open .s-nav > a, .s-top .s-side.is-open .s-nav > .s-soonbtn { padding: 12px 8px; border-bottom: 1px solid rgba(140, 195, 230, .13); }
  .s-top .s-side.is-open .s-drop { grid-column: 1 / -1; }
  .s-top .s-side.is-open .s-drop > summary { padding: 12px 8px; color: var(--gold-ink); }
  .s-top .s-side.is-open .s-drop__menu { position: static; width: auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 4px 0 8px;
    background: none; border: 0; box-shadow: none; }
  .s-top .s-side.is-open .s-drop__t { grid-column: 1 / -1; }
}
@media (max-width: 760px) {       /* phone: logo · TH · ☰ (log in in the menu, เริ่มใช้งานฟรี at the foot of the home page) */
  .s-top .s-side__top { padding: 8px 14px; min-height: 62px; gap: 8px; }
  .s-studio.s-top .s-side .s-side__login1, .s-top .s-top__start { display: none; }
  .s-studio.s-top .s-brand .s-brand__logo { height: 40px; max-width: 52vw; }
  .s-top .s-lang { height: 40px; padding: 0 11px; }
  .s-studio.s-top .s-side.is-open .s-nav { grid-template-columns: 1fr; }
  .s-top .s-side.is-open .s-drop__menu { grid-template-columns: 1fr 1fr; }
  /* logged in (site.js marks <html class="s-in">): สตูดิโอของฉัน stays on the bar (1.39.1 - never looks logged out); TH folds away */
  .s-in .s-studio.s-top .s-side .s-side__login1 { display: inline-flex; min-height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .s-in .s-top .s-lang { display: none; }
  .s-in .s-studio.s-top .s-brand .s-brand__logo { max-width: 40vw; }
  .s-in .s-studio.s-top .s-brand span { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.s-studio.s-top .s-nav > a.s-nav__login { display: none; }
@media (max-width: 760px) { .s-studio.s-top .s-side.is-open .s-nav > a.s-nav__login { display: flex; justify-content: center; margin-top: 8px; padding: 12px;
  border: 1px solid #3ee6b4; border-radius: 12px; color: #deeefa; font-weight: 600; } }
/* (the earlier frame's coloured icon tiles and gradient headings stay off the new bar and the dark home page) */
.s-studio.s-top .s-drop__menu a .s-ico, .s-studio.s-top .s-nav a .s-ico { box-sizing: border-box; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--mint2); }
.s-studio .s-btn--go, .s-studio a.s-btn--go, .s-studio a.s-btn--go:hover { color: #e2f3ee; }
.s-studio .s-btn--line, .s-studio a.s-btn--line { color: #deeefa; }

/* the footer (every page) */
.s-studio.s-top .s-foot { margin-top: 0; padding: 40px 0 30px; color: var(--dk-ink2); background: linear-gradient(180deg, #071b2a, #04121c);
  border-top: 1px solid rgba(140, 195, 230, .182); }
.s-top .s-foot__in { display: grid; gap: 24px 40px; }
@media (min-width: 860px) { .s-top .s-foot__in { grid-template-columns: 1.2fr 1fr 1fr; } .s-top .s-foot__copy { grid-column: 1 / -1; } }
.s-top .s-foot strong { color: #fff; font-family: var(--display); font-weight: 700; }
.s-top .s-foot p { color: var(--dk-muted); }
.s-top .s-foot__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.s-top .s-foot__nav strong { margin-bottom: 4px; color: var(--gold-ink); font-size: 15px; }
.s-top .s-foot a, .s-top .s-foot .s-soonbtn { color: var(--dk-ink2); text-decoration: none; font: inherit; font-size: 14.5px; background: none; border: 0; padding: 0; cursor: pointer; }
.s-top .s-foot a:hover, .s-top .s-foot .s-soonbtn:hover { color: var(--mint2); }
.s-top .s-foot__social { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.s-top .s-foot__copy { margin: 8px 0 0; padding-top: 18px; border-top: 1px solid rgba(140, 195, 230, .156); font-size: 13.5px; }

/* ---------------------------------------------------------------- the home page */
body.s-home { background: radial-gradient(38% 30% at 2% 62%, rgba(46, 190, 147, .2), transparent 70%), radial-gradient(34% 26% at 99% 70%, rgba(46, 190, 147, .18), transparent 70%),
  radial-gradient(70% 45% at 30% 0%, rgba(24, 73, 109, .35), transparent 70%), linear-gradient(180deg, #081c2a 0%, #031824 45%, #06121b 100%) fixed, #031824;
  color: var(--dk-ink); }
body.s-home::before, body.s-home::after { display: none; }
.s-studio.s-home h1, .s-studio.s-home h2, .s-studio.s-home h3 { width: auto; color: #fff; background: none; -webkit-text-fill-color: currentColor; }
.s-home h2 { font-family: var(--display); font-weight: 700; letter-spacing: 0; }
.s-home .s-muted, .s-home .s-sec__head p { color: var(--dk-muted); }
.s-home a { color: var(--mint2); }
.s-home a:hover { color: #c8ffee; }
.s-home .s-sec { padding: 44px 0; background: none; border: 0; }
.s-home .s-wrap { max-width: 1320px; padding: 0 28px; }
@media (max-width: 760px) { .s-home .s-wrap { padding: 0 16px; } }
.s-home .s-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.s-home .s-sec__head h2 { margin: 0 0 4px; }
.s-home .s-sec__head p { margin: 0; }
.s-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(140, 195, 230, .364);
  background: rgba(16, 40, 60, .6); color: var(--dk-ink2); font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.s-home a.s-chip { color: var(--dk-ink2); }
.s-home a.s-chip:hover { border-color: var(--mint); color: #fff; }
.s-chip .s-ico { width: 16px; height: 16px; color: #cfe9e1; }

/* the hero */
.s-hx { position: relative; overflow: hidden; min-height: 470px; }
.s-hx__img { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-fit: cover; object-position: center 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(0deg, transparent 0, #000 16%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(0deg, transparent 0, #000 16%); mask-composite: intersect; }
.s-hx__glow { position: absolute; right: -10%; top: -20%; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(63, 230, 180, .25), transparent 70%),
  radial-gradient(40% 30% at 70% 60%, rgba(234, 202, 108, .18), transparent 70%); }
.s-reel { position: absolute; right: -40px; top: 34px; width: 58%; transform: rotate(-6deg); }
.s-reel__strip { display: flex; gap: 12px; padding: 18px 14px; border-radius: 12px; background: #070e13; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 60px -10px rgba(63, 230, 180, .35);
  background-image: radial-gradient(circle at 10px 8px, #1c3141 3px, transparent 3.5px), radial-gradient(circle at 10px calc(100% - 8px), #1c3141 3px, transparent 3.5px);
  background-size: 22px 100%; background-repeat: repeat-x; }
.s-reel__f { flex: 0 0 auto; width: 200px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #0e1e29; }
.s-reel__f img { width: 100%; height: 100%; object-fit: cover; }
.s-reel__f:nth-child(n+5) { display: none; }
.s-hx__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 27, 42, .78) 0%, rgba(7, 27, 42, .45) 36%, transparent 58%); pointer-events: none; }
.s-hx__in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding-top: 30px; padding-bottom: 26px; }
.s-hx__title { position: relative; margin: 0; max-width: 760px; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.18;
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.s-hx__gold { display: inline-block; font-size: 1.28em; line-height: 1.08; background: linear-gradient(180deg, #fff3b8, #eaca6c 45%, #caa449);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.s-hx__swoosh { display: inline-block; width: 250px; height: 40px; margin-left: 6px; vertical-align: bottom; fill: none; stroke: #7ff0ce; stroke-width: 2.6; stroke-linecap: round; }
.s-hx__swoosh path:first-child { stroke: #eaca6c; }
.s-hx__swoosh2 { stroke-width: 1; opacity: .55; }
.s-hx__sub { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: #dcefe9; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.s-hx__form { max-width: 800px; margin: 6px 0 0; padding: 12px 14px; border-radius: 18px; background: rgba(8, 28, 42, .86); border: 1px solid rgba(140, 195, 230, .6);
  box-shadow: 0 0 0 4px rgba(95, 240, 197, .08), 0 0 40px -6px rgba(63, 230, 180, .45); }
.s-hx__field { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(20, 42, 60, .6); border: 1px solid rgba(140, 195, 230, .234); }
.s-hx__field .s-ico { color: #bfe8dc; }
.s-hx__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #f4f9fd; font: inherit; font-size: 16px; padding: 6px 0; }
.s-hx__field input::placeholder { color: #91a4b1; }
.s-hx__field:focus-within { border-color: var(--mint); }
.s-hx__row { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.s-hx__opt { font-size: 14px; }
.s-hx__go { margin-left: auto; min-height: 48px; padding: 0 24px; border-radius: 14px; font-size: 17px; }
.s-hx__go .s-ico { width: 20px; height: 20px; }
.s-hx__note { margin: 0; font-size: 13px; color: var(--dk-muted); }
.s-hx__chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 880px; }
@media (max-width: 1100px) { .s-hx__img, .s-reel { opacity: .45; } .s-reel { width: 80%; right: -20%; } }
@media (max-width: 760px) {
  .s-hx { min-height: 0; }
  .s-hx__img { position: relative; width: 100%; height: 220px; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); opacity: 1; }
  .s-reel { position: relative; right: auto; top: 0; width: 140%; margin: 14px 0 -30px -10%; opacity: .9; }
  .s-reel__f { width: 140px; }
  .s-hx__shade { background: linear-gradient(180deg, transparent 0%, rgba(7, 27, 42, .6) 40%, rgba(7, 27, 42, .9) 100%); }
  .s-hx__in { padding-top: 6px; }
  .s-hx__title { font-size: 28px; }
  .s-hx__swoosh { width: 140px; height: 26px; }
  .s-hx__opt { display: none; }
  .s-hx__row { margin-top: 10px; }
  .s-hx__go { width: 100%; margin-left: 0; justify-content: center; }
  .s-hx__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .s-hx__chips a:nth-child(n+6) { display: none; }
}

/* the numbers */
.s-stats { border-top: 1px solid rgba(140, 195, 230, .156); border-bottom: 1px solid rgba(140, 195, 230, .156); background: rgba(4, 18, 28, .55); }
.s-stats__in { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px 0; padding-top: 16px; padding-bottom: 16px; }
.s-stat { flex: 1 1 200px; display: flex; align-items: center; gap: 14px; padding: 2px 18px; border-right: 1px solid rgba(140, 195, 230, .182); }
.s-stat:last-child { border-right: 0; }
.s-stat__ico { width: 34px; height: 34px; color: var(--gold-ink); stroke-width: 1.5; }
.s-stat strong { display: block; font-family: var(--display); font-size: 22px; line-height: 1.2; color: #fff; }
.s-stat small { display: block; color: var(--dk-muted); font-size: 13px; line-height: 1.4; }
.s-stat--check { flex: 0 1 260px; border-radius: 14px; border: 1px solid rgba(140, 195, 230, .455); background: rgba(17, 49, 72, .5); color: #ecf5fc;
  font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.s-stat--check .s-stat__ico { color: var(--mint); }
@media (max-width: 760px) {
  .s-stats__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .s-stat { flex: none; padding: 10px; border: 1px solid rgba(140, 195, 230, .182); border-radius: 12px; }
  .s-stat:last-child { border-right: 1px solid rgba(140, 195, 230, .455); }
  .s-stat--check { grid-column: 1 / -1; }
  .s-stat strong { font-size: 17px; }
}

/* the types of work */
.s-types__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.s-type { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid rgba(140, 195, 230, .39); background: var(--dk-card);
  text-decoration: none; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); transition: transform .15s, border-color .15s; }
.s-type:hover { transform: translateY(-3px); border-color: var(--mint); }
.s-type__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #0e1e29; }
.s-type__media img { width: 100%; height: 100%; object-fit: cover; }
.s-type__art { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.s-type__art--film { background: radial-gradient(70% 90% at 30% 20%, rgba(234, 202, 108, .35), transparent 70%), linear-gradient(160deg, #16364d, #081823); }
.s-type__art--review { background: radial-gradient(70% 90% at 70% 20%, rgba(95, 240, 197, .35), transparent 70%), linear-gradient(160deg, #123249, #07151f); }
.s-type__art--shorts { background: radial-gradient(70% 90% at 50% 10%, rgba(127, 240, 206, .35), transparent 70%), linear-gradient(160deg, #143852, #081823); }
.s-type__art--doc { background: radial-gradient(70% 90% at 20% 80%, rgba(234, 202, 108, .3), transparent 70%), linear-gradient(160deg, #1c3547, #081823); }
.s-type__art--podcast { background: radial-gradient(70% 90% at 80% 80%, rgba(95, 240, 197, .3), transparent 70%), linear-gradient(160deg, #103148, #07151f); }
.s-type__big { width: 56px; height: 56px; color: #efd993; stroke-width: 1.4; }
.s-type__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.s-type__body strong { color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px; }
.s-type__body small { color: var(--dk-muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 1100px) { .s-types__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .s-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s-type__body strong { font-size: 15px; }
  .s-type__body small { font-size: 12.5px; } .s-type:nth-child(5) { display: none; } }

/* the tools */
.s-tools__in { display: grid; gap: 22px 36px; align-items: center; }
@media (min-width: 1000px) { .s-tools__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.s-tools__text h2 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
.s-tools__hl { background: linear-gradient(90deg, #7ff0ce, #eaca6c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.s-tools__text .s-btn { margin-top: 6px; }
.s-tools__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.s-tool { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; padding: 16px 8px 14px; border-radius: 16px;
  border: 1px solid rgba(140, 195, 230, .26); background: linear-gradient(180deg, rgba(17, 49, 72, .72), rgba(8, 28, 42, .72)); text-decoration: none; font: inherit; cursor: pointer; }
.s-home a.s-tool:hover, .s-tool:hover { border-color: var(--mint); }
.s-tool strong { color: #f4f9fd; font-family: var(--display); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.s-tool small { color: var(--dk-muted); font-size: 12.5px; line-height: 1.45; }
.s-tool__ico { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #efd993;
  background: linear-gradient(160deg, rgba(95, 240, 197, .2), rgba(234, 202, 108, .14)); box-shadow: inset 0 0 0 1px rgba(120, 230, 197, .25); }
.s-tool__ico .s-ico { width: 26px; height: 26px; }
.s-tool--soon { display: none; }
@media (max-width: 1100px) { .s-tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .s-tools__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .s-tool { padding: 12px 4px 10px; }
  .s-tool strong { font-size: 12px; } .s-tool small { font-size: 10.5px; } .s-tool__ico { width: 42px; height: 42px; } .s-tool--soon { display: flex; } }

/* the customers' real reviews */
.s-reviews__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.s-review { margin: 0; padding: 18px; border-radius: 16px; border: 1px solid var(--dk-edge); background: var(--dk-card); }
.s-review__stars { margin: 0 0 6px; color: #eaca6c; letter-spacing: 2px; }
.s-review blockquote { margin: 0 0 10px; color: var(--dk-ink2); }
.s-review figcaption { color: var(--dk-muted); font-size: 14px; }

/* the sections below, dark */
.s-home .s-panel, .s-home .s-card, .s-home .s-faq__item, .s-home .s-map__card, .s-home .s-steps li, .s-home .p-card {
  background: var(--dk-card); border-color: var(--dk-edge); box-shadow: none; color: var(--dk-ink2); }
.s-studio.s-home .s-answer .s-wrap { max-width: 1320px; }
.s-home .s-ans { display: grid; gap: 22px; align-items: center; }
@media (min-width: 1000px) { .s-home .s-ans--two { grid-template-columns: 1.3fr 1fr; } }
.s-home .s-answer p { font-size: 17px; }
.s-home .s-panel p, .s-home .s-card p, .s-home .s-steps p, .s-home .s-faq__item div { color: var(--dk-ink2); }
.s-home .s-checks { margin-top: 14px; gap: 8px 22px; }
.s-home .s-checks li { background: none; border: 0; box-shadow: none; color: var(--dk-ink2); padding: 4px 0 4px 32px; font-size: 15px; }
.s-home .s-checks li::before { left: 0; top: 7px; background: rgba(95, 240, 197, .18); }
.s-home .s-checks li::after { left: 6px; top: 11px; border-color: var(--mint); }
.s-home .s-card h3, .s-home .s-card__body h3 { color: #fff; }
.s-home .s-tag { background: rgba(95, 240, 197, .14); color: var(--mint2); }
.s-home .s-hero__media figcaption { color: var(--dk-muted); }
.s-home .s-map__fold > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 16px;
  border: 1px solid var(--dk-edge); background: var(--dk-card); }
.s-home .s-map__fold > summary::-webkit-details-marker { display: none; }
.s-home .s-map__fold > summary h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.s-home .s-map__fold > summary h2::after { content: " ▾"; color: var(--gold-ink); font-size: .8em; }
.s-home .s-map__fold[open] > summary { margin-bottom: 16px; }
.s-home .s-map__card li { border-top-color: rgba(140, 195, 230, .156); }
.s-home .s-map__card li span { color: var(--dk-ink2); }
.s-home .s-map__card li em { background: rgba(95, 240, 197, .1); border-color: rgba(140, 195, 230, .26); color: var(--mint2); }
.s-home .s-map__head p { color: var(--dk-muted); }
.s-home .s-faq__item summary h3 { color: #fff; }
.s-home .s-band { margin-top: 10px; }
.s-home .s-band .s-actions { justify-content: center; }
.s-home .s-band .s-btn--go { color: #142430; background: var(--go); }
.s-dock { display: none; }
@media (max-width: 760px) {
  .s-home .s-dock { position: sticky; bottom: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px 12px;
    background: linear-gradient(180deg, rgba(3, 24, 36, 0), rgba(3, 24, 36, .95) 30%); }
  .s-home .s-dock .s-btn { min-height: 50px; border-radius: 14px; font-size: 17px; }
  .s-home .s-dock small { text-align: center; color: var(--dk-muted); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .s-type { transition: none; } .s-type:hover { transform: none; } }

/* ================================================================ v1.43.9 every page of the website dark - the studio's design system (owner 27 Oct 23:27
   "อยากให้เหมือนกันทั้งเว็บ ไม่ใช่หน้านี้ ว้าวสวย ไปอีกหน้า อ้าว ทำไมดูเหมือนคนละเว็บ"): the ground #041510, cards a soft emerald gradient with a thin mint
   edge, light words, headings in Kanit, mint for what is chosen, gold for "เริ่มใช้งานฟรี" and every main action. The colours of the older rules
   above were turned once by worker/tools/build_dark.py; this block sets the shared parts. */
:root {
  --ink: #f1f8fd; --ink2: #d6eee7; --muted: #aabac6; --faint: #80909c;
  --green: #7ff0ce; --green-deep: #c8ffee; --green-hi: #5ff0c5; --tint: rgba(63, 230, 180, .14); --soft: rgba(20, 42, 60, .55);
  --ground: #031824; --card: linear-gradient(180deg, rgba(22, 48, 70, .7), rgba(11, 30, 46, .75)); --edge: rgba(140, 195, 230, .234); --line: rgba(140, 195, 230, .156);
  --forest: #01131d; --shadow: none;
  --go: linear-gradient(180deg, #f6e5a5, #eaca6c 50%, #d7b04e); --go-hover: linear-gradient(180deg, #feeea6, #eed27d 50%, #deb958);
  --gold: var(--go); --gold-hover: var(--go-hover); --gold-shadow: 0 6px 18px -8px rgba(234, 202, 108, .8);
  --pill: linear-gradient(90deg, rgba(63, 230, 180, .3), rgba(63, 230, 180, .12)); --pill-hover: linear-gradient(90deg, rgba(63, 230, 180, .38), rgba(63, 230, 180, .16));
  --pill-shadow: inset 0 0 0 1px rgba(95, 240, 197, .6);
  --dark-glass: linear-gradient(180deg, rgba(13, 40, 60, .97), rgba(1, 19, 29, .98)); --ai: linear-gradient(90deg, #5ff0c5, #7ff0ce 50%, #eaca6c);
  color-scheme: dark;
}
body { background: radial-gradient(60% 40% at 55% 0%, rgba(40, 150, 117, .22), transparent 60%) no-repeat, #031824; background-attachment: fixed; color: var(--ink); }
body::before, body::after { display: none; }
a { color: #7ff0ce; }
a:hover { color: #c8ffee; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: 0; color: #fff; background: none; -webkit-text-fill-color: currentColor; }
h3, h4 { color: #f4f9fd; }
.s-muted, .s-lead, .s-crumbs, .s-crumbs a { color: var(--muted); }
::selection { background: #eaca6c; color: #2b1d03; }
/* the main action gold (it was mint to gold) */
.s-btn--go, .s-home .s-band .s-btn--go, .s-btn--gold, .s-btn--primary { color: #2b1d03; background: var(--go); border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(234, 202, 108, .8); text-shadow: none; }
.s-btn--go:hover, .s-btn--gold:hover, .s-btn--primary:hover { color: #2b1d03; background: var(--go-hover); box-shadow: 0 8px 22px -8px rgba(234, 202, 108, .9); }
.s-btn { border-radius: 12px; }
.s-btn:not(.s-btn--go):not(.s-btn--gold):not(.s-btn--primary):not(.s-btn--line) { color: #d6eee7; background: rgba(16, 40, 60, .7); border: 1px solid rgba(140, 195, 230, .364); box-shadow: none; }
.s-btn:not(.s-btn--go):not(.s-btn--gold):not(.s-btn--primary):not(.s-btn--line):hover { color: #fff; border-color: rgba(140, 195, 230, .6); background: rgba(24, 54, 78, .85); }
/* cards, panels, tables, the FAQ - the same card everywhere */
.s-panel, .s-card, .s-faq__item, .s-map__card, .s-steps li, .p-card, .s-price, .s-price__card, .s-post, .s-author, .s-toc, .s-box, .s-note, .s-cta, .s-related a,
.s-checks li, .s-plan, .s-table, .s-filters, .s-tile {
  border-color: rgba(140, 195, 230, .234); box-shadow: none; }
.s-panel, .s-card, .s-faq__item, .s-map__card, .s-steps li, .p-card { background: linear-gradient(180deg, rgba(22, 48, 70, .7), rgba(11, 30, 46, .75)); color: var(--ink2); }
.s-card h3, .s-card__body h3, .s-panel h3, .p-card h3, .s-faq__item summary h3 { color: #fff; }
.s-panel p, .s-card p, .s-steps p, .s-faq__item div { color: var(--ink2); }
.s-tag { background: rgba(95, 240, 197, .14); color: #7ff0ce; }
table { color: var(--ink2); }
th { color: var(--muted); }
td, th { border-color: rgba(140, 195, 230, .156); }
/* fields */
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { background-color: rgba(20, 42, 60, .65); color: #f4f9fd; border-color: rgba(140, 195, 230, .312); }
input::placeholder, textarea::placeholder { color: #80909c; }
/* the chosen filter / tab: mint */
.s-chip[aria-pressed=true], .s-chip.is-on, .s-filter.is-on, .s-filter[aria-current], .s-tabs a[aria-current], .p-chip[aria-pressed=true], .p-chip.is-on, .p-cat.is-on, .p-cat[aria-current] {
  background: linear-gradient(90deg, rgba(63, 230, 180, .3), rgba(63, 230, 180, .12)); color: #fff; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(95, 240, 197, .6); }
/* the preview strip for the owner */
.s-preview { background: rgba(234, 202, 108, .14); color: #f6e6b4; border-bottom: 1px solid rgba(234, 202, 108, .4); }
/* headings white (they were green to aqua); cards without the colour line on top */
.s-studio h1, .s-studio h2 { width: auto; color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; }
.s-studio .s-feature, .s-studio .s-map__card, .s-studio .s-card, .s-studio .s-faq__item, .s-studio .s-price__ex, .s-studio .p-card {
  background: linear-gradient(180deg, rgba(22, 48, 70, .7), rgba(11, 30, 46, .75)); border-color: rgba(140, 195, 230, .234); }
.s-studio .s-card:hover, .s-studio .p-card:hover { border-color: rgba(140, 195, 230, .6); }
.s-price__num strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #5ff0c5; -webkit-text-fill-color: currentColor; }
/* the gold buttons' words stay dark wherever an older rule set them (the bar, the band); the price page's two tables fit a phone */
.s-studio .s-btn--go, .s-studio a.s-btn--go, .s-studio a.s-btn--go:hover, .s-home .s-band .s-btn--go, .s-studio .s-top .s-btn--go { color: #2b1d03; }
.s-price__two > * { min-width: 0; }
h1, h2 { overflow-wrap: anywhere; }
/* the band's second button is a line (it took the band's gold with light words) */
.s-band .s-btn--line, .s-home .s-band .s-btn--line { color: #deeefa; background: transparent; border: 1px solid #3ee6b4; box-shadow: none; }
.s-band .s-btn--line:hover, .s-home .s-band .s-btn--line:hover { color: #fff; background: rgba(62, 230, 180, .12); }

/* ================================================================ v1.43.10 the reference picture's spacing and colours (owner 28 Oct 08:17
   "ตรวจ ระยะห่างระหว่างปุ่มหรือตัวหนังสือด้วยนะ" with the website beside the picture): the page uses the screen (the top bar and every home
   section 1600 px wide, the same edges), a taller top bar with the menu spread out, more room above the big title, bigger words under it,
   a roomier idea box, the type chips in one row, a taller numbers band, closer sections, the types a picture each with its name on it,
   the tools a coloured mark each; links cyan, the gold softer (the colours themselves were turned by build_dark.py --navy) */
:root { --s-edge: clamp(16px, 3vw, 40px); }
.s-top .s-side__top { max-width: 1600px; min-height: 76px; padding: 10px var(--s-edge); gap: 12px clamp(18px, 2.2vw, 34px); }
.s-studio.s-top .s-nav { gap: 2px clamp(14px, 1.9vw, 34px); }
.s-studio.s-top .s-nav > a, .s-top .s-nav > .s-soonbtn, .s-top .s-drop > summary { font-size: 16px; padding: 10px 2px; }
.s-studio.s-top .s-nav > a[aria-current] { border-bottom-color: #3fd4fb; color: #8be6ff; }
.s-home .s-wrap, .s-studio.s-home .s-answer .s-wrap { max-width: 1600px; padding: 0 var(--s-edge); }
.s-home a { color: #3fd4fb; }
.s-home a:hover { color: #a5ecff; }
.s-home .s-sec { padding: 30px 0; }
.s-home .s-sec__head { margin-bottom: 16px; }
.s-home .s-sec__head h2 { font-size: clamp(24px, 1.2vw + 14px, 32px); }
.s-home .s-sec__head p { font-size: 15.5px; }
/* the hero */
.s-hx { min-height: 500px; }
.s-hx__in { gap: 14px; }
.s-home .s-hx__in { padding-top: 34px; padding-bottom: 22px; }      /* (it is also an .s-wrap, whose padding is 0 on top) */
@media (max-width: 760px) { .s-home .s-hx__in { padding-top: 8px; } }
.s-hx__title { max-width: 820px; font-size: clamp(34px, 2.4vw + 12px, 54px); line-height: 1.16; }
.s-hx__sub { max-width: 660px; font-size: clamp(16px, .4vw + 12.5px, 19px); line-height: 1.6; }
.s-hx__form { max-width: 880px; margin-top: 10px; padding: 16px 18px; border-radius: 18px; border-color: rgba(80, 210, 215, .78);
  box-shadow: 0 0 0 1px rgba(80, 210, 215, .16), 0 0 30px -2px rgba(64, 200, 205, .45), inset 0 0 26px rgba(64, 200, 205, .06); }
.s-hx__field { padding: 10px 16px; }
.s-hx__field input { font-size: 17px; padding: 8px 0; }
.s-hx__row { margin-top: 14px; gap: 10px; }
.s-hx__opt.s-chip { min-height: 40px; padding: 0 15px; gap: 8px; font-size: 15px; border-radius: 10px; }
.s-hx__opt .s-ico { width: 18px; height: 18px; }
.s-hx__go { min-height: 52px; padding: 0 28px; gap: 10px; font-size: 17.5px; }
.s-hx__note { font-size: 13.5px; }
.s-hx__chips { flex-wrap: nowrap; gap: 8px; max-width: 980px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.s-hx__chips::-webkit-scrollbar { display: none; }
.s-hx__chips .s-chip { flex: none; padding: 7px 13px; font-size: 13.5px; }
/* the numbers band */
.s-home .s-stats__in { padding-top: 20px; padding-bottom: 20px; }      /* (also an .s-wrap: its padding was 0 on top since 1.43.8 - the band was thin) */
@media (max-width: 760px) { .s-home .s-stats__in { padding-top: 14px; padding-bottom: 14px; } }
.s-stat { gap: 16px; padding: 4px 24px; }
.s-stat__ico { width: 40px; height: 40px; }
.s-stat strong { font-size: 26px; }
.s-stat small { font-size: 14.5px; }
.s-stat--check { flex: 1 1 260px; border: 0; background: none; color: #f0d77f; font-family: var(--display); font-size: 16.5px; }
.s-stat--check .s-stat__ico { color: #f0d77f; }
/* the types: the picture fills the card, the name on it (a mark, the name, a line, an arrow) */
.s-types__grid { gap: 14px; }
.s-type { position: relative; isolation: isolate; display: block; aspect-ratio: 16 / 9.4; border-color: rgba(140, 195, 230, .32); }
.s-type:hover { border-color: rgba(96, 228, 186, .85); box-shadow: 0 0 0 1px rgba(96, 228, 186, .3), 0 18px 34px -16px rgba(62, 214, 170, .7); }
.s-type__media { position: absolute; z-index: -2; inset: 0; aspect-ratio: auto; }
.s-type__media img { transition: transform .3s; }
.s-type:hover .s-type__media img { transform: scale(1.04); }
.s-type::after { content: ""; position: absolute; z-index: -1; inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgba(2, 14, 24, .6) 45%, rgba(2, 14, 24, .92)); }
.s-type__art { align-items: flex-start; padding-top: 12%; box-sizing: border-box; }
.s-type__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 52px 14px 16px; }
.s-type__ic { display: block; margin-bottom: 6px; color: #f4cf5d; }
.s-type__ic .s-ico { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.s-type--shorts .s-type__ic, .s-type--doc .s-type__ic { color: #4fe6bf; }
.s-type:not(.has-img) .s-type__ic { display: none; }
.s-type__body strong { font-size: 18px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.s-type__body small { color: #d6e3ec; font-size: 13.5px; }
.s-type__go { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(2, 14, 24, .35); color: #fff; }
.s-type__go .s-ico { width: 16px; height: 16px; }
@media (max-width: 760px) { .s-type { aspect-ratio: 4 / 4.4; } .s-type__body { padding: 10px 40px 12px 12px; } .s-type__go { width: 26px; height: 26px; right: 10px; bottom: 12px; } }
/* the tools: a coloured mark each */
.s-tools__grid { gap: 12px; }
.s-tool { gap: 8px; padding: 18px 10px 16px; }
.s-tool strong { font-size: 14px; }
.s-tool small { font-size: 12.5px; }
.s-tool__ico { width: 52px; height: 52px; }
.s-tool__ico--type { color: #7cf2b8; background: rgba(52, 211, 153, .18); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .42); }
.s-tool__ico--image { color: #7eebfb; background: rgba(34, 211, 238, .16); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .4); }
.s-tool__ico--mic { color: #fbb2d8; background: rgba(244, 114, 182, .18); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, .42); }
.s-tool__ico--cut { color: #9cc8ff; background: rgba(96, 165, 250, .18); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .42); }
.s-tool__ico--grid { color: #fcd27b; background: rgba(251, 191, 36, .16); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .42); }
.s-tool__ico--share { color: #a5b4fc; background: rgba(129, 140, 248, .18); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .42); }
.s-tool__ico--brief { color: #f0d77f; background: rgba(240, 215, 127, .14); box-shadow: inset 0 0 0 1px rgba(240, 215, 127, .4); }
/* the gold of the picture (softer champagne), the same as the studio's */
:root, .s-studio { --go: linear-gradient(180deg, #fbf1a6, #e7d07d 48%, #d5ba66); --go-hover: linear-gradient(180deg, #fff6c0, #efd98e 48%, #dcc274); }
/* a phone keeps its own sizes (the rules above are for a computer) */
@media (max-width: 760px) {
  .s-hx__title { font-size: 28px; }
  .s-hx__sub { font-size: 15.5px; }
  .s-hx__form { padding: 12px; }
  .s-hx__go { min-height: 48px; font-size: 16.5px; }
  .s-stat { gap: 10px; padding: 10px; }
  .s-stat__ico { width: 30px; height: 30px; }
  .s-stat strong { font-size: 17px; }
  .s-stat small { font-size: 12.5px; }
  .s-stat--check { font-size: 15px; border: 1px solid rgba(240, 215, 127, .4); }
  .s-home .s-sec { padding: 24px 0; }
}

/* ================================================================ v1.43.11 the mockups' green (owner 28 Oct 11:28 "สีความเขียวไม่เหลือเลย ให้มีความเขียว
   ตาม มอกอัพได้ไหม"): what is chosen is a green teal again (build_dark.py --green), the main buttons mint to gold as the mockup draws
   them, the menu's line under the page mint, the numbers' marks green and gold, a green glow behind the page; the lower half with
   coloured marks (the steps, the questions), one or two prompts across their row, the tools a little larger */
:root, .s-studio { --go: linear-gradient(90deg, #9df3a6 0%, #f2e5b2 56%, #fbd58b 100%); --go-hover: linear-gradient(90deg, #b6f7bc 0%, #f7ecc5 56%, #fde0a4 100%); }
.s-studio .s-btn--go, .s-studio a.s-btn--go, .s-studio a.s-btn--go:hover, .s-home .s-band .s-btn--go, .s-studio .s-top .s-btn--go,
.s-btn--go, .s-btn--go:hover { color: #0f2a22; }
.s-btn--go { box-shadow: 0 8px 24px -10px rgba(157, 243, 166, .55), 0 8px 24px -12px rgba(251, 213, 139, .7); }
.s-btn--go:hover { box-shadow: 0 10px 28px -10px rgba(157, 243, 166, .7), 0 10px 28px -12px rgba(251, 213, 139, .85); }
.s-studio.s-top .s-nav > a[aria-current] { border-bottom-color: #6ff0b0; color: #b4f7d6; }
.s-stat .s-stat__ico { color: #f0d77f; }
.s-stat:nth-child(1) .s-stat__ico, .s-stat--check .s-stat__ico { color: #6ee7b0; }
body.s-home { background: radial-gradient(42% 32% at 0% 96%, rgba(34, 190, 140, .2), transparent 70%), radial-gradient(36% 30% at 100% 88%, rgba(34, 190, 150, .16), transparent 70%),
  radial-gradient(50% 36% at 70% 2%, rgba(30, 150, 120, .14), transparent 70%), #031824; background-attachment: fixed; }
/* ทำงานอย่างไร: each step its coloured mark at the card's corner */
.s-steps li { position: relative; }
.s-step__ico { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.s-step__ico .s-ico { width: 22px; height: 22px; }
.s-step__ico--1 { color: #7cf2b8; background: rgba(52, 211, 153, .16); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .4); }
.s-step__ico--2 { color: #9cc8ff; background: rgba(96, 165, 250, .16); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .4); }
.s-step__ico--3 { color: #fbb2d8; background: rgba(244, 114, 182, .16); box-shadow: inset 0 0 0 1px rgba(244, 114, 182, .4); }
.s-step__ico--4 { color: #fcd27b; background: rgba(251, 191, 36, .14); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .4); }
.s-steps h3 { padding-right: 52px; }
/* คำถามที่พบบ่อย: a mint question mark before each question */
.s-faq__item summary { display: flex; align-items: center; gap: 12px; }
.s-faq__item summary::before { content: "?"; flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 700;
  font-size: 15px; color: #7cf2b8; background: rgba(52, 211, 153, .14); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .38); }
/* คลัง Prompt on the home page: one or two across the row, the picture beside the words */
@media (min-width: 761px) {
  .s-home .p-grid--n1, .s-home .p-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-home .p-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {      /* (a tablet upright keeps the picture above the words - beside them the words had 200 px) */
  .s-home .p-grid--n1 .p-card, .s-home .p-grid--n2 .p-card { flex-direction: row; align-items: stretch; }
  .s-home .p-grid--n1 .p-card__link, .s-home .p-grid--n2 .p-card__link { flex: 0 0 38%; max-width: 38%; }
  .s-home .p-grid--n1 .p-shot, .s-home .p-grid--n2 .p-shot { aspect-ratio: 1 / 1; height: 100%; }
  .s-home .p-grid--n1 .p-card__body, .s-home .p-grid--n2 .p-card__body { flex: 1 1 auto; min-width: 0; justify-content: center; }
}
/* เครื่องมือ: a little larger, as the mockup draws them */
@media (min-width: 1101px) {
  .s-tool { padding: 22px 10px 20px; gap: 10px; }
  .s-tool__ico { width: 58px; height: 58px; border-radius: 16px; }
  .s-tool__ico .s-ico { width: 28px; height: 28px; }
  .s-tool strong { font-size: 15px; }
  .s-tool small { font-size: 13px; }
}
/* the type cards without a picture (no work of that kind on the website yet, no picture uploaded): the colours of หน้าหลัก's cards in the
   studio (film blue, review pink, shorts green, documentary gold, podcast violet) - not five dark cards alike */
.s-type__art--film { background: radial-gradient(90% 80% at 30% 15%, rgba(96, 165, 250, .5), transparent 70%), linear-gradient(160deg, #173f63, #0a1d2c); }
.s-type__art--review { background: radial-gradient(90% 80% at 30% 15%, rgba(245, 138, 192, .5), transparent 70%), linear-gradient(160deg, #4a1a3c, #0a1d2c); }
.s-type__art--shorts { background: radial-gradient(90% 80% at 30% 15%, rgba(56, 220, 150, .5), transparent 70%), linear-gradient(160deg, #0f4a3a, #0a1d2c); }
.s-type__art--doc { background: radial-gradient(90% 80% at 30% 15%, rgba(240, 215, 127, .5), transparent 70%), linear-gradient(160deg, #4a3a10, #0a1d2c); }
.s-type__art--podcast { background: radial-gradient(90% 80% at 30% 15%, rgba(196, 165, 255, .5), transparent 70%), linear-gradient(160deg, #33245c, #0a1d2c); }
.s-type__art--film .s-type__big { color: #cfe2ff; } .s-type__art--review .s-type__big { color: #fbd5ea; } .s-type__art--shorts .s-type__big { color: #b6f8d8; }
.s-type__art--doc .s-type__big { color: #faebbd; } .s-type__art--podcast .s-type__big { color: #e6dbff; }
/* คัดลอก on a prompt: the white words on the emerald-cyan button read 3.3:1 - the mockup's mint with dark words */
.p-copy { color: #062a1f; background: linear-gradient(120deg, #7cf2b8, #3fd6a9 55%, #4fd8e6); }
.p-copy.is-done { color: #fff; background: #0b558a; }
/* the top bar on a 1200-1560 px screen (a laptop): 1.43.10's spread-out menu pushed เริ่มใช้งานฟรี past the screen's edge (the page slid
   sideways 20-150 px at 1440 / 1366 / 1280) - the menu closes up as the screen narrows, the button always inside */
@media (max-width: 1560px) {
  .s-studio.s-top .s-nav { gap: 2px clamp(10px, 1.1vw, 18px); }
  .s-studio.s-top .s-nav > a, .s-top .s-nav > .s-soonbtn, .s-top .s-drop > summary { font-size: 15.5px; }
}
@media (max-width: 1380px) {
  .s-top .s-side__top { gap: 10px 14px; }
  .s-studio.s-top .s-nav { gap: 2px 10px; }
  .s-studio.s-top .s-nav > a, .s-top .s-nav > .s-soonbtn, .s-top .s-drop > summary { font-size: 14.5px; }
  .s-top .s-top__start { padding: 0 14px; font-size: 14.5px; }
}
/* a tablet held upright (761-1100 px: an iPad 768 / 810 / 820 / 834 / 1024) - the owner 28 Oct 12:28 "ไอแพดแนวตั้งลงตัวไหม เช็คดีๆ": no
   card left alone in a row, no squeezed words - the numbers two by two, the five types three then two wide ones, the steps two by two,
   the footer's three columns from 700 px */
@media (min-width: 761px) and (max-width: 1100px) {
  .s-stats__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .s-stat { flex: none; padding: 12px 16px; border: 1px solid rgba(140, 195, 230, .182); border-radius: 12px; }
  .s-stat:last-child { border-right: 1px solid rgba(140, 195, 230, .182); }
  .s-stat--check, .s-stat--check:last-child { border-color: rgba(140, 195, 230, .455); }
  .s-types__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s-types__grid > * { grid-column: span 2; }
  .s-types__grid > :nth-child(3n+1):nth-last-child(2), .s-types__grid > :nth-child(3n+1):nth-last-child(2) ~ * { grid-column: span 3; }
  .s-types__grid > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .s-types__grid > :nth-child(3n+1):nth-last-child(2) .s-type__media, .s-types__grid > :nth-child(3n+1):nth-last-child(2) ~ * .s-type__media { aspect-ratio: 2 / 1; }
  .s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-price__exs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }      /* ผลงาน's kinds in one row that slides (one had wrapped alone at 768) */
  .s-chips a { flex: none; }
}
@media (min-width: 700px) { .s-top .s-foot__in { grid-template-columns: 1.2fr 1fr 1fr; } .s-top .s-foot__copy { grid-column: 1 / -1; } }
@media (min-width: 800px) { .s-checks > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }      /* an odd list's last line across both columns */
/* v1.58.34 (the owner 12 Nov 00:11 "ควรมีปุ่ม scrollToTop ไหม"): ↑ back to the top on a long page (site.js toTop) - shown after about two screens;
   above a phone's home bar (.s-dock) and the bottom safe area; a draft article's date line (ยังไม่เผยแพร่ · แก้ไขล่าสุด) */
.s-totop { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; border: 1px solid var(--edge); border-radius: 50%; background: rgba(13, 32, 48, .92); color: var(--ink);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .6); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s, border-color .15s; }
.s-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.s-totop:hover { border-color: #5ff0c5; color: #fff; }
.s-totop:focus-visible { outline: 2px solid #5ff0c5; outline-offset: 3px; }
@media (max-width: 760px) { .s-home .s-totop { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } .s-totop { right: 12px; } }
@media print { .s-totop { display: none; } }
.s-byline__draft { color: #eddeb4; }
/* v1.58.45 หน้าโมเดล (/models/, /models/<slug>): the site's own cards, tables and facts; two columns from 900px, one below - never wider than the phone */
.s-mdl h1 { overflow-wrap: anywhere; }
.s-mdl__answer { max-width: 62ch; }
.s-mdl__cols { display: grid; gap: 8px 32px; grid-template-columns: minmax(0, 1fr); margin: 8px 0 12px; }
@media (min-width: 900px) { .s-mdl__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.s-mdl__cols > section, .s-mdl__cmp, .s-mdl__steps, .s-mdl__note, .s-mdl__works { min-width: 0; }
.s-mdl__spec { flex-direction: column; flex-wrap: nowrap; }
.s-mdl__spec div { overflow-wrap: anywhere; }
.s-mdl__spec dd { font-weight: 550; }
.s-mdl__ex { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 6px; }
.s-mdl__ex li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(13, 32, 48, .5); border: 1px solid rgba(140, 195, 230, .14); }
.s-mdl__how { margin: 8px 0 18px; padding-left: 1.4em; display: grid; gap: 6px; }
.s-mdl .s-table { overflow-x: auto; max-width: 100%; }
.s-mdl .s-table table { min-width: 0; }
.s-mdl__cmp tr.is-cur th, .s-mdl__cmp a[aria-current] { color: #ffd76a; }
.s-mdl__card { text-decoration: none; display: block; height: 100%; }
.s-mdl__card h3 { margin: 6px 0 4px; }
.s-mdl__card p { margin: 0 0 8px; color: var(--ink2); font-size: 15px; }
.s-mdl__price { color: #ffd76a !important; font-weight: 650; }
.s-mdl__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.s-mdl__tags .s-chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(140, 195, 230, .2); }
.s-mdl__cmpbox { margin: 14px 0 0; }
.s-mdl__cmpbox summary { cursor: pointer; font-weight: 650; padding: 6px 0; }
.s-mdl__links { margin: 26px 0; }
.s-mdl__links .s-chips { flex-wrap: wrap; overflow-x: visible; }
@media (max-width: 520px) { .s-mdl .s-actions { flex-direction: column; align-items: stretch; } .s-mdl .s-actions .s-btn { justify-content: center; text-align: center; white-space: normal; } }
/* v1.58.45 a model card alone on the last row takes the whole row (never one card left alone) */
@media (min-width: 640px) and (max-width: 959.98px) { .s-mdl__grid > :last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
@media (min-width: 960px) { .s-mdl__grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
/* v1.58.45 the list's jump to a group (a long list on a phone); the group's heading clear of the top bar */
.s-mdl__jump { margin: 18px 0 4px; }
.s-mdl__group { scroll-margin-top: 84px; }