.symbols-page .symbol-card{background:linear-gradient(150deg,#faf7efaa,#e9e1d3aa);flex-direction:column;display:flex}.symbol-stage{perspective:650px;color:#292722;place-items:center;height:140px;margin:10px -4px 0;display:grid}.music-symbol-glyph{width:220px;max-width:100%;height:115px;display:block;overflow:visible}.symbol-stage .music-symbol-glyph{filter:drop-shadow(3px 5px #b69b7155)drop-shadow(0 10px 6px #65543c22);transform:rotateX(12deg)rotateY(-9deg)rotate(-2deg)}.symbols-page .term-card h3{overflow-wrap:normal;word-break:normal;font-size:23px}.symbol-english-name{color:#8a795e;flex-wrap:wrap;gap:7px;margin-bottom:9px;font-size:11px;line-height:1.8;display:flex}.symbol-english-name bdi{color:#6f6250}.symbols-page .symbol-dropdowns{grid-template-columns:minmax(0,1fr);max-width:480px}.symbols-page .term-category-grid button{color:#e4cfaa;background:#292722;border-color:#5b513f}.symbols-page .term-category-grid button b{color:#e4cfaa;background:#554935}.symbols-page .term-category-grid button[aria-pressed=true]{color:#211f1a;background:#b89252;border-color:#8b692f}.symbols-page .term-category-grid button[aria-pressed=true] b{color:#f2dfbd;background:#292722}html[lang=ar] .symbols-page .term-card h3{direction:rtl;font-family:Tahoma,Arial,sans-serif}.symbols-page .term-alphabet button{min-height:44px}@media (width<=600px){.symbols-page .term-card h3{font-size:23px}.symbol-stage{height:125px}.symbols-page .term-category-grid button{min-height:62px}}.symbol-card{position:relative}.symbol-open-example{text-align:start;color:#89642a;font:inherit;cursor:pointer;background:0 0;border:0;min-height:44px;margin-top:auto;padding:20px 0 0;font-size:12px}.symbol-open-example span{margin-inline-start:8px}.symbol-open-example:before{content:"";position:absolute;inset:0}.symbol-card:has(.symbol-open-example:focus-visible){outline-offset:4px;outline:2px solid #946e32}.symbol-card:has(.symbol-open-example:hover){border-color:#a78345}.symbol-open-example:focus-visible{outline:none}.symbol-modal{--symbol-example-gold:#996518;color:#292722;overscroll-behavior:contain;scrollbar-gutter:stable;background:linear-gradient(145deg,#f3eee4,#e1d6c3);border:1px solid #a18b63;width:min(860px,100vw - 32px);max-width:860px;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow-y:auto;box-shadow:0 25px 90px #0007}.symbol-modal::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#17140fc9}.symbol-modal-content{padding:26px 30px}.symbol-modal-top{color:#89652b;justify-content:space-between;align-items:center;gap:20px;font-size:11px;display:flex}.symbol-modal-close{color:#e4cfaa;cursor:pointer;z-index:5;background:#292722;border:1px solid #292722;flex-shrink:0;place-items:center;width:44px;height:44px;font:30px/1 Arial,sans-serif;display:grid;position:sticky;top:0}.symbol-modal h2{color:#292722;overflow-wrap:normal;margin:14px 0 16px;font:400 clamp(1.6rem,5vw,2.5rem)/1.25 Georgia,serif}.symbol-modal-description{color:#62594b;max-width:700px;font-size:14px;line-height:1.9}.symbol-modal-original{color:#8a795e;font-size:12px}.symbol-example h3{margin:27px 0 17px;font:400 27px/1.3 Georgia,serif}.symbol-example .space-clef-switch{gap:8px}.symbol-example .space-clef-switch button{min-height:44px;padding:11px 8px;font-family:inherit}.symbol-placement{color:#6e604a;margin:18px 0 0;font-size:13px;line-height:1.9}.symbol-example-space{padding:7px 10px 0}.symbol-example .example-selected-sign{filter:drop-shadow(1px 2px #96703433)}.example-selected-note .notation-head{fill:var(--symbol-example-gold)}.example-selected-note .notation-head.notation-whole{fill:none;stroke:var(--symbol-example-gold)}.example-selected-note .notation-stem{stroke:var(--symbol-example-gold)}.example-historical-head{fill:#e9dfce;stroke:var(--symbol-example-gold);stroke-width:3px}.example-cue-head{fill:var(--symbol-example-gold)}.symbol-example .example-highlight-clef .notation-clef{color:var(--symbol-example-gold)}.symbol-highlight-key{color:#7f643c;align-items:center;gap:8px;margin:0 0 18px;font-size:11px;display:flex}.symbol-highlight-key i{background:var(--symbol-example-gold);border-radius:50%;flex-shrink:0;width:9px;height:9px}.symbol-unpitched-note{color:#746651;font-size:12px;line-height:1.8}.symbol-modal .piano-notation{margin-top:15px;margin-bottom:5px}.symbol-modal .piano-notation h2{font-size:25px}.symbol-modal-done{color:#e4cfaa;min-height:44px;font:inherit;cursor:pointer;background:#292722;border:1px solid #292722;margin:24px auto 2px;padding:14px 24px;font-size:13px;display:block}.symbol-modal button:focus-visible{outline-offset:3px;outline:2px solid #996518}html[lang=ar] .symbol-modal h2,html[lang=ar] .symbol-example h3{font-family:Tahoma,Arial,sans-serif}@media (width<=600px){.symbol-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.symbol-modal-content{padding:17px 15px}.symbol-modal h2{font-size:26px}.symbol-modal-description{font-size:14px}.symbol-example h3{font-size:24px}.symbol-example .space-clef-switch{grid-template-columns:repeat(2,minmax(0,1fr))}.symbol-example-space{padding:12px 0 2px}.symbol-placement{font-size:12px}.symbol-example .piano-space{padding-inline:0}.symbol-modal .piano-notation h2{font-size:23px}}