home-screen{display:flex;flex-direction:column;gap:.9rem;overflow-y:auto;padding:clamp(1.5rem,5vh,3.5rem) clamp(1.25rem,6vw,2rem) max(env(safe-area-inset-bottom),1.5rem);width:min(100%,640px);margin-inline:auto}@keyframes home-rise{0%{opacity:0;transform:translateY(18px)}}home-screen[active=true]>*{animation:home-rise .55s var(--ease-emphasized) backwards}home-screen[active=true]>:nth-child(2){animation-delay:.05s}home-screen[active=true]>:nth-child(3){animation-delay:.1s}home-screen[active=true]>:nth-child(4){animation-delay:.15s}home-screen[active=true]>:nth-child(5){animation-delay:.2s}home-screen[active=true]>:nth-child(6){animation-delay:.25s}home-hero{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.6rem}home-title{font-size:clamp(3rem,11vw,4.5rem);font-weight:800;letter-spacing:-.035em;line-height:1;background:linear-gradient(100deg,var(--color-primary),var(--color-tertiary));-webkit-background-clip:text;background-clip:text;color:transparent}home-tagline{font-size:1.05rem;color:var(--color-on-surface-variant)}section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-surface-variant);margin-top:.5rem}mode-list{display:flex;flex-direction:column;gap:.6rem}mode-card button{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.15rem;text-align:left;background:var(--color-surface-container-low);border:1.5px solid var(--color-outline-variant);border-radius:20px;transition:background-color .25s var(--ease-standard),border-color .25s var(--ease-standard),transform .35s var(--ease-spring),box-shadow .25s var(--ease-standard)}mode-card button:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}mode-card button:active{transform:scale(.98)}mode-card[selected=true] button{background:var(--color-primary-container);border-color:var(--color-primary);box-shadow:var(--shadow-1)}mode-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:var(--radius-full);background:var(--color-secondary-container);color:var(--color-on-secondary-container);transition:background-color .25s var(--ease-standard),color .25s var(--ease-standard)}mode-card[selected=true] mode-icon{background:var(--color-primary);color:var(--color-on-primary)}mode-card[selected=true] mode-icon m-symbol{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}mode-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}mode-name{font-size:1.05rem;font-weight:700}mode-card[selected=true] mode-name{color:var(--color-on-primary-container)}mode-desc{font-size:.85rem;color:var(--color-on-surface-variant)}difficulty-list{display:flex;flex-wrap:wrap;gap:.5rem}difficulty-chip button{padding:.55rem 1.15rem;border-radius:var(--radius-full);border:1.5px solid var(--color-outline-variant);background:transparent;font-weight:600;font-size:.9rem;color:var(--color-on-surface-variant);transition:background-color .2s var(--ease-standard),border-color .2s var(--ease-standard),color .2s var(--ease-standard),transform .3s var(--ease-spring)}difficulty-chip button:active{transform:scale(.94)}difficulty-chip[selected=true] button{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--shadow-1)}play-button{position:sticky;bottom:0;margin-top:1rem;padding-bottom:.25rem}play-button button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:60px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary);font-size:1.1rem;font-weight:700;letter-spacing:.01em;box-shadow:var(--shadow-2);transition:box-shadow .25s var(--ease-standard),transform .35s var(--ease-spring),filter .2s var(--ease-standard)}play-button button:hover{box-shadow:var(--shadow-3);filter:brightness(1.06)}play-button button:active{transform:scale(.97)}play-button m-symbol{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}@media(min-width:720px){home-screen{width:min(100%,760px);justify-content:center}mode-list{display:grid;grid-template-columns:repeat(3,1fr)}mode-card button{flex-direction:column;align-items:flex-start;gap:.8rem;height:100%;padding:1.15rem}}