html,body,#app{margin:0;width:100%;height:100%;background:#fff;color:#e91e63;overflow:hidden;touch-action:none;font-family:system-ui,sans-serif}.app{height:100vh;height:100dvh;display:flex;flex-direction:column}.header{flex:0 0 56px;background:#f48fb1;color:#fff;display:flex;align-items:center;padding:0 12px}.title{font-weight:600}.spacer{flex:1}.content{flex:1;min-height:0}.wrap{width:100%;height:100%;background:#fff}canvas{width:100%;height:100%;background:transparent}.bar{flex:0 0 64px;background:#ffe4ef;display:flex;align-items:center;gap:10px;padding:0 12px;box-shadow:0 -2px 8px #ff69b459}button{background:#fce4ec;color:#c2185b;border:none;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:700;box-shadow:0 2px 6px #c2185b66;cursor:pointer;transition:background-color .2s ease,transform .05s ease}button:hover{background-color:#f8bbd0}button:active{transform:scale(.95)}button.primary{background:#ff69b4;color:#fff}button.primary:hover{background:#ff85c2}button:disabled{opacity:.4;filter:grayscale(1);box-shadow:none;cursor:not-allowed;pointer-events:none}button:focus{background:#fce4ec}button.primary:focus{background:#ff69b4}.size-label{background:#fce4ec;color:#c2185b;font-size:14px;font-weight:700;-webkit-user-select:none;user-select:none}.size-label.disabled{opacity:.4;filter:grayscale(1);box-shadow:none}.header button{background:none;box-shadow:none;color:#fff;font-size:18px}.bar button{min-width:42px}