@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";.site-nav{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-8);background:var(--surface-invert);border-bottom:1px solid oklch(25% .02 260);flex-wrap:wrap;display:flex}.site-nav-brand{align-items:center;gap:var(--space-3);border-radius:var(--radius-md);text-decoration:none;display:flex}.site-nav-brand:focus-visible{outline:2px solid var(--accent-gold);outline-offset:4px}.site-nav-logo{border-radius:var(--radius-md);width:40px;height:40px;color:var(--accent-gold);transition:background var(--duration-fast) var(--ease-out);background:oklch(25% .03 260);flex-shrink:0;justify-content:center;align-items:center;display:flex}.site-nav-brand:hover .site-nav-logo{background:oklch(30% .03 260)}.site-nav-identity{flex-direction:column;gap:1px;display:flex}.site-nav-org{font-size:var(--text-xs);color:var(--text-invert-2);letter-spacing:.04em}.site-nav-area{font-size:var(--text-lg);color:var(--text-invert);letter-spacing:-.01em;font-weight:700;line-height:1.2}.site-nav-links{align-items:center;gap:var(--space-1);flex-wrap:wrap;display:flex}.site-nav-link{padding:7px var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--text-invert-2);white-space:nowrap;transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);font-weight:500;text-decoration:none;position:relative}.site-nav-link:hover{color:var(--text-invert);background:oklch(25% .025 260)}.site-nav-link:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px}.site-nav-link--active{color:var(--text-invert);background:oklch(25% .025 260);font-weight:600}.site-nav-link--active:after{content:"";left:var(--space-4);right:var(--space-4);border-radius:var(--radius-pill);background:var(--nav-accent,var(--accent-gold));height:2px;position:absolute;bottom:1px}.site-nav-link.accent-gold{--nav-accent:var(--accent-gold)}.site-nav-link.accent-green{--nav-accent:var(--accent-green)}.site-nav-link.accent-blue{--nav-accent:oklch(65% .18 250)}@media (width<=720px){.site-nav{padding:var(--space-3) var(--space-4);gap:var(--space-3)}.site-nav-links{gap:2px}.site-nav-link{padding:6px var(--space-3);font-size:var(--text-xs)}}.accent-gold{--ch-accent:var(--accent-gold);--ch-accent-light:var(--accent-gold-light);--ch-accent-ink:oklch(42% .11 80)}.accent-green{--ch-accent:var(--accent-green);--ch-accent-light:var(--accent-green-light);--ch-accent-ink:oklch(38% .1 150)}.accent-blue{--ch-accent:var(--accent-blue);--ch-accent-light:var(--accent-blue-light);--ch-accent-ink:oklch(38% .12 250)}.channel-page{flex-direction:column;min-height:100vh;display:flex}.channel-hero{align-items:center;gap:var(--space-5);padding:var(--space-8) var(--space-8);background:var(--ch-accent-light);border-bottom:1px solid var(--border-subtle);border-left:4px solid var(--ch-accent);animation:fadeUp var(--duration-slow) var(--ease-out) both;display:flex}.channel-hero-icon{border-radius:var(--radius-lg);background:var(--ch-accent);width:56px;height:56px;color:var(--surface-0);box-shadow:var(--shadow-sm);flex-shrink:0;justify-content:center;align-items:center;display:flex}.channel-hero-text{gap:var(--space-1);flex-direction:column;display:flex}.channel-hero-title{font-size:var(--text-3xl);letter-spacing:-.02em;color:var(--text-primary);text-wrap:balance;font-weight:700;line-height:1.15}.channel-hero-subtitle{font-size:var(--text-base);color:var(--ch-accent-ink)}.channel-body{width:100%;max-width:1180px;padding:var(--space-10) var(--space-8);gap:var(--space-8);animation:fadeUp var(--duration-slow) var(--ease-out) 80ms both;flex:1;grid-template-columns:5fr 7fr;align-items:start;margin:0 auto;display:grid}.channel-guide{top:var(--space-6);gap:var(--space-5);padding:var(--space-6);background:var(--surface-0);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);flex-direction:column;display:flex;position:sticky}.channel-guide-title{align-items:center;gap:var(--space-2);font-size:var(--text-base);color:var(--text-primary);font-weight:600;display:flex}.channel-guide-title svg{color:var(--ch-accent)}.channel-guide-list{gap:var(--space-4);flex-direction:column;list-style:none;display:flex}.channel-guide-item{align-items:flex-start;gap:var(--space-3);display:flex}.channel-guide-num{border-radius:var(--radius-pill);background:var(--ch-accent-light);width:22px;height:22px;color:var(--ch-accent-ink);font-size:var(--text-xs);flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-weight:600;display:flex}.channel-guide-item-title{font-size:var(--text-sm);color:var(--text-primary);font-weight:600}.channel-guide-item-detail{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55}.channel-guide-panel{padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-1);border:1px solid var(--border-subtle)}.channel-guide-panel-title{font-size:var(--text-xs);color:var(--text-secondary);letter-spacing:.04em;margin-bottom:var(--space-3);font-weight:600}.channel-guide-tags{gap:var(--space-2);flex-wrap:wrap;list-style:none;display:flex}.channel-guide-tags li{padding:3px var(--space-3);border-radius:var(--radius-pill);background:var(--surface-0);border:1px solid var(--border-subtle);font-size:var(--text-xs);color:var(--text-secondary)}.channel-warning{align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--accent-gold-light);border-left:3px solid var(--accent-gold);font-size:var(--text-sm);color:oklch(38% .1 80);line-height:1.5;display:flex}.channel-warning svg{flex-shrink:0;margin-top:3px}.channel-form-card{padding:var(--space-8);background:var(--surface-0);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.channel-form{gap:var(--space-5);flex-direction:column;display:flex}.channel-row{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.channel-field{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.channel-label{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-primary);font-weight:600;display:flex}.channel-label svg{color:var(--ch-accent)}.channel-optional{padding:1px var(--space-2);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-tertiary);font-size:var(--text-xs);font-weight:500}.channel-input{width:100%;padding:11px var(--space-4);border:1px solid var(--border-mid);border-radius:var(--radius-md);background:var(--surface-0);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)}.channel-input::placeholder{color:var(--text-tertiary)}.channel-input:hover{border-color:var(--text-tertiary)}.channel-input:focus-visible{border-color:var(--ch-accent);box-shadow:0 0 0 3px var(--ch-accent-light);outline:none}.channel-input[aria-invalid=true]{border-color:var(--accent-rose)}.channel-input[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px var(--accent-rose-light)}.channel-input--fixed{background:var(--surface-1);color:var(--text-secondary);border-style:dashed;display:block}.channel-textarea{resize:vertical;min-height:130px;line-height:1.6}.channel-hint{margin-top:calc(var(--space-3) * -1);font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.5}.channel-error{font-size:var(--text-xs);color:var(--accent-rose);align-items:center;gap:5px;display:flex}.channel-submit-error{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--accent-rose-light);border-left:3px solid var(--accent-rose);font-size:var(--text-sm);color:oklch(42% .15 10);display:flex}.channel-submit-error svg{flex-shrink:0}.channel-actions{gap:var(--space-3);padding-top:var(--space-1);display:flex}.channel-btn{align-items:center;gap:var(--space-2);padding:11px var(--space-6);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);border:1px solid #0000;font-weight:600;display:inline-flex}.channel-btn:focus-visible{outline:2px solid var(--ch-accent);outline-offset:2px}.channel-btn--primary{background:var(--ch-accent);color:var(--surface-0);box-shadow:var(--shadow-sm)}.channel-btn--primary:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-1px)}.channel-btn--primary:active:not(:disabled){box-shadow:var(--shadow-xs);transform:translateY(0)}.channel-btn--primary:disabled{opacity:.6;cursor:progress}.channel-btn--ghost{background:var(--surface-1);border-color:var(--border-mid);color:var(--text-secondary)}.channel-btn--ghost:hover{background:var(--surface-2);color:var(--text-primary)}.channel-form-done{text-align:center;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-4);animation:fadeUp var(--duration-normal) var(--ease-out) both;flex-direction:column;display:flex}.channel-form-done svg{color:var(--ch-accent)}.channel-form-done h2{font-size:var(--text-xl);font-weight:700}.channel-form-done p{font-size:var(--text-sm);color:var(--text-secondary);max-width:42ch}.channel-form-done .channel-btn{margin-top:var(--space-2)}@media (width<=960px){.channel-body{padding:var(--space-6) var(--space-4);gap:var(--space-5);grid-template-columns:1fr}.channel-guide{position:static}}@media (width<=600px){.channel-hero{padding:var(--space-6) var(--space-4);gap:var(--space-4)}.channel-hero-title{font-size:var(--text-2xl)}.channel-hero-icon{width:46px;height:46px}.channel-form-card{padding:var(--space-5)}.channel-row{grid-template-columns:1fr}.channel-actions{flex-direction:column}.channel-btn{justify-content:center}}@media (prefers-reduced-motion:reduce){.channel-hero,.channel-body,.channel-form-done{animation:none}.channel-btn--primary:hover:not(:disabled){transform:none}}:root{--surface-page:oklch(98% .006 80);--surface-0:oklch(100% 0 0);--surface-1:oklch(97% .004 80);--surface-2:oklch(93% .006 80);--surface-invert:oklch(16% .02 260);--text-primary:oklch(16% .015 260);--text-secondary:oklch(42% .01 260);--text-tertiary:oklch(60% .008 260);--text-invert:oklch(96% .005 80);--text-invert-2:oklch(80% .01 260);--accent-blue:oklch(52% .2 250);--accent-blue-light:oklch(92% .05 250);--accent-rose:oklch(58% .22 10);--accent-rose-light:oklch(94% .04 10);--accent-gold:oklch(70% .16 80);--accent-gold-light:oklch(95% .06 80);--accent-green:oklch(60% .18 150);--accent-green-light:oklch(93% .05 150);--accent-purple:oklch(55% .2 300);--accent-purple-light:oklch(93% .05 300);--border-subtle:oklch(89% .006 80);--border-mid:oklch(82% .008 80);--shadow-xs:0 1px 2px oklch(0% 0 0/.04);--shadow-sm:0 2px 8px oklch(0% 0 0/.06), 0 1px 2px oklch(0% 0 0/.04);--shadow-md:0 4px 20px oklch(0% 0 0/.08), 0 2px 6px oklch(0% 0 0/.05);--shadow-lg:0 8px 32px oklch(0% 0 0/.1), 0 3px 10px oklch(0% 0 0/.06);--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--font-sans:"IBM Plex Sans Thai", system-ui, sans-serif;--font-mono:"IBM Plex Mono", "Courier New", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-hero:clamp(2.5rem, 1.5rem + 3vw, 4.5rem);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--duration-fast:.12s;--duration-normal:.22s;--duration-slow:.35s;--chart-1:oklch(52% .2 250);--chart-2:oklch(58% .22 10);--chart-3:oklch(60% .18 150);--chart-4:oklch(70% .16 80);--chart-5:oklch(55% .2 300);--chart-6:oklch(62% .19 200)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);background-color:var(--surface-page);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");min-height:100vh;line-height:1.6}#root{min-height:100vh}.tabular{font-variant-numeric:tabular-nums}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:999px}.recharts-tooltip-wrapper{outline:none!important}.recharts-default-tooltip{background:var(--surface-invert)!important;border-radius:var(--radius-sm)!important;padding:var(--space-2) var(--space-3)!important;font-family:var(--font-sans)!important;font-size:var(--text-sm)!important;border:1px solid oklch(30% .02 260)!important}.recharts-tooltip-label{color:var(--text-invert-2)!important;font-size:var(--text-xs)!important;margin-bottom:2px!important}.recharts-tooltip-item{color:var(--text-invert)!important}.leaflet-container{font-family:var(--font-sans)!important}.leaflet-popup-content-wrapper{border-radius:var(--radius-md)!important;box-shadow:var(--shadow-md)!important;font-family:var(--font-sans)!important}.loading-screen,.error-screen{justify-content:center;align-items:center;gap:var(--space-4);min-height:100vh;color:var(--text-secondary);font-size:var(--text-sm);flex-direction:column;display:flex}.loading-spinner{border:3px solid var(--border-mid);border-top-color:var(--accent-blue);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-up{animation:fadeUp var(--duration-slow) var(--ease-out) both}.animate-fade-in{animation:fadeIn var(--duration-slow) var(--ease-out) both}