:root { background: #101113; color: #edf1f0; }
.brandline span { color: #98aaa9; }
h1 { font-size: 34px; font-weight: 820; }
.controls { border-top-color: #3e4948; border-bottom-color: #3e4948; }
.segments { border-radius: 2px; }
.segments button { border-radius: 1px; }
.segments button[aria-pressed=true] { background: #a4e7d3; color: #12251f; font-weight: 750; }
.options { gap: 30px; }
.option { --ink-accent: #a4e7d3; --ink-body: #141a1b; }
.option-head { gap: 8px; }
.option-head h2 { font-weight: 760; font-size: 16px; }
.number { display: grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--ink-accent); color: #141719; font-weight: 800; font-size: 11px; }
.recommended { color: #a4e7d3; font-size: 9px; }
.sidebar { border-radius: 3px; border: 1px solid #607b75; background: var(--ink-body); height: 728px; box-shadow: 4px 4px 0 #000; }
.sidebar-head { position: relative; isolation: isolate; overflow: hidden; min-height: 105px; padding: 16px 13px 15px; align-items: flex-end; border-bottom: 3px solid var(--ink-accent); }
.sidebar-head::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('assets/zaraki.webp') 68% 40% / 185% auto no-repeat; filter: grayscale(1) brightness(3.1) contrast(1.2); }
.sidebar-head::after { content: ''; position: absolute; z-index: -1; bottom: 0; left: -12px; width: 68%; height: 48px; background: #11191a; transform: skewX(-13deg); border-right: 3px solid var(--ink-accent); }
.product { font-size: 24px; font-weight: 880; font-style: italic; line-height: 30px; gap: 6px; }
.product img { width: 24px; height: 24px; border: 1px solid #65837b; border-radius: 3px; }
.add-project { width: 32px; height: 32px; border-radius: 2px; border-color: #1a2823; background: var(--ink-accent); color: #12251e; box-shadow: 3px 3px 0 #111; }
.add-project:hover { background: #e4fff5; color: #142720; }
.view-tabs { margin: 11px 12px 12px; border-bottom: 1px solid #354742; gap: 2px; }
.view-tabs button { min-height: 29px; font-weight: 650; }
.view-tabs button[aria-pressed=true] { border: 0; background: var(--ink-accent); color: #1c352d; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%,0 8px); }
.sidebar-scroll { padding: 0 10px 14px; }
.list-heading { color: #92aaa5; font-size: 9px; text-transform: uppercase; }
.thread { border-radius: 2px; margin: 5px 0; padding-block: 8px; background: #1c2526; border: 1px solid #2a3a37; }
.thread:hover { background: #253330; }
.thread.selected { background: var(--ink-accent); border-color: var(--ink-accent); box-shadow: 3px 3px 0 #07110e; }
.thread.selected::before { display: block; left: 0; top: 0; bottom: auto; width: 7px; height: 7px; border-radius: 0; background: #132520; }
.thread.selected::after { content: ''; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background: #172320; clip-path: polygon(100% 0,100% 100%,0 100%); }
.thread.selected .project { color: #14241f; }
.thread.selected .project > .icon { color: #345348; }
.thread.selected .title { color: #45685c; }
.thread.selected .provider { color: #425e53; }
.thread.selected .provider.claude { color: #875341; }
.thread.selected .org { color: #577b70; }
.thread.selected .status { color: #325f52; }
.thread.selected .time { color: #50796b; }
.thread.selected .more { color: #3e6658; }
.project { color: #e4ebe8; }
.project-name { font-size: 13px; font-weight: 770; }
.title { font-size: 11px; color: #92a7a2; }
.project > .icon { color: #bfbb93; }
.provider { color: #9aafab; }
.provider.claude { color: #d0957b; }
.status.thinking { color: #a0d8c9; }
.status.completed { color: #93c1a3; }
.status.waiting { color: #e3c479; }
.status.error { color: #ffadb4; }
.status.error > span:first-child { border: 1px solid #cc7481; padding: 0 4px; line-height: 13px; }
.thread.selected .status.error { color: #812a41; }
.thread.selected .status.error > span:first-child { border-color: #812a41; }
.thread.selected .status.waiting { color: #624e20; }
.thread[data-state=thinking]:not(.selected) { border-left: 2px solid #6eaaa0; }
.thread.selected .dots i { animation-duration: 1.8s; }
.more { border-radius: 1px; }
.group { margin-top: 11px; }
.group-toggle { padding: 7px 6px; border-bottom: 1px solid #3a5149; }
.group-name { font-weight: 780; }
.group .thread { background: transparent; border-color: transparent; margin-block: 3px; }
.group .thread.selected { background: var(--ink-accent); border-color: var(--ink-accent); }
.user { border-top: 1px solid #57786d; background: #182b25; }
.avatar { border-radius: 3px; border: 1px solid #6aab98; color: #b1e8d8; background: #203b32; font-weight: 700; }
.user small { border: 1px solid #7bac9d; padding: 2px 7px; border-radius: 1px; color: #b4ded0; text-transform: uppercase; font-weight: 700; }
.variant-b { --ink-accent: #f1d96e; --ink-body: #18171c; }
.variant-b .sidebar { background: var(--ink-body); border: 2px solid #807751; box-shadow: 5px 5px 0 #000; }
.variant-b .sidebar-head { border-bottom: 3px solid #f1d96e; }
.variant-b .sidebar-head::before { filter: grayscale(1) brightness(3.4) sepia(.7) contrast(1.15); background-position: 64% 42%; }
.variant-b .sidebar-head::after { background: #f1d96e; border: 2px solid #121418; left: 10px; bottom: 13px; height: 36px; width: 62%; box-shadow: 3px 3px 0 #090909; }
.variant-b .product { color: #15151a; font-size: 22px; padding-bottom: 2px; }
.variant-b .product img { display: none; }
.variant-b .view-tabs { background: none; border-radius: 0; padding: 0; border: 1px solid #625b42; }
.variant-b .view-tabs button { border-radius: 0; min-height: 29px; }
.variant-b .view-tabs button[aria-pressed=true] { background: #f1d96e; color: #312a18; clip-path: none; }
.variant-b .thread { margin: 7px 3px 7px 0; border-radius: 1px; background: #27252c; border: 1px solid #46414b; box-shadow: 3px 3px 0 #060607; }
.variant-b .thread.selected { background: #f1d96e; border-color: #f9eaa7; }
.variant-b .thread.selected::before { display: none; }
.variant-b .thread.selected::after { width: 32px; height: 32px; right: 0; top: 0; bottom: auto; clip-path: none; opacity: .16; background: radial-gradient(#141418 .8px,transparent .9px) 0 0/4px 4px; pointer-events: none; }
.variant-b .thread.selected .project { color: #252218; }
.variant-b .thread.selected .title { color: #77633b; }
.variant-b .thread.selected .status { color: #5e5831; }
.variant-b .thread.selected .time,.variant-b .thread.selected .org { color: #817146; }
.variant-b .thread.selected .more,.variant-b .thread.selected .provider { color: #77633b; }
.variant-b .thread.selected .status.error { color: #9a2740; }
.variant-b .thread[data-state=thinking]:not(.selected) { border-left-color: #aa83a6; }
.variant-b .group-toggle { border-bottom-color: #615747; }
.variant-b .group .thread { border-color: #383039; background: #262229; }
.variant-b .group .thread.selected { background: #f1d96e; }
.variant-b .user { background: #27242a; border-top-color: #716548; }
.variant-b .avatar { background: #ecd779; color: #3d3620; border-color: #ecd779; }
.variant-b .user small { background: #ecd779; color: #3d3620; border-color: #ecd779; transform: skewX(-7deg); }
.variant-c { --ink-accent: #eb626e; --ink-body: #141315; }
.variant-c .sidebar { border-radius: 2px; background: var(--ink-body); border: 1px solid #604149; box-shadow: 4px 4px 0 #000; }
.variant-c .sidebar-head { min-height: 105px; border-bottom: 2px solid #eb626e; }
.variant-c .sidebar-head::before { filter: grayscale(1) brightness(2.8) contrast(1.2); background-position: 69% 37%; }
.variant-c .sidebar-head::after { background: #161217; border-right: 4px solid #eb626e; width: 72%; transform: skewX(-22deg); }
.variant-c .product { color: #f1eded; font-size: 25px; }
.variant-c .product img { border-color: #aa6c76; }
.variant-c .add-project { background: #eb626e; color: #241218; border-color: #db7d87; }
.variant-c .view-tabs { border-color: #583640; }
.variant-c .view-tabs button[aria-pressed=true] { background: #c95164; color: #fff0f1; }
.variant-c .thread { margin-block: 4px; padding-block: 9px; border-radius: 0; border: 1px solid transparent; border-bottom-color: #413138; background: transparent; }
.variant-c .thread.selected { background: #2d1b24; border-color: #91505f; border-left: 3px solid #f28591; box-shadow: none; }
.variant-c .thread.selected::before { display: none; }
.variant-c .thread.selected::after { top: 0; bottom: 0; right: 0; width: 5px; height: auto; background: #d96678; clip-path: polygon(100% 0,100% 100%,0 100%,0 50%); animation: bladeBreathe 4s ease-in-out infinite; }
.variant-c .thread.selected .project { color: #f0e7e9; }
.variant-c .thread.selected .title { color: #bb939f; }
.variant-c .thread.selected .provider { color: #c0a2ac; }
.variant-c .thread.selected .provider.claude { color: #d3947e; }
.variant-c .thread.selected .org,.variant-c .thread.selected .time { color: #9a7884; }
.variant-c .thread.selected .status { color: #d1a1ad; }
.variant-c .thread.selected .status.error { color: #ffbdc8; }
.variant-c .thread.selected .status.error > span:first-child { border-color: #ffbdc8; }
.variant-c .thread.selected .status.completed { color: #a1c1aa; }
.variant-c .thread.selected .status.waiting { color: #e0c18a; }
.variant-c .thread[data-state=thinking]:not(.selected) { border-left-color: #ab596b; }
.variant-c .group { border-color: #493139; }
.variant-c .group-toggle { border-color: #543943; }
.variant-c .group .thread.selected { background: #2d1b24; }
.variant-c .user { background: #23171e; border-top-color: #754650; }
.variant-c .avatar { background: #4e2935; color: #efacb7; border-color: #ac6274; }
.variant-c .user small { color: #eca6b2; border-color: #a66372; }
@keyframes bladeBreathe { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
body[data-motion=off] .thread::after { animation: none; }
@media(max-width:1100px) and (min-width:850px) { .option-head h2 { font-size:14px; } .recommended { display:none; } .product { font-size:21px; } .variant-b .product { font-size:21px; } .variant-c .product { font-size:22px; } }
@media(max-width:849px) { h1 { font-size:30px; } .options { gap:40px; } .sidebar { height:736px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }