html, body { margin:0; height:100%; overflow:hidden; background: radial-gradient(ellipse at center, #2b2d30 0%, #000 100%); }
h1 {
		  color: #ffff00;
		  font-family: 'Roboto', serif;
		  font-size: 50px;
		  font-weight: 900;
		  margin: 0;
		  padding-top: 20px;
		  text-align: center; 
		  text-shadow:
				-1px 1px 0 #ddd,
				-2px 2px 0 #c8c8c8,
				-3px 3px 0 #ccc,
				-4px 4px 0 #b8b8b8,
				-4px 4px 0 #bbb,
				0px 1px 1px rgba(0,0,0,.4),
				0px 2px 2px rgba(0,0,0,.3),
				-1px 3px 3px rgba(0,0,0,.2),
				-1px 5px 5px rgba(0,0,0,.1),
				-2px 8px 8px rgba(0,0,0,.1),
				-2px 13px 13px rgba(0,0,0,.1)
				;
		}
    #container{ position:fixed; inset:0; }
    #hud{
      position: fixed; top: 12px; left: 12px; z-index: 10;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(0,0,0,0.25);
      border-radius: 10px;
      padding: 12px 14px;
      font-family: Arial, sans-serif;
      width: 410px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }
    #hud h2{ margin:0 0 8px; font-size:16px; }
    .row{ display:flex; align-items:center; gap:10px; margin: 8px 0; }
    .row label{ width:110px; font-weight:700; }
    .row input[type="range"]{ flex:1; }
    .val{ width:62px; text-align:right; font-weight:700; font-variant-numeric: tabular-nums; }
    .state{
      margin-top: 8px; padding: 8px;
      background: #f3f6ff; border: 1px solid #d8e1ff; border-radius: 8px;
      font-size: 12px; line-height: 1.35;
    }
    .note{
      margin-top: 8px; padding: 8px;
      background:#fff7e6; border: 1px solid #ffe1a6; border-radius: 8px;
      font-size: 12px; line-height: 1.35;
    }
    .pill{
      display:inline-block; padding: 2px 8px; border-radius: 999px;
      font-weight: 700; font-size: 12px; margin-left: 6px;
      border: 1px solid rgba(0,0,0,0.15);
    }
    .pill.liquid{ background:#e9fff0; }
    .pill.ice{ background:#e9f2ff; }
    .small{ display:block; margin-top:6px; font-size:11px; color:rgba(0,0,0,0.65); }