/* Trace. Motion only under no-preference, at the bottom. */
/* nothing may ever scroll the stage sideways, by focus or anything else */
.hk-play{overflow:clip}
.hk-tr-board{position:absolute;z-index:2;border-radius:26px;background:linear-gradient(145deg,var(--b1),var(--b2));box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 8px 0 var(--b3),0 22px 26px rgba(90,40,10,.3)}
.hk-tr-board canvas{position:absolute;left:0;top:0;pointer-events:none;border-radius:26px}
.k-v{--b1:#b5e7ff;--b2:#45abec;--b3:#2b83c4}
.k-c{--b1:#ffd0e0;--b2:#f582ae;--b3:#d05c8a}
.k-n{--b1:#a3eab8;--b2:#35ad63;--b3:#23874a}
.k-p{--b1:#fffef9;--b2:#fff6e2;--b3:#e7d5b2}
.hk-tr-clip{position:absolute;inset:0;overflow:hidden;visibility:hidden;pointer-events:none}
.hk-tr-geo{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;overflow:visible;pointer-events:none}
.hk-tr-touch{z-index:10;border-radius:26px;cursor:pointer}
.hk-tr-word{position:absolute;left:8px;right:8px;bottom:9px;display:flex;flex-direction:column;align-items:center;gap:5px;visibility:hidden;pointer-events:none;color:#20183a;font-weight:700;font-size:clamp(24px,4.4vmin,36px);line-height:1.1}
.hk-tr-word.show{visibility:visible}
.hk-tr-text{padding:3px 16px 4px;border-radius:999px;background:rgba(255,255,255,.86);white-space:nowrap}
.hk-tr-text b{color:#d9304f}
.hk-tr-beads{display:flex;gap:4px}
.hk-tr-bead{width:clamp(18px,3.4vmin,28px);height:clamp(18px,3.4vmin,28px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0b8,#e8b045 58%,#a8701a);box-shadow:0 2px 0 rgba(120,70,10,.45)}
.hk-tr-dot{position:absolute;left:-27px;top:-27px;width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px #1fb57a,0 7px 12px rgba(30,40,20,.32);pointer-events:none}
.hk-tr-dot.hold{visibility:hidden}
.hk-tr-ring{position:absolute;left:-38px;top:-38px;width:76px;height:76px;border-radius:50%;border:4px solid rgba(255,255,255,.92);background:rgba(255,225,130,.2);box-shadow:0 0 0 3px rgba(255,190,40,.6);pointer-events:none;z-index:20;display:none}
.hk-tr-ring.off{background:rgba(255,255,255,.1);box-shadow:0 0 0 2px rgba(50,20,50,.22)}
.hk-tr-thread{position:absolute;left:0;top:-4px;height:0;border-top:8px dotted #fff;transform-origin:0 4px;z-index:19;pointer-events:none;display:none;filter:drop-shadow(0 1px 0 rgba(50,20,50,.45))}
.hk-tr-fx{position:absolute;left:0;top:0;z-index:30;pointer-events:none}
.hk-tr-rack{position:absolute;z-index:40;display:flex;gap:6px;align-items:center;padding:0 10px;overflow:auto hidden;touch-action:pan-x;background:linear-gradient(#f9e7c6,#ebcea0);border-radius:22px;box-shadow:inset 0 2px 0 #fff4dc,0 3px 0 #cda36c,0 12px 20px rgba(120,80,20,.26);scrollbar-width:none}
.hk-tr-rack::-webkit-scrollbar{display:none}
.hk-tr-rack.wide{display:grid;grid-template-columns:repeat(var(--cols),64px);grid-auto-rows:72px;align-content:start;padding:10px 11px;overflow:hidden auto;touch-action:pan-y}
.hk-tr-tile{position:relative;flex:none;width:64px;height:72px;border-radius:14px;background:linear-gradient(145deg,var(--b1),var(--b2));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 3px 0 var(--b3)}
.hk-tr-tile svg{position:absolute;left:5px;top:9px;width:54px;height:54px;pointer-events:none}
.hk-tr-tile path{fill:none;stroke:#94672e;stroke-linecap:round;stroke-linejoin:round}
.hk-tr-tile.k-p path{fill:url(#hk-tr-u);stroke:#2d49b8;stroke-width:1.5}
.hk-tr-tile.on{box-shadow:0 0 0 3px #fff,0 0 0 6px #ff7355}
.hk-tr-pens{position:absolute;z-index:40;display:flex;justify-content:center;align-items:flex-end;gap:6px;padding:0 8px}
.hk-tr-pen{position:relative;z-index:1;flex:none;width:64px;height:84px;overflow:hidden}
.hk-tr-pen svg{position:absolute;left:12px;top:14px;width:40px;height:150px;pointer-events:none}
.hk-tr-pen.on svg{top:0}
.hk-tr-block{position:absolute;left:0;right:0;bottom:0;height:27px;z-index:2;border-radius:6px 6px 8px 8px;background:linear-gradient(#e3b57f,#b57f49);box-shadow:inset 0 2px 0 #f8e2bf,0 2px 0 #8d5e30,0 8px 12px rgba(90,50,10,.28);pointer-events:none}
.hk-tr-loose{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 10px 8px rgba(40,30,90,.3))}
.hk-tr-frame{position:absolute;pointer-events:none}
.hk-tr-frame svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 7px rgba(90,20,50,.32))}
.hk-tr-pencil{position:absolute;left:-26px;top:0;z-index:22;display:none;transform-origin:26px 0;pointer-events:none;filter:drop-shadow(-7px 5px 5px rgba(50,20,10,.3))}
.hk-tr-pencil svg{width:52px;height:195px}
@media (prefers-reduced-motion:no-preference){
 .hk-tr-tile{transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
 .hk-tr-tile:active{transform:scale(.93)}
 .hk-tr-pen svg{transition:top .18s cubic-bezier(.3,1.6,.5,1)}
 .hk-tr-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:5px solid #1fb57a;animation:hk-tr-pulse 1.5s ease-out infinite}
 .hk-tr-dot.call::after{animation-duration:.8s}
 @keyframes hk-tr-pulse{from{transform:scale(1);opacity:.85}to{transform:scale(1.7);opacity:0}}
 .hk-tr-word.show:not(.quiet) .hk-tr-text{animation:hk-tr-rise .5s .35s both cubic-bezier(.3,1.5,.5,1)}
 @keyframes hk-tr-rise{from{opacity:0;transform:translateY(12px) scale(.86)}}
 .hk-tr-word.show:not(.quiet) .hk-tr-bead{animation:hk-tr-pop .36s .3s both cubic-bezier(.3,1.9,.5,1)}
 @keyframes hk-tr-pop{from{opacity:0;transform:scale(.2)}}
 .hk-tr-next{animation:hk-tr-wig 1.7s .9s ease-in-out infinite}
 @keyframes hk-tr-wig{0%,55%,100%{transform:translateY(0)}18%{transform:translateY(-8px) rotate(-3deg)}36%{transform:translateY(-2px) rotate(2deg)}}
}
@media (prefers-reduced-motion:reduce){.hk-tr-next{box-shadow:0 0 0 3px #1fb57a,0 3px 0 var(--b3)}}