:root{--accent: #ff6f0f;--bg: #f5f6f8;--surface: #ffffff;--ink: #1a1a1c;--muted: #8a8f98;--line: #e7e9ee;--radius: 16px;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}.app{max-width:1020px;margin:0 auto;padding:22px 20px 44px;display:flex;flex-direction:column;gap:16px;min-height:100%}.app__hero{text-align:center;padding:40px 24px 30px;background:radial-gradient(130% 130% at 50% -10%,#fff3e8,#fff 58%);border:1px solid var(--line);border-radius:24px}.app__eyebrow{display:inline-block;font-size:.78rem;font-weight:700;color:var(--accent);background:#fff3ea;padding:5px 13px;border-radius:999px;margin-bottom:16px}.app__title{font-size:clamp(2.3rem,6.5vw,3.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 0 16px}.app__dot{color:var(--accent)}.app__tagline{font-weight:500;margin:0 auto 22px;font-size:1.05rem;max-width:620px;color:#44474d;line-height:1.55}.app__tagline b{color:var(--ink);font-weight:700}.app__tagline code{background:#fff3ea;color:var(--accent);font-weight:700;padding:1px 7px;border-radius:6px;font-size:.92em}.app__cta{display:flex;gap:10px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}.btn--lg{padding:13px 24px;font-size:.96rem;text-decoration:none;display:inline-flex;align-items:center}.app__preview{max-width:560px;margin:0 auto 22px;text-align:left;background:#1e2230;border-radius:14px;overflow:hidden;box-shadow:0 12px 44px #10182824}.app__preview-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)}.app__preview-bar span{width:11px;height:11px;border-radius:50%;background:#3a4256}.app__preview-bar span:nth-child(1){background:#ff5f57}.app__preview-bar span:nth-child(2){background:#febc2e}.app__preview-bar span:nth-child(3){background:#28c840}.app__preview pre{margin:0;padding:16px 18px;overflow-x:auto}.app__preview code{color:#e6e8ec;font-size:.78rem;line-height:1.7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:none}.app__hint{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:560px;margin:0 auto}.archstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.arch{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.76rem;display:flex;flex-direction:column;gap:3px;line-height:1.45}.arch b{font-size:.84rem}.arch b:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}.arch span{color:var(--muted)}.arch code{background:#fff3ea;color:var(--accent);font-weight:700;padding:0 4px;border-radius:4px;font-size:.92em}.controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:10px;position:relative}.controls__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.controls__row--actions{gap:6px}.controls__label{font-size:.8rem;font-weight:700;color:var(--muted)}.controls__code{background:#fff3ea;color:var(--accent);font-weight:700;padding:3px 8px;border-radius:8px;font-size:.82rem}.btn{appearance:none;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:.88rem;padding:10px 18px;border-radius:999px;cursor:pointer;box-shadow:0 2px 10px #ff6f0f47;transition:transform .12s,box-shadow .12s,filter .12s}.btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 4px 16px #ff6f0f5c}.btn:active{transform:translateY(0)}.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn--ghost:hover{background:#fafbfc;box-shadow:0 2px 8px #1018280f}.btn--soft{background:#fff3ea;color:var(--accent);box-shadow:none;font-size:.84rem;padding:8px 14px}.btn--soft:hover{background:#ffe7d4;filter:none;box-shadow:0 2px 8px #ff6f0f2e}.controls__label--sub{width:100%;margin-bottom:-2px}.toast{position:absolute;top:-10px;right:14px;transform:translateY(-100%);background:var(--ink);color:#fff;font-size:.8rem;padding:8px 12px;border-radius:8px;box-shadow:0 4px 16px #0000002e;white-space:nowrap}.tabs{display:none;gap:6px}.tab{flex:1;appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.92rem;font-weight:700;cursor:pointer}.tab--active{background:var(--accent);color:#fff;border-color:var(--accent)}.app__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pane{display:block}.named{display:flex;flex-direction:column;gap:6px}.named__input{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:.84rem;font-weight:700;color:var(--ink);outline:none}.named__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 20px #1018280f;display:flex;flex-direction:column;height:440px;overflow:hidden}.panel__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}.panel__who{font-weight:700}.panel__who:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}.panel__meta{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}.status{display:inline-flex;align-items:center;gap:5px}.status__dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.status--open .status__dot{background:#1fb46b}.status--reconnecting .status__dot,.status--connecting .status__dot{background:#f0a020;animation:pulse 1s ease-in-out infinite}.status--closed .status__dot{background:#e5484d}@keyframes pulse{50%{opacity:.3}}.messages{flex:1;overflow-y:auto;padding:14px;background:linear-gradient(#fafbfc,#fff)}.messages__virtual{position:relative;width:100%}.messages__loading{text-align:center;font-size:.72rem;color:var(--muted);padding:4px 0 8px}.msg-row{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:8px}.msg-row--mine{align-items:flex-end}.msg{display:flex;flex-direction:column;max-width:78%}.msg--mine{align-items:flex-end}.msg--theirs{align-items:flex-start}.msg__name{font-size:.72rem;color:var(--muted);margin:0 0 2px 4px}.msg__bubble{padding:8px 12px;border-radius:14px;line-height:1.4;word-break:break-word;font-size:.92rem}.msg--theirs .msg__bubble{background:#eef0f3;border-bottom-left-radius:4px}.msg--mine .msg__bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}.msg__meta{display:inline-flex;gap:6px;align-items:center;font-size:.68rem;color:var(--muted);margin-top:3px}.msg__read{color:var(--accent);font-weight:700}.msg--sending .msg__bubble{opacity:.55}.msg--failed .msg__bubble{border:1px solid #e5484d}.msg__retry{border:none;background:none;color:#e5484d;font:inherit;font-weight:700;cursor:pointer;padding:0}.msg__retry:hover{text-decoration:underline}.msg__policy{background:#fff3ea;color:var(--accent);font-weight:700;padding:1px 6px;border-radius:999px;font-size:.62rem;letter-spacing:.02em}.msg-row--system{align-items:center}.msg-system{align-self:center;background:#f1f3f5;color:var(--muted);font-size:.74rem;font-weight:600;padding:5px 12px;border-radius:999px;max-width:88%;text-align:center}.msg__media{display:block;max-width:220px;border-radius:14px;overflow:hidden;line-height:0}.msg__media img{width:100%;height:auto;display:block}.msg__file{display:flex;align-items:center;gap:10px;background:#eef0f3;border-radius:14px;padding:10px 12px;text-decoration:none;color:var(--ink);max-width:240px}.msg--mine .msg__file{background:#fff3ea}.msg__file-icon{font-size:1.2rem}.msg__file-meta{display:flex;flex-direction:column;min-width:0}.msg__file-name{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg__file-size{font-size:.7rem;color:var(--muted)}.msg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;max-width:260px;box-shadow:0 2px 10px #1018280d}.msg-card__title{font-size:.92rem;font-weight:800;color:var(--ink)}.msg-card__body{font-size:.84rem;color:var(--muted);line-height:1.45;margin-top:4px}.msg-card__actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.msg-card__btn{flex:1;min-width:72px;appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;padding:7px 10px;border-radius:10px;cursor:pointer;transition:filter .12s,background .12s}.msg-card__btn:hover{background:#fafbfc}.msg-card__btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}.msg-card__btn--primary:hover{filter:brightness(1.05);background:var(--accent)}.typing{min-height:18px;padding:0 16px;font-size:.76rem;color:var(--muted)}.notice{margin:0 12px 6px;padding:6px 10px;border:1px solid #fcd9b6;background:#fff7ed;color:#b45309;border-radius:8px;font-size:.78rem}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.composer__attach{flex:0 0 auto;width:40px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:1.05rem;line-height:1;cursor:pointer;transition:background .12s,border-color .12s}.composer__attach:hover:not(:disabled){background:#fff3ea;border-color:var(--accent)}.composer__attach:disabled{opacity:.5;cursor:not-allowed}.composer__input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:.92rem;outline:none}.composer__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.composer__input:disabled{background:#f3f4f6;cursor:not-allowed;color:var(--muted)}.composer__send{border:none;background:var(--accent);color:#fff;font-weight:700;padding:0 18px;border-radius:999px;cursor:pointer}.composer__send:disabled{opacity:.4;cursor:not-allowed}.app__foot{text-align:center;color:var(--muted);font-size:.82rem}.app__foot a{color:var(--muted)}@media(max-width:720px){.archstrip{grid-template-columns:repeat(2,1fr)}.app__grid{grid-template-columns:1fr}.tabs{display:flex}.pane{display:none}.pane--active{display:block}.panel{height:380px}}