.c-major-page{isolation:isolate;background:radial-gradient(circle at 16% 10%,#fffffff2,#0000 29%),radial-gradient(circle at 88% 82%,#b1a5903d,#0000 32%),linear-gradient(145deg,#e8e3d9,#fbfaf6 52%,#c8c1b5);flex-direction:column;align-items:center;min-height:100svh;padding:118px 28px 58px;display:flex;position:relative;overflow:hidden}.c-major-page:before{content:"𝄞     ♩      ♭      ♬      ♯      𝄢      ♪";z-index:-1;white-space:pre-wrap;word-spacing:10vw;color:#19181611;letter-spacing:5vw;pointer-events:none;font:clamp(38px,6vw,90px)/2.3 Georgia,serif;animation:22s ease-in-out infinite alternate notation-drift;position:absolute;inset:-8%;transform:rotate(-7deg)}.c-staff{z-index:-1;opacity:.12;background:repeating-linear-gradient(#0000 0 12px,#2624209e 13px 14px);width:116%;height:70px;position:absolute;top:39%;left:-8%;transform:rotate(-2deg)}.c-heading{text-align:center;z-index:1}.c-heading p{color:#7b5723;letter-spacing:.34em;margin:0;font-size:9px}.c-heading h1{color:#292722;letter-spacing:-.05em;text-shadow:none;margin:13px 0 12px;font:400 clamp(3.4rem,7vw,6rem)/.95 Georgia,serif}.c-heading>span{color:#5b5750;font:16px/1.6 Georgia,serif}.c-journey{z-index:2;justify-content:center;align-items:center;width:min(1180px,100%);margin:66px auto 44px;padding:48px 12px;display:flex;position:relative}.c-line{background:linear-gradient(90deg,#0000,#28262233 8% 92%,#0000);height:1px;position:absolute;top:50%;left:5%;right:5%}.c-piece{opacity:0;animation:c-arrive .6s calc(.15s + var(--i)*.1s) cubic-bezier(.2,.75,.2,1) forwards;align-items:center;display:flex}.c-note{z-index:2;background:#faf8f2f5;border:1px solid #23211d42;border-radius:50%;place-items:center;width:72px;height:72px;display:grid;position:relative;box-shadow:0 15px 32px #231f1921}.c-note span{color:#292722;font:35px/1 Georgia,serif}.c-note small{color:#7b7368;letter-spacing:.16em;font-size:7px;position:absolute;bottom:-23px}.c-note.tonic{background:#25231f;border-color:#a87a31}.c-note.tonic span{color:#f5efe3}.c-note.tonic small{color:#805b21}.c-bridge{color:#33302b;cursor:pointer;background:0 0;border:0;outline:none;flex-direction:column;justify-content:center;align-items:center;width:65px;height:88px;padding:0;display:flex;position:relative}.c-bridge.half{color:#9b6d26;width:44px}.c-step{letter-spacing:.12em;background:#f8f5eee6;min-width:max-content;padding:5px 8px;font:700 10px/1 Arial,sans-serif;transition:all .25s;position:absolute;top:-2px}.c-route{align-items:center;width:100%;display:flex}.c-route i{height:1px;animation:c-grow .45s calc(.78s + var(--i)*.1s) ease forwards;background:currentColor;flex:1;transform:scaleX(0)}.c-route b{font-size:8px;animation:2s ease-in-out 1.4s infinite c-pulse;transform:rotate(45deg)}.c-bridge small{color:#81796e;letter-spacing:.13em;opacity:0;min-width:max-content;font-size:6px;transition:all .25s;position:absolute;bottom:0;transform:translateY(-4px)}.c-bridge:hover .c-step,.c-bridge:focus-visible .c-step,.c-bridge.active .c-step{color:#f6f0e5;background:#292722;transform:translateY(-5px)}.c-bridge.half:hover .c-step,.c-bridge.half:focus-visible .c-step,.c-bridge.half.active .c-step{background:#a7772d}.c-bridge:hover small,.c-bridge:focus-visible small,.c-bridge.active small{opacity:1;transform:none}.c-bridge:focus-visible{box-shadow:0 0 0 2px #b98a3d}.c-legend{color:#514c45;letter-spacing:.08em;gap:28px;font-size:11px;display:flex}.c-legend span{align-items:center;gap:8px;display:flex}.c-legend i{background:#292722;border-radius:50%;width:8px;height:8px}.c-legend i.half{background:#b98a3d}.c-return{color:#5b411b;letter-spacing:.22em;text-underline-offset:6px;margin-top:34px;font-size:9px;text-decoration:underline}@keyframes c-arrive{0%{opacity:0;transform:translateY(20px)scale(.92)}to{opacity:1;transform:none}}@keyframes c-grow{to{transform:scaleX(1)}}@keyframes c-pulse{50%{opacity:.55;transform:rotate(45deg)scale(1.6)}}@media (width<=900px){.c-journey{flex-direction:column;margin-top:45px;padding:20px}.c-line{width:1px;height:auto;inset:3% auto 3% 50%}.c-piece{flex-direction:column}.c-note{width:70px;height:70px}.c-note small{min-width:max-content;top:30px;bottom:auto;left:84px}.c-bridge,.c-bridge.half{width:100px;height:65px}.c-route{width:65px;transform:rotate(90deg)}.c-step{top:20px;left:calc(50% + 32px)}.c-bridge small{bottom:25px;right:calc(50% + 39px)}.c-major-page{padding:104px 16px 48px}.c-heading h1{font-size:3.8rem}.c-heading>span{max-width:310px;font-size:15px;display:block}.c-legend{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px}}@media (width<=380px){.c-note{width:64px;height:64px}.c-note span{font-size:33px}.c-bridge,.c-bridge.half{height:59px}.c-step{top:17px}.c-bridge small{bottom:22px}}@media (prefers-reduced-motion:reduce){.c-major-page *{animation:none!important}.c-piece{opacity:1}}.staff-viewer{z-index:3;background:#f8f5eee6;border:1px solid #2d292430;width:min(1080px,100%);margin:10px auto 36px;padding:28px 30px 24px;position:relative;box-shadow:0 22px 48px #1f1c171f}.staff-viewer-head{justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:15px;display:flex}.staff-viewer-head p{color:#805b21;letter-spacing:.26em;margin:0 0 6px;font-size:9px}.staff-viewer-head h2{color:#292722;margin:0;font:400 30px/1 Georgia,serif}.clef-switch{background:#ddd6ca;padding:4px;display:flex}.clef-switch button{color:#5c554c;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;min-height:40px;padding:9px 18px;font-size:10px}.clef-switch button.selected{color:#f5efe4;background:#292722;box-shadow:0 5px 13px #1f1c172e}.clef-switch button:focus-visible{outline-offset:2px;outline:2px solid #b98a3d}.music-staff{background:linear-gradient(90deg,#ffffffa6,#efeae161);border-top:1px solid #2f2b2614;border-bottom:1px solid #2f2b2614;height:220px;position:relative;overflow:hidden}.staff-lines{z-index:0;background:repeating-linear-gradient(#393631 0 1px,#0000 1px 20px);height:81px;position:absolute;top:62px;left:78px;right:20px}.staff-lines:after{content:"";background:#393631;width:2px;height:81px;position:absolute;top:0;right:0}.clef-symbol{z-index:2;color:#292722;font-family:Times New Roman,serif;position:absolute;left:17px}.clef-symbol.treble{font-size:92px;line-height:1;top:43px}.clef-symbol.bass{font-size:75px;line-height:1;top:65px}.staff-note-row{z-index:1;height:100%;display:flex;position:absolute;top:0;left:92px;right:28px}.staff-note-slot{flex:1;min-width:52px;height:100%;position:relative}.notation-note{width:21px;height:14px;position:absolute;left:50%;transform:translate(-50%)}.notation-note b{background:#292722;border-radius:50%;width:20px;height:13px;position:absolute;top:0;left:0;transform:rotate(-17deg)}.notation-note i{background:#292722;width:2px;height:42px;position:absolute;bottom:6px;left:17px}.notation-note em{color:#292722;font:22px/1 Georgia,serif;position:absolute;top:-4px;right:24px}.staff-note-slot>span{color:#655e55;font:14px/1 Georgia,serif;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.ledger-line{z-index:-1;background:#393631;width:34px;height:1px;position:absolute;left:50%;transform:translate(-50%)}@media (width<=720px){.staff-viewer{margin-top:2px;padding:22px 12px 16px}.staff-viewer-head{flex-direction:column;align-items:stretch;gap:16px;padding:0 5px}.staff-viewer-head h2{font-size:27px}.clef-switch{width:100%}.clef-switch button{flex:1;padding:8px 6px}.music-staff{height:208px;overflow:auto hidden}.staff-lines{left:64px;right:8px}.clef-symbol{left:4px}.clef-symbol.treble{font-size:80px;top:48px}.clef-symbol.bass{font-size:66px;top:69px}.staff-note-row{min-width:620px;left:70px;right:12px}.staff-note-slot{min-width:72px}.staff-note-slot>span{bottom:8px}.c-legend{margin-top:0}}