.avatar-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--color-bg-1)}.avatar-video.avatar-video--transparent{background:transparent!important}.avatar-video--transparent .avatar-video__layer{mix-blend-mode:screen}.avatar-video--hidden{opacity:0;visibility:hidden}.avatar-video__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 5%}.avatar-video__layer--contain{object-fit:contain;object-position:center center}.avatar-video__layer--top{object-fit:cover;object-position:center 5%}:root{--sf-topbar-bg: #0e4d28;--sf-primary-green: #15803d;--sf-brand-green: #166534;--sf-accent-green: #22c55e;--sf-light-green: #eefbf3;--sf-text-dark: #1e293b;--sf-text-muted: #64748b;--sf-sidebar-bg: #f8fafc;--sf-border-light: #e2e8f0}.skyfrog-official-page{min-height:100vh;background-color:#fff;color:var(--sf-text-dark);font-family:Kanit,Sarabun,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden}.skyfrog-topbar{background-color:var(--sf-topbar-bg);color:#fff;padding:8px 48px;font-size:13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}.skyfrog-topbar-left{display:flex;align-items:center;gap:24px}.skyfrog-topbar-item{display:flex;align-items:center;gap:6px;color:#e2e8f0;text-decoration:none;font-weight:400;transition:color .2s}.skyfrog-topbar-item:hover{color:#86efac}.skyfrog-topbar-right{display:flex;align-items:center;gap:16px}.skyfrog-social-icon{color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;transition:transform .2s}.skyfrog-social-icon:hover{transform:scale(1.15);color:#86efac}.skyfrog-navbar{background-color:#fff;padding:14px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f5f9;box-shadow:0 2px 10px #00000008;position:sticky;top:0;z-index:100}.skyfrog-brand-logo{display:flex;align-items:center;gap:8px;text-decoration:none}.skyfrog-dots-matrix{display:grid;grid-template-columns:repeat(3,4px);gap:3px}.skyfrog-dot{width:4px;height:4px;border-radius:50%;background:var(--sf-accent-green)}.skyfrog-logo-text{font-size:26px;font-weight:800;color:var(--sf-brand-green);letter-spacing:-.5px;display:flex;align-items:center}.skyfrog-logo-text span{color:#10b981}.skyfrog-nav-menu{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}.skyfrog-nav-link{color:#334155;text-decoration:none;font-size:14px;font-weight:500;padding:6px 4px;transition:color .2s;display:flex;align-items:center;gap:4px}.skyfrog-nav-link:hover,.skyfrog-nav-link.active{color:var(--sf-primary-green);font-weight:600}.skyfrog-lang-select{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px;color:#334155;background:#fff;cursor:pointer}.skyfrog-main-content{max-width:1280px;margin:40px auto 80px;padding:0 48px}.skyfrog-headline-title{font-size:32px;font-weight:800;color:var(--sf-topbar-bg);line-height:1.35;margin:0 0 36px;max-width:820px;letter-spacing:-.3px}.skyfrog-content-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}.skyfrog-diagram-container{background:radial-gradient(circle at 30% 40%,#fff,#f0fdf4);border:1px solid #dcfce7;border-radius:24px;padding:36px 28px;box-shadow:0 10px 30px #1665340f;position:relative}.skyfrog-diagram-graphics{display:flex;flex-direction:column;gap:20px}.diagram-banner-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 4px 14px #0000000a;display:flex;align-items:center;gap:18px}.diagram-badge-icon{width:52px;height:52px;border-radius:14px;background:#eefbf3;color:var(--sf-brand-green);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.diagram-text-block h3{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--sf-brand-green)}.diagram-text-block p{margin:0;font-size:13px;color:var(--sf-text-muted);line-height:1.5}.diagram-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}.feature-mini-box{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;border-left:4px solid var(--sf-accent-green)}.feature-mini-box h4{margin:0 0 4px;font-size:14.5px;font-weight:700;color:var(--sf-topbar-bg)}.feature-mini-box p{margin:0;font-size:12px;color:var(--sf-text-muted)}.skyfrog-sidebar-menu{background-color:var(--sf-sidebar-bg);border:1px solid #e2e8f0;border-radius:12px;padding:24px 20px;box-shadow:0 4px 12px #00000005}.skyfrog-sidebar-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.skyfrog-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.skyfrog-sidebar-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:14px;font-weight:500;color:#475569;cursor:pointer;transition:all .2s}.skyfrog-sidebar-item:hover{background:#fff;color:var(--sf-primary-green)}.skyfrog-sidebar-item.active{background:#fff;color:var(--sf-primary-green);font-weight:700;box-shadow:0 2px 8px #0000000a}.sidebar-arrow-icon{width:18px;height:18px;border-radius:50%;background:#cbd5e1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}.skyfrog-sidebar-item.active .sidebar-arrow-icon{background:var(--sf-accent-green)}.sidebar-ai-callout{background:linear-gradient(135deg,#eefbf3,#dcfce7);border:1px dashed var(--sf-accent-green);border-radius:10px;padding:14px;margin-top:20px}.sidebar-ai-callout h4{margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--sf-topbar-bg)}.sidebar-ai-callout p{margin:0 0 10px;font-size:11.5px;color:#334155;line-height:1.45}.sidebar-ai-callout button{background:var(--sf-topbar-bg);border:none;color:#fff;padding:7px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;width:100%}:host,:root,*{--sf-green-dark: #0e4d28;--sf-green-primary: #15803d;--sf-green-accent: #22c55e;--sf-green-light: #eefbf3;--sf-green-border: rgba(34, 197, 94, .45);--sf-green-glow: 0 12px 36px rgba(22, 101, 52, .25);--sf-text-main: #ffffff;--sf-text-sub: #cbd5e1;--color-bg-1: #0e4d28}.skyfog-floating-trigger{position:fixed;z-index:99999;width:58px;height:58px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.skyfog-floating-trigger.dragging{cursor:grabbing!important;opacity:.92}.skyfog-trigger-badge{position:absolute;right:68px;top:50%;transform:translateY(-50%) translate(16px);background:#fffffff5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(34,197,94,.45);color:var(--sf-green-dark);padding:7px 14px;border-radius:20px;font-size:13px;font-weight:700;box-shadow:0 6px 20px #0e4d2833;display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .22s ease,visibility .28s}.skyfog-floating-trigger:hover .skyfog-trigger-badge{transform:translateY(-50%) translate(0);opacity:1;visibility:visible;pointer-events:auto}.skyfog-trigger-badge .status-dot{width:8px;height:8px;border-radius:50%;background:var(--sf-green-accent);box-shadow:0 0 8px var(--sf-green-accent);animation:pulse-dot 1.8s infinite;flex-shrink:0}.skyfog-trigger-btn{position:relative;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#16a34af2,#15803df2,#0e4d28f2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.9);box-shadow:0 8px 24px #16653459,inset 0 2px 4px #ffffff59;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s cubic-bezier(.16,1,.3,1)}.skyfog-trigger-btn.btn-mic-active{background:linear-gradient(135deg,#10b981,#059669 60%,#047857);border-color:#fff;box-shadow:0 8px 28px #10b981a6,0 0 16px #10b98180,inset 0 2px 4px #fff6}.trigger-mic-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;animation:mic-pop .3s cubic-bezier(.34,1.56,.64,1) forwards}.trigger-mic-icon{width:22px;height:22px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.trigger-inner-sound-bars{display:flex;align-items:center;justify-content:center;gap:2.5px;height:9px}.inner-bar{width:2.5px;background:#fff;border-radius:2px;transition:height .08s ease;min-height:2px;animation:wave-bar .8s ease-in-out infinite alternate}@keyframes mic-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.pulse-ripple-ring{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(34,197,94,.7);pointer-events:none;z-index:-1}.pulse-ripple-ring.ring-1{animation:ripple-wave 2.8s cubic-bezier(.1,.5,.3,1) infinite}.pulse-ripple-ring.ring-2{animation:ripple-wave 2.8s cubic-bezier(.1,.5,.3,1) infinite .93s}.pulse-ripple-ring.ring-3{animation:ripple-wave 2.8s cubic-bezier(.1,.5,.3,1) infinite 1.86s}@keyframes ripple-wave{0%{transform:scale(.95);opacity:.95;border-color:#22c55ed9}60%{transform:scale(1.65);opacity:.35;border-color:#4ade8066}to{transform:scale(2.2);opacity:0;border-color:#86efac00}}.clean-ai-flat-icon{width:28px;height:28px;color:#fff;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));z-index:2}.skyfog-minimal-avatar-overlay{position:fixed;z-index:999999;width:210px;height:300px;background:#0e4d2840;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1.5px solid rgba(34,197,94,.55);border-radius:20px;box-shadow:0 20px 45px -5px #0e4d2859,0 0 24px #22c55e33;overflow:hidden;display:flex;flex-direction:column;transform-origin:bottom right;animation:avatar-expand-from-widget .38s cubic-bezier(.16,1,.3,1) forwards;font-family:Kanit,Sarabun,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}.skyfog-minimal-avatar-overlay.dragging{cursor:grabbing!important;transition:none!important;animation:none!important;opacity:.94;box-shadow:0 25px 60px -5px #0e4d288c!important}.skyfog-video-viewport{position:absolute;inset:0;width:100%;height:100%;background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center}.skyfog-avatar-video-wrapper{position:absolute;inset:0;width:100%;height:100%;background:transparent;overflow:hidden}.skyfog-floating-top-bar{position:absolute;top:8px;left:8px;right:8px;z-index:15;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.skyfog-audio-wave-badge{pointer-events:auto;background:#0e4d28d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(134,239,172,.45);padding:4px 8px;border-radius:12px;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px #00000040}.top-sound-bars{display:flex;align-items:center;gap:2px;height:11px}.top-sound-bar{width:2px;height:100%;background:#22c55e;border-radius:2px;min-height:2px;transition:height .08s ease;animation:wave-bar .8s ease-in-out infinite alternate}.skyfog-close-btn{pointer-events:auto;width:24px;height:24px;border-radius:50%;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.skyfog-close-btn:hover{background:#ef4444;border-color:#ef4444;transform:scale(1.1)}.skyfog-floating-status-fade{position:absolute;bottom:0;left:0;right:0;z-index:12;background:linear-gradient(to top,rgba(8,38,20,.88) 0%,rgba(8,38,20,.45) 55%,transparent 100%);padding:24px 12px 10px;display:flex;align-items:flex-end;pointer-events:none}.status-info-left{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.status-indicator-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-text-content{display:flex;flex-direction:column;min-width:0}.status-main-label{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.7)}.status-sub-label{font-size:9px;color:#86efac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}.live-sound-bars{display:flex;align-items:center;gap:1.5px;height:12px;flex-shrink:0}.live-sound-bar{width:2px;height:100%;background:#22c55e;border-radius:2px;animation:wave-bar .8s ease-in-out infinite alternate}.status-mic-btn{width:30px;height:30px;border-radius:50%;background:#15803de6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(134,239,172,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s}.status-mic-btn.active{background:#22c55e;box-shadow:0 0 10px #22c55eb3;animation:mic-pulse 1.5s infinite}@keyframes avatar-expand-from-widget{0%{opacity:0;transform:scale(.18) translate(18px,18px);border-radius:50%;filter:blur(8px)}40%{opacity:.85;filter:blur(0px)}to{opacity:1;transform:scale(1) translate(0);border-radius:20px}}@keyframes pulse-ring{0%{transform:scale(.95);opacity:.8}50%{transform:scale(1.15);opacity:0}to{transform:scale(1.15);opacity:0}}@keyframes pulse-dot{0%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}to{opacity:.4;transform:scale(.8)}}@keyframes wave-bar{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}@keyframes mic-pulse{0%,to{box-shadow:0 0 6px #22c55e66}50%{box-shadow:0 0 14px #22c55ecc}}@font-face{font-family:Anakotmai;src:url(/assets/fonts/Anakotmai-Light.ttf) format("truetype");font-weight:100 300;font-style:normal;font-display:swap}@font-face{font-family:Anakotmai;src:url(/assets/fonts/Anakotmai-Medium.ttf) format("truetype");font-weight:400 500;font-style:normal;font-display:swap}@font-face{font-family:Anakotmai;src:url(/assets/fonts/Anakotmai-Bold.ttf) format("truetype");font-weight:600 900;font-style:normal;font-display:swap}:host,:root{--kiosk-width: 1080px;--kiosk-height: 1920px;--color-bg-0: #eef7f4;--color-bg-1: #ffffff;--color-surface: rgba(255, 255, 255, .75);--color-surface-strong: #e6f4f0;--color-border: rgba(16, 185, 129, .15);--color-brand-green: #10b981;--color-brand-orange: #10b981;--avatar-fade-rgb: 6, 182, 212;--avatar-fade-height: 480px;--color-accent: #059669;--color-accent-2: #06b6d4;--color-accent-glow: rgba(16, 185, 129, .35);--gradient-accent: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);--color-listening: #10b981;--color-thinking: #06b6d4;--color-speaking: #059669;--color-error: #ef4444;--color-text: #0f172a;--color-text-dim: rgba(15, 23, 42, .65);--color-text-faint: rgba(15, 23, 42, .4);--font-sans: "Anakotmai", "Noto Sans Thai", "Segoe UI", system-ui, -apple-system, sans-serif;--fs-xs: 24px;--fs-sm: 30px;--fs-md: 40px;--fs-lg: 56px;--fs-xl: 76px;--space-1: 12px;--space-2: 24px;--space-3: 40px;--space-4: 64px;--space-5: 96px;--radius-md: 28px;--radius-lg: 48px;--radius-pill: 999px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg-0);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;user-select:none;-webkit-user-select:none;cursor:default}input,textarea,select,button{font-family:inherit}button{color:inherit;border:none;background:none;cursor:pointer}.kiosk-viewport{position:fixed;inset:0;overflow:hidden;background:var(--color-bg-0)}.kiosk-stage{width:var(--kiosk-width);height:var(--kiosk-height);position:absolute;top:50%;left:50%;overflow:hidden;transform-origin:center center;background:radial-gradient(120% 60% at 50% -10%,rgba(79,125,255,.14),transparent 60%),radial-gradient(120% 60% at 50% 110%,rgba(138,91,255,.12),transparent 60%),linear-gradient(180deg,var(--color-bg-1) 0%,var(--color-bg-0) 100%)}