:root{
  --green-700: #0e7c2f;
  --green-400: #2b6f31;
  --mint: #dff6e6;
  --white: #ffffff;
  --glass: rgba(255,255,255,0.85);
  --card-shadow: 0 8px 30px rgba(14,124,47,0.08);
  --radius: 14px;
  --max-width: 1200px;
  --accent: #06a86b;
}

*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{
  margin:0;background: linear-gradient(180deg, #f6fff6 0%, #ffffff 60%);
  color:var(--green-700);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

.tool-wrapper{
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(12,88,31,0.02), rgba(255,255,255,0.85));
  border-radius: 16px; padding:18px; box-shadow: var(--card-shadow);
}

.tool-header{ display:flex; align-items:flex-start; gap:16px; margin-bottom:12px; }
.tool-header h1{ margin:0; font-size:24px; color:var(--green-700); }
.subtitle{ margin:4px 0 0 0; color:#3f6b4c; font-size:13px; }

.controls-panel{
  display:grid; grid-template-columns: 1fr; gap:12px; padding:12px; margin-bottom:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.95));
  border-radius: 12px; border: 1px solid rgba(14,124,47,0.06);
}

.control-row{ display:flex; align-items:center; gap:12px; }
.control-row label{ width:220px; font-weight:600; color:#275a38; font-size:14px; }
.control-row input[type="range"]{ width:100%; appearance:none; height:6px; background:var(--mint); border-radius:8px; outline:none; }
.control-row input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--green-700); border:3px solid #e8fff0; box-shadow:0 2px 6px rgba(14,124,47,0.2); cursor:pointer; }
.btn-group{ display:flex; gap:8px; }
.lens-btn{ background:transparent; border:1px solid rgba(14,124,47,0.12); padding:8px 12px; border-radius:10px; cursor:pointer; color:var(--green-700); font-weight:600; }
.lens-btn.active{ background: linear-gradient(90deg,var(--green-700), var(--accent)); color:white; border-color: transparent; box-shadow: 0 6px 16px rgba(6,168,107,0.12); }

.outputs{ display:flex; gap:12px; justify-content:space-between; }
.output { background: rgba(11,96,27,0.04); padding:10px 12px; border-radius:10px; flex:1; text-align:center; }
.output .label{ font-size:12px; color:#2f5f3f; margin-bottom:6px; }
.output .value{ font-size:18px; font-weight:700; color:var(--green-700); }

.actions{ justify-content:flex-end; padding-top:4px; }
.reset{ background:white; border:2px solid var(--green-700); color:var(--green-700); padding:8px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
.reset:hover{ background:var(--green-700); color:white; }

.sim-panel{ display:grid; grid-template-columns: 1fr 320px; gap:18px; margin-top:12px; align-items:start; }
.svg-wrap{ background: linear-gradient(180deg,#ffffff,#f8fff8); border-radius:12px; padding:8px; border:1px solid rgba(14,124,47,0.06); box-shadow: 0 8px 24px rgba(6,168,107,0.04); }
svg{ width:100%; height:100%; min-height:360px; display:block; }

.explain{ background: rgba(14,124,47,0.03); padding:12px; border-radius:12px; color:#255938; }
.explain h2{ margin:0 0 8px 0; color:var(--green-700); font-size:16px; }
.explain p{ margin:0; font-size:13px; line-height:1.4; color:#2f5f3f; }

.tool-footer{ margin-top:12px; text-align:center; color:#396c4d; font-size:12px; }

@media (max-width:940px){
  .sim-panel{ grid-template-columns: 1fr; }
  .control-row label{ width:150px; }
}