.triads-page{isolation:isolate;color:#292722;background:radial-gradient(circle at 14% 8%,#fff,#0000 28%),linear-gradient(140deg,#eee9df,#faf8f3 48%,#cfc7b9);min-height:100svh;padding:126px 28px 56px;position:relative;overflow:hidden}.triads-page:before{content:"𝄞    ♩    ♭    ♬    𝄢";z-index:-1;word-spacing:15vw;color:#2927220a;pointer-events:none;font:85px/3 Georgia;position:absolute;inset:0}.triads-intro{text-align:center;width:min(790px,100%);margin:0 auto 44px}.triads-intro>p{color:#805b26;letter-spacing:.3em;margin:0 0 16px;font-size:10px}.triads-intro h1{letter-spacing:-.04em;color:#292722;text-shadow:none;margin:0 0 24px;font:400 clamp(3.6rem,7vw,6rem)/1 Georgia}.triads-intro>div{color:#61594e;margin:12px 0;font:18px/1.8 Georgia,serif}.triad-intro-formula{direction:ltr;justify-content:center;align-items:center;gap:14px;margin-top:25px;display:flex}.triad-intro-formula b{color:#f9f4e9;background:#292722;border-radius:50%;place-items:center;width:43px;height:43px;font:22px Georgia;display:grid;box-shadow:0 10px 18px #29272218}.triad-intro-formula i{color:#a77a35;font-style:normal}.triad-selectors{direction:ltr;border-top:1px solid #6a5a4233;border-bottom:1px solid #6a5a4233;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;width:min(1060px,100%);margin:auto;padding:32px 0;display:grid}.triad-panel-heading{align-items:center;gap:13px;margin-bottom:24px;display:flex}.triad-panel-heading>span{color:#9b7130;letter-spacing:.12em;font:10px Arial}.triad-panel-heading h2{margin:0;font:400 28px/1.3 Georgia}.triad-roots{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:16px 24px;display:grid}.triad-roots button{color:#292722;cursor:pointer;background:radial-gradient(circle at 30% 20%,#fffdf7,#e1dacd);border:1px solid #a89b87;border-radius:50%;width:72px;height:72px;font:29px/1 Georgia;transition:transform .2s,background .2s,color .2s;box-shadow:0 8px 20px #29272213}.triad-roots sup{color:#976b2b;vertical-align:super;margin-left:2px;font:15px Georgia}.triad-roots button:hover{transform:translateY(-3px)}.triad-roots button.selected{color:#f9f4e9;background:#292722;border-color:#b98a3d;box-shadow:0 0 0 4px #b98a3d22,0 12px 23px #29272224}.triad-roots button.selected sup{color:#d6ad6c}.triad-quality-panel{border-left:1px solid #6a5a4233;padding-left:32px}.triad-qualities{flex-direction:column;gap:20px;display:flex}.triad-result-link{color:#725329;border:1px solid #a98a5a;justify-content:center;align-items:center;gap:14px;padding:14px;font:14px/1.5 Georgia;display:flex}.triad-qualities button{color:#f3e6d0;text-align:start;cursor:pointer;background:#25231f;border:1px solid #786346;flex-direction:column;align-items:flex-start;gap:17px;min-height:172px;padding:28px;transition:all .2s;display:flex;box-shadow:0 10px 22px #29272218}.triad-qualities b{color:#d9b577;font:400 35px/1.2 Georgia}.triad-qualities b.triad-suspended-name{overflow-wrap:break-word;font-size:25px;line-height:1.4}.triad-qualities b.triad-altered-name{font-size:30px}.triad-extended-qualities{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.triad-extended-qualities button{gap:12px;min-height:155px;padding:20px 15px}.triad-extended-qualities b,.triad-extended-qualities b.triad-altered-name{overflow-wrap:break-word;font-size:27px}.triad-extended-qualities b.triad-suspended-name{font-size:20px}.triad-extended-qualities .triad-result-link{grid-column:1/-1}.triad-qualities span{font:14px/1.8 Georgia}.triad-qualities i{color:#d3ad71;margin:0 4px;font-style:normal}.triad-qualities small{letter-spacing:.14em;color:#c6ad83;font-size:10px}.triad-qualities button.selected{color:#f9f4e9;background:#151410;border-color:#ddb36d;box-shadow:0 0 0 3px #b98a3d66,0 15px 28px #29272220}.triad-qualities button.selected small,.triad-qualities button.selected i{color:#d3ad71}.triads-page button:focus-visible{outline-offset:4px;outline:2px solid #a87930}.triad-selection-hint{text-align:center;color:#81715a;max-width:650px;margin:38px auto;font:18px/1.7 Georgia}.triad-result{max-width:1120px;margin:56px auto 0;scroll-margin-top:100px}.triad-section-heading{text-align:center}.triad-section-heading>span{letter-spacing:.22em;color:#976b2b;font-size:10px}.triad-section-heading h2{margin:15px 0;font:400 clamp(2rem,4vw,3.2rem)/1.2 Georgia}.triad-section-heading p{color:#6c6050;font:16px/1.7 Georgia}.triad-scale{justify-content:center;align-items:center;gap:0;margin:32px 0 22px;display:flex}.triad-scale-piece{align-items:center;display:flex}.triad-scale-note{color:#8b8070;background:#f7f3eacf;border:1px solid #a1947f;border-radius:50%;place-items:center;width:72px;height:72px;font:27px Georgia;display:grid;position:relative}.triad-scale-note.is-chord-tone{color:#f8f0df;background:#292722;border-color:#b98a3d;box-shadow:0 12px 24px #2927221c}.triad-scale-note small{color:#927344;font:12px Arial;position:absolute;bottom:-26px}.triad-scale-step{color:#75674f;text-align:center;min-width:37px;font:700 10px Arial;position:relative}.triad-scale-step.half{color:#a77a35}.triad-degree-key{color:#85745e;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;margin:46px 0 0;font-size:12px;display:flex}.triad-degree-key>span:first-child{color:#4e4538;align-items:center;gap:8px;display:flex}.triad-degree-key i{background:#b98a3d;border-radius:50%;width:8px;height:8px;display:block}.triad-derivation{color:#a57b3a;flex-direction:column;align-items:center;gap:9px;margin:28px auto 30px;display:flex}.triad-derivation i{background:#a57b3a66;width:1px;height:32px}.triad-derivation span{letter-spacing:.16em;direction:ltr;font:11px Arial}.triad-derivation b{font:24px Georgia}.triad-fifth-change{text-align:center;color:#796342;margin:26px auto}.triad-fifth-change p{font:15px/1.8 Georgia,serif}.triad-fifth-change>div{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;display:flex}.triad-fifth-change bdi{color:#292722;font:30px Georgia}.triad-fifth-change span{color:#b98a3d;font:26px Georgia}.triad-fifth-change small{color:#8c714c;font-size:11px}.triad-chord{justify-content:center;align-items:center;margin:38px 0 45px;display:flex}.triad-chord-piece{align-items:center;display:flex}.triad-chord-note{color:#f8f0df;background:radial-gradient(circle at 28% 20%,#38342d,#25231f);border:1px solid #ae8241;border-radius:50%;place-items:center;width:112px;height:112px;font:37px Georgia;display:grid;position:relative;box-shadow:0 17px 31px #29272222}.triad-chord-note small{color:#dac6a4;font:10px Arial;position:absolute;bottom:15px}.triad-chord-note em{color:#fff;background:#b98a3d;border-radius:50%;place-items:center;width:24px;height:24px;font:11px Arial;display:grid;position:absolute;top:-12px}.triad-third{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:15px;width:150px;display:flex;position:relative}.triad-third>span{color:#665235;font:14px Georgia}.triad-third i{background:linear-gradient(90deg,#b98a3d55,#b98a3d,#b98a3d55);width:100%;height:1px}.triad-third small{color:#938167;font:11px Arial}.triad-fifth{color:#786548;border-top:1px solid #92734b33;border-bottom:1px solid #92734b33;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;width:min(650px,100%);margin:0 auto 32px;padding:18px 0;font:14px Georgia;display:flex}.triad-fifth b{color:#3c3327;font-size:18px;font-weight:400}.triad-fifth small{font:11px Arial}.triad-staff{text-align:center;margin-top:40px}.triad-staff>p{color:#877356;margin-bottom:20px;font:13px/1.5 Georgia}.triad-return{letter-spacing:.18em;text-underline-offset:6px;width:max-content;max-width:100%;margin:48px auto 0;font:10px Arial;text-decoration:underline;display:block}html[lang=ar] .triad-root-panel,html[lang=ar] .triad-quality-panel{direction:rtl}html[lang=ar] :is(.triads-intro>div,.triad-section-heading p,.triad-selection-hint,.triad-qualities span){font-family:Tahoma,Arial,sans-serif;line-height:1.9}html[lang=ar] .triads-intro h1{font-size:clamp(3rem,6vw,5rem)}html[lang=ar] :is(.triad-roots button,.triad-scale-note,.triad-chord-note){font-family:Tahoma,Arial,sans-serif}html[lang=ar] .triad-third>span{font-family:Tahoma,Arial,sans-serif;font-size:13px}@media (width<=900px){.triad-scale-note{width:60px;height:60px;font-size:23px}.triad-scale-step{min-width:24px}.triad-chord-note{width:100px;height:100px}.triad-third{width:120px}}@media (width<=640px){.triads-page{padding:108px 16px 44px}.triads-intro h1{font-size:3.5rem}.triads-intro>div{font-size:16px}.triad-selectors{grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:12px;padding:24px 0}.triad-panel-heading{gap:7px;min-height:54px;margin-bottom:18px}.triad-panel-heading h2{font-size:20px}.triad-quality-panel{padding-left:12px}.triad-roots{gap:13px 5px}.triad-roots button{width:44px;height:44px;font-size:21px}.triad-roots sup{font-size:11px}.triad-qualities button{gap:15px;min-height:160px;padding:16px 10px}.triad-qualities b{font-size:27px}.triad-qualities span{font-size:12px}.triad-qualities small{font-size:9px;line-height:1.6}.triad-qualities{gap:15px}.triad-result{margin-top:42px}.triad-scale{grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;row-gap:48px;display:grid}.triad-scale-piece{justify-content:center;width:100%;display:flex;position:relative}.triad-scale-note{width:58px;height:58px}.triad-scale-step{min-width:18px;font-size:9px;position:absolute;right:-6px}.triad-scale-piece:nth-child(4) .triad-scale-step{top:84px;right:auto}.triad-scale-note small{bottom:-22px}.triad-degree-key{gap:13px;margin-top:38px;font-size:11px}.triad-chord{flex-direction:column;gap:0}.triad-chord-piece{flex-direction:column}.triad-chord-note{width:105px;height:105px;font-size:33px}.triad-third{gap:8px;width:170px;height:85px}.triad-third i{width:1px;height:18px}.triad-chord{margin-bottom:28px}.triad-fifth{gap:12px}.triad-section-heading h2{font-size:2rem}html[lang=ar] .triad-scale-step{left:-6px;right:auto}html[lang=ar] .triad-scale-piece:nth-child(4) .triad-scale-step{left:auto}html[lang=ar] .triad-roots button,html[lang=ar] .triad-panel-heading h2{font-size:17px}html[lang=ar] .triad-qualities b{font-size:25px}}@media (width<=360px){.triad-selectors{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:8px}.triad-roots button{font-size:19px}.triad-quality-panel{padding-left:8px}.triad-scale-note{width:52px;height:52px}.triad-scale-step{right:-4px}html[lang=ar] .triad-scale-step{left:-4px}}@media (width<=640px){.triad-qualities b.triad-suspended-name{font-size:18px;line-height:1.5}.triad-qualities b.triad-altered-name{font-size:20px}.triad-fifth-change p{font-size:14px}}@media (width<=900px){.triad-extended-qualities{grid-template-columns:1fr}.triad-extended-qualities button{min-height:125px}.triad-extended-qualities b,.triad-extended-qualities b.triad-altered-name{font-size:24px}}@media (width<=640px){.triad-extended-qualities button{gap:10px;min-height:122px;padding:15px 9px}.triad-extended-qualities b,.triad-extended-qualities b.triad-altered-name,html[lang=ar] .triad-extended-qualities b{font-size:20px}.triad-extended-qualities b.triad-suspended-name{font-size:17px}.triad-extended-qualities span{font-size:11px}.triad-scale-piece:nth-child(8):not(:last-child) .triad-scale-step{top:84px;left:auto;right:auto}}@media (prefers-reduced-motion:reduce){.triads-page *{transition:none!important}}