body{min-height:100dvh;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Poppins,sans-serif;margin:0;line-height:inherit}html,body{margin:0;padding:0;overflow-x:hidden;height:100%}*{box-sizing:border-box}.mixtape__container{padding:1.5rem;--tw-bg-opacity: 1;background-color:rgb(240 230 210 / var(--tw-bg-opacity));display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:100vh;position:relative}.mixtape__background{opacity:.6;background-image:linear-gradient(0deg,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.mixtape__content{display:flex;flex-direction:column;align-items:center;max-width:28rem;z-index:3;position:relative;width:100%;scale:1.09}.mixtape__heading{font-family:Fascinate;--tw-text-opacity: 1;color:rgb(139 69 19 / var(--tw-text-opacity));letter-spacing:.025em;font-weight:700;font-size:1.875rem;line-height:2.25rem;margin:0;margin-bottom:1.5rem}.home-link{font-size:1.5rem;text-decoration:underline;color:#1f2937;font-weight:600;transition:color .3s ease;cursor:pointer}.bottomContainer{display:flex;flex-direction:column;align-items:center;margin-top:1rem;z-index:10;gap:.5rem}.cassette-card{width:16rem;height:9rem;background-color:#000;border-radius:.375rem;position:relative;border:1px solid #1f2937;box-shadow:0 4px 10px #00000080;transform:rotate(1deg);transition:transform .4s ease;will-change:transform}.cassette-card:hover{transform:rotate(0)}.dot{width:.75rem;height:.75rem;border-radius:9999px;background-color:#fff;position:absolute}.top-left{top:.5rem;left:.5rem}.top-right{top:.5rem;right:.5rem}.bottom-left{bottom:.5rem;left:.5rem}.bottom-right{bottom:.5rem;right:.5rem}.label{position:absolute;top:1rem;left:1rem;right:1rem;height:3.5rem;background-color:#fff;border:1px solid #d1d5db;border-radius:.125rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.line{position:absolute;width:100%;height:1px;background-color:#d1d5db}.one-third{top:33%}.two-thirds{top:66%}.label-text{font-size:1.25rem;font-weight:700;font-style:italic;color:#1f2937;position:relative;z-index:1}.stripes{position:absolute;top:5rem;left:0;right:0;height:2rem;display:flex}.stripe{flex:1;height:100%}.stripe.red{background-color:#ef4444}.stripe.pink{background-color:#ec4899}.stripe.yellow{background-color:#facc15}.stripe.green{background-color:#22c55e}.stripe.blue{background-color:#3b82f6}.stripe.indigo{background-color:#6366f1}.controls{position:absolute;bottom:1.5rem;left:0;right:0;height:2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 2rem}.reel{width:2.5rem;height:2.5rem;border-radius:9999px;background-color:#e5e7eb;border:4px solid black;display:flex;align-items:center;justify-content:center}.reel-inner{width:1.5rem;height:1.5rem;border-radius:9999px;background-color:#d1d5db}.window{width:4rem;height:2rem;background-color:#1f2937;border:1px solid #374151;border-radius:.125rem;display:flex;align-items:center;justify-content:center}.tape-strip{width:3rem;height:.5rem;background-color:#fff;border-radius:.125rem}.label-tag{position:absolute;bottom:.5rem;left:1.5rem;background-color:#000;color:#fff;font-size:.75rem;font-weight:700;padding:0 .25rem;border:1px solid white}.mixtape__form_container{display:flex;flex-direction:column;padding:1.5rem;background-color:#e6d5b8;border-radius:10px;margin-top:1.5rem;width:25rem;border:1px solid #d5c4a7;box-shadow:0 4px 12px #8b451326}.mixtape__form__name{display:flex;flex-direction:column;margin-bottom:1.25rem}.form_headings{color:#8b4513;letter-spacing:.025em;text-transform:uppercase;font-size:.875rem;font-weight:700;margin-bottom:.4rem}.mixtape__input{width:100%;padding:.5rem .75rem;border:1px solid #8b4513;border-radius:6px;background-color:#f0e0c0;color:#5d4037;font-family:monospace;font-size:.95rem;outline:none;transition:box-shadow .2s ease-in-out}.mixtape__input::placeholder{color:#a1887f}.mixtape__input:focus{border-color:#8b4513;box-shadow:0 0 0 2px #8b451333}.form_lower_text{font-size:.65rem;color:#a97e54;margin-top:.25rem;font-style:italic}.track_button{background-color:#d5c4a7;border:none;padding:.6rem;font-weight:700;font-size:.9rem;margin-bottom:1rem;border-radius:6px;cursor:pointer;color:#5d4037}.submit_button{background-color:#8b4513;color:#fff3e0;border:none;padding:.75rem;font-size:1rem;font-weight:700;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:center;align-items:center;gap:.2rem}.track_input_wrapper{position:relative;display:flex;align-items:center;margin-top:.5rem;margin-bottom:1rem}.track_number_inside{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:monospace;font-weight:700;color:#8b4513;pointer-events:none;z-index:2}.mixtape__input.with_number{padding-left:2rem;flex:1;padding-right:2rem;border:1px solid #8b4513;border-radius:6px;background-color:#f5e6c8;font-family:monospace;font-size:.95rem;color:#5d4037;outline:none}.mixtape__input.with_number::placeholder{color:#a1887f}.remove_btn{background:transparent;border:none;color:#b22222;font-size:1.2rem;cursor:pointer;margin-left:.25rem}.loading-btn{opacity:.6;pointer-events:none}.gen-ai-container{display:flex;justify-content:space-between;align-items:center}.mixtape-container{position:relative;width:100%;max-width:600px;margin:3rem auto;z-index:3;font-family:sans-serif}.tape-head{position:absolute;top:0;left:50%;width:100%;height:56px;transform:translate(-50%,-40px);z-index:10}.corner-left,.corner-right{position:absolute;top:32px;width:40px;height:24px;background:#d5c4a7;border:2px solid #c4b396;border-radius:0 0 10px 10px;box-shadow:0 2px 4px #0003}.corner-left{left:0}.corner-right{right:0}.stick-left,.stick-right{position:absolute;top:0;width:20px;height:40px;background:#e6d5b8;border:2px solid #d5c4a7;border-radius:10px 10px 0 0;box-shadow:inset 0 1px 3px #0000001a}.stick-left{left:16px}.stick-right{right:16px}.handle{position:absolute;top:0;left:50%;width:calc(100% - 40px);height:20px;background:#8b4513;border:1px solid #5d4037;border-radius:9999px;transform:translate(-50%);box-shadow:0 2px 4px #0003}.handle-inner{width:95%;height:8px;background:#a1887f;opacity:.7;border-radius:9999px;margin:6px auto auto}.handle-marks{position:absolute;top:0;left:50%;width:calc(100% - 50px);height:20px;transform:translate(-50%);display:flex;justify-content:space-between;padding:0 8px}.handle-marks .mark{width:2px;height:12px;background:#5d4037;border-radius:999px;opacity:.3}.handle-shadow{position:absolute;top:4px;left:50%;width:calc(100% - 60px);height:4px;background:#5d4037;opacity:.2;border-radius:9999px;transform:translate(-50%);filter:blur(2px)}.cassette-container{background-color:#f5e7c9;border:1px solid #e6d5b8;padding:1.25rem;border-radius:.5rem;box-shadow:0 10px 20px #0000001a}.radio-line{width:100%;height:2.5rem;background-color:#f0e0c0;border:1px solid #e6d5b8;border-radius:.375rem;margin:1rem 0;position:relative;overflow:hidden}.radio-bar{width:100%;height:.25rem;background-color:#9ca3af;position:absolute;top:50%;transform:translateY(-50%)}.radio-labels{position:absolute;top:.25rem;width:100%;display:flex;justify-content:space-between;padding:0 1rem;font-size:.5rem;color:#4b5563}.radio-marker{position:absolute;height:2rem;width:.25rem;background-color:#ef4444;top:.25rem;left:40px;transform:translateY(-50%);transition:left .5s ease-in-out}.radio-knob{position:absolute;height:1rem;width:1rem;background-color:#d5c4a7;border:1px solid #c4b396;border-radius:9999px;left:42px;top:50%;transform:translate(-50%,-50%);transition:left .5s ease-in-out}.cassette-window{width:100%;height:200px;background-color:#e6d5b8;border-radius:.375rem;border:1px solid #d5c4a7;margin-bottom:1rem;position:relative;overflow:hidden}.top-strip{position:absolute;top:0;left:0;right:0;height:.5rem;background-color:#d5c4a7}.middle-slot{position:absolute;left:50%;transform:translate(-50%);top:1rem;transition:all 1s ease-in-out}.eject-button{position:absolute;bottom:.5rem;right:.5rem;background-color:#d5c4a7;color:#374151;font-size:.75rem;padding:.25rem .5rem;border-radius:.375rem;border:1px solid #c4b396;transition:background-color .3s}.eject-button:hover{background-color:#e6d5b8}.eject-button:disabled{background-color:#d5c4a7;color:#9ca3af;border-color:#c4b396;cursor:not-allowed;opacity:.6}.eject-button:disabled:hover{background-color:#d5c4a7}.reel-dots{width:100%;height:4rem;background-color:#e6d5b8;border-radius:.375rem;border:1px solid #d5c4a7;margin-bottom:1rem;position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:.25rem;padding:.5rem;flex-wrap:wrap}.radio__dot{background-color:#d5c4a7;border-radius:9999px;width:100%;height:100%}.brand{position:absolute;bottom:.25rem;right:.5rem;font-size:.75rem;color:#374151;font-weight:700;font-style:italic}.track-info{width:100%;background-color:#e6d5b8;border:1px solid #d5c4a7;padding:.5rem;margin-bottom:1rem;border-radius:.375rem;display:flex;justify-content:space-between;align-items:center;font-family:monospace;color:#374151;font-size:.875rem}.track-led{width:.75rem;height:.75rem;border-radius:9999px;background-color:#22c55e}.end__controls{display:flex;justify-content:space-between;align-items:center}.buttons{display:flex;gap:.75rem}.buttons button{background-color:#d5c4a7;color:#374151;height:2rem;width:2rem;border-radius:9999px;border:1px solid #c4b396;display:flex;align-items:center;justify-content:center;transition:background-color .3s}.buttons button:hover:not(:disabled){background-color:#e6d5b8}.buttons button:disabled{opacity:.5}.volume{display:flex;align-items:center;gap:.5rem}.volume-knob{width:2rem;height:2rem;background-color:#d5c4a7;border:1px solid #c4b396;border-radius:9999px;position:relative}.volume-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.25rem;height:1.25rem;background-color:#c4b396;border-radius:9999px}.volume-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);width:.25rem;height:.5rem;background-color:#374151}.volume-label{font-size:.5rem;color:#374151;font-weight:700}.moved_radio_marker{left:168px}.moved_radio_knob{left:170px}.cassette-card-wrapper{position:absolute;top:-160px;left:50%;transform:translate(-50%);transition:top .7s ease-in-out;z-index:10}.cassette-card-wrapper.slide-in{top:20px}.cassette-card-wrapper .cassette-card{transform:rotate(0)}.track-led-red{background-color:rgb(239 68 68 / var(--tw-bg-opacity));width:.75rem;height:.75rem;border-radius:9999px}.button-icon{width:1.5rem;height:1.5rem}.track-time{font-size:.85rem;text-align:center}.time-logo-div{display:flex;gap:.5rem;align-items:center}