html:has(.ai-page),body.ai-page{
height:auto;
overflow:visible;
}
html:has(.ai-page){
color-scheme:light dark;
background:#eceef1;
scroll-padding-top:88px;
}
body.ai-page{
--bg1:#eceef1;
--bg2:#e1e5ea;
--tx1:#1f2328;
--tx2:#424a53;
--tx3:#5b6572;
--tx4:#7a828c;
--bc2:#d4d9e0;
--hv2:#e1e5ea;
--cl1:#1a73e8;
--icf:#1558c0;
--link:#1558c0;
--s1:#ffffff;
--s2:#f4f6f8;
--s3:#e1e5ea;
--s4:#d4d9e0;
--wn1:#7a4b00;
--wn2:#fdf0d8;
--er1:#a8201c;
--er2:#fce8e6;
--tile:#d9dee5;
--ul:2px;
min-height:100vh;
min-height:100dvh;
display:flex;
flex-direction:column;
overflow-x:clip;
container-type:inline-size;
font-size:var(--fz2);
background:var(--bg1);
}
@media(prefers-color-scheme:dark){
html:has(.ai-page){
background:#111315;
}
body.ai-page{
--bg1:#111315;
--bg2:#25282d;
--tx1:#eef1f4;
--tx2:#c3c9d1;
--tx3:#9aa2ac;
--tx4:#7c848e;
--bc2:#30343a;
--hv2:#25282d;
--cl1:#2f7fea;
--icf:#4b93f0;
--link:#8ab8ff;
--s1:#1b1e22;
--s2:#22262b;
--s3:#2c3036;
--s4:#383d44;
--wn1:#f3c879;
--wn2:#3a2d14;
--er1:#ffb4ab;
--er2:#3d1a18;
--tile:#2a2e34;
}
.ai-page .gh-drop{
box-shadow:none;
outline:1px solid var(--s4);
}
}
.ai-page a:not(.btn,.gh a){
color:var(--link);
text-decoration-thickness:var(--ul);
text-underline-offset:3px;
}
.ai-page :focus-visible{
outline:2px solid var(--cl1);
outline-offset:2px;
}
.ai-page .skip-link{
position:absolute;
left:16px;
top:-100px;
z-index:40;
padding:12px;
color:var(--tx1);
background:var(--s1);
border-radius:var(--br4);
}
.ai-page .skip-link:focus{
top:8px;
}
.ai-page .btn{
min-height:44px;
padding:0 20px;
font-weight:var(--fw1);
color:var(--tx1);
background:var(--s3);
border:0;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
}
.ai-page .btn:hover{
background:var(--s4);
}
.ai-page .btn.primary{
color:#fff;
background:var(--cl1);
}
.ai-page .btn.primary:hover{
background:var(--icf);
}
.ai-page .btn:disabled{
opacity:.55;
cursor:default;
}
.ai-main{
flex:1 0 auto;
display:flex;
flex-direction:column;
width:100%;
max-width:840px;
margin:0 auto;
padding:0 16px 24px;
container-type:inline-size;
}
.ai-hero{
padding:clamp(40px,14vh,140px) 0 28px;
text-align:center;
}
.ai-hero h1{
margin:0;
font-size:clamp(30px,7.2cqw,48px);
font-weight:700;
line-height:1.1;
letter-spacing:-.02em;
overflow-wrap:break-word;
}
.ai-lead{
max-width:34em;
margin:14px auto 0;
font-size:var(--fz1);
color:var(--tx2);
}
.ai-started .ai-hero,.ai-started .ai-examples{
display:none;
}
.ai-thread{
display:flex;
flex-direction:column;
gap:28px;
min-width:0;
}
.ai-started .ai-thread{
padding-top:24px;
}
.ai-turn{
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}
.ai-you{
align-self:flex-end;
max-width:min(100%,560px);
margin:0;
padding:10px 16px;
color:var(--tx1);
background:var(--s3);
border-radius:18px;
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.ai-read{
margin:0;
font-size:var(--fz5);
color:var(--tx3);
overflow-wrap:anywhere;
}
.ai-msg{
margin:0;
overflow-wrap:anywhere;
}
.ai-msg.warn,.ai-limit{
padding:12px 16px;
color:var(--wn1);
background:var(--wn2);
border-radius:var(--br4);
}
.ai-msg.error{
padding:12px 16px;
color:var(--er1);
background:var(--er2);
border-radius:var(--br4);
}
.ai-limit p{
margin:0;
}
.ai-limit .ai-row{
margin-top:12px;
}
.ai-box{
min-width:0;
padding:16px;
background:var(--s1);
border-radius:var(--br4);
}
.ai-box h2,.ai-box h3{
margin:0;
font-size:var(--fz1);
font-weight:var(--fw1);
line-height:1.3;
overflow-wrap:anywhere;
}
.ai-sub{
margin:2px 0 0;
font-size:var(--fz5);
color:var(--tx3);
overflow-wrap:anywhere;
}
.ai-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.ai-row>*{
min-width:0;
}
.ai-choices{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));
gap:10px;
margin-top:12px;
}
.ai-choice{
display:flex;
flex-direction:column;
min-width:0;
padding:0;
text-align:left;
color:var(--tx1);
background:var(--s2);
border-radius:var(--br4);
overflow:hidden;
cursor:pointer;
}
.ai-choice:hover{
background:var(--s3);
}
.ai-choice canvas{
aspect-ratio:16/10;
}
.ai-choice span{
display:block;
padding:0 12px;
overflow-wrap:anywhere;
}
.ai-choice .t{
padding-top:10px;
font-weight:var(--fw1);
}
.ai-choice .s{
padding-bottom:12px;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-pv{
position:relative;
display:block;
width:100%;
background:var(--tile);
}
canvas.ai-pv{
height:auto;
}
.ai-card .ai-pv{
aspect-ratio:2/1;
border-radius:var(--br4);
margin:-4px 0 14px;
}
.ai-credit{
position:absolute;
right:6px;
bottom:4px;
font-size:11px;
color:#fff;
text-shadow:0 0 3px #000;
pointer-events:none;
}
.ai-frame{
position:relative;
}
.ai-lead-fact{
margin:14px 0 0;
padding:14px 16px;
background:var(--s2);
border-radius:var(--br4);
}
.ai-lead-fact .k{
display:block;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-lead-fact .v{
display:block;
font-size:22px;
font-weight:var(--fw1);
line-height:1.25;
overflow-wrap:anywhere;
}
.ai-facts{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:0;
margin:12px 0 0;
}
.ai-fact{
display:grid;
grid-template-columns:minmax(0,11em) minmax(0,1fr);
gap:4px 16px;
padding:9px 0;
}
.ai-fact+.ai-fact{
border-top:1px solid var(--s3);
}
.ai-fact dt{
color:var(--tx3);
}
.ai-fact dd{
margin:0;
min-width:0;
overflow-wrap:anywhere;
}
.ai-fact .n{
display:block;
margin-top:2px;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-fact.none dd{
color:var(--tx3);
}
.ai-badge{
display:inline-block;
margin-left:8px;
padding:1px 8px;
font-size:var(--fz6);
font-weight:var(--fw1);
line-height:1.6;
vertical-align:1px;
white-space:nowrap;
color:var(--tx2);
background:var(--s3);
border-radius:var(--br9);
}
.ai-badge.CONFLICTING{
color:var(--wn1);
background:var(--wn2);
}
.ai-more{
margin-top:6px;
}
.ai-more summary{
display:inline-flex;
align-items:center;
gap:8px;
min-height:40px;
font-weight:var(--fw1);
cursor:pointer;
list-style:none;
}
.ai-more summary::-webkit-details-marker{
display:none;
}
.ai-more summary::before{
content:'';
width:12px;
height:12px;
background:currentColor;
-webkit-mask:var(--arrow) center/contain no-repeat;
mask:var(--arrow) center/contain no-repeat;
}
.ai-more[open] summary::before{
transform:rotate(90deg);
}
.ai-sources{
margin:14px 0 0;
padding:0;
list-style:none;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-sources li{
overflow-wrap:anywhere;
}
.ai-sources li+li{
margin-top:4px;
}
.ai-links{
margin-top:16px;
}
.ai-list-items{
display:flex;
flex-direction:column;
margin:12px 0 0;
padding:0;
list-style:none;
}
.ai-item{
display:grid;
grid-template-columns:72px minmax(0,1fr) auto;
align-items:start;
gap:12px;
padding:10px 0;
}
.ai-item+.ai-item{
border-top:1px solid var(--s3);
}
.ai-item canvas{
width:72px;
height:72px;
border-radius:6px;
}
.ai-open{
display:block;
min-width:0;
padding:0;
text-align:left;
color:var(--tx1);
font-weight:var(--fw1);
overflow-wrap:anywhere;
cursor:pointer;
}
.ai-open:hover{
text-decoration:underline;
text-decoration-thickness:var(--ul);
text-underline-offset:3px;
}
.ai-chips{
display:flex;
flex-wrap:wrap;
gap:4px 12px;
margin:4px 0 0;
padding:0;
list-style:none;
font-size:var(--fz5);
color:var(--tx2);
}
.ai-reasons{
margin:4px 0 0;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-pick{
display:inline-flex;
align-items:center;
gap:6px;
min-height:36px;
font-size:var(--fz5);
color:var(--tx3);
cursor:pointer;
white-space:nowrap;
}
.ai-pick input{
width:18px;
height:18px;
margin:0;
accent-color:var(--cl1);
}
.ai-side{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
}
.ai-map{
display:inline-block;
margin-top:6px;
font-size:var(--fz5);
}
.ai-card-head{
display:flex;
align-items:flex-start;
gap:8px;
}
.ai-card-head>div{
flex:1;
min-width:0;
}
.ai-star{
display:inline-grid;
place-items:center;
flex:none;
width:44px;
height:44px;
margin:-8px -8px 0 0;
padding:0;
color:var(--cl1);
background:none;
border:0;
border-radius:50%;
cursor:pointer;
}
.ai-star:hover{
background:var(--s3);
}
.ai-star:disabled{
opacity:.55;
cursor:default;
}
.ai-star-icon{
width:24px;
height:24px;
fill:currentColor;
fill-opacity:0;
}
.ai-star:hover .ai-star-icon{
fill-opacity:.35;
}
.ai-star.on .ai-star-icon{
fill-opacity:1;
}
.ai-export{
display:contents;
}
.ai-export-note{
margin:8px 0 0;
color:var(--tx3);
}
.ai-item>.ai-pin-note{
grid-column:1/-1;
}
.ai-card>.ai-pin-note{
margin-top:12px;
}
.ai-locate .ai-row{
margin-top:12px;
}
.ai-locate .ai-small,.ai-locate .ai-msg.warn{
margin:8px 0 0;
}
.ai-locate .ai-small{
color:var(--tx3);
}
.ai-export-note[hidden],.ai-locate [hidden]{
display:none;
}
.ai-notes{
margin:12px 0 0;
padding:0 0 0 18px;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-notes li+li{
margin-top:4px;
}
.ai-foot-row{
margin-top:14px;
}
.ai-scroll{
max-width:100%;
overflow-x:auto;
margin-top:8px;
}
.ai-compare{
border-collapse:collapse;
min-width:100%;
font-size:var(--fz5);
}
.ai-compare th,.ai-compare td{
padding:8px 10px;
text-align:left;
vertical-align:top;
min-width:9em;
overflow-wrap:anywhere;
}
.ai-compare thead th{
font-size:var(--fz2);
font-weight:var(--fw1);
}
.ai-compare thead canvas{
width:100%;
max-width:180px;
aspect-ratio:3/2;
margin-bottom:6px;
border-radius:6px;
}
.ai-compare tbody th{
min-width:7em;
font-weight:500;
color:var(--tx3);
}
.ai-compare tbody tr+tr>*{
border-top:1px solid var(--s3);
}
.ai-compare .none{
color:var(--tx3);
}
.ai-compare .ai-sub{
display:block;
}
.ai-answer .ai-text p{
margin:10px 0 0;
overflow-wrap:anywhere;
}
.ai-answer ul.ai-points{
margin:10px 0 0;
padding:0 0 0 20px;
}
.ai-answer ul.ai-points li+li{
margin-top:4px;
}
.ai-running{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 16px;
}
.ai-running p{
margin:0;
flex:1 1 220px;
}
.ai-wait{
display:flex;
align-items:center;
gap:10px;
margin:0;
color:var(--tx3);
}
.ai-dots{
display:inline-flex;
gap:4px;
}
.ai-dots i{
width:7px;
height:7px;
border-radius:50%;
background:var(--cl1);
animation:ai-pulse 1.2s infinite ease-in-out;
}
.ai-dots i:nth-child(2){
animation-delay:.2s;
}
.ai-dots i:nth-child(3){
animation-delay:.4s;
}
@keyframes ai-pulse{
0%,80%,100%{
opacity:.25;
}
40%{
opacity:1;
}
}
.ai-signin{
margin:20px 0 0;
padding:20px;
background:var(--s1);
border-radius:var(--br4);
}
.ai-signin h2{
margin:0;
font-size:var(--fz1);
font-weight:var(--fw1);
}
.ai-signin p{
margin:8px 0 0;
color:var(--tx2);
}
.ai-providers{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
gap:10px;
margin-top:16px;
}
.ai-providers .btn{
gap:10px;
justify-content:flex-start;
padding:0 18px;
background:var(--s2);
}
.ai-providers .btn:hover{
background:var(--s3);
}
.ai-providers .btn[hidden]{
display:none;
}
.ai-small{
font-size:var(--fz5);
}
.ai-ask{
position:sticky;
bottom:0;
z-index:5;
display:block;
margin:20px 0 0;
padding:0 0 12px;
background:var(--bg1);
}
.ai-started .ai-ask{
margin-top:auto;
padding-top:16px;
}
.ai-started .ai-thread{
margin-bottom:8px;
}
.ai-ask textarea{
display:block;
width:100%;
min-height:56px;
max-height:min(40vh,240px);
margin:0;
padding:16px 100px 16px 22px;
font:inherit;
font-size:17px;
line-height:24px;
color:var(--tx1);
background:var(--s1);
border:0;
border-radius:28px;
outline:2px solid transparent;
overflow-y:auto;
}
.ai-ask textarea::placeholder{
color:var(--tx4);
}
.ai-ask textarea:focus{
outline-color:var(--cl1);
}
.ai-send{
position:absolute;
right:8px;
bottom:20px;
min-height:40px;
padding:0 20px;
font-weight:var(--fw1);
color:#fff;
background:var(--cl1);
border-radius:var(--br9);
}
.ai-send:hover{
background:var(--icf);
}
.ai-send:disabled{
opacity:.55;
cursor:default;
}
.ai-status{
min-height:0;
margin:0;
font-size:var(--fz5);
color:var(--tx3);
}
.ai-status:empty{
display:none;
}
.ai-examples{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin:16px 0 0;
padding:0;
list-style:none;
}
.ai-examples li{
min-width:0;
max-width:100%;
}
.ai-examples button{
min-height:40px;
max-width:100%;
padding:8px 16px;
font-size:var(--fz5);
line-height:1.35;
text-align:center;
color:var(--tx2);
background:var(--s1);
border-radius:var(--br9);
overflow-wrap:anywhere;
}
.ai-examples button:hover{
color:var(--tx1);
background:var(--s3);
}
.ai-foot{
margin:32px 0 0;
font-size:var(--fz6);
line-height:1.5;
text-align:center;
color:var(--tx3);
}
.ai-started .ai-foot{
margin-top:12px;
}
.ai-new{
align-self:center;
margin-top:16px;
}
.ai-new[hidden]{
display:none;
}
@container (max-width:520px){
.ai-fact{
grid-template-columns:minmax(0,1fr);
gap:2px;
}
.ai-item{
grid-template-columns:56px minmax(0,1fr);
}
.ai-item canvas{
width:56px;
height:56px;
}
.ai-item .ai-side{
grid-column:2;
flex-direction:row;
align-items:center;
gap:12px;
margin:-6px 0 0 -10px;
}
.ai-item .ai-star{
margin:0;
}
.ai-box{
padding:14px 12px;
}
.ai-ask textarea{
padding:14px 88px 14px 16px;
font-size:16px;
}
.ai-send{
right:6px;
bottom:20px;
padding:0 16px;
}
}
@container (max-width:300px){
.ai-item{
grid-template-columns:minmax(0,1fr);
}
.ai-item canvas{
width:100%;
height:auto;
aspect-ratio:2/1;
}
.ai-item .ai-side{
grid-column:1;
}
.ai-ask textarea{
padding-right:16px;
padding-bottom:58px;
}
.ai-send{
bottom:20px;
right:8px;
}
}
@media(prefers-reduced-motion:reduce){
.ai-dots i{
animation:none;
opacity:.7;
}
}
@media(forced-colors:active){
.ai-box,.ai-choice,.ai-ask textarea,.ai-signin{
border:1px solid CanvasText;
}
}