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}home-screen>*{flex-shrink:0}@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}account-bar{display:flex;align-items:center;justify-content:flex-start;border-block:var(--line-thin) solid var(--color-outline-variant);cursor:pointer}account-bar button{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .75rem;background:transparent;border:none;box-shadow:none;font-weight:700;font-size:.82rem;transition:background-color .2s var(--ease-emphasized),color .2s var(--ease-emphasized)}account-bar button:hover{background:var(--color-surface-container)}account-bar button:active{background:var(--color-surface-container-high)}account-bar m-symbol{font-size:20px}account-bar>*+*{border-left:var(--line-thin) solid var(--color-outline-variant)}account-bar[state=signed-in] button[slot-name=account]{color:var(--color-primary)}account-bar[state=signed-in] button[slot-name=account] m-symbol{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}account-bar[state=signed-out] bar-stat,account-bar[state=signed-out] bar-rank{display:none}account-bar user-avatar{width:22px;height:22px;flex-shrink:0;border:var(--line-thin) solid var(--color-outline-variant)}account-bar user-avatar[shown=false],account-bar m-symbol[shown=false]{display:none}crown-badge{display:inline-grid;place-items:center;margin-left:.2rem;line-height:0}crown-badge[shown=false]{display:none}@keyframes reigning-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@media(prefers-reduced-motion:no-preference){crown-badge[reigning=true]{animation:reigning-pulse 2s var(--ease-emphasized) infinite}}bar-stat{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .75rem}bar-stat m-symbol{font-size:18px;color:var(--color-on-surface-variant)}bar-stat[scope=week] m-symbol{color:var(--color-violet)}bar-pos{font-family:var(--font-serif);font-weight:640;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--color-primary)}bar-points{font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums;color:var(--color-on-surface-variant)}bar-rank button{display:grid;place-items:center;padding:.55rem .75rem;color:var(--color-violet)}bar-rank m-symbol{transform:translateY(.05em)}account-bar:hover bar-rank button,bar-rank button:hover{background:var(--color-violet-container);color:var(--color-on-violet-container)}@media(max-width:719px){account-bar{--home-padding: clamp(1.25rem, 6vw, 2rem);--item-padding: .4rem;margin-inline:calc(-1 * var(--home-padding));padding-inline:calc(var(--home-padding) - var(--item-padding));justify-content:space-between}account-bar button,bar-stat{padding:.6rem var(--item-padding);font-size:.76rem;gap:.28rem}account-bar button[slot-name=account]{min-width:0;flex-shrink:1}account-bar account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}bar-rank,bar-help{flex-shrink:0}bar-points{font-size:.78rem}bar-stat m-symbol{font-size:17px}}attempts-badge{position:absolute;top:-10px;right:-8px;padding:.2rem .5rem;background:var(--color-primary);color:var(--color-on-primary);font-size:.68rem;font-weight:700;transform:rotate(3deg)}attempts-badge[shown=false]{display:none}attempts-badge[empty=true]{background:var(--color-error);color:var(--color-on-error)}mode-card{position:relative;display:flex;flex-direction:column}home-hero{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.6rem}home-title{font-family:var(--font-serif);font-weight:640;font-variation-settings:"WONK" 1,"SOFT" 0;font-size:clamp(3rem,11vw,4.5rem);letter-spacing:-.02em;line-height:1;color:var(--color-on-surface)}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-resume{display:block;border:var(--frame-width) solid var(--color-primary);border-top:none;background:var(--color-primary-container)}mode-resume[shown=false]{display:none}mode-card:has(mode-resume[shown=true])>button{border-bottom-color:var(--color-primary)}mode-resume button{display:flex;align-items:center;gap:.45rem;width:100%;padding:.6rem 1.1rem;color:var(--color-on-primary-container);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;transition:background-color .2s var(--ease-emphasized)}mode-resume button:hover{background:var(--color-primary);color:var(--color-on-primary)}mode-resume m-symbol{font-size:19px;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}resume-detail{margin-left:auto;font-size:.74rem;font-weight:600;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;opacity:.85}mode-list{display:flex;flex-direction:column;gap:.7rem}mode-card>button{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.15rem;text-align:left;background:var(--color-surface-container-lowest);border:var(--line-thin) solid var(--color-outline-variant);transition:border-color .2s var(--ease-emphasized),transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring)}mode-card>button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-ink)}mode-card>button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow-ink)}mode-card[selected=true]>button{border:var(--frame-width) solid var(--frame-color);box-shadow:5px 5px 0 var(--shadow-ink)}mode-card[mode=classic][selected=true]>button{box-shadow:5px 5px 0 var(--color-primary)}mode-card[mode=timetrial][selected=true]>button{box-shadow:5px 5px 0 var(--color-coral)}mode-card[mode=zen][selected=true]>button{box-shadow:5px 5px 0 var(--color-jade)}mode-icon{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px}mode-icon svg{display:block;width:100%;height:100%;transition:transform .3s var(--ease-spring)}mode-card[selected=true] mode-icon svg{transform:scale(1.08) rotate(-2deg)}mode-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}mode-name{align-self:flex-start;font-family:var(--font-serif);font-weight:600;font-variation-settings:"WONK" 1,"SOFT" 0;font-size:1.15rem;color:var(--color-on-surface)}mode-card[selected=true] mode-name{background-image:linear-gradient(var(--color-tertiary-container),var(--color-tertiary-container));background-size:100% .5em;background-position:0 80%;background-repeat:no-repeat}mode-desc{font-size:.85rem;line-height:1.45;color:var(--color-on-surface-variant)}difficulty-list{display:inline-flex;align-self:flex-start;background:var(--color-surface-container-lowest);border:var(--frame-width) solid var(--frame-color);box-shadow:4px 4px 0 var(--shadow-ink)}difficulty-chip+difficulty-chip{border-left:var(--line-thin) solid var(--color-outline-variant)}difficulty-chip button{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:.6rem 1.05rem;font-weight:600;font-size:.9rem;color:var(--color-on-surface-variant);transition:background-color .2s var(--ease-emphasized),color .2s var(--ease-emphasized)}chip-factor{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;font-family:var(--font-serif);font-weight:640;font-size:.82rem;line-height:1.25;color:var(--color-violet);transition:grid-template-rows .4s var(--ease-emphasized),opacity .3s var(--ease-emphasized),margin-top .4s var(--ease-emphasized)}chip-factor>span{min-height:0;white-space:nowrap}home-screen[mode=compete] chip-factor{grid-template-rows:1fr;opacity:1;margin-top:.15rem;transition-delay:calc(var(--i) * 70ms)}home-screen[mode=compete] difficulty-chip[selected=true] chip-factor{color:var(--color-on-tertiary-container)}home-screen[mode=compete] difficulty-chip[difficulty=easy][selected=true] chip-factor{color:var(--color-on-jade-container)}home-screen[mode=compete] difficulty-chip[difficulty=hard][selected=true] chip-factor{color:var(--color-on-coral-container)}home-screen[mode=compete] difficulty-chip[difficulty=expert][selected=true] chip-factor{color:var(--color-on-violet-container)}difficulty-chip[selected=true] button{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);font-family:var(--font-serif);font-style:italic;font-weight:700;font-size:.98rem}difficulty-chip[difficulty=easy][selected=true] button{background:var(--color-jade-container);color:var(--color-on-jade-container)}difficulty-chip[difficulty=hard][selected=true] button{background:var(--color-coral-container);color:var(--color-on-coral-container)}difficulty-chip[difficulty=expert][selected=true] button{background:var(--color-violet-container);color:var(--color-on-violet-container)}play-error{font-size:.85rem;font-weight:600;color:var(--color-error)}play-error:empty{display:none}play-button{position:sticky;bottom:0;margin-top:1rem;padding-bottom:.35rem}play-button button{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;height:58px;background:var(--color-primary);color:var(--color-on-primary);border:var(--frame-width) solid var(--color-primary);box-shadow:5px 5px 0 var(--color-tertiary-container);font-weight:700;font-size:.98rem;letter-spacing:.09em;text-transform:uppercase;transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring),filter .2s var(--ease-emphasized)}play-button button:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--color-tertiary-container);filter:brightness(1.05)}play-button button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--color-tertiary-container)}play-button m-symbol{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}@media(min-width:720px){home-screen{width:min(100%,760px);justify-content:center}mode-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}mode-card>button{flex-direction:column;align-items:flex-start;gap:.7rem;flex:1;padding:1.15rem}mode-resume button{flex-wrap:wrap;padding:.55rem .9rem}mode-resume resume-detail{width:100%;margin-left:0}}