body {
    height: 100vh;
    margin: 0;
    display: flex;
    font-family: "Ultra", serif;
    font-family: "Bricolage Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 17px;
}
.paidup {
    background:#fcffec;
}
button {
    font-family: "Bricolage Grotesque", sans-serif;
    /* background: #005aff; */
    border: none;
    /* color: #fff; */
    cursor: pointer;
}    
#arranger {/* display: flex; *//* flex-direction: column; *//* gap: 10px; */position: relative;height: 100vh;margin: 0 30px;padding: 0;padding-top: 40px;box-sizing: border-box;}
.layer {padding: 8px;position: relative;background: #ffffff96;box-shadow: 0 1px 2px #00000070;border-radius: 5px;margin-bottom: 10px;}
.layer-title {font-size: 14px;margin-bottom: 4px;font-weight: 500;display: none;position: absolute;top: 0;}
.text-layer, .audio-layer, .images-layer {height: 90px;display: flex;align-items: center;background-repeat: no-repeat !important;background-position: center !important;background-size: 24px !important;width: calc(100% - 3px);box-sizing: border-box;}
.images-layer {
    background: #ebebeb59;
    background-image: url(https://cdn-icons-png.flaticon.com/128/11254/11254630.png);
    background-size: 31px !important;
    }
.audio-layer {
    background: #ebebeb59;
    background-image: url(https://cdn-icons-png.flaticon.com/128/1760/1760921.png);
}      
.text-block, .audio-clip, .image-block {
    position: absolute;
    top: 30px;
    height: 40px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    cursor: grab;
    user-select: none;
    z-index: 99;
    padding: 0 5px;
    box-shadow: 0 2px 3px #0000005e;
    transition: box-shadow 0.3s ease;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
}
.image-block {background: #ffffffa6 !important;padding: 0;}
.audio-clip.selected, .image-block.selected {}
/* Updated styles for audio buttons */
.audio-buttons-container {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex; /* Arrange buttons in a row */
        /* Space between buttons */
}
.audio-buttons-container button {
    padding: 2px 6px;
    cursor: pointer;
    border: 1px solid #c1c1c1;
}
#start-recorder  {
    position: absolute;
    right: 50px;
    top: 0px;
    font-size: 16px;
    background: transparent;
    width: 65px;
    padding-left: 15px;
}
.add-text-button, .add-audio-button, .add-image-button {
    background: transparent;
    border: none;
    position: absolute;
    top: 15px;
    right: 15px;
    /* color: #fff; */
    font-size: 16px;
    border: 1px solid #0000001f;
    padding: 2px 5px;
}
.add-audio-button {
    background: transparent;
    position: absolute;
    top: 0px;
    right: 0px;
    /* color: #fff; */
    font-size: 16px;
    border: 1px solid #0000001f;
}      
input[type="file"] { display: none; }
#playhead {position: absolute;top: 0;bottom: 0;width: 1px;background: #001dff;pointer-events: none;z-index: 999;display: none;}
#player-playhead {position: absolute;bottom: -19px;width: 3px;background: #001dff;pointer-events: none;z-index: 999;display: none;height: 18px;}
.timeline-ruler {height: 20px;position: relative;background: #fafafa;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;z-index: 2;position: absolute;width: calc(100% - 0px);left: 0;margin: 0 0px;box-sizing: border-box;}
.timeline-ruler span { position: absolute; top: 2px; font-size: 10px; color: #333; transform: translateX(-50%); }
.timeline-ruler span:after {content:'';position: absolute;top: 0;bottom: -4000px;left: 6px;z-index: 999999999999999;width: 1px;background: #c1c1c142;}
.timeline-ruler:after {content:'';position: absolute;left: -30px;right: calc(100%);height: 18px;background: #fafafa;z-index: -1;box-shadow: -1px 0 1px;}
.timeline-ruler:before {content:'';position: absolute;right: -30px;left: calc(100%);height: 18px;background: #fffbff;z-index: -1;border-bottom: 1px solid #dddddd;border-top: 1px solid #dddddd;top: -1px;}
.paidup .timeline-ruler {
    background: #f4ffe4;
}
#timeline-player {
    bottom: -19px;
    height: 17px;
    background: #ffffff;
    border-top: none;
    width: calc(100% + 2px);
}

#timeline-player:before, #timeline-player:after {
    display:none;
}

#timeline-player span:after {
    top: -4000px;
    z-index:-1;
}

.paidup .timeline-ruler:before, .paidup .timeline-ruler:after {
    background: #f4ffe4;
}
#preview {
    position: relative; /* THIS IS CRUCIAL */
    width: 540px; /* Assuming your canvas size, adjust if needed */
    height: 540px; /* Assuming your canvas size, adjust if needed */
    /* Any other styling for #preview container */
    top: -60px;
}
#preview:before {
    content:'';
    position: absolute;
    top: 0;
    bottom: -2px;
    left: -4000px;
    right: -4000px;
    border: 1px solid #f0f0f0;
}
#preview-canvas {
    background: #fff;
    border: 1px solid #ddd;
    position: absolute; /* Make canvas absolute within #preview to stack with overlay */
    top: 0;
    left: 0;
    z-index: 9;
    box-shadow: 0 4px 25px #0000002e;
}

#canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* By default, allow clicks to pass through to canvas */
    display: none; /* Hide by default, show only when an image is selected */
}

#canvas-resize-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(0, 123, 255, 0.7); /* Blue handle */
    border: 1px solid #fff;
    cursor: nwse-resize;
    display: none; /* Hidden by default */
    pointer-events: all; /* Allow interaction */
    transform: translate(-50%, -50%); /* Center the handle on its coordinates */
}

