/* The online-tools directory shares the studio palette, type and content rail. */
.tools-hub{--hub-ink:#f5f0f7;--hub-muted:#b6adbf;--hub-panel:#14101b;--hub-line:#ffffff17;--hub-pink:#ffabd5;--hub-ease:cubic-bezier(.2,.75,.2,1);margin:0;background:#09070e;color:var(--hub-ink);font-family:Poppins,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.tools-hub #topbar{background:#0b0910ed;border-bottom-color:#ffffff0e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.tools-hub *{box-sizing:border-box}.tools-hub [hidden]{display:none!important}.tools-hub a{color:inherit}.tools-hub button,.tools-hub input{font:inherit}.tools-hub button{cursor:pointer}.tools-hub :focus-visible{outline:3px solid #ffb7dc;outline-offset:5px}.tools-hub .skip-link{position:fixed;top:12px;left:20px;z-index:110;transform:translateY(-160%);padding:12px 20px;border-radius:10px;background:#f5e9f5;color:#211628!important;text-decoration:none}.tools-hub .skip-link:focus{transform:none}
.hub-main{position:relative;isolation:isolate;min-height:calc(100dvh - 88px)}.hub-main:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 5%,#a52a7018,transparent 48%),radial-gradient(ellipse at 0 62%,#48327914,transparent 50%)}.hub-shell{width:min(1180px,calc(100% - 64px));margin-inline:auto}.hub-hero{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:58px 0 38px}.hub-eyebrow{margin:0 0 18px!important;font:11px/1.5 var(--m-mono,monospace);letter-spacing:.17em;color:#d1bad5!important;display:flex;align-items:center;gap:10px}.hub-eyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hub-pink);box-shadow:0 0 14px #ff9ed270}.hub-hero h1{font-size:clamp(42px,4.5vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.055em;margin:0}.hub-hero h1 em{font-style:normal;color:#ffaad5;background-image:linear-gradient(110deg,#fff0fc 0%,#ffabd5 65%,#ed73b8 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hub-intro{margin:17px 0 0;font-size:14px;line-height:1.8;color:var(--hub-muted)!important}.hub-hero-note{flex:none;align-self:flex-end;text-align:right;padding-bottom:4px}.hub-hero-note p{color:var(--hub-muted);font-size:12px;line-height:1.8;margin:0}.hub-hero-note a{display:inline-flex;align-items:center;gap:15px;min-height:44px;margin-top:5px;color:#f0d9ed;text-decoration:none;font-size:12px}.hub-hero-note a:hover{color:var(--hub-pink)}
.hub-discovery{padding:0 0 23px;border-bottom:1px solid var(--hub-line)}.hub-search{position:relative;display:flex;align-items:center;width:100%;height:58px;border-radius:13px;border:1px solid #ffffff24;background:#ffffff04;box-shadow:inset 0 1px #ffffff04;transition:border-color .2s,background-color .2s}.hub-search:focus-within{border-color:#d6a2cc;background-color:#221526}.hub-search>svg{width:20px;height:20px;margin-left:20px;flex:none;fill:none;stroke:#c3b6cb;stroke-width:1.6}.hub-search input{width:100%;min-width:0;height:100%;padding:12px 14px;color:var(--hub-ink);background:none;border:0;font-size:14px;outline:none!important;box-shadow:none;-webkit-appearance:none}.hub-search input::-webkit-search-cancel-button{-webkit-appearance:none}.hub-search input::placeholder{color:#aaa0b3;opacity:1}.hub-search button{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:6px;border:0;border-radius:9px;color:#ddd0e6;background:none;font-size:25px;line-height:1}.hub-search button:hover{background:#ffffff0c}.hub-search button:disabled{visibility:hidden}.hub-filter-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:17px}.hub-filters{display:flex;flex-wrap:wrap;gap:7px}.hub-filters button{min-height:44px;border:1px solid transparent;padding:10px 18px;background:none;border-radius:24px;color:#c4b9ce;font-size:12px;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}.hub-filters button:hover{background:#ffffff07;color:#fff0fb}.hub-filters button[aria-pressed=true]{background:#f2e8f4;color:#231529;border-color:#fff0fc;box-shadow:0 3px 15px #0003}.hub-count{flex:none;font-size:11px!important;color:var(--hub-muted)!important;margin:0;white-space:nowrap}.hub-filters[aria-disabled=true]{opacity:.5;pointer-events:none}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:24px 0 34px;list-style:none;margin:0}.hub-card{--accent:#ffabd5;--shade:#a6186c;min-width:0;border:1px solid #ffffff1c;border-radius:20px;overflow:hidden;background:linear-gradient(125deg,#ffffff05,#ffffff00 65%),var(--hub-panel);position:relative;transition:border-color .3s,transform .4s var(--hub-ease),box-shadow .4s var(--hub-ease)}.hub-card:hover,.hub-card:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-3px);box-shadow:0 18px 45px #0003}.hub-card[data-category=mastering]{--accent:#ffc1e2;--shade:#8c315e}.hub-card[data-category=drums]{--accent:#a5f3d0;--shade:#0a7d6b}.hub-card[data-category=melodies]{--accent:#c5b1ff;--shade:#5740b5}.hub-card>a{position:relative;display:grid;grid-template-columns:1fr 44%;min-height:262px;text-decoration:none;height:100%;padding:28px;gap:18px;isolation:isolate}.hub-card-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;position:relative;z-index:2}.hub-category{font:10px/1.5 var(--m-mono,monospace);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:21px;display:flex;align-items:center;gap:8px}.hub-category svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.hub-card h2{margin:0 0 9px;font-weight:500;font-size:26px;line-height:1.18;letter-spacing:-.04em;color:var(--hub-ink)}.hub-card h2 small{font-size:12px;vertical-align:super;margin-left:4px;color:var(--accent);font-weight:400;letter-spacing:0}.hub-card p{font-size:12px;line-height:1.8;margin:0 0 22px;color:var(--hub-muted);max-width:235px}.hub-open{margin-top:auto;display:flex;align-items:center;gap:14px;min-height:44px;font-size:12px;font-weight:500;color:#eee4f2}.hub-open svg{width:31px;height:31px;border:1px solid #ffffff25;border-radius:50%;padding:8px;fill:none;stroke:currentColor;stroke-width:1.5;transition:background-color .25s,transform .3s}.hub-card:hover .hub-open svg{background:var(--accent);color:#201128;transform:translateX(3px)}
.hub-art{position:relative;min-width:0;align-self:center;height:205px;perspective:850px;display:flex;align-items:center;justify-content:center}.hub-art:before{content:'';position:absolute;inset:6% -15%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--shade) 38%,transparent),transparent 68%);filter:blur(12px)}.hub-instrument{position:relative;width:100%;aspect-ratio:1.1;max-height:205px;border-radius:16px;padding:12px 12px 9px;background:linear-gradient(140deg,color-mix(in srgb,var(--shade) 50%,#342a39),#15111e 80%);border:1px solid color-mix(in srgb,var(--accent) 43%,transparent);box-shadow:inset 0 1px 1px #ffffff6b,inset 2px 0 1px #ffffff12,5px 8px 0 #0002,0 22px 25px #0007;transform:rotateY(-13deg) rotateZ(5deg);transition:transform .6s var(--hub-ease)}.hub-card:nth-child(even) .hub-instrument{transform:rotateY(-13deg) rotateZ(-5deg)}.hub-card:hover .hub-instrument,.hub-card:focus-within .hub-instrument{transform:rotateY(0) rotateZ(0) translateY(-4px)}.hub-instrument header{display:flex;align-items:center;justify-content:space-between;font:7px/1.4 var(--m-mono,monospace);letter-spacing:.12em;color:var(--accent);padding:0 0 8px}.hub-instrument header i{width:4px;height:4px;background:var(--accent);border-radius:50%}.hub-screen{position:relative;background:#080810a6;border:1px solid #ffffff15;border-radius:7px;overflow:hidden;padding:8px 6px}.hub-screen svg{width:100%;height:auto;display:block;overflow:hidden}.hub-instrument footer{padding-top:9px;display:flex;align-items:center;justify-content:space-between;color:#d9cde2;font:6px/1.4 var(--m-mono,monospace);letter-spacing:.05em}.hub-instrument footer i{width:19px;height:19px;border:1px solid #ffffff30;border-radius:50%;background:conic-gradient(from 30deg,#15121c,#746679,#2a2134,#a197ab,#15121c);box-shadow:0 3px 4px #0008;position:relative}.hub-instrument footer i:before{content:'';position:absolute;width:1px;height:5px;background:var(--accent);top:2px;left:8px;transform:rotate(30deg);transform-origin:1px 7px}.hub-graph-grid{stroke:#c4b1d3;stroke-width:.5;opacity:.13;fill:none}.hub-graph-line{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hub-graph-muted{fill:none;stroke:#948398;stroke-width:1;opacity:.5}.hub-wave-bars{fill:var(--accent);opacity:.85}.hub-scan{fill:var(--accent);opacity:.16;transform:translateX(-200px);animation:hub-scan 5s linear infinite}.hub-card:nth-child(2) .hub-scan{animation-delay:-2s}.hub-card:nth-child(3) .hub-scan{animation-delay:-1s}.hub-card:nth-child(4) .hub-scan{animation-delay:-3s}.hub-eq{stroke-dasharray:400;stroke-dashoffset:0;animation:hub-trace 5s ease-in-out infinite}.hub-loop{fill:var(--accent);fill-opacity:.06;stroke:var(--accent);stroke-width:.7;stroke-opacity:.4}.hub-note{fill:var(--accent);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 20%,transparent))}.hub-empty{text-align:center;padding:66px 20px 70px;min-height:290px}.hub-empty h2{font-size:25px;font-weight:500;letter-spacing:-.03em;margin:12px 0}.hub-empty p{font-size:13px;color:var(--hub-muted);margin:0 auto 19px;max-width:400px;overflow-wrap:anywhere}.hub-empty button{min-height:44px;padding:12px 22px;border:1px solid #ecd2ed35;border-radius:10px;background:#ecd2ed09;color:#f4e6f6;font-size:12px}.hub-membership{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;border-block:1px solid var(--hub-line)}.hub-membership p{font-size:13px;margin:0;color:var(--hub-muted)}.hub-membership strong{color:#f0e3f2;font-weight:500}.hub-membership a{display:inline-flex;min-height:44px;align-items:center;gap:24px;white-space:nowrap;font-size:12px;text-decoration:none;color:#f6dbef}.hub-membership a:hover{color:var(--hub-pink)}.hub-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 0 30px;color:var(--hub-muted);font-size:10px}.hub-footer p{margin:0;font-size:10px}.hub-footer div{display:flex;gap:22px}.hub-footer a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}.hub-footer>p{padding-top:14px}.hub-footer a:hover{color:var(--hub-pink)}.hub-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-noscript{font-size:12px;color:var(--hub-muted);line-height:1.7}.tools-hub .tb-tools-btn.active{color:var(--hub-pink)}
@keyframes hub-scan{to{transform:translateX(230px)}}@keyframes hub-trace{0%,10%{stroke-dashoffset:400;opacity:.3}40%,100%{stroke-dashoffset:0;opacity:1}}
@media(min-width:1600px){.hub-hero{padding-top:70px}}
@media(max-width:1100px){.hub-card>a{padding:24px;grid-template-columns:1fr 41%;gap:12px}.hub-card h2{font-size:24px}.hub-art{height:190px}.hub-instrument{padding:10px}.hub-instrument footer{font-size:5.5px}.hub-category{margin-bottom:17px}}
@media(max-width:760px){.hub-shell{width:calc(100% - 40px)}.hub-hero{padding:37px 0 28px;gap:22px}.hub-hero h1{font-size:45px}.hub-hero-note{display:none}.hub-intro{font-size:13px}.hub-filter-row{flex-wrap:wrap;gap:10px;padding-top:13px}.hub-filters{gap:4px}.hub-filters button{padding-inline:10px;font-size:11px}.hub-count{padding-left:2px}.hub-discovery{padding-bottom:17px}.hub-grid{grid-template-columns:1fr;gap:16px;padding-top:20px}.hub-card>a{min-height:244px;padding:23px;grid-template-columns:1fr 43%;gap:15px}.hub-card h2{font-size:25px}.hub-art{height:190px}.hub-card p{font-size:12px}.hub-membership{align-items:flex-start;flex-direction:column;gap:7px}.hub-membership p{font-size:12px;line-height:1.8}.hub-footer{flex-wrap:wrap;gap:3px}.hub-footer p{width:100%;line-height:1.7}.hub-footer div{gap:24px}.hub-footer>p{padding-top:4px}}
@media(max-width:380px){.hub-hero h1{font-size:39px}.hub-card>a{padding:20px;gap:10px;grid-template-columns:1fr 40%;min-height:246px}.hub-card h2{font-size:22px}.hub-art{height:164px}.hub-instrument{padding:8px;border-radius:12px}.hub-instrument footer{font-size:5px}.hub-instrument header{font-size:6px}.hub-category{font-size:9px}.hub-card p{font-size:11px}.hub-filters button{padding-inline:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hub-card,.hub-instrument,.hub-open svg,.hub-search,.hub-filters button{transition:none!important}.hub-scan{animation:none;display:none}.hub-eq{animation:none}.hub-card:hover,.hub-card:focus-within{transform:none}}

@media(max-width:340px){.hub-filters{gap:3px}.hub-filters button{padding-inline:6px}}

.hub-search:has(input:focus-visible){outline:3px solid #ffb7dc;outline-offset:3px}

.hub-card[data-category=stems]{--accent:#ffd3a0;--shade:#a16732}

.hub-card[data-tool="beats"]{--accent:#b7dafa;--shade:#315576}