/* nothing fancy, just wanted it readable */
body { font-family: Arial, Helvetica, sans-serif; background: #f4f4ef; color: #222; margin: 0; }
#wrap { max-width: 1100px; margin: 0 auto; padding: 12px 16px 30px; }
h1 { margin: 10px 0 2px; color: #1d5c2e; }
h2 { font-size: 1.2em; border-bottom: 2px solid #1d5c2e; padding-bottom: 3px; }
.sub { margin-top: 0; color: #555; }
#main { display: flex; gap: 18px; flex-wrap: wrap; }
#controls { flex: 0 0 290px; background: #fff; border: 1px solid #ccc; padding: 4px 14px 12px; }
#controls h2 { margin-top: 8px; }
#view { flex: 1 1 500px; min-width: 0; }
label { display: block; margin: 10px 0; font-size: 14px; }
label small { color: #555; }
input[type=range] { width: 100%; }
.chk { margin-top: 14px; }
.btns button { margin: 4px 4px 0 0; padding: 6px 10px; font-size: 14px; cursor: pointer; border: 1px solid #888; background: #e8e8e0; }
#kick { background: #1d5c2e; color: white; border-color: #1d5c2e; }
#verdict { font-weight: bold; min-height: 1.2em; }
#saved { padding-left: 18px; font-size: 13px; }
#saved li { margin-bottom: 3px; }
canvas { width: 100%; height: auto; border: 1px solid #999; background: #8fc78f; display: block; }
.cap { font-size: 12px; color: #666; margin: 3px 0 10px; }
table { border-collapse: collapse; font-size: 14px; }
th, td { border: 1px solid #bbb; padding: 3px 9px; text-align: right; }
th { background: #dfe8df; }
#summary td { text-align: center; }
.tblwrap { max-height: 260px; overflow-y: auto; display: inline-block; border: 1px solid #ccc; }
.tblwrap table { border: none; }
#physics { max-width: 760px; line-height: 1.45; }
.eq { font-family: "Times New Roman", serif; font-size: 1.15em; background: #fff; padding: 6px 10px; border-left: 3px solid #1d5c2e; }
footer { margin-top: 30px; font-size: 12px; color: #595959; }
@media (max-width: 700px) {
  #controls { flex: 1 1 100%; }
  .tblwrap { display: block; }
}

/* v2 stuff */
.hidden { display: none !important; }
h3 { font-size: 1em; margin: 16px 0 4px; }
.small { font-size: 12px; color: #666; }
#keys { background: #fff8d6; border: 1px solid #d8c66a; padding: 6px 10px; font-size: 13px; margin-bottom: 10px; }
#presets button { font-size: 12px; }
canvas { touch-action: none; }
#graphs { background: #fff; margin-top: 4px; }
.tabs { margin-top: 18px; border-bottom: 2px solid #1d5c2e; }
.tabs button { border: 1px solid #aaa; border-bottom: none; background: #e8e8e0; padding: 6px 12px; cursor: pointer; font-size: 14px; margin-right: 2px; }
.tabs button.on { background: #1d5c2e; color: #fff; }
.tab { padding: 10px 0; }
.chal { background: #fff; border: 1px solid #ccc; padding: 6px 12px 10px; margin-bottom: 10px; max-width: 760px; }
.chal h4 { margin: 6px 0; }
.chal input[type=number] { width: 80px; }
.fb { font-weight: bold; }
.ok { color: #1d7a2e; } .bad { color: #b03a2e; }
.step { background: #fff; border-left: 4px solid #1d5c2e; padding: 8px 12px; max-width: 760px; font-size: 15px; line-height: 1.6; }
.step .eq { border: none; padding: 2px 0; }
#ws { background: #fff; padding: 10px 20px; max-width: 760px; border: 1px solid #ccc; }
#ws li { margin-bottom: 14px; }
.line { display: block; border-bottom: 1px solid #999; height: 26px; }
.wsTable td { height: 22px; min-width: 70px; }
.touchhint { display: none; }
@media (pointer: coarse) { .touchhint { display: inline; } .btns button { padding: 9px 12px; } }
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  #ws, #ws * { visibility: visible; }
  #ws { position: absolute; left: 0; top: 0; border: none; display: block !important; }
  #worksheet { display: block !important; }
  .noprint { display: none; }
}

/* QA fixes: keyboard focus you can actually see */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .tblwrap:focus-visible, canvas:focus-visible { outline: 3px solid #e67e00; outline-offset: 2px; }
/* 1D warm-up */
#wuMain { display: flex; gap: 18px; flex-wrap: wrap; }
#wuControls { flex: 0 0 260px; background: #fff; border: 1px solid #ccc; padding: 4px 12px 10px; }
#wuView { flex: 1 1 480px; min-width: 0; }
#wuTrack { background: #ddd; }
#wuG { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#wuG canvas { background: #fff; flex: 1 1 200px; min-width: 0; width: 30%; }
@media (max-width: 700px) { #wuG canvas { width: 100%; flex-basis: 100%; } }
.readout { font-family: "Courier New", monospace; font-size: 14px; }
.note2 { background: #fffbe0; border: 1px dashed #c9b44c; padding: 8px 12px; max-width: 760px; margin: 10px 0; line-height: 1.5; }
#wuEx button { font-size: 12px; }