#canvas-drag-handle {
    position: absolute;
    width: 50px; /* Small square for dragging */
    height: 50px;
    background: rgba(0, 123, 255, 0.4); /* Lighter blue for drag handle */
    border: 1px solid #fff;
    cursor: grab;
    display: none; /* Hidden by default */
    pointer-events: all; /* Allow interaction */
    transform: translate(-50%, -50%); /* Center the handle on its coordinates */
}    
.controls button {margin: 10px;padding: 10px 20px;font-size: 1em;margin: 0;}
.pause-button {display:none;}
.resize-handle {
    position: absolute;
    width: 6px;
    top: 0;
    bottom: 0;
    background: transparent;
    cursor: ew-resize;
    z-index: 10;
}
.play-button, .pause-button {
    width:100px;
    
}
.left-handle { left: 0; }
.right-handle { right: 0; }
.text-layer {
    background: #ebebeb59;
    background-image: url(https://cdn-icons-png.flaticon.com/128/8112/8112960.png);
    background-size: 20px;
    background-repeat: no-repeat;
} /* Same height as other content layers */
.text-layer:after, .images-layer:after, .audio-layer:after {
    content:'Text';
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: inline-block;
    width: 100px;
    text-align: center;
    top: 58px;
    font-size: 14px;
    color: #0000008a;
    font-weight: 600;
    left: 140px;
    top: 50%;
    margin: auto;
    transform: translateY(-50%);
    text-align: left;
}
.audio-layer:after {
    content:'Audio';
}  
.images-layer:after {
    content:'Media';
}        
.text-block {
     /* A default color for text blocks */
      /* Add some padding for text */
      /* Prevent text from wrapping inside the block */
      /* Hide overflow if text is too long */
      /* Add ellipsis for long text */
     background: #fff !important;
     background-image: repeating-linear-gradient(to bottom, #dfdfdf 0px, #dfdfdf 1px, transparent 1px, transparent 16px) !important;
     color: #000;
     line-height: .8;
}
.text-block.selected, .audio-clip.selected, .image-block.selected {box-shadow: 0 12px 33px #6f6f6fa8;transition: box-shadow 0.3s ease;z-index: 999;}
.add-text-button {}

/* Text preview on canvas */
.meme-text {
    position: absolute;
    bottom: 0; /* Position at the bottom of the canvas */
    left: 0;
    width: 100%;
    min-height: 80px; /* Adjust as needed */
    background: rgba(0, 0, 0, 0.5); /* Dark band with transparency */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px; /* Default size, will be drawn on canvas */
    font-weight: 900; /* Bold */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Optional text shadow */
    pointer-events: none; /* Make sure it doesn't interfere with canvas interaction if any */
    box-sizing: border-box; /* Include padding/border in width/height */
    padding: 10px; /* Padding for the text band */
}
/* Simple modal for text editing */
.text-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.text-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.text-modal-content textarea {
    width: 300px;
    height: 100px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
.text-modal-content button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.text-modal-content button:hover {
    background-color: #0056b3;
}
.controls {
    z-index: 999999;
    position: absolute;
    bottom: -80px;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
} 
.stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    box-shadow: -5px 0px 22px #0000002e;
    z-index: 9;
    overflow: hidden;
    position: relative;
}
h1 {
    text-align: center;
    font-size: 3.5em;
    width: 500px;
    margin: 0 auto;
    line-height: 1;
    color: #001dff;
    margin-top: -10px;
}  
.marketing {
    padding: 30px;
    text-align: center;
    padding-top: 20px;
}
.paidup .marketing {
    display:none;
}
.marketing button {
    font-size: 1.8em;
    padding: 10px 20px;
    margin-top: 40px;
    background: transparent;
    border: 1px solid #001dff;
    color: #001dff;
    border-radius: 3px;
}

.marketing.hide {
    display: none;
}
h4 {
    text-align: center;
    font-size: 1.6em;
    margin-top: 30px;
    color: #444;
}
h5 {
    text-align: center;
    font-size: .8em;
    margin: 0;
    margin-top: 17px;
    color: #001dff;
    font-weight: 600;
}
p {
    font-size: .96em;
    margin: 0 auto;
}
#what h2 {
    box-shadow: 0 9px 9px -12px;
    padding: 10px;
    margin-top: -250px;
}
#what p {
    text-align: left;
    font-size: 1em;
    width: 500px;
    border-bottom: 1px solid #e9e9e9;
    padding: 20px 0;
    width: 380px;
    display: inline-block;
    color: #4356a1;
} 
#timeline-top {
    top:0;

}
#timeline-bottom {
    bottom: 0;
}    
.crop-time {
    position: absolute;
    bottom: 0; /* Or top: 0; depending on preference */
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: yellow;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none; /* Make sure it doesn't interfere with drag/resize */
    z-index: 100;
}
#start-recorder:after {
    content: '';
    height: 5px;
    width: 5px;
    position: absolute;
    left: -130px;
    right: -90px;
    top: -90px;
    bottom: -90px;
    background: 0 0;
    border-radius: 50%;
    z-index: -2;
    margin: auto;
    pointer-events: none;
    background: #d40202;
} 
#start-recorder.recording:after {
    content: '';
    animation: pulse 1s ease-in-out infinite;
    background: #d40202;
} 
@keyframes pulse {
    0% {
        opacity: 1;
        border: 2px solid #df34345e
    }

    30% {
        opacity: .7
    }

    80% {
        opacity: 0;
        border: 59px solid #df34344d
    }

    100% {
        opacity: 0;
        border: 10px solid #df34344d
    }
}   

