tutorial-dialog{position:fixed;inset:0;z-index:14;display:grid;place-items:center;padding:1.25rem;background:color-mix(in srgb,var(--color-scrim) 45%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:1;transition:opacity .25s var(--ease-emphasized)}tutorial-dialog[open=false]{opacity:0;pointer-events:none}tutorial-card{display:flex;flex-direction:column;gap:1rem;width:min(100%,420px);padding:1.4rem;background:var(--color-surface-container-lowest);border:var(--frame-width) solid var(--frame-color);box-shadow:8px 8px 0 var(--shadow-ink);transition:transform .45s var(--ease-spring)}tutorial-dialog[open=false] tutorial-card{transform:translateY(30px) scale(.9)}tutorial-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}tutorial-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-surface-variant)}tutorial-close button{display:grid;place-items:center;width:36px;height:36px;color:var(--color-on-surface-variant);transition:background-color .2s var(--ease-emphasized)}tutorial-close button:hover{background:var(--color-surface-container-high)}tutorial-stage{display:grid}tutorial-step{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}tutorial-step[active=false]{visibility:hidden;pointer-events:none}step-title{font-family:var(--font-serif);font-weight:640;font-variation-settings:"WONK" 1,"SOFT" 0;font-size:1.45rem;line-height:1.15;margin-top:.7rem}step-text{font-size:.92rem;line-height:1.5;color:var(--color-on-surface-variant);max-width:32ch}@keyframes step-in{0%{opacity:0;transform:translateY(10px)}}tutorial-step[active=true] step-title,tutorial-step[active=true] step-text{animation:step-in .45s var(--ease-emphasized) backwards}tutorial-step[active=true] step-title{animation-delay:.15s}tutorial-step[active=true] step-text{animation-delay:.25s}tutorial-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;width:100%;height:190px;padding:.8rem;background:var(--color-surface-container-low);border:var(--line-thin) solid var(--color-outline-variant);overflow:hidden}scene-grid{display:grid;grid-template-columns:repeat(4,30px);background:var(--color-surface-container-lowest);border:var(--frame-width) solid var(--frame-color)}scene-cell{display:grid;place-items:center;width:30px;height:30px;border-right:var(--line-thin) solid var(--color-outline-variant);border-bottom:var(--line-thin) solid var(--color-outline-variant);font-family:var(--font-serif);font-weight:600;font-size:.95rem}scene-grid scene-cell:nth-child(4n){border-right:none}scene-grid scene-cell:nth-child(n+13){border-bottom:none}@keyframes cell-drop{0%{opacity:0;transform:scale(.4)}}tutorial-step[active=true] scene-cell{animation:cell-drop .35s var(--ease-spring) backwards;animation-delay:calc((var(--r) + var(--c)) * 60ms)}scene-players{display:flex;gap:.8rem}scene-player{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:var(--line-thin) solid var(--color-outline-variant);background:var(--color-surface-container-lowest);font-size:.78rem;font-weight:700}scene-player m-symbol{font-size:18px;color:var(--color-primary)}@keyframes player-in{0%{opacity:0;transform:translateY(8px)}}tutorial-step[active=true] scene-player{animation:player-in .4s var(--ease-spring) backwards;animation-delay:.6s}scene-clock{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border:var(--frame-width) solid var(--frame-color);background:var(--color-surface-container-lowest);box-shadow:3px 3px 0 var(--shadow-ink);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums}scene-clock m-symbol{font-size:26px}@keyframes clock-tick{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}tutorial-step[active=true][step=clock] scene-clock{animation:clock-tick 1.2s var(--ease-emphasized) infinite}scene-hearts{display:flex;gap:5px}scene-hearts m-symbol{font-size:26px;color:var(--color-error);font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}scene-hearts m-symbol[state=lost]{color:var(--color-outline-variant);font-variation-settings:"FILL" 0,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}@keyframes heart-pop{0%{opacity:0;transform:scale(.3)}}tutorial-step[active=true] scene-hearts m-symbol{animation:heart-pop .4s var(--ease-spring) backwards;animation-delay:calc(.3s + var(--i) * 80ms)}tutorial-scene[scene=mistake] scene-cell{width:54px;height:54px;font-size:1.8rem;font-style:italic;background:var(--color-error-container);color:var(--color-on-error-container);border:var(--frame-width) solid var(--color-error)}@keyframes cell-shake-demo{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}tutorial-step[active=true][step=mistake] scene-cell{animation:cell-shake-demo .5s var(--ease-emphasized) .2s}@keyframes heart-lose{0%{transform:scale(1);color:var(--color-error)}40%{transform:scale(1.3)}to{transform:scale(.85);color:var(--color-outline-variant)}}tutorial-step[active=true][step=mistake] scene-hearts m-symbol[state=lost]{animation:heart-pop .4s var(--ease-spring) backwards,heart-lose .6s var(--ease-emphasized) .9s both}scene-score{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border:var(--frame-width) solid var(--frame-color);background:var(--color-surface-container-lowest);box-shadow:3px 3px 0 var(--shadow-ink);font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums}scene-score m-symbol{font-size:20px;color:var(--color-tertiary);font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}scene-nodrop{font-family:var(--font-serif);font-weight:640;font-size:1rem;color:var(--color-on-surface-variant);opacity:0}@keyframes nodrop-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}tutorial-step[active=true][step=mistake] scene-nodrop{animation:nodrop-in .5s var(--ease-spring) 1.3s forwards}tutorial-scene[scene=bonus]{position:relative}scene-token{position:absolute;top:34%;left:30%;width:14px;height:14px;background:var(--color-tertiary-container);border:1.5px solid var(--color-on-tertiary-container);opacity:0}@keyframes token-fly{0%{opacity:0;transform:translate(0) scale(.4)}15%{opacity:1;transform:translate(4px,-6px) scale(1)}to{opacity:0;transform:translate(60px,62px) scale(.5)}}tutorial-step[active=true][step=bonus] scene-token{animation:token-fly 1.1s var(--ease-emphasized) infinite;animation-delay:calc(var(--i) * .16s)}@keyframes score-grow{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}tutorial-step[active=true][step=bonus] scene-score{animation:score-grow 1.1s var(--ease-spring) infinite}scene-chips{display:flex;flex-direction:column;gap:.4rem;width:100%}scene-chip{display:grid;grid-template-columns:4.5rem 1fr 2.6rem;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700}scene-chip strong{font-family:var(--font-serif);font-weight:640;text-align:right;color:var(--color-primary)}scene-bar{display:block;height:12px;background:var(--color-surface-container-high);border:var(--line-thin) solid var(--color-outline-variant);position:relative;overflow:hidden}scene-bar:after{content:"";position:absolute;inset:0;width:calc(var(--fill) * 1%);background:var(--color-primary);transform-origin:left;transform:scaleX(0)}@keyframes bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}tutorial-step[active=true][step=difficulty] scene-bar:after{animation:bar-fill .6s var(--ease-emphasized) both;animation-delay:calc(.2s + var(--i) * .16s)}scene-chip[rank="3"] scene-bar:after{background:var(--color-violet)}scene-chip[rank="3"] strong{color:var(--color-violet)}@keyframes chip-in{0%{opacity:0;transform:translate(-10px)}}tutorial-step[active=true][step=difficulty] scene-chip{animation:chip-in .4s var(--ease-emphasized) backwards;animation-delay:calc(var(--i) * .12s)}scene-attempts{display:flex;gap:.6rem}scene-attempt{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.45rem .8rem;border:var(--frame-width) solid var(--frame-color);background:var(--color-surface-container-lowest);font-size:.7rem;font-weight:700;color:var(--color-on-surface-variant)}scene-attempt strong{font-family:var(--font-serif);font-weight:640;font-size:1.15rem;color:var(--color-on-surface);font-variant-numeric:tabular-nums}@keyframes attempt-win{0%{transform:scale(1)}to{transform:scale(1.08);background:var(--color-tertiary-container);box-shadow:3px 3px 0 var(--shadow-ink)}}@keyframes attempt-fade{to{opacity:.35;transform:scale(.94)}}tutorial-step[active=true][step=reward] scene-attempt[best=true]{animation:attempt-win .5s var(--ease-spring) .7s forwards}tutorial-step[active=true][step=reward] scene-attempt[best=false]{animation:attempt-fade .5s var(--ease-emphasized) .7s forwards}scene-badges{display:flex;align-items:center;gap:1rem}scene-badges m-symbol[kind=day]{font-size:30px;color:var(--color-tertiary);font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}scene-badges badge-emblem{width:56px;height:56px}@keyframes badge-rise{0%{opacity:0;transform:translateY(14px) scale(.6)}70%{transform:translateY(0) scale(1.12)}to{opacity:1;transform:translateY(0) scale(1)}}tutorial-step[active=true][step=reward] scene-badges m-symbol,tutorial-step[active=true][step=reward] scene-badges badge-emblem{animation:badge-rise .7s var(--ease-spring) backwards}tutorial-step[active=true][step=reward] scene-badges m-symbol{animation-delay:1.2s}tutorial-step[active=true][step=reward] scene-badges badge-emblem{animation-delay:1.4s}tutorial-dots{display:flex;justify-content:center;gap:.4rem}tutorial-dot{width:9px;height:9px;background:var(--color-outline-variant);cursor:pointer;transition:background-color .2s var(--ease-emphasized),transform .25s var(--ease-spring)}tutorial-dot[active=true]{background:var(--color-primary);transform:scale(1.3)}tutorial-nav{display:flex;gap:.6rem}tutorial-nav button{display:flex;align-items:center;justify-content:center;gap:.4rem;flex:1;height:46px;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring)}tutorial-nav button[kind=filled]{background:var(--color-primary);color:var(--color-on-primary);border:var(--frame-width) solid var(--color-primary);box-shadow:4px 4px 0 var(--color-tertiary-container)}tutorial-nav button[kind=tonal]{background:var(--color-surface-container-lowest);color:var(--color-on-surface);border:var(--frame-width) solid var(--frame-color);box-shadow:4px 4px 0 var(--shadow-ink)}tutorial-nav button:hover{transform:translate(-1px,-1px)}tutorial-nav button:active{transform:translate(3px,3px);box-shadow:none}tutorial-nav button:disabled{opacity:.4;box-shadow:none;transform:none}tutorial-nav button m-symbol{font-size:19px;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}