/* ============================================================================
   MrChemCoach - experiment skin
   © Mr ChemCoach EdTech Pvt Ltd. All rights reserved.

   Loaded last on every experiment page. It gives the shared parts of a bench
   the website's look - fonts, the floating masthead, rounded panels, pill
   buttons, focus rings, scrollbars - without touching the apparatus itself.
   ========================================================================== */
:root{
  --mcc-pink:#ff3e7f; --mcc-violet:#8b5cf6; --mcc-aqua:#39e7c4;
  --mcc-void:#07090c; --mcc-surface:#0d1117; --mcc-surface-2:#121821;
  --mcc-line:rgba(255,255,255,.16);
  --mcc-display:'Sora',system-ui,sans-serif; --mcc-body:'Inter',system-ui,-apple-system,sans-serif; --mcc-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* -------------------------------------------------------------- type */
body{font-family:var(--mcc-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4,.mcc-mast-title{font-family:var(--mcc-display);letter-spacing:-.025em}
code,kbd,samp,pre{font-family:var(--mcc-mono)}
::selection{background:var(--mcc-pink);color:#fff}
:focus-visible{outline:2px solid var(--mcc-pink);outline-offset:3px}

/* -------------------------------------------------------------- masthead: September look, flat */
.mcc-mark-name{font-family:var(--mcc-display) !important;font-weight:700 !important;letter-spacing:-.04em}
.mcc-mast-title{font-weight:600 !important}
.mcc-mast-badge{font-family:var(--mcc-mono) !important}
.mcc-back{font-family:var(--mcc-display) !important;font-weight:600 !important}

/* -------------------------------------------------------------- panels and buttons */
.panel,.card,.glass,.info-card,.control-panel,.controls-panel,.sim-panel,.data-panel,.side-panel,.lab-panel{border-radius:14px}
.btn,.button,.ctrl-btn,.control-btn,.action-btn,.lab-btn{border-radius:10px}
input[type=range]{accent-color:var(--mcc-pink)}
input[type=checkbox],input[type=radio]{accent-color:var(--mcc-pink)}

/* -------------------------------------------------------------- scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px;border:2px solid transparent;background-clip:padding-box}

/* -------------------------------------------------------------- phones: nothing may push the page sideways */
@media (max-width:820px){
  html,body{overflow-x:hidden;max-width:100%}
  img,canvas,svg,video{max-width:100%}
}

/* -------------------------------------------------------------- per-bench phone fixes */
@media (max-width:640px){
  /* chlor-alkali: the cell drawing scales to the screen instead of spilling */
  .reaction-panel{max-width:100% !important;left:0 !important;right:0 !important}
  /* copper patina: the reaction chip wraps */
  .reaction-chip{max-width:100% !important;white-space:normal !important}
  /* states of matter: header badges wrap under the title */
  .igcse-badge{display:none !important}
  header .flex.items-center.gap-x-3{flex-wrap:wrap;row-gap:6px;min-width:0}
}

/* chlor-alkali equation panel and states-of-matter header on tablets and phones */
@media (max-width:1040px){
  .reaction-panel{width:auto !important;max-width:calc(100% - 20px) !important;margin-inline:auto !important;grid-template-columns:1fr !important;box-sizing:border-box}
}
@media (max-width:640px){
  header .flex.items-center.gap-x-3 > .px-4.py-1\.5{display:none !important}
}