html,body{height:100%}body{background:var(--elevated);font-size:12px;overflow:hidden}.example{height:100%;display:flex;flex-direction:column;padding:16px 20px;gap:10px}.example-head{display:flex;justify-content:space-between;gap:10px;font:10px var(--code);color:var(--muted)}.example-head output{color:var(--accent)}#canvas{flex:1;min-height:0;position:relative}#canvas canvas{display:block;max-width:100%;height:auto}#message{font:10px/1.6 var(--code);color:var(--muted)}.controls{display:flex;align-items:center;gap:14px}.controls button{padding:7px 12px;border:1px solid var(--border);font:10px var(--code);min-width:66px}.controls input{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}.legend{font:9px var(--code);color:var(--muted)}body.history .example{padding:22px 28px}body.history #message{margin-top:5px}@media(max-width:600px){.example,body.history .example{padding:15px}.example-head{font-size:9px}.controls{gap:10px}.legend{font-size:8px}}