.tutorial-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#ff4f4fe6;z-index:9999;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:24px;box-sizing:border-box}#main-content.dark~.tutorial-backdrop,body.dark .tutorial-backdrop{background:#150c09eb}.tutorial-content-area{width:100%;transition:opacity .15s ease}.tutorial-step-content{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;text-align:center}.tutorial-intro{background:#fff;border:4px solid #000;border-radius:0;box-shadow:8px 8px #000;padding:28px 24px 20px!important;max-width:380px!important;text-align:center;gap:12px!important}#main-content.dark~.tutorial-backdrop .tutorial-intro{background:#2d2928;border-color:#000;box-shadow:8px 8px #0009}.tutorial-intro-icon{width:64px;height:64px;margin-bottom:-4px}.tutorial-intro .tutorial-step-badge{display:inline-block;padding:4px 16px;border-radius:20px;background:#e8ecef;color:#150c09;font-size:13px;letter-spacing:.5px;margin-bottom:4px}#main-content.dark~.tutorial-backdrop .tutorial-intro .tutorial-step-badge{background:#525a65;color:#fff}.tutorial-intro .tutorial-title{font-size:22px;margin-bottom:0}.tutorial-intro .tutorial-message{text-align:center;color:#4b5563;font-size:18px!important;line-height:1.6;text-wrap:balance}.tutorial-intro .tutorial-message mark{background:#fef3c7;color:inherit;padding:2px 6px;border-radius:3px;font-weight:700}.tutorial-cells-frame{display:flex;border:3px solid var(--border-primary, #150c09)}.tutorial-cells-frame .tutorial-cell{min-width:70px;min-height:70px;font-size:2.2rem}.tutorial-cells-frame .tutorial-cell{border:none;border-right:1px solid var(--border-primary, #150c09)}.tutorial-cells-frame .tutorial-cell:last-child{border-right:none}#main-content.dark~.tutorial-backdrop .tutorial-intro .tutorial-message{color:#d1d5db}.tutorial-start-btn{width:100%!important;padding:16px 24px!important;font-family:Nunito Sans,sans-serif!important;font-size:16px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:#000!important;background:#ff4f4f!important;border:4px solid #000!important;border-radius:12px!important;box-shadow:4px 4px #000!important;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease!important}.tutorial-start-btn:hover{transform:translate(-1px,-1px)!important;box-shadow:5px 5px #000!important}.tutorial-start-btn:active{transform:translate(2px,2px)!important;box-shadow:2px 2px #000!important}.tutorial-skip-link{background:none!important;border:none!important;box-shadow:none!important;font-family:Nunito Sans,sans-serif!important;font-size:14px!important;font-weight:800!important;color:#9ca3af!important;cursor:pointer;padding:4px 16px!important;margin-top:-4px;text-transform:uppercase!important;letter-spacing:.5px!important}.tutorial-skip-link:hover{color:#6b7280!important}#main-content.dark~.tutorial-backdrop .tutorial-skip-link{color:#6b7280!important}#main-content.dark~.tutorial-backdrop .tutorial-skip-link:hover{color:#9ca3af!important}#overlay:has(.tutorial-intro)~.tabs,#overlay:has(.tutorial-intro)~.game-nav{display:none}.tutorial-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:400px;padding:28px 24px 20px;box-sizing:border-box;background:#fff;border:4px solid #000;box-shadow:8px 8px #000;margin:16px 16px 24px;flex-shrink:0}.tutorial-intro{flex-shrink:0;margin:16px 16px 24px;box-sizing:border-box}@media(max-width:480px){.tutorial-backdrop{padding:12px}.tutorial-container,.tutorial-intro{margin:0;width:100%;max-width:100%!important;max-height:calc(100svh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch}}#main-content.dark~.tutorial-backdrop .tutorial-container{background:#2d2928;border-color:#000;box-shadow:8px 8px #0009}.tutorial-container *{box-sizing:border-box}.tutorial-step-badge{font-family:Nunito Sans,sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-hint, #928b89);animation:tutorialFadeIn .4s ease-out}#main-content.dark~.tutorial-backdrop .tutorial-step-badge{color:var(--text-secondary, #a99f9c)}.tutorial-title{color:#150c09;text-align:center;font-family:Nunito Sans,sans-serif;font-size:26px;font-weight:900;line-height:120%;margin:0;animation:tutorialSlideUp .4s ease-out .05s both}#main-content.dark~.tutorial-backdrop .tutorial-title{color:var(--text-primary-dark)}.tutorial-message{color:#150c09;text-align:center;font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:400;line-height:150%;margin:0;padding:0 8px;animation:tutorialSlideUp .4s ease-out .1s both}#main-content.dark~.tutorial-backdrop .tutorial-message{color:var(--text-primary-dark)}.tutorial-message b{font-weight:800}.tutorial-row{display:flex;align-items:center;gap:0;animation:tutorialSlideUp .4s ease-out .15s both}.tutorial-row .tutorial-cell:first-child{border-left:none}.tutorial-row .tutorial-cell:last-of-type{border-right:none}.tutorial-row-label{color:#150c09;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;min-width:60px;text-align:right;padding-right:8px}#main-content.dark~.tutorial-backdrop .tutorial-row-label{color:var(--text-primary-dark)}.tutorial-grid-wrapper{width:100%;max-width:300px;--tutorial-grid-border: 4px;--tutorial-grid-line: 1px;--tutorial-grid-line-color: rgba(21, 12, 9, .6);animation:tutorialSlideUp .4s ease-out .15s both;margin:0 auto}.tutorial-grid-top{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 6px}.tutorial-grid-inner{grid-column:1;grid-row:1}.tutorial-row-targets{grid-column:2;grid-row:1}.tutorial-col-targets{grid-column:1;grid-row:2}.tutorial-grid-inner{display:grid;gap:0;border:var(--tutorial-grid-border) solid var(--border-primary, #150c09);position:relative;overflow:visible;z-index:0;isolation:isolate}.tutorial-grid-inner .tutorial-cell{background:var(--cell-background, #fff);border:none;position:relative;z-index:1}.tutorial-grid-inner .tutorial-cell.tutorial-cell-highlight{z-index:4}.tutorial-grid-inner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;background-image:linear-gradient(to right,var(--tutorial-grid-line-color) 1px,transparent 0),linear-gradient(to right,var(--tutorial-grid-line-color) 1px,transparent 0),linear-gradient(to bottom,var(--tutorial-grid-line-color) 1px,transparent 0),linear-gradient(to bottom,var(--tutorial-grid-line-color) 1px,transparent 0);background-size:1px 100%,1px 100%,100% 1px,100% 1px;background-position:calc(100% / 3) 0,calc(200% / 3) 0,0 calc(100% / 3),0 calc(200% / 3);background-repeat:no-repeat}.tutorial-row-targets{display:flex;flex-direction:column;margin-top:var(--tutorial-grid-border);margin-bottom:var(--tutorial-grid-border)}.tutorial-row-targets .tutorial-target{display:flex;align-items:center;justify-content:center;flex:1}.tutorial-col-targets{display:grid;gap:var(--tutorial-grid-line);margin-top:2px}.tutorial-col-targets .tutorial-target{display:flex;align-items:center;justify-content:center;padding:4px 0}.tutorial-cell{display:flex;justify-content:center;align-items:center;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:1.75rem;color:var(--text-primary, #333030);border:none;background:var(--cell-background, #ffffff);aspect-ratio:1 / 1;cursor:pointer;position:relative;overflow:visible;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,opacity .3s ease,transform .2s ease;min-width:56px;min-height:56px}.tutorial-cell:active{background:var(--surface-secondary, #e3dcda);transform:scale(.95)}.tutorial-cell[data-col="0"]{animation:tutorialCellEnter .3s ease-out .2s both}.tutorial-cell[data-col="1"]{animation:tutorialCellEnter .3s ease-out .26s both}.tutorial-cell[data-col="2"]{animation:tutorialCellEnter .3s ease-out .32s both}.tutorial-cell[data-index="0"]:not(.tutorial-cell-highlight){animation:tutorialCellEnter .3s ease-out .2s both}.tutorial-cell[data-index="1"]{animation:tutorialCellEnter .3s ease-out .26s both}.tutorial-cell[data-index="2"]{animation:tutorialCellEnter .3s ease-out .32s both}@keyframes tutorialCellEnter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.tutorial-cell.delete{position:relative;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M28.1592 34.0931L0.187988 62.0643L5.84484 67.7211L33.816 39.75L61.7872 67.7211L67.4441 62.0643L39.4729 34.0931L67.4439 6.12208L61.7871 0.465225L33.816 28.4363L5.84498 0.465225L0.18813 6.12208L28.1592 34.0931Z" fill="%23EE4444" fill-opacity="0.7"/></svg>');background-repeat:no-repeat;background-position:center;background-size:90%}@keyframes tutorialMarkAppear{0%{transform:translate(-50%,-50%) scale(0) rotate(-15deg)}to{transform:translate(-50%,-50%) scale(1) rotate(0)}}.tutorial-cell.circle{position:relative}.tutorial-cell.circle:before{content:"";position:absolute;top:50%;left:50%;width:90%;height:90%;transform:translate(-50%,-50%) scale(0);background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75" fill="none"><circle cx="37.5" cy="37.5" r="33.5" stroke="%235EC26A" stroke-opacity="0.7" stroke-width="8"/></svg>');background-repeat:no-repeat;background-position:center;background-size:contain;z-index:1;pointer-events:none;animation:tutorialMarkAppear .25s cubic-bezier(.34,1.56,.64,1) forwards}.tutorial-target{display:flex;justify-content:center;align-items:center;font-family:Nunito Sans,sans-serif;font-weight:700;font-size:1.75rem;color:var(--text-hint, #928b89);aspect-ratio:1 / 1;min-width:56px;min-height:56px;transition:color .3s ease,font-weight .2s ease,transform .3s ease}.tutorial-target.correct{color:var(--text-primary, #333030);font-weight:900;animation:tutorialTargetPop .35s cubic-bezier(.34,1.56,.64,1)}@keyframes tutorialTargetPop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.tutorial-cell-highlight{z-index:5}.tutorial-cell-highlight.hint-fade-in:after{animation:tutorialHintFadeIn .4s ease-out forwards,tutorialPulse 1.2s ease-in-out .4s infinite}@keyframes tutorialHintFadeIn{0%{opacity:0;transform:scale(1.15)}to{opacity:.5;transform:scale(1)}}.tutorial-cell-highlight:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border:8px solid #2ecc71;border-radius:2px;z-index:6;animation:tutorialPulse 1.2s ease-in-out infinite;pointer-events:none}@keyframes tutorialPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}.tutorial-cell.dimmed{opacity:.35;transition:opacity .4s ease}.tutorial-target.correct:after{content:"";display:inline-block;width:16px;height:16px;margin-left:2px;vertical-align:middle;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="11" fill="%2322c55e"/><path d="M7 12.5l3 3 7-7" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-size:contain;background-repeat:no-repeat;animation:tutorialCheckAppear .3s ease-out}@keyframes tutorialCheckAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.tutorial-progress{display:flex;gap:8px;justify-content:center;padding-top:32px;padding-bottom:16px;animation:tutorialFadeIn .4s ease-out .3s both}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-400, #b2aaa8);transition:background-color .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}.tutorial-dot.active{background:#ff4f4f;transform:scale(1.4)}.tutorial-dot.completed{background:#ff4f4f}.tutorial-skip{background:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:#150c09!important;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:600;cursor:pointer;opacity:.4;padding:4px 12px;transition:opacity .2s ease!important;width:auto!important;align-self:center;height:auto!important;animation:tutorialFadeIn .4s ease-out .4s both}.tutorial-skip:hover{opacity:.7;transform:none!important;filter:none!important}.tutorial-skip:active{transform:none!important;box-shadow:none!important}#main-content.dark~.tutorial-backdrop .tutorial-skip{color:var(--text-primary-dark)!important}.tutorial-play-btn{height:50px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;background:#ff4f4f!important;color:#000!important;border:2px solid #000!important;border-radius:6px!important;box-shadow:2px 4px #000!important;cursor:pointer;width:100%;max-width:300px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s ease-out,box-shadow .1s ease-out,filter .1s ease-out!important;animation:tutorialSlideUp .4s ease-out .25s both}.tutorial-play-btn:hover{filter:brightness(90%)!important;transform:translate(-1px,-1px)!important;box-shadow:4px 6px #000!important}.tutorial-play-btn:active{transform:translate(1px,2px)!important;box-shadow:1px 2px #000!important}.tutorial-watch-btn{height:46px;font-family:Nunito Sans,sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;background:#fff!important;color:#000!important;border:2px solid #000!important;border-radius:6px!important;box-shadow:2px 4px #000!important;cursor:pointer;width:100%;max-width:300px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s ease-out,box-shadow .1s ease-out,filter .1s ease-out!important;animation:tutorialSlideUp .4s ease-out .3s both}.tutorial-watch-btn:hover{filter:brightness(96%)!important;transform:translate(-1px,-1px)!important;box-shadow:4px 6px #000!important}.tutorial-watch-btn:active{transform:translate(1px,2px)!important;box-shadow:1px 2px #000!important}.tutorial-next-btn{height:44px;font-family:Nunito Sans,sans-serif;font-size:14px;font-weight:700;background:var(--cell-background, #ffffff);color:var(--text-primary, #333030);border:1px solid var(--border-primary, #150c09);border-radius:8px;cursor:pointer;padding:0 24px;transition:transform .1s ease}.tutorial-next-btn:active{transform:scale(.97)}.tutorial-celebration{font-size:56px;animation:tutorialCelebrationBounce .6s cubic-bezier(.34,1.56,.64,1) .1s both}@keyframes tutorialCelebrationBounce{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(5deg);opacity:1}80%{transform:scale(.95) rotate(-2deg)}to{transform:scale(1) rotate(0);opacity:1}}.tutorial-success-message{color:#150c09;text-align:center;font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:400;line-height:150%;margin:0;animation:tutorialSlideUp .4s ease-out .2s both}#main-content.dark~.tutorial-backdrop .tutorial-success-message{color:var(--text-primary-dark)}.tutorial-row-complete .tutorial-cell{animation:tutorialCellBounce .3s ease-out}@keyframes tutorialCellBounce{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes tutorialShake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes tutorialFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tutorialSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:380px){.tutorial-title{font-size:22px}.tutorial-message{font-size:18px}.tutorial-cell,.tutorial-target{font-size:1.3rem;min-width:46px;min-height:46px}.tutorial-grid{max-width:270px}}