.lick-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 26px;margin-bottom:20px}.lick-card h4{font-family:Playfair Display,serif;font-size:17px;margin-bottom:4px}.lick-card.hf-lick h4{color:var(--hadrien)}.lick-card.jp-lick h4{color:var(--patitucci)}.lick-meta{font-size:12px;color:var(--text-dim);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.lick-meta .ctx{padding:1px 8px;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;text-transform:uppercase}.lick-desc{font-size:13px;color:var(--text-mid);margin-bottom:14px;line-height:1.55}.tab-block{background:var(--fret-bg);border:1px solid var(--border);border-radius:8px;padding:16px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:10px}.tab-block pre{font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.9;color:var(--text);margin:0;white-space:pre;min-width:max-content}.tab-block .str-label{color:var(--text-dim)}.tab-block .root-note{color:var(--root-color);font-weight:700}.tab-block .chord-note{color:var(--chord-color);font-weight:600}.tab-block .tension-note{color:var(--tension-color)}.tab-block .chrom-note{color:var(--chromatic-color)}.tab-block .scale-note{color:var(--scale-color)}.tab-annotation{font-size:12px;color:var(--text-dim);font-family:JetBrains Mono,monospace;margin-top:8px;line-height:1.6}.tab-annotation strong{color:var(--gold)}.practice-tip{margin-top:12px;padding:10px 14px;border-radius:6px;font-size:12px;color:var(--text-mid);line-height:1.55}.hf-lick .practice-tip{background:#e060500f;border-left:3px solid var(--hadrien)}.jp-lick .practice-tip{background:#50a0e00f;border-left:3px solid var(--patitucci)}.practice-tip strong{color:var(--text-bright)}:root{--bg: #07080c;--surface: #0f1018;--surface2: #161822;--surface3: #1e2030;--gold: #d4a853;--gold-dim: #9a7a3a;--gold-bright: #f0c95a;--blue: #5b8fd4;--teal: #4ec9b0;--rose: #d4637a;--purple: #9b7bd4;--orange: #e09050;--text: #d8d4cc;--text-dim: #706c68;--text-mid: #9a968e;--text-bright: #f0ece4;--border: #252838;--hadrien: #e06050;--hadrien-bg: rgba(224,96,80,.06);--patitucci: #50a0e0;--patitucci-bg: rgba(80,160,224,.06);--root-color: #d4a853;--chord-color: #4ec9b0;--scale-color: #5b8fd4;--tension-color: #9b7bd4;--chromatic-color: #d4637a;--fret-bg: #0a0b12}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;line-height:1.6}.container{max-width:1440px;margin:0 auto;padding:40px 28px}header{text-align:center;padding:50px 0 40px;border-bottom:1px solid var(--border);margin-bottom:10px}h1{font-family:Playfair Display,serif;font-size:clamp(32px,5vw,58px);font-weight:900;color:var(--gold);letter-spacing:1px;line-height:1.15}h1 .sub{display:block;font-size:.35em;font-family:DM Sans,sans-serif;font-weight:300;color:var(--text-dim);letter-spacing:6px;text-transform:uppercase;margin-top:10px}.header-note{margin-top:16px;color:var(--text-dim);font-size:13px;font-style:italic}.sec-title{display:flex;align-items:center;gap:18px;margin:55px 0 24px}.sec-title h2{font-family:Playfair Display,serif;font-size:24px;color:var(--gold);white-space:nowrap}.sec-title:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dim),transparent)}.legend{display:flex;flex-wrap:wrap;gap:18px;padding:14px 20px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:24px}.legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-mid);font-family:JetBrains Mono,monospace}.legend-dot{width:11px;height:11px;border-radius:50%}.scale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:22px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 26px;transition:border-color .3s}.card:hover{border-color:var(--gold-dim)}.card h3{font-family:Playfair Display,serif;font-size:19px;color:var(--text-bright);margin-bottom:2px}.card h3 .alt-name{font-size:13px;color:var(--text-dim);font-family:DM Sans,sans-serif;font-weight:400}.formula{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--gold);margin:4px 0 8px;letter-spacing:.5px}.card-desc{font-size:13px;color:var(--text-mid);margin-bottom:10px;line-height:1.55}.chord-tags{margin-bottom:12px}.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-family:JetBrains Mono,monospace;margin:2px;border:1px solid}.tag-maj{color:var(--teal);border-color:#4ec9b059;background:#4ec9b012}.tag-min{color:var(--blue);border-color:#5b8fd459;background:#5b8fd412}.tag-dom{color:var(--orange);border-color:#e0905059;background:#e0905012}.tag-dim{color:var(--rose);border-color:#d4637a59;background:#d4637a12}.tag-alt{color:var(--purple);border-color:#9b7bd459;background:#9b7bd412}.when-box{margin-top:12px;padding:10px 14px;background:#d4a8530a;border-left:3px solid var(--gold-dim);border-radius:0 6px 6px 0;font-size:12.5px;color:var(--text-mid);line-height:1.6}.when-box strong{color:var(--gold);font-weight:600}.when-box .scenario{display:block;margin-top:5px;padding-left:12px;position:relative}.when-box .scenario:before{content:"›";position:absolute;left:0;color:var(--gold-dim)}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:22px}.chord-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 26px;transition:border-color .3s}.chord-card:hover{border-color:var(--gold-dim)}.chord-card h3{font-family:Playfair Display,serif;font-size:19px;color:var(--text-bright);margin-bottom:2px}.chord-card h3 .chord-sym{font-size:14px;color:var(--gold);font-family:JetBrains Mono,monospace;font-weight:600;margin-left:8px}.chord-formula{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--gold);margin:4px 0;letter-spacing:.5px}.chord-shell{font-family:JetBrains Mono,monospace;font-size:11.5px;color:var(--text-dim);margin-bottom:8px}.chord-desc{font-size:13px;color:var(--text-mid);margin-bottom:12px;line-height:1.55}.voicing-pair{display:flex;gap:14px;margin-top:10px}.voicing-box{flex:1;min-width:0}.voicing-label{font-family:JetBrains Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:6px}.voicing-box canvas{display:block;border-radius:5px}.chord-theory{margin-top:12px;padding:9px 13px;background:#d4a8530a;border-left:3px solid var(--gold-dim);border-radius:0 6px 6px 0;font-size:12px;color:var(--text-mid);line-height:1.55}.chord-theory strong{color:var(--gold)}@media(max-width:520px){.voicing-pair{flex-direction:column}}.fb-container{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}.fb-container canvas{display:block;border-radius:6px}.ref-wrap{overflow-x:auto;margin:24px 0}.ref-table{width:100%;border-collapse:collapse;font-size:13px}.ref-table th{text-align:left;padding:11px 14px;background:var(--surface2);color:var(--gold);font-family:JetBrains Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid var(--gold-dim);white-space:nowrap}.ref-table td{padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:top}.ref-table tr:hover td{background:#d4a85306}.mono{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--gold)}.artist-section{margin:50px 0;padding:36px;border-radius:14px;position:relative}.artist-section.hadrien{background:var(--hadrien-bg);border:1px solid rgba(224,96,80,.15)}.artist-section.patitucci{background:var(--patitucci-bg);border:1px solid rgba(80,160,224,.15)}.artist-header{display:flex;align-items:flex-start;gap:20px;margin-bottom:28px}.artist-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Playfair Display,serif;font-size:28px;font-weight:900;flex-shrink:0;color:#fff}.hadrien .artist-avatar{background:linear-gradient(135deg,var(--hadrien),#a04035)}.patitucci .artist-avatar{background:linear-gradient(135deg,var(--patitucci),#3570a0)}.artist-name{font-family:Playfair Display,serif;font-size:26px;color:var(--text-bright)}.artist-style{font-size:13px;color:var(--text-mid);margin-top:4px;line-height:1.6}.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}.tech-card{background:#0000004d;border:1px solid var(--border);border-radius:10px;padding:20px 22px}.tech-card h4{font-family:Playfair Display,serif;font-size:16px;margin-bottom:6px}.hadrien .tech-card h4{color:var(--hadrien)}.patitucci .tech-card h4{color:var(--patitucci)}.tech-card .td{font-size:13px;color:var(--text-mid);line-height:1.55;margin-bottom:8px}.tech-card .tags-row{margin-bottom:10px}.tech-card .tags-row .lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);margin-bottom:4px}.tech-card .detail{font-size:12.5px;color:var(--text-mid);line-height:1.55;margin-top:8px}.hadrien .tech-card .detail strong{color:var(--hadrien)}.patitucci .tech-card .detail strong{color:var(--patitucci)}.context-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-family:JetBrains Mono,monospace;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:10px}.ctx-fast{background:#e0605026;color:#e08070;border:1px solid rgba(224,96,80,.25)}.ctx-slow{background:#4ec9b01f;color:#6ed8c0;border:1px solid rgba(78,201,176,.2)}.ctx-both{background:#d4a8531f;color:var(--gold);border:1px solid rgba(212,168,83,.2)}.ctx-modal{background:#9b7bd41f;color:#b098e0;border:1px solid rgba(155,123,212,.2)}.cmp-grid{display:grid;grid-template-columns:1fr 180px 1fr;gap:0;margin:24px 0}.cmp-col{padding:20px;background:var(--surface);border:1px solid var(--border)}.cmp-col:first-child{border-radius:10px 0 0 10px;border-right:none}.cmp-col:last-child{border-radius:0 10px 10px 0;border-left:none}.cmp-center{display:flex;align-items:center;justify-content:center;background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:JetBrains Mono,monospace;font-size:11px;color:var(--gold);text-align:center;padding:12px;line-height:1.7}.cmp-col h5{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}.cmp-col.hf h5{color:var(--hadrien)}.cmp-col.jp h5{color:var(--patitucci)}.cmp-col ul{list-style:none;font-size:12.5px;color:var(--text-mid)}.cmp-col li{padding:4px 0 4px 14px;position:relative}.cmp-col li:before{content:"›";position:absolute;left:0;color:var(--gold-dim)}footer{text-align:center;padding:50px 0 30px;color:var(--text-dim);font-size:11px;letter-spacing:1px;border-top:1px solid var(--border);margin-top:40px}#hover-tip{position:fixed;z-index:9999;background:var(--surface2);border:1px solid var(--gold-dim);border-radius:10px;padding:12px 14px 10px;pointer-events:none;opacity:0;transition:opacity .15s ease;box-shadow:0 8px 32px #000000b3;max-width:560px;overflow:hidden}#hover-tip.visible{opacity:1}#hover-tip .ht-name{font-family:Playfair Display,serif;font-size:14px;color:var(--text-bright);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#hover-tip .ht-formula{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--gold);margin-bottom:6px}#hover-tip .ht-sub{font-size:10px;color:var(--text-dim);font-family:JetBrains Mono,monospace;margin-bottom:6px}#hover-tip .ht-canvases{display:flex;gap:8px}#hover-tip .ht-vlabel{font-family:JetBrains Mono,monospace;font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin-bottom:2px;text-align:center}.hz{cursor:help;border-bottom:1px dotted var(--gold-dim);transition:border-color .2s}.hz:hover{border-bottom-color:var(--gold)}@media(max-width:900px){.scale-grid,.tech-grid,.cmp-grid{grid-template-columns:1fr}.cmp-col:first-child{border-radius:10px 10px 0 0;border-right:1px solid var(--border);border-bottom:none}.cmp-col:last-child{border-radius:0 0 10px 10px;border-left:1px solid var(--border);border-top:none}.cmp-center{border-left:1px solid var(--border);border-right:1px solid var(--border)}.artist-section{padding:22px}.container{padding:20px 14px}#hover-tip{max-width:95vw}}
