:root{color-scheme:light dark}body{margin:0;background:var(--bg,#fafaf8);color:var(--ink,#243e3b)}#g34{max-width:1000px;margin:auto;padding:16px}.g34-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.g34-controls label{display:flex;flex-direction:column;gap:6px}#g34 input,#g34 button,#g34 a{min-height:44px;box-sizing:border-box}#g34 a{display:inline-flex;align-items:center}#g34 button{padding:10px 16px}#g34 input{width:100%;font:inherit}#g34 figure{margin:16px 0;border:2px solid #527b73;border-radius:12px;overflow:hidden}#g34 figcaption{padding:12px;font-weight:bold;background:#183e38;color:white}#g34 canvas{display:block;width:100%;height:clamp(260px,48vh,480px);background:#e7eee8}#g34 .demo{padding:12px;border-inline-start:4px solid #ab681f}#g34 :focus-visible{outline:3px solid #d78216;outline-offset:3px}@media(prefers-color-scheme:dark){body{background:#142624;color:#eff8f6}#g34 canvas{background:#c5d1c7}}