.pen-actions{display:flex;flex-wrap:wrap;gap:8px}.pen-actions .button{min-height:42px}.pen-touch-option{display:flex;align-items:center;gap:8px;font-size:14px;margin:12px 0}.pen-touch-option input{margin:0}.pen-readings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.pen-readings dt{font-size:12px;font-weight:400;color:#555e65}.pen-readings dd{margin:0;font-size:20px;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.pen-meter{display:flex;align-items:center;gap:10px;font-size:13px}.pen-meter meter{width:180px;max-width:45%;height:16px}.pen-warning{color:#8a4600;font-size:13px;margin:6px 0}.pen-warning:empty{display:none}
#drawCanvas{display:block;width:100%;height:380px;background:#fafbfc;border:1px solid #b9bfc4;touch-action:none;user-select:none;border-radius:3px}#drawCanvas:focus-visible{outline:2px solid #1779ba;outline-offset:2px}#penResults{margin-top:22px}#pressureGraph{display:block;width:100%;height:120px;background:#fafbfc;border:1px solid #d7dbde}#penResults p{font-size:14px}#penControls{background:#fff}#buttons{margin:4px 0 10px}
.pen-test-page{height:100dvh;overflow:hidden}.pen-test-page main{padding:0;max-width:none;height:100%}.pen-test-page #penTool{border:0;border-radius:0;padding:0;height:100%;position:relative}.pen-test-page #drawCanvas{height:100%;width:100%;border:0;border-radius:0}.pen-test-page #penControls{position:absolute;z-index:2;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));max-width:740px;border:1px solid #b9bfc4;border-radius:4px;padding:10px;box-shadow:0 2px 6px #0002;max-height:calc(50dvh - 16px);overflow:auto}.pen-test-page #penControls.at-bottom{top:auto;bottom:max(8px,env(safe-area-inset-bottom))}.pen-test-page #penResults{display:none}.pen-test-page .pen-readings{margin:6px 0}.pen-test-page #status{margin:4px 0}.pen-test-page .pen-touch-option{margin:6px 0}.pen-test-page #buttons{margin:2px 0}.pen-test-page .pen-actions .button{font-size:12px;padding:8px}
.pen-test-page .grid-container{max-width:none;width:100%}
@media(max-width:640px){.pen-readings{grid-template-columns:repeat(2,minmax(0,1fr))}.pen-readings dd{font-size:18px}#drawCanvas{height:320px}.pen-test-page .pen-readings{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.pen-test-page .pen-readings dt{font-size:10px}.pen-test-page .pen-readings dd{font-size:14px}.pen-test-page #penControls{padding:8px}.pen-test-page #status{font-size:11px}}