:root{--bg: oklch(.11 .006 256);--bg-2: oklch(.14 .007 256);--fg: oklch(.97 .004 256);--dim: color-mix(in oklch, var(--fg) 52%, transparent);--dimmer: color-mix(in oklch, var(--fg) 32%, transparent);--line: color-mix(in oklch, var(--fg) 13%, transparent);--line-strong: color-mix(in oklch, var(--fg) 26%, transparent);--panel: color-mix(in oklch, var(--fg) 3%, transparent);--panel-2: color-mix(in oklch, var(--fg) 6%, transparent);--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sans: "Space Grotesk", system-ui, -apple-system, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--dur: .18s;--radius: 2px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}::selection{background:var(--fg);color:var(--bg)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--bg);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--fg) 40%,transparent)}:focus-visible{outline:2px solid var(--fg);outline-offset:2px}button{font-family:inherit}.app{position:relative;min-height:100dvh;max-width:920px;margin:0 auto;padding:0 20px 26px;display:flex;flex-direction:column}.grid-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:46px 46px;opacity:.4;-webkit-mask-image:radial-gradient(circle at 50% 22%,#000 0%,transparent 78%);mask-image:radial-gradient(circle at 50% 22%,#000 0%,transparent 78%);pointer-events:none}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,transparent 55%,oklch(.06 .01 256 / .9) 100%)}.app>*{position:relative;z-index:1}.header{display:flex;align-items:center;justify-content:space-between;padding:22px 0 18px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.mark{font-size:20px;line-height:1;letter-spacing:-2px}.title{font-family:var(--mono);font-weight:700;letter-spacing:7px;font-size:18px}.status{display:flex;align-items:center;gap:9px}.status-label{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim)}.dot{width:8px;height:8px;border-radius:50%;background:var(--fg)}.dot.on{animation:pulse 2.4s var(--ease) infinite}.dot.off{background:var(--dimmer)}@keyframes pulse{0%{box-shadow:0 0 color-mix(in oklch,var(--fg) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.h1{font-family:var(--sans);font-weight:500;letter-spacing:-.5px;font-size:24px;margin:6px 0 12px}.h2{font-family:var(--mono);font-weight:500;letter-spacing:3px;font-size:11px;color:var(--dim);margin:0}.dim{color:var(--dim)}.lead{font-size:14px;line-height:1.55;max-width:60ch;margin:0 0 26px}.label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim)}.pairing{display:flex;align-items:center;justify-content:center;flex:1;padding:36px 0}.panel{width:100%;max-width:470px;border:1px solid var(--line);background:var(--panel);padding:32px;box-shadow:0 30px 90px #0009}.panel-kicker{font-family:var(--mono);font-size:10px;letter-spacing:4px;color:var(--dim)}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.input{background:var(--bg);border:1px solid var(--line-strong);color:var(--fg);font-family:var(--mono);font-size:15px;padding:13px 14px;outline:none;border-radius:var(--radius);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.input::placeholder{color:var(--dimmer)}.input:focus{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg),0 0 26px color-mix(in oklch,var(--fg) 10%,transparent)}.input.code{letter-spacing:4px;text-transform:uppercase}.code-row{display:flex;gap:10px}.code-row .input{flex:1}.hint{font-size:12px}.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);margin-bottom:20px;border-radius:var(--radius);overflow:hidden}.seg-btn{background:transparent;border:none;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;padding:12px 8px;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}.seg-btn+.seg-btn{border-left:1px solid var(--line-strong)}.seg-btn.active{background:var(--fg);color:var(--bg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:1.5px;padding:11px 16px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);cursor:pointer;border-radius:var(--radius);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);white-space:nowrap}.btn:hover{border-color:var(--fg)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.32;cursor:not-allowed}.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn.primary:hover{box-shadow:0 0 26px color-mix(in oklch,var(--fg) 24%,transparent)}.btn.ghost:hover{background:var(--panel-2)}.btn.danger:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn.block{width:100%;padding:14px}.btn.sm{padding:8px 11px;font-size:11px}.dash{padding-top:24px;display:flex;flex-direction:column;gap:26px}.spacebar{display:flex;gap:14px;flex-wrap:wrap}.sb-item{flex:1;min-width:160px;border:1px solid var(--line);background:var(--panel);padding:15px 17px;display:flex;flex-direction:column;gap:7px}.sb-item .value{font-family:var(--mono);font-size:15px;letter-spacing:1px}.code-chip{position:relative;display:inline-flex;align-items:center;gap:10px;background:transparent;border:none;color:var(--fg);cursor:pointer;padding:0}.code-chip .code-text{letter-spacing:4px;white-space:nowrap}.code-chip:hover{color:var(--fg)}.code-chip .copied-flag{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--dim);opacity:0;transform:translate(-4px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.code-chip .copied-flag[data-on=true]{opacity:1;transform:translate(0)}.sb-item.wide{flex-basis:100%}.name-chip{display:inline-flex;align-items:center;gap:12px;background:transparent;border:none;color:var(--fg);cursor:pointer;padding:0;font-family:var(--mono);font-size:15px;letter-spacing:1px}.name-chip .rename-hint{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--dim);opacity:0;transition:opacity var(--dur) var(--ease)}.name-chip:hover .rename-hint{opacity:1}.rename-row{display:flex;align-items:center;gap:8px}.rename-input{font-size:14px;padding:8px 11px;max-width:260px}.block{border-top:1px solid var(--line);padding-top:22px}.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.block-actions{display:flex;align-items:center;gap:8px}.confirm-inline{display:inline-flex;align-items:center;gap:8px}.chip-btn{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;padding:7px 11px;border:1px solid var(--line-strong);background:transparent;color:var(--dim);cursor:pointer;border-radius:var(--radius);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}.chip-btn:hover{color:var(--fg);border-color:var(--fg)}.chip-btn.danger:hover{background:var(--fg);color:var(--bg)}.empty{border:1px dashed var(--line-strong);padding:40px 22px;text-align:center;color:var(--dim);border-radius:var(--radius)}.empty-ic{display:inline-flex;padding:12px;border:1px solid var(--line-strong);border-radius:50%;margin-bottom:14px}.empty-title{font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--fg);margin:0 0 8px}.empty p:not(.empty-title){margin:0 auto;font-size:13px;max-width:42ch;line-height:1.5}.empty strong{font-family:var(--mono);letter-spacing:3px;color:var(--fg)}.dev-list{display:flex;flex-direction:column;gap:10px}.dev-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line-strong);color:var(--fg);padding:16px 18px;cursor:pointer;border-radius:var(--radius);font-family:var(--mono);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease)}.dev-row:hover{border-color:var(--fg);background:var(--panel-2);transform:translateY(-1px)}.dev-ic{display:inline-flex;color:var(--dim)}.dev-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.dev-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.dev-name{font-size:14px;letter-spacing:1px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dev-time{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--dim);flex-shrink:0}.dev-preview{font-family:var(--sans);font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dev-go{color:var(--dim);display:inline-flex}.badge{font-family:var(--mono);font-size:11px;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--fg);color:var(--bg);border-radius:999px}.conv{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--line);background:var(--panel);margin-top:18px;border-radius:var(--radius);overflow:hidden}.conv-head{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--bg-2)}.conv-peer{display:flex;flex-direction:column;gap:3px}.conv-name{font-family:var(--mono);font-size:15px;letter-spacing:1px}.conv-sub{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dim)}.conv-banner{flex-shrink:0;padding:9px 16px;font-size:12px;color:var(--dim);background:var(--panel-2);border-bottom:1px solid var(--line);text-align:center}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);cursor:pointer;flex-shrink:0;border-radius:var(--radius);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease)}.icon-btn:hover{border-color:var(--fg)}.icon-btn:active{transform:scale(.94)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn.send{background:var(--fg);color:var(--bg);border-color:var(--fg)}.timeline{flex:1;min-height:0;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}.conv-empty{margin:auto;text-align:center;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:12px}.conv-empty .empty-ic{margin:0;color:var(--dim)}.conv-empty p{font-size:13px}.day-sep{display:flex;align-items:center;justify-content:center;margin:10px 0 6px}.day-sep span{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim);border:1px solid var(--line);padding:4px 12px;border-radius:999px;text-transform:uppercase}.bubble-row{display:flex;animation:rise var(--dur) var(--ease)}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.bubble-row.mine{justify-content:flex-end}.bubble-row.theirs{justify-content:flex-start}.bubble{position:relative;max-width:78%;border:1px solid var(--line-strong);padding:9px 12px;font-size:14px;line-height:1.45;word-break:break-word;border-radius:3px}.bubble-row.mine .bubble{background:var(--fg);color:var(--bg);border-color:var(--fg);border-bottom-right-radius:0}.bubble-row.theirs .bubble{background:transparent;border-bottom-left-radius:0}.bubble.deleted{display:inline-flex;align-items:center;gap:7px;font-style:italic;opacity:.55;font-size:13px;color:var(--fg);background:transparent;border-style:dashed}.bubble-text{white-space:pre-wrap}.bubble-foot{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:4px;font-family:var(--mono)}.bubble-time{font-size:10px;letter-spacing:.5px;opacity:.6}.b-state{font-size:10px;letter-spacing:.5px;opacity:.75}.b-sent{display:inline-flex;opacity:.5}.b-read{display:inline-flex;opacity:1}.bmenu{position:absolute;top:4px;right:4px}.bubble.file .bmenu{position:static}.bmenu-dots{display:inline-flex;flex-direction:column;gap:2px;background:transparent;border:none;cursor:pointer;padding:4px;color:inherit;opacity:0;transition:opacity var(--dur) var(--ease)}.bubble:hover .bmenu-dots,.bubble.file .bmenu-dots,.bmenu-dots:focus-visible{opacity:.55}.bmenu-dots:hover{opacity:1}.bmenu-dots span{width:3px;height:3px;border-radius:50%;background:currentColor}.bmenu-pop{position:absolute;top:100%;right:0;z-index:5;margin-top:4px;background:var(--bg);border:1px solid var(--line-strong);display:flex;flex-direction:column;min-width:196px;border-radius:var(--radius);box-shadow:0 18px 44px #000000b3;animation:rise calc(var(--dur) * .8) var(--ease)}.bmenu-pop button{display:flex;align-items:center;gap:9px;background:transparent;border:none;color:var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:11px 13px;text-align:left;cursor:pointer}.bmenu-pop button:hover,.bmenu-pop button.danger{background:var(--fg);color:var(--bg)}.bubble.file{min-width:236px;display:flex;flex-direction:column;gap:10px}.file-head{display:flex;align-items:center;gap:10px}.file-preview{display:block;max-width:100%;max-height:260px;border-radius:3px;object-fit:cover}.file-ic{display:inline-flex;flex-shrink:0;opacity:.75}.file-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.file-name{font-family:var(--mono);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:11px;opacity:.6}.file-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.file-state{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:1px;opacity:.85}.file-actions{display:flex;gap:8px}.link-btn{background:transparent;border:none;color:inherit;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;opacity:.8}.link-btn:hover{opacity:1}.bar{height:4px;background:color-mix(in oklch,var(--fg) 14%,transparent);overflow:hidden;border-radius:999px}.bubble-row.mine .bubble.file .bar{background:color-mix(in oklch,var(--bg) 22%,transparent)}.bar-fill{height:100%;background:var(--fg);border-radius:999px;transition:width .14s linear}.bubble-row.mine .bubble.file .bar-fill{background:var(--bg)}.composer{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;border-top:1px solid var(--line);flex-shrink:0;background:var(--bg-2)}.composer-input{flex:1;background:var(--bg);border:1px solid var(--line-strong);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.4;padding:11px 14px;outline:none;resize:none;max-height:120px;border-radius:var(--radius);transition:border-color var(--dur) var(--ease)}.composer-input::placeholder{color:var(--dimmer)}.composer-input:focus{border-color:var(--fg)}.drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:none;align-items:center;justify-content:center;background:color-mix(in oklch,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.conv.drag .drop-overlay{display:flex}.drop-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 40px;border:1px dashed var(--fg);border-radius:var(--radius);font-family:var(--mono);font-size:12px;letter-spacing:1px}.foot{margin-top:auto;padding-top:26px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dimmer)}.foot .dim{letter-spacing:.5px;text-transform:none}@media (max-width: 560px){.app{padding:0 12px}.header{padding:calc(16px + env(safe-area-inset-top)) 0 14px}.title{letter-spacing:4px;font-size:16px}.input,.composer-input,.rename-input{font-size:16px}.pairing{padding:16px 0}.panel{padding:22px 20px}.h1{font-size:21px}.dash{padding-top:18px;gap:20px;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.spacebar{flex-direction:column}.block-head{flex-wrap:wrap;gap:10px}.dev-row{padding:16px}.foot,.header.is-compact{display:none}.conv{margin:0 -12px;border-left:none;border-right:none;border-radius:0}.conv-head{padding-top:calc(13px + env(safe-area-inset-top))}.timeline{padding:14px 12px}.bubble{max-width:88%;font-size:15px}.composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.icon-btn{width:42px;height:42px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}