.tabs {
    position:absolute;
    top:10px;
    z-index: 9;
}

    .tab-content { display: none; }
    .tab-content.active {display: flex;position: absolute;left: 0;right: 0;top: 0;bottom: 0;justify-content: center;align-items: center;z-index: 1;flex-direction: column;}
    button {margin: 5px;padding: 5px;cursor: pointer;font-size: .9em;} 
    .tabs button, .tabs a {margin: 5px;padding: 0;cursor: pointer;font-size: .9em;background: transparent;font-size: .93em;color: #3f52b5;text-decoration: none;}  
#upgrade {
    background: #0a1220;
}
#upgrade p {
    color: #7e92ff;
    margin-top: 40px;
    position: relative;
}

#upgrade p:before {
    content:'';
    background-image: url(arrow.png);
    width: 20px;
    height: 20px;
    position: absolute;
    background-size: cover;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -27px;
    opacity: .7;
    z-index: 9999999999999999999999;
}

#terms {
    justify-content: flex-start;
    text-align: left;
    margin: 0 auto;
    align-items: flex-start;
    overflow-y: auto;
    padding: 80px;
}
#upgrade video {
    position: absolute;
    z-index: -1;
    width: 50%;
    bottom: 0;
    right: 0;
}

#login {
    background: #052c54;
    background-image: url(login.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}
.arranger-wrap {
    width: 50%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.registration-flow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #12151a;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url( ca9dadc4c725.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
#auth-container {
}
#paid-google-login-button, #auth-container button {
    font-size: 1em;
    background: linear-gradient(45deg, #001dff, #439eff);
    color: #fff;
    padding: 15px 20px;
    border-radius: 5px;
    margin-top: -300px;
    display: flex;
    align-items: center;
}

#paid-google-login-button:before, #auth-container button:before {
    content:'';
    background-image: url(google.webp);
    height: 24px;
    width: 24px;
    display: inline-block;
    background-size: cover;
    margin-right: 10px;
}

.snap-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
     /* A vibrant red */
    z-index: 1000; /* Ensure it's on top of timeline items */
    display: none; /* Hidden by default */
    pointer-events: none; /* So it doesn't interfere with mouse events */
    border-left: 1px dashed #ff00b1;
}