@font-face{font-family:Host Grotesk;font-style:normal;font-weight:300 800;font-display:swap;src:url(host-grotesk-latin-ext-variable-20260810.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Host Grotesk;font-style:normal;font-weight:300 800;font-display:swap;src:url(host-grotesk-latin-variable-20260810.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Open Runde;font-style:normal;font-weight:600;font-display:swap;src:url(open-runde-semibold-600-20260816.woff2) format("woff2")}@font-face{font-family:Open Runde;font-style:normal;font-weight:700;font-display:swap;src:url(open-runde-bold-700-20260816.woff2) format("woff2")}:root{color-scheme:dark;--bg: #07131f;--ink: #eef4fa;--muted: rgba(238, 244, 250, .66);--faint: rgba(238, 244, 250, .42);--line: rgba(255, 255, 255, .09);--accent: #2f9bd8;--accent-2: #5cc0ff;--accent-ink: #04111c;--font-text: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;--font-display: ui-rounded, "SF Pro Rounded", "Open Runde", var(--font-text);--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100svh;background:var(--bg) radial-gradient(60rem 40rem at 72% -12%,rgba(47,155,216,.24),transparent 62%) no-repeat;color:var(--ink);font:400 1rem/1.55 var(--font-text);-webkit-font-smoothing:antialiased}img{max-width:100%}a{color:var(--accent-2)}:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:.25rem}.skip-link{position:absolute;left:1rem;top:-4rem;padding:.6rem 1rem;background:var(--accent-2);color:var(--accent-ink);border-radius:999px;font-weight:600;text-decoration:none;z-index:10}.skip-link:focus{top:1rem}.page{width:min(100% - 2.5rem,62rem);margin-inline:auto}.site-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.25rem}.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em}.brand img{width:2.25rem;height:2.25rem;border-radius:.6rem;display:block}.brand b{color:var(--accent-2);font-weight:inherit}.site-nav a{color:var(--muted);text-decoration:none;font-weight:500;padding:.5rem .25rem;transition:color .2s}.site-nav a:hover{color:var(--ink)}.hero{padding-block:clamp(1.5rem,5vw,4rem) clamp(1.25rem,3vw,2rem);max-width:40rem}h1{margin:0 0 1rem;font:700 clamp(2.6rem,7.5vw,4.75rem) / .98 var(--font-display);letter-spacing:-.04em}h1 b{color:var(--accent-2);font-weight:inherit}.lead{margin:0;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:34rem}.player-mount{margin-block:1rem 3rem}.player-status{margin:0 auto;width:min(100%,40rem);padding:2.25rem 1.5rem;border:1px dashed var(--line);border-radius:2rem;color:var(--muted);text-align:center}.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem 3rem;padding-block:1rem 2.5rem;border-top:1px solid var(--line)}h2{margin:1.5rem 0 .75rem;font:600 1.3rem / 1.2 var(--font-display);letter-spacing:-.02em}.details p{margin:0 0 .75rem;color:var(--muted)}.keys{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;align-items:center}.keys dt{display:flex;gap:.3rem}.keys kbd{font:600 .78rem / 1 var(--font-text);padding:.38rem .5rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:.45rem;background:#ffffff0d;color:var(--ink);white-space:nowrap}.keys dd{margin:0;color:var(--muted)}.site-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;padding-block:1.5rem 2.5rem;border-top:1px solid var(--line);color:var(--faint);font-size:.9rem}.site-foot p{margin:0}.site-foot a{color:var(--muted);text-decoration-color:var(--line)}.site-foot a:hover{color:var(--ink)}.card{--disc: clamp(9.5rem, 34vw, 13.5rem);position:relative;display:grid;grid-template-columns:var(--disc) minmax(0,1fr);grid-template-areas:"disc scales" "ti ti" "bar bar" "time time" "controls controls";column-gap:clamp(1rem,4vw,2rem);align-items:center;width:min(100%,40rem);margin-inline:auto;padding:clamp(1.25rem,4vw,2rem);border-radius:2rem;background:linear-gradient(160deg,#ffffff13,#ffffff08);border:1px solid var(--line);box-shadow:0 30px 80px -30px #000000bf;-webkit-user-select:none;user-select:none}.info{display:contents}.mask{grid-area:disc;position:relative;width:var(--disc);aspect-ratio:1;border-radius:50%;overflow:hidden;cursor:pointer;background:#0a0f16;box-shadow:0 18px 40px -18px #000000d9;transition:transform .6s var(--ease-out),border-radius .6s var(--ease-out),box-shadow .6s}.card.is-playing .mask{box-shadow:0 18px 40px -18px #000000d9,0 0 0 6px #2f9bd81f,0 0 60px -10px #2f9bd880}.mask:after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.06) 0 1px,transparent 1px 4px),radial-gradient(circle at 32% 28%,rgba(255,255,255,.2),transparent 46%);pointer-events:none;transition:opacity .6s}.mask.is-zoomed{border-radius:1.25rem;transform:scale(1.08);z-index:2}.mask.is-zoomed:after{opacity:0}.mask.is-zoomed .hole{opacity:0;transform:scale(.5)}.spin{position:absolute;inset:0;will-change:transform}.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.cover-enter{animation:cover-in .62s var(--ease-out) both}.cover-exit{animation:cover-out .62s var(--ease-out) both;pointer-events:none}.hole{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px #ffffff1f,0 0 0 6px #00000059;display:grid;place-items:center;transition:opacity .4s,transform .4s}.hole-inner{width:28%;aspect-ratio:1;border-radius:50%;background:#02070d;box-shadow:inset 0 1px 2px #ffffff26}.scales{grid-area:scales;display:block;width:100%;height:var(--disc);color:var(--accent-2);overflow:visible;transition:color .6s}.scales circle{fill:currentColor}.card:not(.is-playing) .scales{color:#eef4fa52}.track-info{grid-area:ti;position:relative;margin-top:clamp(1rem,3vw,1.5rem);min-height:3.6rem}.ti-layer{position:relative}.ti-abs{position:absolute;inset:0}.artist{margin:0;color:var(--muted);font-size:.92rem;font-weight:500}.track{margin:.1rem 0 0;font:600 clamp(1.35rem,4vw,1.75rem) / 1.15 var(--font-display);letter-spacing:-.025em;overflow-wrap:anywhere}.ti-enter{animation:ti-in .48s var(--ease-out) both}.ti-exit{animation:ti-out .48s var(--ease-out) both}.bar{grid-area:bar;position:relative;height:6px;margin-top:1.1rem;border-radius:999px;background:#ffffff1f;cursor:pointer}.bar:before{content:"";position:absolute;inset:-12px 0}.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px #5cc0ff80}.time{grid-area:time;display:flex;gap:.35rem;margin-top:.5rem;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--faint)}.time .current{color:var(--muted)}.controls{grid-area:controls;display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,.9rem);margin-top:1.1rem}.ctrl{position:relative;display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,transform .2s}.ctrl:hover{background:#ffffff12;color:var(--ink)}.ctrl:active{transform:scale(.94)}.ctrl:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.ctrl-play{width:3.75rem;height:3.75rem;background:var(--accent-2);color:var(--accent-ink);box-shadow:0 10px 30px -10px #5cc0ffcc}.ctrl-play:hover{background:#7fd0ff;color:var(--accent-ink)}.ctrl-play svg{width:1.1rem;height:1.1rem}.ctrl-toggle.is-active{color:var(--accent-2)}.ctrl-toggle.is-active:after{content:"";position:absolute;bottom:.35rem;left:50%;width:4px;height:4px;border-radius:50%;background:currentColor;translate:-50% 0}.loop-one{position:absolute;top:.3rem;right:.3rem;display:none;font:700 .55rem / 1 var(--font-text);padding:.12rem .22rem;border-radius:.3rem;background:var(--accent-2);color:var(--accent-ink)}.ctrl-loop.mode-one .loop-one{display:block}@media(max-width:27rem){.card{--disc: min(58vw, 13rem);grid-template-columns:1fr;grid-template-areas:"disc" "scales" "ti" "bar" "time" "controls";justify-items:center}.scales{height:7.5rem;margin-top:.75rem}.track-info,.bar,.time,.controls{width:100%}.track-info{text-align:center}.time{justify-content:center}}@media(prefers-reduced-motion:reduce){.cover-enter,.cover-exit,.ti-enter,.ti-exit{animation:none}.mask,.hole,.scales,.ctrl{transition:none}}@keyframes cover-in{0%{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes cover-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes ti-in{0%{opacity:0;transform:translate(var(--dx))}to{opacity:1;transform:translate(0)}}@keyframes ti-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--dx))}}.site-foot{--maikey-credit-muted: rgba(238, 244, 250, .68);--maikey-credit-fg: rgba(238, 244, 250, .94)}.maikey-credit{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;margin:0;color:var(--maikey-credit-muted, inherit);font-family:ui-rounded,SF Pro Rounded,Open Runde,-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(.72rem,.7rem + .1vw,.8rem);font-weight:600;line-height:1;letter-spacing:-.01em;text-transform:none;white-space:nowrap}.maikey-credit span,.maikey-credit__link{font:inherit;line-height:inherit}.maikey-credit__heart{font-size:1.08em}.maikey-credit__link{display:inline-flex;align-items:center;gap:.38rem;color:var(--maikey-credit-fg, inherit);text-decoration:none;transition:color .25s ease,transform .25s ease,filter .25s ease}.maikey-credit__link img{width:1.62em;height:1.62em;border-radius:.36em;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}.maikey-credit__name>span{color:#67c9f1}.maikey-credit__link:hover{transform:translateY(-2px);filter:drop-shadow(0 4px 12px rgba(71,179,242,.22))}.maikey-credit__link:hover img{transform:rotate(-7deg) scale(1.08);box-shadow:0 0 0 3px #67c9f126}.maikey-credit__link:focus-visible{border-radius:4px;outline:2px solid #67c9f1;outline-offset:4px}@media(max-width:420px){.maikey-credit{flex-wrap:wrap;white-space:normal}}@media(prefers-reduced-motion:reduce){.maikey-credit__link,.maikey-credit__link img{transition:none}.maikey-credit__link:hover,.maikey-credit__link:hover img{transform:none}}.site-foot .maikey-credit__link,.site-foot .maikey-credit__link:hover{color:var(--maikey-credit-fg, inherit)}.player-shell{width:min(100%,40rem);margin-inline:auto}.playlist{margin-top:1.5rem}.playlist__title{margin:0 0 .6rem;padding-inline:.5rem;font:600 1rem / 1.2 var(--font-display);letter-spacing:-.01em}.playlist__title span{color:var(--faint);font-weight:500;font-family:var(--font-text);font-size:.85rem;margin-left:.5rem}.playlist__list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}.playlist__item{display:grid;grid-template-columns:2rem 3rem minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;padding:.45rem .6rem .45rem .5rem;border:1px solid transparent;border-radius:1rem;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.playlist__item:hover{background:#ffffff0f}.playlist__item:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.playlist__item.is-current{background:#2f9bd81f;border-color:#5cc0ff47}.playlist__index{display:grid;place-items:center;height:1.5rem;color:var(--faint);font-size:.85rem;font-variant-numeric:tabular-nums}.playlist__item.is-current .playlist__index{color:var(--accent-2)}.playlist__bars{display:inline-flex;align-items:flex-end;gap:2px;height:.9rem}.playlist__bars i{width:3px;height:40%;border-radius:2px;background:currentColor;animation:playlist-bar .9s ease-in-out infinite}.playlist__bars i:nth-child(2){animation-delay:-.3s}.playlist__bars i:nth-child(3){animation-delay:-.6s}@keyframes playlist-bar{0%,to{height:35%}50%{height:100%}}.playlist__cover{width:3rem;height:3rem;border-radius:.6rem;object-fit:cover;background:#0a1626;display:block}.playlist__text{display:grid;gap:.1rem;min-width:0}.playlist__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist__artist{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist__badge{font:600 .7rem / 1 var(--font-text);padding:.3rem .5rem;border-radius:999px;background:#ffffff14;color:var(--muted);letter-spacing:.02em;white-space:nowrap}.playlist__badge.is-suno{background:#5cc0ff24;color:var(--accent-2)}.playlist__badge.is-local{background:#ffffff14;color:var(--muted)}@media(prefers-reduced-motion:reduce){.playlist__bars i{animation:none;height:70%}.playlist__item{transition:none}}.link-form{width:min(100%,40rem);margin:0 auto 1.25rem;padding:1.25rem;border-radius:1.5rem;background:var(--card);border:1px solid var(--line)}.link-form__label{display:block;margin-bottom:.6rem;font:600 1rem / 1.2 var(--font-display);letter-spacing:-.01em}.link-form__row{display:flex;gap:.6rem;flex-wrap:wrap}.link-form__row input[type=url]{flex:1 1 16rem;min-width:0;padding:.75rem 1rem;border:1px solid var(--line);border-radius:999px;background:#ffffff0f;color:var(--ink);font:500 1rem / 1.2 var(--font-text)}.link-form__row input[type=url]::placeholder{color:var(--faint)}.link-form__row input[type=url]:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.link-form__row button{padding:.75rem 1.4rem;border:0;border-radius:999px;background:var(--accent-2);color:var(--accent-ink);font:600 1rem / 1.2 var(--font-text);cursor:pointer;transition:background .2s,opacity .2s}.link-form__row button:hover{background:#7fd0ff}.link-form__row button:disabled{opacity:.5;cursor:default}.link-form__row button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.link-form__trap{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}.link-form__status{margin:.6rem 0 0;font-size:.85rem;color:var(--faint)}.link-form__status.is-ok{color:var(--accent-2)}.link-form__status.is-error{color:#ff9e9e}@media(max-width:30rem){.link-form__row button{width:100%}}.unavailable{width:min(100%,40rem);margin:1.5rem auto 0;padding:1.25rem;border-radius:1.5rem;border:1px dashed var(--line)}.unavailable__title{margin:0 0 .4rem;font:600 1rem / 1.2 var(--font-display);letter-spacing:-.01em}.unavailable__note{margin:0 0 .75rem;color:var(--muted);font-size:.9rem}.unavailable__list{margin:0;padding-left:1.2rem;color:var(--muted);font-size:.95rem;display:grid;gap:.3rem}.unavailable__list a{color:var(--ink);text-decoration-color:var(--line)}.unavailable__list a:hover{color:var(--accent-2)}.unavailable__reason{margin-left:.5rem;font-size:.8rem;color:var(--faint)}.playlist__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem}.playlist__remove{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:transparent;color:#ff6b6b;cursor:pointer;opacity:.75;transition:background .2s,color .2s,opacity .2s,transform .2s}.playlist__remove:hover,.playlist__remove:focus-visible{opacity:1;background:#ff6b6b24;color:#ff8a8a}.playlist__remove:active{transform:scale(.92)}.playlist__remove:focus-visible{outline:2px solid #ff8a8a;outline-offset:2px}.unavailable__list li{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}.unavailable__list .playlist__remove{margin-left:auto;width:2rem;height:2rem}.playlist__row.has-share{grid-template-columns:minmax(0,1fr) auto auto}.playlist__share{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:transparent;color:var(--accent-2);cursor:pointer;opacity:.75;transition:background .2s,opacity .2s,transform .2s}.playlist__share:hover,.playlist__share:focus-visible{opacity:1;background:#5cc0ff24}.playlist__share:active{transform:scale(.92)}.playlist__share:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.shared-note{width:min(100%,40rem);margin:1.25rem auto 0;color:var(--faint);font-size:.9rem;text-align:center}.toast{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));translate:-50% .5rem;margin:0;padding:.7rem 1.1rem;border-radius:999px;background:#eef4faf5;color:var(--accent-ink);font:600 .9rem / 1.2 var(--font-text);box-shadow:0 16px 40px -16px #000c;opacity:0;pointer-events:none;transition:opacity .25s,translate .25s var(--ease-out);z-index:20;max-width:min(90vw,32rem);text-align:center}.toast.is-visible{opacity:1;translate:-50% 0}