html.tutorial-open{overflow:hidden}.tutorial-overlay[hidden]{display:none!important}.tutorial-overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tutorial-shade{position:fixed;z-index:1000;background:#171612b8;pointer-events:auto}.tutorial-spotlight-frame{position:fixed;z-index:1001;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 2px #171612,0 0 0 7px #fbfaf255;pointer-events:none;transition:left .12s ease,top .12s ease,width .12s ease,height .12s ease}.tutorial-hole-blocker{position:fixed;z-index:1002;background:transparent;pointer-events:auto}.tutorial-card{position:fixed;z-index:1003;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:2px solid var(--ink,#171612);border-radius:18px;background:var(--light,#fbfaf2);box-shadow:8px 8px 0 #17161244;color:var(--ink,#171612);pointer-events:auto}.tutorial-card-centered{width:min(520px,calc(100vw - 24px))}.tutorial-card h2{margin:8px 34px 10px 0;font-size:clamp(1.35rem,5vw,1.8rem);line-height:1.2}.tutorial-card p{margin:0;font-size:1rem;line-height:1.7}.tutorial-emphasis{color:#b42318;font-weight:1000}.tutorial-progress{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:8px;padding-right:42px;color:var(--muted,#756f5e);font-size:.78rem;font-weight:900}.tutorial-progress>div{height:7px;border:1px solid var(--ink,#171612);border-radius:999px;background:#fff;overflow:hidden}.tutorial-progress i{display:block;height:100%;background:var(--ink,#171612)}.tutorial-progress b{white-space:nowrap}.tutorial-close{position:absolute;right:10px;top:10px;width:34px;height:34px;padding:0;display:grid;place-items:center;border:0;background:transparent;font-size:1.65rem;font-weight:700;line-height:1;cursor:pointer}.tutorial-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}.tutorial-actions button{min-height:42px;padding:8px 14px;border:2px solid var(--ink,#171612);border-radius:10px;background:#fff;font-weight:900;cursor:pointer}.tutorial-actions button.primary{background:var(--ink,#171612);color:#fff}.tutorial-actions [data-tutorial-action="back"]{display:none!important}.tutorial-actions [data-tutorial-action="back"]+button{flex:1 1 100%}.tutorial-visual{min-height:86px;margin:14px 0;padding:14px;display:flex;align-items:center;justify-content:center;gap:12px;border:2px dashed #756f5e88;border-radius:14px;background:#fff9;font-size:clamp(1.25rem,5vw,2rem);text-align:center}.tutorial-visual strong{font-size:inherit}.tutorial-visual i{font-style:normal;color:var(--muted,#756f5e);font-weight:900}.tutorial-visual[data-tutorial-asset]{height:min(30dvh,260px);min-height:120px;padding:6px;gap:0;background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:contain}.tutorial-visual[data-tutorial-asset]>*{display:none!important}.tutorial-visual[data-tutorial-asset="components"]{background-image:url("tutorial/components.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="goal"]{background-image:url("tutorial/goal.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="arrange"]{background-image:url("tutorial/arrange.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="cat-move"]{background-image:url("tutorial/cat-move.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="tile-move"]{background-image:url("tutorial/tile-move.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="best-moves"]{background-image:url("tutorial/best-moves.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="tile-rotate"]{background-image:url("tutorial/tile-rotate.webp?v=20260906-2")}.tutorial-card-centered .tutorial-visual[data-tutorial-asset="tile-rotate"]{background-image:url("tutorial/cat-patchwork-mode.webp?v=20260906-2")}.tutorial-visual[data-tutorial-asset="daily-tile-operation"]{background-image:url("tutorial/daily-tile-operation.webp?v=20260906-2")}@media(max-width:520px){.tutorial-card{padding:14px 17px;border-radius:15px}.tutorial-card h2{margin:6px 34px 8px 0;font-size:1.35rem}.tutorial-card p{line-height:1.58}.tutorial-progress{margin-bottom:6px;padding-right:38px}.tutorial-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}.tutorial-actions button{width:100%;min-height:40px;padding:7px 12px}.tutorial-actions button:only-child{grid-column:1/-1}.tutorial-actions [data-tutorial-action="back"]+button{grid-column:1/-1}.tutorial-visual{min-height:60px;margin:10px 0;padding:10px;font-size:1.35rem;gap:8px}.tutorial-visual[data-tutorial-asset]{height:min(24dvh,180px);min-height:90px;padding:5px}}@media(max-width:360px){.tutorial-actions{grid-template-columns:1fr}.tutorial-actions button:only-child{grid-column:auto}.tutorial-actions [data-tutorial-action="back"]+button{grid-column:auto}.tutorial-card{width:calc(100vw - 16px);padding:13px 15px}.tutorial-visual{font-size:1.15rem}.tutorial-visual[data-tutorial-asset]{height:min(22dvh,160px);min-height:80px}}

/* Full-resolution tutorial artwork: consistent width, natural proportions. */
.tutorial-visual[data-tutorial-asset]{
  box-sizing:border-box;
  width:400px;
  max-width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1182 / 870;
  margin:14px auto;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
}
.tutorial-visual[data-tutorial-asset="components"],
.tutorial-visual[data-tutorial-asset="arrange"]{aspect-ratio:1182 / 591}
.tutorial-visual[data-tutorial-asset="arrange"]{width:300px;max-width:100%;margin-left:auto;margin-right:auto}
#tutorialOverlay.tutorial-detail-focus-step .tutorial-card:not(.tutorial-card-centered) .tutorial-visual[data-tutorial-asset="arrange"]{margin-left:auto!important;margin-right:auto!important}
.tutorial-visual[data-tutorial-asset="goal"]{aspect-ratio:1182 / 296}
.tutorial-visual[data-tutorial-asset="cat-move"]{aspect-ratio:1182 / 568}
.tutorial-visual[data-tutorial-asset="tile-rotate"]{aspect-ratio:1182 / 427}
.tutorial-card-centered .tutorial-visual[data-tutorial-asset="tile-rotate"]{aspect-ratio:1182 / 528}
.tutorial-visual[data-tutorial-asset="daily-tile-operation"]{aspect-ratio:1182 / 1149}