:root{color-scheme:light;--background: #e0e5ec;--foreground: #f0f2f5;--muted: #d1d9e6;--text: #2d3436;--text-muted: #4a5568;--text-faint: #667085;--accent: #007a7f;--accent-foreground: #ffffff;--accent-soft: #c9eef1;--border: #babecc;--border-light: #ffffff;--border-dark: #a3b1c6;--screen: #2d3436;--screen-deep: #1f2527;--green: #22c55e;--warning: #eab308;--shadow-card: 8px 8px 16px #babecc, -8px -8px 16px #ffffff;--shadow-floating: 12px 12px 24px #babecc, -12px -12px 24px #ffffff, inset 1px 1px 0 rgb(255 255 255 / .55);--shadow-button: 5px 5px 10px #babecc, -5px -5px 10px #ffffff;--shadow-pressed: inset 6px 6px 12px #babecc, inset -6px -6px 12px #ffffff;--shadow-recessed: inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff;--shadow-accent: 4px 4px 8px rgb(0 90 94 / .34), -4px -4px 8px rgb(77 210 218 / .4), inset 1px 1px 0 rgb(255 255 255 / .25);--glow-accent: 0 0 12px 2px rgb(0 122 127 / .46);--glow-green: 0 0 10px 2px rgb(34 197 94 / .72);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--spring: cubic-bezier(.175, .885, .32, 1.275);--font-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-tech: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;--screw-heads: radial-gradient(circle at 14px 14px, rgb(45 52 54 / .22) 0 2px, rgb(255 255 255 / .5) 2.4px 3px, transparent 3.4px), radial-gradient(circle at calc(100% - 14px) 14px, rgb(45 52 54 / .22) 0 2px, rgb(255 255 255 / .5) 2.4px 3px, transparent 3.4px), radial-gradient(circle at 14px calc(100% - 14px) , rgb(45 52 54 / .18) 0 2px, rgb(255 255 255 / .45) 2.4px 3px, transparent 3.4px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px) , rgb(45 52 54 / .18) 0 2px, rgb(255 255 255 / .45) 2.4px 3px, transparent 3.4px);font-family:var(--font-body);font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}html{background:var(--background);scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(circle at 12% 0%,rgb(255 255 255 / .85),transparent 34rem),linear-gradient(135deg,rgb(255 255 255 / .42),rgb(186 190 204 / .22) 48%,transparent),linear-gradient(90deg,rgb(45 52 54 / .055) 1px,transparent 1px),linear-gradient(rgb(45 52 54 / .045) 1px,transparent 1px),var(--background);background-size:auto,auto,42px 42px,42px 42px,auto;-webkit-font-smoothing:antialiased}body:before{position:fixed;inset:0;z-index:0;pointer-events:none;content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.24}#root{position:relative;z-index:1;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:0;box-shadow:var(--shadow-pressed),0 0 0 3px #007a7f52}.skip-link{position:fixed;top:16px;left:16px;z-index:20;padding:10px 14px;color:var(--accent-foreground);background:var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-accent);font-family:var(--font-tech);font-size:13px;font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform .18s var(--spring)}.skip-link:focus{transform:translateY(0)}.app-shell{width:min(1440px,calc(100vw - 48px));margin:0 auto;padding:24px 0 56px}.brand,.section-heading,.section-heading span,.note-summary,.fret-card header,.brand-status{display:flex;align-items:center}.brand{gap:14px;min-width:0}.brand-mark{position:relative;display:grid;width:50px;height:50px;place-items:center;flex:0 0 auto;color:var(--accent);background:var(--background);border-radius:50%;box-shadow:var(--shadow-floating)}.brand-mark:after{position:absolute;right:8px;bottom:8px;width:8px;height:8px;content:"";background:var(--green);border-radius:50%;box-shadow:var(--glow-green)}.brand strong{display:block;color:var(--text);font-size:19px;font-weight:800;line-height:1.05;letter-spacing:0;text-shadow:0 1px 0 var(--border-light)}.brand small,.brand-status,.chord-title p,.note-summary span,.quality-row span,.section-heading small,.bass-picker>span,.octave-labels,.fret-card-meta,.fret-numbers,.octave-tag{color:var(--text-muted);font-family:var(--font-tech);font-size:12px;font-weight:700;letter-spacing:0}.brand small{display:block;margin-top:2px}.brand-status{gap:6px;margin-top:4px;color:var(--text);font-size:11px}.status-led{width:9px;height:9px;flex:0 0 auto;background:var(--green);border-radius:50%;box-shadow:var(--glow-green);animation:led-pulse 1.8s ease-in-out infinite}.search{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:46px;padding:7px 14px;color:var(--text-muted);background:var(--muted);border-radius:var(--radius-lg);box-shadow:var(--shadow-recessed);transition:box-shadow .18s ease}.search:focus-within{box-shadow:var(--shadow-recessed),0 0 0 3px #007a7f38,var(--glow-accent)}.search input{width:100%;min-width:0;color:var(--text);background:transparent;border:0;outline:0;font-family:var(--font-tech);font-size:14px;font-weight:500}.search input::placeholder{color:#4a5568a3}.icon-button,.root-grid button,.quality-row button,.bass-picker button,.section-heading.with-action>button{border:0;color:var(--text);background:var(--background);border-radius:var(--radius-md);box-shadow:var(--shadow-button);transition:transform .15s var(--spring),box-shadow .18s ease,background .18s ease,color .18s ease,filter .18s ease}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px}.icon-button{width:48px}.icon-button[aria-pressed=true]{color:var(--accent)}.root-grid button,.quality-row button,.bass-picker button,.section-heading.with-action>button{min-height:42px;padding:9px 11px;font-family:var(--font-tech);font-size:13px;font-weight:700}.icon-button:hover,.root-grid button:hover,.quality-row button:hover,.bass-picker button:hover,.section-heading.with-action>button:hover{filter:brightness(1.03);transform:translateY(-2px)}.icon-button:active,.root-grid button:active,.quality-row button:active,.bass-picker button:active,.section-heading.with-action>button:active{box-shadow:var(--shadow-pressed);transform:translateY(2px)}.selected,.quality-row button.selected,.root-grid button.selected,.bass-picker button.selected{color:var(--accent-foreground);background:var(--accent);box-shadow:var(--shadow-accent)}.hero-panel{position:relative;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(520px,1.8fr);gap:16px;align-items:start;padding:18px;margin-bottom:22px;overflow:hidden;background-color:var(--background);background-image:var(--screw-heads),radial-gradient(circle at 0% 0%,rgb(255 255 255 / .85),transparent 42%);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating)}.hero-panel:after,.readout-panel:after,.control-block:after,.instrument-panel:after,.guitar-section:after,.theory-section:after{position:absolute;top:18px;right:20px;width:31px;height:7px;content:"";background:repeating-linear-gradient(90deg,rgb(74 85 104 / .42) 0 4px,transparent 4px 8px);border-radius:999px;filter:drop-shadow(-1px -1px 0 rgb(255 255 255 / .9))}.chord-title,.readout-panel,.tone-strip,.note-summary{min-height:124px;padding:18px;border-radius:var(--radius-lg);box-shadow:var(--shadow-recessed)}.chord-title{min-height:0;align-self:start;padding:18px;background:linear-gradient(135deg,rgb(255 255 255 / .34),transparent 74%)}.readout-panel{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;align-self:stretch;background:#f0f2f552}.chord-title .brand{margin-bottom:12px}.chord-title .brand-mark{width:42px;height:42px;box-shadow:var(--shadow-button)}.chord-title .brand-mark:after{right:6px;bottom:6px;width:7px;height:7px}.chord-title p,.readout-chord p,.note-summary span{margin:0 0 8px}.chord-title p{margin-bottom:6px}.readout-main{display:flex;align-items:center}.readout-chord h1{max-width:100%;margin:0 0 8px;overflow-wrap:anywhere;color:var(--text);font-size:3.1rem;font-weight:800;line-height:.98;letter-spacing:0;text-shadow:0 1px 0 var(--border-light)}.readout-chord>span{color:var(--text-muted);font-size:15px;font-weight:600}.note-summary{min-height:auto;padding:0;box-shadow:none;justify-content:flex-start;gap:18px;background:transparent}.note-summary strong{flex:1;color:var(--text);font-family:var(--font-tech);font-size:2rem;font-weight:700;line-height:1.08;letter-spacing:0;overflow-wrap:anywhere;text-shadow:0 1px 0 var(--border-light)}.tone-strip{min-height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;align-content:center;padding:0;box-shadow:none}.tone-card{display:grid;min-height:66px;place-items:center;padding:10px 8px;background:var(--muted);border-radius:var(--radius-md);box-shadow:var(--shadow-recessed)}.tone-card strong{color:var(--accent);font-family:var(--font-tech);font-size:24px;font-weight:800;line-height:1;text-shadow:0 1px 0 rgb(255 255 255 / .7)}.tone-card small{margin-top:7px;color:var(--text-muted);font-size:12px;font-weight:700}.workspace-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:22px;align-items:start}.control-rail,.study-stack{display:grid;gap:22px}.control-block,.instrument-panel,.guitar-section,.theory-section,.fret-card,.explain-card{position:relative;background-color:var(--background);background-image:var(--screw-heads),radial-gradient(circle at 0% 0%,rgb(255 255 255 / .62),transparent 46%);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.control-block,.instrument-panel,.guitar-section,.theory-section{padding:22px}.section-heading{justify-content:flex-start;gap:10px;margin-bottom:17px;color:var(--text)}.section-heading svg{color:var(--accent);stroke-width:1.7}.section-heading h2{margin:0;font-size:19px;font-weight:800;letter-spacing:0;text-shadow:0 1px 0 var(--border-light)}.section-heading.with-action{justify-content:space-between;gap:16px}.section-heading.with-action span{gap:10px;min-width:0}.section-heading.with-action>button{flex:0 0 auto;min-height:38px;padding:8px 13px;color:var(--text-muted)}.section-heading small{flex:0 0 auto;color:var(--accent)}.root-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bass-picker{margin-top:20px;padding-top:18px;border-top:1px solid rgb(163 177 198 / .52)}.bass-picker>span{display:block;margin-bottom:12px}.bass-picker>div{display:flex;flex-wrap:wrap;gap:10px}.quality-groups{display:grid;gap:16px}.quality-row{display:grid;gap:10px}.quality-row>div{display:flex;flex-wrap:wrap;gap:10px}.piano-panel{overflow:hidden}.piano-wrap{width:min(100%,900px)}.octave-labels{display:flex;justify-content:space-between;gap:18px;padding:0 4px 10px}.piano{position:relative;display:grid;grid-template-columns:repeat(3,minmax(176px,1fr));width:100%;min-height:170px;overflow-x:auto;padding:14px 14px 36px;background:linear-gradient(#12101000 50%,#0000002e 50%),radial-gradient(circle at 14% 0%,rgb(255 255 255 / .12),transparent 44%),var(--screen);background-size:100% 4px,auto,auto;border:4px solid var(--screen-deep);border-radius:var(--radius-lg);box-shadow:var(--shadow-recessed),inset 0 0 0 1px #ffffff14;scrollbar-width:thin}.piano-octave{position:relative;min-width:176px;padding:22px 8px 0}.piano-octave+.piano-octave{border-left:1px solid rgb(255 255 255 / .12)}.piano-octave.context{opacity:.7}.piano-octave.focus{background:linear-gradient(180deg,rgb(255 255 255 / .08),transparent 72%)}.octave-tag{position:absolute;top:3px;left:10px;color:#d7dee8;font-size:11px;font-variant-numeric:tabular-nums}.octave-keys{display:flex;width:100%;min-width:160px;height:116px}.piano-key{position:relative;padding:0;border:1px solid var(--border-dark);transition:transform .12s ease,filter .15s ease,background .15s ease}.piano-key.white{flex:1 0 0;height:108px;background:linear-gradient(180deg,#fbfcfd,#dfe5ed);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:inset 1px 1px #fff,inset -2px -8px 14px #2d343614}.piano-key.black{z-index:2;flex:0 0 22px;width:22px;height:72px;margin-right:-11px;margin-left:-11px;background:linear-gradient(180deg,#343c3f,#15191b);border-color:#15191b;border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:0 9px 14px #0000005c,inset 1px 1px #ffffff1f}.piano-key.active.white{background:linear-gradient(180deg,#ffffff,var(--accent-soft));border-color:color-mix(in srgb,var(--accent) 45%,var(--border-dark))}.piano-key.active.black{background:linear-gradient(180deg,#34c3ca,var(--accent));border-color:var(--accent);box-shadow:var(--glow-accent),0 9px 14px #00000047}.piano-key:hover{filter:brightness(1.04);transform:translateY(1px)}.piano-key:active{transform:translateY(2px)}.piano-key span{position:absolute;left:50%;bottom:-28px;display:inline-flex;align-items:center;justify-content:center;gap:4px;color:#eef3f8;font-family:var(--font-tech);font-size:12px;font-weight:800;line-height:1;text-shadow:0 1px 2px rgb(0 0 0 / .45);transform:translate(-50%);white-space:nowrap}.piano-key.root span:before{flex:0 0 auto;width:8px;height:8px;content:"";background:var(--accent);border-radius:50%;box-shadow:var(--glow-accent)}.voicing-grid{display:grid;grid-template-columns:repeat(3,minmax(236px,1fr));gap:18px}.fret-card{display:grid;align-content:start;min-height:324px;padding:18px;transition:transform .22s var(--spring),box-shadow .22s ease}.fret-card:hover,.explain-card:hover{box-shadow:var(--shadow-floating);transform:translateY(-3px)}.fret-card header{justify-content:space-between;gap:12px;margin-bottom:12px}.fret-card header span{color:var(--accent);font-family:var(--font-tech);font-size:12px;font-weight:800}.fret-card header strong{color:var(--text);font-family:var(--font-tech);font-weight:800}.fret-card-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:15px;padding:9px 11px;background:var(--muted);border-radius:var(--radius-md);box-shadow:var(--shadow-recessed);font-variant-numeric:tabular-nums}.fretboard-diagram{display:grid;gap:8px}.fret-numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-left:60px;color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums}.fret-numbers span{display:grid;min-height:18px;place-items:center}.fret-area{display:grid;grid-template-columns:22px 22px minmax(0,1fr);gap:8px}.string-labels,.fret-markers{display:grid;grid-template-rows:repeat(6,minmax(0,1fr))}.string-labels span,.fret-markers span{display:grid;place-items:center;font-family:var(--font-tech);font-size:11px;font-weight:800;line-height:1}.string-labels span{place-items:center end}.fret-markers span{color:var(--text-muted)}.fret-markers .is-x{color:#0a6f74}.fret-markers .is-o{color:var(--accent)}.fret-box{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));min-height:194px;padding:5px 0;overflow:hidden;background:linear-gradient(90deg,rgb(255 255 255 / .34),transparent 58%),var(--muted);border-radius:var(--radius-md);box-shadow:var(--shadow-recessed)}.fret-box.has-nut{border-left:6px solid var(--screen)}.diagram-string,.fret-wire,.finger-dot{position:relative;z-index:1}.diagram-string{grid-column:1 / -1;align-self:center;height:var(--string-size, 2px);background:linear-gradient(180deg,#ffffffdb,#2d343670,#ffffffa6);box-shadow:0 1px 1px #2d343629}.fret-wire{z-index:2;grid-row:1 / -1;width:2px;height:100%;background:linear-gradient(90deg,#ffffffd9,#4a55686b)}.fret-box.has-nut .fret-wire.is-top{opacity:0}.finger-dot{z-index:4;display:grid;width:31px;height:31px;align-self:center;justify-self:center;place-items:center;color:var(--accent-foreground);background:var(--accent);border:2px solid rgb(255 255 255 / .74);border-radius:50%;box-shadow:var(--shadow-accent),var(--glow-accent);font-family:var(--font-tech);font-size:13px;font-weight:800;line-height:1}.string-labels{color:var(--text-muted)}.tone-explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.explain-card{min-height:116px;padding:18px;transition:transform .22s var(--spring),box-shadow .22s ease}.explain-card span{display:inline-flex;min-width:46px;min-height:36px;align-items:center;justify-content:center;color:var(--accent);background:var(--muted);border-radius:var(--radius-sm);box-shadow:var(--shadow-recessed);font-family:var(--font-tech);font-size:22px;font-weight:800}.explain-card strong{display:block;margin:10px 0 8px;color:var(--text);font-weight:800}.explain-card p,.mood-line{max-width:65ch;margin:0;color:var(--text-muted);line-height:1.68}.mood-line{margin-top:16px;padding:15px 17px;background:var(--muted);border-radius:var(--radius-md);box-shadow:var(--shadow-recessed)}@keyframes led-pulse{0%,to{opacity:.78;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}@media(max-width:1160px){.hero-panel,.workspace-grid,.readout-main{grid-template-columns:1fr}.note-summary strong{font-size:2rem}.voicing-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}}@media(max-width:720px){.app-shell{width:min(100% - 28px,1440px);padding-top:18px;padding-bottom:42px}.hero-panel,.control-block,.instrument-panel,.guitar-section,.theory-section{border-radius:var(--radius-lg)}.chord-title,.readout-panel,.tone-strip,.note-summary{min-height:auto;padding:22px}.chord-title h1,.readout-chord h1{font-size:2.6rem}.note-summary{align-items:flex-start}.note-summary strong{font-size:1.8rem}.tone-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.root-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.section-heading.with-action{align-items:flex-start}.voicing-grid,.tone-explain-grid{grid-template-columns:1fr}}@media(max-width:420px){.app-shell{width:min(100% - 20px,1440px)}.control-block,.instrument-panel,.guitar-section,.theory-section{padding:18px}.root-grid{gap:8px}.quality-row>div,.bass-picker>div{gap:8px}}