@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-dc28106c],[data-v-dc28106c]::backdrop,[data-v-dc28106c]:after,[data-v-dc28106c]:before{--tw-font-weight:initial;--tw-duration:initial;--tw-ease:initial;--tw-border-style:solid}}}.game-container[data-v-dc28106c]{background:var(--piano-bg-primary);border:1px solid var(--piano-border);border-radius:calc(var(--ui-radius)*3);gap:calc(var(--spacing,.25rem)*3);padding:calc(var(--spacing,.25rem)*3)}.game-container[data-v-dc28106c],.game-header[data-v-dc28106c]{display:flex;flex-direction:column}.game-header[data-v-dc28106c]{gap:calc(var(--spacing,.25rem)*2)}.score-row[data-v-dc28106c]{gap:calc(var(--spacing,.25rem)*3)}.score-badge[data-v-dc28106c],.score-row[data-v-dc28106c]{align-items:center;display:flex}.score-badge[data-v-dc28106c]{font-size:var(--text-sm,.875rem);gap:calc(var(--spacing,.25rem)*1.5);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));padding-block:calc(var(--spacing,.25rem)*1);padding-inline:calc(var(--spacing,.25rem)*3);--tw-font-weight:var(--font-weight-bold,700);background:#1abc9c26;border-radius:3.40282e+38px;color:#1abc9c;flex-shrink:0;font-weight:var(--font-weight-bold,700)}.score-icon[data-v-dc28106c]{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}.progress-bar-wrapper[data-v-dc28106c]{background:var(--piano-bg-secondary);border-radius:3.40282e+38px;flex:1;height:calc(var(--spacing,.25rem)*2);overflow:hidden}.progress-bar[data-v-dc28106c]{height:100%;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));--tw-duration:.5s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background:#1abc9c;border-radius:3.40282e+38px;transition-duration:.5s;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.feature-source[data-v-dc28106c]{display:flex;justify-content:center;padding-block:calc(var(--spacing,.25rem)*2)}.feature-chip[data-v-dc28106c]{align-items:center;border-radius:calc(var(--ui-radius)*3);cursor:grab;gap:calc(var(--spacing,.25rem)*1);padding-block:calc(var(--spacing,.25rem)*3);padding-inline:calc(var(--spacing,.25rem)*5);text-align:center;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));--tw-duration:.2s;background:var(--piano-bg-elevated);border:2px solid #1abc9c;box-shadow:0 4px 12px #00000026;color:var(--piano-text-primary);display:flex;flex-direction:column;max-width:360px;touch-action:none;transition-duration:.2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.feature-chip[data-v-dc28106c]:hover{box-shadow:0 6px 20px #0003;transform:scale(1.03)}.chip-selected[data-v-dc28106c]{animation:pulse-glow-dc28106c 1.2s ease-in-out infinite;box-shadow:0 0 16px #1abc9c66}.chip-dragging[data-v-dc28106c]{cursor:grabbing;opacity:.4}.chip-icon[data-v-dc28106c]{color:#1abc9c;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,1.4))}.chip-name[data-v-dc28106c]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.chip-hint[data-v-dc28106c]{color:var(--piano-text-secondary);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333))}.zones-grid[data-v-dc28106c]{display:grid;gap:calc(var(--spacing,.25rem)*3);grid-template-columns:repeat(1,minmax(0,1fr))}@media(min-width:40rem){.zones-grid[data-v-dc28106c]{grid-template-columns:repeat(3,minmax(0,1fr))}}.zone-card[data-v-dc28106c]{align-items:center;border-radius:calc(var(--ui-radius)*3);border-style:var(--tw-border-style);cursor:pointer;gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*4);text-align:center;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));--tw-duration:.2s;background:var(--piano-bg-secondary);border-color:var(--zone-color);border-width:2px;color:var(--piano-text-primary);display:flex;flex-direction:column;transition-duration:.2s}.zone-card[data-v-dc28106c]:hover{background:var(--piano-bg-elevated);transform:translateY(-2px)}.zone-highlight[data-v-dc28106c]{box-shadow:inset 0 0 0 1px var(--zone-color)}.zone-highlight[data-v-dc28106c]:hover{box-shadow:0 0 16px var(--zone-color)}@supports (color:color-mix(in lab,red,red)){.zone-highlight[data-v-dc28106c]:hover{box-shadow:0 0 16px color-mix(in srgb,var(--zone-color)40%,transparent)}}.zone-correct[data-v-dc28106c]{animation:flash-green-dc28106c .5s;background:#22c55e2e!important;border-color:var(--feedback-success)!important}.zone-wrong[data-v-dc28106c]{animation:shake-dc28106c .5s;background:#ef44442e!important;border-color:var(--feedback-error)!important}.zone-icon[data-v-dc28106c]{color:var(--zone-color);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333))}.zone-name[data-v-dc28106c]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.placed-features[data-v-dc28106c]{display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.25rem)*1);justify-content:center;margin-top:calc(var(--spacing,.25rem)*1)}.placed-tag[data-v-dc28106c]{padding-block:calc(var(--spacing,.25rem)*.5);padding-inline:calc(var(--spacing,.25rem)*2);--tw-font-weight:var(--font-weight-medium,500);border-radius:3.40282e+38px;font-size:10px;font-weight:var(--font-weight-medium,500)}.end-screen[data-v-dc28106c]{flex-direction:column;gap:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*8)}.end-icon-wrapper[data-v-dc28106c],.end-screen[data-v-dc28106c]{align-items:center;display:flex}.end-icon-wrapper[data-v-dc28106c]{background:#1abc9c26;border-radius:3.40282e+38px;height:calc(var(--spacing,.25rem)*20);justify-content:center;width:calc(var(--spacing,.25rem)*20)}.end-icon[data-v-dc28106c],.end-score[data-v-dc28106c]{color:#1abc9c;font-size:var(--text-4xl,2.25rem);line-height:var(--tw-leading,var(--text-4xl--line-height,1.11111))}.end-score[data-v-dc28106c]{--tw-font-weight:var(--font-weight-black,900);font-weight:var(--font-weight-black,900)}.end-message[data-v-dc28106c]{color:var(--piano-text-secondary);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5));max-width:var(--container-xs,20rem);text-align:center}.replay-btn[data-v-dc28106c]{align-items:center;border-radius:calc(var(--ui-radius)*2);cursor:pointer;font-size:var(--text-sm,.875rem);gap:calc(var(--spacing,.25rem)*2);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));margin-top:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*3);padding-inline:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));--tw-duration:.2s;background:#1abc9c;color:#1a1a2e;display:flex;transition-duration:.2s}.replay-btn[data-v-dc28106c]:hover{box-shadow:0 4px 16px #1abc9c66;transform:scale(1.05)}.replay-icon[data-v-dc28106c]{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}@keyframes flash-green-dc28106c{0%{box-shadow:0 0 #22c55e80}50%{box-shadow:0 0 20px 4px #22c55e4d}to{box-shadow:none}}@keyframes shake-dc28106c{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes pulse-glow-dc28106c{0%,to{box-shadow:0 0 8px #1abc9c4d}50%{box-shadow:0 0 20px #1abc9c80}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}.drag-ghost{align-items:center;background:#1abc9c;border-radius:.5rem;box-shadow:0 8px 24px #0000004d;color:#1a1a2e;display:flex;font-size:.75rem;font-weight:700;gap:.5rem;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:fixed;transform:translate(-50%,-50%);z-index:9999}.drag-ghost .ghost-icon{flex-shrink:0;font-size:1rem}