main header{width:min(100%,640px);padding-right:112px;min-height:80px}
/* the portrait rides down the page with you: sticky inside a rail as tall as the page column */
.portrait-rail{--size:80px;position:absolute;z-index:1;top:0;bottom:0;left:calc(min(100%,640px) - var(--size));width:var(--size);pointer-events:none}
.rail-stick{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;gap:120px}
.cursor-portrait{position:relative;width:var(--size);height:var(--size);pointer-events:auto;background-image:url('assets/portrait-grid.webp');background-size:300% 300%;background-position:50% 50%;background-repeat:no-repeat;contain:paint}
@media(max-width:850px){main header{padding-right:88px;min-height:64px}.portrait-rail{--size:64px}.rail-stick{top:16px}}
/* The red button under the portrait (fall.js), like the one on the desk, with a note beside it */
.red-spot{position:relative;width:var(--size);display:flex;justify-content:center;pointer-events:auto}
.red-button{position:relative;z-index:2;width:56px;height:56px;padding:0;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 50% 40%,#fafafa,#d4d4d1 60%,#a9a9a5);box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 2px #0000001f,0 4px 12px #00000024,0 1px 2px #00000033;-webkit-tap-highlight-color:transparent}
/* seen from straight above: the red cap sits in the middle of its ring, its edge all the way round */
.red-button span{position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ff6a4f,#e2361f 55%,#b8260f);box-shadow:0 0 0 1.5px #a3270f,inset 0 2px 3px #ffffff59,inset 0 -3px 5px #00000038,0 2px 5px #00000040;transition:transform 90ms ease,box-shadow 90ms ease,filter 90ms ease}
.red-button:active span,.red-button[aria-pressed="true"] span{transform:scale(.95);filter:brightness(.92);box-shadow:0 0 0 1.5px #a3270f,inset 0 2px 4px #00000038,0 1px 2px #00000040}
.red-button:focus-visible{outline:2px solid var(--muted);outline-offset:4px}
.do-not{position:absolute;left:calc(50% + 34px);top:-14px;width:92px;margin:0;padding:0;border:0;background:none;color:#2b2a26;font:500 17px/16px Caveat,cursive;text-align:center;transform:rotate(6deg);perspective:500px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.do-not:focus-visible{outline:2px solid var(--muted);outline-offset:4px}
/* click the note and it turns over: there is more on the back */
.do-not-card{position:relative;display:grid;transform-style:preserve-3d;transition:transform 600ms cubic-bezier(.22,1,.36,1)}
.do-not.turned .do-not-card{transform:rotateY(180deg)}
.do-not-face{grid-area:1/1;padding:10px 8px 12px;background:#f4dd6b;box-shadow:0 6px 12px #0000001f,0 1px 2px #00000026;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.do-not-back{transform:rotateY(180deg);background:#efd65f}
@media(prefers-reduced-motion:reduce){.do-not-card{transition:none}}
html[data-theme="dark"] .red-button{background:radial-gradient(circle at 35% 30%,#d8d8d5,#8f8f8b 55%,#5d5d5a)}
@media(max-width:850px){.red-spot{display:none}}
/* while the page has fallen: no hover previews, nothing selectable */
html.fallen{overflow:hidden}
html.fallen .preview{display:none!important}
html.fallen body{user-select:none;-webkit-user-select:none}
.fall-layer{position:fixed;inset:0;z-index:20;cursor:grab}
.fall-layer:active{cursor:grabbing}
html.fallen .portrait-rail{z-index:21}
html.fallen .cursor-portrait,html.fallen .do-not{pointer-events:none}
/* the sticky hand (fall.js) that slaps a new note over the old one */
.hand-rig{position:fixed;z-index:50;pointer-events:none;width:0;height:0}
.slapped-note{position:fixed;z-index:49;width:92px;margin:0;color:#2b2a26;font:500 17px/16px Caveat,cursive;text-align:center;transform:rotate(-4deg);backface-visibility:visible;pointer-events:none}
.hand-body{position:absolute;z-index:2;left:58px;top:3px;width:240px;height:60px;transform-origin:4px 34px}
.sticky-hand{position:absolute;left:0;top:0;width:240px;height:auto;max-width:none;user-select:none}
/* the arm carries on as a string off the right edge of the screen, so the toy's ring never shows */
.hand-string{position:absolute;left:234px;top:21.9px;width:4000px;height:5.2px;border-radius:3px 0 0 3px;background:#026add}
.do-not b{font-weight:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.hand-rig .slapped-note{z-index:1}