:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e7e5e0;background:#101214;font-synthesis:none}
*{box-sizing:border-box;letter-spacing:0}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #7ebfc3;outline-offset:3px}button{border:0}button svg{width:17px;height:17px;flex:none}button:disabled{cursor:default}main{max-width:1220px;margin:auto;padding:38px 26px}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{display:flex;align-items:center;gap:9px;color:#9eaaa9;font-size:10px}.brand img{width:24px;height:24px}h1{font-size:30px;font-weight:650;line-height:1.2;margin:16px 0 10px}.page-heading p{color:#96999c;font-size:13px;margin:0;line-height:1.6}.edition{color:#777d81;font-size:11px;white-space:nowrap}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:20px 0;margin:20px 0 0;border-block:1px solid #272a2c}.segmented{display:flex;gap:3px;padding:3px;background:#1b1e21;border-radius:7px}.segmented button{font-size:12px;padding:7px 17px;border-radius:5px;background:transparent;color:#929b9f}.segmented button[aria-pressed=true]{background:#304046;color:#d0e3e4}.controls label{font-size:12px;color:#aeb2b4;display:flex;gap:7px;align-items:center}.controls input{accent-color:#87babc}.option{padding:28px 0;border-bottom:1px solid #272a2c}.option-head{display:flex;align-items:baseline;gap:12px}.number{font-size:11px;color:#72797f}.option h2{font-size:18px;font-weight:600;margin:0}.recommend{font-size:10px;color:#b2cfc5;margin-left:auto}.description{font-size:12px;color:#969da1;margin:9px 0 22px;line-height:1.6}.examples{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px}.sample{min-width:0}.sample-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#747d82;margin:0 4px 10px}.sample iframe{display:block;width:100%;height:228px;border:1px solid #24292d;border-radius:8px;background:#0d1012}.sample-label a{color:#9babaf;text-decoration:none}.page-footer{font-size:12px;color:#7f888d;line-height:1.8;margin-top:24px}
.preview-page{background:#0d1012}.preview-page main{display:none}.preview-page #preview{display:block}.preview-page .toast{font-size:11px}.shell{position:relative;min-height:226px;padding:10px;background:radial-gradient(ellipse at 90% 100%,#14232966,transparent 65%),#0d1012}.topbar{display:flex;align-items:flex-start;gap:8px;position:relative;z-index:1}.burger{display:none;flex:none;width:44px;height:48px;border-radius:12px;background:#171a1d;box-shadow:inset 0 0 0 1px #ffffff0d;color:#c0c4c5;align-items:center;justify-content:center}.burger svg{width:23px;height:23px}.surface{min-width:0;max-width:100%;display:flex;align-items:center;gap:0;background:#181b1dee;border:1px solid #ffffff0c;border-radius:14px;box-shadow:0 6px 18px #0002,inset 0 1px 0 #ffffff04}.identity{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left;padding:10px 4px 10px 13px;background:transparent;border-radius:13px 0 0 13px;flex:1}.identity:hover{background:#ffffff02}.topline{display:flex;align-items:center;min-width:0;gap:10px;line-height:20px}.project{display:flex;gap:7px;align-items:center;min-width:0;color:#e1bf72;flex:0 1 auto}.project.folder{color:#d0d1d0}.project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:680;min-width:0}.mark{display:inline-block;width:17px;height:17px;flex:none;vertical-align:middle;background:currentColor;mask:var(--icon) center / contain no-repeat}.thread-name{font-size:12px;font-weight:450;color:#a1a5a8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.divider{width:1px;height:13px;background:#ffffff13;flex:none}.copy{flex:none;width:40px;height:42px;margin:0 3px;color:#888f95;background:transparent;border-radius:8px;display:grid;place-items:center}.copy:hover{color:#c8d0d1;background:#ffffff05}.copy.copied{color:#8abb9e}.copy.copied svg{display:none}.copy.copied:after{content:'✓';font-size:17px}.subline{display:flex;gap:12px;align-items:center;min-width:0;min-height:14px}.provider{width:12px;height:12px;opacity:.55;flex:none}.status{display:flex;align-items:baseline;gap:6px;font-size:10px;line-height:14px;min-width:0;white-space:nowrap}.status .elapsed{color:#83999c;font-size:9px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:clip}.thinking{position:relative;color:#b5d6d8;white-space:nowrap;font-weight:550;isolation:isolate;background:linear-gradient(100deg,#83aeb3,#c5e1df,#88b3bd,#83aeb3);background-size:220% 100%;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s ease-in-out infinite}.thinking:before{content:'';position:absolute;inset:-3px -5px;z-index:-1;background:linear-gradient(100deg,transparent,#69b5b52b,transparent);background-size:230% 100%;filter:blur(5px);animation:shine 5s ease-in-out infinite}.dots{display:inline-flex;gap:1px;margin-left:2px;align-items:baseline;-webkit-text-fill-color:#abcacc}.dots i{font-style:normal;animation:dot 1.6s infinite}.dots i:nth-child(2){animation-delay:.17s}.dots i:nth-child(3){animation-delay:.34s}.idle{font-size:10px;color:#777f85}.chat-sample{padding:22px 14px 12px;max-width:640px}.user-text{width:fit-content;margin:0 0 17px auto;border-radius:8px;padding:8px 12px;background:#ffffff05;font-size:11px;color:#9ea6ab}.assistant-text{font-size:12px;line-height:1.8;color:#7d898f;margin:0;max-width:510px}.assistant-text strong{font-weight:500;color:#abb3b6}.v1 .surface{width:max-content}.v1 .identity{max-width:650px}.v1 .project{max-width:65%}.v1 .thread-name{max-width:290px}.v2 .surface{width:min(100%,620px)}.v2 .project{flex:1}.v2 .subline{justify-content:space-between;gap:16px}.v2 .thread-name{font-size:11px;flex:1}.v2 .status{flex:none}.v3 .surface{width:min(100%,650px)}.v3 .topline{align-items:stretch;gap:14px}.v3 .project{flex:1}.v3 .thread-name{flex:0 1 45%;align-self:center;font-size:12px}.v3 .divider{height:18px;align-self:center}.v3 .subline{padding-top:3px;border-top:1px solid #ffffff07}.v3 .identity{gap:6px}.toast{position:fixed;z-index:20;left:50%;top:12px;transform:translate(-50%,-5px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 24px);padding:9px 13px;border-radius:8px;background:#30363a;color:#d5dcde;box-shadow:0 4px 20px #0004;font-size:12px;overflow-wrap:anywhere}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{padding:20px;width:min(420px,calc(100% - 28px));border:1px solid #ffffff15;border-radius:16px;background:#1b1f22;color:#d5d8d9}dialog::backdrop{background:#080a0cc9;backdrop-filter:blur(4px)}dialog h2{font-size:16px;margin:0 0 18px}dialog dl{margin:0}dialog dt{font-size:10px;color:#8b999f;margin:14px 0 5px}dialog dd{font-size:12px;margin:0;overflow-wrap:anywhere;line-height:1.5}.close{float:right;background:transparent;font-size:23px;color:#a6afb4;margin:-8px -5px 0 0}.menu-pop{position:absolute;left:0;top:56px;padding:15px;background:#22282c;border:1px solid #ffffff12;border-radius:8px;color:#d0d4d6;font-size:12px;box-shadow:0 12px 24px #0007}.menu-pop small{display:block;color:#939da3;margin-top:7px;font-size:10px}
.provider{filter:invert(1)}
@keyframes shine{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes dot{0%,70%,100%{opacity:.35}35%{opacity:1}}
@media(max-width:900px){.examples{grid-template-columns:1fr}.sample.mobile{max-width:390px}.edition{display:none}}
@media(max-width:560px){main{padding:24px 16px}h1{font-size:24px}.controls{gap:14px}.option h2{font-size:16px}.option-head{gap:9px}.sample.desktop{display:none}.sample.mobile{max-width:none}.description{margin-bottom:16px}.shell{padding:10px 8px}.burger{display:flex}.surface{flex:1!important;width:auto!important;border-radius:13px}.identity{padding:8px 0 8px 10px;gap:4px}.topline{gap:7px}.project{gap:5px}.project-name{font-size:13px}.mark{width:15px;height:15px}.thread-name{font-size:11px}.copy{width:30px;height:44px;margin:0 2px}.copy svg{width:14px;height:14px}.v1 .project{max-width:62%}.v1 .thread-name{flex:1}.status{font-size:9px;gap:4px;line-height:13px}.status .elapsed{font-size:9px}.subline{gap:6px}.v2 .subline{gap:8px}.v2 .thread-name{font-size:10px}.v2 .status .elapsed{font-size:8px}.v3 .topline{gap:9px}.v3 .thread-name{font-size:10px}.v3 .identity{gap:4px}.chat-sample{padding:20px 7px 8px}.assistant-text{font-size:11px}.user-text{font-size:10px}.provider{width:11px;height:11px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}