:root{color-scheme:light;font:15px/1.4 Arial,Helvetica,sans-serif;color:#182D33;background:#F5F3ED}*{box-sizing:border-box}body{margin:0}nav{padding:16px 22px;background:#FFFDFA;border-bottom:1px solid #D6DEDC;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}nav div{display:flex;flex-wrap:wrap;gap:16px}a{color:#16736E}main{max-width:1400px;margin:24px auto;padding:0 18px}.lab{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;background:#FFFDFA;border:1px solid #D6DEDC;border-radius:14px;overflow:hidden}aside{padding:16px;background:#E4F0ED;min-width:0}h1{font:700 23px/1.15 Georgia,serif;margin:0 0 12px}.intro{font-size:14px;line-height:1.4;margin:0 0 14px}.controls{display:grid;gap:9px}.control{display:block;min-width:0;font-size:13px;font-weight:600}.control>span{display:flex;gap:5px;justify-content:space-between;margin-bottom:3px}.control output{font-variant-numeric:tabular-nums;color:#C2573F}input[type=range]{width:100%;height:19px;margin:0;accent-color:#16736E;cursor:pointer}select{width:100%;min-height:29px;font:12px Arial;background:#FFFDFA;border:1px solid #A9BCB7;border-radius:5px;padding:4px;color:#182D33}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}button{font:600 13px Arial;border:1px solid #16736E;border-radius:6px;background:#FFFDFA;color:#16736E;padding:7px 11px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){background:#D4E8E1}:focus-visible{outline:3px solid #C2573F;outline-offset:3px}.keys{font-size:11px;line-height:1.4;color:#60747A;margin:12px 0 0}.result{padding:10px 12px 10px 0;min-width:0;display:flex;flex-direction:column;justify-content:center}#figure{width:100%;line-height:0}#figure svg{width:100%;height:auto;max-height:370px;display:block}#metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px 0}.metric{padding:7px 8px;border-radius:6px;background:#F5F3ED;min-width:0}.metric strong{display:block;font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums;color:#16736E;overflow-wrap:anywhere}.metric span{display:block;font-size:11px;line-height:1.3;margin-top:4px}#caption{font-size:12px;line-height:1.4;margin:7px 0 0;color:#60747A}.embedded{background:transparent}.embedded nav{display:none}.embedded main{max-width:none;padding:0;margin:0}.embedded .lab{height:475px;grid-template-columns:268px minmax(0,1fr);gap:14px}.embedded aside{padding:14px}.embedded h1{display:none}.embedded .intro{font-size:13px;margin-bottom:10px}.embedded .controls{gap:7px}.embedded .keys{font-size:10px;margin-top:8px}.embedded .result{padding-top:8px;padding-bottom:8px}.embedded #figure svg{max-height:343px}.embedded .metric{padding:5px 7px}.embedded .metric strong{font-size:17px}.embedded #caption{font-size:11px;margin-top:5px}@media(max-width:760px){main{padding:0 10px;margin:12px auto}.lab,.embedded .lab{grid-template-columns:1fr;height:auto;overflow:visible}.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.result{padding:10px}.embedded h1{display:block}.embedded .keys{display:block}#metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric strong{font-size:19px}#caption,.embedded #caption{font-size:13px}#figure svg{min-width:600px;max-height:none!important}#figure{overflow-x:auto}.intro{max-width:70ch}}@media print{nav,.controls,.actions,.keys{display:none}main{margin:0}.lab{display:block}aside{background:white}#figure svg{min-width:0}#metrics{break-inside:avoid}}