.cycle-direction,.accidental-order{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.cycle-direction article,.accidental-order article{padding:17px;border:1px solid #2c425e;border-radius:13px;background:#08111f}.cycle-direction span,.accidental-order span{color:#3fddeb;font-size:.7rem;font-weight:950;letter-spacing:.1em}.cycle-direction strong,.accidental-order strong{display:block;margin:6px 0;color:#fff;font-size:1.12rem}.cycle-direction p,.accidental-order p{margin:5px 0;color:#61efb1;font-weight:850}.cycle-direction small,.accidental-order small{color:#aebed0}.key-signature-study{margin:20px 0;padding:20px;border:1px solid #2a405c;border-radius:16px;background:#07101d}.key-signature-study h3{margin:6px 0;color:#fff;font-size:1.4rem}.key-signature-study header p{color:#adbdcf}.key-signature-table{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.key-signature-table div{display:grid;gap:3px;padding:11px;border:1px solid #2c415d;border-radius:9px;background:#0d1929}.key-signature-table b{color:#41ddeb}.key-signature-table span{color:#fff;font-size:1.1rem;font-weight:900}.key-signature-table small{color:#9dafc1}.cycle-quiz{display:grid;grid-template-columns:1.5fr 2fr auto;align-items:center;gap:14px;margin:20px 0;padding:19px;border:1px solid #46e5a0;border-radius:15px;background:linear-gradient(120deg,#071a20,#10182c)}.cycle-quiz h3{margin:6px 0;color:#fff}.cycle-quiz p{margin:0;color:#b4c5d5}.cycle-quiz-answers{display:flex;gap:8px}.cycle-quiz-answers button{flex:1;padding:13px;border:1px solid #37506e;border-radius:9px;background:#0c1a2a;color:#fff;font-weight:900}.cycle-quiz-answers button.correct{border-color:#56eeaa;background:#12382a}.cycle-quiz-answers button.wrong{border-color:#ff6b7c;background:#35141d}.cycle-application{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px;padding:18px;border-radius:14px;background:#eaf9f1;color:#153525}.cycle-application strong{font-size:1.05rem}.cycle-application p{margin:5px 0 0;color:#496759}@media(max-width:850px){.key-signature-table{grid-template-columns:repeat(3,1fr)}.cycle-quiz{grid-template-columns:1fr}}@media(max-width:600px){.cycle-direction,.accidental-order,.key-signature-table{grid-template-columns:1fr}.cycle-application{align-items:stretch;flex-direction:column}}