.tutorial-demo{max-width:420px;margin:0 auto;text-align:center}.tutorial-board{display:inline-block;position:relative;margin-bottom:1.5rem}.tutorial-caption{min-height:3rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;padding:0 .5rem}.tutorial-caption__text{font-size:.9375rem;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;line-height:1.4}.tutorial-caption__text.visible{opacity:1;transform:translateY(0)}.tutorial-steps{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}.tutorial-dot{width:10px;height:10px;border-radius:50%;background:#00000026;transition:background .3s ease,transform .3s ease}.tutorial-dot.active{background:#000;transform:scale(1.3)}.tutorial-dot.done{background:#00000080}.tutorial-controls{display:flex;justify-content:center;gap:.75rem;align-items:center}.tutorial-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid #000;background:transparent;cursor:pointer;transition:background .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.tutorial-btn:hover{background:#00000014;transform:scale(1.1)}.tutorial-btn:active{transform:scale(.95)}.tutorial-btn--play .icon-play{display:block;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #000;margin-left:2px}.tutorial-btn--pause .icon-pause{display:flex;gap:3px}.tutorial-btn--pause .icon-pause span{display:block;width:3px;height:14px;background:#000;border-radius:1px}.tutorial-btn--replay .icon-replay{width:16px;height:16px}.tutorial-demo .ttt-board{margin:0 auto}.tutorial-demo .ttt-cell{width:70px;height:70px;cursor:default}.tutorial-demo .ttt-x:after{font-size:40px}.tutorial-demo .ttt-o:after{font-size:36px}.tutorial-demo .c4-table{margin:0 auto;border-spacing:4px;padding:8px}.tutorial-demo .c4-cell{width:38px;height:38px;cursor:default}.tutorial-demo .c4-drop{--cell-size: 42px}.tutorial-demo .gmk-board{display:inline-grid;gap:2px;background:#000000b3;padding:8px;border-radius:10px;margin:0 auto}.tutorial-demo .gmk-cell{width:36px;height:36px;border-radius:50%;background:#c9f7a5;cursor:default;position:relative}.tutorial-demo .gmk-p1{background:#1a1a1a!important;box-shadow:inset 0 -2px 4px #0006}.tutorial-demo .gmk-p2{background:#fff!important;box-shadow:inset 0 -2px 4px #0000001a}.tutorial-demo .gmk-place{animation:placePiece .3s cubic-bezier(.25,.1,.25,1.4) both}.tutorial-demo .gmk-win{animation:tttWinPulse .8s ease-in-out 3;box-shadow:0 0 0 3px #c9f7a5,0 0 16px #c9f7a5cc!important;z-index:1;position:relative}.tutorial-demo .rev-board{margin:0 auto;padding:8px}.tutorial-demo .rev-cell{width:38px;height:38px}.tutorial-demo .rev-p1:after,.tutorial-demo .rev-p2:after{width:30px;height:30px}.tutorial-demo .bs-grid--demo{display:inline-grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:8px;background:#00000026;border-radius:10px}.tutorial-demo .bs-cell{width:36px;height:36px;border-radius:4px;background:#0693e326;border:1px solid rgba(6,147,227,.25);position:relative;display:flex;align-items:center;justify-content:center;transition:background .3s ease}.tutorial-demo .bs-cell--miss{background:#00000014}.tutorial-demo .bs-cell--miss:after{content:"\b7";font-size:1.5rem;color:#0006}.tutorial-demo .bs-cell--hit{background:#fcb90080;border-color:#fcb900}.tutorial-demo .bs-cell--hit:after{content:"\d7";font-size:1.25rem;font-weight:700;color:#000}.tutorial-demo .bs-cell--sunk{background:#cf2e2e66;border-color:#cf2e2e}.tutorial-demo .bs-cell--sunk:after{content:"\d7";font-size:1.25rem;font-weight:700;color:#cf2e2e}.tutorial-demo .cn-grid{margin:0 auto;gap:4px}.tutorial-demo .cn-card{font-size:.625rem;padding:.4rem .2rem;min-height:40px}.tutorial-demo .wordle-grid{margin:0 auto}.tutorial-demo .wordle-cell{width:44px;height:44px;font-size:1.125rem}.tutorial-demo .wordle-row{gap:4px}.tutorial-demo .bg-grid{margin:0 auto;gap:.25rem;background:#0009;padding:8px;border-radius:10px}.tutorial-demo .bg-cell{width:3rem;height:3rem;font-size:1.25rem}.tutorial-demo .uno-pile{gap:1rem;margin:.5rem 0}.tutorial-demo .uno-pile .uno-card{width:60px;height:86px}.tutorial-demo .uno-hand{gap:3px;min-height:auto;padding:.25rem}.tutorial-demo .uno-hand .uno-card{cursor:default}.tut-uno__card--highlight{transform:translateY(-10px)!important;box-shadow:0 4px 12px #0000004d!important}.tut-dab{display:inline-grid;grid-template-columns:14px 50px 14px 50px 14px;grid-template-rows:14px 50px 14px 50px 14px;gap:0;background:#0000000d;padding:10px;border-radius:10px}.tut-dab__dot{width:14px;height:14px;border-radius:50%;background:#000}.tut-dab__hline{position:relative;cursor:default}.tut-dab__hline:after{content:"";position:absolute;top:50%;left:2px;right:2px;height:4px;transform:translateY(-50%);background:#0000001a;border-radius:2px;transition:background .3s ease}.tut-dab__line--p1:after{background:#1a1a1a}.tut-dab__line--p2:after{background:#c9f7a5;border:1px solid rgba(0,0,0,.15)}.tut-dab__vline{position:relative;cursor:default}.tut-dab__vline:after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:4px;transform:translate(-50%);background:#0000001a;border-radius:2px;transition:background .3s ease}.tut-dab__vline.tut-dab__line--p1:after{background:#1a1a1a}.tut-dab__vline.tut-dab__line--p2:after{background:#c9f7a5;border:1px solid rgba(0,0,0,.15)}.tut-dab__box{border-radius:4px;transition:background .4s ease}.tut-dab__box--p1{background:#00000026}.tut-dab__box--p2{background:#c9f7a566}.tut-quoridor{display:inline-grid;grid-template-columns:repeat(5,44px);grid-template-rows:repeat(5,44px);gap:6px;background:#0000001a;padding:10px;border-radius:10px;position:relative}.tut-qr__cell{width:44px;height:44px;border-radius:6px;background:#0000000f;border:1px solid rgba(0,0,0,.1);transition:background .3s ease}.tut-qr__cell--p1{background:#0000004d}.tut-qr__pawn{position:absolute;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%);transition:left .4s ease,top .4s ease;z-index:2;pointer-events:none}.tut-qr__pawn--p1{background:#1a1a1a;box-shadow:0 2px 4px #0000004d}.tut-qr__pawn--p2{background:#c9f7a5;border:2px solid #000;box-shadow:0 2px 4px #00000026}.tut-qr__wall{position:absolute;background:#cf2e2e;border-radius:3px;z-index:1;animation:placePiece .3s cubic-bezier(.25,.1,.25,1.4) both}.tut-qr__wall--h{width:100px;height:6px;left:57px;top:110px}.tut-mancala{display:flex;align-items:center;gap:8px;background:#000000b3;padding:12px;border-radius:30px;justify-content:center}.tut-mnc__store{width:40px;height:90px;border-radius:20px;background:#c9f7a526;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#c9f7a5;transition:background .3s ease}.tut-mnc__store--changed{background:#c9f7a54d}.tut-mnc__store--highlight{background:#c9f7a580;box-shadow:0 0 12px #c9f7a580}.tut-mnc__pits{display:flex;flex-direction:column;gap:6px}.tut-mnc__row{display:flex;gap:6px}.tut-mnc__pit{width:38px;height:38px;border-radius:50%;background:#c9f7a526;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;color:#c9f7a5;transition:background .3s ease,transform .3s ease}.tut-mnc__pit--active{background:#c9f7a566;box-shadow:0 0 8px #c9f7a580;transform:scale(1.1)}.tut-mnc__pit--changed{animation:placePiece .3s ease both}.tut-hanabi{text-align:center}.tut-hanabi__fireworks{display:flex;justify-content:center;gap:6px;margin-bottom:1rem}.tut-hanabi__stack{width:40px;height:56px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#fff;border:2px solid rgba(0,0,0,.15);transition:box-shadow .3s ease}.tut-hanabi__stack--red{background:#cf2e2e}.tut-hanabi__stack--blue{background:#0693e3}.tut-hanabi__stack--green{background:#00d084}.tut-hanabi__stack--yellow{background:#fcb900;color:#000}.tut-hanabi__stack--white{background:#f0f0f0;color:#000}.tut-hanabi__stack--active{box-shadow:0 0 12px #c9f7a5cc}.tut-hanabi__hand{background:#0000000f;border-radius:8px;padding:.5rem}.tut-hanabi__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.5;margin-bottom:.5rem}.tut-hanabi__card{display:inline-flex;align-items:center;justify-content:center;width:36px;height:52px;border-radius:6px;font-size:1rem;font-weight:700;color:#fff;margin:0 2px;border:2px solid rgba(0,0,0,.15);transition:transform .3s ease,box-shadow .3s ease,opacity .3s ease}.tut-hanabi__card--red{background:#cf2e2e}.tut-hanabi__card--blue{background:#0693e3}.tut-hanabi__card--green{background:#00d084}.tut-hanabi__card--yellow{background:#fcb900;color:#000}.tut-hanabi__card--white{background:#f0f0f0;color:#000}.tut-hanabi__card--hint{transform:translateY(-6px);box-shadow:0 4px 12px #c9f7a599}.tut-hanabi__card--played{opacity:.3;transform:scale(.8)}.tut-typerace{text-align:left;background:#000000b3;border-radius:10px;padding:1rem}.tut-tr__text{font-family:Courier New,monospace;font-size:1.125rem;line-height:1.6;color:#fff6;margin-bottom:.75rem}.tut-tr__char{transition:color .15s ease}.tut-tr__char--correct{color:#00d084}.tut-tr__char--error{color:#cf2e2e;text-decoration:underline}.tut-tr__char--cursor{color:#c9f7a5;border-left:2px solid #c9f7a5;animation:tr-blink 1s step-end infinite}@keyframes tr-blink{50%{border-color:transparent}}.tut-tr__bars{display:flex;flex-direction:column;gap:4px}.tut-tr__bar{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.tut-tr__bar span{display:block;height:100%;border-radius:3px;transition:width .4s ease;width:0}.tut-tr__bar[data-p="1"] span{background:#c9f7a5}.tut-tr__bar[data-p="2"] span{background:#fcb900}.tut-quiz{text-align:center}.tut-quiz__question{font-size:2rem;font-weight:700;margin-bottom:1rem}.tut-quiz__options{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tut-quiz__option{padding:.75rem;border-radius:8px;border:2px solid rgba(0,0,0,.15);font-size:1rem;font-weight:600;background:#0000000d;transition:all .3s ease}.tut-quiz__option--selected{background:#000;color:#c9f7a5;border-color:#000}.tut-quiz__option--correct{background:#2d5829;color:#fff;border-color:#2d5829}.tut-mathspeed{text-align:center}.tut-ms__expr{font-size:2rem;font-weight:700;margin-bottom:.5rem;font-variant-numeric:tabular-nums}.tut-ms__answer{display:inline-block;min-width:2em;border-bottom:3px solid #000;transition:color .3s ease}.tut-ms__answer--filled{color:#000}.tut-ms__result{font-size:2rem;min-height:2.5rem;transition:opacity .3s ease}.tut-ms__result--correct{color:#2d5829}.tut-slf{text-align:center}.tut-slf__letter{font-size:3rem;font-weight:700;margin-bottom:1rem;transition:transform .3s ease}.tut-slf__letter--pop{animation:placePiece .5s cubic-bezier(.25,.1,.25,1.4) both}.tut-slf__categories{text-align:left}.tut-slf__row{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;border-bottom:1px solid rgba(0,0,0,.08)}.tut-slf__label{font-size:.75rem;font-weight:600;text-transform:uppercase;opacity:.5;min-width:3rem}.tut-slf__input{font-size:.9375rem;font-weight:500;min-height:1.5em;transition:opacity .3s ease}.tut-slf__input--filled{opacity:1}.tut-slf__input--unique{color:#2d5829;font-weight:600}.tut-draw{text-align:center}.tut-draw__word{font-size:1.5rem;font-weight:700;min-height:2rem;opacity:0;transition:opacity .3s ease}.tut-draw__word--visible{opacity:1}.tut-draw__canvas{background:#fff;border:2px solid #000;border-radius:8px;padding:.5rem;margin:.5rem 0}.tut-draw__svg{max-width:200px;height:auto}.tut-draw__path{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.2s ease}.tut-draw__path--animate{stroke-dashoffset:0}.tut-draw__guess{font-size:1.25rem;font-weight:600;min-height:1.5rem;opacity:0;transition:opacity .3s ease}.tut-draw__guess--correct{opacity:1;color:#2d5829}.tut-gartic{display:flex;flex-direction:column;gap:8px}.tut-gartic__panel{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:8px;background:#0000000a;border:2px solid rgba(0,0,0,.08);opacity:.3;transition:all .4s ease}.tut-gartic__panel--active{opacity:1;background:#00000014;border-color:#0003}.tut-gartic__icon{font-size:1.25rem;flex-shrink:0}.tut-gartic__content{font-size:.875rem;font-weight:500;text-align:left}.tut-wavelength{text-align:center}.tut-wl__labels{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;text-transform:uppercase;opacity:.5;margin-bottom:.25rem}.tut-wl__bar{height:2.5rem;background:linear-gradient(to right,#0693e3,#fcb900,#cf2e2e);border-radius:1.25rem;position:relative;margin-bottom:1rem}.tut-wl__target,.tut-wl__guess{position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .4s ease,opacity .3s ease;opacity:0}.tut-wl__target{width:20px;height:20px;border-radius:50%;background:#c9f7a5;border:3px solid #000;z-index:2}.tut-wl__target--visible{opacity:1}.tut-wl__guess{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #000;z-index:1}.tut-wl__guess--visible{opacity:1}.tut-wl__clue{font-size:1.25rem;font-weight:600;min-height:1.5rem;opacity:0;transition:opacity .3s ease}.tut-wl__clue--visible{opacity:1}.tut-werewolf{text-align:center}.tut-ww__phase{font-size:2rem;min-height:2.5rem;margin-bottom:.5rem;transition:opacity .3s ease}.tut-ww__phase--night{background:#000c;color:#fff;border-radius:8px;padding:.25rem .75rem}.tut-ww__phase--day{background:#fcb900;color:#000;border-radius:8px;padding:.25rem .75rem}.tut-ww__card{font-size:3rem;width:80px;height:80px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#0000000f;border:2px solid rgba(0,0,0,.15);margin-bottom:.75rem;transition:all .4s ease}.tut-ww__card--revealed{background:#cf2e2e26;border-color:#cf2e2e}.tut-ww__players{display:flex;justify-content:center;gap:6px}.tut-ww__player{width:36px;height:36px;border-radius:50%;background:#00000014;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;transition:all .3s ease}.tut-ww__player--targeted{box-shadow:0 0 0 3px #cf2e2e}.tut-ww__player--eliminated{opacity:.3;text-decoration:line-through}.tut-spyfall{text-align:center}.tut-sf__card{font-size:2rem;width:100px;height:100px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:#0000000f;border:2px solid rgba(0,0,0,.15);margin-bottom:.75rem;transition:all .4s ease;line-height:1.3}.tut-sf__card small{font-size:.875rem;font-weight:600}.tut-sf__card--revealed{background:#c9f7a533;border-color:#000}.tut-sf__qa{text-align:left}.tut-sf__bubble{background:#0000000f;border-radius:8px;padding:.5rem .75rem;margin-bottom:.5rem;font-size:.875rem;animation:anim-slide-in-kf .3s ease-out}.tut-sf__bubble--vote{background:#c9f7a533}.tut-whoami{text-align:center}.tut-wai__card{font-size:2rem;width:100px;height:80px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#0000000f;border:2px solid rgba(0,0,0,.15);margin-bottom:.75rem;font-weight:700;transition:all .4s ease}.tut-wai__card--mystery{background:#00000026;animation:anim-breathe-kf 2s ease-in-out infinite}.tut-wai__card--revealed{background:#c9f7a54d;border-color:#000;font-size:1rem}.tut-wai__qa{text-align:left}.tut-wai__bubble{background:#0000000f;border-radius:8px;padding:.5rem .75rem;font-size:.875rem;animation:anim-slide-in-kf .3s ease-out}@media(min-width:768px){.tutorial-demo .ttt-cell{width:80px;height:80px}.tutorial-demo .ttt-x:after{font-size:48px}.tutorial-demo .ttt-o:after{font-size:42px}.tutorial-demo .c4-cell{width:44px;height:44px}.tutorial-demo .c4-drop{--cell-size: 50px}.tutorial-demo .wordle-cell{width:50px;height:50px;font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.tutorial-caption__text,.tutorial-dot,.tut-dab__hline:after,.tut-dab__vline:after,.tut-dab__box,.tut-wl__target,.tut-wl__guess,.tut-draw__path{transition:none}}