:root{--green:#153b31;--ink:#102c25;--paper:#f2eee4;--card:#fbf8f0;--orange:#ef7441;--muted:#68756f;--line:#d7d0c2;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}html[data-theme=dark]{--ink:#edf2ea;--paper:#0f1714;--card:#18231e;--muted:#9ba89f;--line:#304139}*{box-sizing:border-box}html,body,#root{background:var(--paper);min-height:100%;color:var(--ink);margin:0}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}.holding-shell{grid-template-rows:auto 1fr auto;min-height:100dvh;display:grid}header{min-height:70px;padding:calc(10px + var(--safe-top)) max(24px, var(--safe-right)) 10px max(24px, var(--safe-left));background:var(--green);color:#f8f3e8;justify-content:space-between;align-items:center;display:flex}.brand{color:inherit;align-items:center;gap:10px;text-decoration:none;display:flex}.brand>span:last-child{line-height:1;display:grid}.brand b{letter-spacing:.28em;font-size:8px}.brand strong{letter-spacing:.08em;margin-top:3px;font:400 17px/1 Georgia,Times New Roman,serif}.brand small{color:#a8b9b2;letter-spacing:.12em;margin-top:4px;font-size:7px}.mark{border:1px solid #ffffff3d;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.mark svg{fill:none;width:27px;height:27px;stroke:var(--orange);stroke-width:2.5px;stroke-linecap:round}.status,.eyebrow{color:var(--orange);letter-spacing:.2em;font-size:8px;font-weight:800}.holding-stage{width:min(1180px,100%);margin:auto;padding:clamp(52px,8vw,108px) clamp(20px,6vw,76px)}h1{letter-spacing:-.045em;max-width:900px;margin:13px 0 22px;font:400 clamp(42px,7.2vw,92px)/.95 Georgia,Times New Roman,serif}h1 em{color:var(--orange);font-weight:400}.intro{max-width:630px;color:var(--muted);margin:0 0 clamp(40px,7vw,76px);font:400 clamp(16px,2vw,21px)/1.55 Georgia,Times New Roman,serif}.fretboard{border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden;box-shadow:0 18px 46px #18362d14}.fret-numbers{height:32px;color:var(--muted);border-bottom:1px solid var(--line);grid-template-columns:repeat(6,1fr);padding:0 16px;font-size:8px;display:grid}.fret-numbers span{place-items:center;display:grid}.strings{padding:12px 0}.string{grid-template-columns:repeat(13,minmax(38px,1fr));min-width:660px;height:42px;display:grid}.string>span{border-left:1px solid color-mix(in srgb, var(--muted) 35%, transparent);place-items:center;display:grid;position:relative}.string>span:before{content:"";background:color-mix(in srgb, var(--ink) 48%, transparent);height:1px;position:absolute;top:50%;left:0;right:0}.string>span.active{z-index:2;border:3px solid var(--card);background:var(--green);color:#fff;width:34px;height:34px;box-shadow:0 0 0 2px var(--orange);border-radius:50%;place-self:center;font:400 12px Georgia,serif}.string>span.active:before{display:none}.route-line{background:color-mix(in srgb, var(--orange) 55%, transparent);transform-origin:50%;height:2px;position:absolute;top:52%;left:12%;right:9%;transform:rotate(-4deg)}.notes{border:1px solid var(--line);background:color-mix(in srgb, var(--card) 75%, transparent);border-top:0;grid-template-columns:repeat(4,1fr);display:grid}.notes span{border-left:1px solid var(--line);gap:6px;min-height:88px;padding:20px;display:grid}.notes span:first-child{border-left:0}.notes b{color:var(--orange);letter-spacing:.16em;font-size:8px}.notes small{color:var(--muted);font:400 13px/1.35 Georgia,serif}footer{padding:16px max(28px, var(--safe-right)) calc(16px + var(--safe-bottom)) max(28px, var(--safe-left));border-top:1px solid var(--line);color:var(--muted);letter-spacing:.14em;justify-content:space-between;align-items:center;gap:20px;font-size:7px;display:flex}footer>span{align-items:center;gap:8px;display:flex}footer .mark{border-color:var(--line);width:25px;height:25px}footer .mark svg{width:15px;height:15px}footer button{border:1px solid var(--line);color:inherit;letter-spacing:.14em;cursor:pointer;background:0 0;padding:7px 10px;font-size:7px}footer a{color:inherit;text-underline-offset:3px}@media (width<=700px){header{min-height:64px;padding-inline:max(12px, var(--safe-right)) max(12px, var(--safe-left))}.status{text-align:right;max-width:92px;line-height:1.4}.brand .mark{width:36px;height:36px}.brand strong{font-size:14px}.brand small{display:none}.holding-stage{padding:46px 12px 52px}h1{font-size:clamp(39px,12.5vw,58px)}.intro{margin-bottom:34px;font-size:16px}.fretboard{-webkit-overflow-scrolling:touch;overflow-x:auto}.fret-numbers{min-width:660px}.notes{grid-template-columns:1fr 1fr}.notes span:nth-child(3){border-left:0}.notes span:nth-child(n+3){border-top:1px solid var(--line)}footer>span b{display:none}}@media (width<=440px){footer{padding-inline:14px}footer a{text-align:right;max-width:105px;line-height:1.5}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}