@charset "UTF-8";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:theme("scrollbar","thumb") theme("scrollbar","track")}html{font-size:16px;font-family:Quicksand,sans-serif;line-height:1.5;color:theme("text","main");background-color:theme("background")}body{margin:0;min-height:100vh;display:flex;flex-direction:column}a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}ul,ol{list-style:none}button{background:none;border:none;padding:0;font-family:inherit;cursor:pointer}input,textarea{font-family:inherit;border:1px solid theme("border");border-radius:4px;padding:8px;outline:none}input:focus,textarea:focus{border-color:theme("border-hover")}#root{width:100%;display:flex;height:100vh;overflow:hidden}body{margin:0;min-height:100vh;font-family:Quicksand,sans-serif;background-color:#fdfbf7;width:100%}.main-content{display:flex;flex-direction:column;flex:1;width:100%;padding:40px;color:#2c1810;box-sizing:border-box;min-width:0;overflow-x:hidden}.main-content h1{font-family:Quicksand,sans-serif;color:#8b4513;font-size:2.5em;margin-bottom:.5em;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.main-content p{font-size:1.1em;line-height:1.6;color:#5c4d43}.details-content{flex-grow:1;overflow-y:auto;max-height:calc(100vh - 60px);padding-right:10px;box-sizing:border-box}.no-selection-message{display:flex;align-items:center;justify-content:center;flex:1;font-size:1.2em;color:#999;text-align:center;padding:2rem;background-color:#00000005;border-radius:8px;margin:1rem 0}.canvas-controls-container{display:flex;gap:16px;flex:1;position:relative;min-height:400px;min-width:0;max-width:100%;flex-direction:column}.canvas-controls-container.inactive{position:absolute;top:0;left:0;visibility:hidden;opacity:0;pointer-events:none}.canvas-controls-container.active{position:relative;visibility:visible;opacity:1;pointer-events:auto}.canvas-controls-container .control-panel{flex-direction:row;width:100%;margin:16px 0;position:static;flex-wrap:wrap}.canvas-controls-container .footwork-section{height:400px;min-height:400px}@media (max-width: 768px){.canvas-controls-container{flex-direction:column}.control-panel{flex-direction:row;width:100%}}.details-sidebar,.sidebar{width:25%;background-color:#e8e1d5;padding:.4em;box-shadow:inset -5px 0 15px -5px #0000001a;display:flex;flex-direction:column;height:100vh;box-sizing:border-box;overflow-y:auto;flex-shrink:0}.sidebar{border-right:1px solid #d4c9b7}.details-sidebar{border-left:1px solid #d4c9b7;box-shadow:inset 5px 0 15px -5px #0000001a}.sidebar-header{font-size:1.5em;line-height:1.1em;font-weight:700;margin:0 0 10px;color:#8b4513;letter-spacing:1px;position:relative;font-family:Quicksand,sans-serif}.sidebar-header:after{content:"";position:absolute;bottom:-4px;left:0;width:40%;height:2px;background:linear-gradient(to right,#8b4513,transparent)}.auth-buttons{display:flex;gap:5px}.auth-buttons .auth-button{padding:5px 10px!important;font-size:12px!important;text-transform:none!important;letter-spacing:normal!important;height:auto!important;width:auto!important}.search-container{margin-bottom:20px}.search-container .search-input{width:100%;padding:8px;border:1px solid #d4c9b7;border-radius:4px;box-sizing:border-box}.tabs{display:flex;margin-bottom:10px;border-bottom:1px solid #d4c9b7}.tabs .tab-button{font-size:.8rem;flex:1;padding:10px;background-color:#e8e1d5;border:none;cursor:pointer;font-weight:700;text-align:center}.tabs .tab-button.active{background-color:#8b4513;color:#fdfbf7}.tabs .tab-button:not(.active):hover{background-color:#e8e1d5}.beat-help-section{display:flex;flex-direction:column;gap:2px;margin-top:0}.beat-help-item{border:1px solid #d4c9b7;border-radius:4px;background-color:#fdfbf7;overflow:hidden}.beat-help-item .beat-help-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#fdfbf7;cursor:pointer;user-select:none;transition:background-color .2s}.beat-help-item .beat-help-header:hover{background-color:#e8e1d5}.beat-help-item .beat-help-header.open{background-color:#8b4513;color:#fdfbf7}.beat-help-item .beat-help-header h4{margin:0;font-size:.7rem;font-weight:700}.beat-help-content{padding:4px;border-top:1px solid #d4c9b7}.collapse-icon{font-size:12px;transition:transform .2s}.accordion-content.visible .beat-help-section{margin-bottom:8px}.collections-list-container{overflow-y:auto;max-height:80vh}.beat-range-copy-form{display:flex;flex-direction:column;gap:2px}.beat-range-copy-form h4{margin-bottom:.5rem}.beat-range-copy-form .beat-range{display:flex;gap:1rem}.beat-range-copy-form .beat-range>div{flex:1}.beat-range-copy-form .feet-selection{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.beat-range-copy-form .feet-selection .feet-row{display:flex;align-items:center}.beat-range-copy-form .feet-selection .feet-row .dancer-label{width:70px;font-weight:500}.beat-range-copy-form .feet-selection .feet-row .feet-checkboxes{display:flex;gap:1rem}.beat-range-copy-form .feet-selection .feet-row .feet-checkboxes label{display:flex;align-items:center;gap:.25rem;font-weight:400}.beat-range-copy-form .message{padding:.5rem;border-radius:4px;margin-top:.5rem;font-size:.9rem}.beat-range-copy-form .message.success{background-color:#0080001a;color:green;border:1px solid rgba(0,128,0,.2)}.beat-range-copy-form .message.error{background-color:#dc35451a;color:#dc3545;border:1px solid rgba(220,53,69,.2)}.beat-range-copy-form .beat-format-help{margin-top:.5rem;font-size:.8rem}.multi-select-collections{display:flex;flex-direction:column;gap:.5rem}.multi-select-collections .collection-checkbox{padding:.5rem 1rem;border:1px solid #d4c9b7;border-radius:8px;background-color:#fdfbf7;cursor:pointer;user-select:none;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;transition:background-color .2s}.multi-select-collections .collection-checkbox:hover{background-color:#d4c9b7}.multi-select-collections .collection-checkbox.selected{background-color:#8b4513;color:#fdfbf7}.multi-select-collections .collection-checkbox.selected:hover{background-color:#723a0f}.fancy-button{padding:.8em 2em;font-size:.7rem;border:none;border-radius:2px;cursor:pointer;font-family:Quicksand,sans-serif;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-grow:1;align-items:center;justify-content:center;max-height:3em}.fancy-button .button-icon{display:block;width:20px;height:20px;flex-shrink:0;margin:auto}.fancy-button .button-text{display:block;overflow:hidden;text-overflow:ellipsis}.fancy-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.fancy-button:disabled .button-icon{opacity:.5}.button-primary{background-color:#8b4513;color:#fdfbf7}.button-primary:hover{background-color:#723a0f}.button-danger{background-color:#a83232;color:#fdfbf7}.button-danger:hover{background-color:#8a2828}.button-secondary{background-color:#fdfbf7;color:#2c1810;border:2px solid #d4c9b7}.button-secondary:hover{background-color:#e8e1d5}.button-secondary.button-active{background-color:#8b4513;color:#fdfbf7}.button-info{background-color:#4a6741;color:#fdfbf7}.button-info:hover{background-color:#3d5635}#toggle-edit-button{margin-top:10px;margin-bottom:10px}#toggle-edit-button.toggled{background-color:#8b4513;color:#fdfbf7}.button-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:10px}.collection-buttons{display:flex;gap:8px;margin-bottom:10px}.collection-buttons .fancy-button{flex:1;font-size:.6rem!important;padding:6px 8px!important;text-transform:none!important;letter-spacing:normal!important;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.collection-buttons .button-secondary.active{background-color:#8b4513;color:#fdfbf7}.visibility-toggle{background:none;border:none;cursor:pointer;font-size:22px;opacity:.5;transition:opacity .2s,transform .2s;transform:translateY(-4px);line-height:1}.visibility-toggle:hover{opacity:.8;transform:translateY(-4px) scale(1.1)}.visibility-toggle.active{opacity:1;color:#8b4513}.control-panel .fancy-button{padding:10px;font-size:14px;text-transform:none;letter-spacing:normal;white-space:nowrap;min-height:40px;display:flex;align-items:center;justify-content:center}.accordion{border:1px solid #d4c9b7;border-radius:6px;overflow:hidden;margin-bottom:15px;box-shadow:0 2px 5px #0000001a}.accordion .accordion-header{background-color:#fdfbf7;padding:10px;font-size:.8rem;cursor:pointer;font-weight:700;color:#2c1810;border-bottom:1px solid #d4c9b7;display:flex;justify-content:space-between;align-items:center}.accordion .accordion-header:hover{background-color:#e8e1d5}.accordion .accordion-header.active{background-color:#8b4513;color:#fdfbf7}.accordion .accordion-header:after{content:"▼";font-size:.8rem}.accordion .accordion-header.active:after{transform:rotate(-180deg)}.accordion .accordion-content{max-height:0;overflow:hidden;padding:0;margin:0;font-size:.7rem;background-color:#fdfbf7;border-top:1px solid #d4c9b7}.accordion .accordion-content.visible{max-height:none;padding:6px}.accordion .accordion-content label{display:block;font-weight:700;color:#2c1810}.accordion .accordion-content input,.accordion .accordion-content select,.accordion .accordion-content textarea{width:100%;padding:10px;margin-top:5px;border:1px solid #d4c9b7;border-radius:4px;box-sizing:border-box;background-color:#fdfbf7;font-size:.7rem;color:#2c1810}.accordion .accordion-content textarea{resize:none}.accordion .accordion-content input[readonly],.accordion .accordion-content select:disabled,.accordion .accordion-content textarea[readonly]{background-color:#e8e1d5;color:#5c4d43;cursor:not-allowed}.dropdown-select{width:100%;padding:8px 30px 8px 8px;border:1px solid #d4c9b7;border-radius:4px;background-color:#fdfbf7;margin-bottom:10px;font-size:.7rem;cursor:pointer;appearance:none;background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px}.dropdown-select:hover{border-color:#999}.dropdown-select:focus{outline:none;border-color:#999}.collections-list-container,.moves-list-container{display:flex;flex-direction:column;flex:1;min-height:4rem}.delete-mode.collections-list-container,.delete-mode.moves-list-container{border:2px solid #a83232;border-radius:4px}.delete-mode.collections-list-container .moves-list,.delete-mode.moves-list-container .moves-list,.delete-mode.collections-list-container .collections-list,.delete-mode.moves-list-container .collections-list{border:none;border-radius:0;box-shadow:none}.collections-list,.moves-list{list-style:none;padding:0;margin:0;background-color:#fdfbf7;border:1px solid #d4c9b7;border-radius:4px;box-shadow:0 2px 5px #0000001a;overflow-y:auto}.moves-list{flex:1}.collections-list{overflow:hidden;flex-grow:1;overflow-y:auto}.collection-item,.move-item{border-bottom:1px solid #d4c9b7;cursor:pointer;background-color:#fdfbf7;user-select:none}.collection-item:hover,.move-item:hover{background-color:#d4c9b7}.selected.collection-item,.selected.move-item{background-color:#8b4513;color:#fdfbf7}.selected.collection-item:hover,.selected.move-item:hover{background-color:#723a0f}.delete-selected.collection-item,.delete-selected.move-item{background-color:#a83232;color:#fdfbf7}.delete-selected.collection-item:hover,.delete-selected.move-item:hover{background-color:#8a2828}.collection-item input[type=checkbox],.move-item input[type=checkbox]{margin-right:8px;pointer-events:none}.move-item{padding:.5em 1em;font-size:.8rem}.collection-item{padding:.2em}.collection-item .collection-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;position:relative;gap:0px}.collection-item .collection-header input[type=checkbox]{width:16px;min-width:16px;height:16px;flex:none;margin:0}.collection-item .collection-header:after{content:"▼";font-size:.7rem;position:absolute;right:0}.collection-item .collection-header span,.collection-item .collection-header input{flex:1;font-size:.7rem;font-weight:700;line-height:normal;padding:0;margin:0;box-sizing:border-box;display:block}.collection-item .collection-header input{border:none;background:transparent;color:inherit;width:100%}.collection-item .collection-header input:focus{outline:none}.collection-item.expanded .collection-header:after{transform:rotate(-180deg)}.collection-item.expanded .collection-content{max-height:none;padding:4px}.collection-item .collection-content{max-height:0;overflow:hidden;padding:0;margin:0;font-size:.7rem;background-color:#fdfbf7;border-top:1px solid #d4c9b7;user-select:none}.collection-item .collection-content ul{list-style:none;padding:0;margin:5px 0}.collection-item .collection-content ul li{padding:2px;border-bottom:1px solid #d4c9b7;color:#2c1810;user-select:none}.collection-item .collection-content ul li:last-child{border-bottom:none}.info-mode-banner,.delete-mode-banner{padding:8px;display:flex;flex-direction:column;gap:8px;color:#fdfbf7}.info-mode-banner .banner-text,.delete-mode-banner .banner-text{display:flex;justify-content:space-between;align-items:center}.info-mode-banner .fancy-button,.delete-mode-banner .fancy-button{padding:4px 8px;font-size:.7rem;margin:0}.delete-mode-banner{background-color:#a83232}.delete-mode-banner .banner-text .selected-count{font-size:.7rem;opacity:.9}.delete-mode-banner .banner-buttons{display:flex;gap:8px}.delete-mode-banner .button-danger{background-color:#fdfbf7;color:#a83232;border:1px solid #fdfbf7}.delete-mode-banner .button-danger:hover:not(:disabled){background-color:#8a2828;color:#fdfbf7}.delete-mode-banner .button-danger:disabled{opacity:.6;cursor:not-allowed}.info-mode-banner{background-color:#4a6741}.info-mode-banner .banner-text{font-size:.7rem}.info-mode-banner .fancy-button{min-height:unset;height:auto;width:auto;flex:0 0 auto}.move-select-list{list-style:none;padding:0;margin:5px 0;user-select:none}.move-select-item{padding:2px;border-bottom:1px solid #d4c9b7;color:#2c1810;display:flex;align-items:center;gap:8px;user-select:none}.move-select-item:hover{background-color:#d4c9b7}.move-select-item:last-child{border-bottom:none}.move-select-item input[type=checkbox]{margin:0;width:auto;cursor:pointer}.add-moves-button{width:100%}.add-moves-button.active{background-color:#8b4513;color:#fdfbf7}.advanced-options .form-group label{display:flex;align-items:center;gap:8px;cursor:pointer}.advanced-options .form-group input[type=checkbox]{margin:0;cursor:pointer}.ghost-count-input{margin-top:8px;margin-left:24px;display:flex;align-items:center;gap:8px}.ghost-count-input input[type=number]{width:60px;padding:4px;border:1px solid #d4c9b7;border-radius:4px}.moves-search-container{padding:8px;margin-bottom:8px}.moves-search-input{width:100%;padding:6px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px}.moves-search-input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.video-url-container{position:relative;display:flex;align-items:center}.video-url-container .form-control.video-link{width:100%;padding-right:30px}.video-url-container .form-control.video-link.has-link{cursor:pointer;color:#4a6741;text-decoration:underline}.video-url-container .form-control.video-link.has-link:hover{color:#3d5635}.video-url-container .form-control.video-link.has-link:focus{cursor:text;color:#2c1810;text-decoration:none}.video-url-container .video-link-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#4a6741}.video-url-container .video-link-icon:hover{color:#3d5635}.video-time-controls{display:flex;gap:10px;margin-top:8px}.video-time-controls .form-group{flex:1;margin-bottom:0}.video-time-controls .form-group input[type=number]{width:100%}.video-time-controls .form-group label{font-size:.85em}.beat-timeline{min-width:0;width:100%;display:flex;align-items:center;gap:4px;padding:8px;background-color:#fdfbf7;border:2px solid #d4c9b7;border-radius:4px;box-shadow:inset 0 2px 4px #0000001a;box-sizing:border-box;margin-bottom:8px}.beat-timeline-inner{flex:1;width:0;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#d4c9b7 #e8e1d5;-ms-overflow-style:auto;scroll-behavior:smooth}.beat-timeline-inner::-webkit-scrollbar{height:6px;background-color:#e8e1d5;border-radius:3px}.beat-timeline-inner::-webkit-scrollbar-thumb{background-color:#d4c9b7;border-radius:3px}.beat-timeline-inner::-webkit-scrollbar-thumb:hover{background-color:#8b4513}.beat{flex:0 0 30px;width:30px;display:flex;align-items:center;justify-content:center;min-width:30px;height:24px;font-family:Quicksand,sans-serif;color:#2c1810;text-align:center;cursor:pointer;user-select:none}.beat:hover{background-color:#d4c9b7;border-radius:4px}.beat.active{color:#8b4513;font-weight:700;position:relative;background-color:#d4c9b7;border-radius:4px;transform:scale(1.2);z-index:2;transition:transform .2s,background-color .2s,color .2s}.beat-number{font-weight:700;font-size:1em}.beat-and{color:#999;font-size:.8em;font-style:italic}.beat-nav-button{flex:0 0 24px;width:24px;height:24px;border:none;border-radius:4px;background-color:#d4c9b7;color:#2c1810;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;transition:background-color .2s}.beat-nav-button:hover{background-color:#8b4513;color:#fdfbf7}.beat-nav-button:disabled{opacity:.5;cursor:not-allowed}.footwork-section{flex:1;min-width:350px;display:flex;position:relative;height:100%;max-width:calc(100% - 30px)}.footwork-canvas-container{position:relative;width:100%;max-width:100%;max-height:100%;box-sizing:border-box;padding:0;margin:0 auto;overflow:hidden}.footwork-canvas-container:before{content:"";display:block;padding-top:100%}.footwork-canvas-container.mobile{position:relative}.footwork-canvas{position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid #d4c9b7;background-color:#fdfbf7;border-radius:4px;box-shadow:inset 0 0 10px #0000001a;box-sizing:border-box;margin:0;padding:0;transition:none}.footwork-canvas.edit-mode{cursor:default}.foot{width:30px;height:70px;position:absolute;transform-origin:center;transition:filter .2s ease}.foot-darkened{opacity:.5}.foot-in-air{opacity:1}.foot-weighted{opacity:1;filter:brightness(.6) contrast(1.2)}.leader-foot{color:#8b4513}.follower-foot{color:#4a6741}.rotation-handle{position:absolute;width:14px;height:14px;background-color:#fff;border:2px solid #8b4513;border-radius:50%;cursor:grab;z-index:15;transform:translate(-50%,-50%);touch-action:none}.rotation-handle:hover{background-color:#e8e1d5}.rotation-handle[data-id^=rotation-handle-l]{border-color:#8b4513}.rotation-handle[data-id^=rotation-handle-f]{border-color:#4a6741}.ghost-foot{pointer-events:none;filter:saturate(.5)}.foot-selection{display:flex;width:100%;margin-bottom:8px}.control-buttons{display:flex;justify-content:space-between;width:100%;align-items:center;gap:8px}.control-buttons .fancy-button{flex:1}.control-panel{padding:10px;display:flex;gap:10px;background-color:#e8e1d5;border-radius:4px;box-shadow:0 2px 5px #0000001a;box-sizing:border-box}.foot-states{display:flex;flex-direction:column;gap:4px;width:100%}.foot-states .foot-buttons{display:flex;width:100%;border-radius:4px;overflow:hidden}.foot-states .foot-buttons .foot-button{flex:1;background-color:#fdfbf7;border:1px solid #d4c9b7;color:#2c1810;padding:6px 0;cursor:pointer;text-align:center;font-size:14px;font-family:Quicksand,sans-serif;transition:background-color .2s,color .2s}.foot-states .foot-buttons .foot-button:not(:last-child){border-right:none}.foot-states .foot-buttons .foot-button:hover{background-color:#e8e1d5}.foot-states .foot-buttons .foot-button.active{background-color:#8b4513;color:#fdfbf7}.not-editable{pointer-events:none}.beat-controls-section{display:flex;flex-direction:row;gap:10px;width:100%}.foot-focused{outline:3px solid #f0ad4e;z-index:100;isolation:isolate;filter:none!important}@media (max-width: 768px){.footwork-canvas-container{position:relative}}.step-pattern-section{display:flex;flex-direction:column;gap:10px;width:100%}.step-pattern-section h3{font-size:14px;margin:0 0 5px;color:#2c1810}.step-pattern-section .step-pattern-buttons .pattern-group{display:flex;gap:8px;width:100%}.step-pattern-section .step-pattern-buttons .pattern-group .step-pattern-button{flex:1;font-size:.85rem;padding:8px;text-transform:none;letter-spacing:normal;min-height:36px}.step-pattern-section .step-pattern-buttons .pattern-group .step-pattern-button.mobile{font-size:.75rem;padding:6px;min-height:32px}@media (max-width: 400px){.step-pattern-section.mobile .step-pattern-button{font-size:.7rem}}.step-pattern-section{flex-direction:row;flex-wrap:wrap;align-items:center}.step-pattern-section h3{width:100%}.step-pattern-section .pattern-group{flex-direction:row;flex:1}.mobile-layout{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden}.mobile-nav{display:flex;justify-content:space-between;background-color:#fdfbf7;border-top:1px solid #d4c9b7;height:40px;box-sizing:border-box;padding:0}.mobile-nav button{flex:1;padding:0;background-color:#fdfbf7;color:#2c1810;border:none;border-top:3px solid transparent;border-right:1px solid #d4c9b7;border-radius:0;font-family:Quicksand,sans-serif;text-align:center;transition:all .2s;font-size:16px;font-weight:500;height:100%;display:flex;align-items:center;justify-content:center}.mobile-nav button:last-child{border-right:none}.mobile-nav button.active{color:#8b4513;border-top-color:#8b4513;background-color:#fdfbf7}.mobile-nav button:hover:not(.active){background-color:#d4c9b7}.mobile-tabs{display:flex;justify-content:center;gap:2px;padding:3px;margin-bottom:10px;background-color:#00000008;border-radius:4px}.mobile-tab{padding:8px 12px;font-size:14px;font-weight:500;text-align:center;border:none;background-color:transparent;border-radius:4px;transition:all .2s ease;flex:1;cursor:pointer}.mobile-tab.active{background-color:#8b4513;color:#fff;box-shadow:0 1px 3px #0003}.content-containers{position:relative;width:100%}.canvas-container,.video-container{width:100%;height:100%;margin-bottom:15px;transition:opacity .2s ease;overflow:hidden;position:relative}.canvas-container.inactive,.video-container.inactive{position:absolute;top:0;left:0;visibility:hidden;opacity:0;pointer-events:none}.canvas-container.active,.video-container.active{position:relative;visibility:visible;opacity:1;pointer-events:auto}.canvas-container iframe,.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}@media (max-width: 768px){.sidebar,.main-content,.details-sidebar{width:100%;height:calc(100vh - 60px);overflow-y:auto;padding:.4em}.main-content{padding-top:10px}.canvas-container{margin-bottom:10px}}@media (max-width: 480px){.mobile-control-panel .beat-controls-section{grid-template-columns:1fr 1fr}.mobile-control-panel .beat-controls-section .fancy-button{font-size:.7rem}}.current-beat-indicator{text-align:center;font-weight:700;padding:5px 0;margin-bottom:10px;color:#2c1810;background-color:#fdfbf7;border-radius:4px;box-shadow:0 1px 3px #0000001a}.mobile-control-panel{display:flex;flex-direction:column;gap:12px;padding:12px;background-color:#e8e1d5;border-radius:4px;margin-bottom:15px;box-shadow:0 2px 5px #0000001a}.mobile-control-panel .beat-controls-section{display:flex;flex-wrap:wrap;gap:8px;flex-direction:column}.mobile-control-panel .beat-controls-section .fancy-button{width:auto;font-size:.85rem;padding:8px;text-transform:none;letter-spacing:normal;min-height:36px}@media (max-width: 400px){.mobile-control-panel .beat-controls-section .fancy-button{font-size:.75rem;padding:6px;min-height:32px}}.foot-selection,.control-buttons{display:flex;flex-direction:row}.step-pattern-section{display:flex;flex-wrap:wrap;gap:8px}.step-pattern-section .step-pattern-buttons{display:flex;flex-direction:column;gap:8px;width:100%}.step-pattern-section .step-pattern-buttons .pattern-group{display:flex;gap:8px}.step-pattern-section .step-pattern-buttons .pattern-group .step-pattern-button{flex:1;font-size:.75rem;padding:6px;min-height:32px}@media (max-width: 400px){.step-pattern-section .step-pattern-buttons .step-pattern-button{font-size:.7rem;padding:5px;min-height:30px}}.step-pattern-section.mobile{display:flex;flex-wrap:wrap;gap:8px}.step-pattern-section.mobile .step-pattern-buttons{display:flex;flex-direction:column;gap:8px;width:100%}.step-pattern-section.mobile .pattern-group{display:flex;gap:8px}.step-pattern-section.mobile .step-pattern-button{flex:1;font-size:.75rem;padding:6px;min-height:32px}@media (max-width: 400px){.mobile-control-panel .beat-controls-section .fancy-button{font-size:.75rem;padding:6px;min-height:32px}.step-pattern-section.mobile .step-pattern-button{font-size:.7rem;padding:5px;min-height:30px}}.foot-editor{background-color:#fdfbf7;border:1px solid #d4c9b7;border-radius:4px;overflow:hidden;margin-bottom:12px}.foot-editor .foot-states{padding:12px}.multi-choice-container{display:flex;width:100%;background-color:#fdfbf7;border:1px solid #d4c9b7;border-radius:4px;overflow:hidden}.multi-choice-container.horizontal{flex-direction:row}.multi-choice-container.horizontal .multi-choice-button:not(:last-child){border-right:1px solid #d4c9b7}.multi-choice-container.vertical{flex-direction:column}.multi-choice-container.vertical .multi-choice-button:not(:last-child){border-bottom:1px solid #d4c9b7}.multi-choice-container .multi-choice-button{flex:1;padding:8px 12px;min-height:36px;background:none;border:none;color:#2c1810;font-family:Quicksand,sans-serif;cursor:pointer;font-size:14px;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.multi-choice-container .multi-choice-button:hover{background-color:#e8e1d5}.multi-choice-container .multi-choice-button.active{background-color:#8b4513;color:#fdfbf7}.multi-choice-container .multi-choice-button .metadata-label{position:absolute;top:1px;left:50%;transform:translate(-50%);font-size:10px;opacity:.7}@media (max-width: 400px){.multi-choice-container .multi-choice-button{padding:6px 8px;font-size:12px}}.icon-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:4px;font-weight:500;transition:all .2s ease;cursor:pointer;border:1px solid transparent}.icon-button .button-icon{width:16px;height:16px}.icon-button .button-text{font-size:14px}.icon-button:disabled{opacity:.5;cursor:not-allowed}.icon-button.primary{background-color:#8b4513;color:#fdfbf7}.icon-button.primary:hover:not(:disabled){background-color:#723a0f}.icon-button.secondary{background-color:#fdfbf7;color:#2c1810}.icon-button.secondary:hover:not(:disabled){background-color:#e8e1d5}.icon-button.danger{background-color:#a83232;color:#fdfbf7}.icon-button.danger:hover:not(:disabled){background-color:#8a2828}@media (max-width: 768px){.icon-button{padding:6px 12px}.icon-button .button-icon{width:14px;height:14px}.icon-button .button-text{display:none}}.simple-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:none;border-radius:4px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;background-color:#8b4513;color:#fdfbf7}.simple-button:hover:not(:disabled){background-color:#723a0f}.simple-button:disabled{opacity:.6;cursor:not-allowed}.simple-button.button-secondary{background-color:#fdfbf7;color:#2c1810}.simple-button.button-secondary:hover:not(:disabled){background-color:#e8e1d5}.simple-button.button-danger{background-color:#a83232}.simple-button.button-danger:hover:not(:disabled){background-color:#8a2828}.simple-button.compact{padding:6px 10px;font-size:.8rem;min-height:32px}.simple-button .simple-button-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 400px){.simple-button{padding:6px 10px;font-size:.8rem}.simple-button.compact{padding:4px 8px;font-size:.75rem;min-height:28px}}.youtube-player-container{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden}.youtube-player-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}