:root { color:#172033; background:#f4f7fb; font-family:"Segoe UI","Noto Sans","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; min-height:0; margin:0; overflow:hidden; }
button,input,select { font:inherit; accent-color:#1f6feb; }
[hidden] { display:none !important; }
.molecular-applet { display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; height:100vh; min-height:360px; }
.molecular-controls { position:relative; z-index:5; padding:8px; background:#fff; border-bottom:1px solid #d6dfeb; }
[data-applet-command-bar],[data-applet-command-left],[data-applet-command-center],[data-applet-command-right] { display:flex; align-items:flex-end; gap:10px; }
[data-applet-command-bar] { justify-content:space-between; }
[data-applet-command-center] { flex:1 1 700px; justify-content:center; min-width:0; }
[data-applet-command-right] { flex:0 0 auto; }
.gas-control { flex:1 1 250px; max-width:380px; }
.solid-lattice-control {
  flex:0 1 max-content;
  width:max-content;
  min-width:150px;
  max-width:min(230px,100%);
}
.diffusion-submode-control {
  flex: 0 1 210px;
  min-width: 180px;
  max-width: 240px;
}
.deformation-submode-control {
  flex:0 1 340px;
  min-width:180px;
  max-width:340px;
}
:root[data-applet-theme="site"] [data-applet-command-left] > .solid-lattice-control {
  flex:0 1 max-content !important;
  width:max-content !important;
  min-width:150px !important;
  max-width:230px !important;
}
.control { display:grid; gap:4px; min-width:150px; }
.control-title { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#334155; }
.control output { color:#172033; font-variant-numeric:tabular-nums; }
.control input[type="range"] { width:100%; }
.control select,.reset,.simulation-speed-selector button { min-height:34px; border:1px solid #c6d2e1; border-radius:6px; background:#fff; color:#172033; }
.control select { padding:5px 30px 5px 9px; }
.reset { padding:5px 12px; cursor:pointer; }
.reset:hover,.simulation-speed-selector button:hover { background:#eef3f9; }
.simulation-speed-selector { display:flex; gap:4px; }
.simulation-speed-selector button { min-width:36px; padding:4px 7px; cursor:pointer; }
.simulation-speed-selector button[aria-pressed="true"] { border-color:#1f6feb; background:#dce9ff; }
.molecular-stage { position:relative; min-height:0; overflow:hidden; display:grid; place-items:center; padding:clamp(14px,3vw,34px); background:#eef3f9; user-select:none; touch-action:none; }
.scene-wrap { position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; transform:translate(-50%,-50%); }
.gas-scene { width:min(100%,1100px); aspect-ratio:621/241; filter:drop-shadow(0 14px 24px rgb(38 58 82 / 14%)); }
.lj-scene { height:100%; min-height:0; max-width:none; width:100%; border:0; border-radius:10px; overflow:hidden; background:#eef3f9; cursor:grab; }
.solid-scene,.diffusion-scene,.brownian-scene,.deformation-scene { width:100%; height:100%; min-height:0; max-width:none; overflow:hidden; }
.lj-scene:active { cursor:grabbing; }
#gasCanvas,#vesselScene,#ljCanvas,#solidCanvas,#diffusionCanvas,#diffusionVesselScene,#brownianCanvas,#deformationCanvas { position:absolute; inset:0; width:100%; height:100%; }
#gasCanvas { z-index:1; }
#vesselScene { z-index:2; overflow:visible; }
.molecule-counters {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.molecule-counter {
  position:absolute;
  top:2.5%;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  min-width:64px;
  min-height:27px;
  padding:3px 9px;
  border:1px solid rgb(92 111 135 / 44%);
  border-radius:6px;
  background:rgb(247 250 253 / 90%);
  color:#243b57;
  box-shadow:0 3px 10px rgb(34 51 72 / 12%);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  pointer-events:auto;
  transform:translate(-50%,-50%);
  cursor:pointer;
}
.molecule-counter:first-child { left:16.6%; }
.molecule-counter:last-child { left:47.2%; }
.molecule-counter span { font-style:italic; font-weight:700; }
.molecule-counter .molecule-counter-equals { font-style:normal; font-weight:600; }
.molecule-counter sub { font-size:.7em; line-height:0; }
.molecule-counter strong { min-width:2ch; text-align:right; }
.molecule-counter:hover,
.molecule-counter:focus-visible,
.molecule-counter.is-applet-device-pinned {
  border-color:#4f79aa;
  background:rgb(231 240 250 / 96%);
  outline:none;
}
#ljCanvas { z-index:1; touch-action:none; }
#solidCanvas,#diffusionCanvas,#brownianCanvas,#deformationCanvas { z-index:1; touch-action:none; cursor:default; }
#deformationCanvas:focus-visible { outline:2px solid #2d6ea7; outline-offset:-4px; }
.deformation-readouts {
  position:absolute;
  z-index:3;
  top:18px;
  right:18px;
  display:flex;
  gap:8px;
  pointer-events:none;
}
.deformation-legend {
  position:absolute;
  z-index:3;
  left:18px;
  top:50%;
  display:grid;
  gap:7px;
  padding:8px 10px;
  border:1px solid rgb(92 111 135 / 34%);
  border-radius:6px;
  background:rgb(247 250 253 / 88%);
  color:#42556d;
  font-size:12px;
  transform:translateY(-50%);
  pointer-events:none;
}
.deformation-legend span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.deformation-legend i { display:block; width:27px; height:3px; border-radius:2px; background:#657386; }
.deformation-legend .is-tension { background:#cf464b; }
.deformation-legend .is-compression { background:#2f71b5; }
.deformation-reading {
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:4px 9px;
  border:1px solid rgb(92 111 135 / 44%);
  border-radius:6px;
  background:rgb(247 250 253 / 92%);
  color:#243b57;
  box-shadow:0 3px 10px rgb(34 51 72 / 12%);
  font-variant-numeric:tabular-nums;
  pointer-events:auto;
  cursor:pointer;
}
.deformation-reading > span:first-child { font-family:"Cambria Math","CMU Serif",serif; font-size:17px; font-style:italic; }
.deformation-reading strong { min-width:3ch; text-align:right; font-size:14px; }
.deformation-reading small { color:#52657c; font-size:12px; }
.deformation-reading:hover,
.deformation-reading:focus-visible,
.deformation-reading.is-applet-device-pinned {
  border-color:#4f79aa;
  background:rgb(231 240 250 / 97%);
  outline:none;
}
.deformation-hint { top:18px; }
@media (max-width:720px) {
  .deformation-legend { left:8px; padding:6px 7px; font-size:11px; }
  .deformation-legend i { width:20px; }
  .deformation-readouts { right:8px; }
}
@media (max-width:1050px) {
  .deformation-legend { top:70px; transform:none; }
}
#diffusionVesselScene { z-index:2; overflow:visible; pointer-events:none; }
.diffusion-vessel {
  fill:#94c3dd;
  fill-rule:evenodd;
  stroke:#000;
  stroke-width:1;
  stroke-miterlimit:10;
  pointer-events:none;
}
.diffusion-piston-group {
  cursor:ew-resize;
  outline:none;
  pointer-events:all;
  touch-action:none;
}
.diffusion-barrier-group {
  pointer-events:all;
  touch-action:none;
}
.diffusion-piston {
  fill:#ccc;
  stroke:#000;
  stroke-width:1;
  stroke-miterlimit:10;
}
.diffusion-piston-group:hover .diffusion-piston,
.diffusion-piston-group:focus .diffusion-piston {
  fill:#d7d7d7;
}
.diffusion-piston-group.dragging .diffusion-piston {
  fill:#dedede;
}
.species-a-range {
  --range-color: #3f82bd;
  --thumb-color: #28699f;
}
.species-b-range {
  --range-color: #cf6470;
  --thumb-color: #a94350;
}
.diffusion-species-a .control-title { color:#285f8e; }
.diffusion-species-b .control-title { color:#9b3f49; }
.vessel { fill:rgb(148 195 221 / 38%); stroke:#1c2732; stroke-width:1; stroke-miterlimit:10; }
.barrier-group { cursor:ns-resize; outline:none; }
.barrier-group:focus .barrier { stroke:#1f6feb; stroke-width:1.5; }
.barrier { fill:#db9f63; stroke:#111820; stroke-width:1; stroke-miterlimit:10; }
.barrier-hit { fill:transparent; pointer-events:all; }
.barrier-group.dragging .barrier { fill:#e6ad73; }
.piston-group { cursor:ew-resize; outline:none; }
.piston-group:focus .piston { stroke:#1f6feb; stroke-width:1.5; }
.piston { fill:#ccc; stroke:#111820; stroke-width:1; stroke-miterlimit:10; }
.piston-group.dragging .piston { fill:#d8d8d8; }
.piston-group.gap-blocked .piston { stroke:#b14b4b; stroke-width:1.4; }
.drag-hint,.lj-hint { position:absolute; z-index:3; left:50%; top:7%; transform:translateX(-50%); padding:6px 10px; color:#172033; background:rgb(255 255 255 / 90%); border:1px solid #d6dfeb; border-radius:999px; box-shadow:0 4px 16px rgb(23 32 51 / 10%); font-size:clamp(12px,1.5vw,15px); pointer-events:none; transition:opacity 180ms ease; white-space:nowrap; }
.lj-hint { top:16px; }
.drag-hint.hidden,.lj-hint.hidden { opacity:0; }
.solid-tool-picker { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; }
.solid-tool-picker button { min-height:34px; padding:6px 9px; border:1px solid #c6d2e1; border-radius:6px; background:#fff; color:#172033; cursor:pointer; }
.solid-tool-picker button:hover { background:#eef3f9; }
.solid-tool-picker button[aria-pressed="true"] { border-color:#1f6feb; background:#dce9ff; color:#164f9c; }

:root[data-applet-runtime="standalone"] [data-applet-control-panel-layer] { position:relative; z-index:20; }
:root[data-applet-runtime="standalone"] [data-applet-control-panel] { position:absolute; top:8px; right:8px; width:min(430px,calc(100vw - 16px)); max-height:min(70vh,560px); overflow:auto; padding:10px; border:1px solid #c6d2e1; border-radius:8px; background:rgb(255 255 255 / 94%); box-shadow:0 12px 32px rgb(23 32 51 / 16%); }
:root[data-applet-runtime="standalone"] [data-applet-control-panel-header] { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
:root[data-applet-runtime="standalone"] [data-applet-control-panel-header] h2 { margin:0; font-size:16px; }
:root[data-applet-runtime="standalone"] [data-applet-panel-close] { width:28px; height:28px; border:1px solid #c6d2e1; border-radius:6px; background:#fff; cursor:pointer; }
:root[data-applet-runtime="standalone"] [data-applet-panel-close]::before { content:"×"; }
:root[data-applet-runtime="standalone"] [data-applet-panel-body] { display:grid; gap:10px; }
:root[data-applet-runtime="standalone"] .check-row { display:flex; align-items:center; gap:8px; }

:root[data-applet-theme="site"],
:root[data-applet-theme="site"] body { height:100%; min-height:0; overflow:hidden; }
:root[data-applet-theme="site"] .molecular-applet { height:100%; min-height:0; grid-template-rows:auto minmax(0,1fr); }
:root[data-applet-theme="site"] .molecular-stage { height:auto; min-height:0; align-self:stretch; }
@media (max-width:1050px) {
  [data-applet-command-bar] { flex-wrap:wrap; }
  [data-applet-command-center] { order:3; width:100%; flex-basis:100%; }
}
@media (max-width:700px) {
  .molecular-stage { padding:8px; }
}
@media (max-width:520px) {
  [data-applet-command-right] { margin-left:auto; }
  .simulation-speed-selector button { min-width:31px; padding-inline:4px; }
}