.how-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;display:grid}.how .sub{margin-bottom:20px}.how-list{gap:4px;margin:0;padding:0;list-style:none;display:grid}.how-list button{all:unset;box-sizing:border-box;cursor:pointer;border-radius:16px;grid-template-columns:44px 1fr;gap:12px;width:100%;padding:12px 16px 14px 12px;display:grid;position:relative;overflow:hidden}.how-list button:focus-visible{outline:3px solid var(--orange)}.how-n{font-family:var(--hand);color:var(--muted);text-align:center;font-size:38px;font-weight:700;line-height:.9;transition:color .3s}.how-txt b{letter-spacing:-.02em;color:var(--muted);font-size:19px;transition:color .3s;display:block}.how-txt span{color:var(--muted);opacity:0;max-height:0;font-size:15px;transition:max-height .4s,opacity .4s,margin .4s;display:block;overflow:hidden}.how-list [aria-current]{background:#fff}.how-list [aria-current] .how-n{color:var(--orange-deep)}.how-list [aria-current] .how-txt b{color:var(--ink)}.how-list [aria-current] .how-txt span{opacity:1;max-height:4.5em;margin-top:3px}.how-bar{background:var(--orange);transform-origin:0;width:100%;height:3px;position:absolute;bottom:0;left:0;transform:scaleX(0)}.how.playing [aria-current] .how-bar{animation:how-bar var(--dur,4s) linear forwards}@keyframes how-bar{to{transform:scaleX(1)}}.how-stage{border-radius:var(--r-lg);background:#fff var(--layers);height:460px;position:relative;overflow:hidden}.how-canvas{width:420px;height:440px;transform:translate(-50%, -50%) scale(var(--k,1));position:absolute;top:50%;left:50%}.how-canvas>*{position:absolute}.how-hand{font-family:var(--hand);color:var(--orange-deep);font-size:24px;font-weight:700;position:absolute;bottom:14px;left:22px;transform:rotate(-4deg)}.how-mic,.how-ghost{transform-origin:50% 100%;width:200px;height:340px;top:40px;left:110px}.how-mic{z-index:3}.how-mic svg{width:100%;height:100%;display:block}.how-ghost{z-index:2;opacity:0;filter:grayscale()contrast(.6)}.how-swatches{z-index:6;opacity:0;gap:14px;display:grid;top:96px;left:354px}.how-swatches i{width:32px;height:32px;box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--line);border-radius:50%;display:block}.how-swatches i.on{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ink)}.how-swatches [data-c=pink]{background:#f5a3c0}.how-swatches [data-c=mint]{background:#bfe7c0}.how-swatches [data-c=red]{background:#e2312f}.how-swatches [data-c=orange]{background:#f07a2e}.how-cursor{z-index:9;opacity:0;filter:drop-shadow(0 2px 2px #2a211b4d);width:26px;height:28px;top:0;left:0}.how-card{z-index:7;opacity:0;background:linear-gradient(135deg,#2a211b,#5b463a 60%,#2a211b);border-radius:10px;width:124px;height:78px;top:0;left:0;box-shadow:0 10px 18px -8px #2a211b80}.how-chip{background:linear-gradient(135deg,#e9c46a,#b98d2f);border-radius:3px;width:22px;height:16px;position:absolute;top:26px;left:14px}.how-wave{border:3px solid #0000;border-left:0;border-right-color:#ffffffb3;border-radius:50%;width:18px;height:22px;position:absolute;top:22px;right:14px}.how-card span{color:#fffc;letter-spacing:.02em;font-size:10px;font-weight:700;position:absolute;bottom:10px;left:14px}.how-paid{z-index:7;text-align:center;opacity:0;justify-items:center;width:150px;display:grid;top:186px;left:262px}.how-check{color:#fff;background:#1f6b47;border-radius:50%;place-items:center;width:52px;height:52px;margin-bottom:8px;font-size:28px;font-weight:900;display:grid;position:relative}.how-check i{opacity:0;border:2px solid #1f6b47;border-radius:50%;position:absolute;inset:0}.how-paid b{font-size:17px}.how-paid em{font-family:var(--hand);color:#1f6b47;font-size:26px;font-style:normal;font-weight:700;line-height:1}.how-chat{z-index:7;gap:8px;width:196px;display:grid;top:92px;left:214px}.how-bub{opacity:0;border-radius:16px;max-width:180px;padding:9px 12px;font-size:14px;line-height:1.3}.how-typing{background:#efe7dc;border-bottom-left-radius:4px;gap:4px;display:flex;position:absolute;top:0;left:0}.how-typing i{background:var(--muted);border-radius:50%;width:7px;height:7px;animation:1s infinite how-dot}.how-typing i:nth-child(2){animation-delay:.15s}.how-typing i:nth-child(3){animation-delay:.3s}@keyframes how-dot{0%,60%,to{opacity:.5;transform:none}30%{opacity:1;transform:translateY(-4px)}}.how-them{color:var(--ink);background:#efe7dc;border-bottom-left-radius:4px;justify-self:start}.how-thumb{background:#f07a2e var(--layers-on-orange);border-radius:8px;width:46px;height:46px;margin-bottom:6px;display:block}.how-me{color:#fff;background:linear-gradient(135deg,#e8742c,#d0532c);border-bottom-right-radius:4px;justify-self:end;font-weight:700}.how-stamp{z-index:8;font-family:var(--hand);color:#1f6b47;opacity:0;background:#ffffffb3;border:3px solid;border-radius:12px;padding:4px 14px 8px;font-size:38px;font-weight:700;line-height:1;top:196px;left:30px}.how-rods{z-index:1;opacity:0;inset:0 0 54px}.how-rods i{background:linear-gradient(90deg,#cfc6ba,#f4efe8 45%,#b9afa2);border-radius:4px;width:8px;position:absolute;top:0;bottom:0}.how-rods i:first-child{left:6px}.how-rods i:last-child{right:6px}.how-bed{z-index:1;opacity:0;background:radial-gradient(circle,#e9c46a8c 1px,#0000 1.4px) 0 0/7px 7px,linear-gradient(#3a322c,#241d18);border-radius:4px;width:360px;height:16px;top:372px;left:30px;box-shadow:inset 0 2px #ffffff1f,0 6px 10px -6px #2a211b99}.how-rail{z-index:8;opacity:0;background:linear-gradient(#5d544c,#2f2823);border-radius:5px;width:420px;height:10px;top:0;left:0;box-shadow:0 2px 4px #2a211b4d}.how-head{z-index:9;opacity:0;width:0;height:0;top:0;left:0}.how-carriage{background:linear-gradient(#3b332d,#221b16);border-radius:8px;width:64px;height:38px;position:absolute;top:-66px;left:-32px;box-shadow:0 3px 6px #2a211b59}.how-fan{background:radial-gradient(circle, #6d625a 3px, transparent 3.5px), repeating-conic-gradient(#8a7f75 0 30deg, #3b332d 30deg 60deg);border-radius:50%;width:26px;height:26px;margin:-13px 0 0 -13px;animation:.25s linear infinite how-spin;position:absolute;top:50%;left:50%}@keyframes how-spin{to{transform:rotate(360deg)}}.how-heater{background:linear-gradient(90deg,#a79e93,#e6e0d8 40%,#9b9187);border-radius:2px;width:28px;height:14px;position:absolute;top:-28px;left:-14px}.how-nozzle{clip-path:polygon(0 0,100% 0,70% 100%,30% 100%);background:linear-gradient(90deg,#a87a2c,#e9c46a 45%,#9a6d22);width:18px;height:14px;position:absolute;top:-14px;left:-9px}.how-glow{background:radial-gradient(#fff3c4,#ffb347 40%,#ff782800 70%);border-radius:50%;width:20px;height:12px;animation:.12s infinite alternate how-flicker;position:absolute;top:-6px;left:-10px}@keyframes how-flicker{to{opacity:.6;transform:scale(.85)}}.how-fresh{z-index:4;opacity:.8;mix-blend-mode:screen;background:linear-gradient(90deg,#ffd68c00,#ffd68ce6);border-radius:2px;height:0;top:0;left:0}.how-box-back,.how-box-front,.how-flap,.how-tape{translate:0 260px}.how-box-back{z-index:2;clip-path:polygon(14px 0,186px 0,200px 40px,0 40px);background:linear-gradient(#4f361f,#8a6239);width:200px;height:40px;top:240px;left:110px}.how-box-front{z-index:4;transform-origin:50% 100%;background:linear-gradient(90deg,#0000000f,#0000 12% 88%,#00000014),linear-gradient(#d5a36a,#c18c55);border-radius:0 0 4px 4px;width:200px;height:130px;top:280px;left:110px;box-shadow:inset 0 3px #e6bb85,0 10px 14px -10px #2a211b80}.how-flap{z-index:5;background:#b07a45;width:100px;height:40px;top:240px}.how-flap-l{clip-path:polygon(14px 0,100px 0,100px 40px,0 40px);transform-origin:7px 20px;left:110px;transform:scaleX(-1)skewY(-14deg)}.how-flap-r{clip-path:polygon(0 0,86px 0,100px 40px,0 40px);transform-origin:93px 20px;left:210px;transform:scaleX(-1)skewY(14deg)}.how-tape{z-index:6;width:22px;top:240px;left:199px}.how-tape i{transform-origin:50% 0;background:linear-gradient(90deg,#ecdec4e6,#faf4e6f2 50%,#e4d4b6e6);width:22px;position:absolute;left:0;transform:scaleY(0)}.how-tape i:first-child{height:40px;top:0}.how-tape i:last-child{border-radius:0 0 2px 2px;height:34px;top:40px}.how-label{background:#fff;border-radius:3px;width:72px;height:48px;padding:7px 8px;position:absolute;top:46px;right:16px;rotate:-4deg;scale:0;box-shadow:0 1px 2px #2a211b40}.how-label b{background:var(--orange);border-radius:2px;height:7px;margin-bottom:5px;display:block}.how-label i{background:var(--ink);opacity:.7;border-radius:2px;height:3px;margin-bottom:4px;display:block}.how-label i:last-child{width:60%}.how-go{z-index:9;font-family:var(--hand);color:var(--orange-deep);opacity:0;font-size:44px;font-weight:700;line-height:1;top:120px;left:34px}@media (width<=860px){.how-grid{grid-template-columns:1fr;gap:0}.how-grid>div:first-child{display:contents}.how-stage{order:3;height:340px}.how-list{order:4;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px;padding-bottom:112px;position:relative}.how-list button{border-radius:12px;grid-template-columns:1fr;justify-items:center;padding:8px 0 10px;position:static;overflow:visible}.how-bar{top:62px;bottom:auto}.how-txt{text-align:left;pointer-events:none;opacity:0;transition:opacity .3s;position:absolute;top:70px;left:0;right:0}.how-list [aria-current] .how-txt{opacity:1}.how-list [aria-current] .how-txt b{font-size:20px}.how-txt span{opacity:1;max-height:none;margin-top:3px;font-size:16px}.how-hand{font-size:20px;bottom:8px}}@media (prefers-reduced-motion:reduce){.how-fan,.how-glow,.how-typing i{animation:none}}