/* vaporos-bar.css — the bar explorer in #bars.
 *
 * Two halves. `.qs-*` is the page chrome around it: the viewport, the stop
 * list, the captions. `.q-*` is the bar itself, drawn at the real bar's own
 * numbers (Theme.qml): a 40px bar, 36px pills hanging 4px from the top, 10px
 * radius, 20px JetBrainsMonoNL Nerd Font Propo, Catppuccin Mocha. It is laid
 * out on a 1920×1000 "screen" and the camera scales and pans that screen, so
 * every size below is in the bar's pixels, not the page's.
 *
 * Every animation is behind prefers-reduced-motion: no-preference. With less
 * motion asked for, the same states still apply, instantly.
 */
@font-face{font-family:"VaporBar";src:url("fonts/vaporos-bar.woff2") format("woff2");font-display:swap}

/* ------------------------------------------------------------- page chrome
 * Dressed like the rest of the page: the viewport is the focused window, the
 * module list is a workspace strip coloured by position, the write-ups are
 * the agent panel's cards. */
.qs{margin-top:8px}
.qs-view{display:none}
.qs-live .qs-view{display:block;position:relative;overflow:hidden;aspect-ratio:1920/1000;border:2px solid var(--mauve,#cba6f7);border-radius:12px;background:#11111b;box-shadow:0 24px 60px #000000a0,0 0 0 6px #cba6f714;touch-action:pan-y}
.qs-bar-controls{display:none}
.qs-live .qs-bar-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-top:12px}
.qs-status{flex:1 1 18rem;min-height:2.6em;font-size:.8rem;line-height:1.55;color:var(--text,#cdd6f4);margin:0;padding:8px 14px;border-radius:10px;background:#11111b99;box-shadow:inset 3px 0 0 var(--green,#a6e3a1),inset 0 0 0 1px #cdd6f414}
.qs-status b{color:var(--green,#a6e3a1);font-weight:700}
.qs-status code{color:var(--peach,#fab387)}
.qs-buttons{display:flex;gap:6px;flex-wrap:wrap}
.qs-buttons .button{min-width:44px}
.qs-stops{display:none}
.qs-live .qs-stops{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0;padding:4px;list-style:none;border-radius:12px;background:#1e1e2e6b;box-shadow:inset 0 0 0 1px #cdd6f412,0 2px 8px #11111b1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.qs-stops button{--slot:#cba6f7;display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:4px 12px;border:0;border-radius:8px;background:none;color:color-mix(in srgb,var(--slot) 80%,#1e1e2e);font-size:.8rem;line-height:1.3}
.qs-stops button i{font-style:normal;color:var(--slot)}
.qs-stops button:hover{background:#cdd6f41a}
.qs-stops button[aria-selected="true"]{background:var(--slot);color:#1e1e2e;box-shadow:inset 0 1px 0 #cdd6f480,inset 0 -1px 0 #11111b52}
.qs-stops button[aria-selected="true"] i{color:#1e1e2e}

/* The write-ups. Without JavaScript they are simply a list of cards, all of
 * them showing; with it, one at a time under the camera. */
.qs-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.qs-live .qs-panels{display:block;margin-top:14px}
.qs-live .qs-stop[hidden]{display:none}
.qs-stop{min-width:0;padding:20px 22px;border-radius:12px;background:#11111b99;box-shadow:inset 0 0 0 1px #cdd6f414,inset 0 2px 0 var(--slot,#cba6f7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.qs-live .qs-stop{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px 34px;align-items:start}
.qs-live .qs-stop>*{grid-column:1}
.qs-live .qs-stop>.binds{grid-column:2}
.qs-live .qs-stop>.binds{grid-row:1 / span 8}
.qs-stop h3{font-size:1.2rem;letter-spacing:-.03em;margin:4px 0 10px;color:var(--slot,#cba6f7)}
.qs-stop p{font-size:.88rem;margin-bottom:10px}
.qs-stop .number{display:block;margin:0;font-size:.7rem;letter-spacing:.04em;color:var(--overlay1,#7f849c)}
.binds{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0;font-size:.8rem;border-radius:10px;overflow:hidden;background:#1e1e2e99;box-shadow:inset 0 0 0 1px #cdd6f414}
.binds dt,.binds dd{margin:0;padding:8px 12px;border-bottom:1px solid #cdd6f40f}
.binds dt{font-size:.7rem;line-height:1.9;letter-spacing:.04em;text-transform:uppercase;color:var(--peach,#fab387);white-space:nowrap}
.binds dd{color:var(--subtext0,#a6adc8)}
.binds dt:last-of-type,.binds dd:last-of-type{border-bottom:0}
.src{font-size:.78rem;line-height:1.65;color:var(--subtext0,#a6adc8);margin-top:12px;padding:10px 12px;border-radius:10px;background:#1e1e2e80;box-shadow:inset 3px 0 0 var(--slot,#cba6f7)}
.src code{color:var(--pink,#f5c2e7)}
.states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 12px;padding:0;list-style:none;font-size:.8rem}
.states li{border-radius:10px;padding:8px 10px;color:var(--subtext0,#a6adc8);background:#1e1e2e80;box-shadow:inset 0 0 0 1px #cdd6f414}
.states b{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;display:block}

/* ------------------------------------------------- outputs diagram (stop 11) */
.outs{position:relative;display:grid;grid-template-columns:.62fr 1fr;grid-template-rows:auto auto;gap:8px;margin:6px 0 12px;max-width:520px}
.outs .mon{position:relative;border:2px solid #45475a;border-radius:7px;background:linear-gradient(160deg,#241f38,#11111b);aspect-ratio:16/9;overflow:hidden}
.outs .mon.dp2{grid-column:1;grid-row:2;aspect-ratio:4/3;align-self:start}
.outs .mon.dp3{grid-column:2;grid-row:1}
.outs .mon.dp1{grid-column:2;grid-row:2}
.outs .mon>span{position:absolute;bottom:4px;right:6px;font:600 .6rem ui-monospace,monospace;color:#9399b2}
.outs .row{position:absolute;inset:4px 4px auto;height:9px;display:flex;gap:2px}
.outs .row i{display:block;height:9px;border-radius:2px;background:#cdd6f440;flex:0 0 auto}
.outs .row .l{width:18%;background:#cba6f7a0}
.outs .row .d{width:9%;background:#a6e3a1a0}
.outs .row .g{flex:1;background:none}
.outs .row .r{width:26%;background:#89b4fac0}
.outs .row .c{width:12%;background:#f9e2afa0}
.outs .row .u{width:6%;background:#74c7eca0}
.outs .row .m{width:10%;background:#f5c2e7a0}
.outs .row .n{width:4%;background:#fab387a0}
.outs .full{position:absolute;inset:0;background:#313244;display:grid;place-items:center;font:600 .6rem ui-monospace,monospace;color:#cdd6f4;opacity:0}
.outs .dp3 .r{width:0;opacity:0}
.outs.fs .dp1 .full{opacity:1}
.outs.fs .dp1 .row{opacity:0}
.outs.fs .dp3 .r{width:26%;opacity:1}
@media(prefers-reduced-motion:no-preference){
  .outs .row,.outs .full{transition:opacity .5s ease}
  .outs .dp3 .r{transition:width .6s cubic-bezier(.2,.8,.25,1) .2s,opacity .4s .2s}
}
.outs-toggle{margin-bottom:10px}

@media(max-width:1000px){
  .qs-panels{grid-template-columns:1fr}
  .qs-live .qs-stop{grid-template-columns:1fr}
  .qs-live .qs-stop>.binds{grid-column:1}
  .qs-live .qs-stop>.binds{grid-row:auto}
}
@media(max-width:700px){
  .qs-live .qs-view{aspect-ratio:4/3;box-shadow:0 12px 30px #000000a0}
  .qs-stop{padding:16px}
  .states{grid-template-columns:1fr}
}

/* ================================================================ the bar */
.q-world{position:absolute;left:0;top:0;width:1920px;height:1000px;transform-origin:0 0;font:20px/1 "VaporBar",ui-monospace,monospace;color:#cdd6f4;-webkit-font-smoothing:antialiased;user-select:none;overflow:hidden}
.q-wall{position:absolute;inset:0;background:
  radial-gradient(40% 55% at 18% 22%,#cba6f75c,transparent 70%),
  radial-gradient(35% 45% at 82% 18%,#74c7ec4a,transparent 70%),
  radial-gradient(45% 60% at 70% 85%,#94e2d53d,transparent 70%),
  radial-gradient(30% 40% at 30% 90%,#f5c2e738,transparent 70%),
  linear-gradient(160deg,#27213d,#141421 60%,#11111b)}
.q-wall::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff05 0 2px,transparent 2px 9px)}

/* ----- windows */
.q-desk{position:absolute;left:10px;right:10px;top:50px;bottom:10px}
.q-win{position:absolute;border-radius:10px;border:2px solid #45475a;background:#1e1e2ef0;box-shadow:0 10px 30px #0000008a;overflow:hidden}
.q-win.focus{border-color:var(--wc,#cba6f7)}
.q-win header{display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;background:#181825;font-size:15px;color:#a6adc8;white-space:nowrap;overflow:hidden}
.q-win header b{font-weight:400;color:var(--wc,#cba6f7);font-size:18px}
.q-win .ln{display:block;height:9px;margin:16px 18px 0;border-radius:5px;background:#cdd6f41a}
.q-win .ln:nth-child(3n){width:62%}
.q-win .ln:nth-child(3n+1){width:80%}
.q-win .ln.hi{background:color-mix(in srgb,var(--wc,#cba6f7) 45%,transparent);width:34%}

/* ----- the bar layer */
.q-bar{position:absolute;left:0;top:0;width:1920px;height:40px}
.q-row{position:absolute;top:4px;display:flex;gap:10px;align-items:flex-start}
.q-left{left:3px}
.q-right{right:3px}
.q-title{position:absolute;top:4px;left:50%;transform:translateX(-50%);max-width:520px}

/* Pill.qml. Flat: base at 90%. Glass: 42% substrate the compositor blurs, a
 * vertical gradient, specular top hairline, dark bottom hairline, a 1px ring
 * and a soft shadow. */
.q-p{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:10px;background:#1e1e2ee6;white-space:nowrap;color:#cdd6f4}
.q-p.pad10{padding:0 10px}
.q-p.nopad{padding:0}
.q-p::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.glass .q-p{background:#1e1e2e6b;box-shadow:0 2px 8px #11111b1f,inset 0 0 0 1px #cdd6f412;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
.glass .q-p::before{opacity:1;background:linear-gradient(#cdd6f421 0,#11111b1a 42%,#11111b4d 100%);box-shadow:inset 0 1px 0 #cdd6f433,inset 0 -1px 0 #11111b4d}
.q-p>*{position:relative}
.q-p.hover,.q-hov:hover{background-image:linear-gradient(#cdd6f41a,#cdd6f41a)}
.glass .q-p.hover,.glass .q-hov:hover{background-image:linear-gradient(#cdd6f41a,#cdd6f405)}
.q-seam{box-shadow:inset 1px 0 0 #cdd6f424}
.q-sub{display:flex;align-items:center;height:36px;padding:0 8px;position:relative}
.q-sub.pad10{padding:0 10px}
.q-sub.lit{background:#45475a}

/* ----- workspaces */
.q-ws{padding:0;overflow:hidden}
.q-ws .q-tabs{display:flex;position:relative}
.q-tab{--slot:#cba6f7;position:relative;display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;color:var(--slot);cursor:default}
.q-tab .lbl{color:color-mix(in srgb,var(--slot) 75%,#1e1e2e)}
.q-tab.hover{background:#cdd6f41a}
.q-tab.vis{background:#cdd6f40f}
.q-tab.vis::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--slot)}
.q-tab.active{background:var(--slot);color:#1e1e2e}
.q-tab.active .lbl{color:color-mix(in srgb,#1e1e2e 75%,var(--slot))}
.glass .q-tab.active{box-shadow:inset 0 1px 0 #cdd6f480,inset 0 -1px 0 #11111b52,inset 0 0 0 1px #cdd6f41a}
.q-tab.urgent{background:#f38ba8;color:#1e1e2e}
.q-tab.drag{opacity:.4}
.q-tab.ins-l::before,.q-tab.ins-r::before{content:"";position:absolute;top:0;bottom:0;width:3px;background:#b4befe}
.q-tab.ins-l::before{left:0}
.q-tab.ins-r::before{right:0}
.q-tab.swap{box-shadow:inset 0 0 0 2px var(--slot)}
.q-tab .glow{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--slot) 30%,var(--slot) 70%,transparent);opacity:0}
.q-tab.att .glow{opacity:.75}
.q-tab .ic{display:inline-flex;gap:12px}
.q-tab .field{display:inline-block;min-width:100px;height:26px;line-height:26px;border-bottom:1px solid currentColor;color:inherit}
.q-tab .field::after{content:"";display:inline-block;width:2px;height:20px;margin-left:1px;vertical-align:-3px;background:currentColor}
.q-tab .field.sel{background:color-mix(in srgb,currentColor 30%,transparent)}
.q-ghost{position:absolute;top:0;height:36px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:10px;opacity:.9;pointer-events:none;box-shadow:0 8px 20px #0008;z-index:5}

/* ----- agent badges (AgentBadge.qml) */
.q-badge{display:inline-block;font-size:16px;line-height:1;color:var(--hue);transform-origin:50% 55%}
.q-badge[data-mode="working"]{--hue:#fab387}
.q-badge[data-mode="input"]{--hue:#a6e3a1}
.q-badge[data-mode="choice"]{--hue:#f38ba8}
.q-badge[data-mode="idle"]{--hue:#7f849c;opacity:.45}
.q-tab.active .q-badge,.q-badge.onlight{color:inherit;opacity:1}
.frozen .q-badge{--hue:#6c7086 !important;animation:none !important;opacity:.5}

/* ----- DEV group */
.q-dev{color:#a6e3a1}
.q-pin{display:inline-block;transform:rotate(40deg);margin-left:6px;width:0;overflow:hidden;opacity:0}
.q-pin.on{width:16px;opacity:1}
.q-agentbtn{gap:6px}
.q-agentbtn .n{font-size:20px}
.q-track{position:relative;width:34px;height:17px;border-radius:9px;background:#cdd6f429}
.q-knob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#a6adc8}
.q-kill[data-pos="half"] .q-track{background:#fab387}
.q-kill[data-pos="half"] .q-knob{left:10.5px;background:#1e1e2e}
.q-kill[data-pos="on"] .q-track{background:#f38ba8}
.q-kill[data-pos="on"] .q-knob{left:19px;background:#1e1e2e}
.q-arm{position:absolute;left:4px;right:4px;bottom:3px;height:2px;border-radius:1px;background:#fab387;transform-origin:left;transform:scaleX(0)}

/* ----- DEV strip */
.q-devrow{position:absolute;left:0;top:40px;width:1920px;height:40px;transform:translateY(-110%);opacity:0;pointer-events:none}
.q-devrow.float,.q-devrow.docked{transform:none;opacity:1}
.q-devrow .q-row{top:4px}

/* ----- title, right cluster */
.q-titlep{color:#cdd6f4;font-size:18px;overflow:hidden;text-overflow:ellipsis;max-width:520px;display:block;line-height:36px}
.q-dim{color:#7f849c}
.q-tray{gap:14px;padding:0 12px}
.q-tray span{font-size:19px;color:#bac2de}
.q-tray span.on{color:#f9e2af}
.q-reveal{display:flex;align-items:center;overflow:hidden}
.q-reveal .val{display:inline-block;max-width:0;opacity:0;overflow:hidden;margin-left:0}
.q-reveal.open .val{max-width:120px;opacity:1;margin-left:6px}
.q-night{color:#74c7ec}
.q-night.warm{color:#f9e2af}
.q-mouse{color:#bac2de;gap:0}
.q-mouse .bat{margin-left:6px}
.q-vol{min-width:62px;justify-content:center}
.q-sink{color:#7f849c;justify-content:center;min-width:40px}
.q-sink.missing{opacity:.35;color:#6c7086}
.q-sink.active[data-k="schiit"]{color:#a6e3a1}
.q-sink.active[data-k="roland"]{color:#f9e2af}
.q-sink.active[data-k="beats"]{color:#f38ba8}
.q-audio{overflow:visible}
.q-audio .q-sub:last-child{border-radius:0 10px 10px 0}
.q-audio .q-sub:first-child{border-radius:10px 0 0 10px}
.q-upd{color:#74c7ec}
.q-upd.risk{color:#f38ba8}
.q-upd.clean{color:#7f849c}
.q-notif{color:#fab387}
.q-notif.dnd{color:#6c7086}
.q-lock{color:#7f849c}
.q-lock.open{color:#f9e2af;border-bottom-left-radius:0;border-bottom-right-radius:0}
.q-scratch{color:#7f849c}
.q-scratch.active{color:#fab387}
.q-scratch.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#fab387;border-radius:0 0 10px 10px}
.q-add{color:var(--slot,#fab387);padding:0 8px}

/* ----- popups: tooltip, menus, panels */
.q-pop{position:absolute;opacity:0;visibility:hidden;pointer-events:none;border-radius:10px;background:#1e1e2ed9;box-shadow:0 10px 30px #0000007a,inset 0 0 0 1px #cdd6f41f;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(-6px);font-size:15px;color:#cdd6f4}
.q-pop.open{opacity:1;visibility:visible;transform:none}
.q-tip{padding:9px 12px;font-size:13px;line-height:1.55;white-space:pre;z-index:9}
.q-tip b{font-weight:400;color:#cba6f7}

.q-panel{width:340px;padding:8px;display:grid;gap:8px}
.q-card{border-radius:10px;background:#11111b8c;box-shadow:inset 0 0 0 1px #cdd6f414;padding:6px 0}
.q-card h4{display:flex;justify-content:space-between;align-items:center;margin:0;padding:4px 12px 6px;font:400 12px/1.4 "VaporBar",monospace;color:#bac2de;letter-spacing:.06em;text-transform:uppercase}
.q-card h4 em{font-style:normal;font-size:9px;color:#a6adc8}
.q-card h4 em.stale{color:#fab387}
.q-sess{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:0 8px;padding:5px 12px;font-size:15px}
.q-sess.hl{background:#cdd6f41a}
.q-sess small{font-size:11px;color:#bac2de}
.q-sess .ctx{grid-column:2 / 4;height:3px;border-radius:2px;background:#cdd6f414;margin-top:5px;position:relative;overflow:hidden}
.q-sess .ctx i{position:absolute;left:0;top:0;bottom:0;background:var(--slot)}
.q-meter{padding:4px 12px 6px}
.q-meter .top{display:flex;justify-content:space-between;font-size:11px;color:#bac2de}
.q-meter .top b{font-weight:400;color:var(--acc)}
.q-meter .cells{display:grid;grid-template-columns:repeat(20,1fr);font-size:14px;line-height:20px;color:color-mix(in srgb,var(--acc) 45%,transparent);text-align:center}
.q-meter .cells i{font-style:normal}
.q-meter .cells i.f{color:var(--acc)}
.q-meter .rs{font-size:10px;color:#bac2de}
.q-card.stale .q-meter{opacity:.55}
.q-model{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:4px 12px;font-size:14px}
.q-model small{font-size:11px;color:#a6adc8}
.q-model .stop{grid-row:1 / span 2;grid-column:2;font-size:12px;border-radius:7px;padding:5px 9px;box-shadow:inset 0 0 0 1px #f38ba866;color:#f38ba8}
.q-launch{display:flex;gap:8px;padding:2px 8px}
.q-launch span{flex:1;text-align:center;border-radius:8px;padding:7px 0;font-size:13px;background:#cdd6f40f;color:#bac2de}
.q-launch span b{font-weight:400;color:var(--acc)}

.q-column{position:absolute;left:0;top:80px;bottom:0;width:360px;padding:10px 10px 10px 10px;transform:translateX(-105%);opacity:0}
.q-column.open{transform:none;opacity:1}
.q-column .q-panel{width:auto;height:100%;align-content:start;border-radius:10px;background:#1e1e2ed9;backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px #cdd6f41f}

.q-updpanel{width:470px;padding:12px 0;font-size:14px}
.q-updpanel h5{margin:0;padding:0 16px 10px;font:400 15px "VaporBar",monospace;color:#74c7ec}
.q-news{margin:0 12px 10px;padding:8px 10px;border-radius:8px;background:#f38ba81f;box-shadow:inset 0 0 0 1px #f38ba855;color:#f5e0dc;font-size:13px;line-height:1.5}
.q-news b{font-weight:400;color:#f38ba8}
.q-pkg{display:grid;grid-template-columns:18px 1fr auto;gap:8px;padding:4px 16px;color:#bac2de;font-size:13px}
.q-pkg i{font-style:normal;color:#f38ba8}
.q-pkg em{font-style:normal;color:#7f849c}
.q-pkg.risk{background:#f38ba814;color:#f5e0dc}
.q-feed{position:absolute;font:13px/1.6 "VaporBar",monospace;color:#a6adc8;padding:10px 14px;white-space:pre}
.q-feed b{font-weight:400;color:#a6e3a1}
.q-feed em{font-style:normal;color:#fab387}

.q-menu{width:250px;padding:6px 0;font-size:14px;background:#1e1e2ef2}
.q-menu div{display:flex;align-items:center;gap:10px;padding:7px 14px;color:#cdd6f4}
.q-menu div.sep{height:1px;padding:0;margin:5px 10px;background:#cdd6f41f}
.q-menu div.hl{background:#cdd6f41a}
.q-menu div .gl{width:16px;color:#a6adc8}
.q-menu div .ch{margin-left:auto;color:#7f849c}
.q-menu div.dis{color:#6c7086}

.q-drawer{border-radius:0 0 10px 10px;overflow:hidden;background:#1e1e2e6b;backdrop-filter:blur(10px);box-shadow:inset 0 -1px 0 #11111b4d,inset 1px 0 0 #cdd6f412,inset -1px 0 0 #cdd6f412;transform:none;height:0;padding:0;display:grid}
.q-drawer.open{height:90px}
.q-drawer div{display:grid;place-items:center;height:45px;color:#7f849c;font-size:19px}
.q-drawer div.armed{color:#f38ba8}
.q-drawer div.hl{background:#cdd6f41a}

/* ----- fullscreen: the bar steps aside */
.q-world.fs .q-bar,.q-world.fs .q-devrow{opacity:0}
.q-world.fs .q-win{border-radius:0;border-width:0}

/* ----- the pointer */
.q-cur{position:absolute;left:960px;top:500px;width:26px;height:30px;z-index:20;pointer-events:none;transform-origin:0 0;opacity:0}
.q-cur.on{opacity:1}
.q-cur svg{display:block;filter:drop-shadow(0 2px 3px #000a)}
.q-cur .fx{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid #a7f3d6;opacity:0}
.q-cur .fx.r{border-color:#f296bc}
.q-cur .tag{position:absolute;left:24px;top:24px;padding:2px 7px;border-radius:6px;background:#11111bd9;color:#a7f3d6;font:600 12px ui-monospace,monospace;white-space:nowrap;opacity:0}
.q-cur .tag.on{opacity:1}

/* ================================================================ motion */
@media(prefers-reduced-motion:no-preference){
  .q-world{transition:transform 1s cubic-bezier(.65,0,.25,1)}
  .q-world.snap{transition:none}
  .q-win{transition:left .5s cubic-bezier(.2,.8,.25,1),top .5s cubic-bezier(.2,.8,.25,1),width .5s cubic-bezier(.2,.8,.25,1),height .5s cubic-bezier(.2,.8,.25,1),opacity .35s,border-color .3s}
  .q-bar{transition:opacity .3s}
  .q-desk{transition:top .35s cubic-bezier(.2,.8,.25,1),left .35s cubic-bezier(.2,.8,.25,1)}
  .q-tab{transition:background-color .2s,color .2s,opacity .2s}
  .q-tabs.flip .q-tab{transition:transform .35s cubic-bezier(.2,.8,.25,1),background-color .2s,color .2s}
  .q-p,.q-sub{transition:background-color .25s,color .25s,backdrop-filter .4s}
  .q-p::before{transition:opacity .4s}
  .q-track,.q-knob{transition:left .16s cubic-bezier(.33,1,.68,1),background-color .16s}
  .q-arm{transition:transform 10s linear}
  .q-arm.go{transform:scaleX(1)}
  .q-reveal .val{transition:max-width .16s cubic-bezier(.33,1,.68,1),opacity .16s,margin-left .16s}
  .q-pin{transition:width .2s,opacity .2s}
  .q-devrow{transition:transform .22s cubic-bezier(.2,.8,.25,1),opacity .18s}
  .q-column{transition:transform .35s cubic-bezier(.2,.8,.25,1),opacity .25s}
  .q-pop{transition:opacity .18s,transform .18s,visibility 0s linear .18s}
  .q-pop.open{transition:opacity .18s,transform .18s}
  .q-drawer{transition:height .2s cubic-bezier(.33,1,.68,1)}
  .q-cur{transition:left .6s cubic-bezier(.45,0,.2,1),top .6s cubic-bezier(.45,0,.2,1),opacity .3s}
  .q-cur .fx.go{animation:q-ripple .45s ease-out}
  .q-cur .tag{transition:opacity .2s}
  .q-sess .ctx i{transition:width .8s ease}
  .q-meter .cells i{transition:color .2s}

  /* AgentBadge: stepped at 8 fps, the way the QML ticks a Timer at 125 ms */
  .q-badge[data-mode="working"][data-spin]{animation:q-spin 1s steps(8) infinite}
  .q-badge[data-mode="working"]:not([data-spin]){animation:q-bob 1s steps(8,jump-none) infinite}
  .q-badge[data-mode="choice"]{animation:q-blink .5s steps(1) infinite}
  .q-badge[data-mode="input"]{animation:q-breathe 9s ease-in-out infinite}

  /* The attention light: 4.5 s low, 2.6 s normal, 0.9 s critical */
  .q-tab.att .glow{animation:q-glow var(--period,2.6s) ease-in-out infinite}
  .q-charging .bat{animation:none}
}
@keyframes q-spin{to{transform:rotate(360deg)}}
@keyframes q-bob{0%{transform:translateY(0)}14%{transform:translateY(-1px)}28%{transform:translateY(-2px)}42%,57%{transform:translateY(-3px)}71%{transform:translateY(-2px)}85%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes q-blink{0%{opacity:1}50%{opacity:.18}}
@keyframes q-breathe{0%,14%{opacity:1}7%{opacity:.35}}
@keyframes q-glow{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes q-ripple{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}