/* Praffi pops out of the portfolio's notebook. */
.ps-root{--ps-ink:#171817;--ps-paper:#f8f3e6;--ps-blue:#233b9e;--ps-orange:#ef7147;font-family:'DM Sans',sans-serif}
.ps-root [hidden]{display:none!important}
.ps-launch{position:fixed;right:24px;bottom:112px;z-index:40;border:3px solid var(--ps-ink);background:#f4d35e;color:var(--ps-ink);border-radius:2px;box-shadow:6px 7px 0 var(--ps-ink);padding:8px 16px 8px 5px;display:flex;align-items:center;gap:5px;min-height:76px;cursor:pointer;transform:rotate(-3deg);transition:transform .25s cubic-bezier(.2,1.3,.3,1),box-shadow .25s,translate .25s;animation:ps-peek .65s 1.5s both cubic-bezier(.2,1.3,.3,1)}
.ps-launch:hover{transform:rotate(2deg);translate:0 -5px;box-shadow:8px 11px 0 var(--ps-ink)}.ps-launch:active{translate:0 1px;box-shadow:3px 4px 0 var(--ps-ink)}.ps-launch:focus-visible,.ps-panel button:focus-visible,.ps-panel textarea:focus-visible,.ps-panel a:focus-visible{outline:3px solid #233b9e;outline-offset:3px}
.ps-launch img{width:75px;height:70px;object-fit:contain;filter:drop-shadow(1px 2px 0 #15151544);transform:rotate(-10deg);transition:transform .25s}.ps-launch:hover img{transform:rotate(10deg) scale(1.1)}
.ps-launch-copy{text-align:left;line-height:1.1}.ps-launch-copy b{display:block;font:23px/.9 'Archivo Black',sans-serif;letter-spacing:-.065em}.ps-period{color:#b52f28}.ps-launch-copy small{display:block;font:11px 'Permanent Marker',cursive;margin-top:7px;white-space:nowrap}.ps-launch-spark{position:absolute;right:-13px;top:-16px;background:var(--ps-orange);color:white;border:2px solid var(--ps-ink);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font:18px 'Permanent Marker',cursive;transform:rotate(15deg)}
.ps-backdrop{position:fixed;inset:0;background:#0d14246b;z-index:41;backdrop-filter:blur(3px);animation:ps-fade .24s ease both}
.ps-panel{position:fixed;z-index:42;right:23px;bottom:22px;width:min(440px,calc(100vw - 32px));height:min(680px,calc(100dvh - 44px));display:flex;flex-direction:column;background:var(--ps-paper);color:var(--ps-ink);border:3px solid var(--ps-ink);box-shadow:12px 13px 0 var(--ps-ink);transform:rotate(-1deg);animation:ps-unfold .38s cubic-bezier(.2,.85,.2,1) both;isolation:isolate}
.ps-panel:before{content:'';pointer-events:none;position:absolute;inset:0;background-image:linear-gradient(#27314112 1px,transparent 1px);background-size:100% 27px;opacity:.5;z-index:-1}
.ps-panel:after{content:'';pointer-events:none;position:absolute;left:34px;top:0;bottom:0;border-left:2px solid #dd755a77;z-index:-1}
.ps-rings{position:absolute;left:-13px;top:50px;bottom:60px;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}.ps-rings i{display:block;width:25px;height:13px;border:3px solid var(--ps-ink);border-radius:50%;background:#adb6bb;transform:rotate(-18deg);box-shadow:2px 2px 0 #0005}
.ps-head{flex:none;display:flex;gap:10px;align-items:center;padding:16px 17px 12px 46px;background:#f4d35e;border-bottom:3px solid var(--ps-ink);transform:rotate(1deg);margin:-3px -3px 0 -3px;min-height:90px}
.ps-head img{width:62px;height:62px;object-fit:contain;transform:rotate(9deg);filter:drop-shadow(2px 2px 0 #17181744)}.ps-head-title{min-width:0;flex:1}.ps-head h2{font:26px/.9 'Archivo Black',sans-serif;letter-spacing:-.07em;margin:0}.ps-head p{font:11px 'Permanent Marker',cursive;margin:7px 0 0}.ps-close{border:2px solid var(--ps-ink);background:#fffaf0;color:var(--ps-ink);width:37px;height:37px;font:23px/1 'DM Sans',sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--ps-ink);transition:transform .2s}.ps-close:hover{transform:rotate(8deg)}
.ps-subhead{flex:none;padding:12px 19px 10px 47px;border-bottom:1px dashed #29292390;display:flex;justify-content:space-between;gap:12px;align-items:center}.ps-subhead span{font-size:10px;line-height:1.35;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.ps-subhead b{flex:none;font:13px 'Permanent Marker',cursive;color:#b52f28;transform:rotate(5deg)}
.ps-messages{flex:1;overflow:auto;overscroll-behavior:contain;padding:18px 23px 23px 48px;scrollbar-color:#9e9b8e transparent;scrollbar-width:thin}.ps-messages:focus{outline:none}
.ps-intro{position:relative;background:#fffdf5;border:2px solid var(--ps-ink);padding:44px 17px 17px;box-shadow:5px 5px 0 var(--ps-ink);transform:rotate(1deg);margin:45px 5px 30px 0}.ps-intro:before{content:'';position:absolute;width:55px;height:15px;top:-10px;left:28px;background:#ef7147aa;transform:rotate(-9deg)}.ps-intro-praffi{position:absolute;width:115px;height:128px;object-fit:contain;right:12px;top:-82px;transform:rotate(7deg);filter:drop-shadow(3px 3px 0 #17181755);animation:ps-character-hello .6s .25s both cubic-bezier(.2,1.3,.3,1)}.ps-intro strong{display:block;font:20px 'Permanent Marker',cursive;margin-bottom:7px}.ps-intro p{font-size:13px;line-height:1.5;margin:0}.ps-intro small{display:block;margin-top:10px;color:#555;font-size:11px;line-height:1.4}
.ps-prompts{display:grid;gap:10px;margin-bottom:20px}.ps-prompts-label{font:12px 'Permanent Marker',cursive;color:#b52f28;transform:rotate(-2deg);margin:0 0 3px}.ps-prompt{font:700 13px/1.3 'DM Sans',sans-serif;text-align:left;cursor:pointer;border:2px solid var(--ps-ink);color:var(--ps-ink);padding:10px 12px;background:#dce4d4;box-shadow:3px 3px 0 var(--ps-ink);transition:transform .2s,background .2s,box-shadow .2s}.ps-prompt:nth-child(3){background:#d8dff8;transform:rotate(1deg)}.ps-prompt:nth-child(4){background:#f4cbb3;transform:rotate(-1deg)}.ps-prompt:hover{background:#f4d35e;transform:translateY(-3px) rotate(0);box-shadow:4px 6px 0 var(--ps-ink)}.ps-prompt:disabled{opacity:.5;cursor:default}
.ps-note{position:relative;max-width:94%;margin:0 0 28px;animation:ps-note-in .32s ease both}.ps-note-user{margin-left:auto;background:#f4d35e;border:2px solid var(--ps-ink);box-shadow:4px 4px 0 var(--ps-ink);padding:11px 13px;transform:rotate(1deg)}.ps-note-assistant{background:#fffdf6;border:2px solid var(--ps-ink);box-shadow:4px 4px 0 var(--ps-ink);padding:13px 58px 13px 14px;transform:rotate(-1deg)}.ps-note-error{background:#f8d9c7}.ps-note-label{display:block;font:10px 'Permanent Marker',cursive;color:#b52f28;margin-bottom:6px}.ps-note p{font-size:13px;line-height:1.55;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.ps-note-doodle{position:absolute;width:56px;height:60px;object-fit:contain;right:-5px;bottom:-20px;transform:rotate(9deg);filter:drop-shadow(2px 3px 0 #1115)}.ps-note-link{display:inline-block;margin-top:13px;font:700 10px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ps-blue);text-decoration:none;border-bottom:2px solid currentColor}.ps-note-link:hover{color:#b52f28}.ps-waiting{font:12px 'Permanent Marker',cursive}.ps-waiting span{display:inline-block;animation:ps-dot 1s infinite alternate}.ps-waiting span:nth-child(2){animation-delay:.2s}.ps-waiting span:nth-child(3){animation-delay:.4s}
.ps-form{flex:none;border-top:3px solid var(--ps-ink);background:#f0c6a4;padding:12px 15px 15px 42px;display:flex;align-items:end;gap:9px;transform:rotate(1deg);margin:0 -3px -3px -3px}.ps-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ps-form textarea{resize:none;min-width:0;flex:1;height:48px;max-height:105px;border:2px solid var(--ps-ink);border-radius:0;background:#fffdf6;color:var(--ps-ink);font:13px/1.4 'DM Sans',sans-serif;padding:11px;box-shadow:3px 3px 0 var(--ps-ink)}.ps-form textarea::placeholder{color:#6d6a63}.ps-send{height:48px;min-width:60px;border:2px solid var(--ps-ink);background:var(--ps-blue);color:white;font:700 11px 'DM Sans',sans-serif;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ps-ink);transition:transform .2s,background .2s}.ps-send:hover{transform:translateY(-3px);background:#152f93}.ps-send:disabled{opacity:.5;cursor:wait;transform:none}
@keyframes ps-peek{from{opacity:0;translate:0 30px;rotate:12deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes ps-character-hello{from{opacity:0;translate:0 32px;rotate:-15deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes ps-fade{from{opacity:0}to{opacity:1}}@keyframes ps-unfold{from{opacity:0;translate:18px 35px;scale:.92;rotate:4deg}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}@keyframes ps-note-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes ps-dot{to{opacity:.2;translate:0 -3px}}
@media(max-width:600px){.ps-launch{right:18px;bottom:96px;min-height:62px;padding:5px 12px 5px 4px}.ps-launch img{width:60px;height:59px}.ps-launch-copy b{font-size:20px}.ps-launch-copy small{font-size:10px}.ps-panel{right:0;bottom:0;width:100%;height:min(760px,88dvh);max-height:88dvh;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -9px 0 var(--ps-ink);transform:none;animation:ps-unfold-mobile .35s cubic-bezier(.2,.85,.2,1) both}.ps-head,.ps-form{transform:none}.ps-head{min-height:78px}.ps-rings{display:none}.ps-panel:after{left:32px}.ps-messages{padding-left:45px}.ps-form{padding-left:40px}@keyframes ps-unfold-mobile{from{opacity:0;translate:0 50px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){.ps-root *, .ps-root *:before,.ps-root *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The supplied Praffi pose sheets become little ink-edged stickers on the paper UI. */
.ps-character{display:block;flex:none;background-repeat:no-repeat;background-color:transparent;filter:drop-shadow(1px 0 0 #fffdf5) drop-shadow(-1px 0 0 #fffdf5) drop-shadow(0 2px 0 #fffdf5) drop-shadow(2px 3px 0 #171817);will-change:background-position}
.ps-character-wave{background-image:url('/doodles/praffi-wave-sheet.png');background-size:400% 100%;background-position:33.333% 50%}
.ps-character-thinking{background-image:url('/doodles/praffi-work-sheet.png');background-size:600% 100%;background-position:20% 50%}
.ps-character-reply{background-image:url('/doodles/praffi-work-sheet.png');background-size:600% 100%;background-position:40% 50%}
.ps-character-oops{background-image:url('/doodles/praffi-reactions-sheet.png');background-size:800% 100%;background-position:57.143% 50%}
.ps-launch-character{width:78px;height:100px;margin:-22px -5px -14px -4px;transform:rotate(-8deg);transition:transform .25s cubic-bezier(.2,1.3,.3,1)}
.ps-launch:hover .ps-launch-character{animation:ps-wave .8s steps(1,end) 1;transform:rotate(5deg) translateY(-3px)}
.ps-head-character{width:51px;height:68px;margin:-9px 2px -5px 0;transform:rotate(7deg)}
.ps-intro{padding:17px 17px 18px;margin-top:4px;min-height:165px}
.ps-intro-praffi{position:relative;float:right;width:106px;height:142px;top:auto;right:auto;margin:-8px -8px 5px 9px;animation:ps-character-hello .6s .25s both cubic-bezier(.2,1.3,.3,1),ps-wave .8s 1s steps(1,end) 1}
.ps-note-doodle{width:53px;height:71px;right:-8px;bottom:-21px;transform:rotate(9deg)}
.ps-note-assistant{padding-right:44px}
.ps-note-error{padding:13px 44px 13px 14px;border:2px solid var(--ps-ink);box-shadow:4px 4px 0 var(--ps-ink)}
@keyframes ps-wave{0%,100%{background-position:0 50%}30%{background-position:33.333% 50%}60%{background-position:66.666% 50%}80%{background-position:100% 50%}}
@media(max-width:600px){.ps-launch-character{width:64px;height:86px;margin:-18px -5px -12px -4px}.ps-intro-praffi{width:86px;height:116px}.ps-intro{padding:17px;margin-top:4px}}

/* The tiny cast: each notebook beat gets a pose from the supplied sheet. */
.ps-character-warm,.ps-character-cheer,.ps-character-wink{background-image:url('/doodles/praffi-work-sheet.png');background-size:600% 100%}
.ps-character-warm{background-position:0 50%}.ps-character-cheer{background-position:60% 50%}.ps-character-wink{background-position:80% 50%}
.ps-head-character{transition:translate .25s ease,rotate .25s ease}
.ps-head-character.ps-character-thinking{rotate:-8deg;translate:0 2px}
.ps-head-character.ps-character-cheer{rotate:8deg;translate:0 -4px}
.ps-head-character.ps-character-oops{rotate:-10deg;translate:0 4px}
.ps-note-doodle.ps-character-cheer,.ps-note-doodle.ps-character-wink{animation:ps-sticker-pop .45s cubic-bezier(.2,1.3,.3,1) both}
.ps-waiting + .ps-character-thinking{animation:ps-think 1.8s ease-in-out infinite}
.ps-note-assistant:before{content:'';position:absolute;top:-9px;left:20px;width:40px;height:12px;background:#e9bb6d99;rotate:-8deg;pointer-events:none}
.ps-turn{display:flex;flex-wrap:wrap;gap:7px 8px;align-items:center;margin:-4px 0 27px 7px;animation:ps-note-in .32s .14s both}
.ps-turn-label{width:100%;color:#a7352c;font:11px 'Permanent Marker',cursive;rotate:-2deg;margin:0 0 3px 2px}
.ps-turn-button{border:2px solid #34456a;background:#eef0df;color:#253355;padding:8px 10px;font:700 11px/1.3 'DM Sans',sans-serif;text-align:left;cursor:pointer;box-shadow:2px 2px 0 #34456a;transition:background .2s,translate .2s,rotate .2s}
.ps-turn-button:nth-child(3){background:#e9e2f0;rotate:1deg}
.ps-turn-button:hover{background:#f4d35e;translate:0 -2px;rotate:-1deg}
.ps-turn-button:disabled{opacity:.55;cursor:default;translate:none}
.ps-turn-button:focus-visible{outline:3px solid var(--ps-blue);outline-offset:3px}
@keyframes ps-think{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:4deg}}
@keyframes ps-sticker-pop{from{opacity:0;scale:.65;rotate:-12deg}to{opacity:1;scale:1;rotate:0deg}}
@media(max-width:600px){.ps-turn{margin-left:0}.ps-turn-button{max-width:100%}}
@media(prefers-reduced-motion:reduce){.ps-head-character,.ps-turn-button{transition:none}.ps-turn{animation:none}}