@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fira+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap";.scale-name{text-transform:capitalize;white-space:pre-wrap;color:var(--ink-1);flex-flow:wrap;justify-content:center;align-items:center;gap:.35rem;font-size:1.15rem;display:inline-flex}.app-layout{flex-direction:column;align-items:center;gap:clamp(1.1rem,3.2vw,2rem);width:100%;max-width:88rem;margin:0 auto;animation:.26s fade-in;display:flex}.app-layout>*{width:min(100%,74rem)}.main-menu{border:1px solid var(--surface-3);background:color-mix(in srgb, var(--surface-1) 92%, transparent);z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:.95rem;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;padding:.85rem;display:flex;position:sticky;top:.6rem;box-shadow:0 10px 28px #2e2b241a}.menu-link{color:var(--ink-2);transition:border-color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing);border:1px solid #0000;border-radius:999px;padding:.58rem 1.05rem;font-weight:600;text-decoration:none}.menu-link:hover{border-color:var(--accent-soft);color:var(--ink-1);background:color-mix(in srgb, var(--color-red-3) 10%, transparent)}.menu-link.active{color:#fff;background:linear-gradient(135deg, var(--color-red-3), var(--color-red-2));border-color:color-mix(in srgb, var(--color-red-2) 72%, var(--surface-3));box-shadow:0 4px 10px #cf5f3c33}.menu-link:focus-visible{outline:2px solid var(--focus-ring-soft);outline-offset:2px}.menu-theme-toggle{border:1px solid var(--surface-3);background:var(--surface-1);color:var(--ink-1);width:2.5rem;height:2.5rem;font:inherit;cursor:pointer;transition:border-color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing), transform .1s ease;border-radius:999px;justify-content:center;align-items:center;margin-left:auto;padding:0;font-weight:700;display:inline-flex}.theme-icon{width:1rem;height:1rem}.menu-theme-toggle:hover{border-color:var(--accent-soft);transform:translateY(-1px)}.menu-theme-toggle:focus-visible{outline:2px solid var(--focus-ring-soft);outline-offset:2px}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.main-menu{border-radius:.8rem;gap:.55rem;padding:.65rem;top:.35rem}.menu-link{padding:.5rem .82rem;font-size:.9rem}.menu-theme-toggle{width:2.25rem;height:2.25rem;margin-left:0}}.dropdown-select{appearance:none;border:1px solid var(--surface-3);font:inherit;text-transform:capitalize;background:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%), linear-gradient(to right, transparent, transparent);color:var(--ink-1);cursor:pointer;background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 10px) calc(50% - 3px),100% 0;background-repeat:no-repeat;background-size:6px 6px,6px 6px,2.5em 100%;background-color:var(--surface-1);transition:border-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing);border-radius:.75rem;outline:0;padding:.65rem 2.2rem .65rem .8rem;font-weight:600}.dropdown-select::-ms-expand{display:none}.dropdown-select:focus{outline:2px solid var(--focus-ring-soft);outline-offset:2px}.dropdown-select:hover{border-color:var(--accent-soft)}.dropdown-select option{color:var(--ink-1);background-color:var(--surface-1)}@media (width>=768px){.dropdown-select{padding:.75rem 2.4rem .75rem .9rem}}.piano-keys-shell{width:100%;padding:0 0 .2rem;overflow:hidden}.piano-keys{--white-key-width:70px;--white-key-height:230px;--black-key-width:44px;--black-key-height:140px;justify-content:center;width:100%;margin:0;padding:0;list-style:none;display:flex}.piano-keys .key{cursor:pointer;-webkit-user-select:none;user-select:none;text-transform:uppercase;will-change:box-shadow, background, color;transition:background var(--theme-transition-duration) var(--theme-transition-easing), border-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing), transform 0s linear;animation:piano-key-settle .22s var(--theme-transition-easing);flex:none;position:relative}.piano-keys .black{z-index:2;width:var(--black-key-width);height:var(--black-key-height);margin:0 calc(var(--black-key-width) * -.5) 0 calc(var(--black-key-width) * -.5);background:linear-gradient(#3b4551,#202730);border:1px solid #1f2328;border-radius:0 0 5px 5px}.piano-keys .black:active{background:linear-gradient(#1f2328,#3e4a58);box-shadow:inset -4px -8px 10px #ffffff14}.piano-keys .key.black[data-active=true]:active{background:linear-gradient(to bottom, var(--piano-color-active) 0%, #f6e3ce 100%)}.piano-keys .white{height:var(--white-key-height);width:var(--white-key-width);border:1px solid var(--surface-3);color:var(--piano-white-key-label);background:linear-gradient(#fffefb 96%,#ebdfc8 4%);border-radius:8px}.piano-keys .white:active{background:linear-gradient(#fff 0%,#f1e3ca 100%);box-shadow:inset -5px 5px 20px #0003}.piano-keys .key.white[data-active=true]:active{background:linear-gradient(to bottom, var(--piano-color-active) 0%, #f1e3ca 100%)}.piano-keys .key span{width:100%;font-size:var(--piano-key-font-size);text-align:center;transition:color var(--theme-transition-duration) var(--theme-transition-easing), transform 0s linear, opacity .18s var(--theme-transition-easing);font-weight:700;position:absolute;bottom:14px}.piano-keys .key.hide span{display:none}.piano-keys .white span{color:var(--piano-white-key-label)}.piano-keys .black span{color:var(--piano-black-key-label);bottom:10px}.piano-keys .key[data-active=true]{background:var(--piano-color-active);color:var(--piano-color-secondary);box-shadow:0 8px 16px #cf5f3c40}.piano-keys .key.white[data-active=true] span{color:var(--piano-active-key-label)}.piano-keys .key.black[data-active=true] span{color:var(--piano-color-secondary)}.piano-keys .key[data-iskey=true]{background:var(--piano-color-isKey);box-shadow:0 10px 20px #cf5f3c59}.piano-keys .key.white[data-iskey=true] span{color:var(--piano-active-key-label)}.piano-keys .key.black[data-iskey=true] span{color:var(--piano-color-secondary)}.piano-keys .key[data-iskey=true][data-active=true]{box-shadow:0 12px 22px #cf5f3c47}@keyframes piano-key-settle{0%{opacity:.94}to{opacity:1}}@media screen and (width<=815px){.piano-keys{--white-key-width:clamp(40px, 8.8vw, 60px);--white-key-height:clamp(150px, 24vw, 180px);--black-key-width:clamp(28px, 5.8vw, 40px);--black-key-height:clamp(86px, 13vw, 100px);justify-content:center;margin-top:.5rem}}@media screen and (width<=767px){.piano-keys{--white-key-width:clamp(34px, 10.2vw, 56px);--white-key-height:clamp(138px, 30vw, 172px);--black-key-width:clamp(24px, 6.6vw, 38px);--black-key-height:clamp(78px, 17vw, 100px)}}@media screen and (width<=375px){.piano-keys{--white-key-width:clamp(30px, 10.8vw, 48px);--white-key-height:clamp(126px, 34vw, 164px);--black-key-width:clamp(22px, 6.8vw, 34px);--black-key-height:clamp(70px, 18vw, 94px)}}.scale-row-shell{width:100%;padding:.45rem 0;overflow:hidden}.scale-row{flex-wrap:nowrap;justify-content:center;gap:clamp(.2rem,1vw,.52rem);width:100%;margin:0 auto;display:flex}.scale-row .scale-interval{flex:1 1 0;min-width:0;max-width:3rem}.scale-row .scale-note{background-color:var(--surface-1);border:1px solid var(--surface-3);color:var(--ink-1);white-space:nowrap;box-sizing:border-box;border-bottom:none;border-radius:.55rem .55rem 0 0;justify-content:center;align-items:center;width:100%;min-height:2rem;padding:0 .25rem;font-size:1rem;font-weight:700;display:flex}.scale-row .scale-numeral{border:1px solid var(--surface-3);background:color-mix(in srgb, var(--surface-1) 90%, transparent);color:var(--ink-2);white-space:nowrap;box-sizing:border-box;border-top:none;border-radius:0 0 .55rem .55rem;justify-content:center;align-items:center;min-height:1.1rem;padding:0 .2rem;font-size:.78rem;display:flex}.scale-row p{margin:0}.scale-row .scale-interval[data-interval="1P"] .scale-note,.scale-row .scale-interval[data-interval="1P"] .scale-numeral{background:linear-gradient(135deg, var(--color-red-3), var(--color-red-2));border-color:var(--color-red-2);color:var(--color-white-1)}.scale-row.dense{gap:.44rem}.scale-row.dense .scale-interval{max-width:2.8rem}.scale-row.dense .scale-note{font-size:.98rem}.scale-row.dense .scale-numeral{font-size:.75rem}.scale-row.compact{gap:.36rem}.scale-row.compact .scale-interval{max-width:2.55rem}.scale-row.compact .scale-note{min-height:1.95rem;padding:0 .18rem;font-size:.9rem}.scale-row.compact .scale-numeral{min-height:1rem;padding:0 .12rem;font-size:.7rem}@media (width>=768px){.scale-row{justify-content:center;gap:.72rem}.scale-row .scale-note{max-width:3.3rem;font-size:1.15rem}.scale-row .scale-numeral{font-size:.82rem}.scale-row.dense .scale-note{max-width:3rem;font-size:1.05rem}.scale-row.dense .scale-numeral{font-size:.78rem}.scale-row.compact .scale-note{max-width:2.8rem;font-size:.98rem}.scale-row.compact .scale-numeral{font-size:.74rem}}@media (width>=1024px){.scale-row{gap:.9rem}.scale-row .scale-note{max-width:3.8rem;font-size:1.3rem}.scale-row .scale-numeral{font-size:.9rem}.scale-row.dense .scale-note{max-width:3.35rem;font-size:1.16rem}.scale-row.dense .scale-numeral{font-size:.84rem}.scale-row.compact .scale-note{max-width:3rem;font-size:1.06rem}.scale-row.compact .scale-numeral{font-size:.8rem}}.copy-button{background:color-mix(in srgb, var(--surface-1) 88%, transparent);border:1px solid var(--surface-3);cursor:pointer;color:var(--ink-1);width:1.9rem;height:1.9rem;transition:transform .1s ease, border-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing);border-radius:999px;flex-direction:column;justify-content:center;align-items:center;display:flex}.copy-button[data-copied=true]{color:var(--color-green-4);border-color:var(--color-green-4)}.copy-button:hover{border-color:var(--accent-soft);transform:translateY(-1px);box-shadow:0 6px 12px #1f23281f}.copy-button:focus-visible{outline:2px solid var(--focus-ring-soft);outline-offset:2px}.synth-controls{--synth-conrol-color:var(--surface-3);background:color-mix(in srgb, var(--surface-1) 92%, transparent);border:1px solid var(--surface-3);border-radius:var(--radius-lg);width:min(56rem,100%);box-shadow:var(--box-shadow);color:var(--ink-1);margin:.75rem auto 0}.synth-controls .synth-controls-wrapper{flex-direction:row;gap:.75rem;padding:1rem;display:flex}.synth-controls .synth-controls-wrapper .control{border:1px solid var(--synth-conrol-color);background:var(--surface-1);border-radius:.75rem;flex-direction:column;align-items:center;gap:.5rem;min-width:12rem;height:100%;display:flex}.synth-controls .synth-controls-wrapper .control header{background:color-mix(in srgb, var(--surface-2) 68%, transparent);border-bottom:1px solid var(--synth-conrol-color);justify-content:center;width:100%;padding:.4rem 0}.synth-controls .synth-controls-wrapper .control header p{color:var(--ink-1);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;font-weight:700}.synth-controls .synth-controls-wrapper .control .content{flex-grow:1;align-content:center;justify-items:center;padding:.75rem}.synth-controls .synth-controls-wrapper .control .content p{color:var(--ink-2);margin-bottom:.25rem;font-size:.85rem}.synth-controls .synth-controls-wrapper .control .content input[type=range],.synth-controls .synth-controls-wrapper .control .content input[type=number]{accent-color:var(--color-red-3);border:1px solid var(--surface-3);border-radius:.4rem;padding:.2rem}@media (width<=768px){.synth-controls .synth-controls-wrapper{padding:.75rem}.synth-controls .synth-controls-wrapper .control{min-width:100%}}.note-button{border:1px solid var(--surface-3);color:var(--ink-1);cursor:pointer;font:inherit;text-align:center;background:var(--surface-1);letter-spacing:.01em;transition:transform .1s ease-in, box-shadow var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), border-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing);border-radius:999px;padding:.5rem .9rem;font-size:.95rem;font-weight:700}.note-button.selected{border-color:var(--accent-soft);color:var(--ink-1);background:#f2b5896b}.note-button.selected.root{background:linear-gradient(135deg, var(--color-red-3), var(--color-red-2));border-color:var(--color-red-2);color:#fff;box-shadow:0 6px 14px #cf5f3c52}.note-button:hover{color:var(--ink-1);background-color:color-mix(in srgb, var(--surface-1) 85%, #fff);border-color:var(--accent-soft);transform:translateY(-1px)}.note-button:hover.selected{border-color:var(--accent-soft);color:var(--ink-1);background-color:#f2b5899e}.note-button:hover.selected.root{color:#fff;background:linear-gradient(135deg, var(--color-red-3), var(--color-red-2))}.note-button:active{color:var(--ink-1);background-color:var(--surface-2);border-color:var(--surface-3);transform:translateY(0)}.note-button:focus-visible{outline:2px solid var(--focus-ring-soft);outline-offset:2px}.scales-page{flex-direction:column;gap:2.1rem;display:flex}.scales-page header{border:1px solid var(--surface-3);border-radius:var(--radius-lg);background:linear-gradient(160deg, color-mix(in srgb, var(--surface-1) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));width:100%;max-width:50rem;box-shadow:var(--box-shadow);flex-direction:column;align-self:center;gap:1rem;padding:1.35rem;display:flex}.scales-page header h1{color:var(--ink-1);font-size:clamp(1.75rem,2.6vw,2.2rem)}.scales-page .clear-button{border:1px solid var(--color-dark-4);background:var(--surface-1);max-width:fit-content;color:var(--ink-1);cursor:pointer;transition:transform .1s ease, border-color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing);border-radius:999px;align-self:flex-end;margin:1rem 0 1.2rem;padding:.58rem 1.1rem;font-weight:600}.scales-page .clear-button:hover{border-color:var(--accent-soft);background:color-mix(in srgb, var(--color-red-3) 10%, var(--surface-1));transform:translateY(-1px)}.scales-page .root-hint{opacity:.9;color:var(--ink-2);font-size:.86rem}.scales-page .scale-meta{flex-wrap:wrap;gap:.85rem;display:flex}.scales-page .meta-pill{border:1px solid var(--surface-3);background:var(--surface-1);letter-spacing:.02em;color:var(--ink-1);border-radius:999px;padding:.36rem .86rem;font-size:.8rem;font-weight:500}.scales-page .scales-results{align-self:center;width:100%;max-width:80rem;padding:.55rem 0 1.6rem}.scales-page .scales-container{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:1.2rem;display:grid;overflow-y:auto}.scales-page .scale-card{color:var(--ink-1);background:linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 95%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent));border:1px solid var(--surface-3);transition:transform .12s ease, border-color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing);border-radius:14px;flex-direction:column;gap:1rem;padding:1.35rem;text-decoration:none;display:flex;box-shadow:0 10px 26px #1f23281f}.scales-page .scale-card:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 96%, transparent));border-color:var(--accent-soft);transform:translateY(-2px)}.scales-page .scale-card:focus-visible{outline:2px solid var(--focus-ring-soft);outline-offset:2px}.scales-page .scale-card-title{letter-spacing:.01em;color:var(--ink-1);font-size:1.2rem}.scales-page .scale-card-notes{font-family:var(--font-mono);color:var(--ink-2);background:color-mix(in srgb, var(--surface-1) 90%, transparent);border:1px solid var(--surface-3);border-radius:.5rem;padding:.52rem .68rem;font-size:.9rem}.scales-page .results-empty{border:1px dashed var(--color-dark-4);color:var(--ink-2);text-align:center;background:color-mix(in srgb, var(--surface-1) 86%, transparent);border-radius:10px;grid-column:1/-1;padding:1.35rem}@media (width<=768px){.scales-page .scales-container{grid-template-columns:1fr}.scales-page header{padding:1.1rem}}.mini-piano{flex-direction:row;align-items:flex-start;display:flex;position:relative}.mini-piano .key{background-color:var(--surface-1);transition:background-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing)}.mini-piano .key.white{border:1px solid var(--surface-3);border-radius:0 0 .3rem .3rem;width:1rem;height:3rem}.mini-piano .key.black{z-index:2;background-color:var(--color-dark-2);border-radius:0 0 .2rem .2rem;width:.38rem;height:1.9rem;margin:0 -.15rem}.mini-piano .key[data-active=true]{background:var(--piano-color-active)}.mini-piano .key[data-isroot=true]{background:var(--piano-color-isKey);box-shadow:0 4px 10px #cf5f3c2e}:root{--color-white-1:#f7f4ee;--color-white-2:#e2ddd2;--color-white-3:#b8b0a2;--color-dark-1:#0d1117;--color-dark-2:#151b23;--color-dark-3:#263041;--color-dark-4:#3e4b60;--color-purple-1:#42a7b5;--color-red-1:#8a3f2f;--color-red-2:#c15f42;--color-red-3:#e28454;--color-red-4:#f0b28d;--color-green-4:#54c689;--surface-1:#151b23;--surface-2:#1c2330;--surface-3:#2d3747;--ink-1:#f7f4ee;--ink-2:#d0c9bc;--piano-color-primary:#e6dfd2;--piano-color-secondary:#1e232b;--piano-color-active:#f0b28d;--piano-color-isKey:#e28454;--piano-white-key-label:#1e232b;--piano-black-key-label:#f2ebe0;--piano-active-key-label:#1e232b;--app-bg:radial-gradient(circle at 10% 6%, #42a7b52e, transparent 32%), radial-gradient(circle at 92% 8%, #e2845433, transparent 28%), linear-gradient(155deg, #0b0f14 0%, #131922 52%, #161d28 100%);--radius-sm:.5rem;--radius-md:.85rem;--radius-lg:1.1rem;--box-shadow:0 8px 24px #1f23281f;--space-1:.35rem;--space-2:.6rem;--space-3:.9rem;--space-4:1.25rem;--space-5:1.75rem;--space-6:2.5rem;--accent-soft:color-mix(in srgb, var(--color-red-3) 58%, var(--surface-3));--focus-ring-soft:color-mix(in srgb, var(--ink-2) 62%, transparent);--theme-transition-duration:.26s;--theme-transition-easing:cubic-bezier(.22, 1, .36, 1);--font-body:"DM Sans", "Segoe UI", sans-serif;--font-heading:"Space Grotesk", "Avenir Next", sans-serif;--font-mono:"Fira Mono", "Courier New", monospace}[data-theme=light]{--color-white-1:#fffaf0;--color-white-2:#f7efd9;--color-white-3:#d8cfbb;--color-dark-1:#1f2328;--color-dark-2:#28303a;--color-dark-3:#4a5664;--color-dark-4:#647183;--color-purple-1:#007a8a;--color-red-1:#8f4a34;--color-red-2:#cf5f3c;--color-red-3:#e57f4a;--color-red-4:#f2b589;--color-green-4:#2f915a;--surface-1:#fffaf0;--surface-2:#f4ecda;--surface-3:#e9dfc7;--ink-1:#1f2328;--ink-2:#3c4653;--piano-color-primary:#f6f2e9;--piano-color-secondary:#2b3139;--piano-color-active:#f2b589;--piano-color-isKey:#e57f4a;--piano-white-key-label:#1f2328;--piano-black-key-label:#f2ebe0;--piano-active-key-label:#1f2328;--app-bg:radial-gradient(circle at 8% 4%, #007a8a29, transparent 28%), radial-gradient(circle at 92% 12%, #e57f4a33, transparent 25%), linear-gradient(160deg, #fffdf8 0%, #f8f0e2 56%, #f7f5ee 100%)}html,body,#root{width:100%;min-height:100%;margin:0;padding:0}*,:before,:after{box-sizing:border-box}body{color:var(--ink-1);font-family:var(--font-body);background:var(--app-bg);transition:color var(--theme-transition-duration) var(--theme-transition-easing), background var(--theme-transition-duration) var(--theme-transition-easing)}body.theme-fade{animation:theme-fade-in var(--theme-transition-duration) var(--theme-transition-easing)}@keyframes theme-fade-in{0%{opacity:.88}to{opacity:1}}@media (prefers-reduced-motion:reduce){:root{--theme-transition-duration:0s}body.theme-fade{animation:none}}main{width:100%;max-width:96rem;margin:0 auto;padding:clamp(.9rem,2.5vw,2rem)}@media screen and (width<=768px){main{padding:1.1rem}}.container{width:100%;margin:0 auto}h1,h2,h3,h4,h5,h6{color:var(--ink-1);font-family:var(--font-heading);letter-spacing:.02em;margin:0}button,input,select,textarea{font-family:var(--font-body)}p{color:var(--ink-2);margin:0}.p-16{padding:1rem}.p-32{padding:2rem}.flex{display:flex}.flex-column{flex-direction:column}.flex-center{justify-content:center;align-items:center}.flex-start{justify-content:flex-start;align-items:flex-start}.flex-wrap{flex-wrap:wrap}.gap-4{gap:var(--space-1)}.gap-8{gap:var(--space-2)}.gap-16{gap:var(--space-3)}.gap-32{gap:var(--space-5)}.width-m-40{width:min(46rem,100%);max-width:46rem}@media (width>=768px){.md-justify-center{justify-content:center}.md-justify-start{justify-content:flex-start}.md-align-center{align-items:center}.md-flex-center{justify-content:center;align-items:center}.md-gap-4{gap:.25rem}.md-gap-8{gap:.5rem}.md-gap-16{gap:1.2rem}.md-gap-32{gap:2.25rem}}