:root{color-scheme:light dark}html,body{height:100%}body{overscroll-behavior:none}.app{--canvas: var(--bg);--soft: var(--bg-alt);--text: var(--ink);--text-2: var(--ink-2);--line: var(--hair);--bubble: var(--bubble-them);display:flex;flex-direction:column;height:100dvh;max-width:760px;margin:0 auto;background:var(--canvas);color:var(--text);padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}@media(prefers-color-scheme:dark){html,body{background:var(--bg-dark-2)}.app{--canvas: var(--bg-dark-2);--soft: #1f1e25;--text: var(--ink-dark);--text-2: var(--ink-dark-2);--line: var(--hair-dark);--bubble: #2a2932}.logo{filter:invert(1)}}.top{display:flex;align-items:center;gap:8px;height:52px;padding:0 var(--gutter);flex:none}.name{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.02em}.status{margin-left:auto;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}.status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-2)}.status[data-on="1"]:before{background:var(--ok)}.scroll{flex:1;overflow-y:auto;padding:0 var(--gutter) 16px;-webkit-overflow-scrolling:touch}.stage{display:flex;flex-direction:column;align-items:center;padding:8px 0 4px}.orb{width:132px;height:132px;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 70%);mask-image:radial-gradient(circle,#000 52%,transparent 70%)}.hint{margin:6px 0 0;font-size:15px;color:var(--text-2);text-align:center;min-height:22px}.chat{display:flex;flex-direction:column;gap:14px;padding-top:12px}.msg{max-width:85%;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.msg.me{align-self:flex-end;background:var(--bubble);border-radius:20px;padding:10px 15px}.msg.them{align-self:flex-start}.msg.note{align-self:center;font-size:13px;color:var(--text-2);text-align:center}.dots{display:inline-flex;gap:4px;padding:6px 0}.dots i{width:7px;height:7px;border-radius:50%;background:var(--text-2);animation:dot 1.2s infinite var(--ease-out)}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,80%,to{opacity:.25}40%{opacity:1}}.composer{flex:none;display:flex;align-items:center;gap:6px;margin:8px var(--gutter);margin-bottom:max(12px,env(safe-area-inset-bottom));padding:6px 6px 6px 16px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-tile)}.composer input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;height:40px;outline:none}.composer button{flex:none;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}.mic{background:transparent;color:var(--text-2)}.mic[data-on="1"]{background:var(--err);color:#fff}.send{background:var(--blue);color:#fff}.send:disabled{opacity:.35;cursor:default}.composer button:focus-visible,.composer:focus-within{outline:2px solid color-mix(in srgb,var(--blue) 60%,transparent);outline-offset:2px}.composer:focus-within button:focus-visible{outline-offset:1px}.pair{flex:none;padding:8px var(--gutter) 28px}.pair h1{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;margin:0 0 10px}.pair ol{list-style:decimal;margin:0 0 18px;padding-left:20px;color:var(--text-2);font-size:16px}.pair li{margin:6px 0}.btn{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:var(--r-pill);background:var(--blue);color:#fff;text-decoration:none;font-weight:500}.btn:hover{background:var(--blue-hover)}.app[data-paired="0"] .composer,.app[data-paired="0"] .chat{display:none}.app[data-paired="0"] .scroll{flex:none}
