:root{font-family:Tahoma,Arial,sans-serif;color:#172b40;background:#edf3f8;font-size:17px;line-height:1.75}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:24px}header{padding:10px 0 24px}h1{font-size:clamp(24px,4vw,36px)}h2{font-size:23px}article,section{background:white;padding:24px;border-radius:16px;margin-bottom:20px;border:1px solid #dbe3ec}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}button,select,input,textarea{font:inherit}button,select{padding:10px 14px;border:1px solid #b9cadd;border-radius:9px;background:#fff;color:#16375b;max-width:100%}button{cursor:pointer}button:hover{background:#e8f4ff}button:disabled{opacity:.5;cursor:default}#show,#reveal{background:#1268a2;color:white}.hint{color:#51657a;font-size:15px}svg{display:block;width:100%;max-width:640px;margin:auto;height:auto}svg text{font-family:Arial,sans-serif;font-size:19px;paint-order:stroke;stroke:white;stroke-width:4;stroke-linejoin:round}#scratch{width:100%;height:auto;background:repeating-linear-gradient(white 0px,white 25px,#e5edf5 26px);border:1px solid #c9d5e2;touch-action:none}textarea{display:block;width:100%;padding:12px;margin-top:8px}dialog{width:min(1050px,96vw);max-height:92vh;border:0;border-radius:18px;padding:24px}dialog::backdrop{background:#10263acc}.dialogbar{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:-24px;background:white;z-index:1}.step{border-left:4px solid #2594b8;padding:16px;background:#f5f9fc;margin:16px 0}.bodycard{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px}.equation{font-family:Arial,Tahoma,sans-serif;font-size:21px;overflow-wrap:anywhere}.step[hidden]{display:none}input[type=file]{max-width:220px}button:focus-visible,select:focus-visible{outline:3px solid #e58e22}a{color:#125d91}@media(max-width:650px){main{padding:12px}article,section,dialog{padding:16px}.bodycard{grid-template-columns:1fr}.controls{align-items:stretch;flex-direction:column}h2{font-size:20px}.dialogbar{top:-16px}svg text{font-size:18px}}
:where(.controls)>label{min-width:0;max-width:100%}.bodycard>*{min-width:0}@media(max-width:650px){.controls>label{width:100%}.controls select{display:block;width:100%;min-width:0}}
/* ParallelClass appearance */
:root{color:#142c47;background:#f5f8fc;line-height:1.75}body{margin:0}header h1{color:#142c47}a{color:#1e40af}button{border-radius:10px}#show,#reveal{background:#1e40af}section,article{border-color:#dce5f0;border-radius:18px}.step{border-left-color:#1e40af;background:#f0f5ff}a:focus-visible,button:focus-visible{outline:3px solid #c2410c;outline-offset:3px}