.gu-chat{display:grid;gap:.75rem}
.gu-user{justify-self:end;max-width:85%;margin:0;padding:.45rem .7rem;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.gu-panel{display:grid;gap:.75rem;min-width:0}
.gu-sub{margin-bottom:0}
.gu-step{display:grid;gap:.35rem;min-width:0}
.gu-step>span{color:var(--muted);font-size:.9em}
.gu-step pre{margin:0;padding:.5rem .6rem;overflow:auto;border:1px solid var(--rule);font-size:.85em;line-height:1.45}
.gu-step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gu-short{max-height:9.5rem}
.gu-spec{max-height:12rem}
.gu-card{border:1px solid var(--fg)}
.gu-flight{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .7rem}
.gu-flight+.gu-flight,.gu-col>*+.gu-flight{border-top:1px solid var(--rule)}
.gu-flight div{display:grid;min-width:0}
.gu-flight span{color:var(--muted);font-size:.9em}
.gu-flight strong{font-variant-numeric:tabular-nums}
.gu-col{display:grid}
.gu-text{margin:0;padding:.55rem .7rem 0}
.gu-text.is-head{padding-bottom:.45rem;font-weight:600}
.gu-fallback{padding:.55rem .7rem;border-top:1px dashed var(--rule);color:var(--muted)}
.gu-btn{justify-self:start;margin:.55rem .7rem .7rem;min-height:2rem;padding:.2rem .7rem;border:1px solid var(--fg);border-radius:0;background:none;color:inherit;font:inherit;cursor:pointer}
.demo .gu-cat{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.demo .gu-cat li{margin:0;padding:.1rem .5rem;border:1px solid var(--rule);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}
.gu-frame{display:block;width:100%;height:220px;border:0;background:transparent;color-scheme:normal}
.gu-confirm{padding:.6rem .7rem;border:1px solid var(--fg);background:var(--bg)}
.gu-confirm p{margin:0 0 .5rem}
.gu-confirm div{display:flex;gap:.35rem}
.gu-confirm[hidden]{display:none}
.demo .gu-log{margin:0;padding:0;list-style:none;border:1px solid var(--rule);font-size:.85em}
.gu-log li{display:flex;gap:.6rem;margin:0;padding:.25rem .6rem}
.gu-log li+li{border-top:1px solid var(--rule)}
.gu-log span{flex:none;width:6.5em;color:var(--muted)}
.gu-log code{min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gu-slider{display:grid;grid-template-columns:auto minmax(0,1fr) 1.5em;align-items:center;gap:.6rem;margin-bottom:.9rem}
.gu-slider span{color:var(--muted)}
.gu-slider input{width:100%;margin:0;accent-color:var(--fg)}
.gu-slider output{text-align:right;font-variant-numeric:tabular-nums}
.gu-grid{display:grid;border:1px solid var(--rule)}
.gu-grid [role=row]{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));align-items:center}
.gu-grid [role=row]+[role=row]{border-top:1px solid var(--rule)}
.gu-grid [role=row]>span{padding:.45rem .6rem}
.gu-grid-head span{color:var(--muted);font-size:.9em}
.gu-grid-head span+span,.gu-grid [role=cell]{text-align:center}
.gu-grid [role=cell] i{display:inline-block;width:10px;height:10px;border:1px solid color-mix(in srgb,var(--muted) 55%,transparent);border-radius:50%;transition:background-color 160ms ease-out,border-color 160ms ease-out,transform 160ms ease-out;transform:scale(.8)}
.gu-grid [role=cell].on i{background:var(--redline);border-color:var(--redline);transform:scale(1.2)}
.gu-still .gu-grid [role=cell] i{transition:none}
@media (max-width:480px){.gu-grid [role=row]>span{padding:.4rem .35rem;font-size:.9em}.gu-log span{width:5.5em}}