*{box-sizing:border-box}body{margin:0;background:#f8faf3;color:#20392d;font:16px/1.8 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:clamp(16px,4vw,48px)}h1{font-size:clamp(26px,5vw,42px);line-height:1.45}h2{font-size:24px;margin-top:40px}p{max-width:76ch}a{color:#285c40;text-underline-offset:4px}code,pre{font-family:ui-monospace,monospace}code{background:#e5eddc;padding:2px 5px;border-radius:4px}pre{background:#14251d;color:#e6f3d1;padding:20px;border-radius:12px;overflow:auto;line-height:1.7;font-size:14px}pre code{background:none;padding:0;color:inherit}label{display:block;font-weight:700}select,button{font:inherit;max-width:100%;padding:10px 14px;border:1px solid #617d60;border-radius:8px;background:white;color:#20392d}button{cursor:pointer;background:#d2f777}button:hover{background:#e3ffa6}button:focus-visible,select:focus-visible,a:focus-visible,iframe:focus-visible{outline:3px solid #a34b29;outline-offset:4px}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.controls>div{min-width:0}output{display:block;overflow-wrap:anywhere;margin:16px 0;padding:12px 16px;background:#eaf0e1;border-left:4px solid #45614e}.note{font-size:14px;color:#4b604e}.panel{padding:20px;background:white;border:1px solid #b8c9b2;border-radius:16px;margin-top:22px}.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.diagram{display:block;max-width:640px;width:100%;height:auto;margin:24px 0}.scroll-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}iframe{display:block;width:100%;height:390px;border:2px solid #45614e;border-radius:12px;background:white}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;background:white}th,td{border:1px solid #79906f;padding:10px;text-align:left}caption{text-align:left;font-weight:bold}thead{background:#d2f777}tfoot{background:#edf1e9}col:first-child{background:#edf1e9}@media(max-width:600px){.comparison{grid-template-columns:1fr}.panel{padding:14px}iframe{height:360px}}