@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:500;src:url(./fredoka-latin-500-normal-B0JifZgm.woff2) format("woff2"),url(./fredoka-latin-500-normal-BL692wg7.woff) format("woff")}@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:600;src:url(./fredoka-latin-600-normal-C4zohCW5.woff2) format("woff2"),url(./fredoka-latin-600-normal-CcrEjrB4.woff) format("woff")}@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:700;src:url(./fredoka-latin-700-normal-BOIZVyIN.woff2) format("woff2"),url(./fredoka-latin-700-normal-C8FeHd3X.woff) format("woff")}:root{--ground: #faf5ff;--card: #ffffff;--card-border: #e9d5ff;--ink: #3b0764;--ink-2: #581c87;--muted: #7e22ce;--muted-2: #9333ea;--primary: #7c3aed;--primary-deep: #6d28d9;--primary-deeper: #5b21b6;--primary-soft: #a855f7;--primary-pale: #c084fc;--tint: #f3e8ff;--tint-2: #faf5ff;--lilac-edge: #c4b5fd;--pink: #ff4d8d;--pink-strong: #db2777;--pink-edge: #9f1239;--pink-tint: #fdf2f8;--pink-border: #fbcfe8;--yellow: #fbbf24;--yellow-light: #fef3c7;--yellow-pale: #fffbeb;--yellow-border: #fcd34d;--yellow-border-2: #fde68a;--yellow-edge: #d97706;--yellow-ink: #451a03;--yellow-ink-2: #78350f;--amber: #b45309;--green: #10b981;--green-tint: #ecfdf5;--green-tint-2: #d1fae5;--green-border: #6ee7b7;--green-ink: #065f46;--play-grad: linear-gradient(127deg, #7c3aed 0%, #7e22ce 50%, #312e81 100%);--brand-grad: linear-gradient(45deg, #7c3aed, #db2777);--primary-grad: linear-gradient(90deg, #7c3aed, #9333ea);--shadow: 59 7 100;--focus: #7c3aed;--font-ui: "Fredoka", system-ui, sans-serif;--font-head: "Fredoka", system-ui, sans-serif;--staff-bg: #fcf9f3;--staff-line: #8b5cf6;--note-upcoming: #4c1d95;--note-awaited: #a14a0b;--note-played: #059669;--note-band: rgba(252, 211, 77, .4);--note-band-edge: #d97706;--note-wrong: #be123c;--label-played-bg: #d1fae5;--label-played-ink: #065f46;--label-awaited-bg: #f59e0b;--label-awaited-ink: #451a03;--label-upcoming-bg: #f3e8ff;--label-upcoming-ink: #4c1d95;--loop-mark: #db2777;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--ground);color:var(--ink);font:500 17px/1.4 var(--font-ui);min-height:100vh;display:flex;flex-direction:column}a{color:var(--primary)}a:hover{color:var(--primary-deeper)}h1,h2{font-family:var(--font-head);font-weight:700;margin:0}:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.app-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;min-height:80px;padding:14px 32px;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:4px solid var(--tint);box-shadow:0 6px 20px #7c3aed0f}.brand{display:flex;align-items:center;gap:12px;margin:0;font:700 24px/32px var(--font-head);letter-spacing:-.6px;white-space:nowrap}.brand-tile{flex:none;display:grid;place-items:center;height:48px;padding:0 9px;border-radius:16px;background:var(--brand-grad);box-shadow:0 6px 0 var(--primary-deeper)}.brand-mark{display:block;width:auto;height:26px;filter:brightness(0) invert(1)}.brand-daddy,.brand-note{color:var(--primary)}.steps-nav{flex:1 1 560px;min-width:0;display:flex;justify-content:center}.steps{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:6px;list-style:none;font-weight:700;font-size:14px;line-height:20px;border-radius:24px;background:#faf5ffcc;border:2px solid var(--tint);box-shadow:inset 0 2px 4px #7c3aed14}.steps li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px 4px 6px;border-radius:9999px;color:var(--muted)}.step-dot{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card);border:2px solid var(--card-border);font-size:14px}.steps li[data-done]{color:var(--ink-2)}.steps li[data-done] .step-dot{background:var(--green-tint-2);border-color:var(--green-border);color:var(--green-ink)}.steps li[aria-current=step]{background:var(--brand-grad);color:#fff;box-shadow:0 4px 6px #ff4d8d59;padding-right:18px}.steps li[aria-current=step] .step-dot{background:#fff;border-color:#fff;color:var(--primary)}main{flex:1;display:flex;flex-direction:column;gap:32px;padding:28px 32px 36px;min-height:0}.card{--edge: var(--lilac-edge);display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;border:4px solid var(--card-border);background:var(--card);box-shadow:0 8px 0 var(--edge);min-width:0}.card h2{display:flex;align-items:center;gap:12px;font-size:20px;line-height:28px;color:var(--ink)}.card-ico{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--tint);font-size:24px;line-height:1}.song-card{position:relative;isolation:isolate;overflow:hidden;padding:28px;gap:18px;box-shadow:0 12px 32px #7c3aed14}.blob{position:absolute;z-index:-1;width:360px;height:360px;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}.blob-warm{top:-170px;right:-140px;background:radial-gradient(circle,#fbcfe8,#fde68a 70%)}.blob-cool{bottom:-190px;left:-150px;background:radial-gradient(circle,#bae6fd,#a7f3d0 70%)}.song-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}.song-title{display:flex;align-items:center;gap:14px;min-width:0}.song-tile{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#fbbf24,#fb923c);box-shadow:0 5px #ea580c;font-size:30px;line-height:1}.song-title h1{font-size:30px;line-height:36px;letter-spacing:.75px;color:var(--ink);overflow-wrap:anywhere}.deco{font-family:Noto Music,serif}.deco-1{font-size:26px;color:var(--pink-strong)}.deco-2{font-size:22px;color:var(--primary)}.song-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.bubble{margin:0;padding:10px 18px;border-radius:16px;border:2px solid var(--yellow-border-2);background:linear-gradient(90deg,var(--yellow-pale),var(--pink-tint),var(--tint-2));color:var(--ink-2);font-weight:700;font-size:17px}.bubble .hint-note{display:inline-block;padding:0 10px;border-radius:9999px;background:var(--yellow);color:var(--yellow-ink)}.pill-toggle,.btn{--edge: var(--lilac-edge);box-shadow:0 4px 0 var(--edge);transition:transform 80ms ease,box-shadow 80ms ease}.pill-toggle:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}.pill-toggle{min-width:44px;min-height:44px;padding:0 16px;border:2px solid var(--card-border);border-radius:16px;background:var(--tint);color:var(--ink-2);font:700 14px/20px var(--font-ui);cursor:pointer}.pill-toggle[aria-pressed=false]{background:var(--card);border-style:dashed;border-color:var(--lilac-edge)}.pill-toggle:hover{border-color:var(--primary-pale)}.staff-wrap{position:relative;height:clamp(300px,42vh,460px);border:4px solid var(--yellow-light);border-radius:24px;background:var(--staff-bg);overflow:hidden}.staff-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;box-shadow:inset 0 2px 4px 4px #0000000d;pointer-events:none}#staff{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;touch-action:pan-y}#staff.scrubbable{cursor:grab}#staff.scrubbable:active{cursor:grabbing}.legend{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:700}.legend li{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 10px;border-radius:9999px;border:2px solid}.legend li:nth-child(1){background:var(--green-tint);border-color:var(--green-border);color:var(--green-ink)}.legend li:nth-child(2){background:var(--yellow-light);border-color:var(--yellow-border);color:var(--yellow-ink-2)}.legend li:nth-child(3){background:var(--tint);border-color:var(--card-border);color:var(--ink-2)}.dot{width:14px;height:14px;border-radius:50%;flex:none}.dot-played{background:var(--note-played)}.dot-awaited{background:var(--note-awaited);box-shadow:0 0 0 3px var(--yellow)}.dot-upcoming{background:var(--note-upcoming)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}button,select,input,.btn{font-family:var(--font-ui)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:2px solid var(--card-border);border-radius:16px;background:var(--tint);color:var(--ink-2);font-weight:700;font-size:15px;line-height:20px;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--primary-pale)}.file-btn,.song-btn,.welcome-go,.tour-next{--edge: var(--primary-deep);border:none;background:var(--primary-grad);color:#fff;box-shadow:0 5px 0 var(--edge)}.btn-yellow{--edge: var(--yellow-edge);border-color:var(--yellow-border);background:var(--yellow);color:var(--yellow-ink)}.btn-yellow:hover:not(:disabled){border-color:var(--yellow-edge)}.btn-ico{font-size:18px;line-height:1}button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}select:disabled{opacity:.6;cursor:not-allowed}.btn-row{display:flex;flex-wrap:wrap;gap:12px}.file-btn{position:relative}.file-btn input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;cursor:pointer}.file-btn:focus-within{outline:4px solid var(--focus);outline-offset:3px}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;justify-content:flex-start;padding-right:44px;max-width:100%;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23581c87' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center}.song-name{margin:0;font-size:14px;line-height:19px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}.setup-card .select{align-self:flex-start}.input-info{margin:0;font-size:14px;line-height:19px;font-weight:600;color:var(--muted)}.input-info:empty{display:none}.input-info.connected{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:8px 14px;border-radius:9999px;border:2px solid var(--green-border);background:var(--green-tint);box-shadow:0 4px 0 var(--green);color:var(--green-ink);font-weight:700}.input-info.connected:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--green);flex:none}.beat-card{--edge: var(--yellow-border-2);border-color:var(--yellow-border-2)}.beat-card .card-ico{background:var(--yellow-light)}.chips{display:flex;flex-wrap:wrap;gap:4px;padding:7px;border-radius:16px;background:var(--yellow-pale);border:2px solid var(--yellow-border-2)}.chip{flex:1 0 auto;min-height:44px;min-width:52px;padding:0 10px;border:none;border-radius:12px;background:transparent;color:var(--yellow-ink-2);font:700 17px var(--font-ui);cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.chip[aria-pressed=true]{background:var(--yellow);color:var(--yellow-ink);box-shadow:0 4px 0 var(--yellow-edge)}.chip[aria-pressed=true]:active{transform:translateY(3px);box-shadow:0 1px 0 var(--yellow-edge)}.chip-more{color:var(--amber);font-size:15px;padding:0 12px}.chip-more[aria-expanded=true]{box-shadow:inset 0 0 0 2px var(--yellow-border)}.chip:hover:not([aria-pressed=true]){background:var(--yellow-light)}.meter-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:700;color:var(--ink-2)}.meter-more[hidden]{display:none}.meter-more .select{--edge: var(--yellow-border-2);border-color:var(--yellow-border-2);min-width:7em}.meter-custom{display:inline-flex;align-items:center;gap:6px}.meter-custom[hidden]{display:none}.meter-custom input,.tempo input[type=number]{color:var(--ink)}.meter-custom input{width:4.2em;min-height:48px;padding:0 10px;border:2px solid var(--yellow-border-2);border-radius:16px;background:var(--card);font:700 17px var(--font-ui)}input[aria-invalid]{border-color:var(--note-wrong)}.beat-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}.bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px}.bar .beat{min-width:48px;min-height:70px;padding:0 0 4px;border:none;background:none;display:inline-flex;align-items:flex-end;justify-content:center;cursor:pointer;border-radius:14px}.pad{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;width:44px;padding-bottom:4px;border-radius:14px;border:2px solid transparent;color:var(--yellow-ink);line-height:1}.beat[data-level=strong] .pad{height:64px;background:var(--yellow);border-color:var(--yellow-border);box-shadow:0 4px 0 var(--yellow-edge)}.beat[data-level=medium] .pad{height:52px;background:var(--yellow-border-2);border-color:var(--yellow-border);box-shadow:0 4px 0 var(--yellow-border)}.beat[data-level=weak] .pad{height:40px;background:var(--yellow-pale);border-color:var(--yellow-border-2);box-shadow:0 4px 0 var(--yellow-border-2);color:var(--yellow-ink-2)}.beat[data-level=off] .pad{height:40px;background:transparent;border:2px dashed var(--amber);color:var(--amber)}.pad .mark{height:14px;font:700 16px/14px var(--font-ui)}.pad .glyph{font-family:Noto Music,serif;font-size:22px;line-height:26px}.beat[data-level=weak] .glyph,.beat[data-level=off] .glyph{font-size:18px}.beat:hover .pad{outline:3px solid var(--yellow-border);outline-offset:1px}.beat.now .pad{animation:beat-now .22s ease-out}@keyframes beat-now{0%{transform:scale(1.12);box-shadow:0 0 0 4px var(--primary)}}.tempo{display:flex;flex-direction:column}.tempo-line{display:flex;align-items:baseline;gap:4px}.unit-eq{font-weight:700;color:var(--yellow-ink-2);font-size:16px;white-space:nowrap}.beat-unit{font-family:Noto Music,serif;font-size:22px;line-height:1}.tempo input[type=number]{width:2.1em;min-height:48px;padding:0 2px;border:none;border-bottom:3px dashed var(--yellow-border);border-radius:0;background:transparent;color:var(--amber);font:700 32px/1 var(--font-head);-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.tempo input[type=number]::-webkit-inner-spin-button,.tempo input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-word{font-size:12px;line-height:16px;font-weight:700;color:var(--yellow-ink-2);text-transform:uppercase;letter-spacing:.6px}.speed-row{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--yellow-ink-2);text-transform:uppercase;letter-spacing:.6px}.speed-row input[type=range]{flex:1;min-height:44px;min-width:0;margin:0;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.speed-row input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:9999px;background:var(--yellow-light);border:2px solid var(--yellow-border-2)}.speed-row input[type=range]::-moz-range-track{height:8px;border-radius:9999px;background:var(--yellow-light);border:2px solid var(--yellow-border-2)}.speed-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;border:3px solid #fff;background:var(--yellow);box-shadow:0 3px 0 var(--yellow-edge)}.speed-row input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:3px solid #fff;background:var(--yellow);box-shadow:0 3px 0 var(--yellow-edge)}.toggle{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;padding:0 16px 0 12px;border-radius:9999px;border:2px solid var(--card-border);background:var(--tint-2);color:var(--ink-2);font-weight:700;font-size:15px;cursor:pointer}.beat-card .toggle:has(input:checked){border-color:var(--green-border);background:var(--green-tint);box-shadow:0 4px 0 var(--green);color:var(--green-ink)}.toggle input{width:24px;height:24px;margin:0;accent-color:var(--primary)}.beat-card .toggle input{accent-color:var(--green-ink)}.toggle:focus-within{outline:4px solid var(--focus);outline-offset:3px}.toggle input:focus-visible{outline:none}.small-hint{margin:0;color:var(--muted);font-size:14px;font-weight:600}.play-card{--edge: #4c1d95;--focus: #fde047;border-color:var(--primary-pale);background:var(--play-grad);color:#fff}.play-card h2{color:#fff}.play-card .card-ico{background:#ffffff26}.play-card .hands-hint{color:var(--tint)}.play-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.start-btn{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;height:96px;border:4px solid #fff;border-radius:24px;background:linear-gradient(180deg,#fbbf24,#fde047);box-shadow:0 6px 0 var(--amber);color:var(--yellow-ink);font:700 12px/16px var(--font-head);text-transform:uppercase;letter-spacing:.6px;cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.start-ico{font-size:30px;line-height:1}.start-btn:hover:not(:disabled){transform:translateY(-1px)}.start-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--amber)}.play-side{flex:1 1 140px;display:flex;flex-direction:column;gap:12px;min-width:0}.play-card .btn{--edge: rgb(0 0 0 / .2)}.btn-listen{border-color:#fff3;background:#ffffff1f;color:#fff}.btn-listen:hover:not(:disabled){border-color:#ffffff73}.pause-icon{display:inline-block;width:.66em;height:.8em;margin-right:.35em;vertical-align:-.06em;border-left:.22em solid currentColor;border-right:.22em solid currentColor}.btn-stop{border-color:transparent;background:#00000040;color:var(--card-border)}.btn-stop:hover:not(:disabled){border-color:#ffffff4d}.play-card button:disabled{opacity:.55}.play-card .start-btn:disabled{opacity:1;border-color:#ffffff4d;background:#ffffff1f;box-shadow:0 6px #0003;color:#fff9}.play-note{margin:0;font-size:14px;line-height:19px;font-weight:600;color:#fff}.practice-opts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}.seg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:7px;border-radius:16px;background:#0000004d;border:1px solid rgb(255 255 255 / .15);max-width:100%}.seg-label{padding:0 8px 0 6px;font-size:12px;line-height:16px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--card-border)}.seg button{min-width:64px;min-height:44px;padding:0 14px;border:none;border-radius:12px;background:transparent;color:#fff;font:700 15px var(--font-ui);cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.seg button[aria-checked=true]{background:var(--pink-strong);color:#fff;box-shadow:0 4px 0 var(--pink-edge)}.seg button[aria-checked=true]:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pink-edge)}.seg button:hover:not([aria-checked=true]){background:#ffffff1f}.loop-btn{display:none}.loop-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px;border-radius:16px;background:#0003;border:1px solid rgb(255 255 255 / .15)}.play-card .toggle{border-color:#fff3;background:#ffffff1f;color:#fff}.play-card .toggle input{accent-color:var(--pink-strong)}.loop-range{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.loop-end{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.loop-word{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#fff;white-space:nowrap}.stepper{display:inline-flex;align-items:center;gap:0;padding:0 2px;border-radius:9999px;background:#0006}.step-btn{width:44px;height:44px;border:none;border-radius:50%;background:transparent;color:#fff;font:700 22px/1 var(--font-ui);cursor:pointer}.step-btn:hover{background:#ffffff1f}.stepper input{width:2.6em;min-height:44px;padding:0;border:none;border-radius:10px;background:transparent;color:var(--yellow);text-align:center;font:700 18px var(--font-head);-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.loop-here{min-height:44px;border-color:#fff3;background:#ffffff26;color:#fff}.credits{padding:22px 32px;background:var(--card);border-top:4px solid var(--tint);color:var(--ink-2);font-size:12px;line-height:16px;font-weight:700}.credits a{color:var(--muted-2)}.credits a:hover{color:var(--primary-deeper)}.privacy{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin:4px 0 0;padding:10px 14px;border-radius:16px;background:var(--tint-2);border:2px solid var(--tint);font-size:14px;font-weight:600;color:var(--ink-2)}.privacy[hidden]{display:none}.link-btn{min-height:44px;padding:0 6px;border:0;background:none;color:var(--primary-deep);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.report,.help,.welcome{border:4px solid var(--card-border);border-radius:24px;background:var(--card);color:var(--ink);box-shadow:0 8px 0 var(--lilac-edge),0 24px 48px rgb(var(--shadow) / .25)}.report::backdrop,.help::backdrop,.welcome::backdrop{background:rgb(var(--shadow) / .55)}.report{padding:28px;width:min(92vw,480px)}.report h2{font-size:30px;line-height:36px;margin:0 0 6px;color:var(--primary)}.report-hands{margin:0 0 4px;font-weight:700;color:var(--muted)}.overall{margin:0 0 18px;font:700 72px/1 var(--font-head);color:var(--ink)}.overall small{font-size:24px;color:var(--muted);font-weight:600}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}.report-grid div{padding:10px 14px;border-radius:16px;background:var(--tint-2);border:2px solid var(--tint)}.report-grid dt{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}.report-grid dd{margin:0;font:700 24px/1.3 var(--font-head);color:var(--ink)}.report-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.report .btn-again{--edge: var(--amber);min-height:56px;padding:0 28px;border:2px solid var(--yellow-border);background:var(--yellow);color:var(--yellow-ink);font-size:17px}.fs-btn{flex:none;display:inline-flex;align-items:center;gap:8px;touch-action:manipulation}.fs-btn[aria-pressed=false]{border-style:solid;border-color:var(--card-border);background:var(--tint)}.fs-icon{font-size:20px;line-height:1}.song-btn{display:none}html:has(body.fullscreen){height:100%;overflow:hidden;overscroll-behavior:none}body.fullscreen{height:100vh;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;gap:8px 14px;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}body.fullscreen button,body.fullscreen .btn,body.fullscreen .toggle{touch-action:manipulation}body.fullscreen .app-header,body.fullscreen main,body.fullscreen .song-card{display:contents}body.fullscreen .steps-nav,body.fullscreen .legend,body.fullscreen .credits,body.fullscreen .deco,body.fullscreen .blob,body.fullscreen .song-tile,body.fullscreen .card-ico{display:none}body.fullscreen .brand{grid-area:1 / 1;align-self:center;gap:8px;font-size:22px}body.fullscreen .brand-tile{height:38px;padding:0 7px;border-radius:12px;box-shadow:0 4px 0 var(--primary-deeper)}body.fullscreen .brand-mark{height:22px}body.fullscreen .song-head{grid-area:1 / 2;flex-wrap:nowrap;gap:12px;min-width:0;max-height:56px}body.fullscreen .head-tools{grid-area:1 / 3;align-self:center;flex-wrap:nowrap}body.fullscreen .help-label,body.fullscreen .help-new{display:none}body.fullscreen .help-btn{padding:0 10px}body.fullscreen .song-head{overflow:hidden;padding-bottom:4px}@media(max-width:600px),(max-width:660px)and (max-height:499px){body.fullscreen #fullscreen-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}body.fullscreen .fs-btn{padding:0 12px}}body.fullscreen .song-title{flex:1 1 auto;min-width:3em}body.fullscreen .song-title h1{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.fullscreen .song-tools{flex:0 1 auto;flex-wrap:nowrap;gap:10px;min-width:0}body.fullscreen .bubble{padding:5px 14px;font-size:15px;line-height:1.25;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}body.fullscreen .pill-toggle{flex:none;white-space:nowrap}body.fullscreen .staff-wrap{grid-area:2 / 1 / 3 / 4;height:auto;min-height:0;border-radius:20px}body.fullscreen .cards{grid-area:3 / 1 / 4 / 4;display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:8px;position:relative}body.fullscreen .card{padding:6px 10px;border-width:3px;border-radius:20px;gap:8px;box-shadow:0 4px 0 var(--edge)}body.fullscreen .card h2,body.fullscreen .play-note,body.fullscreen .song-name{display:none}body.fullscreen .song-btn{display:inline-flex;align-self:center;gap:6px;min-height:52px;padding:0 14px;white-space:nowrap}body.fullscreen .song-btn[aria-expanded=true]{background:var(--primary-deeper)}body.fullscreen .setup-card:not(.open){display:none}body.fullscreen .setup-card{position:absolute;left:0;bottom:calc(100% + 14px);z-index:5;width:min(420px,100%);padding:16px 18px;border-width:4px;box-shadow:0 8px 0 var(--lilac-edge),0 10px 30px rgb(var(--shadow) / .25)}body.fullscreen .setup-card h2{display:flex;font-size:20px}body.fullscreen .beat-card{flex-direction:row;flex-wrap:nowrap;align-items:center;position:relative;min-width:0;flex:0 1 auto}body.fullscreen .chips{flex-wrap:nowrap;gap:4px;padding:4px}body.fullscreen .chip[data-ts][aria-pressed=false]{display:none}body.fullscreen .chip{min-height:44px;min-width:52px}body.fullscreen .meter-more{position:absolute;left:0;bottom:calc(100% + 10px);z-index:5;flex-wrap:nowrap;padding:10px 14px;border-radius:16px;background:var(--card);border:3px solid var(--yellow-border-2);box-shadow:0 10px 30px rgb(var(--shadow) / .25);white-space:nowrap}body.fullscreen .beat-row{flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}body.fullscreen .bar{flex:none;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}body.fullscreen .beat-card:has(.beat:nth-child(9)) .speed-row{display:none}body.fullscreen .bar .beat{min-width:44px;min-height:58px}body.fullscreen .pad{width:36px;padding-bottom:3px;border-radius:11px}body.fullscreen .beat[data-level=strong] .pad{height:51px}body.fullscreen .beat[data-level=medium] .pad{height:42px}body.fullscreen .beat[data-level=weak] .pad,body.fullscreen .beat[data-level=off] .pad{height:32px}body.fullscreen .pad .mark{height:11px;font-size:13px;line-height:11px}body.fullscreen .pad .glyph{font-size:18px;line-height:21px}body.fullscreen .beat[data-level=weak] .glyph,body.fullscreen .beat[data-level=off] .glyph{font-size:15px}body.fullscreen .tempo{flex:none}body.fullscreen .tempo input[type=number]{font-size:28px;min-height:44px}body.fullscreen .tempo-word{font-size:12px;white-space:nowrap}body.fullscreen .speed-row{flex:1 1 80px;min-width:80px}body.fullscreen .speed-row span{display:none}body.fullscreen .toggle{flex:none;align-self:center;white-space:nowrap;min-height:44px;padding:0 12px 0 10px}body.fullscreen .small-hint{position:absolute;right:12px;bottom:calc(100% + 6px);padding:4px 10px;border-radius:10px;background:var(--card);white-space:nowrap}body.fullscreen .play-card{flex-direction:row;align-items:center;flex:none}body.fullscreen .play-row{flex-wrap:nowrap;gap:10px}body.fullscreen .start-btn{width:72px;height:72px;border-width:3px;border-radius:18px;box-shadow:0 4px 0 var(--amber)}body.fullscreen .start-ico{font-size:22px}body.fullscreen .play-side{flex:none;flex-direction:row;gap:8px}body.fullscreen .play-side .btn{min-height:48px;padding:0 14px;white-space:nowrap}body.fullscreen .practice-opts{flex-wrap:nowrap;gap:8px}body.fullscreen .seg{flex-wrap:nowrap;padding:4px}body.fullscreen .seg-label{display:none}body.fullscreen .seg button{min-width:52px;padding:0 10px;font-size:15px}body.fullscreen .loop-btn{display:inline-flex;gap:6px;min-height:48px;padding:0 12px;border-color:#fff3;background:#ffffff1f;color:#fff;white-space:nowrap}body.fullscreen .loop-btn.on{border-color:var(--yellow-border);background:var(--yellow);color:var(--yellow-ink)}body.fullscreen .loop-btn[aria-expanded=true]{outline:2px solid #fff;outline-offset:2px}body.fullscreen .loop-panel:not(.open){display:none}body.fullscreen .loop-panel{position:absolute;right:0;bottom:calc(100% + 10px);z-index:5;flex-wrap:nowrap;padding:12px 14px;border-radius:20px;border:3px solid var(--primary-pale);background:linear-gradient(#0003,#0003),var(--play-grad);box-shadow:0 6px #4c1d95,0 10px 30px rgb(var(--shadow) / .3);white-space:nowrap}.head-tools{flex:none;max-width:100%;display:flex;flex-wrap:wrap;gap:10px}.help-btn{display:inline-flex;align-items:center;gap:8px;touch-action:manipulation}.help-q{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:15px}.help-new{padding:1px 8px;border-radius:9999px;background:var(--pink-strong);color:#fff;font-size:12px}.help{width:min(92vw,720px);max-height:min(88vh,860px);padding:0}.help[open]{display:flex;flex-direction:column}.help-head{display:flex;align-items:center;gap:12px;padding:22px 24px 0}.help-head-mark{flex:none;display:block;width:auto;height:30px}.help-head h2{flex:1;font-size:30px;line-height:36px;color:var(--primary)}.help-x{--edge: var(--lilac-edge);width:48px;height:48px;border-radius:16px;border:2px solid var(--card-border);background:var(--tint);color:var(--ink-2);font:700 26px/1 var(--font-ui);cursor:pointer;box-shadow:0 4px 0 var(--edge)}.help-x:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}.help-tabs{display:flex;gap:6px;padding:14px 24px 0;border-bottom:4px solid var(--tint)}.help-tabs [role=tab]{min-height:48px;padding:0 20px;border:none;border-radius:16px 16px 0 0;background:transparent;color:var(--muted);font:700 16px var(--font-ui);cursor:pointer}.help-tabs [role=tab][aria-selected=true]{background:var(--tint);color:var(--ink)}.help-panel{padding:18px 24px 24px;overflow:auto;display:flex;flex-direction:column;gap:10px}.help-panel[hidden]{display:none}.help-panel h3{font:700 20px/1.3 var(--font-head);margin:8px 0 0;color:var(--ink)}.help-topic{border-radius:16px;background:var(--tint-2);border:2px solid var(--tint)}.help-topic[open]{background:var(--card);border-color:var(--card-border)}.help-topic summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px;list-style:none;cursor:pointer;font-weight:700;font-size:17px;color:var(--ink)}.help-topic summary::-webkit-details-marker{display:none}.help-topic summary:after{content:"›";margin-left:auto;font-size:24px;color:var(--muted);transition:transform .2s}.help-topic[open] summary:after{transform:rotate(90deg)}.help-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--primary);font:700 21px var(--font-head)}.help-sum{min-width:0}.help-sub{display:block;font-size:14px;font-weight:600;color:var(--muted)}.help-steps{margin:0;padding:0 16px 0 74px;display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}.help-steps li::marker{font-weight:700;color:var(--primary)}.help-tip{margin:12px 16px 16px 70px;padding:10px 14px;border-radius:16px;border:2px solid var(--yellow-border-2);background:var(--yellow-pale);color:var(--yellow-ink);font-weight:600}.help-show{margin:-4px 16px 20px 70px;align-self:flex-start}.help-topic[open]{display:flex;flex-direction:column}.help-keys{width:100%;border-collapse:separate;border-spacing:0 6px;font-weight:600;color:var(--ink-2)}.help-keys td{padding:8px 12px;background:var(--tint-2)}.help-keys td:first-child{border-radius:12px 0 0 12px;white-space:nowrap;width:1%}.help-keys td:last-child{border-radius:0 12px 12px 0}kbd{display:inline-block;min-width:32px;padding:2px 8px;border-radius:8px;background:var(--card);border:2px solid var(--card-border);border-bottom-width:4px;color:var(--ink);font:700 15px var(--font-ui);text-align:center}.help-tour-card{--focus: #fde047;padding:20px;border-radius:24px;border:4px solid var(--primary-pale);background:var(--play-grad);color:#fff;box-shadow:0 6px #4c1d95;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.help-tour-card h3{margin:0;font-size:24px;color:#fff}.help-tour-card p{margin:0 0 6px;font-weight:600;color:var(--tint)}.help-tour-go{--edge: var(--amber);border-color:var(--yellow-border);background:var(--yellow);color:var(--yellow-ink)}.help-tour-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}.help-tour-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--tint-2);border:2px solid var(--tint);font-weight:700;color:var(--ink-2)}.tour-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff}.help-about-hero{padding:18px 20px;border-radius:24px;border:2px solid var(--pink-border);background:var(--pink-tint);text-align:center}.help-about-hero p{margin:0;font-weight:700;color:var(--ink-2)}.help-about-logo{display:block;width:250px;max-width:100%;height:auto;margin:0 auto 10px}.help-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.help-facts div{padding:14px 16px;border-radius:16px;background:var(--tint-2);border:2px solid var(--tint);color:var(--ink-2)}.help-facts h3{margin:0 0 4px;font-size:18px;color:var(--primary)}.help-facts p{margin:0}.help-contact{padding:16px 18px;border-radius:16px;background:var(--yellow-pale);border:2px solid var(--yellow-border-2);display:flex;flex-direction:column;gap:6px;align-items:flex-start;color:var(--yellow-ink)}.help-contact h3{margin:0;font-size:18px;color:var(--yellow-ink)}.help-contact p{margin:0}.help-mail{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:16px;border:2px solid var(--yellow-border);background:var(--card);color:var(--primary-deeper);font-weight:700;overflow-wrap:anywhere;box-shadow:0 4px 0 var(--yellow-border)}.help-meta{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--muted)}.welcome{width:min(92vw,460px);padding:28px;text-align:center}.welcome[open]{display:flex;flex-direction:column;align-items:center;gap:12px}.welcome h2{font-size:30px;line-height:36px;color:var(--primary)}.welcome p{margin:0;font-weight:600;color:var(--muted)}.welcome .welcome-mark{display:block;width:160px;height:72px}.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:4px 0}.welcome .welcome-small{font-size:14px}.tour{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:none;background:transparent;overflow:hidden;color:var(--ink)}.tour::backdrop{background:transparent}html:has(.tour[open]){overflow:hidden}.tour[open]{overscroll-behavior:none;touch-action:none}.tour-say{display:flex;flex-direction:column;gap:8px}.tour.no-spot{background:rgb(var(--shadow) / .6)}.tour-spot{position:fixed;border-radius:24px;pointer-events:none;box-shadow:0 0 0 4px var(--yellow),0 0 0 200vmax rgb(var(--shadow) / .6);transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease}.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));padding:18px 20px;border-radius:24px;border:4px solid var(--card-border);background:var(--card);box-shadow:0 8px 0 var(--lilac-edge),0 14px 30px rgb(var(--shadow) / .35);display:flex;flex-direction:column;gap:8px}.tour-card h2{font-size:24px;line-height:1.2;color:var(--primary-deeper)}.tour-card p{margin:0;font-weight:600;color:var(--ink-2)}.tour-count{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pink-strong)}.tour-pips{display:flex;gap:6px}.tour-pips i{width:10px;height:10px;border-radius:50%;background:var(--tint)}.tour-pips i.on{width:26px;border-radius:9999px;background:var(--brand-grad)}.tour-nav{display:flex;align-items:center;gap:8px;margin-top:4px}.tour-skip{margin-right:auto;min-height:48px;padding:0 4px;border:none;background:none;color:var(--muted);font:700 15px var(--font-ui);text-decoration:underline;cursor:pointer}.tour-nav [hidden]{display:none}@media(prefers-reduced-motion:reduce){.tour-spot,.help-topic summary:after{transition:none}.btn,.pill-toggle,.chip,.seg button,.start-btn{transition:none}.beat.now .pad{animation:none}.start-btn:hover:not(:disabled){transform:none}}@media(max-width:700px){.help{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:none;box-shadow:0 -8px 32px rgb(var(--shadow) / .2)}.help-head{padding:18px 16px 0}.help-tabs{padding:12px 16px 0}.help-tabs [role=tab]{padding:0 14px}.help-panel{padding:16px}.help-steps{padding-left:52px}.help-tip,.help-show{margin-left:16px}}@media(max-width:1400px){body.fullscreen .cards{flex-wrap:wrap}body.fullscreen .beat-card{order:-1;flex:1 1 100%;justify-content:space-between}body.fullscreen .play-card{flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:center;row-gap:8px}body.fullscreen .practice-opts{flex-wrap:wrap;justify-content:center}}@media(max-width:1400px)and (min-height:500px){body.fullscreen .beat-card{flex-wrap:wrap;row-gap:6px}}@media(max-width:900px){body.fullscreen .brand{display:none}body.fullscreen .song-head{grid-column:1 / 3}}@media(max-width:700px){.app-header{padding:12px 16px;gap:10px 12px}.steps-nav{justify-content:flex-start}main{padding:20px 16px 28px;gap:24px}.credits,.song-card{padding:18px 16px}.card{padding:20px 16px}.cards{grid-template-columns:1fr}.song-tile{width:48px;height:48px;font-size:26px}.song-title h1{font-size:26px;line-height:32px;letter-spacing:.4px}.seg button{min-width:44px;padding:0 10px}}body.fullscreen .play-card .hands-hint{left:12px;right:auto;color:var(--muted)}@media(max-width:600px)and (min-height:500px){body.fullscreen{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}body.fullscreen .song-head{display:contents}body.fullscreen .song-title{grid-area:1 / 1;align-self:center;min-width:0}body.fullscreen .song-title h1{min-width:0;font-size:20px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}body.fullscreen .head-tools{grid-area:1 / 2}body.fullscreen .song-tools{grid-area:2 / 1 / 3 / 3;align-items:center;min-width:0}body.fullscreen .bubble{flex:1 1 auto;padding:3px 10px;font-size:14px;line-height:1.2;-webkit-line-clamp:2}body.fullscreen .staff-wrap{grid-area:3 / 1 / 4 / 3}body.fullscreen .cards{grid-area:4 / 1 / 5 / 3;gap:6px}body.fullscreen .song-btn{min-height:44px}body.fullscreen .beat-card{justify-content:center;row-gap:4px}body.fullscreen .play-card{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:center;row-gap:6px}body.fullscreen .practice-opts{min-width:0}body.fullscreen .seg button{min-width:44px;padding:0 8px}body.fullscreen .cards:has(.setup-card.open,.loop-panel.open) .beat-card{display:none}body.fullscreen .setup-card,body.fullscreen .loop-panel{max-height:calc(100dvh - 340px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}body.fullscreen .setup-card{width:auto;right:0}body.fullscreen .loop-panel{left:0;right:0;flex-wrap:wrap;justify-content:center;white-space:normal}body.fullscreen .loop-range{order:1;flex:1 1 100%;justify-content:center}}@media(max-height:499px){body.fullscreen .cards:has(.setup-card.open,.loop-panel.open) .beat-card{display:none}body.fullscreen .setup-card,body.fullscreen .loop-panel{max-height:calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}}@media(max-width:660px)and (max-height:499px){body.fullscreen .cards{gap:6px}body.fullscreen .song-btn{order:-2;min-height:48px}body.fullscreen .beat-card{flex:1 1 0;justify-content:space-between}body.fullscreen .beat-card .bar{display:none}body.fullscreen .speed-row{min-width:60px}body.fullscreen .play-side .btn,body.fullscreen .loop-btn{padding:0 10px}body.fullscreen .play-card{flex:1 1 100%;justify-content:center;gap:8px;padding:6px 8px}body.fullscreen .start-btn{width:60px;height:60px}body.fullscreen .seg button{min-width:44px;padding:0 8px}body.fullscreen .setup-card,body.fullscreen .loop-panel{max-height:calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}@font-face{font-family:Noto Music;font-style:normal;font-display:swap;font-weight:400;src:url(./noto-music-music-400-normal-CksxHXl6.woff2) format("woff2"),url(./noto-music-music-400-normal-BOLtuVsm.woff) format("woff")}