/* Ideal Gas Law applet — P = nRT/V
   Styles scoped to #gas-app so they won't collide with existing Bootstrap classes. */

  #gas-app, #gas-app * { box-sizing: border-box; }
  #gas-app {
    background: #0B1120;
    padding: 24px;
    border-radius: 20px;
    font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
  }
  #gas-app .eyebrow {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: #7C8AA5; font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase;
  }
  #gas-app h1 { color: #E8ECF4; font-size: 1.6rem; font-weight: 700; margin: 4px 0 6px; letter-spacing: -0.01em; }
  #gas-app p.intro { color: #8291AC; font-size: 1.5rem; max-width: 640px; line-height: 1.5; margin: 0 0 18px; }
  #gas-app .gas-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @media (min-width: 900px) { #gas-app .gas-grid { grid-template-columns: 3fr 2fr; } }
  #gas-canvas-wrap { position: relative; }
  #gas-canvas-wrap canvas { display:block; border-radius: 16px; }
  #gas-canvas-mount {
    width: 100%; height: 420px; border-radius: 16px; overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #16233c 0%, #0B1120 75%);
    border: 1px solid rgba(143,217,224,0.15); cursor: grab;
  }
  #gas-legend { position:absolute; bottom:14px; left:14px; display:flex; gap:10px; align-items:center; }
  #gas-legend span { font-family: ui-monospace, monospace; font-size: 1.5rem; color:#7C8AA5; }
  #gas-legend .swatch { width:70px; height:6px; border-radius:3px; background: linear-gradient(90deg,#4C8DFF,#FF5A36); }
  .gas-panel { background:#121B2E; border:1px solid rgba(143,217,224,0.12); border-radius:14px; padding:18px; }
  .gas-panel + .gas-panel { margin-top: 20px; }
  .gas-side { display:flex; flex-direction:column; }
  .gas-row + .gas-row { margin-top: 18px; }
  .gas-row-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
  .gas-row-head .label { color:#E8ECF4; font-size:1.25rem; font-weight:600; letter-spacing:0.01em; }
  .gas-row-head .value { font-family: ui-monospace, monospace; font-size:1.25rem; }
  .gas-row input[type=range] { width:100%; height:4px; }
  .gas-sub { font-family: ui-monospace, monospace; color:#7C8AA5; font-size:1.25rem; margin-top:3px; }
  .gas-panel-title { color:#E8ECF4; font-size:1.25rem; font-weight:600; margin-bottom:60px; }
  .gas-tubes { display:flex; gap:18px; align-items:flex-end; height:150px; }
  .gas-tube-col { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
  .gas-tube { width:34px; height:110px; border-radius:10px; border:1px solid rgba(245,197,24,0.35);
    background: rgba(245,197,24,0.06); position:relative; overflow:hidden; display:flex; align-items:flex-end; }
  .gas-tube-fill { width:100%; height:0%; transition: height 60ms linear; }
  .gas-tube-fill.measured { background: linear-gradient(180deg, #FFD75E, #F5C518); }
  .gas-tube-fill.average { background: linear-gradient(180deg, #FFB84D, #E8940F); }
  .gas-tube-fill.predicted { background: linear-gradient(180deg, #FFE9A8, rgba(245,197,24,0.7)); }
  .gas-tube-label { font-family: ui-monospace, monospace; font-size:1.2rem; color:#8291AC; text-align:center; }
  .gas-tube-value { font-family: ui-monospace, monospace; font-size:1.4rem; color:#F5C518; }
  .gas-note { font-family: "Segoe UI", sans-serif; color:#7C8AA5; font-size:1rem; margin-top:12px; line-height:1.5; }
  .gas-footnote { font-family: ui-monospace, monospace; color:#7C8AA5; font-size:1.25rem; margin-top:18px; }