@font-face{font-family:Tinos;src:url(/fonts/tinos-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Tinos;src:url(/fonts/tinos-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Tinos;src:url(/fonts/tinos-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{--bg:#a8a8a8;--ink:#262626}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;overscroll-behavior:none}
body{font-family:Tinos,"Times New Roman",Times,serif;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

#floor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- feet (natural px of the photo: group 752x388) ---------- */
#feet{position:absolute;left:0;top:0;width:752px;height:388px;transform-origin:0 0;pointer-events:none}
#feet img{position:absolute;display:block;will-change:transform}
#foot-l{left:-283px;top:0;width:718px;height:628px;transform-origin:540px 388px}
#foot-r{left:481px;top:59px;width:319px;height:569px;transform-origin:153px 329px}
#coords{position:absolute;left:176px;top:96px;white-space:nowrap;font-weight:700;font-size:42px;letter-spacing:-.2px;color:#fff;
  transform:rotate(4deg) skewX(-6deg);transform-origin:0 50%;opacity:.97;text-shadow:0 0 1px rgba(255,255,255,.4)}

/* ---------- the book (natural px of the photo: 1080x1420) ---------- */
#book{position:absolute;left:0;top:0;width:1080px;height:1420px;transform-origin:0 0;perspective:3400px;perspective-origin:300px 620px}
#plate{position:absolute;inset:0;width:1080px;height:1420px;display:block;pointer-events:none}
.hot{position:absolute;display:block;border-radius:6px;cursor:pointer}
.hot:hover{background:rgba(0,0,0,.06)}
#hot-mail{left:283px;top:450px;width:306px;height:44px}
#hot-ig{left:396px;top:688px;width:102px;height:38px}
#intro-hit{position:absolute;left:279px;top:81px;width:740px;height:1100px;cursor:w-resize}
.turned-done #intro-hit{display:block}

#leaf{position:absolute;left:258px;top:68px;width:764px;height:1118px;transform-origin:12px 50%;transform-style:preserve-3d;will-change:transform}
#leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#leaf .paper{position:absolute;inset:0;width:764px;height:1118px;display:block;pointer-events:none}
#leaf .back{transform:rotateY(180deg)}
#leaf .back .paper{transform:scaleX(-1);filter:brightness(.93)}
#leaf .shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.05) 60%,rgba(0,0,0,.18))}
#leaf.hidden{visibility:hidden}

/* the Automation Week page is baked into leaf_aw.webp; these are the live bits on top of it */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.models{position:absolute;inset:0;pointer-events:none}
.model{position:absolute;display:block;pointer-events:auto;cursor:pointer;outline:none}
.model .icon{position:absolute;display:block}
.model .co{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;mix-blend-mode:multiply;transition:opacity .35s ease}
.model:hover .co,.model:focus-visible .co{opacity:.9}
.model:active .co{opacity:1;filter:brightness(.92)}
.turn{position:absolute;cursor:pointer;outline:none;background:none}
#turn-edge{right:0;top:0;width:44px;height:100%}
#turn-foot{right:0;bottom:0;width:380px;height:170px}

/* ballpoint circle */
#scribble{position:absolute;left:0;top:0;width:200px;height:200px;pointer-events:none;opacity:0;overflow:visible}
#scribble path{fill:none;stroke:#1d2b6b;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:640;stroke-dashoffset:640;opacity:.85}
#scribble.on{opacity:1}
#scribble.on path{animation:draw .7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* hint + controls */
#hint{position:absolute;right:22px;bottom:18px;display:flex;align-items:center;gap:6px;font-size:15px;color:#3c3c3c;transition:opacity .8s ease}
#hint .k,#pad .k{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;border:1.5px solid #3c3c3c;border-radius:3px;font-weight:700;font-size:13px;line-height:1;background:rgba(255,255,255,.14)}
#hint .t{font-style:italic;margin-left:2px}
#hint .sep{margin:0 4px}
#mute{display:inline-flex;align-items:center;gap:6px;color:inherit}
#mute.off .t{text-decoration:line-through}
#hint.dim{opacity:.45}
#hint.press .k{background:rgba(0,0,0,.12)}

#pad{display:none;position:absolute;right:14px;top:var(--padTop,auto);bottom:auto;width:132px;height:88px}
#pad .k{position:absolute;width:40px;height:40px;font-size:16px;border-width:2px;border-radius:5px;color:#333;touch-action:none}
#pad .k.on{background:rgba(0,0,0,.18);transform:translateY(1px)}
#pad [data-k=KeyW]{left:46px;top:0}
#pad [data-k=KeyA]{left:0;top:46px}
#pad [data-k=KeyS]{left:46px;top:46px}
#pad [data-k=KeyD]{left:92px;top:46px}

.touch #pad{display:block}
.touch #hint{right:auto;left:14px;bottom:auto;top:calc(var(--padTop,0px) + 54px)}
.touch #hint .k:not(#mute .k),.touch #hint .t:not(#mute-t),.touch #hint .sep{display:none}

@media (prefers-reduced-motion:reduce){#scribble.on path{animation-duration:.01s}}