.mechanism-tutorial{color:#624a35;text-align:left}
.mechanism-tutorial .tutorial-description{font-size:12px;line-height:1.65;margin:0 0 10px}
.mechanism-tutorial .tutorial-board{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px;background:#f2e1bd;border:1px solid #d4b581;border-radius:12px;isolation:isolate}
.mechanism-tutorial .tutorial-layout-vertical{grid-template-columns:minmax(0,1fr);max-width:210px;margin:auto}
.mechanism-tutorial .tutorial-layout-three .tutorial-cell:last-of-type{grid-column:2}
.mechanism-tutorial .tutorial-board-label{grid-column:1/-1;text-align:center;background:#fff3ce;border-radius:6px;padding:4px;font-size:11px;font-weight:700}
.mechanism-tutorial .tutorial-cell{position:relative;min-width:0;padding:18px 4px 3px;border:4px solid #c59767;border-top-color:#e6bf8e;border-right-color:#ae7f50;background:linear-gradient(120deg,#9d7659,#c29a75);box-shadow:inset 0 4px 7px #61442c44}
.mechanism-tutorial .tutorial-cell-label{position:absolute;z-index:6;top:1px;left:2px;max-width:calc(100% - 4px);overflow:hidden;white-space:nowrap;border-radius:4px;background:#fff4d2;color:#694d31;padding:1px 3px;font-size:9px;line-height:1.25;font-weight:700}
.mechanism-tutorial .tutorial-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);height:55px;gap:1px;position:relative}
.mechanism-tutorial .tutorial-slot{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;min-height:0;height:100%}
.mechanism-tutorial .tutorial-piece{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;min-height:0}
.mechanism-tutorial .tutorial-piece svg{width:100%;height:100%;overflow:visible;flex-shrink:0;filter:drop-shadow(0 2px 1px #5c402933)}
.mechanism-tutorial .tutorial-vacant{border:1px dashed #eed7b866;border-radius:6px;box-sizing:border-box;height:85%;align-self:end}
.mechanism-tutorial .tutorial-plus{margin:auto;color:#f0d1a680;font-size:22px}
.mechanism-tutorial .tutorial-rear{position:absolute;inset:0;transform:translate(2px,-7px) scale(.85);color:#4c3b31;z-index:1}
.mechanism-tutorial .tutorial-rear svg{width:100%;height:100%;filter:brightness(0);opacity:.4}
.mechanism-tutorial .tutorial-neighbor-blue{outline:3px dashed #559ddd;outline-offset:-2px}
.mechanism-tutorial .tutorial-neighbor-green{outline:3px dashed #72b276;outline-offset:-2px}
.mechanism-tutorial .tutorial-mechanism-hourglass{border-color:#d3ac54}
.mechanism-tutorial .tutorial-mechanism-ice{box-shadow:inset 0 0 20px 6px #bbecff;background:linear-gradient(120deg,#8baeb9,#c4e0e2)}
.mechanism-tutorial .tutorial-mechanism-ice .tutorial-piece{filter:saturate(.4);opacity:.7}
.mechanism-tutorial .tutorial-shutter{position:absolute;inset:0;z-index:4;border:1px solid #8d9eaa;background:repeating-linear-gradient(0deg,#9cabb7b0 0 6px,#d1d9dd77 6px 10px);pointer-events:none;animation:tutorial-shutter-close .45s ease-out}
.mechanism-tutorial .tutorial-ribbon{position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,transparent 44%,#d9b2a5dd 44% 55%,transparent 55%),linear-gradient(transparent 43%,#d9b2a5dd 43% 57%,transparent 57%);pointer-events:none}
.mechanism-tutorial .tutorial-mechanism-wrapped .tutorial-piece{filter:brightness(.55) sepia(.5)}
.mechanism-tutorial .tutorial-blocked{position:absolute;inset:0;display:grid;place-items:center;color:#ffe6b0;font-size:35px;background:#5a422a44;z-index:4;pointer-events:none}
.mechanism-tutorial .tutorial-mist{position:absolute;inset:17px 0 33%;z-index:3;background:#dedbd2f5;color:#a9a69d;text-align:center;font-size:28px;line-height:1;pointer-events:none;border-radius:20px}
.mechanism-tutorial .tutorial-mechanism-mist .tutorial-rear{visibility:hidden}
.mechanism-tutorial .tutorial-matched .tutorial-piece{animation:tutorial-clear 1.35s .9s both}
.mechanism-tutorial .tutorial-matched{outline:2px solid #fff0a4;outline-offset:-3px}
.mechanism-tutorial .tutorial-hand{position:absolute;display:none;z-index:8;font-size:26px;line-height:1;pointer-events:none;filter:drop-shadow(0 1px 2px #684a33)}
.mechanism-tutorial .tutorial-hand:not([hidden]){display:block}
.mechanism-tutorial .tutorial-hand:not([style]){display:none}
.mechanism-tutorial .tutorial-step{display:flex;align-items:flex-start;gap:8px;margin:11px 0 0;min-height:42px}
.mechanism-tutorial .tutorial-step>span{flex-shrink:0;background:#e2d0a8;border-radius:9px;padding:3px 7px;font-size:10px;line-height:1.6;font-weight:700}
.mechanism-tutorial .tutorial-step p{font-size:12px;line-height:1.6;margin:0;font-weight:700}
.mechanism-tutorial .tutorial-note{font-size:10px!important;line-height:1.6;margin:3px 0 9px;color:#88704f}
.mechanism-tutorial .tutorial-controls{display:flex;gap:7px;flex-wrap:wrap}
.mechanism-tutorial .tutorial-controls button{flex:1;min-height:36px;min-width:105px;border:1px solid #bea377;border-radius:8px;background:#e9eacb;color:#5d5739;font-size:11px;padding:6px 8px;font-weight:700}
.mechanism-tutorial .tutorial-controls button:disabled{opacity:.5}
.mechanism-tutorial .tutorial-demo-note{font-size:9px!important;line-height:1.5;text-align:center;margin:8px 0 0;color:#9b8565}
.mechanism-tutorial.tutorial-reduced .tutorial-piece,.mechanism-tutorial.tutorial-reduced .tutorial-shutter{animation:none}
.mechanism-tutorial.tutorial-reduced .tutorial-matched .tutorial-piece{opacity:.4}
@keyframes tutorial-clear{0%,20%{filter:drop-shadow(0 0 4px #fff9bb);opacity:1}70%,100%{transform:scale(.12);opacity:0}}
@keyframes tutorial-shutter-close{from{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}
@media(max-width:340px){.mechanism-tutorial .tutorial-board{padding:6px;gap:6px}.mechanism-tutorial .tutorial-items{height:46px}.mechanism-tutorial .tutorial-cell{padding-top:17px}.mechanism-tutorial .tutorial-description{font-size:11px}.mechanism-tutorial .tutorial-cell-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.mechanism-tutorial .tutorial-piece,.mechanism-tutorial .tutorial-shutter{animation:none}.mechanism-tutorial .tutorial-matched .tutorial-piece{opacity:.4}}
.mechanism-tutorial .tutorial-monochrome .tutorial-piece svg{filter:var(--tutorial-color-loss,grayscale(1))}