:root{--color-primary: #f0e8d8;--color-secondary: #a09080;--color-tertiary: #2a2520;--color-tertiary-hover:#332d28;--color-border: #3a3228;--color-border-light: #342e28;--color-surface: #221e1a;--color-bg: #1a1612;--color-gold: #d4a853;--color-gold-muted: #b8882e;--color-gold-text: #1a1510;--color-brand: #5b9cf6;--color-brand-hover: #3b7dd8;--color-brand-light: rgba(91, 156, 246, .15);--font-base: "Roboto", sans-serif;--clr-gold: var(--color-gold);--clr-border: var(--color-border);--clr-surface-1: var(--color-surface);--clr-surface-2: var(--color-tertiary);--clr-text-1: var(--color-primary);--clr-text-2: var(--color-secondary);--clr-text-3: var(--color-secondary);color-scheme:dark}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--color-primary: #1a1a1a;--color-secondary: #555;--color-tertiary: #f5f5f5;--color-tertiary-hover:#e8e8e8;--color-border: #e0e0e0;--color-border-light: #ddd;--color-surface: #fafafa;--color-bg: #ffffff;--color-gold: #b8882e;--color-gold-muted: #9e7429;--color-gold-text: #ffffff;--color-brand: #2563eb;--color-brand-hover: #1d4ed8;--color-brand-light: rgba(37, 99, 235, .12);color-scheme:light}}[data-theme=light]{--color-primary: #1a1a1a;--color-secondary: #555;--color-tertiary: #f5f5f5;--color-tertiary-hover:#e8e8e8;--color-border: #e0e0e0;--color-border-light: #ddd;--color-surface: #fafafa;--color-bg: #ffffff;--color-gold: #b8882e;--color-gold-muted: #9e7429;--color-gold-text: #ffffff;--color-brand: #2563eb;--color-brand-hover: #1d4ed8;--color-brand-light: rgba(37, 99, 235, .12);color-scheme:light}[data-theme=dark]{--color-primary: #f0e8d8;--color-secondary: #a09080;--color-tertiary: #2a2520;--color-tertiary-hover:#332d28;--color-border: #3a3228;--color-border-light: #342e28;--color-surface: #221e1a;--color-bg: #1a1612;--color-gold: #d4a853;--color-gold-muted: #b8882e;--color-gold-text: #1a1510;--color-brand: #5b9cf6;--color-brand-hover: #3b7dd8;--color-brand-light: rgba(91, 156, 246, .15);color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-base);background:var(--color-bg);color:var(--color-primary);min-height:100vh}:root{--page-gold: var(--color-gold);--page-gold-muted: var(--color-gold-muted)}[data-theme=light]{--page-gold: var(--color-gold);--page-gold-muted: var(--color-gold-muted)}.page-hero{background:var(--color-surface);padding:3rem 1.5rem 2rem;text-align:center;border-bottom:2px solid var(--page-gold)}.page-hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:var(--page-gold);margin-bottom:.75rem;letter-spacing:-.02em}.page-hero p{max-width:640px;margin:0 auto;color:var(--color-secondary);font-size:1.05rem}.content{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem 4rem;overflow-wrap:break-word;word-break:break-word}.content h2{font-size:1.45rem;font-weight:700;color:var(--page-gold);margin:2.5rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--color-border)}.content h3{font-size:1.1rem;font-weight:600;color:var(--page-gold);margin:1.5rem 0 .5rem}.content p{margin-bottom:1rem}.content ul,.content ol{margin:.5rem 0 1rem 1.5rem}.content li{margin-bottom:.4rem}.content h2,.content h3{position:relative}.pl{display:inline-block;margin-left:.4em;color:var(--color-border);font-size:.8em;font-weight:400;text-decoration:none;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;vertical-align:middle}.content h2:hover>.pl,.content h3:hover>.pl{opacity:1}.pl:focus{opacity:1;outline:none}.toc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1.25rem 1.5rem;margin:0 0 2rem;max-width:400px}.toc-title{font-size:.95rem;font-weight:700;color:var(--page-gold);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.06em}.toc>ol{margin-left:1.25rem}.toc>ol>li{margin-bottom:.45rem;font-size:.92rem}.toc a{color:var(--page-gold-muted);text-decoration:none}.toc a:hover{color:var(--page-gold);text-decoration:underline}.piece-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}.piece-table th{background:var(--color-surface);color:var(--page-gold);font-weight:600;padding:.7rem 1rem;text-align:left;border-bottom:2px solid var(--page-gold)}.piece-table td{padding:.65rem 1rem;border-bottom:1px solid var(--color-border);vertical-align:top}.piece-table tr:hover td{background:var(--color-tertiary)}.piece-name{font-weight:600;color:var(--page-gold);white-space:nowrap}.piece-symbol{font-weight:700;color:var(--page-gold);font-size:1rem;text-align:center;white-space:nowrap}.diagram-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1.25rem 1.5rem;margin:1.25rem 0;overflow-x:auto}.diagram-block pre{font-family:Courier New,Courier,monospace;font-size:.82rem;line-height:1.5;color:var(--color-secondary);white-space:pre}.diff-table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.93rem}.diff-table th{background:var(--color-surface);color:var(--page-gold);font-weight:600;padding:.6rem 1rem;border-bottom:2px solid var(--page-gold);text-align:left}.diff-table td{padding:.6rem 1rem;border-bottom:1px solid var(--color-border);vertical-align:top}.diff-table tr:hover td{background:var(--color-tertiary)}.callout{background:var(--color-tertiary);border-left:3px solid var(--page-gold);border-radius:0 6px 6px 0;padding:1rem 1.25rem;margin:1.25rem 0;font-size:.95rem;color:var(--color-secondary)}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;margin:1.5rem 0}.video-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;overflow:hidden}.video-card__embed{position:relative;width:100%;aspect-ratio:16 / 9}.video-card__embed iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none}.video-card__label{padding:.6rem .75rem;font-size:.88rem;font-weight:600;color:var(--page-gold)}.video-card__sub{padding:0 .75rem .6rem;font-size:.78rem;color:var(--color-secondary)}.video-playlist-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--page-gold-muted);font-size:.9rem;text-decoration:none;margin-bottom:1.5rem}.video-playlist-link:hover{color:var(--page-gold);text-decoration:underline}.cta{margin-top:3rem;text-align:center}.cta a{display:inline-block;background:var(--page-gold);color:#0f0f1e;font-weight:700;font-size:1rem;text-decoration:none;padding:.8rem 2rem;border-radius:6px;transition:background .15s}.cta a:hover{background:#e8c065}.faq-item{border-bottom:1px solid var(--color-border);padding:1rem 0}.faq-q{font-weight:600;color:var(--color-text);margin-bottom:.4rem}.faq-a{color:var(--color-text-muted, var(--color-text));line-height:1.6}.faq-a a{color:var(--page-gold)}.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;border:1px solid var(--color-border);border-radius:8px}@media(max-width:600px){.page-hero{padding:1.75rem 1rem 1.5rem}.content{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem 4rem;box-sizing:border-box;width:100%;overflow-x:hidden}.piece-table,.diff-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.85rem;min-width:800px}.video-grid{display:grid;width:100%;box-sizing:border-box;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0}.video-card__label{padding:.4rem .5rem;font-size:.75rem;line-height:1.2}.video-card__sub{padding:0 .5rem .4rem;font-size:.65rem}}