/* Set before the first touch: otherwise the browser cancels pinch pointer events. */
#preview {touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;}
#preview:active {cursor:grabbing;}
#panel-shape input[type=range] {min-height:36px;}
.tabs{flex-wrap:wrap}.tabs button{flex:1 0 28%}
.lab-link{padding:16px 20px;background:#112a3b;border:1px solid #294452;border-radius:12px;margin:0 0 24px}.lab-link a{color:#77d8ff}.lab-link small{display:block;color:#a6bdcb;margin-top:6px}
#panel-retouch button,#panel-selective button{margin:5px 4px 10px 0;min-height:44px}#panel-retouch select,#panel-selective select{width:100%;margin-bottom:16px}#panel-retouch label,#panel-selective label{margin-top:12px}
#panel-design textarea{width:100%;max-width:100%;resize:vertical;min-height:80px;background:#0c1923;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:10px;font:inherit;margin-bottom:16px}
#panel-design input[type=color]{width:100%;height:44px;background:#0c1923;border:1px solid var(--line);border-radius:7px;margin-bottom:18px}
#panel-tone h2,#panel-design h2{margin-bottom:18px}
#panel-tone .hint{margin-bottom:20px}
.tone-graph{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;margin-bottom:20px}
#panel-design textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:700px){.stage-bottom{flex-wrap:wrap;gap:6px}.stage-top{flex-wrap:wrap;gap:6px}.stage-top #filename{overflow-wrap:anywhere}.stage{padding:12px}.tabs button{min-height:48px}}