:root{--bg: #101b20;--surface: #192b30;--card: #20353a;--field: #17282e;--ink: #f1f4ef;--muted: #9eafb3;--line: #cbe1db26;--accent: #b9ecd5;--button: #b9ecd5;--button-ink: #17322a;--button-edge: #7fb89f;--soft: #2b454a;--soft-ink: #e6f3ee;--bad: #ffb4a8;--bad-bg: #4a2420}:root[data-theme=light]{--bg: #f4f4ef;--surface: #e8ece2;--card: #fff;--field: #f4f4ef;--ink: #293b31;--muted: #6e7c68;--line: #d5ddcd;--accent: #6f8560;--button: #304d3b;--button-ink: #fff;--button-edge: #1f3327;--soft: #dfe7d6;--soft-ink: #293b31;--bad: #b3261e;--bad-bg: #fdeceb}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Noto Sans Thai,DM Sans,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}.ct-brand{color:var(--ink);font-family:DM Sans,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;text-decoration:none}.ct-link{padding:8px 4px;border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}.ct-button{min-height:44px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:var(--button);color:var(--button-ink);font-size:15px;font-weight:600;text-decoration:none;transition:transform .12s,filter .12s}.ct-button:hover{transform:translateY(-1px);filter:brightness(1.06)}.ct-button:active{transform:translateY(1px)}.ct-button:disabled{opacity:.55;cursor:default;transform:none}.ct-button.is-ghost{background:var(--soft);color:var(--soft-ink)}.ct-button:focus-visible,.ct-link:focus-visible,.ct-pill:focus-visible,.os a:focus-visible,.os button:focus-visible,.ph button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.ct-actions{display:flex;flex-wrap:wrap;gap:10px}.ct-error{margin:0;padding:8px 12px;border-radius:10px;background:var(--bad-bg);color:var(--bad);font-size:13px}.ct-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}.ct-tick{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--button);color:var(--button-ink);font-size:28px;font-weight:700}.ct-chrome{position:fixed;z-index:5;left:0;right:0;top:0;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.ct-chrome>*{pointer-events:auto}.ct-chrome>span{display:inline-flex;gap:8px}.ct-chrome .ct-brand{padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ct-pill{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--ink);font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ct-pill.is-round{width:38px;padding:0;font-size:17px}.ct-desk{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--bg)}.ct-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s;touch-action:none}.ct-desk.is-ready .ct-canvas{opacity:1}.ct-canvas.is-above{pointer-events:none}.ct-screen,.ct-glass{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;opacity:0}.ct-screen{transition:opacity .5s .3s}.ct-desk.is-ready .ct-screen{opacity:1}.ct-desk.is-phone .ct-screen,.ct-desk.is-playing .ct-screen{opacity:.35;transition-delay:0s}.ct-desk.is-playing .ct-screen,.ct-screen[inert]{pointer-events:none}.ct-play{position:absolute;left:50%;bottom:64px;transform:translate(-50%);display:flex;gap:8px}.ct-glass{border-radius:26px;overflow:hidden}.ct-desk:not(.is-phone) .ct-glass{pointer-events:none}.ct-toys{position:absolute;right:14px;bottom:14px;max-width:calc(100% - 28px);padding:6px 8px 6px 14px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;white-space:nowrap}.ct-toys span{font-weight:600}.ct-toys em{color:var(--accent);font-style:normal}.ct-toys button{min-height:30px;padding:0 12px;border:0;border-radius:999px;background:var(--soft);color:var(--soft-ink);font-size:12px;font-weight:600}.os{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--accent) 22%,transparent) 0,transparent 46%),var(--bg);font-size:15px;color:var(--ink)}.os:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}.os-bar{position:relative;height:30px;padding:0 14px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);font-family:DM Sans,Noto Sans Thai,sans-serif;font-size:13px;font-weight:600}.os-bar b{display:inline-flex;align-items:center;gap:7px;font-weight:700}.os-bar i{color:var(--accent);font-style:normal}.os-bar span{color:var(--muted)}.os-bar-end{margin-left:auto;font-variant-numeric:tabular-nums}.os-icons{position:absolute;left:10px;top:44px;display:grid;gap:8px}.os-icons a,.os-icons button{width:84px;padding:5px 2px;display:grid;justify-items:center;gap:5px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:12px;font-weight:500;text-align:center;text-decoration:none}.os-icons i{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--accent);font-size:22px;font-style:normal;transition:transform .12s}.os-icons a:hover i,.os-icons button:hover i{transform:translateY(-3px) rotate(-4deg)}.os-window{position:absolute;left:106px;right:16px;top:42px;bottom:14px;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 18px 40px #0000002e;overflow:hidden}.os-window>header{padding:8px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--surface);font-size:13px}.os-dots{display:inline-flex;gap:6px}.os-dots i{width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:.9}.os-dots i:nth-child(2){opacity:.55}.os-dots i:nth-child(3){opacity:.28}.os-form{min-height:0;padding:12px 16px 14px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:9px}.os-pair{display:grid;grid-template-columns:1fr 1.25fr;gap:12px}.os-form label,.ct-form label{display:grid;gap:5px;font-size:13px;font-weight:500;color:var(--muted)}.os-form label small,.ct-form label small{font-weight:400;opacity:.8}.os-form label.os-grow{grid-template-rows:auto minmax(0,1fr);min-height:0}.os-form input,.os-form textarea,.ct-form input,.ct-form textarea{width:100%;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--field);color:var(--ink);font-size:16px;font-weight:400;line-height:1.5}.os-form input,.os-form textarea{padding:6px 10px}.os-form textarea{resize:none}.os-form input::-moz-placeholder,.os-form textarea::-moz-placeholder,.ct-form input::-moz-placeholder,.ph-bar textarea::-moz-placeholder{color:var(--muted);opacity:.7}.os-form input::placeholder,.os-form textarea::placeholder,.ct-form input::placeholder,.ph-bar textarea::placeholder{color:var(--muted);opacity:.7}.os-form input:focus,.os-form textarea:focus,.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:var(--accent)}.os-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}.os-foot p{flex:1}.os-hint{margin:0;color:var(--muted);font-size:13px}.os-sent{padding:20px;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center}.os-sent h2,.ct-sent h2{margin:4px 0 0;font-size:24px}.os-sent p,.ct-sent p{margin:0 0 8px;color:var(--muted)}.ph{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:var(--bg);color:var(--ink);font-size:16px}.ph-head{padding:34px 14px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:var(--surface)}.ph-head div{flex:1;display:grid;line-height:1.25}.ph-head small{color:var(--muted);font-size:12px}.ph-head button{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--soft);color:var(--soft-ink);font-size:13px;font-weight:600}.ph-face{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--button);color:var(--button-ink)}.ph-list{margin:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;list-style:none}.ph-list li{max-width:84%;padding:9px 13px;align-self:flex-start;border-radius:18px 18px 18px 5px;background:var(--card);line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap;animation:ph-in .22s ease-out}.ph-list li.is-me{align-self:flex-end;border-radius:18px 18px 5px;background:var(--button);color:var(--button-ink)}.ph-list li.is-bad{background:var(--bad-bg);color:var(--bad)}.ph-typing{display:inline-flex;gap:5px;padding:14px 13px!important}.ph-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ph-dot 1s infinite}.ph-typing i:nth-child(2){animation-delay:.15s}.ph-typing i:nth-child(3){animation-delay:.3s}.ph-bar{padding:10px 10px 12px;display:flex;align-items:flex-end;gap:8px;border-top:1px solid var(--line);background:var(--surface)}.ph-bar textarea{flex:1;min-width:0;max-height:120px;padding:10px 14px;border:1px solid var(--line);border-radius:20px;background:var(--field);line-height:1.4;resize:none}.ph-bar textarea:focus{outline:none;border-color:var(--accent)}.ph-bar button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--button);color:var(--button-ink);font-size:18px}.ph-bar button:disabled{opacity:.4;cursor:default}.ph-end{padding:12px;display:grid;gap:8px;border-top:1px solid var(--line);background:var(--surface)}.ph-simple{padding:0 0 22px;border:0;background:var(--surface);color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}@keyframes ph-in{0%{opacity:0;transform:translateY(6px)}}@keyframes ph-dot{0%,60%,to{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}.ct-simple{max-width:560px;margin:0 auto;padding:84px 16px 40px;display:grid;gap:16px}.ct-simple h1{margin:0;font-size:28px;font-weight:600}.ct-simple header p{margin:6px 0 0;color:var(--muted);font-size:14px}.ct-card{padding:18px;display:grid;gap:14px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.ct-form textarea{resize:vertical}.ct-sent{justify-items:center;padding:30px 18px;text-align:center}.ct-simple>.ct-link{justify-self:center}@media (max-width: 560px){.ct-toys{left:10px;right:10px;bottom:10px;flex-wrap:wrap;justify-content:center;gap:4px 12px;border-radius:18px;white-space:normal;text-align:center}.ct-actions>*{flex:1}.ct-chrome{padding:10px 12px}.ct-pill{padding:0 11px;font-size:12px}.ct-chrome .ct-brand{font-size:16px;padding:6px 10px}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}