*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fdfcfa;--accent:#e8593c;--text:#2c2b28;--text-secondary:#6b6860;--border:#e8e5dc;--surface:#f9f8f5;--font-main:"Source Sans 3",system-ui,sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace}html{scroll-behavior:smooth}body{font-family:var(--font-main);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}ol,ul{list-style:none}img{max-width:100%;display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}.accent{color:var(--accent)}.header{background:#fff;border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header__inner{display:flex;align-items:center;gap:24px;height:56px}.header__logo{font-size:20px;font-weight:700;color:var(--accent);white-space:nowrap}.header__nav{display:flex;gap:16px}.header__nav a{font-size:15px;font-weight:500;color:var(--text-secondary)}.header__search{margin-left:auto;display:flex;position:relative}.header__search-input{border:1px solid var(--border);border-radius:8px;padding:6px 36px 6px 12px;font-size:14px;width:240px;background:var(--surface);outline:none;font-family:var(--font-main)}.header__search-input:focus{border-color:var(--accent)}.header__search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px}.footer{background:var(--surface);border-top:1px solid var(--border);padding:32px 0;margin-top:60px}.footer__inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap}.footer__logo{font-weight:700;color:var(--accent);font-size:18px}.footer__desc{font-size:13px;color:var(--text-secondary)}.footer__nav{display:flex;gap:16px;font-size:14px}.footer__copy{margin-left:auto}.breadcrumbs__list,.footer__copy{font-size:13px;color:var(--text-secondary)}.breadcrumbs__list{display:flex;gap:4px;padding:12px 0;flex-wrap:wrap}.breadcrumbs__item a{color:var(--accent)}.breadcrumbs__sep{margin:0 4px}.hero{background:linear-gradient(135deg,#2c2b28,#3d3a35);color:#fff;padding:48px 0;text-align:center}.hero h1{font-size:32px;margin-bottom:8px}.hero p{color:hsla(0,0%,100%,.7);margin-bottom:24px;font-size:17px}.hero .search-bar{max-width:560px;margin:0 auto}.search-bar{display:flex;gap:8px}.search-bar--large .search-bar__input{padding:12px 16px;font-size:16px;border-radius:10px}.search-bar--large .search-bar__btn{padding:12px 24px;font-size:16px;border-radius:10px}.search-bar__input{flex:1 1;border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:14px;outline:none;font-family:var(--font-main);background:#fff}.search-bar__input:focus{border-color:var(--accent)}.search-bar__btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 20px;font-weight:600;cursor:pointer;font-family:var(--font-main)}.search-bar__btn:hover{opacity:.9}.categories-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px;margin:24px 0}.category-card{background:#fff;border-radius:10px;padding:20px;border:1px solid var(--border);border-top:3px solid var(--accent);transition:box-shadow .2s}.category-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}.category-card__name{font-weight:600;font-size:16px;margin-bottom:4px}.category-card__count{font-size:13px;color:var(--text-secondary)}.tag-group{margin:20px 0}.tag-group__title{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text-secondary)}.tag-group__pills{display:flex;flex-wrap:wrap;gap:8px}.tag-pill{display:inline-block;padding:4px 14px;border:1px solid var(--border);border-radius:20px;font-size:13px;background:#fff;transition:all .2s}.tag-pill:hover{border-color:var(--accent);color:var(--accent)}.alphabet{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0}.alphabet__letter{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border:1px solid var(--border);border-radius:4px;background:#fff;transition:all .2s}.alphabet__letter--active,.alphabet__letter:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.song-page{display:grid;grid-template-columns:1fr 220px;grid-gap:32px;gap:32px;padding-top:8px}.song-page__main{min-width:0}.song-page__sidebar{display:flex;flex-direction:column;gap:24px}.transpose-bar{display:flex;align-items:center;gap:20px;padding:10px 16px;background:#fff;border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;margin:16px 0}.transpose-bar__group{display:flex;align-items:center;gap:6px}.transpose-bar__group--scroll{flex:1 1}.transpose-bar__label{font-size:13px;font-weight:600;color:var(--text-secondary)}.transpose-bar__btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-main)}.transpose-bar__btn:hover{border-color:var(--accent);color:var(--accent)}.transpose-bar__btn--scroll{padding:4px 12px}.transpose-bar__btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}.transpose-bar__value{font-size:14px;font-weight:700;min-width:28px;text-align:center}.transpose-bar__value--active{color:var(--accent)}.transpose-bar__slider{flex:1 1;min-width:80px;accent-color:var(--accent)}.transpose-bar__speed{font-size:13px;color:var(--text-secondary);min-width:28px}.chord-cards{margin:12px 0}.chord-cards__title{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.chord-cards__grid{display:flex;flex-wrap:wrap;gap:8px}.chord-diagram{background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 8px 4px;text-align:center}.chord-diagram__name{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);margin-bottom:2px}.chord-diagram--unknown{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary)}.chord-diagram__placeholder{font-size:24px;opacity:.3}.song-text-wrapper{position:relative;max-height:70vh;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:#fff;padding:20px 24px;margin:16px 0}.song-text-wrapper:after{content:"";position:-webkit-sticky;position:sticky;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,#fff);display:block;pointer-events:none}.song-text{font-family:var(--font-mono);line-height:1.7;white-space:pre-wrap}.song-text__line{min-height:1.7em}.song-text__section{text-transform:uppercase;font-size:.85em;color:var(--text-secondary);font-weight:600;border-bottom:1px solid var(--border);padding:8px 0 4px;margin:12px 0 4px}.song-text__segment{display:inline;position:relative}.song-text__chord{color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px;position:relative;font-size:.95em}.chord-popup-anchor{position:relative;display:inline}.chord-popup{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);z-index:50;margin-bottom:4px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12))}.song-meta{font-size:14px;color:var(--text-secondary);display:flex;gap:12px;align-items:center;margin:4px 0 16px}.song-meta a{color:var(--accent);font-weight:500}.song-meta__dot:before{content:"·";margin:0 2px}.song-list-block{margin:32px 0}.song-list-block__title{font-size:18px;margin-bottom:12px}.song-list-block__list{display:flex;flex-direction:column;gap:0}.song-list-block__item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}.song-list-block__link{flex:1 1;min-width:0}.song-list-block__name{font-weight:500}.song-list-block__artist{font-size:13px;color:var(--text-secondary);margin-left:8px}.song-list-block__meta{display:flex;gap:12px;font-size:13px;color:var(--text-secondary);white-space:nowrap}.song-list-block__key{background:var(--surface);padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:12px}.ad-placeholder{background:var(--surface);border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;margin:16px auto}.ad-placeholder__text{font-size:12px;color:#ccc}.popular-list{margin:24px 0}.popular-list__item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.popular-list__num{font-size:18px;font-weight:700;color:var(--accent);min-width:28px}.popular-list__info{flex:1 1}.popular-list__title{font-weight:500}.popular-list__artist,.popular-list__meta{font-size:13px;color:var(--text-secondary)}.popular-list__meta{display:flex;gap:12px}.artist-list{margin:20px 0}.artist-list__item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.artist-list__name{font-weight:500}.artist-list__meta{display:flex;gap:16px;font-size:13px;color:var(--text-secondary)}.seo-text{margin:32px 0;padding:24px;background:var(--surface);border-radius:10px;font-size:14px;line-height:1.7;color:var(--text-secondary)}.section-title{font-size:22px;font-weight:700;margin:32px 0 16px}.sort-tabs{display:flex;gap:8px;margin:16px 0}.sort-tab{padding:6px 16px;border:1px solid var(--border);border-radius:8px;font-size:13px;cursor:pointer;background:#fff;font-family:var(--font-main)}.sort-tab--active{background:var(--accent);color:#fff;border-color:var(--accent)}.sidebar-block{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px}.sidebar-block__title{font-size:15px;font-weight:600;margin-bottom:10px}.sidebar-block__list{display:flex;flex-direction:column;gap:6px}.sidebar-block__item{display:flex;justify-content:space-between;font-size:14px}.sidebar-block__item a{font-weight:500}.sidebar-block__views{font-size:12px;color:var(--text-secondary)}.search-results{margin:24px 0}.search-results__count{font-size:14px;color:var(--text-secondary);margin-bottom:16px}@media (max-width:900px){.song-page{grid-template-columns:1fr}.song-page__sidebar{display:none}.categories-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.header__nav{display:none}.header__search-input{width:160px}.categories-grid{grid-template-columns:1fr}.hero h1{font-size:24px}.transpose-bar{gap:12px}}