:root{color-scheme:light}@theme{ --font-sans: "Inter", system-ui, -apple-system, sans-serif; --color-bg: light-dark(#F5F3FA, #0D0B14); --color-card: light-dark(#FFFFFF, #13111E); --color-surface: light-dark(#FFFFFF, #0F0D1C); --color-border: light-dark(#E2DFF0, #2A2A3E); --color-text: light-dark(#0F0F1A, #F5F5F5); --color-muted: light-dark(#6B6B88, #9B9BB0); --color-card-hover: light-dark(#F8F5FF, #1C1C28); --color-primary: light-dark(#7B2FBE, #8B47C8); --color-primary-bright: #9B4FE0; --color-primary-gradient: #7B2FBE; --color-primary-dim: light-dark(rgba(123, 47, 190, .08), rgba(139, 71, 200, .15)); --color-shadow-fab: rgba(0, 0, 0, .15); --color-lavender: #D1B3F2; --color-on-primary: #FFFFFF; --color-banner-from: #2D0F5A; --color-banner-mid: #4A1A8A; --color-banner-to: #6B2FB5; --color-on-banner: #FFFFFF; --color-magenta: #D040FB; --color-black: #000; --color-hero-deep: #1A0A2E; --color-hero-mid: #140828; --color-hero-dark: #0D0B14; --color-hero-purple: #8B47C8; --color-accent: #8B47C8; --color-status-amber: #F59E0B; --color-gold: #B45309; --color-gold-bright: #FCD34D; --color-gold-cta: #D97706; --color-lime: #A6F045; --color-on-lime: #0F0F14; --color-level-beginner: light-dark(#2E7D32, #4CAF50); --color-success: #2EC28A; --color-warning: #E8A13C; --color-error: #E8473C; --color-info: light-dark(#2563EB, #5B8DEF); --fret-grid: light-dark(#D9D4EC, #2E2E44); --fret-root: #E5484D; --fret-arrow: light-dark(#2F9E44, #51CF66); --color-landing-hero-from: light-dark(#EEE7FA, #0C0818); --color-landing-hero-mid: light-dark(#E5D9F5, #140E24); --color-landing-hero-to: light-dark(#F2ECFF, #0A0A14); --color-landing-band-from: #1E0A3E; --color-landing-band-to: #2D1060; --color-landing-on-band: #FFFFFF; --color-landing-level-beg-bg: light-dark(#E6F5EE, #0F2A1A); --color-landing-level-beg-fg: light-dark(#1A7A42, #4AC485); --color-landing-level-int-bg: light-dark(#FEF6E4, #2A220A); --color-landing-level-int-fg: light-dark(#8A6200, #C4A84A); --color-landing-level-adv-bg: light-dark(#FBEAEA, #2A1010); --color-landing-level-adv-fg: light-dark(#A4262C, #E08A8A); --color-star: #FFC83D; --radius-md: 12px; --space-page: clamp(1rem, 5vw, 3rem); --layout-max: 1440px; --color-pedal-card-from: light-dark(#EDE8F8, #1A0A30); --color-pedal-card-to: light-dark(#F5F0FF, #2A1050); --color-lb-gold-from: #F5C842; --color-lb-gold-to: #E0A020; --color-lb-silver-from: #C0C8D0; --color-lb-silver-to: #9AA0A8; --color-lb-bronze-from: #D4924A; --color-lb-bronze-to: #A8682A; --color-ach-panel: #0E0C18; --color-ach-accent: #F4A14A; --color-ach-stripe-to: #9B5DE5; --color-ach-ink: #F2F1F8; --color-ach-muted: rgba(242, 241, 248, .35); --color-welcome-band-from: #6E22B8; --color-welcome-band-to: #8B3FD6; --color-welcome-panel: light-dark(#16131F, #0B0B12); --color-welcome-section: light-dark(#F8F7FC, #0F0F16); --color-welcome-hero-accent: #C79BF0; --color-feed-bg: light-dark(#FBFAF7, #0A0910); --color-accent-warm: light-dark(#B5670C, #F4A14A); --color-accent-warm-dim: light-dark(rgba(181, 103, 12, .08), rgba(244, 161, 74, .13)); --color-accent-warm-dim-strong: light-dark(rgba(181, 103, 12, .14), rgba(244, 161, 74, .22)); --color-accent-warm-border: light-dark(rgba(181, 103, 12, .2), rgba(244, 161, 74, .28)); --color-accent-warm-border-strong: light-dark(rgba(181, 103, 12, .28), rgba(244, 161, 74, .4)); --color-accent-warm-cta-end: #C8731A; --color-accent-warm-stage: light-dark(#1A1A2E, #0A0910); --color-track-slot: #2A2A35; --color-discord: #5865F2; --color-discord-banner-bg: light-dark(rgba(88, 101, 242, .06), rgba(88, 101, 242, .11)); --color-discord-banner-border: light-dark(rgba(88, 101, 242, .15), rgba(88, 101, 242, .2)); --color-share-x: #000000; --color-share-facebook: #1877F2; --color-share-reddit: #FF4500; --color-share-email: #6B6B88; --color-share-sms: #34C759; --color-share-copied: #2ECC71; --color-page-header-title: #1F2937; --color-page-header-intro: #6B7280; --color-page-header-intro-strong: #4B5563; --color-brand-vivid: #7D11FF; --color-brand-vivid-deep: #6B0EE0; --color-exp-admin-alt: #A855F7; --color-exp-admin-alt-hover: #9333EA; --color-exp-admin-link-hover: #C084FC; --color-exp-admin-header-scrolled: rgb(23, 23, 23); --color-exp-admin-toolbar-panel: rgba(26, 26, 46, .92); --color-judgeme-dark-bg: #0A0A0A; --color-judgeme-dark-card: #141414; --color-judgeme-dark-border: #222222; }.ggn-avatar{--avatar-size: 40px;display:inline-flex;align-items:center;justify-content:center;width:var(--avatar-size);height:var(--avatar-size);overflow:hidden;flex-shrink:0;text-decoration:none;line-height:0;background:color-mix(in srgb,var(--color-primary) 14%,var(--color-card))}.ggn-avatar--circle{border-radius:50%}.ggn-avatar--rounded{border-radius:calc(var(--avatar-size) * .22)}.ggn-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.ggn-avatar--initials{background:linear-gradient(135deg,hsl(var(--avatar-hue, 270) 58% 48%),hsl(calc(var(--avatar-hue, 270) + 24) 64% 56%))}.ggn-avatar__initials{font-size:calc(var(--avatar-size) * .4);font-weight:700;color:var(--color-on-primary);line-height:1;letter-spacing:.01em}.badge{display:inline-flex;align-items:center;gap:4px;font-weight:700;line-height:1;vertical-align:middle}.badge--sm{font-size:11px}.badge--md{font-size:12px}.badge--sm .badge__icon{width:13px;height:13px}.badge--md .badge__icon{width:16px;height:16px}.badge--icon-only .badge__icon{width:15px;height:15px}.badge__icon{flex-shrink:0;display:block}.badge__label{white-space:nowrap}.badge--verified{color:var(--color-primary)}.badge--verified .badge__seal{fill:var(--color-primary)}.badge--verified .badge__check{stroke:var(--color-on-primary)}.badge--verified.badge--pill{background:color-mix(in srgb,var(--color-primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-primary) 30%,transparent);border-radius:20px;padding:3px 9px}.badge--lifetime{color:var(--color-gold)}.badge--lifetime.badge--pill{background:color-mix(in srgb,var(--color-gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-gold) 30%,transparent);border-radius:20px;padding:3px 9px}.badge--on-media.badge--verified .badge__label{color:var(--color-on-primary)}.badge--on-media.badge--lifetime{color:var(--color-gold-bright)}.badge--on-media.badge--lifetime .badge__icon{color:var(--color-gold)}.badge--on-media.badge--lifetime.badge--pill{background:color-mix(in srgb,var(--color-gold) 30%,transparent);border-color:color-mix(in srgb,var(--color-status-amber) 40%,transparent)}.lesson-comments .lesson-section__heading{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;margin:0;letter-spacing:-.01em}.lesson-comments .lesson-section__heading svg{color:var(--color-primary);flex-shrink:0}.lesson-avatar{width:var(--avatar-size, 38px);height:var(--avatar-size, 38px);border-radius:50%;object-fit:cover;flex-shrink:0}.lesson-avatar--fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-dim);color:var(--color-primary);font-weight:800;font-size:13px}.lesson-comments{display:flex;flex-direction:column;gap:16px}.lesson-comments__count{font-size:11.5px;font-weight:800;color:var(--color-primary);background:var(--color-primary-dim);border-radius:20px;padding:2px 9px}.lesson-comments__composer{display:flex;gap:12px}.lesson-comments__composer-main{flex:1;min-width:0}.lesson-comments__composer .lesson-comments__input{transition:min-height 175ms ease,border-color 175ms ease,box-shadow 175ms ease}.lesson-comments__composer-actions{max-height:0;opacity:0;overflow:hidden;transition:max-height 175ms ease,opacity 175ms ease,margin-top 175ms ease;margin-top:0}.lesson-comments__composer.is-open .lesson-comments__composer-actions{max-height:60px;opacity:1;margin-top:8px}.lesson-comments__composer.is-open .lesson-comments__input{min-height:76px;border-color:color-mix(in srgb,var(--color-primary) 55%,transparent);box-shadow:0 4px 18px color-mix(in srgb,var(--color-primary) 14%,transparent)}.lesson-comments__input{width:100%;resize:vertical;min-height:44px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:11px 14px;font-family:inherit;font-size:14px;color:var(--color-text)}.lesson-comments__input:focus{outline:none;border-color:color-mix(in srgb,var(--color-primary) 50%,transparent)}.lesson-comments__composer-actions{display:flex;justify-content:flex-end;margin-top:8px}.lesson-comments__post{background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:20px;padding:8px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}.lesson-comments__post:disabled{opacity:.5;cursor:default}.lesson-comments__thread{display:flex;flex-direction:column;gap:18px}.lesson-comment{display:flex;gap:12px}.lesson-comment__body{flex:1;min-width:0}.lesson-comment__head{display:flex;align-items:center;gap:6px}.lesson-comment__author{font-size:13.5px;font-weight:700;color:var(--color-text);text-decoration:none}.lesson-comment__verified{display:inline-flex;flex-shrink:0}.lesson-comment__handle{font-size:12px;font-weight:600;color:var(--color-muted);white-space:nowrap}.lesson-comment__time{font-size:12px;color:var(--color-muted)}.lesson-comment__text{font-size:14px;color:color-mix(in srgb,var(--color-text) 85%,transparent);line-height:1.55;margin-top:3px;white-space:pre-wrap}.lesson-comment__actions{margin-top:6px}.lesson-comment__reply{background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--color-muted);padding:0}.lesson-comment__reply:hover{color:var(--color-primary)}.lesson-comment__replies{margin-top:14px;margin-left:22px;padding-left:16px;border-left:2px solid var(--color-border);display:flex;flex-direction:column;gap:14px}@media(max-width:767px){.lesson-comment__replies{margin-left:14px;padding-left:12px}}.lesson-avatar--deleted{display:inline-flex;background:var(--color-border);border-radius:50%}.lesson-comment__text--deleted{color:var(--color-muted);font-style:italic;margin-top:0;align-self:center}.lesson-comment--deleted{align-items:center}.lesson-comments__empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 20px 26px}.lesson-comments__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:6px;border-radius:50%;background:var(--color-primary-dim);color:var(--color-primary)}.lesson-comments__empty-title{margin:0;font-size:15px;font-weight:800;color:var(--color-text);letter-spacing:-.01em}.lesson-comments__empty-text{margin:0;font-size:13.5px;color:var(--color-muted)}.lesson-comment__head{position:relative}.lesson-comment__tools{position:relative;margin-left:auto}.lesson-comment__kebab{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px;border-radius:7px;color:var(--color-muted)}.lesson-comment__kebab:hover,.lesson-comment__kebab[aria-expanded=true]{color:var(--color-text);background:var(--color-card)}.lesson-comment__menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:150px;background:var(--color-card);border:1px solid var(--color-border);border-radius:10px;box-shadow:0 12px 32px color-mix(in srgb,var(--color-text) 12%,transparent);overflow:hidden;padding:4px}.lesson-comment__menu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:none;border-radius:7px;padding:8px 10px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--color-text);font-family:inherit}.lesson-comment__menu-item:hover{background:var(--color-bg)}.lesson-comment__menu-item--danger{color:var(--color-error)}.lesson-comment__editor{margin-bottom:9px}.lesson-comment__edit-input{margin-bottom:8px;line-height:1.5}.lesson-comment__editor-actions{display:flex;justify-content:flex-end;gap:10px}.lesson-comment__editor-cancel{background:none;border:1px solid var(--color-border);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;color:var(--color-muted);font-family:inherit}.lesson-comment__editor-cancel:hover{color:var(--color-text)}.lesson-comments__error{font-size:13.5px;color:var(--color-muted)}.lesson-comments__skeleton{display:flex;flex-direction:column;gap:18px}.lesson-comments__skeleton-row{display:flex;gap:12px}.lesson-comments__skeleton-avatar{width:38px;height:38px;border-radius:50%;background:var(--color-surface);flex-shrink:0}.lesson-comments__skeleton-lines{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}.lesson-comments__skeleton-lines span{height:10px;border-radius:4px;background:var(--color-surface)}.lesson-comments__skeleton-lines span:first-child{width:40%}.lesson-comments__skeleton-lines span:last-child{width:85%}.lesson-comments__load-footer{display:flex;justify-content:center;padding:8px 0 4px}.lesson-comments__load-sentinel{width:1px;height:1px}.lesson-comments__load-more{background:transparent;color:var(--color-primary);border:1px solid var(--color-border);border-radius:20px;padding:7px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}.lesson-comments__load-more:hover{background:var(--color-surface)}.lesson-comments__load-more:disabled{opacity:.6;cursor:default}.lesson-comment__mention{color:var(--color-primary);font-weight:600;text-decoration:none}a.lesson-comment__mention:hover{text-decoration:underline}.lesson-mention-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:60;width:300px;max-width:100%;padding:4px;background:var(--color-card);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 12px 32px var(--color-shadow-fab);overflow:hidden}.lesson-mention-menu__item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;border-radius:8px;background:transparent;text-align:left;cursor:pointer}.lesson-mention-menu__item.is-active{background:var(--color-card-hover)}.lesson-mention-menu__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.lesson-mention-menu__avatar--fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--color-border);color:var(--color-text);font-size:12px;font-weight:700}.lesson-mention-menu__meta{display:flex;flex-direction:column;min-width:0}.lesson-mention-menu__name{font-size:13px;font-weight:700;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-mention-menu__handle{font-size:11.5px;color:var(--color-muted)}
