/* Preserved interactive character styles from the Mitdenker archive. */
/* The personal Mitdenker uses Lauritz's portrait, with live eyes and reactions. */
.lauritz-companion{width:230px;height:230px;position:relative;perspective:700px}
.lauritz-portrait{position:relative;width:100%;height:100%;transform:rotateY(var(--tilt,0deg));transition:transform .55s ease-out}
.lauritz-portrait img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(5px 9px 8px rgba(4,20,29,.2))}
.lauritz-eye{position:absolute;top:29.6%;width:7.5%;height:3.4%;padding:0;border:0;border-radius:55% 55% 45% 45%;background:radial-gradient(ellipse,#ece8dd 30%,#c6bcb0 100%);overflow:hidden;cursor:pointer;animation:lauritz-blink 14s infinite;transform-origin:center}
.lauritz-eye-left{left:37.7%;transform:rotate(-2deg)}
.lauritz-eye-right{left:56%;top:30.1%;transform:rotate(5deg)}
.lauritz-eye i{position:absolute;left:28%;top:-3%;width:47%;height:106%;border-radius:50%;background:radial-gradient(circle at 45% 45%,#0d2025 0 27%,#617b81 30% 55%,#405961 65%,#2b4147 90%);transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .15s ease-out}
.lauritz-eye i:after{content:"";position:absolute;left:25%;top:14%;width:22%;height:22%;border-radius:50%;background:#eef4ed}
.lauritz-nose{position:absolute;left:46%;top:36%;width:13%;height:10%;border:0;background:transparent;border-radius:50%;cursor:pointer}
.lauritz-comment{position:absolute;right:5%;bottom:93%;width:230px;padding:12px 14px;border:1px solid #88afa4;border-radius:12px 12px 2px 12px;background:#e3ebe0;color:#24464b;font-size:13px;line-height:1.5;box-shadow:0 5px 16px rgba(4,20,29,.15);pointer-events:none}
.lauritz-comment:empty{display:none}
.is-winking .lauritz-eye-right{animation:none;transform:scaleY(.12)}
.is-thinking .lauritz-portrait{animation:lauritz-nod .7s ease-in-out 2}
.is-chuckling .lauritz-portrait{animation:lauritz-laugh .2s ease-in-out 6 alternate}
.is-surprised .lauritz-portrait{transform:translateY(-5px) rotateZ(-4deg)}
@keyframes lauritz-blink{0%,46%,48%,100%{scale:1 1}47%{scale:1 .1}}
@keyframes lauritz-nod{0%,100%{transform:rotateZ(0)}50%{transform:translateY(4px) rotateZ(5deg)}}
@keyframes lauritz-laugh{from{transform:translateY(0) rotateZ(-2deg)}to{transform:translateY(-3px) rotateZ(2deg)}}
@media(max-width:980px){.lauritz-companion{width:190px;height:190px}}
@media(max-width:680px){.lauritz-companion{width:200px;height:200px}.lauritz-comment{width:200px;bottom:85%;right:0}}
@media(prefers-reduced-motion:reduce){.lauritz-eye,.lauritz-companion .lauritz-portrait{animation:none;transform:none;transition:none}}

/* Cartoon proportions with eyes matched to the new character. */
.lauritz-eye{width:10.3%;height:6.4%;top:35%;background:radial-gradient(ellipse at 45% 45%,#f4eedb 30%,#d8c8af 100%);border-radius:55% 55% 30% 30%;animation:none}
.lauritz-eye-left{left:36.2%;transform:rotate(-6deg)}
.lauritz-eye-right{left:58.5%;top:32.9%;width:9.4%;transform:rotate(7deg)}
.lauritz-eye i{width:54%;height:98%;left:22%;top:0}
.lauritz-eye:after{content:"";position:absolute;inset:-1px;background:linear-gradient(#e8a77e,#d7936c);border-bottom:1px solid #a77457;transform:scaleY(0);transform-origin:top;animation:lauritz-lid 14s infinite;pointer-events:none}
.is-winking .lauritz-eye-right{transform:rotate(7deg)}
.is-winking .lauritz-eye-right:after{animation:none;transform:scaleY(1)}
.lauritz-nose{left:46%;top:40%;width:15%;height:12%}
@keyframes lauritz-lid{0%,46%,48%,100%{transform:scaleY(0)}47%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.lauritz-eye:after{animation:none}}

/* Keep the personal easter egg within the site's restrained material palette. */
.lauritz-companion{width:200px;height:200px;opacity:.88}
.lauritz-portrait{filter:grayscale(1) sepia(.35) hue-rotate(105deg) saturate(.55);opacity:.9}
.lauritz-portrait img{filter:drop-shadow(3px 6px 6px rgba(4,20,29,.16)) brightness(.9)}
.lauritz-comment{background:#d8e5dc;border-color:#789e94;color:#28484c}
@media(max-width:980px){.lauritz-companion{width:175px;height:175px}}
@media(max-width:680px){.lauritz-companion{width:175px;height:175px}}

/* Return to the original abstract petrol character, with subtle personal cues. */
.cube-lauritz{width:210px;height:180px;opacity:1}
.cube-lauritz .lauritz-portrait{position:absolute;left:20px;top:12px;width:150px;height:142px;filter:none;opacity:1;transform:rotateY(var(--tilt,0deg)) rotateZ(-6deg);border-radius:39px 42px 35px 38px;background:linear-gradient(135deg,#abd2c2 0%,#72ac9f 20%,#39786f 49%,#24555c 76%,#153943 100%);box-shadow:inset 3px 4px 8px rgba(229,247,233,.45),inset -9px -12px 20px rgba(4,28,37,.38),10px 15px 24px rgba(4,20,29,.22)}
.cube-lauritz .lauritz-portrait:before{content:"";position:absolute;left:14px;top:10px;width:98px;height:32px;border-radius:50%;background:linear-gradient(145deg,rgba(231,247,232,.2),transparent);transform:rotate(-16deg)}
.cube-face{position:absolute;inset:0;transform:rotate(6deg)}
.cube-lauritz .lauritz-eye{top:53px;width:30px;height:33px;border-radius:50%;background:linear-gradient(135deg,#e0e9d8,#b6cdbd);transform:none}
.cube-lauritz .lauritz-eye-left{left:35px}.cube-lauritz .lauritz-eye-right{left:84px}
.cube-lauritz .lauritz-eye i{width:13px;height:16px;left:9px;top:9px;background:radial-gradient(circle,#132f36 0 40%,#587e77 45% 75%,#294d4c 80%)}
.cube-lauritz .lauritz-eye:after{background:linear-gradient(#6da395,#4d8b7f);border-color:#416f68}
.cube-glasses{position:absolute;left:27px;top:47px;width:95px;height:43px;pointer-events:none;z-index:2}
.cube-glasses:before,.cube-glasses:after{content:"";position:absolute;top:0;width:40px;height:40px;border:2.5px solid #24454a;border-radius:50%;box-shadow:0 1px 2px rgba(3,25,29,.15)}
.cube-glasses:before{left:0}.cube-glasses:after{right:0}
.cube-brow{position:absolute;top:61px;left:69px;width:12px;height:3px;background:#24454a;z-index:3;pointer-events:none}
.cube-beard{position:absolute;left:32px;top:85px;width:86px;height:37px;border-radius:10px 10px 40px 40px;background:linear-gradient(140deg,rgba(35,65,65,.65),rgba(21,47,53,.8));pointer-events:none}
.cube-beard:before{content:"";position:absolute;left:15px;right:15px;top:0;height:20px;border-radius:0 0 50% 50%;background:#4f8b7f}
.cube-lauritz .lauritz-nose{left:67px;top:80px;width:16px;height:15px;background:linear-gradient(135deg,#82b5a2,#40796c);box-shadow:1px 2px 3px rgba(9,36,40,.2);z-index:4}
.cube-smile{position:absolute;left:64px;top:99px;width:22px;height:7px;border-bottom:2px solid #23484a;border-radius:0 0 50% 50%;transform:rotate(-8deg);pointer-events:none}
.cube-lauritz .companion-shadow{left:20px;bottom:7px;width:160px}
.cube-lauritz .lauritz-comment{bottom:96%;right:0}
.cube-lauritz.is-winking .lauritz-eye-right{transform:none}
@media(max-width:980px){.cube-lauritz{width:190px;height:180px}}
@media(prefers-reduced-motion:reduce){.cube-lauritz .lauritz-portrait{transform:rotateZ(-6deg)}}

/* A tiny independent helper: soft, curious and quietly playful. */
.little-helper .lauritz-portrait{width:140px;height:132px;left:24px;top:15px;border-radius:43px 48px 40px 44px;transform:rotateY(var(--tilt,0deg)) rotateZ(-9deg)}
.little-helper .lauritz-eye{top:48px;width:32px;height:37px;background:linear-gradient(135deg,#e8efdf,#bed3c4);box-shadow:inset 1px 2px 3px rgba(25,58,57,.14)}
.little-helper .lauritz-eye-left{left:29px}
.little-helper .lauritz-eye-right{left:80px;top:44px;width:29px;height:34px}
.little-helper .lauritz-eye i{width:13px;height:16px;left:10px;top:10px;background:#20464a;box-shadow:inset -2px -2px 2px #102d34}
.little-helper .lauritz-eye-right i{left:8px;top:9px}
.little-helper .lauritz-nose{left:63px;top:79px;width:13px;height:12px;background:linear-gradient(135deg,#8bbda9,#4b8376)}
.little-helper .cube-smile{left:57px;top:97px;width:23px;height:8px;transform:rotate(-12deg)}
.little-helper .cube-face:before,.little-helper .cube-face:after{content:"";position:absolute;top:87px;width:12px;height:5px;border-radius:50%;background:rgba(168,204,179,.2)}
.little-helper .cube-face:before{left:23px}.little-helper .cube-face:after{right:21px}
.little-helper.is-surprised .cube-smile{left:63px;width:9px;height:10px;border:2px solid #254a4b;border-radius:50%}
.little-helper.is-thinking .cube-smile{transform:rotate(9deg)}
@media(prefers-reduced-motion:reduce){.little-helper .lauritz-portrait{transform:rotateZ(-9deg)}}

/* Gentle clumsiness: uneven eyes, a crooked smile, elastic direct manipulation. */
.little-helper .lauritz-portrait{border-radius:48px 39px 46px 35px;cursor:grab;user-select:none;transform:translate(var(--pull-x,0px),var(--pull-y,0px)) rotateY(var(--tilt,0deg)) rotateZ(calc(-9deg + var(--pull-turn,0deg))) scale(var(--stretch-x,1),var(--stretch-y,1));transition:transform .7s cubic-bezier(.22,1.4,.4,1)}
.little-helper .lauritz-eye-left{width:35px;height:39px;left:26px;top:49px}
.little-helper .lauritz-eye-right{width:27px;height:31px;left:82px;top:43px}
.little-helper .cube-smile{left:56px;top:96px;width:25px;height:10px;transform:rotate(-17deg)}
.little-helper.is-dragging .lauritz-portrait{transition:none;animation:none;cursor:grabbing}
.little-helper.is-dragging .cube-smile{width:11px;height:12px;left:63px;border:2px solid #254a4b;border-radius:50%}
.little-helper.is-squashed .lauritz-portrait{animation:helper-squash .6s ease-in-out}
.little-helper.is-dizzy .cube-face{animation:helper-wobble .8s ease-in-out}
.little-helper.is-dizzy .lauritz-eye i{transform:translate(calc(var(--look-x,0px) * -.5),0)}
.little-helper.is-chuckling .cube-smile{height:13px;width:25px;background:rgba(26,64,66,.28);border-radius:3px 3px 50% 50%}
@keyframes helper-squash{0%,100%{transform:rotateZ(-9deg) scale(1)}35%{transform:rotateZ(-4deg) scale(1.12,.88)}65%{transform:rotateZ(-12deg) scale(.97,1.04)}}
@keyframes helper-wobble{0%,100%{transform:rotate(6deg)}20%{transform:rotate(-8deg)}45%{transform:rotate(12deg)}70%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.little-helper .lauritz-portrait,.little-helper.is-squashed .lauritz-portrait,.little-helper.is-dizzy .cube-face{animation:none;transition:none;transform:none}.little-helper.is-squashed .lauritz-eye{opacity:.7}}

/* Big curious eyes and a small happy response to the service links. */
.little-helper .lauritz-eye{overflow:visible;box-shadow:inset 2px 3px 4px rgba(255,255,240,.6),inset -3px -4px 5px rgba(68,106,92,.2),2px 4px 5px rgba(4,28,33,.28);border:1px solid rgba(213,235,214,.4);background:radial-gradient(ellipse at 35% 25%,#f0f4e3,#d8e5cc 60%,#b1c7ac);z-index:2}
.little-helper .lauritz-eye-left{width:43px;height:47px;left:21px;top:42px;transform:rotate(-7deg)}
.little-helper .lauritz-eye-right{width:38px;height:42px;left:80px;top:38px;transform:rotate(8deg)}
.little-helper .lauritz-eye i{left:14px;top:17px;width:14px;height:18px;border:1px solid #294b4d}
.little-helper .lauritz-eye-right i{left:12px;top:14px}
.little-helper .lauritz-eye:after{border-radius:50%;inset:-1px}
.little-helper .lauritz-nose{left:63px;top:86px;width:15px;height:13px}
.little-helper .cube-smile{left:57px;top:104px;width:25px;height:8px;transform:rotate(-15deg)}
.little-helper.is-happy .cube-smile{left:52px;top:99px;width:34px;height:16px;border:0;border-radius:4px 4px 50% 50%;background:#2a5152;transform:rotate(-8deg);box-shadow:inset 0 -4px 0 rgba(122,169,145,.45)}
.little-helper.is-happy .lauritz-portrait{animation:helper-happy-hop .7s ease-out}
.little-helper.is-happy .cube-face:before,.little-helper.is-happy .cube-face:after{background:rgba(187,215,166,.36)}
@keyframes helper-happy-hop{0%,100%{transform:rotateZ(-9deg)}25%{transform:translateY(-9px) rotateZ(-3deg)}50%{transform:translateY(0) rotateZ(-11deg) scale(1.03,.97)}75%{transform:translateY(-3px) rotateZ(-7deg)}}
@media(prefers-reduced-motion:reduce){.little-helper.is-happy .lauritz-portrait{animation:none}}

/* An endearing lopsided face, with a quiet doze after inactivity. */
.little-helper .lauritz-portrait{border-radius:53px 36px 49px 33px}
.little-helper .lauritz-eye-left{width:48px;height:52px;left:16px;top:38px;transform:rotate(-11deg)}
.little-helper .lauritz-eye-right{width:42px;height:46px;left:81px;top:33px;transform:rotate(12deg)}
.little-helper .lauritz-eye i{left:16px;top:19px;width:15px;height:20px}
.little-helper .lauritz-eye-right i{left:13px;top:16px}
.little-helper .cube-smile{left:53px;top:103px;width:29px;height:9px;transform:rotate(-18deg)}
.helper-sleep-bubble{display:none;position:absolute;left:80px;top:105px;width:12px;height:14px;border-radius:50%;border:1px solid rgba(189,221,208,.6);background:rgba(133,189,177,.12);pointer-events:none}
.little-helper.is-sleeping .lauritz-eye:after{animation:none;transform:scaleY(1)}
.little-helper.is-sleeping .lauritz-portrait{transform:rotateZ(-17deg) translateY(4px);animation:helper-breathe 5s ease-in-out infinite}
.little-helper.is-sleeping .cube-smile{left:64px;width:9px;height:10px;border:1px solid #285051;border-radius:50%;transform:none}
.little-helper.is-sleeping .helper-sleep-bubble{display:block;animation:helper-sleep-puff 5s ease-in-out infinite}
@keyframes helper-breathe{0%,100%{transform:rotateZ(-17deg) translateY(4px) scale(1)}50%{transform:rotateZ(-17deg) translateY(3px) scale(1.015)}}
@keyframes helper-sleep-puff{0%,100%{transform:scale(.75);opacity:.35}50%{transform:scale(1.15);opacity:.7}}
@media(prefers-reduced-motion:reduce){.little-helper.is-sleeping .lauritz-portrait,.little-helper.is-sleeping .helper-sleep-bubble{animation:none;transform:none}}
.little-helper.is-sleeping .lauritz-eye:after{background:linear-gradient(to bottom,#6da395 0%,#639788 55%,#426f67 57%,#426f67 60%,#568a7d 62%,#4d8b7f 100%)}

/* An original little snack monster in the site's petrol palette. */
.snack-monster .lauritz-portrait{height:126px;width:146px;border-radius:54% 49% 40% 43%;top:24px;left:22px}
.monster-antenna{position:absolute;left:69px;top:-19px;width:10px;height:25px;border-radius:70% 50% 0 0;background:linear-gradient(90deg,#60998a,#92bfa7);transform:rotate(14deg)}
.monster-antenna:after{content:"";position:absolute;left:-4px;top:-4px;width:18px;height:12px;border-radius:50%;background:#89b79f;box-shadow:inset 1px 2px 3px rgba(211,233,199,.35)}
.monster-foot{position:absolute;bottom:-10px;width:36px;height:30px;border-radius:35% 35% 50% 50%;background:linear-gradient(135deg,#689d89,#376c63);box-shadow:inset 2px 2px 3px rgba(173,209,179,.2),2px 4px 5px rgba(5,28,32,.2)}
.monster-foot-left{left:17px;transform:rotate(12deg)}.monster-foot-right{right:16px;transform:rotate(-12deg)}
.snack-monster .lauritz-eye-left{width:54px;height:58px;left:15px;top:22px}.snack-monster .lauritz-eye-right{width:50px;height:55px;left:78px;top:19px}
.snack-monster .lauritz-eye i{width:16px;height:23px;left:19px;top:20px}.snack-monster .lauritz-eye-right i{left:17px;top:19px}
.snack-monster .lauritz-nose{top:77px;left:65px;width:12px;height:9px}
.snack-monster .cube-smile{left:37px;top:88px;width:76px;height:23px;border:0;border-radius:8px 8px 50% 50%;background:#20484b;transform:rotate(-5deg);overflow:hidden}
.snack-monster .cube-smile i{position:absolute;top:0;width:10px;height:9px;border-radius:0 0 4px 4px;background:#dce7cf}
.snack-monster .cube-smile i:first-child{left:12px}.snack-monster .cube-smile i:last-child{right:12px}
.snack-monster.is-happy .cube-smile{left:34px;top:86px;width:82px;height:27px;background:#20484b}
.snack-monster.is-sleeping .cube-smile{left:65px;top:96px;width:10px;height:10px}.snack-monster.is-sleeping .cube-smile i{display:none}
.monster-snack{position:absolute;right:0;bottom:18px;width:33px;height:33px;border:1px solid #97b5a4;border-radius:10px;background:linear-gradient(135deg,#d6d7b7,#a3b79c);color:#416a62;box-shadow:inset 1px 2px 3px rgba(243,246,218,.4),2px 4px 7px rgba(6,28,34,.2);cursor:grab;padding:0;transform:translate(var(--snack-x,0px),var(--snack-y,0px));touch-action:none;font-size:20px}
.monster-snack.is-held{cursor:grabbing;z-index:8;transition:none}.monster-snack.is-gone{opacity:0;pointer-events:none;transition:opacity .15s}
.snack-monster.is-hungry .cube-smile,.snack-monster.is-eating .cube-smile{top:81px;left:38px;width:76px;height:35px;border-radius:40% 40% 50% 50%}
.snack-monster.is-eating .cube-smile{animation:monster-chomp .22s ease-in-out 5 alternate}
.snack-monster.is-eating .monster-foot-left{animation:monster-foot-tap .22s ease-in-out 5 alternate}
.snack-monster.is-satisfied .cube-smile{height:14px;top:92px}
@keyframes monster-chomp{from{height:32px;transform:rotate(-5deg)}to{height:8px;transform:rotate(3deg)}}
@keyframes monster-foot-tap{from{transform:rotate(12deg)}to{transform:translateY(-3px) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.snack-monster.is-eating .cube-smile,.snack-monster.is-eating .monster-foot-left{animation:none}}

/* Sculpted petrol creature, with live eyes and an expressive snack mouth. */
.detailed-monster{width:230px;height:210px}
.detailed-monster .lauritz-portrait{left:0;top:0;width:210px;height:210px;background:none;border:0;box-shadow:none;border-radius:0;transform:translate(var(--pull-x,0px),var(--pull-y,0px)) rotateY(var(--tilt,0deg)) rotateZ(var(--pull-turn,0deg)) scale(var(--stretch-x,1),var(--stretch-y,1));touch-action:pan-y}
.detailed-monster .monster-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.detailed-monster .lauritz-portrait:before,.detailed-monster .lauritz-portrait:after,.detailed-monster .cube-face:before,.detailed-monster .cube-face:after{display:none}
.detailed-monster .cube-face{inset:0;transform:none}
.detailed-monster .lauritz-eye{overflow:hidden;border:0;box-shadow:inset -2px -2px 3px rgba(39,67,57,.18);background:radial-gradient(ellipse at 38% 30%,#f4f2df,#e5e6d0 75%,#ccd3bd);border-radius:50%;transform:none}
.detailed-monster .lauritz-eye-left{left:27.3%;top:29.8%;width:16.8%;height:16.4%}
.detailed-monster .lauritz-eye-right{left:57%;top:27.7%;width:15.7%;height:15.1%}
.detailed-monster .lauritz-eye i,.detailed-monster .lauritz-eye-right i{left:31%;top:27%;width:43%;height:53%;background:radial-gradient(ellipse at 40% 25%,#23433b,#071d1c 75%);border:0;box-shadow:none}
.detailed-monster .lauritz-eye i:after{left:20%;top:13%;width:28%;height:26%;background:#f4f6e8}
.detailed-monster .lauritz-eye:after{background:linear-gradient(#679f8e,#487f71);border-color:#32665d}
.detailed-monster .lauritz-nose{left:44%;top:44%;width:15%;height:9%;background:none;border:0;box-shadow:none;opacity:0}
.detailed-monster .cube-smile{display:none}
.detailed-monster.is-hungry .cube-smile,.detailed-monster.is-eating .cube-smile,.detailed-monster.is-surprised .cube-smile{display:block;left:37%;top:46%;width:35%;height:11%;background:#193b37;border:2px solid #467e6a;border-radius:30% 30% 50% 50%;transform:rotate(-8deg);box-shadow:0 3px 0 rgba(135,172,133,.4)}
.detailed-monster .cube-smile i{width:13%;height:35%;background:#e6ebd5}
.detailed-monster.is-eating .cube-smile{animation:detailed-chomp .22s ease-in-out 5 alternate}
.detailed-monster.is-eating .monster-art{animation:detailed-munch .22s ease-in-out 5 alternate}
.detailed-monster .helper-sleep-bubble{left:65%;top:50%}
.detailed-monster .monster-snack{right:-5px;bottom:28px;border-radius:50%;width:32px;height:32px}
.detailed-monster .companion-shadow{left:34px;bottom:8px;width:150px;opacity:.25}
@keyframes detailed-chomp{from{height:12%;transform:rotate(-8deg)}to{height:3%;transform:rotate(-3deg)}}
@keyframes detailed-munch{from{transform:scale(1)}to{transform:scale(1.025,.985)}}
@media(max-width:700px){.detailed-monster{justify-self:center}}
@media(prefers-reduced-motion:reduce){.detailed-monster .lauritz-portrait,.detailed-monster .monster-art,.detailed-monster .cube-smile{animation:none!important;transform:none;transition:none}}

/* The facial rig shares the sculpture's lighting, rather than painting flat eyes over it. */
.detailed-monster .lauritz-eye{background:transparent;box-shadow:none;border:0;overflow:hidden;border-radius:50%;z-index:3}
.detailed-monster .lauritz-eye-left{left:27.3%;top:30%;width:17.5%;height:17.6%;transform:rotate(4deg)}
.detailed-monster .lauritz-eye-right{left:58.1%;top:27.8%;width:16.1%;height:15.3%;transform:rotate(-9deg)}
.detailed-monster .lauritz-eye i,.detailed-monster .lauritz-eye-right i{left:30%;top:25%;width:47%;height:54%;border:1px solid #294c43;background:radial-gradient(ellipse at 52% 48%,#061715 0 48%,#23453b 51%,#587464 67%,#1f413a 93%);box-shadow:inset 1px 1px 2px #456157,0 1px 1px rgba(49,60,39,.2);transition:transform .12s ease-out}
.detailed-monster .lauritz-eye i:after{left:55%;top:10%;width:25%;height:25%;background:#fffef1;box-shadow:-5px 9px 3px -2px rgba(255,255,239,.18)}
.detailed-monster .lauritz-eye:after{background:linear-gradient(135deg,#6f9e91,#44796e 60%,#305f59);box-shadow:inset 0 -2px 2px #244f49;border:0;transition:transform .35s;border-radius:45% 45% 50% 50%}
.detailed-monster .monster-expression{position:absolute;left:37%;top:45%;width:36%;height:10%;transform:rotate(-9deg);pointer-events:none;transition:transform .4s}
.detailed-monster .monster-mouth{position:absolute;inset:0;border-bottom:2px solid #183d38;border-radius:0 0 50% 50%;box-shadow:0 2px 1px rgba(127,174,144,.35);transition:height .35s,background .35s,border-radius .35s,transform .35s;transform-origin:center}
.detailed-monster .monster-mouth i{position:absolute;bottom:-4px;right:12%;width:12%;height:35%;border-radius:0 0 50% 50%;background:linear-gradient(135deg,#f5edcf,#b7bea1);box-shadow:0 1px 1px #1d4a41}
.detailed-monster .monster-mouth i:first-child{right:31%;bottom:-6px}.detailed-monster .monster-mouth b{display:none}
.detailed-monster.is-hungry .monster-mouth,.detailed-monster.is-happy .monster-mouth,.detailed-monster.is-satisfied .monster-mouth,.detailed-monster.is-eating .monster-mouth{height:145%;border:2px solid #315f52;border-top:2px solid #1d453c;background:radial-gradient(ellipse at 50% 90%,#647f6b 0 12%,#24483d 40%,#102c29 85%);border-radius:25% 25% 50% 50%;box-shadow:inset 0 2px 3px #0b2724,0 2px 1px #78a18b}
.detailed-monster.is-hungry .monster-mouth i,.detailed-monster.is-happy .monster-mouth i,.detailed-monster.is-satisfied .monster-mouth i,.detailed-monster.is-eating .monster-mouth i{top:0;bottom:auto;height:30%}
.detailed-monster.is-hungry .monster-mouth{transform:scaleY(calc(1 - var(--sadness,0) * .7));border-radius:25% 25% calc(50% - var(--sadness,0) * 35%) calc(50% - var(--sadness,0) * 35%)}
.detailed-monster.is-longing .monster-expression{transform:rotate(-3deg) translateY(3px)}
.detailed-monster.is-longing .lauritz-eye:after{animation:none;transform:scaleY(calc(var(--sadness,0) * .38));transform-origin:top}
.detailed-monster.is-hungry .lauritz-eye i{filter:brightness(calc(1.15 - var(--sadness,0) * .2))}
.detailed-monster.is-eating .monster-mouth{animation:rig-chew .23s ease-in-out 5 alternate}
.detailed-monster.is-eating .monster-art{animation:detailed-munch .23s ease-in-out 5 alternate}
.detailed-monster.is-satisfied .lauritz-portrait{animation:rig-celebrate 1.2s ease-in-out}
.detailed-monster.is-satisfied .lauritz-eye:after{animation:none;transform:scaleY(.22)}
.detailed-monster.is-chuckling .monster-mouth{height:135%;background:#1b3e36;border-radius:20% 20% 50% 50%}
.detailed-monster.is-surprised .monster-mouth{height:120%;width:45%;left:25%;background:#173c34;border:2px solid #42745f;border-radius:50%}
.detailed-monster.is-sleeping .monster-mouth{width:15%;height:45%;left:45%;top:50%;background:#1b4038;border:1px solid #4b7b67;border-radius:50%}
.detailed-monster.is-sleeping .monster-mouth i{display:none}
@keyframes rig-chew{0%{transform:scaleY(1)}100%{transform:scaleY(.25)}}
@keyframes rig-celebrate{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-7px) rotate(-4deg)}40%{transform:translateY(1px) scale(1.04,.96)}65%{transform:translateY(-4px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.detailed-monster .monster-mouth,.detailed-monster .lauritz-eye:after{animation:none!important;transition:none}.detailed-monster.is-satisfied .lauritz-portrait{animation:none}}
.detailed-monster.is-longing .monster-mouth{border-radius:calc(25% + var(--sadness,0) * 25%) calc(25% + var(--sadness,0) * 25%) 20% 20%;transform:translateY(calc(var(--sadness,0) * 4px)) scaleY(calc(1 - var(--sadness,0) * .65))}

/* A little folded task note echoes the notes-to-workflow illustration. */
.detailed-monster .monster-snack{width:38px;height:44px;right:-8px;bottom:22px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;filter:drop-shadow(2px 4px 3px rgba(7,28,32,.26))}
.snack-note{position:absolute;inset:2px 3px;display:block;transform:rotate(9deg);border-radius:4px 2px 5px 4px;background:linear-gradient(130deg,#e5dfc5,#cec9ab);box-shadow:inset 1px 1px 1px rgba(255,250,228,.8),inset -1px -1px 1px #a7b199;clip-path:polygon(0 0,73% 0,100% 22%,100% 100%,0 100%);transition:transform .2s ease}
.snack-note:after{content:"";position:absolute;right:0;top:0;width:9px;height:9px;background:linear-gradient(135deg,#9cac95,#f0ead4);border-radius:0 0 0 2px;box-shadow:-1px 1px 1px rgba(62,92,75,.2)}
.snack-note i{position:absolute;left:7px;top:13px;width:15px;height:2px;border-radius:1px;background:#789486;opacity:.7}
.snack-note i:nth-child(2){top:18px;width:12px}.snack-note i:nth-child(3){top:23px;width:8px}
.snack-note b{position:absolute;right:6px;bottom:6px;width:7px;height:4px;border-left:2px solid #467568;border-bottom:2px solid #467568;transform:rotate(-45deg)}
.monster-snack:hover .snack-note,.monster-snack.is-held .snack-note{transform:rotate(-5deg)}
.monster-snack:focus-visible{outline:2px solid #bed1b5;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.snack-note{transition:none}}

/* Soft body: the feet anchor a spring-driven volume, with matching contact shadow. */
.monster-filter-defs{position:absolute;overflow:hidden;pointer-events:none}
.detailed-monster .lauritz-portrait,.detailed-monster.is-sleeping .lauritz-portrait,.detailed-monster.is-happy .lauritz-portrait,.detailed-monster.is-squashed .lauritz-portrait,.detailed-monster.is-satisfied .lauritz-portrait{transform:none;animation:none;transition:none;perspective:650px;overflow:visible}
.monster-volume{position:absolute;inset:0;transform-origin:50% 93%;transform:translate3d(var(--body-x,0px),var(--body-y,0px),0) rotateX(var(--body-pitch,0deg)) rotateY(var(--body-yaw,0deg)) rotateZ(var(--body-roll,0deg)) scale(var(--body-sx,1),var(--body-sy,1));filter:url(#monster-soft-body);will-change:transform}
.detailed-monster .monster-art,.detailed-monster.is-eating .monster-art{animation:none;transform:none}
.detailed-monster.is-dizzy .cube-face{animation:none}
.monster-volume:after{content:"";position:absolute;inset:0;pointer-events:none;mask:url('mitdenker-monster-rig.png') center/contain no-repeat;-webkit-mask:url('mitdenker-monster-rig.png') center/contain no-repeat;background:linear-gradient(var(--body-light-angle,120deg),rgba(202,224,185,.15),transparent 42%,rgba(6,32,35,.2));opacity:var(--body-light,.2);mix-blend-mode:soft-light}
.detailed-monster .companion-shadow{left:25px;bottom:7px;width:165px;height:17px;opacity:var(--body-shadow-alpha,.5);transform:translateX(var(--body-shadow-x,0px)) scale(var(--body-shadow-scale,1));transition:none}
.detailed-monster .cube-face{transform:translate(var(--face-depth-x,0px),var(--face-depth-y,0px));transition:none}
@media(prefers-reduced-motion:reduce){.monster-volume{transform:none;filter:none;will-change:auto}.monster-volume:after{display:none}.detailed-monster .cube-face{transform:none}.detailed-monster .companion-shadow{transform:none;opacity:.5}}

/* A compact handful of notes, tables, messages and missing connections. */
.detailed-monster{left:-36px}
.detailed-monster .monster-snack{right:-5px;bottom:53px}
.detailed-monster .snack-table{right:-46px;bottom:57px;width:37px;height:40px}
.detailed-monster .snack-mail{right:0;bottom:10px;width:42px;height:33px}
.detailed-monster .snack-calendar{right:-46px;bottom:10px;width:38px;height:37px}
.snack-sheet{position:absolute;inset:3px;display:block;border-radius:3px;background:linear-gradient(135deg,#d3ddc7,#a5bca8);box-shadow:inset 1px 1px 1px #e7eddc;transform:rotate(-9deg)}
.snack-sheet:before{content:"";position:absolute;left:5px;right:5px;top:7px;height:4px;background:#628f7e;border-radius:1px}
.snack-sheet:after{content:"";position:absolute;inset:14px 5px 5px;background:repeating-linear-gradient(0deg,transparent 0 5px,#739b87 5px 6px),repeating-linear-gradient(90deg,transparent 0 6px,#739b87 6px 7px);opacity:.65}
.snack-envelope{position:absolute;inset:4px 2px;display:block;border-radius:3px;background:linear-gradient(135deg,#dcdec8,#b4c7ad);box-shadow:inset 1px 1px 1px #eaf0da;transform:rotate(7deg);overflow:hidden}
.snack-envelope:before{content:"";position:absolute;left:4px;top:-12px;width:25px;height:25px;border:1px solid #8ba48a;transform:rotate(45deg);background:linear-gradient(135deg,#dce4ca,#c2cfb4);border-radius:2px}
.snack-piece{position:absolute;inset:8px 5px 3px;display:block;border-radius:5px;background:linear-gradient(135deg,#a8c5b0,#739b89);box-shadow:inset 1px 2px 1px #d2ddc5;transform:rotate(-13deg)}
.snack-piece:before{content:"";position:absolute;top:-6px;left:8px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#aec9b3,#87aa93)}
.snack-piece:after{content:"";position:absolute;right:-6px;top:8px;width:12px;height:12px;border-radius:50%;background:#8bab96}
.snack-sheet,.snack-envelope,.snack-piece{transition:transform .2s ease}
.monster-snack:hover .snack-sheet,.monster-snack:hover .snack-envelope,.monster-snack:hover .snack-piece,.monster-snack.is-held .snack-sheet,.monster-snack.is-held .snack-envelope,.monster-snack.is-held .snack-piece{transform:rotate(0)}
@media(max-width:980px){.detailed-monster{left:-24px}.detailed-monster .snack-table,.detailed-monster .snack-calendar{right:-30px}}
@media(max-width:680px){.detailed-monster{left:-20px;height:210px}}
@media(prefers-reduced-motion:reduce){.snack-sheet,.snack-envelope,.snack-piece{transition:none}}

/* Scatter the little workflow bites over the open right-hand side. */
.detailed-monster .monster-snack{right:-75px;top:30px;bottom:auto}
.detailed-monster .snack-table{right:-220px;top:84px;bottom:auto}
.detailed-monster .snack-mail{right:-135px;top:145px;bottom:auto}
.detailed-monster .snack-calendar{right:-250px;top:173px;bottom:auto}
.monster-snack{transition:opacity .18s ease}
@media(max-width:1200px){.detailed-monster .monster-snack{right:-20px;top:25px}.detailed-monster .snack-table{right:-85px;top:77px}.detailed-monster .snack-mail{right:-30px;top:142px}.detailed-monster .snack-calendar{right:-85px;top:172px}}
@media(max-width:980px){.detailed-monster .monster-snack{right:0;top:23px}.detailed-monster .snack-table{right:-42px;top:77px}.detailed-monster .snack-mail{right:0;top:140px}.detailed-monster .snack-calendar{right:-43px;top:175px}}
@media(max-width:680px){.detailed-monster{width:290px;max-width:100%;left:0}.detailed-monster .monster-snack{right:34px;top:22px}.detailed-monster .snack-table{right:0;top:78px}.detailed-monster .snack-mail{right:31px;top:138px}.detailed-monster .snack-calendar{right:0;top:175px}}

/* Recognisable little appointment card; eager anticipation stays inside the character. */
.snack-calendar-card{position:absolute;inset:2px 3px;display:block;border-radius:4px;background:linear-gradient(135deg,#e4e3cc,#becbb1);box-shadow:inset 1px 1px 1px #f0f0dc;transform:rotate(-7deg);overflow:visible}
.snack-calendar-card:before{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-radius:4px 4px 0 0;background:linear-gradient(135deg,#83a998,#5c8879)}
.snack-calendar-card:after{content:"";position:absolute;left:7px;top:-2px;width:3px;height:7px;border-radius:2px;background:#dce3c9;box-shadow:14px 0 0 #dce3c9}
.snack-calendar-card b{position:absolute;inset:11px 0 0;font-size:15px;font-weight:750;line-height:20px;color:#426c60;text-align:center;letter-spacing:-.04em}
.detailed-monster.is-excited:not(.is-longing) .monster-mouth{height:165%;border:2px solid #315f52;border-top-color:#1d453c;background:radial-gradient(ellipse at 50% 90%,#78927c 0 15%,#24483d 45%,#102c29 85%);border-radius:20% 20% 50% 50%;box-shadow:inset 0 2px 3px #0b2724,0 2px 1px #78a18b}
.detailed-monster.is-excited .monster-mouth i{top:0;bottom:auto;height:30%}
.detailed-monster.is-excited:not(.is-longing) .lauritz-eye:after{animation:none;transform:scaleY(0)}
.detailed-monster.is-excited .lauritz-eye i:after{width:30%;height:29%;box-shadow:-5px 9px 3px -2px rgba(255,255,239,.3)}

/* An optional discovery, behind a tiny detail in the footer's dividing line. */
.detailed-monster[hidden],.detailed-monster .monster-snack[hidden],.monster-discovery[hidden]{display:none!important}
.monster-discovery{position:absolute;right:19%;bottom:-13px;z-index:4;width:36px;height:28px;padding:0;border:0;background:transparent;color:#9db7a7;cursor:pointer;opacity:.4;transition:opacity .2s}
.monster-discovery span{display:block;width:15px;height:5px;margin:auto;border-bottom:1px solid currentColor;border-radius:0 0 50% 50%;transform:rotate(-8deg)}
.monster-discovery:hover,.monster-discovery:focus-visible{opacity:1}
.monster-discovery:focus-visible{outline:1px solid #a7bfac;outline-offset:1px;border-radius:4px}
.detailed-monster:not([hidden]){animation:monster-discover .65s cubic-bezier(.2,.8,.2,1)}
@keyframes monster-discover{from{opacity:0;translate:0 18px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:680px){.monster-discovery{right:15%;bottom:-13px}}
@media(prefers-reduced-motion:reduce){.detailed-monster:not([hidden]){animation:none}.monster-discovery{transition:none}}
.footer-invitation.has-easter-egg{z-index:2}

/* A quiet invitation in the final footer row, with one straightforward action. */
.footer-with-discovery{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.footer-with-discovery .monster-discovery{position:static;justify-self:center;width:auto;height:auto;min-height:30px;padding:5px 8px;background:none;border:0;font:inherit;font-size:11px;line-height:1.5;color:#a9bcb8;opacity:.85;text-decoration:none;cursor:pointer}
.footer-with-discovery .monster-discovery:hover,.footer-with-discovery .monster-discovery:focus-visible{color:#d7e3d5;opacity:1;text-decoration:underline;text-underline-offset:4px}
@media(max-width:680px){.footer-with-discovery{grid-template-columns:1fr;gap:2px;justify-items:center;text-align:center}.footer-with-discovery .monster-discovery{grid-row:3;margin-top:5px;font-size:12px;min-height:36px}}