.project-box{padding:22px;border-top:1px solid #263b49}.project-box button{margin:12px 6px 0 0}.project-box a{display:block;margin-top:12px}input[type=number]{width:100%;min-height:44px;background:#0c1923;color:#e9f3f7;border:1px solid #263b49;border-radius:7px;padding:8px;margin:0 0 14px}.tool-panel>button{margin:4px 4px 4px 0}
/* 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}}
/* Finger-sized hit areas and readable fields on compact screens. */
input[type=range],#panel-shape input[type=range],.stage-bottom button{min-height:44px}
.stage-bottom .history button{min-width:44px}
@media(max-width:950px) and (max-height:500px){select,input[type=number],#panel-design textarea{font-size:16px}}
@media(max-width:700px){
 input[type=range],#panel-shape input[type=range],.stage-bottom button{min-height:44px}
 select,input[type=number],#panel-design textarea{font-size:16px}
 input[type=color]{min-height:44px;max-width:100%}
 .stage-top>div{min-width:0;max-width:100%}
 .project-box button{max-width:100%;white-space:normal}
 .stage-bottom .history button{min-width:44px}
}
@media(max-width:360px){header{flex-wrap:wrap}.top-actions{margin-left:auto}.two{grid-template-columns:1fr}.tabs button{flex-basis:40%}.section-heading{flex-wrap:wrap}}