:root{--color-primary:#00796b;--color-primary-light:#4db6ac;--color-primary-dark:#004d40;--color-primary-hover:#07b178;--color-white:#ffffff;--color-black:#000000;--color-gray-50:#fafafa;--color-gray-100:#f5f5f5;--color-gray-200:#e0e0e0;--color-gray-300:#d1d1d1;--color-gray-400:#b0b0b0;--color-gray-500:#909090;--color-gray-600:#606060;--color-gray-700:#404040;--color-gray-800:#303030;--color-gray-900:#1a1a1a;--color-success:#51cf66;--color-error:#ff6b6b;--color-warning:#ffd43b;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"Courier New",Courier,monospace;--font-size-xs:12px;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:18px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:32px;--font-size-4xl:40px;--line-height-tight:1.25;--line-height-base:1.5;--line-height-relaxed:1.75;--line-height-editor:3;--border-radius-sm:6px;--border-radius-md:10px;--border-radius-lg:16px;--border-radius-xl:20px;--border-radius-full:9999px;--border-width-thin:1px;--border-width-base:2px;--border-width-thick:3px;--shadow-xs:0 1px 2px rgba(0,0,0,0.05);--shadow-sm:0 2px 4px rgba(0,0,0,0.1);--shadow-md:0 4px 12px rgba(0,0,0,0.12);--shadow-lg:0 8px 24px rgba(0,0,0,0.15);--shadow-xl:0 12px 40px rgba(0,0,0,0.2);--shadow-primary:0 4px 16px rgba(0,121,107,0.25);--glass-bg:rgba(255,255,255,0.85);--glass-bg-dark:rgba(0,69,61,0.85);--glass-border:rgba(255,255,255,0.2);--glass-blur:blur(20px);--z-base:1;--z-dropdown:100;--z-sticky:500;--z-modal:1000;--z-toast:2000}html{background-color:black}body{margin:0;padding:0;min-height:100vh;background-size:100% 100%;background-repeat:no-repeat;background-attachment:fixed;display:flex;flex-direction:column;align-items:center;font-family:var(--font-sans);background-image:url(/images/back11.png);background-size:cover;background-position:50%;background-blend-mode:overlay}.editor-header button,.header-toolbar-desktop button,.mobile-menu button,button{font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:600;padding:var(--space-2) var(--space-4);border-radius:var(--border-radius-md);border:var(--border-width-thin) solid transparent;cursor:pointer;transition:all .2s ease;outline:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:var(--color-primary);color:var(--color-white);box-shadow:var(--shadow-sm)}.editor-header button:hover,.header-toolbar-desktop button:hover,.mobile-menu button:hover,button:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.editor-header button:active,.header-toolbar-desktop button:active,.mobile-menu button:active,button:active{transform:translateY(0);box-shadow:var(--shadow-xs)}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.button-secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}.button-secondary:hover{background:var(--color-primary);color:var(--color-white)}.app{min-height:100vh;width:100%;display:flex;flex-direction:column;box-sizing:border-box;background:transparent}.app:not(.jam-background){justify-content:space-between}.app:not(.jam-background) .editor-container{flex:1 1;display:flex;flex-direction:column;justify-content:center;padding:var(--space-6) 0}.jam-background{background:black}#songTitle{background:rgba(79,79,79,.256);border:var(--border-width-thin) solid var(--glass-border);border-radius:var(--border-radius-md);padding:var(--space-3);font-size:var(--font-size-xl);font-family:var(--font-sans);color:white;text-align:center;max-width:650px;width:100%;flex:1 1 100%;transition:all .2s ease;box-sizing:border-box}#songTitle:focus{background:rgba(65,65,65,.8);border-color:var(--color-primary);box-shadow:var(--shadow-primary);outline:none}#songTitle::placeholder{color:#fbfafab4}.song-metadata{gap:var(--space-3);width:100%;max-width:650px;align-items:center}.metadata-tags,.song-metadata{display:flex;flex-wrap:wrap;justify-content:center}.metadata-tags{gap:var(--space-2);margin:var(--space-1) 0;flex:0 1 auto}.metadata-tag{display:inline-flex;align-items:center;background:rgba(1,91,80,.2);border:1px solid rgba(4,73,65,.687);border-radius:20px;padding:.4rem .9rem;font-size:var(--font-size-sm);color:rgba(255,255,255,.9);transition:all .2s ease}.metadata-tag:hover{background:rgba(0,121,107,.3);border-color:rgba(0,121,107,.6)}.metadata-tag .tag-label{font-weight:600;margin-right:.3rem;color:#4db6ac}[dir=rtl] .metadata-tag .tag-label{margin-right:0;margin-left:.3rem}.song-image-container{display:flex;justify-content:center;align-items:center;margin:0;flex:0 0 auto}.song-image{width:60px;height:60px;object-fit:cover;border-radius:8px;border:2px solid rgba(0,121,107,.4);box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .2s ease}.song-image:hover{transform:scale(1.05)}.container{width:500px;max-width:98%;display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:0 1%}#editor{position:relative;max-width:100%;font-family:var(--font-mono);font-size:var(--font-size-xl);line-height:var(--line-height-editor);padding:var(--space-4) var(--space-3);background:transparent;background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(var(--line-height-editor) * 1em - 1px),rgba(111,111,111,.658) calc(var(--line-height-editor) * 1em - 1px),rgba(0,0,0,.945) calc(var(--line-height-editor) * 1em));min-height:300px;color:var(--color-black);box-sizing:border-box;letter-spacing:1px;overflow-wrap:break-word;border:none;border-radius:0}#editor,#editor:focus,.chorded{outline:none}.chorded{position:relative;display:inline-block;background-color:transparent;padding:0 2px;min-height:1em;vertical-align:bottom;border:none;box-shadow:none}.chorded:before{content:attr(data-chord);position:absolute;bottom:67%;left:50%;transform:translateX(-50%);font-size:19px;font-weight:700;line-height:1;background:var(--color-primary);color:var(--color-white);padding:var(--space-1) var(--space-2);border-radius:var(--border-radius-sm);white-space:nowrap;margin-bottom:3px;z-index:10;box-shadow:var(--shadow-sm);letter-spacing:normal;min-height:1em}#chordInput{position:absolute;z-index:1000;background:rgba(255,255,255,.95);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--border-width-base) solid var(--color-primary);border-radius:var(--border-radius-md);padding:var(--space-2);font-size:var(--font-size-base);font-family:var(--font-sans);width:110px;box-shadow:var(--shadow-lg);transition:all .2s ease;max-width:90vw;outline:none}#chordInput:focus{background:var(--color-white);box-shadow:var(--shadow-xl),0 0 0 3px rgba(0,121,107,.2);outline:none}#chordInput::placeholder{color:var(--color-gray-500)}.button-group{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0}.button-group button{width:100px;height:40px;font-size:14px;background-color:#00796b;color:white;border:2px solid gray;border-radius:12px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;font-weight:700}.button-group button:hover{background-color:#07b178;transform:translateY(-2px)}.button-group button:active{background-color:#00796b;transform:translateY(1px)}.full-width{width:500px;max-width:90%}.editor-wrapper{position:-webkit-sticky;position:sticky;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:20px;flex-wrap:nowrap}#editor{word-break:break-word;white-space:pre-wrap;direction:rtl;max-width:650px;width:100%;overflow-y:auto;color:var(--color-gray-100)}#editor[empty]:before{content:attr(data-placeholder);position:relative;color:#adadad;pointer-events:none;font-size:20px;font-style:italic;opacity:.6}.explanation-panel{position:static;margin:var(--space-4) auto;width:90%;max-width:650px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:var(--space-2) var(--space-6);border-radius:var(--border-radius-lg);color:var(--color-black);font-family:var(--font-sans);font-size:var(--font-size-lg);box-shadow:var(--shadow-md);line-height:var(--line-height-relaxed);text-align:right;transition:all .3s ease;border:var(--border-width-thin) solid var(--glass-border);box-sizing:border-box}.explanation-panel.open{padding:var(--space-6) var(--space-6)}.explanation-panel h3{color:var(--color-primary);font-size:var(--font-size-xl);font-weight:600;margin:0;text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--space-2);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:color .2s ease}.explanation-panel h3:hover{color:var(--color-primary-hover)}.explanation-panel ul{list-style-position:inside;padding:0;margin:0;margin-top:var(--space-4);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.toggle-icon{font-size:var(--font-size-sm)}.logo-container,.logo-container2{justify-content:center}.logo-container2{display:flex}.toolbar-logo{width:40%;object-fit:contain;margin-top:10px}.copyright-notice{text-align:center;margin-bottom:10px;padding:20px;line-height:1.8;font-size:12px;color:#888}::selection{background:#000000c5;color:rgb(255,255,255)}.email-button-container{text-align:center;margin:10px 0}.landing-section{color:#ebebeb;font-size:15px;font-family:sans-serif;padding-bottom:5px}.email-button{background-color:#00796b75;color:white;padding:10px 20px;border-radius:8px;text-decoration:none;font-size:12px;display:inline-block;border:2px solid #ffffff50;font-weight:700}.editor.jam{background:rgba(0,0,0,.256)!important;background-image:none!important;border:none!important;font-size:1.4em!important;color:rgb(255,255,255)!important;margin:0 auto!important}.editor.jam .chorded:before{background-color:transparent!important;color:#02b39e;font-size:20px;font-weight:700}.editor.jam-chords-only{color:transparent!important}.editor.jam-lyrics-only .chorded:before{display:none!important}.editor.jam-chords-only .chorded{color:transparent!important;text-shadow:none!important;position:relative;white-space:pre}.editor.jam-cols-2{column-count:2;column-gap:4rem}.editor.jam-cols-1{column-count:1}.jam-title{align-items:center;text-align:center;font-size:30px;font-weight:700;margin-top:2rem;color:#d6d6d6}.auto-scroll-controls{position:fixed;bottom:var(--space-5);right:400px;background:var(--color-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--space-4);border-radius:var(--border-radius-lg);border:var(--border-width-thin) solid rgba(255,255,255,.2);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);z-index:9999}.auto-scroll-controls button{min-width:120px;padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:600;background:rgba(255,255,255,.2);border:var(--border-width-thin) solid rgba(255,255,255,.3);color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;transition:all .25s ease;box-shadow:var(--shadow-sm)}.auto-scroll-controls button:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);box-shadow:var(--shadow-md)}.auto-scroll-controls button:active{transform:translateY(0);box-shadow:var(--shadow-xs)}.auto-scroll-controls input[type=range]{width:120px;accent-color:var(--color-white)}.title-container{width:100%;padding:var(--space-4) var(--space-3);box-sizing:border-box;margin:0;border-bottom:var(--border-width-thin) solid var(--glass-border);background-color:#ffffff15}.social-icons-bar,.title-container{display:flex;justify-content:center}.social-icons-bar{gap:15px;margin:30px 0 10px}.social-icon{width:60px;height:60px;border-radius:12px;transition:transform .2s ease;cursor:pointer}.social-icon:hover{transform:scale(1.1)}.editor-container-with-toggle{width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;overflow:hidden}.editor-box{width:100%;max-width:700px;border:var(--border-width-thin) solid var(--glass-border);border-radius:var(--border-radius-lg);background:rgba(255,255,255,.297);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-lg);overflow:hidden}.jam-editor-box{width:100%;max-width:100%;border:none;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:hidden}.floating-editor-mode-toggle{position:fixed;left:calc(50% + 370px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:500;background:rgba(205,205,205,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--border-radius-md);padding:var(--space-2);border:var(--border-width-thin) solid rgba(255,255,255,.2);box-shadow:var(--shadow-lg);transition:box-shadow .2s ease}.floating-editor-mode-toggle:active{box-shadow:0 8px 24px rgba(0,121,107,.3)}.drag-handle{text-align:center;color:rgba(0,121,107,.5);font-size:14px;line-height:8px;cursor:-webkit-grab;cursor:grab;margin-bottom:4px;letter-spacing:2px;padding:4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:none;-webkit-touch-callout:none}.drag-handle:active{cursor:-webkit-grabbing;cursor:grabbing;color:rgba(0,121,107,.8)}.floating-editor-mode-toggle button{min-width:90px;padding:10px 12px;border-radius:var(--border-radius-md);border:var(--border-width-thin) solid rgba(0,121,107,.2);background:rgba(255,255,255,.5);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-size:14px;font-weight:600;font-family:var(--font-sans);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;color:var(--color-gray-700);box-shadow:none}.floating-editor-mode-toggle button.active{background:var(--color-primary);color:var(--color-white);box-shadow:0 4px 12px rgba(0,121,107,.4);transform:scale(1.05);border-color:var(--color-primary);font-weight:700}.floating-editor-mode-toggle button:hover:not(.active){background:rgba(255,255,255,.8);transform:translateY(-2px);box-shadow:var(--shadow-md)}[dir=rtl] .floating-editor-mode-toggle{left:calc(50% - 370px - 110px)}.logout-button-div{margin-top:20px;align-self:center}.login-button{background-color:#000000;color:white;padding:10px;border:2px solid gray;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.login-button:hover{background-color:#07b178;transform:translateY(-2px)}.login-button:active{background-color:#005f56;transform:translateY(1px)}.footer{background:rgba(0,0,0,.548);text-align:center;justify-items:center;border-top:1px solid rgba(0,121,107,.2);width:100%!important;margin-top:auto}.footer-content{justify-content:center;align-items:center;justify-self:center}.footer-links a{justify-self:center;color:#4db6ac;text-decoration:none;margin:0 15px;transition:color .3s ease}.footer-links a:hover{color:#ffffff}@media (max-width:900px){.footer-links a{font-size:14px}.email-button{font-size:11px}.editor-container-with-toggle{padding:0;flex-direction:column;align-items:center;max-width:98%}#editor,.editor-container-with-toggle{box-sizing:border-box;width:100%}.social-icon{width:50px;height:50px}.auto-scroll-controls{right:10px;left:10px;width:auto;bottom:0;flex-direction:row;align-items:center}.landing-section{font-size:11px;padding-left:10px;padding-right:10px}.editor.jam{font-size:1em!important}.jam-title{font-size:25px;padding-bottom:5px}.editor.jam .chorded:before{font-size:15px}.editor.jam-cols-2{font-size:10px!important;line-height:3.5em}.editor.jam-cols-2 .chorded{background-color:none!important}.editor.jam-cols-2 .chorded:before{margin-bottom:2px;font-size:10px}.toolbar-logo{width:100%}.copyright-notice{font-size:10px;padding-left:50px;padding-right:50px;line-height:1.8}.chorded:before{font-size:14px;font-weight:700}.button-group button{width:80px;height:40px;font-size:11px;padding:3px}.editor-container{justify-content:center}.editor-container,.editor-wrapper{flex-direction:column;align-items:center}#editor[empty]:before{font-size:13px}.explanation-panel{position:static;width:80%;margin-top:20px;max-width:98%;height:100%;font-size:14px;line-height:2.4;letter-spacing:1px;font-weight:700}#editor{width:98%;max-width:98%}.button-group{margin:10px;flex-wrap:wrap;justify-content:center;padding-bottom:5px;font-size:10px}.button-group button{width:110px;height:30px}#songTitle{width:98%;max-width:600px;font-size:20px}#songTitle::placeholder{font-size:18px;font-style:italic}}@media print{body *{visibility:hidden}body,html{margin:0;padding:0;height:100%;overflow:hidden}#printContainer{display:block!important;visibility:visible;position:absolute;top:-20px;left:0;background:white;width:100%;padding:0;z-index:9999;box-sizing:border-box;overflow:hidden}@page{margin:0 10mm 0 10mm;padding:10mm}.print-content .chorded{position:relative;display:inline-block;min-width:2em;padding:0 6px;page-break-inside:avoid;break-inside:avoid}#printContainer *{visibility:visible}}.printable-area{font-family:Noto Sans Hebrew,Arial,sans-serif;font-size:16px;color:#000;line-height:3em;direction:rtl;page-break-inside:avoid}.print-title{font-size:26px;font-weight:700;padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid #e0e0e0}.print-metadata,.print-title{text-align:center;page-break-inside:avoid}.print-metadata{margin-bottom:20px;padding-bottom:12px}.print-artist,.print-composer,.print-custom,.print-tempo{text-align:center;font-size:13px;color:#555;page-break-inside:avoid;margin:2px 0;line-height:1.6}.print-artist,.print-composer{font-weight:500}.print-tempo{font-style:italic;color:#666}.print-custom{font-style:italic;color:#777;margin-bottom:16px}.print-content .chorded:before{color:#00796b;font-weight:700;white-space:nowrap;position:absolute;text-align:center;overflow:hidden;box-shadow:none;white-space:normal}.chord-suggestions{position:absolute;top:calc(100% + 5px);left:0;background-color:#f8faff;border:2px solid #00796b;border-radius:6px;list-style:none;padding:0;margin:0;width:110px;max-height:200px;overflow-y:auto;z-index:1001;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.15);color:#333333;min-height:200px}.chord-suggestions li{padding:6px 10px;cursor:pointer}.chord-suggestions li.highlighted,.chord-suggestions li:hover{background-color:#bde5d9;font-weight:700}.logo-footer{display:none;align-items:center;justify-content:center;gap:12px;margin-top:20px;font-size:14px;font-weight:700;color:#333}@media print{.logo-footer{display:flex}#printLogo{max-height:40px}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}[dir=ltr] #editor{direction:ltr}[dir=ltr] .explanation-panel{text-align:left}[dir=ltr] .printable-area{direction:ltr}.language-switcher{display:flex;gap:10px;align-items:center}.lang-button{background:rgba(0,121,107,.2);color:white;border:2px solid rgba(0,121,107,.5);border-radius:8px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lang-button:hover{background:rgba(0,121,107,.4);border-color:#00796b;transform:translateY(-2px)}.lang-button.active{background:#00796b;border-color:#00796b;box-shadow:0 4px 12px rgba(0,121,107,.3)}.lang-button:active{transform:translateY(0)}.editor-header{position:-webkit-sticky;position:sticky;top:0;left:0;width:100%;z-index:1000;background:rgba(0,69,61,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid rgba(0,59,52,.5);box-shadow:0 2px 10px rgba(0,0,0,.15)}.editor-header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;max-width:100%;margin:0 auto;gap:20px;position:relative}.header-left{gap:15px;flex-shrink:0;z-index:2}.header-left,.header-logo-link{display:flex;align-items:center}.header-logo-link{transition:opacity .2s ease}.header-logo-link:hover{opacity:.85}.header-logo{height:40px;width:auto;object-fit:contain}.header-social-icons{display:flex;gap:8px;align-items:center}.header-social-icon{width:30px;height:30px;object-fit:contain;transition:transform .2s ease}.header-social-icon:hover{transform:scale(1.1)}.header-toolbar-desktop{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:nowrap;align-items:center;position:absolute;left:50%;transform:translateX(-50%);z-index:1}.header-toolbar-desktop button{min-width:90px;height:38px;font-size:var(--font-size-sm);font-family:var(--font-sans);background:var(--color-primary);color:var(--color-white);border:var(--border-width-thin) solid rgba(255,255,255,.15);border-radius:var(--border-radius-md);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:600;padding:0 var(--space-4);box-shadow:var(--shadow-sm);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1)}.header-toolbar-desktop button:hover{background:var(--color-primary-hover);transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-md);border-color:rgba(255,255,255,.3)}.header-toolbar-desktop button:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-xs)}.header-right{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;z-index:2}.header-sign-out{min-width:100px;height:38px;font-size:var(--font-size-sm);font-family:var(--font-sans);background:rgba(0,0,0,.65);color:var(--color-white);border:var(--border-width-thin) solid rgba(255,255,255,.2);border-radius:var(--border-radius-md);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:600;padding:0 var(--space-4);white-space:nowrap;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center}.header-sign-out:hover{background:rgba(0,0,0,.85);transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-md);border-color:rgba(255,255,255,.35)}.header-sign-out:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-xs)}.hamburger-icon,.header-menu-toggle,.mobile-menu-overlay{display:none}.jam-background .editor-header{background:rgba(37,37,37,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #71717180}.auto-scroll-controls{z-index:999}@media (max-width:768px){.metadata-tag{display:inline-flex;align-items:center;background:rgba(1,91,80,.2);border:1px solid rgba(4,73,65,.687);border-radius:20px;padding:.4rem .9rem;font-size:10px;color:rgba(255,255,255,.9);transition:all .2s ease}.song-image{width:30px;height:30px}.editor-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1000!important}.editor-header-inner{padding:8px 12px!important;gap:12px!important;justify-content:flex-start!important;position:static!important}.header-left{display:flex!important;align-items:center!important;gap:12px!important;order:1!important}.header-left,.header-right{flex:0 1!important;position:static!important;z-index:auto!important}.header-right{margin-left:auto!important;order:2!important}.hamburger-icon{display:flex!important;flex-direction:column;justify-content:space-around;width:28px;height:24px;cursor:pointer;z-index:1003;order:0;margin-right:8px}.hamburger-icon span{width:100%;height:3px;background-color:white;border-radius:2px;transition:all .3s ease}.header-menu-toggle:checked~.hamburger-icon span:first-child{transform:rotate(45deg) translate(6px,6px)}.header-menu-toggle:checked~.hamburger-icon span:nth-child(2){opacity:0}.header-menu-toggle:checked~.hamburger-icon span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.header-logo{height:32px}.header-social-icons{display:none!important}.header-toolbar-desktop{display:none!important;position:static!important;transform:none!important}.header-sign-out{display:none!important}.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);display:none;z-index:1002;overflow-y:auto}.header-menu-toggle:checked~.mobile-menu-overlay{display:block}.mobile-menu{position:relative;background:linear-gradient(135deg,#00796b,#004d40);width:80%;max-width:300px;height:100vh;max-height:100dvh;padding:70px 0 0;display:flex;flex-direction:column;box-shadow:4px 0 20px rgba(0,0,0,.3);overflow:hidden;box-sizing:border-box}[dir=rtl] .mobile-menu{margin-left:auto}.mobile-menu-items{flex:1 1;overflow-y:auto;overflow-x:hidden;padding:0 20px 8px;display:flex;flex-direction:column;gap:10px;min-height:0;max-height:calc(100vh - 200px)}.mobile-menu button{width:100%;height:46px;font-size:var(--font-size-base);font-family:var(--font-sans);background:var(--color-primary);color:var(--color-white);border:var(--border-width-thin) solid rgba(255,255,255,.2);border-radius:var(--border-radius-md);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.mobile-menu button:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:scale(1.02)}.mobile-menu button:active{background:var(--color-primary-dark);box-shadow:var(--shadow-xs);transform:scale(.98)}.mobile-sign-out{background:rgba(0,0,0,.65)!important;border-color:rgba(255,255,255,.3)!important;flex-shrink:0;margin:8px 20px 15px;min-height:46px;width:calc(100% - 40px)!important}.mobile-sign-out:hover{background:rgba(0,0,0,.85)!important}.header-right .language-switcher{gap:4px}.header-right .lang-button{padding:6px 10px;font-size:11px;min-width:32px}.header-right .header-tutorial-button{padding:6px 10px;font-size:11px;min-width:80px}body{align-items:stretch!important;padding:0 15px!important}.app{overflow-x:hidden}.app,.app:not(.jam-background) .editor-container,.editor-wrapper{width:100%!important;max-width:100vw!important;padding:0!important;margin:0!important}.editor-wrapper{align-items:stretch!important}.editor-box{width:100%!important;max-width:100vw!important;margin:80px 0 0!important;border-radius:0;border:none;border-bottom:var(--border-width-thin) solid var(--glass-border);min-height:calc(50vh - 56px)}.editor-container-with-toggle{padding:0!important;margin:0!important}#editor,.editor-container-with-toggle{width:100%!important;max-width:100vw!important;box-sizing:border-box;overflow-x:hidden}#editor{padding:var(--space-3) var(--space-2);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}#editor,#songTitle{font-size:var(--font-size-lg)}#songTitle{width:100%!important;max-width:100vw!important;padding:var(--space-2);margin:0;box-sizing:border-box}.floating-editor-mode-toggle{left:auto;right:10px;top:auto;bottom:150px;transform:none}[dir=rtl] .floating-editor-mode-toggle{right:auto;left:10px}.floating-editor-mode-toggle button{min-width:80px;padding:8px 10px;font-size:12px;gap:4px}.explanation-panel{width:calc(100% - 10px)!important;max-width:calc(100% - 10px)!important;margin:20px 5px;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-base);box-sizing:border-box}.explanation-panel.open{padding:var(--space-4) var(--space-4)}.explanation-panel h3{font-size:var(--font-size-base)}.explanation-panel ul{font-size:var(--font-size-sm);margin-top:var(--space-3)}.app:not(.jam-background),body,main{padding-top:0!important}.footer,main{margin-top:0!important}.footer{width:100vw!important;margin-left:-15px!important;margin-right:-15px!important;padding-left:15px!important;padding-right:15px!important;box-sizing:border-box}}[dir=rtl] .editor-header-inner{flex-direction:row-reverse}@media (max-width:768px){[dir=rtl] .editor-header-inner{flex-direction:row!important}[dir=rtl] .hamburger-icon{order:0!important;margin-right:0!important;margin-left:8px!important}[dir=rtl] .header-right{margin-left:0!important;margin-right:auto!important}}[dir=rtl] .mobile-menu{box-shadow:-4px 0 20px rgba(0,0,0,.3)}.metronome-container{display:inline-flex;align-items:center;gap:var(--space-2)}.metronome-controls{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:rgba(255,255,255,.1);border-radius:var(--border-radius-md);border:1px solid rgba(255,255,255,.2)}.metronome-controls label{margin:0;white-space:nowrap}.metronome-bpm-input,.metronome-controls label{color:white;font-size:var(--font-size-sm);font-weight:600}.metronome-bpm-input{width:70px;height:38px;padding:var(--space-2) var(--space-2);border-radius:var(--border-radius-sm);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.2);text-align:center;transition:all .2s ease;box-sizing:border-box}.metronome-bpm-input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.3)}.metronome-bpm-input::placeholder{color:rgba(255,255,255,.6)}.metronome-play-button{min-width:80px!important;height:38px!important;padding:var(--space-2) var(--space-3)!important;font-size:var(--font-size-sm)!important;font-weight:600!important;background:rgba(255,255,255,.2)!important;border:1px solid rgba(255,255,255,.3)!important;color:white!important;border-radius:var(--border-radius-md)!important;cursor:pointer;transition:all .2s ease;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.metronome-play-button:hover{background:rgba(255,255,255,.3)!important;transform:translateY(-1px)}.metronome-play-button.playing{background:var(--color-warning)!important;border-color:var(--color-warning)!important}.metronome-close-button{min-width:38px!important;width:38px;height:38px;padding:0!important;font-size:var(--font-size-lg)!important;font-weight:600!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.2)!important;color:white!important;border-radius:var(--border-radius-sm)!important;cursor:pointer;transition:all .2s ease;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.metronome-close-button:hover{background:rgba(255,0,0,.3)!important;border-color:rgba(255,0,0,.5)!important}.floating-metronome{position:fixed;top:70px;right:10px;z-index:var(--z-sticky);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.floating-metronome{top:60px;left:auto;right:10px;display:flex;justify-content:flex-end}.metronome-container{width:auto}.metronome-label{display:none!important}.metronome-controls{width:auto;gap:3px;padding:0;background:transparent;border:none}.metronome-bpm-input{width:34px!important;min-width:34px;max-width:34px;height:34px!important;padding:6px 4px!important;font-size:11px!important;background:rgba(0,121,107,.2);border:2px solid rgba(0,121,107,.5);border-radius:8px;box-sizing:border-box}.metronome-bpm-input:focus{background:rgba(0,121,107,.3);border-color:#00796b}.metronome-play-button{min-width:34px!important;width:34px!important;height:34px!important;padding:6px!important;font-size:14px!important;background:rgba(0,121,107,.2)!important;border:2px solid rgba(0,121,107,.5)!important;border-radius:8px!important;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.metronome-play-button:hover{background:rgba(0,121,107,.4)!important;border-color:#00796b!important}.metronome-play-button.playing{background:#00796b!important;border-color:#00796b!important;box-shadow:0 4px 12px rgba(0,121,107,.3)}.metronome-close-button{min-width:34px!important;width:34px!important;height:34px!important;padding:6px!important;font-size:16px!important;background:rgba(0,121,107,.2)!important;border:2px solid rgba(0,121,107,.5)!important;border-radius:8px!important;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.metronome-close-button:hover{background:rgba(255,0,0,.3)!important;border-color:rgba(255,0,0,.5)!important}}.header-toolbar-desktop button.active,.mobile-menu button.active{box-shadow:0 0 0 2px rgba(255,255,255,.3)}