:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#111315;color:#edf2f0;font-synthesis:none}
*{box-sizing:border-box;letter-spacing:0}
body{margin:0}
[hidden]{display:none!important}
button,input{font:inherit}
button{color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid #a3e9d8;outline-offset:3px}
main{max-width:1260px;margin:auto;padding:34px 32px 24px}
.brandline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650}
.brandline img{width:23px;height:23px}
.brandline span{margin-left:auto;color:#889698;font-size:10px;font-weight:450}
h1{margin:27px 0 12px;font-size:30px;line-height:1.2;font-weight:700}
.page-header p{margin:0;color:#9da9ab;font-size:13px;line-height:1.6}
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:22px;padding:20px 0;margin:18px 0 21px}
.segments{display:flex;padding:4px;gap:3px;border-radius:999px;background:#242a2c}
.segments button{padding:7px 17px;border:0;border-radius:999px;background:transparent;color:#a7b5b5;font-size:12px}
.segments button[aria-pressed=true]{background:#38504e;color:#d9f5ec}
.controls label{display:flex;align-items:center;gap:7px;color:#a6b1b4;font-size:11px;cursor:pointer}
input[type=checkbox]{margin:0;width:14px;height:14px;accent-color:#84cfc2;cursor:pointer}
.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.option{min-width:0;--accent:#9cdccd}
.option-head{display:flex;align-items:center;gap:8px;min-height:24px}
.option-head h2{font-size:17px;font-weight:650;margin:0}
.number{color:#8a9e9c;font-size:10px}
.recommended{margin-left:auto;color:#aad9c8;font-size:9px}
.description{min-height:40px;margin:8px 0 20px;font-size:12px;line-height:1.65;color:#97a8aa}
.sidebar{display:flex;flex-direction:column;position:relative;height:720px;min-width:0;overflow:hidden;border-radius:27px;border:1px solid #ffffff12;background:#151a1c;box-shadow:0 16px 35px #0002,inset 0 1px 0 #ffffff09}
.sidebar-head{display:flex;align-items:center;gap:10px;position:relative;isolation:isolate;min-height:78px;padding:19px 18px 15px}
.product{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:750;white-space:nowrap}
.product img{width:29px;height:29px;border-radius:10px;box-shadow:0 0 0 1px #ffffff0d,0 4px 12px #0003}
.icon{display:inline-block;flex:0 0 auto;width:14px;height:14px;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}
.add-project{width:35px;height:35px;margin-left:auto;padding:0;border:1px solid #99d8cb28;border-radius:50%;display:grid;place-items:center;background:#263536;color:#b5dfd4;box-shadow:inset 0 1px 0 #fff1;transition:background .15s ease,transform .18s ease}
.add-project:hover{background:#36524e;transform:translateY(-1px)}
.add-project .icon{width:17px;height:17px}
.view-tabs{display:flex;gap:4px;padding:4px;margin:0 15px 14px;border-radius:999px;background:#ffffff04;border:1px solid #ffffff06}
.view-tabs button{flex:1;min-width:0;min-height:29px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0;border:0;border-radius:999px;background:transparent;color:#91a0a4;font-size:10px;font-weight:700}
.view-tabs button[aria-pressed=true]{background:#2b4546;color:#c2eeeb;box-shadow:inset 0 0 0 1px #86c6c225,0 3px 9px #0001}
.view-tabs button .icon{width:12px;height:12px}
.sidebar-scroll{flex:1;min-height:0;overflow:auto;padding:0 12px 14px;scrollbar-width:thin;scrollbar-color:#638b8266 transparent}
.sidebar-scroll::-webkit-scrollbar{width:5px}
.sidebar-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:#638b8266}
.list-heading{display:flex;justify-content:space-between;margin:0 8px 9px;color:#76898b;font-size:9px;line-height:18px}
.thread{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 27px;align-items:center;min-height:58px;margin:5px 0;padding:9px 7px 9px 10px;border:1px solid transparent;border-radius:18px;background:transparent;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.thread:hover{background:#ffffff04}
.thread.selected{border-color:#cbb58964;background:linear-gradient(135deg,#2c4341,#243738);box-shadow:0 6px 18px #0002,inset 0 1px 0 #d5f7ed12}
.thread[data-state=thinking]:not(.selected){background:#72dac30b;border-color:#8adae019}
.row-content{min-width:0}
.project{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px;margin:0 1px 1px 0;color:#e5e9e6}
.project>.icon{width:14px;height:14px;color:#d3bf8c}
.project-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:none;color:inherit;font-size:14px;font-weight:740;line-height:22px;text-align:left}
.org{min-width:0;max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;padding-left:6px;font-size:8px;line-height:14px;color:#778c8b}
.identity{display:grid;grid-template-columns:16px minmax(0,1fr);gap:4px;align-items:center;min-height:21px}
.provider{display:grid;place-items:center;width:16px;height:21px;padding:0;border:0;border-radius:5px;background:transparent;color:#94aaa5}
.provider.claude{color:#ce967e}
.provider .icon{width:12px;height:12px}
.provider.claude .icon{width:13px;height:13px}
.provider:hover{background:#ffffff09}
.title{padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;color:#96aaa5;font-size:11px;font-weight:450;line-height:21px;text-align:left}
.thread.selected .title{color:#a0b9b3}
.more{width:27px;height:29px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#0000000d;color:#819795}
.more:hover{background:#ffffff0a;color:#d3e6df}
.more .icon{width:14px;height:14px}
.status{display:flex;align-items:center;gap:5px;min-height:16px;margin:2px 0 0;line-height:16px;font-size:9px;white-space:nowrap;color:#94b8b4}
.status.thinking{color:#a0e0d6}.status.completed{color:#a0c6ae}.status.waiting{color:#dfc18c}.status.error{color:#eba0ab}
.time{font-size:9px;color:#89a4a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots{display:flex;align-items:center;gap:2px}
.dots i{width:2px;height:2px;border-radius:50%;background:currentColor;animation:quietDots 2.4s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes quietDots{0%,100%{opacity:.4}50%{opacity:.9}}
.group{margin-top:14px}.group:first-child{margin-top:0}
.group-toggle{display:flex;align-items:center;gap:6px;width:100%;min-width:0;min-height:34px;padding:5px 7px;border:0;background:none;color:#e5e9e6;text-align:left}
.group-toggle .icon{width:12px;height:12px;color:#b4b08e}
.group-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:22px;font-weight:740}
.group-toggle .count{margin-left:auto;font-size:10px;color:#819693}
.group-toggle[aria-expanded=false] .chevron{transform:rotate(-90deg)}
.group .thread{margin-left:7px;min-height:45px;padding-block:8px}
.user{display:flex;align-items:center;gap:10px;min-height:60px;margin:9px 12px 12px;padding:10px 12px;border-radius:20px;background:#273a373f;border:1px solid #8bccbc1d;font-size:13px}
.avatar{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:#2e4948;color:#c0efdd;border:1px solid #a2d3c526;font-size:11px;font-weight:700}
.user>span:last-child{display:flex;align-items:center;flex:1;min-width:0}
.user small{margin-left:auto;color:#a5d4c9;font-size:10px;font-weight:700}
.tradeoff{font-size:12px;line-height:1.7;margin:17px 0 0;color:#91a5a6}.tradeoff strong{font-weight:600;color:#c7dad3}
.variant-b{--accent:#adf0dd}
.variant-b .sidebar{background:#181b21;border-color:#ffffff15;border-radius:30px}
.variant-b .sidebar-head{min-height:93px;align-items:flex-end;padding-bottom:15px}
.variant-b .sidebar-head::before{content:'';position:absolute;z-index:-1;inset:0;background:url('assets/zaraki.webp') 70% 40%/175% auto;filter:grayscale(1) brightness(2.8);opacity:.35;mask-image:linear-gradient(#000,#0009 45%,transparent);pointer-events:none}
.variant-b .product{font-size:22px}
.variant-b .add-project{background:linear-gradient(145deg,#f6b9c6,#d58d9e);color:#472d39;border-color:#ffdae54d;box-shadow:inset 0 1px 0 #ffebf380,0 4px 12px #1c141a66}
.variant-b .view-tabs{border:0;background:#ffffff04;margin-bottom:12px}
.variant-b .view-tabs button[aria-pressed=true]{background:#c5eee3;color:#315b50;box-shadow:inset 0 1px 0 #fff6,0 4px 10px #0003}
.variant-b .thread{border-radius:25px;padding:11px 10px 11px 13px;margin:6px 0}
.variant-b .thread.selected{background:linear-gradient(145deg,#c3f4e5,#94decc);border-color:#d4fff044;box-shadow:inset 0 2px 0 #f0fff780,0 6px 18px #75c5b21a;animation:jellySelect .22s ease-out both}
.variant-b .thread.selected .project{color:#173c32}.variant-b .thread.selected .project>.icon{color:#376151}
.variant-b .thread.selected .title{color:#466f62}.variant-b .thread.selected .provider{color:#466f62}.variant-b .thread.selected .provider.claude{color:#87543f}
.variant-b .thread.selected .org{color:#537568}.variant-b .thread.selected .status{color:#325e4f}.variant-b .thread.selected .time{color:#496e60}
.variant-b .thread.selected .status.waiting{color:#675426}.variant-b .thread.selected .status.error{color:#8c334c}
.variant-b .thread.selected .more{background:#4771610d;color:#496e60}
.variant-b .thread[data-state=thinking]:not(.selected){background:#7ccbbd08;border-color:transparent}
.variant-b .user{border:0;background:#ffffff04;border-radius:24px}
.variant-b .avatar{color:#e8b7c8;background:#583d4b;border-color:#ebb6cd26}
.variant-b .user small{color:#dfa6bd}
@keyframes jellySelect{from{transform:scale(.985)}to{transform:scale(1)}}
.variant-c .sidebar{background:#171a1e;border-color:#cad8e412;border-radius:29px;box-shadow:0 18px 32px #0002,inset 0 1px 0 #ffffff0f}
.variant-c .sidebar-head{min-height:78px}
.variant-c .product{font-size:20px;font-weight:600}
.variant-c .product img{box-shadow:0 0 0 1px #b5ded726,0 4px 15px #0002}
.variant-c .add-project{background:#ffffff09;border-color:#ffffff1a;color:#e4c1c7;box-shadow:inset 0 1px 0 #ffffff12}
.variant-c .view-tabs{padding:0;border:0;background:none;gap:7px;margin:0 18px 13px}
.variant-c .view-tabs button{min-height:29px;font-weight:550}
.variant-c .view-tabs button[aria-pressed=true]{background:#dee9ee14;color:#d0e0e2;box-shadow:inset 0 1px 0 #ffffff12}
.variant-c .thread{margin:6px 0;padding:10px 10px 10px 13px;border-radius:22px}
.variant-c .thread.selected{background:linear-gradient(135deg,#dbe5ef24,#dbe5ef0a);border-color:#d2e2ef22;box-shadow:inset 0 1px 0 #f4f9ff20,0 7px 18px #0002}
.variant-c .thread.selected .title{color:#aebac0}
.variant-c .project>.icon{color:#c4b99a}
.variant-c .thread[data-state=thinking]:not(.selected){background:none;border-color:transparent}
.variant-c .status.thinking{color:#b4dcda}.variant-c .status.completed{color:#adcbbe}
.variant-c .provider.claude{color:#dba49b}
.variant-c .user{background:none;border:0;margin-bottom:14px;padding:10px 15px;border-radius:999px}
.variant-c .avatar{background:linear-gradient(135deg,#b6ddd528,#eabfc924);border-color:#dcefe530;color:#dce8e0}
.variant-c .user small{padding:3px 8px;border-radius:999px;background:#d4dfe80c;color:#bec9ce;font-weight:600}
footer{margin-top:30px;padding-top:18px;color:#839398;font-size:11px;line-height:1.6}
#tooltip{position:fixed;z-index:20;max-width:260px;padding:10px 13px;border:1px solid #ffffff1a;border-radius:12px;background:#283234;color:#d7e7e1;font-size:12px;line-height:1.65;box-shadow:0 8px 18px #0003;pointer-events:none}
#tooltip small{display:block;color:#a9b9b6;font-size:11px}
dialog{width:min(390px,calc(100% - 32px));max-height:80dvh;overflow:auto;padding:32px 24px 24px;border:1px solid #ffffff1c;border-radius:24px;background:#20282b;color:#e6efed;box-shadow:0 20px 60px #0005}
dialog::backdrop{background:#0009}
.close{position:absolute;right:10px;top:9px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff06;color:#ccd8d6;font-size:25px}
dialog h2{font-size:18px;line-height:1.5;overflow-wrap:anywhere}dialog p{color:#a9bcb8;font-size:13px;line-height:1.7}
dialog .provider{width:42px;height:42px;margin:auto}dialog .provider .icon{width:32px;height:32px}
.new-project label{display:block;font-size:12px;margin-bottom:10px;color:#a3b2b6}.new-project input{width:100%;padding:10px 0;background:transparent;border:0;border-bottom:1px solid #5a6c73;color:#e4eeee}.submit{padding:9px 15px;margin-top:20px;border:1px solid #91c4b733;border-radius:999px;background:#385a54;color:#d4eaec}
body[data-motion=off] .dots i,body[data-motion=off] .thread{animation:none}
@media(min-width:850px) and (max-width:1100px){main{padding-inline:20px}.options{gap:16px}.org{display:none}.description{min-height:60px}.option-head{flex-wrap:wrap}.recommended{display:none}.sidebar-head{padding-inline:13px}.product{font-size:19px}.variant-b .product{font-size:20px}.product img{width:25px;height:25px}.add-project{width:30px;height:30px}.thread{padding-left:8px}.variant-b .thread,.variant-c .thread{padding-left:9px}}
@media(max-width:849px){main{padding:25px 18px}h1{font-size:27px}.options{grid-template-columns:1fr;gap:38px}.option{width:100%;max-width:390px;margin:auto}.description{min-height:0}.controls{gap:15px 18px}.controls label{font-size:10px}.brandline span{font-size:9px}.sidebar{height:710px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}