:root { color-scheme: dark; --bg:#0d1018; --band:#121725; --surface:#181e2c; --surface-2:#20283a; --line:#303a50; --text:#f4f6fb; --muted:#aab3c5; --purple:#a48aff; --orange:#ff9f5a; --cyan:#67d8d5; --green:#63d6a0; --danger:#ff7e8a; font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; background:var(--bg); color:var(--text); } a { color:inherit; } img { display:block; max-width:100%; } button,input,select { font:inherit; }.wrap { width:min(1180px,calc(100% - 40px)); margin:0 auto; }.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(48,58,80,.9); background:rgba(13,16,24,.96); backdrop-filter:blur(12px); }.site-header .wrap { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:22px; }.brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:900; text-decoration:none; white-space:nowrap; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--purple); color:var(--purple); font-size:13px; }.site-nav { display:flex; align-items:center; gap:17px; overflow-x:auto; }.site-nav a { flex:0 0 auto; color:var(--muted); font-size:13px; font-weight:800; text-decoration:none; }.site-nav a:hover { color:#fff; }.nav-search { display:flex; align-items:center; gap:6px; border:1px solid var(--line); padding:4px 7px; }.nav-search input { width:114px; border:0; outline:0; background:transparent; color:#fff; font-size:12px; }.nav-search button { border:0; background:transparent; color:var(--purple); cursor:pointer; font-size:12px; font-weight:800; }
.hero { position:relative; isolation:isolate; min-height:min(74svh,720px); display:flex; align-items:flex-end; overflow:hidden; }.hero-media { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 37%; }.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(7,9,15,.53); }.hero-inner { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:76px 0 66px; }.eyebrow { margin:0 0 12px; color:var(--cyan); font-size:12px; font-weight:900; text-transform:uppercase; }.hero h1 { max-width:780px; margin:0; font-size:clamp(44px,6vw,76px); line-height:1.04; letter-spacing:0; }.hero-copy { max-width:670px; margin:18px 0 0; color:#edf0f8; font-size:clamp(16px,2vw,20px); line-height:1.7; }.hero-actions,.button-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }.button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:5px; padding:9px 14px; background:var(--orange); color:#1c1110; font-size:14px; font-weight:900; text-decoration:none; cursor:pointer; }.button:hover { background:#ffb676; }.button.dark { border-color:rgba(255,255,255,.44); background:rgba(13,16,24,.58); color:#fff; }.button.dark:hover,.button.outline:hover { border-color:var(--purple); background:rgba(164,138,255,.14); }.button.outline { border-color:var(--line); background:transparent; color:#fff; }.live-band { border-bottom:1px solid var(--line); background:#111724; }.live-band .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:18px 0; }.live-label { display:flex; align-items:center; gap:9px; color:#e3e7f2; font-size:14px; font-weight:800; }.live-dot { width:9px; height:9px; border-radius:50%; background:var(--orange); }.live-meta { color:var(--muted); font-size:13px; }
section { padding:78px 0; }.section-band { background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }.section-head h2 { margin:0; font-size:clamp(27px,3.4vw,42px); line-height:1.12; }.section-head p { max-width:660px; margin:10px 0 0; color:var(--muted); line-height:1.7; }.text-link { color:var(--purple); font-size:14px; font-weight:900; text-decoration:none; white-space:nowrap; }.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.article-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--surface); }.article-card img { width:100%; aspect-ratio:1.62; object-fit:cover; }.article-card-body { padding:17px; }.card-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }.category { color:var(--cyan); font-weight:900; text-transform:uppercase; }.article-card h3 { margin:12px 0 8px; font-size:20px; line-height:1.35; }.article-card h3 a { color:#fff; text-decoration:none; }.article-card h3 a:hover { color:var(--purple); }.article-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.tag { border:1px solid var(--line); padding:3px 6px; color:#c6cede; font-size:11px; }.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.category-card { display:block; min-height:146px; border:1px solid var(--line); border-left:4px solid var(--purple); background:var(--surface); padding:20px; color:#fff; text-decoration:none; }.category-card:nth-child(2n) { border-left-color:var(--orange); }.category-card:nth-child(3n) { border-left-color:var(--cyan); }.category-card h3 { margin:0 0 8px; font-size:20px; }.category-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.stream-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:stretch; }.stream-feature { position:relative; min-height:330px; display:flex; align-items:end; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:#171c29; }.stream-feature img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.64; }.stream-feature::after { content:""; position:absolute; inset:0; background:rgba(8,10,16,.47); }.stream-copy { position:relative; z-index:1; padding:25px; }.stream-copy h2 { max-width:520px; margin:0; font-size:clamp(26px,3.5vw,43px); }.stream-copy p { max-width:560px; margin:10px 0 0; color:#ebeff6; line-height:1.6; }.platform-list { display:grid; gap:12px; }.platform { display:grid; grid-template-columns:92px minmax(0,1fr); gap:15px; align-items:center; border:1px solid var(--line); background:var(--surface); padding:14px; text-decoration:none; }.platform-badge { display:grid; place-items:center; min-height:65px; background:#28223d; color:#d7cbff; font-weight:900; }.platform.twitch .platform-badge { background:#302040; color:#d7adff; }.platform strong { display:block; font-size:17px; }.platform span { display:block; margin-top:4px; color:var(--muted); font-size:13px; }.schedule-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.schedule-item { min-height:156px; border:1px solid var(--line); border-top:4px solid var(--cyan); background:var(--surface); padding:17px; }.schedule-item:nth-child(2) { border-top-color:var(--orange); }.schedule-item:nth-child(3) { border-top-color:var(--purple); }.schedule-item:nth-child(4) { border-top-color:var(--green); }.schedule-item:nth-child(5) { border-top-color:#76a9ff; }.schedule-item h3 { margin:0 0 9px; font-size:18px; }.schedule-item p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); gap:44px; align-items:center; }.about-grid img { width:100%; border:1px solid var(--line); border-radius:7px; }.about-copy h2 { margin:0; font-size:clamp(28px,3.4vw,43px); }.about-copy p { margin:15px 0 0; color:var(--muted); line-height:1.75; }.principles { margin:22px 0 0; padding:0; list-style:none; }.principles li { border-left:3px solid var(--orange); margin:11px 0; padding:5px 0 5px 11px; color:#dfe4ef; font-size:14px; }.empty-state { border:1px dashed var(--line); padding:30px; color:var(--muted); text-align:center; }.filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }.filters a { border:1px solid var(--line); padding:8px 10px; color:var(--muted); font-size:13px; font-weight:800; text-decoration:none; }.filters a.active,.filters a:hover { border-color:var(--purple); color:#fff; background:rgba(164,138,255,.12); }.article-search { display:grid; grid-template-columns:minmax(0,1fr) 150px auto; gap:8px; margin-bottom:16px; }.input { min-height:41px; border:1px solid var(--line); background:#111622; color:#fff; padding:8px 10px; outline:0; }.input:focus { border-color:var(--purple); }.article-shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:190px minmax(0,780px) 170px; gap:26px; padding:40px 0 74px; }.article-main { min-width:0; }.breadcrumb { margin:0 0 18px; color:var(--muted); font-size:13px; }.breadcrumb a { color:var(--purple); text-decoration:none; }.article-main h1 { margin:10px 0 14px; font-size:clamp(33px,4.6vw,56px); line-height:1.1; }.article-excerpt { margin:0; color:#d5dbe8; font-size:19px; line-height:1.65; }.article-byline { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; color:var(--muted); font-size:13px; }.article-hero { width:100%; max-height:490px; margin:24px 0; border:1px solid var(--line); border-radius:7px; object-fit:cover; }.article-content { color:#dde2ec; font-size:17px; line-height:1.82; }.article-content h2,.article-content h3,.article-content h4 { margin:2.1em 0 .65em; color:#fff; line-height:1.25; }.article-content h2 { font-size:31px; }.article-content h3 { font-size:24px; }.article-content p,.article-content ul,.article-content ol { margin:0 0 1.25em; }.article-content a { color:#c5b6ff; }.article-content figure { margin:26px 0; }.article-content figure img { border:1px solid var(--line); border-radius:7px; }.article-content figcaption { margin-top:8px; color:var(--muted); font-size:13px; text-align:center; }.article-content blockquote { margin:24px 0; border-left:3px solid var(--purple); padding:8px 0 8px 17px; color:#f3f1ff; }.article-content blockquote p { margin:0; }.article-content cite { display:block; margin-top:8px; color:var(--muted); font-size:13px; }.article-content pre { overflow:auto; border:1px solid var(--line); background:#111622; padding:15px; font-size:14px; }.article-content hr { border:0; border-top:1px solid var(--line); margin:34px 0; }.article-table { overflow-x:auto; margin:24px 0; }.article-table table { width:100%; border-collapse:collapse; }.article-table th,.article-table td { border:1px solid var(--line); padding:9px; text-align:left; }.checklist { list-style:none; padding:0; }.checklist li::before { content:"□"; display:inline-block; width:23px; color:var(--purple); }.checklist li.is-checked { color:var(--muted); text-decoration:line-through; }.checklist li.is-checked::before { content:"✓"; color:var(--green); }.article-note,.pubta-block { margin:24px 0; border:1px solid var(--line); border-left:4px solid var(--cyan); padding:15px; background:#141a27; }.article-note.warning,.pubta-block.patch-notice { border-left-color:var(--orange); }.article-note.tip,.pubta-block.quick-summary { border-left-color:var(--purple); }.article-note p { margin:6px 0 0; }.article-accordion { margin:16px 0; border:1px solid var(--line); padding:12px; }.article-accordion summary { cursor:pointer; color:#fff; font-weight:900; }.article-accordion div { padding-top:12px; color:var(--muted); }.article-cta a { display:inline-flex; min-height:41px; align-items:center; padding:8px 13px; background:var(--orange); color:#1c1110; font-weight:900; text-decoration:none; }.pubta-block h3 { margin:0 0 12px; font-size:18px; }.pubta-block dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }.pubta-block dl div { border-top:1px solid var(--line); padding-top:8px; }.pubta-block dt { color:var(--muted); font-size:12px; }.pubta-block dd { margin:3px 0 0; color:#fff; font-size:14px; }.video-embed { position:relative; aspect-ratio:16/9; margin:24px 0; }.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }.toc { position:sticky; top:92px; align-self:start; border-left:1px solid var(--line); padding-left:14px; }.toc strong { display:block; margin-bottom:9px; font-size:12px; text-transform:uppercase; }.toc a { display:block; margin:8px 0; color:var(--muted); font-size:12px; line-height:1.4; text-decoration:none; }.toc a:hover { color:var(--purple); }.share-bar { position:sticky; top:92px; align-self:start; display:grid; gap:7px; }.share-bar strong { margin-bottom:3px; font-size:12px; text-transform:uppercase; }.share-bar a,.share-bar button { min-height:34px; border:1px solid var(--line); background:var(--surface); color:#fff; padding:7px; font-size:12px; font-weight:800; text-align:center; text-decoration:none; cursor:pointer; }.share-bar a:hover,.share-bar button:hover { border-color:var(--purple); }.progress { position:fixed; top:68px; left:0; z-index:19; width:0; height:3px; background:var(--orange); }.sources { margin-top:38px; border-top:1px solid var(--line); padding-top:20px; }.sources h2 { font-size:18px; }.sources ul { padding-left:19px; }.sources a { color:var(--purple); overflow-wrap:anywhere; }.article-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:36px; }.article-nav a { border:1px solid var(--line); padding:13px; color:#fff; font-size:13px; text-decoration:none; }.article-nav a:last-child { text-align:right; }footer { border-top:1px solid var(--line); background:#101522; }footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:24px 0; color:var(--muted); font-size:13px; }footer a { color:var(--purple); text-decoration:none; }
@media (max-width:980px) { .article-grid,.category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.schedule-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.article-shell { grid-template-columns:minmax(0,1fr) 150px; }.toc { display:none; }.article-main { grid-column:1; }.share-bar { grid-column:2; grid-row:1; }.stream-grid,.about-grid { grid-template-columns:1fr; } }.mobile-share { display:none; } @media (max-width:680px) { .wrap,.hero-inner,.article-shell { width:min(100% - 28px,1180px); }.site-header .wrap { min-height:62px; gap:12px; }.site-nav { gap:14px; }.site-nav a:nth-of-type(n+4),.nav-search { display:none; }.hero { min-height:590px; }.hero-inner { padding:70px 0 54px; }.live-band .wrap { grid-template-columns:1fr; gap:7px; }.article-grid,.category-grid,.schedule-grid { grid-template-columns:1fr; }.section-head { display:block; }.section-head .text-link { display:inline-block; margin-top:12px; }.article-search { grid-template-columns:1fr; }.article-shell { display:block; padding-top:25px; }.share-bar { display:none; }.mobile-share { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }.mobile-share a,.mobile-share button { border:1px solid var(--line); background:var(--surface); color:#fff; padding:8px 10px; font-size:12px; font-weight:800; text-decoration:none; }.article-main h1 { font-size:35px; }.article-content { font-size:16px; }.article-content h2 { font-size:28px; }.pubta-block dl { grid-template-columns:1fr; }.article-nav { grid-template-columns:1fr; }.article-nav a:last-child { text-align:left; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; animation:none!important; } }