@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");:root{--bg:#0f1115;--card:#1a1e27;--line:#2a2f3a;--accent:#28b1d0;--text:#e8eaed;--muted:#9aa3b2;--nav-h:56px}*{box-sizing:border-box}body{font-family:Instrument Sans,sans-serif;background:var(--bg);color:var(--text);font-weight:400}body,h1{margin:0}h1{font-size:26px;letter-spacing:-.02em}.sub{color:var(--muted);margin-top:6px;font-size:14px}.aurora,.bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}.foot,.hero,main{position:relative;z-index:1}.aurora .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;will-change:transform}.aurora .b1{width:55vw;height:55vw;left:-12vw;top:-12vw;background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%);animation:drift1 22s ease-in-out infinite alternate}.aurora .b2{width:50vw;height:50vw;right:-10vw;top:18vh;background:radial-gradient(circle at center,color-mix(in srgb,#7b5cff 48%,transparent),transparent 70%);animation:drift2 28s ease-in-out infinite alternate}.aurora .b3{width:46vw;height:46vw;left:24vw;bottom:-16vh;background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%);animation:drift3 26s ease-in-out infinite alternate}@keyframes drift1{0%{transform:translate(0) scale(1)}to{transform:translate(12vw,10vh) scale(1.15)}}@keyframes drift2{0%{transform:translate(0) scale(1)}to{transform:translate(-14vw,8vh) scale(1.1)}}@keyframes drift3{0%{transform:translate(0) scale(1.1)}to{transform:translate(8vw,-10vh) scale(1)}}@media (prefers-reduced-motion:reduce){.aurora .blob{animation:none}}.soft-aurora-container{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.soft-aurora-container canvas{width:100%!important;height:100%!important;display:block;transform-origin:center;animation:auroraPulse 3.6s ease-in-out infinite}@keyframes auroraPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}@media (prefers-reduced-motion:reduce){.soft-aurora-container canvas{animation:none}}.site-nav{position:-webkit-sticky;position:sticky;top:0;z-index:20;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,28px);background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.nav-brand{font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--text);text-decoration:none}.nav-brand:hover{color:var(--accent)}.nav-right{display:flex;align-items:center;gap:4px}.nav-link{color:var(--muted);background:none;border:none;border-radius:8px;padding:7px 12px;font-size:14px;font-family:inherit;cursor:pointer;text-decoration:none;transition:color .15s,background .15s}.nav-link:hover{color:var(--text);background:color-mix(in srgb,var(--card) 60%,transparent)}.nav-link.active{color:var(--accent)}.bg .halo{width:640px;height:640px;margin:-320px 0 0 -320px;filter:blur(40px);opacity:.6;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent),transparent 45%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 80%);animation:spin 26s linear infinite}.bg .halo,.bg .orbit{position:absolute;top:44%;left:50%;border-radius:50%}.bg .orbit{border:1px dashed color-mix(in srgb,var(--accent) 14%,transparent)}.bg .orbit.o1{width:360px;height:360px;margin:-180px 0 0 -180px;animation:spin 42s linear infinite}.bg .orbit.o2{width:600px;height:600px;margin:-300px 0 0 -300px;animation:spin 66s linear infinite reverse}.bg .ring{position:absolute;top:44%;left:50%;width:0;height:0;border:1px solid var(--accent);border-radius:50%;opacity:0;animation:ripple 7s linear infinite}@keyframes ripple{0%{width:0;height:0;margin:0;opacity:0}10%{opacity:.55}to{width:900px;height:900px;margin:-450px 0 0 -450px;opacity:0}}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.bg{display:none}}.hero{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px}.hero h1{font-size:clamp(36px,6vw,54px)}.hero .sub{font-size:16px}.hero .sub .pop{color:var(--accent);font-weight:600}.demo-link{margin-top:14px;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 6px;transition:color .15s;animation:rise .7s ease .24s both}.demo-link:hover{color:var(--accent)}.hero .upload{width:100%;max-width:560px;margin-top:10px;animation:rise .7s ease .12s both}.hero header{animation:rise .7s ease both}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;border:1.5px dashed var(--line);border-radius:14px;padding:28px 20px;text-align:center;background:color-mix(in srgb,var(--card) 30%,transparent);cursor:pointer;transition:border-color .15s}.drop.over,.drop:hover{border-color:var(--accent)}.drop input{display:none}.controls{margin-top:16px;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.ctl-label{color:var(--muted);font-size:13px}.ctl-select{margin-left:6px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px}.btn{background:var(--accent);color:#151515;border:none;padding:10px 18px;border-radius:9px;font-weight:600;cursor:pointer;font-size:14px}.btn:disabled{opacity:.5;cursor:default}.upvote{display:inline-flex;align-items:center;gap:7px;background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.upvote:hover{color:var(--text);border-color:var(--accent)}.upvote .upvote-arrow{font-size:12px;line-height:1}.upvote.voted{color:#151515;background:var(--accent);border-color:var(--accent)}main{max-width:820px;margin:0 auto;padding:20px}.status{text-align:center;color:var(--muted);margin:18px 0;min-height:20px}.loading-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 10px}.spinner{width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.loading-msg{color:var(--text);font-size:15px;font-weight:600;text-align:center}.loading-sub{color:var(--muted);font-size:12px}.loading-bar{width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}.loading-bar>span{display:block;height:100%;width:35%;border-radius:2px;background:var(--accent);animation:slide 1.4s ease-in-out infinite}@keyframes slide{0%{margin-left:-35%}to{margin-left:100%}}.meta{color:var(--muted);font-size:13px;margin-bottom:12px}.section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:16px 0}.section h3{margin:0 0 4px;font-size:16px}table.grid{border-collapse:collapse;margin:8px 0 14px}table.grid td{width:20px;height:20px;text-align:center;border:1px solid var(--line);font-size:11px}table.grid td.lbl{width:34px;color:var(--muted);border:none;text-align:right;padding-right:8px}td.hit{background:var(--accent);color:#151515;font-weight:700}td.beat{border-left:2px solid #3a4150}.ge{margin:6px 0 4px}.ge-controls{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}.ge-play{background:var(--accent);color:#10151a;border:none;border-radius:8px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;min-width:88px}.ge-play:hover{filter:brightness(1.08)}.ge-tempo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.ge-tempo input[type=range]{width:120px;accent-color:var(--accent)}.ge-tempo span{min-width:58px}.ge-link{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer}.ge-link:hover{color:var(--accent);border-color:var(--accent)}.ge-kit{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.ge-kit select{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;font-family:inherit;cursor:pointer}.ge-kit select:hover{border-color:var(--accent)}.ctl-hint{display:inline-block;margin-top:10px;font-size:12px;color:var(--muted);text-decoration:none}.ctl-hint:hover{color:var(--accent)}.legal{max-width:720px;margin:0 auto;padding:44px 20px 60px;line-height:1.65}.legal h1{font-size:28px;margin-bottom:4px}.legal h2{font-size:18px;margin:26px 0 6px}.legal li,.legal p{color:var(--text);font-size:15px}.legal ul{padding-left:20px}.legal li{margin:4px 0}.legal .legal-meta{color:var(--muted);font-size:13px;margin-top:0}.legal a{color:var(--accent)}.ge-grid td.ge-beatnum{text-align:left;padding:0 0 3px 3px;border:none;border-left:2px solid #3a4150;color:var(--muted);font-size:10px;font-weight:600;height:auto}.ge-grid td.ge-cell{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background .08s}.ge-grid td.ge-cell:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}.ge-grid td.ge-cell.play{box-shadow:inset 0 0 0 2px var(--accent)}.ge-grid td.ge-cell.hit.play{background:color-mix(in srgb,var(--accent) 80%,#fff)}.ge-grid td.ge-cell.hit.ghost{background:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--muted);font-size:9px}.ge-grid td.ge-cell.hit.accent{background:color-mix(in srgb,var(--accent) 96%,#fff);font-weight:800}.ge-notation{display:inline-block;margin-top:6px;color:var(--muted);font-size:12px;text-decoration:none}.ge-notation:hover{color:var(--accent)}.editor-holder{display:none;margin-top:14px}.editor-holder iframe,.editor-holder.open{display:block;width:100%}.editor-holder iframe{height:min(84vh,900px);border:1px solid var(--line);border-radius:10px;background:#fff}.foot{color:var(--muted);font-size:12px;text-align:center;margin:30px 0;line-height:1.6}