@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:IBM Plex Sans Thai;src:url(/fonts/IBMPlexSansThai-Bold.woff2) format("woff2");font-weight:700;font-display:swap}:root{font-family:IBM Plex Sans Thai,Leelawadee UI,sans-serif;color:#35234e;background:#a78bd3;font-synthesis:none}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden}button{font:inherit}button:focus-visible{outline:3px solid #fff;outline-offset:4px}.app{--voice-level: 0;--voice-glow: 12px;--voice-ring-scale: 1.025;width:100%;height:100vh;min-height:700px;overflow:hidden;display:grid;grid-template-rows:84px minmax(0,1fr) 116px;gap:10px;padding:30px 44px 34px;isolation:isolate;background:#a78bd3 url(/assets/background/khammok-aurora-center.png) center center / cover no-repeat fixed}.app:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 63%,rgba(255,249,221,.12),transparent 34%)}.glass{border:1px solid rgba(255,255,255,.65);background:linear-gradient(145deg,#ffffff61,#ffffff29);box-shadow:inset 0 1px #ffffffc7,0 22px 60px #42266929;backdrop-filter:blur(26px) saturate(155%);-webkit-backdrop-filter:blur(26px) saturate(155%)}.topbar{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:15px}.flower-mark{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.75);border-radius:50%;color:#f0bd36;background:#ffffff8c;box-shadow:inset 0 1px #fff,0 12px 28px #4829701f;font-size:30px}.brand h1{margin:0;color:#fff;font-size:32px;line-height:1.08;font-weight:600;letter-spacing:-.025em;text-shadow:0 2px 16px rgba(69,37,108,.2)}.brand p{margin:6px 0 0;color:#ffffffd1;font-size:13px;font-weight:500}.connection-pill{display:flex;align-items:center;gap:9px;max-width:300px;padding:10px 16px;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;background:#593d8233;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:13px}.connection-pill i,.state-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#f2c86f;box-shadow:0 0 0 5px #f2c86f24}.connection-pill.is-live i,.state-ready .state-dot,.state-listening .state-dot{background:#65dc8c;box-shadow:0 0 0 5px #65dc8c24,0 0 14px #43db7799}.stage{position:relative;min-height:0;display:grid;place-items:center}.aurora-ring{position:absolute;width:min(47vw,600px);aspect-ratio:1;border:1px solid rgba(255,249,222,.24);border-radius:50%;box-shadow:0 0 0 25px #ffffff06,inset 0 0 65px #fff4ce14}.character{position:absolute;z-index:2;top:49%;left:50%;height:min(88%,620px);max-width:min(62vw,680px);translate:-50% -50%;object-fit:contain;transform-origin:center bottom;filter:drop-shadow(0 28px 26px rgba(73,42,109,.22));-webkit-user-select:none;user-select:none}.character-video{width:min(84vw,1100px);max-width:none;aspect-ratio:16 / 9;object-fit:contain;pointer-events:none}.character-canvas-wrap{width:min(84vw,1100px);max-width:none;aspect-ratio:16 / 9;pointer-events:none}.character-canvas{display:block;width:100%;height:100%;object-fit:contain}.character-canvas-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.state-card{position:absolute;z-index:5;top:1%;left:50%;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;color:#fff;background:#5237784d;box-shadow:inset 0 1px #ffffffa6,0 12px 30px #3e226226;font-size:14px;text-shadow:0 1px 8px rgba(55,31,87,.28)}.waveform{position:absolute;z-index:4;left:50%;bottom:1%;translate:-50% 0;width:min(40vw,450px);height:48px;display:flex;align-items:center;justify-content:space-between;gap:5px;filter:drop-shadow(0 0 12px rgba(255,255,255,.55))}.waveform i{display:block;width:3px;height:42px;flex:0 0 3px;border-radius:999px;transform-origin:center;background:linear-gradient(180deg,#fff5b7,#fff 55%,#e4c9ff);box-shadow:0 0 8px #fff9}.voice-dock{position:relative;z-index:10;display:grid;grid-template-columns:1fr 220px 1fr;align-items:center;min-height:112px;padding:10px 22px;border-radius:32px}.dock-copy{display:flex;flex-direction:column;gap:4px;color:#fffffff2}.dock-copy strong{font-size:15px;font-weight:600}.dock-copy span{font-size:11px;opacity:.72}.mic-control{position:relative;height:110px;display:grid;place-items:center;align-content:center;gap:5px}.mic-control>strong{color:#fff;font-size:12px;font-weight:500;text-shadow:0 2px 10px rgba(63,32,102,.3)}.mic-button{position:relative;width:82px;height:82px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.94);border-radius:50%;color:#8058bc;background:radial-gradient(circle at 38% 28%,#fff,#ffffffe6 50%,#e0c9f7e0);box-shadow:inset 0 1px 2px #fff,inset 0 -12px 25px #8559be21,0 0 0 8px #ffffff24,0 0 34px #ffffffad,0 14px 34px #502b7f33;cursor:pointer}.mic-button:disabled{cursor:wait;opacity:.7}.mic-button svg{position:relative;z-index:2;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.mic-button.active{color:#fff;background:radial-gradient(circle at 38% 28%,#e9d9ff,#9a6fd0 55%,#64408f)}.mic-pulse{position:absolute;inset:-12px;border:1px solid rgba(255,255,255,.55);border-radius:50%;opacity:0}.mic-button.active .mic-pulse{animation:mic-pulse 1.6s ease-out infinite}.dock-actions{display:flex;justify-content:flex-end;gap:10px}.dock-actions button{min-height:44px;padding:9px 16px;border:1px solid rgba(255,255,255,.48);border-radius:999px;color:#684691;background:#ffffff47;cursor:pointer}.dock-actions button:disabled{cursor:default;opacity:.42}.state-listening .character{filter:drop-shadow(0 28px 28px rgba(99,54,139,.25)) drop-shadow(0 0 25px rgba(255,245,197,.25))}.state-speaking .character{filter:drop-shadow(0 30px 30px rgba(91,45,137,.3)) drop-shadow(0 0 34px rgba(255,255,255,.3))}.state-listening .aurora-ring{animation:ring-listen 2.6s ease-in-out infinite}.state-thinking .aurora-ring{animation:ring-think 1.8s ease-in-out infinite}.state-speaking .aurora-ring{animation:ring-speak 1.15s ease-in-out infinite}.state-thinking .state-dot{background:#f4ca70;box-shadow:0 0 0 5px #f4ca7024,0 0 16px #ffdc73ad}.state-speaking .state-dot{background:#d9b5ff;box-shadow:0 0 0 5px #d9b5ff24,0 0 16px #debfffb8}.state-speaking .waveform{filter:drop-shadow(0 0 var(--voice-glow) rgba(255,255,255,.7))}@keyframes mic-pulse{0%{opacity:.72;transform:scale(.88)}to{opacity:0;transform:scale(1.42)}}@keyframes ring-listen{50%{transform:scale(1.018);border-color:#daffe16b}}@keyframes ring-think{50%{transform:scale(1.045) rotate(2deg);border-color:#fff0ad99;box-shadow:0 0 0 34px #ffffff06,inset 0 0 85px #ffefae24}}@keyframes ring-speak{50%{transform:scale(var(--voice-ring-scale));border-color:#ebd3ff94;box-shadow:0 0 0 28px #ffffff09,inset 0 0 80px #e7cbff26}}@media(max-width:900px){.app{padding:20px 24px 26px;grid-template-rows:72px minmax(0,1fr) 108px}.brand h1{font-size:27px}.brand p{font-size:11px}.flower-mark{width:47px;height:47px}.voice-dock{grid-template-columns:1fr 180px 1fr}.dock-copy span{display:none}}@media(max-width:680px){body{overflow:auto}.app{min-height:100svh;height:100svh;grid-template-rows:62px minmax(0,1fr) 156px;gap:6px;padding:10px 12px 12px}.brand p,.connection-pill span{display:none}.connection-pill{padding:10px}.character,.character-canvas-wrap{height:min(74%,420px);max-width:94vw;top:46%}.aurora-ring{width:min(85vw,450px)}.state-card{top:2%}.waveform{width:min(78vw,380px);bottom:2%}.voice-dock{grid-template-columns:112px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:4px 8px;padding:9px 12px}.mic-control{grid-column:1;grid-row:1 / 3;height:136px}.mic-button{width:72px;height:72px}.mic-button svg{width:31px;height:31px}.dock-copy{grid-column:2;grid-row:1;align-self:end;text-align:left}.dock-copy strong{font-size:13px;line-height:1.35}.dock-actions{grid-column:2;grid-row:2;align-self:start;justify-content:flex-start;gap:6px}.dock-actions button{min-height:38px;padding:7px 10px;font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}