/* How to use: lessons with small moving pictures, in the home page's style */

.tut .ltop .back { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 15px; padding: 8px 12px 8px 6px; border: 1.8px solid #111; border-radius: 999px; background: #fff; cursor: pointer; }
.tut .ltop .back .ic { width: 20px; height: 20px; }
.tut .th { font-size: clamp(32px, 4.6vw, 52px); margin: 40px 0 6px; letter-spacing: -0.03em; font-weight: 800; }
.tut .lede { margin: 6px 0 30px; }
.tut .lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.tut .lesson { background: #fff; border: 1.8px solid #111; border-radius: 16px; box-shadow: 5px 5px 0 #111; overflow: hidden; display: flex; flex-direction: column; }
.tut .demo { position: relative; height: 210px; border-bottom: 1.8px solid #111; background-color: #fff;
  background-image: linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 16px 16px; overflow: hidden; }
.tut .txt { position: relative; padding: 16px 18px 18px; }
.tut .txt .no { position: absolute; right: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1.8px solid #111; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.tut .txt h2 { font-size: 18px; margin: 0 40px 8px 0; letter-spacing: -0.01em; }
.tut .txt ol { margin: 0; padding-left: 20px; color: #333; font-size: 14.5px; line-height: 1.5; }
.tut .txt li { margin-bottom: 3px; }

/* shared bits of the pictures */
.tut .tw { position: absolute; background: #fff; border: 1.6px solid #111; border-radius: 10px; }
.tut .tpage { left: 50%; top: 18px; width: 200px; height: 176px; margin-left: -100px; padding: 18px 16px; }
.tut .tpage .ln { position: relative; height: 6px; background: #111; opacity: 0.8; border-radius: 3px; margin-bottom: 10px; }
.tut .tap { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #111; background: rgba(255,255,255,0.6); z-index: 4; }
.tut .tap::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #111; opacity: 0; animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { opacity: 0.6; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.4); } }
.tut .chip { position: absolute; display: flex; gap: 6px; align-items: center; padding: 6px 10px; font-size: 12px; background: #fff; border: 1.6px solid #111; border-radius: 10px; box-shadow: 3px 3px 0 #111; white-space: nowrap; z-index: 5; }
.tut .chip .ic { width: 15px; height: 15px; }
.tut .chip span { color: #999; }

/* 1: hold, drag, highlight */
.tut .t-sel { left: 22px; top: 70px; animation: selmove 8s ease-in-out infinite; }
@keyframes selmove { 0%, 12% { transform: translate(0, 0); } 40%, 100% { transform: translate(120px, 0); } 0%, 100% { opacity: 1; } }
.tut .lesson:nth-child(1) .hlx::after { content: ""; position: absolute; left: -3px; top: -5px; height: 16px; width: 0; border-radius: 2px; animation: selhl 8s ease-in-out infinite; }
@keyframes selhl { 0%, 12% { width: 0; background: rgba(40,40,40,0.25); } 40% { width: 72%; background: rgba(40,40,40,0.25); } 62% { width: 72%; background: rgba(40,40,40,0.25); } 66%, 92% { width: 72%; background: #ffeb3b; mix-blend-mode: multiply; } 100% { width: 72%; background: #ffeb3b; opacity: 0; } }
.tut .c-sel { left: 30px; top: 30px; opacity: 0; animation: chipin 8s ease-in-out infinite; }
@keyframes chipin { 0%, 42% { opacity: 0; transform: translateY(6px); } 48%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }

/* 2: tap a highlight, read its note */
.tut .hlx.on::after { content: ""; position: absolute; left: -3px; top: -5px; height: 16px; width: 80%; background: #ffeb3b; mix-blend-mode: multiply; border-radius: 2px; }
.tut .t-note { left: 70px; top: 60px; animation: tapfade 7s ease-in-out infinite; }
@keyframes tapfade { 0%, 25% { opacity: 1; } 35%, 100% { opacity: 0; } }
.tut .notecard { left: 50%; top: 52px; width: 176px; margin-left: -88px; padding: 10px; box-shadow: 4px 4px 0 #111; opacity: 0; animation: cardin 7s ease-in-out infinite; z-index: 5; font-size: 11px; }
.tut .notecard .q { height: 18px; border-radius: 5px; background: #fffbd0; margin: 6px 0 8px; }
.tut .notecard .nl { height: 5px; background: #111; border-radius: 3px; margin-bottom: 6px; opacity: 0.8; }
.tut .notecard .nl.s { width: 60%; }
@keyframes cardin { 0%, 30% { opacity: 0; transform: translateY(10px) scale(0.96); } 38%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 3: the pen button opens the notebook */
.tut .tsplit { position: absolute; inset: 0; }
.tut .tpage.half { left: 18px; margin-left: 0; width: 150px; padding: 16px 12px; animation: shrink 8s ease-in-out infinite; }
@keyframes shrink { 0%, 22% { width: 230px; } 32%, 100% { width: 150px; } }
.tut .tbub { position: absolute; right: 8px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.6px solid #111; display: grid; place-items: center; }
.tut .tbub .kosvg { width: 20px; height: 20px; }
.tut .t-bub { right: 14px; bottom: 16px; animation: tapfade 8s ease-in-out infinite; }
.tut .tcanvas { right: 16px; top: 18px; width: 160px; height: 176px; overflow: hidden; background-color: #fffffc;
  background-image: linear-gradient(to right, #c8d6e5 1px, transparent 1px), linear-gradient(to bottom, #c8d6e5 1px, transparent 1px); background-size: 12px 12px; }
.tut .tsplit .tcanvas { animation: slidein 8s ease-in-out infinite; }
@keyframes slidein { 0%, 22% { transform: translateX(190px); } 32%, 100% { transform: none; } }
.tut .tbar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; background: #fff; border-bottom: 1.6px solid #111; }
.tut .tbar .ic { width: 15px; height: 15px; }
.tut .tbar i { width: 10px; height: 10px; border-radius: 50%; background: #111; margin-left: auto; }
.tut .tbar .more { margin-left: auto; font-size: 10px; }
.tut .tcanvas > svg { width: 100%; height: calc(100% - 26px); }
.tut .tcanvas > svg path { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.tut .tcanvas > svg .w1 { animation: write2 8s ease-in-out infinite; }
.tut .tcanvas > svg .w2 { stroke: #1a4fc4; animation: write2 8s ease-in-out 0.8s infinite; }
@keyframes write2 { 0%, 38% { stroke-dashoffset: 200; } 62%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 4: a voice note */
.tut .tcanvas.wide { left: 50%; right: auto; width: 250px; margin-left: -125px; }
.tut .mic, .tut .playmk { position: absolute; left: 50px; top: 80px; width: 30px; height: 30px; border-radius: 50%; border: 1.8px solid #111; background: #fff; display: grid; place-items: center; }
.tut .mic .ic, .tut .playmk .ic { width: 16px; height: 16px; }
.tut .mic { animation: micshow 9s ease-in-out infinite; }
@keyframes micshow { 0%, 10% { opacity: 0; transform: scale(0.4); } 16%, 70% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; } }
.tut .playmk { opacity: 0; animation: playshow 9s ease-in-out infinite; }
@keyframes playshow { 0%, 72% { opacity: 0; } 78%, 96% { opacity: 1; } 100% { opacity: 0; } }
.tut .t-mic { left: 54px; top: 84px; animation: micTap 9s ease-in-out infinite; }
@keyframes micTap { 0%, 8% { opacity: 1; } 12%, 24% { opacity: 0; } 28%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
.tut .rec { left: 90px; top: 70px; width: 140px; height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 8px; box-shadow: 3px 3px 0 #111; opacity: 0; animation: recshow 9s ease-in-out infinite; }
@keyframes recshow { 0%, 34% { opacity: 0; } 40%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.tut .recdot { width: 12px; height: 12px; border-radius: 50%; background: #d32f2f; flex: none; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.tut .rec .wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; }
.tut .rec .wave i { flex: 1; height: 100%; background: #111; border-radius: 2px; animation: bars 0.9s ease-in-out infinite; }
.tut .rec .tm { font-size: 10px; font-variant-numeric: tabular-nums; }

/* 5: a picture, moved and resized */
.tut .tpic { transform-box: fill-box; transform-origin: 0 0; animation: picmove 8s ease-in-out infinite; }
@keyframes picmove { 0%, 10% { transform: translate(-30px, 10px) scale(0.7); opacity: 0; } 18% { opacity: 1; transform: translate(-30px, 10px) scale(0.7); } 45% { transform: translate(10px, 0) scale(0.7); } 70%, 92% { transform: translate(10px, 0) scale(1); } 100% { transform: translate(10px, 0) scale(1); opacity: 0; } }
.tut .tpic .fr { fill: #f3f3ee; stroke: #111; stroke-width: 2; stroke-dasharray: none; stroke-dashoffset: 0; }
.tut .tpic .art { fill: #cfd8dc; stroke: #111; stroke-width: 1.8; stroke-dasharray: none; stroke-dashoffset: 0; }
.tut .tpic .sun { fill: #ffeb3b; stroke: #111; stroke-width: 1.8; }
.tut .tpic .sl { fill: none; stroke: #555; stroke-width: 1.2; stroke-dasharray: 4 3; }

/* shortcuts */
.tut .sh { font-size: 26px; margin: 46px 0 14px; letter-spacing: -0.02em; }
.tut .shorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tut .short { display: flex; gap: 14px; align-items: center; background: #fff; border: 1.8px solid #111; border-radius: 14px; padding: 12px 14px; box-shadow: 3px 3px 0 #111; }
.tut .short b { display: block; font-size: 15px; }
.tut .short p { margin: 2px 0 0; font-size: 13.5px; color: #444; }
.tut .gest { position: relative; flex: none; width: 58px; height: 46px; border: 1.6px solid #111; border-radius: 8px; overflow: hidden; }
.tut .gest i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #111; }
.tut .g-2r i { top: 12px; left: 8px; animation: gr 1.8s ease-in-out infinite; } .tut .g-2r i + i { top: 26px; }
.tut .g-2l i { top: 12px; right: 8px; animation: gl 1.8s ease-in-out infinite; } .tut .g-2l i + i { top: 26px; }
@keyframes gr { 0% { transform: none; opacity: 1; } 70% { transform: translateX(30px); opacity: 1; } 100% { transform: translateX(30px); opacity: 0; } }
@keyframes gl { 0% { transform: none; opacity: 1; } 70% { transform: translateX(-30px); opacity: 1; } 100% { transform: translateX(-30px); opacity: 0; } }
.tut .g-down i { left: 23px; top: 2px; animation: gd 1.8s ease-in-out infinite; } .tut .g-down i + i { display: none; }
.tut .g-up i { left: 23px; bottom: 2px; animation: gu 1.8s ease-in-out infinite; } .tut .g-up i + i { display: none; }
@keyframes gd { 70% { transform: translateY(26px); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes gu { 70% { transform: translateY(-26px); opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.tut .g-corner i { right: 4px; top: 4px; animation: gt 1.4s ease-in-out infinite; } .tut .g-corner i + i { display: none; }
.tut .g-corner::after { content: ""; position: absolute; right: 18px; top: 0; width: 8px; height: 12px; background: #111; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); }
@keyframes gt { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.6); } }
.tut .g-dbl i { right: 8px; top: 17px; animation: gdbl 1.6s ease-in-out infinite; } .tut .g-dbl i + i { display: none; }
@keyframes gdbl { 0%, 20%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(0.55); } }
.tut .g-pinch i { left: 20px; top: 17px; animation: gp1 1.8s ease-in-out infinite; } .tut .g-pinch i + i { left: 27px; animation: gp2 1.8s ease-in-out infinite; }
@keyframes gp1 { 50% { transform: translateX(-12px); } } @keyframes gp2 { 50% { transform: translateX(12px); } }

.tut .lfoot { margin-top: 36px; }
@media (max-width: 480px) {
  .tut .lessons, .tut .shorts { grid-template-columns: 1fr; }
}
.tut .sg { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin: 22px 0 10px; }
.tut .sh + .sg { margin-top: 4px; }

/* the pen / hand button, switching: the canvas button's own icons */
.tut .g-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.8px solid #111; border-radius: 50%; animation: tgl 3s steps(1) infinite; }
.tut .g-toggle .tg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #101010; }
.tut .g-toggle .tg .ic { width: 20px; height: 20px; }
.tut .g-toggle .pen { animation: tglpen 3s steps(1) infinite; }
.tut .g-toggle .hand { animation: tglhand 3s steps(1) infinite; }
@keyframes tglpen { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tglhand { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes tgl { 0% { background: #fff; } 50% { background: #fff; } }

/* settings: the menus the edge swipes open */
.tut .tpage.tall { top: 10px; height: 190px; width: 230px; margin-left: -115px; overflow: hidden; }
.tut .t-down { left: 104px; top: 4px; animation: swdown 7s ease-in-out infinite; }
@keyframes swdown { 0% { transform: translateY(0); opacity: 1; } 22% { transform: translateY(60px); opacity: 1; } 28%, 100% { transform: translateY(60px); opacity: 0; } }
.tut .t-up { left: 104px; bottom: 4px; top: auto; animation: swup 7s ease-in-out infinite; }
@keyframes swup { 0% { transform: translateY(0); opacity: 1; } 22% { transform: translateY(-60px); opacity: 1; } 28%, 100% { transform: translateY(-60px); opacity: 0; } }
.tut .menu-top { left: -1.6px; right: -1.6px; top: -1.6px; border-radius: 10px 10px 8px 8px; padding: 0 0 6px; box-shadow: 0 4px 0 #111; animation: mdown 7s ease-in-out infinite; z-index: 3; }
@keyframes mdown { 0%, 22% { transform: translateY(-110%); } 30%, 88% { transform: none; } 96%, 100% { transform: translateY(-110%); } }
.tut .menu-bot { left: -1.6px; right: -1.6px; bottom: -1.6px; border-radius: 8px 8px 10px 10px; box-shadow: 0 -4px 0 #111; animation: mup 7s ease-in-out infinite; z-index: 3; }
@keyframes mup { 0%, 22% { transform: translateY(110%); } 30%, 88% { transform: none; } 96%, 100% { transform: translateY(110%); } }
.tut .menu-top .tabs, .tut .menu-bot .tabs { position: relative; display: flex; justify-content: space-around; align-items: center; height: 34px; }
.tut .menu-top .tabs { border-bottom: 1.4px solid #ddd; }
.tut .menu-bot .tabs { border-top: 1.4px solid #ddd; }
.tut .mt .kosvg { width: 20px; height: 20px; }
.tut .menu-top .mt:first-child { position: relative; }
.tut .menu-top .mt:first-child::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -8px; height: 2.5px; background: #111; }
.tut .mi { height: 6px; margin: 9px 14px 0; background: #111; border-radius: 3px; opacity: 0.75; }
.tut .mi.s { width: 50%; }
.tut .menu-bot .opts { display: flex; gap: 6px; padding: 8px 10px 6px; }
.tut .menu-bot .opts span { flex: 1; height: 20px; border-radius: 4px; border: 1.2px solid #ccc; }
.tut .menu-bot .opts span.on { background: #e4e4e4; border-color: transparent; }
.tut .menu-bot .under { position: absolute; top: 0; left: 8%; width: 12%; height: 2.5px; background: #111; animation: undermove 7s steps(1) infinite; }
@keyframes undermove { 0%, 35% { left: 8%; } 45% { left: 28%; } 55% { left: 48%; } 65% { left: 68%; } 75%, 100% { left: 88%; margin-left: -6%; } }