*{box-sizing:border-box}body{margin:0;background:#14232d;color:#e8f0f4;font:15px system-ui}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #3c535e}header strong{font-size:21px}small{display:block;color:#a2b9c3;line-height:1.6}button{border:1px solid #466270;background:#243c49;color:#edf5f7;padding:9px 12px;border-radius:6px;cursor:pointer}button:hover,button.on{background:#b2ddbf;color:#142d23}main{display:grid;grid-template-columns:325px 1fr;height:calc(100dvh - 76px)}aside{overflow:auto;padding:24px;border-right:1px solid #3c535e}h1{font-size:28px;line-height:1.2;margin:14px 0}p{line-height:1.6;color:#c3d1d8}.eyebrow{font-size:11px;letter-spacing:2px;color:#b2ddbf}.batch{display:flex;gap:8px;margin:20px 0}.group{font-size:18px;margin:24px 0 9px;color:#b2ddbf}.layer{padding:11px 0;border-bottom:1px solid #304855}.label{display:flex;gap:8px;align-items:center}.label span{flex:1;overflow-wrap:anywhere;font-size:14px}.label input[type=color]{width:27px;height:26px;border:0;padding:0;background:none}.label input[type=checkbox]{accent-color:#b2ddbf;width:17px;height:17px}.opacity{display:flex;align-items:center;gap:8px;font-size:11px;color:#a2b9c3;margin-top:8px}.opacity input{width:165px;accent-color:#b2ddbf}#view{position:relative;overflow:hidden}canvas{display:block;touch-action:none}.tools{position:absolute;z-index:2;top:16px;left:16px;right:16px;display:flex;gap:5px;flex-wrap:wrap}.tools button{font-size:12px}#status{position:absolute;top:78px;left:20px;background:#14232dd9;padding:8px 12px;max-width:80%;font-size:13px;z-index:2}.data{position:absolute;right:20px;bottom:90px;background:#14232de8;padding:16px;border:1px solid #365360;pointer-events:none}.data table{width:100%;font-size:13px;margin:9px 0;border-collapse:collapse}.data td{padding:5px 18px 5px 0;border-top:1px solid #35505d}.data small{font-size:10px}.hint{position:absolute;bottom:61px;left:19px;font-size:11px;color:#aac1cd}footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:#1b303c;border-top:1px solid #3c535e}#counter{font-size:13px}@media(max-width:800px){main{grid-template-columns:1fr;height:auto}aside{max-height:42dvh;padding:18px}#view{height:65dvh;min-height:430px}.data{display:none}header strong{font-size:16px}header{padding:12px}.tools button{padding:7px}.hint{font-size:10px}}

/* Presentación clara */
body{background:#f4f7fa;color:#182d3d}header,aside{background:#fff}header{border-color:#ccd8df}aside{border-color:#ccd8df}small{color:#506776}p{color:#3c5363}button{background:#fff;color:#16364b;border-color:#aebfcb;box-shadow:0 1px 3px #10263815}button:hover,button.on{background:#daeee4;color:#174b38}.eyebrow,.group{color:#246448}.layer{border-color:#d9e2e8}.opacity{color:#526878}.label input[type=checkbox],.opacity input{accent-color:#287254}#view{background:#edf2f6}#status{background:#ffffffed;color:#304c5d;border:1px solid #c5d2db}.data{background:#ffffffed;color:#1c3548;border-color:#c5d2db}.data td{border-color:#d2dce3}.hint{background:#ffffffdf;color:#304c5d;padding:4px 7px}footer{background:#fff;border-color:#c5d2db;color:#1c3548}

.focus{font-size:11px;padding:5px 7px;flex-shrink:0}.label{flex-wrap:wrap}.label span{min-width:110px}.hint{max-width:calc(100% - 38px)}