﻿/* Responsive outer layout; original Canvas coordinates stay 925 × 600. */
body{font-family:Arial,"Microsoft YaHei",sans-serif;color:#243747;background:#f4f6f8;margin:0}
#FullPage{width:calc(100% - 24px);max-width:1024px;padding-bottom:0;margin:0 auto}
#ProgramTitle{height:auto;min-height:0;width:auto;margin:18px 0 20px;font-size:clamp(20px,3.5vw,28px);line-height:1.3;overflow-wrap:anywhere}
#OverviewSection,#LabSection{position:relative;top:auto;left:auto;margin:0 auto;width:100%;max-width:935px;height:auto}
#LabSection{aspect-ratio:935 / 610}
#DrawingSectionOne{box-sizing:border-box;position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:935 / 610}
#CanvasOne{display:block;width:100%;height:auto;aspect-ratio:925 / 600}
#OverviewSection{box-sizing:border-box}#AvailableLanguages{display:none}
#DrawingSectionOne .Button{box-sizing:border-box;height:54px;padding:3px 5px;display:flex;align-items:center;justify-content:center;touch-action:manipulation;font-size:clamp(16px,3vw,28px);width:clamp(90px,17%,150px);bottom:clamp(4px,1vw,10px);cursor:pointer;line-height:1.2}
#DrawingSectionOne #StartButton,#DrawingSectionOne #PauseButton,#DrawingSectionOne #ResumeButton{left:1.6%}
#DrawingSectionOne #ResetButton{right:1.6%}
/* Preserve original hidden states until the simulation controls select a button. */
#DrawingSectionOne #ResetButton,#DrawingSectionOne #PauseButton,#DrawingSectionOne #ResumeButton{display:none}
.panels{box-sizing:border-box;width:calc(100% - 24px);max-width:935px;margin:20px auto 40px;text-align:left}
.language{text-align:right;padding:0 0 14px;display:flex;align-items:center;justify-content:flex-end;gap:8px}
select,input,button{font:inherit;font-size:16px}select{padding:8px;min-height:44px;max-width:100%}
section{box-sizing:border-box;background:white;border:1px solid #d4dee5;border-radius:10px;padding:22px;margin-bottom:18px;min-width:0}
h2{font-size:20px;margin:0 0 18px;color:#24445c}
form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px;align-items:end}
form label{display:grid;gap:8px;font-size:14px;min-width:0;line-height:1.5}
input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #9cabb8;border-radius:5px}
button{min-height:44px;padding:11px 20px;border:0;border-radius:5px;background:#244d68;color:white;cursor:pointer;touch-action:manipulation}
button:disabled,input:disabled{opacity:.55;cursor:not-allowed}
#hint,#measurementNote,.formula{font-size:14px;color:#536877;line-height:1.7;overflow-wrap:anywhere}#feedback{min-height:20px;color:#a02d21;overflow-wrap:anywhere}
dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;margin:0}
dl div{min-width:0;border-top:1px solid #e3e9ed;padding:14px 0}dt{font-size:13px;color:#536877;line-height:1.5;overflow-wrap:anywhere}dd{margin:8px 0 0;font-size:clamp(19px,3.8vw,23px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
footer{font-size:12px;color:#536877;line-height:1.6;overflow-wrap:anywhere}a{color:inherit}:focus-visible{outline:3px solid #eea23b;outline-offset:3px}
@media(max-width:760px){form{grid-template-columns:repeat(2,minmax(0,1fr))}dl{grid-template-columns:repeat(2,minmax(0,1fr))}section{padding:18px}#DrawingSectionOne .Button{height:44px}}
@media(max-width:440px){form{grid-template-columns:minmax(0,1fr);gap:14px}#apply{width:100%}section{padding:16px}dl{gap:0 12px}.panels{margin-top:16px}#ProgramTitle{margin:14px 0}#DrawingSectionOne{border-width:3px}}
@media(max-width:340px){dl{grid-template-columns:minmax(0,1fr)}}

/* Keep the fourth parameter readable without crowding the desktop row. */
form{grid-template-columns:repeat(4,minmax(0,1fr))}#apply{grid-column:1 / -1;justify-self:end}#targetHint,#targetStatus{font-size:14px;line-height:1.7;color:#536877}#targetStatus{font-weight:600}@media(max-width:760px){form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:440px){form{grid-template-columns:minmax(0,1fr)}}
