*{box-sizing:border-box}:root{--page:#f4f4f4;--surface:#ffffff;--text:#1a1a1a;--muted:#666666;--line:#e0e0e0;--accent:#F97316;--accent-button:#EA580C;--accent-dark:#C2410C;--soft:#f0f0f0;--notice-bg:#fff3cd;--notice-border:#ffc107;--notice-text:#856404;--contact-bg:#e7f3ff;--contact-border:#0066cc;--code-bg:#f1f3f5;--badge-bg:#f1f7ee;--badge-border:#d8e4d3;--badge-text:#4e7949;--on-accent:#121212;--container:1180px;color-scheme:light}[data-theme=dark]{--page:#121212;--surface:#1e1e1e;--text:#e8e8e8;--muted:#aaaaaa;--line:rgba(255, 255, 255, 0.06);--accent:#F97316;--accent-hover:#EA580C;--accent-dark:#C2410C;--soft:#2a2a2a;--notice-bg:#3d3418;--notice-border:#ffd166;--notice-text:#ffd166;--contact-bg:#1a2d4a;--contact-border:#4da6ff;--code-bg:#2d3748;--badge-bg:#293a28;--badge-border:#4d6c49;--badge-text:#b9e3b3;--on-accent:#121212;color-scheme:dark}html{scroll-behavior:smooth}body{margin:0;-webkit-text-size-adjust:100%;background:var(--page);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.65}button,input{font:inherit}button{cursor:pointer;transition:transform 160ms ease-out,opacity 160ms ease-out,background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out}button:not(:disabled):active{transform:scale(.97)}button:disabled{cursor:not-allowed;opacity:.55}button:disabled:focus-visible,button:disabled:hover{transform:none}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:var(--on-accent);padding:8px 16px;z-index:10000;text-decoration:none;font-weight:700;transition:top .2s}.skip-link:focus{top:0;outline:0;box-shadow:0 4px 10px rgba(0,0,0,.3)}.app-wrapper{display:flex;min-height:100vh;background:var(--page)}.main-wrapper{flex:1;min-width:0;display:flex;flex-direction:column}.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:50;display:none;opacity:0;transition:opacity .3s}.drawer-overlay.open{display:block;opacity:1}.drawer{position:fixed;top:0;left:-300px;width:280px;height:100%;background:var(--surface);z-index:60;transition:left .3s cubic-bezier(.4, 0, .2, 1);padding:24px 20px;box-shadow:4px 0 20px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow-y:auto}.drawer.open{left:0}.drawer .drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}.drawer-close{background:0 0;border:none;font-size:1.5rem;cursor:pointer;color:var(--text)}.drawer-search{padding:0 0 16px 0}.drawer-search .search-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:30px;background:var(--soft);border:1px solid transparent}.drawer-search .search-bar input{border:none;outline:0;flex:1;background:0 0;font-size:.85rem;color:var(--text)}.drawer-search .search-bar i{color:var(--muted)}.drawer-nav{display:flex;flex-direction:column;gap:6px;flex:1}.drawer-nav a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem;transition:background .15s;cursor:pointer}.drawer-nav a:hover{background:rgba(249,115,22,.08)}.drawer-nav a i{width:22px;text-align:center;font-size:1.1rem}.drawer-nav a.active{background:rgba(249,115,22,.12);color:var(--accent)}.drawer-nav a.active i{color:var(--accent)}.drawer-nav hr{border:none;border-top:1px solid var(--line);margin:8px 0}.drawer-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}.drawer .logo{gap:10px}.hamburger{display:block;flex-shrink:0;border:0;background:0 0;color:var(--text);padding:8px;font-size:1.4rem;line-height:1;min-width:36px;text-align:center}.hamburger:focus-visible,.hamburger:hover{color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}.header{background:var(--surface);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;min-height:68px;gap:42px}.logo{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--text);font-size:1.34rem;font-weight:700;letter-spacing:-.04em;text-decoration:none}.logo-img{width:32px;height:32px;object-fit:contain;display:block}.logo-text{font-size:1.25rem;font-weight:700;line-height:1;white-space:nowrap;color:var(--text)}.logo-text span{color:var(--accent)}.logo i{color:var(--accent)}.header-search{display:flex;align-items:center;width:205px;height:34px;margin-left:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}.header-search:focus-within{border-color:var(--accent);outline:2px solid rgba(249,115,22,.22);outline-offset:1px}.header-search>span{padding-left:10px;color:var(--muted);font-size:1.1rem;line-height:1}.header-search input{width:100%;min-width:0;border:0;outline:0;background:0 0;color:var(--text);padding:6px 9px;font-size:.82rem}.mobile-menu-button{display:none;border:0;background:0 0;color:var(--text);padding:8px;font-size:1.25rem}.mobile-menu-button:focus-visible,.mobile-menu-button:hover{color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.mobile-nav{display:none;padding-bottom:14px}.mobile-nav[hidden]{display:none}.mobile-nav a{display:block;padding:6px 0}.genre-filter-section{background:var(--surface);border-bottom:1px solid var(--line);padding:24px 0}.section-subtitle{font-size:1.1rem;margin:0 0 16px;color:var(--text)}.genre-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.genre-filters button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);padding:5px 11px;font-size:.78rem;transition:border-color 160ms ease-out,background-color 160ms ease-out,color 160ms ease-out}.genre-filters button.active,.genre-filters button:focus-visible,.genre-filters button:hover{border-color:var(--accent-button);background:var(--accent-button);color:var(--on-accent)}.genre-filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.popular-section{margin:32px 0;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:20px}.section-header-with-link{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-header-with-link h2{margin:0;font-size:1.2rem;color:var(--text)}.view-all-link{font-size:.85rem;color:var(--accent);text-decoration:none;font-weight:500}.view-all-link:focus-visible,.view-all-link:hover{text-decoration:underline;color:var(--accent-dark)}.popular-songs-list{display:flex;flex-direction:column;gap:8px}.popular-song-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text);transition:transform 160ms ease-out,border-color 160ms ease-out}.popular-song-row:focus-visible,.popular-song-row:hover{transform:translateX(4px);border-color:var(--accent)}.popular-rank{font-size:.85rem;font-weight:700;color:var(--accent);min-width:24px;text-align:center}.popular-song-main{flex:1;overflow:hidden}.popular-song-title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popular-song-artist{font-size:.8rem;color:var(--muted)}.popular-views{font-size:.75rem;color:var(--muted);white-space:nowrap}.alphabet-section{border-bottom:1px solid var(--line)}.alphabet-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;overflow-x:auto;scrollbar-width:none}.alphabet-nav::-webkit-scrollbar{display:none}.alphabet-nav a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;min-height:28px;color:var(--text);font-size:.77rem;text-decoration:none}.alphabet-nav a:focus-visible,.alphabet-nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.home-layout{padding:42px 20px 56px 20px;max-width:100%;margin:0 auto}.primary-column{max-width:900px;margin:0 auto;width:100%}.intro-block{max-width:670px;margin-bottom:52px}.intro-block h1{margin:0 0 12px;font-size:clamp(1.55rem, 2.4vw, 2rem);letter-spacing:-.035em;line-height:1.2}.intro-block p{max-width:620px;margin:0;color:var(--muted);font-size:.98rem}.content-block+.content-block{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;border-bottom:2px solid var(--accent)}.section-heading h2{margin:0;padding-bottom:8px;font-size:1.1rem;line-height:1.2}.result-count{color:var(--muted);font-size:.76rem}.link-list{border-top:1px solid var(--line)}.catalog-shell.is-loading{min-height:400px;overflow:hidden;background:repeating-linear-gradient(to bottom,transparent 0,transparent 53px,var(--line) 53px,var(--line) 54px);animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}.catalog-shell.is-loading .loading-state{position:absolute;top:12px;left:0;z-index:1;margin:0}.reference-link{display:block;min-height:44px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--accent-dark);font-size:.88rem;text-decoration:underline;text-underline-offset:3px}.reference-link:focus-visible,.reference-link:hover{background:var(--soft);color:var(--accent-dark);outline:2px solid var(--accent);outline-offset:2px}.song-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 46px 18px;gap:15px;align-items:center;min-height:54px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}.song-row:focus-visible,.song-row:hover{background:var(--soft);outline:2px solid var(--accent);outline-offset:2px}.song-main{min-width:0}.song-title{display:block;overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap;color:#e8e8e8}.song-artist{color:#aaa;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loading-state,.result-count,.song-arrow,.song-key{color:var(--muted);font-size:.78rem}.song-meta{width:fit-content;padding:1px 6px;border:1px solid var(--badge-border);border-radius:3px;background:var(--badge-bg);color:var(--badge-text);font-size:.7rem}.song-key{text-align:center}.song-arrow{color:var(--accent);font-size:1rem;text-align:right}.loading-state{margin:0;padding:18px 0}.search-results{margin-bottom:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}.search-results[hidden]{display:none}.search-results a{display:block;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}.search-results a:last-child{border-bottom:0}.search-results a:focus-visible,.search-results a:hover{background:var(--soft);color:var(--accent-dark)}.search-empty{margin:0;padding:9px 10px;color:var(--muted)}.sidebar{display:grid;gap:34px}.sidebar-block h2{border-bottom:2px solid var(--accent)}.sidebar-list{border-top:1px solid var(--line)}.sidebar-list a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--accent-dark);font-size:.82rem;text-decoration:none}.sidebar-list a:focus-visible,.sidebar-list a:hover{text-decoration:underline;text-underline-offset:3px}.footer{background-color:var(--surface);border-top:1px solid var(--line);padding:3rem 1rem 1rem;margin-top:4rem;font-size:.9rem}.footer-container{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;margin-bottom:2rem}.footer-section{display:flex;flex-direction:column}.footer-brand{color:var(--accent);font-size:1.3rem;font-weight:700;margin-bottom:.5rem}.footer-description{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0}.footer-section h4{color:var(--accent);font-size:.85rem;font-weight:600;margin:1rem 0 .8rem 0;text-transform:uppercase;letter-spacing:.05em}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:.5rem}.footer-links a{color:var(--muted);text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:var(--accent)}.footer-copyright{text-align:center;padding-top:2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}.footer-copyright a{color:var(--accent);text-decoration:none;transition:color .2s ease}.footer-copyright a:hover{text-decoration:underline}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start;padding-top:28px;padding-bottom:56px}.breadcrumb{display:flex;gap:9px;margin-bottom:14px;color:var(--muted);font-size:.76rem}.breadcrumb a{color:var(--accent);text-decoration:none}.breadcrumb a:focus-visible,.breadcrumb a:hover{text-decoration:underline}.detail-primary h1{margin:0;font-size:clamp(1.55rem, 2.4vw, 2rem);letter-spacing:-.035em;line-height:1.2}.detail-artist{margin:4px 0 2px;color:var(--muted)}.detail-meta{display:flex;flex-wrap:wrap;gap:7px 18px;margin-bottom:20px;color:var(--muted);font-size:.76rem}.detail-meta span+span{position:relative}.detail-meta span+span::before{position:absolute;top:50%;left:-11px;width:3px;height:3px;border-radius:50%;background:var(--accent);content:"";transform:translateY(-50%)}.control-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.autoscroll-box,.transpose-box{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.78rem}.btn-scroll,.scroll-speed button,.transpose-box button{border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--text);padding:4px 8px}.btn-scroll:focus-visible,.btn-scroll:hover,.scroll-speed button:focus-visible,.scroll-speed button:hover,.transpose-box button:focus-visible,.transpose-box button:hover{border-color:var(--accent);color:var(--accent-dark);outline:2px solid var(--accent);outline-offset:2px}#keyNow{min-width:30px;color:var(--accent-dark);font-weight:700;text-align:center}.btn-scroll.scrolling{border-color:var(--accent);color:var(--accent-dark)}.scroll-speed{display:flex;align-items:center;gap:6px}.chord-diagram-panel{display:grid;gap:14px;max-width:760px;margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}.diagram-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.eyebrow{margin:0 0 3px;color:var(--accent-dark);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.diagram-heading h2{margin:0;font-size:1.05rem}.diagram-picker-label{display:grid;gap:4px;color:var(--muted);font-size:.72rem}#diagramChord{min-width:92px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--text);font:inherit;font-weight:700}.chord-diagram{display:grid;min-height:205px;place-items:center;color:var(--muted);font-size:.82rem;text-align:center}.chord-diagram svg{width:min(100%,190px);height:auto}.diagram-title{fill:var(--text);font:700 14px "Courier New",monospace}.diagram-fret,.diagram-nut,.diagram-string{stroke:var(--muted);stroke-width:1.4;vector-effect:non-scaling-stroke}.diagram-nut{stroke:var(--text);stroke-width:4.5;stroke-linecap:round}.diagram-barre{stroke:var(--accent);stroke-width:8;stroke-linecap:round;opacity:.95}.diagram-dot{fill:var(--accent);stroke:var(--accent-dark);stroke-width:1.2}.diagram-finger{fill:#fff;font:700 9px Arial,sans-serif}.diagram-fret-label,.diagram-marker,.diagram-muted{fill:var(--muted);font:700 11px Arial,sans-serif}.diagram-fret-label{fill:var(--accent-dark);font-size:10px}.diagram-note{margin:0;color:var(--muted);font-size:.72rem;line-height:1.5}.lirik-area{width:100%;max-width:760px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;min-height:1100px;padding:22px 0;font-family:"Courier New",Courier,monospace;font-size:.95rem;line-height:1.45;-webkit-text-size-adjust:100%}.baris-lirik{margin-bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:fit-content}.chord-lirik{display:block;min-height:1.3em;color:var(--accent-dark);font-size:.85rem;font-weight:700;letter-spacing:.02em;white-space:pre}.teks-lirik{display:block;white-space:pre;color:var(--text)}.detail-sidebar{padding-top:38px}.chord-diagrams-grid{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}.chord-card{display:flex;flex-direction:column;align-items:center;padding:7px 5px 5px;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;color:var(--text)}.chord-card:focus-visible,.chord-card:hover{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);transform:translateY(-1px);outline:0}.chord-card:active{transform:translateY(0)}.chord-diagram-svg{display:block;color:var(--text)}.chord-lirik{display:inline-block;min-height:1.2em;padding:1px 4px;border:1px solid color-mix(in srgb,var(--accent-dark) 35%,var(--line));border-radius:3px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent-dark);font-size:.82rem;font-weight:700;letter-spacing:.02em;white-space:pre;margin:0;cursor:pointer;font-family:inherit;text-align:left;border-radius:3px;transition:color .12s,background .12s,border-color .12s,text-decoration .12s}.chord-lirik:focus-visible,.chord-lirik:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--surface));color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;outline:0}.chord-modal{border:none;border-radius:14px;background:var(--surface);color:var(--text);padding:0;box-shadow:0 12px 48px rgba(0,0,0,.4);max-width:260px;width:90%}.chord-modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}.chord-modal-content{display:flex;flex-direction:column}.chord-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px;border-bottom:1px solid var(--line)}.chord-modal-header h3{margin:0;font-size:1rem;font-weight:700;color:var(--accent-dark)}.btn-close-modal{background:0 0;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:4px 6px;border-radius:6px;line-height:1;transition:background .12s,color .12s}.btn-close-modal:focus-visible,.btn-close-modal:hover{background:var(--soft);color:var(--text)}.chord-modal-body{display:flex;justify-content:center;padding:16px 20px 24px}.chord-modal-body .chord-diagram-svg{color:var(--text)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:800px){.container{width:min(100% - 32px,var(--container))}.header-inner{flex-wrap:wrap;gap:0 20px;padding:12px 0}.header-search{order:3;width:100%;height:38px;margin:12px 0 0}.mobile-menu-button{display:block;margin-left:auto}.theme-toggle{margin-right:4px}.mobile-nav:not([hidden]){display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;border-top:1px solid var(--line)}.alphabet-nav{justify-content:flex-start;flex-wrap:wrap;gap:3px 17px;overflow:hidden;padding:10px 0}.home-layout{padding-top:30px;padding-bottom:80px}.footer{padding:2rem 1rem 1rem;margin-top:3rem}.footer-container{grid-template-columns:1fr;gap:1.5rem}.footer-brand{font-size:1.1rem}.detail-layout{grid-template-columns:1fr;gap:34px;padding-top:30px;padding-bottom:80px}.intro-block{margin-bottom:32px}.reference-link{min-height:45px;padding:11px 0;font-size:.86rem}.sidebar{display:none}.detail-sidebar{padding-top:0}.control-bar{align-items:flex-start;flex-direction:column;gap:10px}.detail-primary .lirik-area{padding-top:16px;font-size:.9rem}.lirik-area{min-height:1100px;-webkit-text-size-adjust:100%}.baris-lirik{margin-bottom:12px;gap:3px}.chord-lirik{font-size:.8rem;letter-spacing:.01em}.footer-inner{align-items:flex-start;flex-direction:column;padding:16px 0 80px}.footer-inner nav{gap:12px 18px}}@media (max-width:520px){.detail-primary h1,.intro-block h1{font-size:1.48rem}.intro-block p{font-size:.9rem}.song-row{grid-template-columns:minmax(0,1fr) 28px 18px;gap:10px;min-height:58px}.catalog-shell.is-loading{min-height:5800px}.song-meta{display:none}.footer-inner nav{gap:10px 14px}.genre-filters{gap:6px}.genre-filters button{padding:5px 9px}}@media (prefers-reduced-motion:reduce){*,::after,::before{scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);padding:5px 8px;line-height:1;transition:border-color 160ms ease-out,color 160ms ease-out,background-color 160ms ease-out}.theme-toggle:focus-visible,.theme-toggle:hover{border-color:var(--accent);color:var(--accent-dark);outline:2px solid var(--accent);outline-offset:2px}.theme-toggle .icon-sun{display:none}[data-theme=dark] .theme-toggle .icon-moon{display:none}[data-theme=dark] .theme-toggle .icon-sun{display:inline}.offline-banner{position:fixed;top:0;left:0;width:100%;background-color:#ef4444;color:#fff;text-align:center;padding:8px 16px;font-size:14px;font-weight:600;z-index:9999;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .3s ease-in-out}body.has-offline-banner .header{margin-top:36px}