:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#111827;color:#e5e7eb}*{box-sizing:border-box}body{margin:0;min-height:100dvh;-webkit-tap-highlight-color:transparent}.app{min-height:100dvh;padding:1rem}.app-main{display:flex;flex-direction:column;gap:1rem;max-width:640px;margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.app-header h1{margin:0;font-size:1.5rem}.sign-out{color:#9ca3af;text-decoration:none;font-size:.9rem}.signed-out{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:60dvh;text-align:center}.button{display:inline-block;padding:.75rem 1.5rem;border-radius:.5rem;background:#3b82f6;color:#fff;text-decoration:none;font-weight:600;font-size:1rem;border:none;cursor:pointer}.error-banner{padding:.75rem 1rem;border-radius:.5rem;background:#7f1d1d;color:#fecaca}.muted{color:#9ca3af}.create-form{display:flex;gap:.5rem}.create-form input,.edit-form input{flex:1;padding:.6rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;min-width:0}.create-form button,.edit-form button,.song-actions button{padding:.6rem 1rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;cursor:pointer}.create-form button:disabled{opacity:.5;cursor:default}.song-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.song-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:.5rem;background:#1f2937}.song-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;color:#e5e7eb;font-size:1rem;cursor:pointer}.song-actions{display:flex;gap:.5rem;flex-shrink:0}.song-actions .danger{border-color:#7f1d1d;color:#fca5a5}.edit-form{display:flex;gap:.5rem;flex:1;min-width:0}.song-view-header{display:flex;align-items:center;gap:.75rem}.song-view-title{margin:0;font-size:1.25rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back-button,.upload-button{padding:.5rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;cursor:pointer;flex-shrink:0}.upload-button:disabled{opacity:.5;cursor:default}.empty-hint{text-align:center;padding:3rem 0}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}.image-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.5rem;background:#1f2937}.image-thumb-wrap{padding:0;border:none;background:none;cursor:pointer}.viewer{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:10}.viewer-stage{position:relative;width:100%;height:100%}.viewer-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none}.stroke-container{position:absolute;top:0;right:0;bottom:0;left:0}.stroke-canvas{position:absolute;touch-action:none}.stroke-toolbar{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:999px;background:#111827d9;border:1px solid #4b5563;z-index:2}.stroke-toolbar-erasing .toolbar-group{opacity:.3;pointer-events:none}.stroke-toolbar-erasing .toolbar-erase{opacity:1}.toolbar-group{display:flex;align-items:center;gap:.5rem}.swatch{width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.swatch-active{border-color:#fff}.width-option{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid #6b7280;background:transparent;cursor:pointer;position:relative;padding:0}.width-option:after{content:"";position:absolute;top:50%;right:50%;bottom:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#e5e7eb}.width-option:nth-child(1):after{width:3px;height:3px}.width-option:nth-child(2):after{width:6px;height:6px}.width-option:nth-child(3):after{width:10px;height:10px}.width-option:nth-child(4):after{width:14px;height:14px}.width-active{border-color:#fff}.toolbar-erase{padding:.4rem .75rem;border-radius:999px;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:.9rem;cursor:pointer}.toolbar-erase-active{background:#3b82f6;border-color:#3b82f6}.viewer-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);z-index:3}.viewer-tools{display:flex;align-items:center;gap:.4rem}.tool-button{padding:.5rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#111827cc;color:#e5e7eb;font-size:1rem;line-height:1;cursor:pointer}.tool-button:disabled{opacity:.4;cursor:default}.tool-button-active{background:#3b82f6;border-color:#3b82f6;color:#fff}.viewer-close{padding:.5rem .9rem;border-radius:.5rem;border:1px solid #4b5563;background:#111827cc;color:#e5e7eb;font-size:1.25rem;line-height:1;cursor:pointer}.viewer-position{color:#e5e7eb;font-weight:500;font-size:1rem;background:#11182799;padding:.35rem .75rem;border-radius:999px}