.first-song{background:radial-gradient(ellipse at 85% 12%,var(--chip-bg),transparent 55%),radial-gradient(ellipse at 10% 70%,var(--glass-soft),transparent 50%),var(--bg);min-height:100dvh;color:var(--text-primary);flex-direction:column;display:flex}.first-header{justify-content:space-between;align-items:center;gap:16px;width:min(100%,960px);margin:auto;padding:16px 20px;display:flex}.first-brand{min-height:44px;color:var(--text-primary);font-family:var(--font-display);align-items:center;gap:8px;font-size:22px;text-decoration:none;display:flex}.first-step{color:var(--text-secondary);font-size:13px}.first-progress{background:var(--glass);height:2px}.first-progress>span{background:linear-gradient(90deg,var(--cta-start),var(--cta-end));transform-origin:0;height:100%;transition:transform .3s cubic-bezier(.16,1,.3,1);display:block}.first-main{flex:1;width:min(100%,520px);min-width:0;min-height:0;margin:0 auto;padding:16px 20px}.first-screen{flex-direction:column;gap:16px;display:flex}.first-screen>*{animation:.28s cubic-bezier(.16,1,.3,1) both first-appear}.first-screen>:nth-child(2){animation-delay:60ms}.first-screen>:nth-child(3){animation-delay:.12s}.first-intro{text-align:center}.first-intro h1{font:500 32px/1.1 var(--font-display);letter-spacing:-.02em;text-wrap:balance;outline:none;margin:0}.first-intro h1 em{color:var(--accent);font-style:normal}.first-intro p{color:var(--text-secondary);text-wrap:pretty;margin:12px 0 0;font-size:16px;line-height:24px}.first-intro p strong{color:var(--text-primary);font-weight:700}.first-music-box{border:1px solid var(--border);border-radius:var(--radius-card);background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-2);flex-direction:column;align-items:center;padding:16px 24px;display:flex;position:relative}.first-mini-keys{gap:8px;width:100%;margin-top:4px;display:flex}.first-mini-keys span{height:24px;box-shadow:inset 0 -4px var(--glass);border-radius:50%;flex:1}.first-music-box p{color:var(--text-secondary);margin:12px 0 0;font-size:13px}.first-star{color:var(--moon-light);opacity:.65;font-size:16px;position:absolute}.star-one{top:32px;left:24%}.star-two{top:72px;right:20%}.first-sounds{border:0;flex-direction:column;gap:12px;min-width:0;margin:0;padding:0;display:flex}.first-sounds legend{margin-bottom:12px;font-size:16px;font-weight:800}.first-sounds label{border:1px solid var(--border);background:var(--glass-soft);cursor:pointer;border-radius:24px;align-items:center;gap:12px;min-height:80px;padding:16px;display:flex;position:relative}.first-sounds label.chosen{border-color:var(--accent);background:var(--chip-bg)}.first-sounds input{opacity:0;width:1px;height:1px;position:absolute}.first-sounds label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}.first-sounds label>span{flex:1;min-width:0}.first-sounds strong{font-size:16px;display:block}.first-sounds small{color:var(--text-secondary);margin-top:4px;font-size:13px;line-height:20px;display:block}.sound-check{opacity:0}.chosen .sound-check{opacity:1;color:var(--accent)}.first-sample,.first-back,.first-retry{min-height:44px;color:var(--text-primary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;font-size:16px;display:flex}.first-sample{margin-top:-12px}.first-back{justify-content:flex-start;margin:-12px 0 12px;font-size:13px}.first-retry{font-size:13px}.first-actions{padding-bottom:env(safe-area-inset-bottom);flex-direction:column;gap:8px;display:flex}.first-actions .primary-button{justify-content:center;align-items:center;gap:8px;width:100%;min-height:56px;font-size:16px;font-weight:800;display:flex}.first-actions p{text-align:center;color:var(--text-secondary);margin:0;font-size:13px;line-height:20px}.first-footer{color:var(--text-secondary);flex-direction:column;align-items:center;gap:4px;padding:8px 20px 24px;font-size:13px;display:flex}.first-footer a{min-height:44px;color:var(--text-primary);text-underline-offset:4px;align-items:center;text-decoration:underline;display:flex}.first-studio{border:1px solid var(--border);border-radius:var(--radius-card);background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-2);padding:16px}.first-studio-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.first-timbre{color:var(--text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.first-record-state{align-items:center;gap:8px;margin-top:8px;font-size:13px;display:flex}.first-record-state>span:nth-child(2){flex:1}.first-record-state time{font-variant-numeric:tabular-nums;font-weight:800}.record-dot{background:var(--text-secondary);border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.record-dot.active{background:var(--record);box-shadow:0 0 0 4px color-mix(in oklab,var(--record) 15%,transparent)}.note-ribbon{background:var(--glass-soft);border-radius:12px;width:100%;height:72px;margin:12px 0;display:block}.note-line{stroke:var(--border);stroke-width:1px}.note-ribbon text{fill:var(--text-secondary);font:13px var(--font-body)}.first-keyboard{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.first-keyboard button{border-radius:var(--radius-button);height:64px;color:var(--key-ink);box-shadow:inset 0 -4px color-mix(in oklab,var(--key-ink) 14%,transparent);cursor:pointer;border:0;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.first-keyboard strong{font:500 16px var(--font-display)}.first-keyboard small{font-size:13px}.first-studio .note-ribbon{height:64px}.first-name summary span{align-items:center;gap:8px;display:flex}.first-name summary svg{transition:transform .2s cubic-bezier(.16,1,.3,1)}.first-name[open] summary svg{transform:rotate(180deg)}.first-name summary{cursor:pointer;text-underline-offset:4px;justify-content:space-between;align-items:center;gap:8px;min-height:44px;font-size:16px;text-decoration:underline;display:flex}.first-name summary span{color:var(--text-secondary);font-size:13px;text-decoration:none}.first-name[open] summary{margin-bottom:12px}.first-name summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.first-guidance{text-align:center;color:var(--text-secondary);margin:12px 0 8px;font-size:13px;line-height:20px}.first-tools{justify-content:center;gap:8px;display:flex}.first-tools button{background:var(--glass-soft);border:1px solid var(--border);border-radius:var(--radius-button);min-height:44px;color:var(--text-primary);cursor:pointer;flex:1;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:flex}.first-name label{justify-content:space-between;gap:8px;margin-bottom:8px;font-size:16px;font-weight:800;display:flex}.first-name label span{color:var(--text-secondary);font-size:13px;font-weight:500}.first-name input{border:1px solid var(--border);background:var(--surface-2);width:100%;min-width:0;height:52px;color:var(--text-primary);font:500 16px var(--font-body);border-radius:16px;padding:12px 16px}.first-name p{color:var(--text-secondary);margin:8px 0 0;font-size:13px;line-height:20px}.first-recovered,.first-saved,.first-offline{background:var(--glass-soft);border:1px solid var(--border);border-radius:16px;align-items:flex-start;gap:12px;margin:0;padding:12px 16px;font-size:13px;line-height:20px;display:flex}.first-recovered svg,.first-saved svg,.first-offline svg{flex-shrink:0}.first-recovered span{overflow-wrap:anywhere;min-width:0}.first-saved{font-size:16px;line-height:24px}.first-saved small{color:var(--text-secondary);font-size:13px;line-height:20px;display:block}.first-offline{margin-bottom:16px}.first-keepsake{border-radius:var(--radius-card);border:1px solid var(--border);text-align:center;background:linear-gradient(150deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-2);padding:24px 16px 16px}.first-disc{border:1px solid var(--border);background:radial-gradient(circle,var(--surface) 42%,var(--surface-2) 43%);border-radius:50%;place-content:center;width:160px;height:160px;margin:auto;display:grid;position:relative}.disc-ring{border:1px solid var(--border);border-radius:50%;position:absolute}.ring-one{inset:12px}.ring-two{inset:24px}.disc-heart{background:var(--accent);width:32px;height:32px;color:var(--on-cta);border-radius:50%;place-content:center;display:grid;position:absolute;bottom:4px;right:12px}.first-keepsake h2{font:500 32px/1.1 var(--font-display);text-wrap:balance;overflow-wrap:anywhere;margin:24px 0 8px}.first-keepsake p{color:var(--text-secondary);margin:0;font-size:13px}.first-keepsake .note-ribbon{margin:16px 0 0}.first-notice{color:var(--text-secondary);margin:0;font-size:13px;line-height:20px}.first-error{color:var(--text-primary);border:1px solid var(--record);background:var(--glass-soft);border-radius:16px;margin:0;padding:16px;font-size:16px;line-height:24px}.first-confirm{flex-direction:column;gap:16px;display:flex}.first-confirm h2{font:500 32px/1.1 var(--font-display);margin:0}.first-confirm p{color:var(--text-secondary);margin:0;font-size:16px;line-height:24px}.first-song button{transition:transform .12s cubic-bezier(.16,1,.3,1),opacity .15s}.first-song button:active:not(:disabled){transform:scale(.97)}.first-song button:disabled{opacity:.65;cursor:default}.first-song button:focus-visible,.first-song input:focus-visible,.first-song a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.disc-heart{animation:.45s cubic-bezier(.16,1,.3,1) both first-mark}.disc-ring{animation:.4s cubic-bezier(.16,1,.3,1) both first-mark}.ring-two{animation-delay:80ms}@keyframes first-mark{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes first-appear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (min-width:900px){.first-main{padding-top:32px}.first-header{padding-top:24px}.first-music-box{padding:24px 32px}.first-intro p{max-width:400px;margin-inline:auto}}@media (prefers-reduced-motion:reduce){.first-screen>*,.disc-heart,.disc-ring{animation-name:first-fade}.first-progress>span{transition:none}.first-song button:active:not(:disabled){transform:none}}@keyframes first-fade{0%{opacity:0}to{opacity:1}}