html,body{margin:0;padding:0;background:#16181C;}
*{box-sizing:border-box;}

@keyframes mblink{0%,50%{opacity:1}50.01%,100%{opacity:.22}}
::selection{background:rgba(255,106,43,.35);color:#fff;}

a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px;}

/* ---- hover treatments (replace the prototype's style-hover attributes) ---- */
[data-navlink]:hover{color:var(--text);}
[data-ghost]:hover{border-color:var(--cyan);}
[data-lights-toggle]:hover{color:var(--text);border-color:var(--cyan);}
[data-chip]:not([aria-pressed="true"]):hover{border-color:var(--cyan);color:var(--text);}

/* ---- expandable build queue (Section 02) ----
   Open/closed is driven by a data-open attribute + CSS (NOT a JS inline
   transition on max-height, which gets interrupted on re-render). The reveal
   smoothness is a one-shot keyframe on the panel's inner content. */
[data-qrow]{border:none;border-top:1px solid var(--line);border-radius:0;background:transparent;transition:background .25s ease;}
[data-qrow]:hover{background:rgba(51,214,198,0.05);}
[data-qrow][data-open="true"]{background:rgba(51,214,198,0.07);}
[data-qrow][data-open="true"]:hover{background:rgba(51,214,198,0.1);}
[data-qrow]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
[data-qpanel]{overflow:hidden;max-height:0;}
[data-qpanel][data-open="true"]{max-height:2000px;}
[data-qpanel][data-open="true"] > div{animation:qpanelIn .42s cubic-bezier(.2,.7,.2,1) both;}
@keyframes qpanelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
[data-qchev]{color:var(--faint);transform:rotate(0deg);transition:transform .3s cubic-bezier(.2,.7,.2,1),color .25s ease;}
[data-qchev][data-open="true"]{color:var(--amber);transform:rotate(45deg);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}