.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-primary: #0E6B58;--sf-on-primary: #ffffff;--sf-accent: #46BFA1;--sf-surface: #ffffff;--sf-line: #e4e8e5;--sf-ink: #14201f;--sf-muted: #67736d;--sf-shadow: 0 16px 44px rgba(20, 32, 31, .16);--sf-ground: #0b0f0e;--sf-glass: rgba(8, 12, 11, .55);--sf-on-glass: #f2f5f2;--sf-thinking: #e8c069;--sf-idle-dot: #9aa8a1;--sf-hangup: rgba(196, 71, 42, .94);--sf-error: #f0a68a}.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:var(--sf-surface);border:1px solid var(--sf-line);color:var(--sf-ink);padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--sf-shadow);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.badge-right{right:auto;left:68px;transform:translateY(-50%) translate(-16px)}.skyfog-floating-trigger:hover .skyfog-trigger-badge.badge-right{transform:translateY(-50%) translate(0)}.skyfog-trigger-badge .status-dot{width:8px;height:8px;border-radius:50%;background:var(--sf-accent);animation:pulse-dot 1.8s infinite;flex-shrink:0}.skyfog-trigger-btn{position:relative;width:58px;height:58px;border-radius:50%;background:var(--sf-primary);border:none;box-shadow:var(--sf-shadow);display:flex;align-items:center;justify-content:center;color:var(--sf-on-primary);transition:transform .15s ease,box-shadow .15s ease}.skyfog-floating-trigger:hover .skyfog-trigger-btn{transform:translateY(-2px)}.skyfog-trigger-btn:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--sf-primary);opacity:.5;pointer-events:none;animation:sf-breathe 2.6s infinite ease-in-out}.skyfog-trigger-btn.btn-mic-active{background:var(--sf-primary)}.skyfog-trigger-btn.btn-mic-active:after{border-color:var(--sf-accent);animation:sf-breathe 1.9s infinite ease-in-out}.skyfog-trigger-btn.btn-mic-active.mic-muted{background:var(--sf-surface);border:1.5px solid var(--sf-line);color:var(--sf-ink)}.skyfog-trigger-btn.btn-mic-active.mic-muted:after{animation:none;opacity:0}.skyfog-trigger-btn.mic-muted .trigger-mic-icon{color:var(--sf-ink)}.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:var(--sf-on-primary)}.trigger-inner-sound-bars{display:flex;align-items:center;justify-content:center;gap:2.5px;height:9px}.inner-bar{width:2.5px;background:var(--sf-on-primary);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}}.clean-ai-flat-icon{width:28px;height:28px;color:var(--sf-on-primary);fill:var(--sf-on-primary);z-index:2}.skyfog-minimal-avatar-overlay{position:fixed;z-index:999999;box-sizing:border-box;background:var(--sf-surface);border:1px solid var(--sf-line);border-radius:24px;box-shadow:var(--sf-shadow);overflow:hidden;display:flex;flex-direction:row-reverse;transform-origin:bottom right;animation:avatar-expand-from-widget .38s cubic-bezier(.16,1,.3,1) forwards;transition:left .38s cubic-bezier(.16,1,.3,1),top .38s cubic-bezier(.16,1,.3,1),width .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1);font-family:Kanit,IBM Plex Sans Thai,Noto Sans Thai,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}.skyfog-minimal-avatar-overlay.layout-stack{flex-direction:column}.skyfog-stage{position:relative;flex:none;width:210px;height:100%;overflow:hidden;background:var(--sf-ground);transition:width .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1)}.layout-stack .skyfog-stage{width:100%;height:160px}.skyfog-floating-trigger.glide{transition:left .38s cubic-bezier(.16,1,.3,1),top .38s cubic-bezier(.16,1,.3,1)}.skyfog-minimal-avatar-overlay.dragging{cursor:grabbing!important;transition:none!important;opacity:.94}.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-vpill{position:absolute;top:10px;left:10px;z-index:15;display:flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--sf-glass);color:var(--sf-on-glass);font-size:11.5px;font-weight:600;pointer-events:auto}.skyfog-vpill i{width:8px;height:8px;border-radius:50%;flex:none}.skyfog-vpill i.dot-live{background:var(--sf-accent)}.skyfog-vpill i.dot-thinking{background:var(--sf-thinking)}.skyfog-vpill i.dot-idle{background:var(--sf-idle-dot)}.skyfog-vtoggle{position:absolute;top:44px;right:10px;z-index:16;width:28px;height:28px;border-radius:50%;background:var(--sf-glass);border:none;color:#fff;display:grid;place-items:center;cursor:pointer;pointer-events:auto;transition:background .2s,color .2s,box-shadow .2s}.skyfog-vtoggle:hover{background:#080c0bbf}.skyfog-vtoggle.is-open,.skyfog-vtoggle.is-open:hover{background:var(--sf-accent);color:var(--sf-ground);box-shadow:0 0 0 3px #46bfa147}.skyfog-vtoggle-label{position:absolute;right:36px;top:50%;transform:translateY(-50%) translate(8px);background:var(--sf-surface);border:1px solid var(--sf-line);color:var(--sf-ink);padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:var(--sf-shadow);opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .22s ease,visibility .28s}.skyfog-vtoggle:hover .skyfog-vtoggle-label{transform:translateY(-50%) translate(0);opacity:1;visibility:visible}.skyfog-x{position:absolute;top:10px;right:10px;z-index:16;width:28px;height:28px;border-radius:50%;background:var(--sf-glass);border:none;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s;pointer-events:auto}.skyfog-x:hover{background:#c4472af0}.skyfog-vscrim{position:absolute;inset:auto 0 0;height:35%;z-index:11;pointer-events:none;background:linear-gradient(to top,rgba(6,10,9,.95) 18%,rgba(6,10,9,.65) 55%,transparent)}.skyfog-vfoot{position:absolute;inset:auto 0 0;z-index:12;padding:0 12px 13px;display:flex;align-items:flex-end;gap:10px}.skyfog-vlines{flex:1;min-width:0;color:var(--sf-on-glass);text-shadow:0 1px 3px rgba(0,0,0,.75)}.skyfog-vsay{font-size:13px;font-weight:600;line-height:1.4}.skyfog-vsay.bad{color:var(--sf-error);font-size:12px}.skyfog-vwho{font-size:10px;color:#f2f5f29e;line-height:1.5;margin-top:2px}.skyfog-tcol{position:relative;flex:1 1 0px;min-width:0;min-height:0;overflow:hidden;background:var(--sf-surface)}.skyfog-tcol-inner{position:absolute;top:0;bottom:0;left:0;width:250px;display:flex;flex-direction:column;opacity:0;transform:translate(12px);pointer-events:none;transition:opacity .14s ease,transform .14s ease}.layout-stack .skyfog-tcol-inner{width:100%}.layout-side .skyfog-tcol-inner,.layout-stack .skyfog-tcol-inner{opacity:1;transform:none;pointer-events:auto;transition:opacity .26s ease-out .12s,transform .26s ease-out .12s}.skyfog-transcript{display:flex;flex-direction:column;height:100%;min-height:0;color:var(--sf-ink)}.skyfog-thead{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-bottom:1px solid var(--sf-line);flex:none}.skyfog-thead-icon{display:grid;place-items:center;color:var(--sf-primary)}.skyfog-thead-title{font-size:11.5px;font-weight:600}.skyfog-thead-hint{margin-left:auto;font-size:10px;color:var(--sf-muted)}.skyfog-tlist-wrap{position:relative;flex:1 1 auto;min-height:0}.skyfog-tlist{height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-user-select:text;user-select:text;cursor:auto;scrollbar-width:thin;scrollbar-color:var(--sf-line) transparent}.skyfog-tlist-inner{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px 14px}.skyfog-tfade{position:absolute;left:0;right:0;top:0;height:28px;background:linear-gradient(to bottom,var(--sf-surface),rgba(255,255,255,0));pointer-events:none}.skyfog-tempty{text-align:center;font-size:11.5px;color:var(--sf-muted);padding:24px 0}.skyfog-tmsg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:88%}.skyfog-tmsg.user{align-self:flex-end;align-items:flex-end}.skyfog-tlabel{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;letter-spacing:.2px;color:var(--sf-primary)}.skyfog-tmsg.user .skyfog-tlabel{color:var(--sf-muted)}.skyfog-tbubble{padding:7px 10px;border-radius:12px 12px 12px 4px;background:#eef3f1;color:var(--sf-ink);font-size:12px;line-height:1.45;overflow-wrap:anywhere;transition:color .12s ease}.skyfog-tmsg.user .skyfog-tbubble{border-radius:12px 12px 4px;background:var(--sf-primary);color:var(--sf-on-primary)}.skyfog-tmsg.partial .skyfog-tbubble{color:#3d4a45}.skyfog-tmsg.user.partial .skyfog-tbubble{color:#ffffffc7}.skyfog-tcursor{display:inline-block;width:2px;height:12px;margin-left:2px;vertical-align:-2px;background:var(--sf-accent);animation:sf-caret 1s steps(2,start) infinite}.skyfog-tbars{display:inline-flex;align-items:center;gap:2px;height:8px}.skyfog-tbars i{width:2px;border-radius:1px;background:var(--sf-accent);animation:wave-bar .8s ease-in-out infinite alternate}.skyfog-tbars i:nth-child(1){height:4px}.skyfog-tbars i:nth-child(2){height:8px;animation-delay:.15s}.skyfog-tbars i:nth-child(3){height:5px;animation-delay:.3s}.skyfog-ttyping{display:inline-flex;align-items:center;gap:4px;padding:9px 12px}.skyfog-ttyping i{width:6px;height:6px;border-radius:50%;background:var(--sf-thinking);animation:sf-dots 1.2s ease-in-out infinite}.skyfog-ttyping i:nth-child(2){animation-delay:.2s}.skyfog-ttyping i:nth-child(3){animation-delay:.4s}.skyfog-tchip{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#eef3f1;color:var(--sf-muted);font-size:10px;text-align:center}.skyfog-tchip.bad{background:#fdeee7;color:#b4482a}.skyfog-tretry{align-self:center;padding:6px 14px;border:none;border-radius:999px;background:var(--sf-primary);color:var(--sf-on-primary);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.skyfog-tnew{position:absolute;left:50%;bottom:10px;transform:translate(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:none;border-radius:999px;background:var(--sf-accent);color:var(--sf-ground);font:inherit;font-size:11px;font-weight:600;box-shadow:0 6px 18px #14201f2e;cursor:pointer;animation:mic-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes sf-caret{to{opacity:0}}@keyframes sf-dots{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}@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:24px}}@keyframes sf-breathe{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:.12}}@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)}}@media(prefers-reduced-motion:reduce){.skyfog-trigger-btn:after,.skyfog-trigger-badge .status-dot,.inner-bar,.skyfog-tcursor,.skyfog-tbars i,.skyfog-ttyping i{animation:none!important}.skyfog-minimal-avatar-overlay,.skyfog-stage,.skyfog-tcol-inner,.skyfog-floating-trigger.glide{transition:none!important}}@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%)}