:root{--paper:#eee9df;--ink:#302c26;--red:#9a402e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);min-height:100svh;font-family:Georgia,serif}.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236e6350' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}main{min-height:100svh;display:grid;place-items:center;padding:28px 16px}.experience{width:min(620px,100%);display:flex;flex-direction:column;align-items:center;gap:14px}.jar-stage{position:relative;width:100%;height:clamp(280px,65svh,620px);display:grid;place-items:center}.jar-button{height:100%;max-width:100%;aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;transition:transform .25s;isolation:isolate}.jar-button:hover{transform:rotate(-2deg)}.jar-image{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 93%,transparent);mask-composite:intersect}.note-area{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}.note{pointer-events:auto;position:relative;width:94%;min-height:145px;padding:28px 32px;border:0;color:var(--ink);cursor:pointer;transform:translate(var(--paper-x,0px),var(--paper-y,0px)) rotate(var(--paper-angle,0deg));background:#f6eed9 url('assets/paper-magnific-v1.png') 50% 54%/118% 163%;filter:drop-shadow(0 16px 16px #30281844);clip-path:polygon(1% 3%,8% 1%,18% 2%,34% 0,49% 2%,65% 1%,84% 3%,99% 1%,100% 96%,90% 99%,72% 98%,53% 100%,30% 98%,13% 100%,0 96%)}.note[hidden]{display:none}#phrase{display:block;font:42px/1.2 'Caveat',cursive;text-wrap:balance;overflow-wrap:break-word}.note.antique{color:#53402c}.note.antique #phrase{font:48px/1.15 'Pinyon Script',cursive}.note.ink #phrase{font:34px/1.3 'Nothing You Could Do',cursive;color:#293c69}.note.loud #phrase{font:38px/1.2 'Permanent Marker',cursive;color:#822b21}.note.gothic #phrase{font:44px/1.2 'UnifrakturMaguntia',serif}.has-drawn .jar-image{opacity:.88}.severity-control{width:min(400px,92%);padding:6px 0 0}.severity-control input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}.severity-control input::-webkit-slider-runnable-track{height:3px;background:#b9ac97;border-radius:2px}.severity-control input::-moz-range-track{height:3px;background:#b9ac97;border-radius:2px}.severity-control input::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;background:var(--ink);border:3px solid var(--paper);border-radius:50%;margin-top:-8px;box-shadow:0 0 0 1px #867763}.severity-control input::-moz-range-thumb{width:13px;height:13px;background:var(--ink);border:3px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px #867763}.range-labels{display:flex;justify-content:space-between;font:19px 'Caveat',cursive;color:#8b8070;margin-top:3px;gap:8px}.range-labels span{white-space:nowrap}.range-labels .selected{color:var(--red)}button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.drawing{animation:unfold .5s ease-out}.shake{animation:shake .4s ease}@keyframes unfold{0%{opacity:0;transform:translate(var(--paper-x),-90px) rotate(calc(var(--paper-angle) + 12deg)) scale(.2)}60%{opacity:1;transform:translate(var(--paper-x),calc(var(--paper-y) - 8px)) rotate(calc(var(--paper-angle) - 3deg)) scale(1.02)}100%{transform:translate(var(--paper-x),var(--paper-y)) rotate(var(--paper-angle))}}@keyframes shake{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}@media(max-width:600px){.jar-stage{height:min(60svh,470px)}.note{padding:24px 20px;min-height:130px}#phrase{font-size:32px}.note.antique #phrase{font-size:38px}.note.ink #phrase{font-size:25px}.note.loud #phrase{font-size:28px}.note.gothic #phrase{font-size:34px}.range-labels{font-size:17px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.jar-button{position:absolute;inset:0;margin:auto;width:auto;min-width:0;min-height:0;height:100%;max-height:100%;aspect-ratio:3/4}.jar-image{position:absolute;inset:0;max-height:100%}

.jar-image{mask-image:none;mix-blend-mode:normal}.jar-button{transform-origin:50% 88%}
/* A forceful jar rattle with a short settling recoil. */
.jar-button.shake{animation:shake .58s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(-13px,-6px) rotate(-12deg)}25%{transform:translate(15px,2px) rotate(14deg)}38%{transform:translate(-12px,-9px) rotate(-11deg)}51%{transform:translate(11px,-2px) rotate(10deg)}64%{transform:translate(-8px,-4px) rotate(-7deg)}77%{transform:translate(5px,0) rotate(5deg)}89%{transform:translate(-2px,-1px) rotate(-2deg)}}