#beedoku-tutorial {
 --lesson-gap: 12px;
 position: fixed; inset: 0; margin: 0; width: 100%; max-width: none;
 height: 100%; max-height: none; padding: max(12px, var(--overlay-top, 12px)) 16px 12px;
 box-sizing: border-box; overflow: auto; border: 0; border-radius: 0;
 background: #292032; color: #fff8ee; z-index: 30;
}
#beedoku-tutorial[open] {
 --lesson-edge: max(12px, var(--overlay-top, 12px), var(--overlay-bottom, 12px));
 display: grid; grid-template-rows: auto auto; align-content: center; align-content: safe center; justify-items: center;
 gap: var(--lesson-gap); padding-block: var(--lesson-edge);
}
#beedoku-tutorial::backdrop { background: #292032; }
#beedoku-tutorial:is(.lesson-loading,.lesson-success),
#beedoku-tutorial:is(.lesson-loading,.lesson-success)::backdrop {
 background:#fff8ea; color:#4d3541;
}
.lesson-content, .lesson-opening { width: min(100%, 380px); margin-inline: auto; }
.lesson-content { width:min(100%,clamp(380px,56vw,520px));display:grid;justify-items:center;gap:var(--lesson-gap); }
.lesson-opening { display:grid; place-items:center; align-content:center; text-align:center; gap:20px; }
.lesson-opening > img { width:min(76%,250px); height:auto; }
.lesson-opening p { margin:0; font-size:16px; font-weight:750; }
.lesson-load { position: relative; width: 78%; height: 9px; margin: 25px auto 19px; border-radius: 20px; background: #ecd8bd; }
.lesson-load::before { content: ''; display: block; width: 100%; height: 100%; transform-origin: left; border-radius: inherit; background: #f2c85e; animation: lesson-fill 2.05s ease-in-out both; }
.lesson-loading-bee { position:absolute; bottom:2px; left:5%; width:38px; aspect-ratio:1; transform:translateX(-50%); animation:lesson-travel 2.05s ease-in-out both; }
@keyframes lesson-fill { from { transform: scaleX(.05); } }
@keyframes lesson-travel { to { left:100%; } }
.lesson-instruction { display: grid; place-items: center; width: 100%; min-height: 87px; margin: 0; padding: 10px 14px; border-radius: 17px; background: #fffaf3; color: #34243c; text-align: center; }
.lesson-instruction h2 { margin: 0; font-weight: 800; font-size: clamp(16px, 4vw, 22px); line-height: 1.18; }
.lesson-instruction h2:focus { outline:none; }
.lesson-next { background:#f5cb66;color:#382636;border:0;border-radius:100px;font-weight:850;padding:8px 20px;min-height:44px;margin:0; }
.lesson-next { display:block; width:min(92%,280px); min-height:52px; background:#f8a542; color:#40233a; font-size:19px; box-shadow:0 3px 0 #ac602a; }
.lesson-success .lesson-instruction { background:transparent; }
.lesson-tools:has(.lesson-hint[hidden]) { display:none; }
.lesson-board { display: grid; position: relative; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; touch-action: none; width: min(100%, max(0px, calc(100dvh - 2 * var(--lesson-edge, 12px) - 220px))); }
.lesson-content:has(.lesson-hint:not([hidden])) .lesson-board{max-width:max(0px,calc(100dvh - 2 * var(--lesson-edge,12px) - 285px))}
.lesson-board button { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; min-height: 0; border: 0; border-radius: 11%; background: var(--lesson-tile); box-shadow: none; opacity: .32; transition: opacity .2s; }
.lesson-board button.lesson-lit,.lesson-board.lesson-flash button { opacity: 1; }
.lesson-board button .cell-face{background:var(--lesson-tile);transform-origin:center}
.lesson-board button.lesson-found .lesson-bee { animation: lesson-bloom .55s ease-out both; }
.lesson-board[data-hint=true] button[data-lesson-cell="11"] { outline: 3px solid #fff8ba; outline-offset: 1px; }
.lesson-pointer { position: absolute; z-index: 2; left: var(--demo-x); top: var(--demo-y); width: 12.5%; pointer-events: none; translate: -36% -13%; transform-origin: 36% 13%; animation: lesson-double 1.55s infinite; }
.lesson-pointer svg { display: block; position: relative; width: 100%; filter: drop-shadow(0 2px 2px #28203366); }
.lesson-pointer::before { content: ''; position: absolute; left: 36%; top: 13%; width: 50%; aspect-ratio: 1; border: 2px solid #fff2ab; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.6); animation: lesson-double-pulse 1.55s infinite; }
.lesson-pointer[data-gesture=tap] { animation: lesson-tap 1.45s infinite; }
.lesson-pointer[data-gesture=tap]::before { animation: lesson-tap-pulse 1.45s infinite; }
.lesson-pointer[data-gesture=swipe] { animation: lesson-swipe 1.9s infinite; }
.lesson-pointer[data-gesture=swipe]::before { animation: none; }
.lesson-tools { display:grid;justify-items:center;gap:var(--lesson-gap);text-align:center; }
.lesson-hint { padding:0;gap:5px;color:inherit;font-size:var(--board-control-font);line-height:1.2; }
.lesson-hint .tool-circle {
 width:var(--board-tool-size);height:var(--board-tool-size);background:#fff9ee;border-color:#ecdfd8;box-shadow:0 2px 0 #eadfcf;
}
.lesson-hint .tool-circle svg { width:67%;height:67%; }
.lesson-hint-callout { margin:0;font-size:var(--board-control-font);line-height:1.25;font-weight:650; }
#lesson-intro:focus { outline:none; }
#beedoku-tutorial .lesson-skip { display:block; margin:12px auto 0; min-height:44px; padding:0 16px; appearance:none; -webkit-appearance:none; border:0; border-radius:18px; box-shadow:none; background:transparent; color:#fff9f0; font-size:14px; font-weight:650; text-underline-offset:3px; }
#beedoku-tutorial[open] > .lesson-skip { margin: 0; }
#beedoku-tutorial .lesson-skip:is(:hover,:focus-visible) { text-decoration:underline; }
#beedoku-tutorial:is(.lesson-loading,.lesson-success) .lesson-skip { color:#69462b; }
.lesson-confetti { position: absolute; z-index:4; inset: 0; overflow: visible; pointer-events: none; }
.lesson-confetti i { position:absolute;left:50%;top:45%;width:6px;height:9px;border-radius:2px;background:var(--tint);animation:lesson-fall .85s var(--delay) cubic-bezier(.15,.6,.45,1) both; }
@keyframes lesson-double { 18%, 36%, 65% { transform: scale(1); } 27%, 45% { transform: scale(.89); } }
@keyframes lesson-tap { 30%, 75% { transform: scale(1); } 52% { transform: scale(.89); } }
@keyframes lesson-double-pulse { 25%, 43% { opacity: .92; transform: translate(-50%,-50%) scale(.6); } 35%, 57% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes lesson-tap-pulse { 50% { opacity: .92; transform: translate(-50%,-50%) scale(.6); } 70% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes lesson-swipe { 15%, 85% { opacity: 1; } 35% { transform: translateY(-173%); } 72% { transform: translate(200%, -173%); } 100% { transform: translate(200%, -173%); opacity: 0; } }
@keyframes lesson-bloom { from { transform: scale(.45); } 65% { transform: scale(1.13); } }
@keyframes lesson-fall { from {opacity:0;transform:translate(-50%,-50%) scale(.5)} 12%,65% {opacity:1} to {opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.8)} }
@media (prefers-reduced-motion: reduce) { .lesson-pointer, .lesson-pointer::before, .lesson-board button.lesson-found .lesson-bee, .lesson-confetti i, .lesson-loading-bee, .lesson-load::before { animation: none; } }
.lesson-board .lesson-bee{width:78%;aspect-ratio:1;pointer-events:none}