body.guest.sketchbook{--pencil:#303b32;--paper:#fffdf7;--muted-pencil:#6a7367;margin:0;padding:28px 16px 36px;background:#f1eee5;background:radial-gradient(ellipse at 15% 0,color-mix(in srgb,var(--event-accent) 16%,transparent),transparent 65%),#f1eee5;color:var(--pencil);font-family:Arial,sans-serif}body.sketchbook:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(#4d4b3f .55px,transparent .55px);background-size:5px 5px}.sketchbook-card{position:relative;max-width:600px;margin:0 auto;padding:34px 36px 22px;background:var(--paper);border:1px solid #cfcdbf;border-radius:4px 16px 12px 4px;box-shadow:5px 5px 0 #fffdf7,6px 6px 0 #d5d1c4,10px 10px 0 #fffdf7,11px 11px 0 #ddd8ca,0 12px 40px #363c3212}.sketchbook-card:before{content:"";position:absolute;left:10px;top:20px;bottom:20px;border-left:1px solid #d9c6b34d;pointer-events:none}.guest-branding{text-align:center;padding-bottom:22px;border-bottom:1px dashed #c9c9bb}.sketchwizard-mark{display:inline-flex;align-items:center;gap:8px;font:italic 25px Georgia,serif;text-decoration:none;color:var(--pencil)}.sketchwizard-mark svg{width:25px;height:25px;color:var(--event-accent)}.guest-event-logo{display:block;max-width:180px;max-height:90px;object-fit:contain;margin:0 auto 18px}.guest-event-name{font-size:13px;line-height:1.45;letter-spacing:.035em;margin:10px 0 0;overflow-wrap:anywhere}.guest-welcome{text-align:center;margin:28px 0 24px}.stage-eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:10px;font-weight:bold;color:var(--muted-pencil)}.sketchbook h1{font-size:clamp(34px,8vw,49px);line-height:1.09;letter-spacing:-.055em;margin:12px 0 16px;font-weight:normal}.sketchbook h1 em{font-weight:normal;color:var(--pencil);font-style:italic;text-decoration:underline;text-decoration-color:var(--event-accent);text-underline-offset:6px;text-decoration-thickness:2px}.event-welcome{font-size:15px;line-height:1.55;margin:0 auto;max-width:400px;overflow-wrap:anywhere}.photo-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sketchbook .photo-choice{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;border:1.5px solid #b9bfb1;border-radius:12px 8px 13px 8px;color:var(--pencil);background:#f7f6ed;padding:22px 10px;min-height:120px;margin:0;font-size:15px;font-weight:bold}.sketchbook .photo-choice:hover{border-color:var(--event-accent);background:#efefe5}.photo-choice svg{width:39px;height:39px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.photo-hint{text-align:center;font-size:12px;color:var(--muted-pencil);line-height:1.5;margin:12px 0 20px}.native-file{display:block;font-size:16px;margin:20px 0}.native-file input{display:block;max-width:100%;margin:10px 0}.sketch-js .native-file{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;padding:0;margin:0;white-space:nowrap}.selected-photo{margin:20px 0 24px;padding:12px 12px 0;background:white;border:1px solid #d3d4c9;border-radius:4px;box-shadow:0 5px 16px #303b3210;transform:rotate(-.7deg)}#photoPreview{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;image-orientation:from-image;background:#f6f5ef}.selected-photo figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;font:italic 17px Georgia,serif}.sketchbook .text-button{font:13px Arial,sans-serif;background:none;border:0;border-bottom:1px solid #a0ab96;color:var(--pencil);border-radius:0;padding:5px 0;margin:0;width:auto}.has-photo .photo-choices,.has-photo .photo-hint{display:none}.guest-text-field{display:block;font-size:14px;font-weight:bold;margin:22px 0 0}.field-optional{float:right;font-size:11px;font-weight:normal;color:var(--muted-pencil)}.guest-text-field input{display:block;width:100%;box-sizing:border-box;padding:14px;margin-top:9px;border:1px solid #bac2b0;border-radius:7px;background:white;color:#243326;font:16px Arial,sans-serif}.guest-text-hint{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted-pencil);line-height:1.45;margin:7px 0 0}.guest-text-hint [data-count-for]{white-space:nowrap}.exact-text-note{font:italic 13px Georgia,serif;color:var(--muted-pencil);margin:15px 0 0}.sketchbook .consent{display:flex;gap:10px;margin:24px 0 8px;line-height:1.5;font-size:12px;align-items:flex-start}.consent input{accent-color:var(--event-accent);min-width:20px;min-height:20px;margin:0}.sharing-note{font-size:12px;line-height:1.6;color:var(--muted-pencil);margin:0 0 20px 30px}.sketchbook .sketch-primary{display:flex;align-items:center;justify-content:center;gap:16px;background:var(--event-accent);color:var(--event-accent-ink);border:1px solid var(--event-accent);font-size:16px;font-weight:bold;text-decoration:none;width:100%;padding:17px 20px;border-radius:9px 5px 10px 6px;margin-top:20px;min-height:54px}.sketch-primary span{font-size:24px;line-height:1}.sketchbook .sketch-primary:hover{filter:brightness(.94)}.sketchbook .sketch-secondary{color:var(--pencil);background:white;border:1px solid #b3bea7;border-radius:7px;padding:13px;font-size:14px;width:100%;margin:10px 0}.photo-help{margin-top:22px;font-size:12px;line-height:1.5;color:var(--muted-pencil)}.photo-help summary{cursor:pointer;min-height:28px}.photo-help p{margin:5px 0}.guest-footer{border-top:1px dashed #c9c9bb;margin-top:28px;padding-top:18px;text-align:center;font-size:10px;color:var(--muted-pencil);line-height:1.7}.guest-footer span{display:block;font:italic 13px Georgia,serif;margin-bottom:7px}.guest-footer a{font-size:10px}.creation-stage{text-align:center;margin-top:26px}.stage-heading #status{line-height:1.55;font-size:14px;min-height:22px;margin:0 0 4px}.artist-desk{position:relative;width:calc(100% + 32px);margin:0 -16px;color:#444b43;isolation:isolate}.desk-art{display:block;width:100%;height:auto;overflow:visible}.desk-reference{position:absolute;left:8%;top:14%;width:23%;height:29%;transform:rotate(-9deg);background:#fffefa;border:1px solid #a8ada1;padding:7px 6px 14px;box-shadow:2px 3px 0 #333e3210}.desk-reference img{display:block;width:100%;height:100%;object-fit:contain;opacity:0}.desk-reference.has-reference img{opacity:1}.reference-placeholder{display:block;position:absolute;inset:8px 10px 18px;color:#9b9f91}.reference-placeholder svg{width:100%;height:100%}.has-reference .reference-placeholder{display:none}.reference-clip{position:absolute;left:40%;top:-11px;width:23%;height:17px;border:1px solid #56624e;border-radius:3px;background:var(--event-accent);box-shadow:0 2px 0 #3333;z-index:1}.reference-clip:before{content:"";position:absolute;left:26%;right:26%;height:8px;top:-6px;border:1px solid #56624e;border-bottom:0;border-radius:5px 5px 0 0}.reference-label{position:absolute;left:0;right:0;bottom:1px;font:italic clamp(7px,2vw,11px) Georgia,serif}.artist-caption{font:italic 18px Georgia,serif;margin:-12px 0 18px;min-height:24px;color:var(--muted-pencil)}.stage-note{font-size:12px;line-height:1.55;color:var(--muted-pencil);margin:22px auto;max-width:360px}.another-photo{display:inline-block;font-size:12px;min-height:30px}.connection-message{font-size:12px;padding:12px;background:#f6e7ca;border-radius:8px;line-height:1.5}.sketchbook .error,.availability-message{font-size:13px;line-height:1.6;border:1px solid #ead3c4;border-radius:8px}.availability-message{padding:20px;background:#f4efe2}.result-box{margin-top:20px}.finished-portrait{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;background:white;padding:5px;border:1px solid #d0d3c7;box-shadow:0 6px 20px #303b3217;animation:portrait-reveal .65s ease-out both}.sketchbook a:focus-visible,.sketchbook button:focus-visible,.sketchbook input:focus-visible,.sketchbook summary:focus-visible{outline:3px solid var(--pencil);outline-offset:4px}.is-revealing #workbench{animation:tools-away .45s ease-in both;pointer-events:none}.is-ready .stage-heading h1{font-size:45px}.is-error #status{padding:14px;background:#ffe9e2;border-radius:8px;color:#813226}.is-error .stage-note{color:#813226}
/* Coloured-pencil illustration layers. Both forearms stay off the scene edge.
   The graphite tip and sharpener hole meet at (201,303) in the 600x400 viewBox. */
.coloured-pencil-desk{border-radius:10px;overflow:hidden;box-shadow:0 5px 18px #4b32151a}.artist-drawing-hand{transform-box:view-box;transform-origin:201px 303px;animation:artist-work 24s ease-in-out infinite;will-change:transform}.artist-sharpener-hand{transform-box:view-box;transform-origin:201px 303px;animation:artist-left-work 24s ease-in-out infinite;will-change:transform}.artist-colour-marks{animation:artist-marks-fade 24s linear infinite}.colour-stroke{stroke-dasharray:65;stroke-dashoffset:65;animation:artist-pencil-line 24s linear infinite}.colour-stroke-two{animation-name:artist-pencil-line-two}.colour-stroke-three{animation-name:artist-pencil-line-three}.colour-stroke-four{animation-name:artist-pencil-line-four}.is-queued .artist-drawing-hand{animation:artist-sharpen 1.8s ease-in-out infinite}.is-queued .artist-sharpener-hand{animation:artist-hold 1.8s ease-in-out infinite}.is-queued .artist-colour-marks{display:none}.is-paused .artist-desk *{animation-play-state:paused!important}
@keyframes artist-sharpen{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes artist-hold{0%,100%{transform:translate(0,0)}50%{transform:translate(.4px,.3px)}}
@keyframes artist-work{
0%{transform:translate(0,0) rotate(-2deg)}3%{transform:translate(0,0) rotate(2deg)}6%{transform:translate(0,0) rotate(-2deg)}9%{transform:translate(0,0) rotate(2deg)}12%{transform:translate(0,0) rotate(-2deg)}15%{transform:translate(0,0) rotate(2deg)}18%{transform:translate(0,0) rotate(-2deg)}21%{transform:translate(0,0) rotate(2deg)}24%,28%{transform:translate(0,0) rotate(0)}
33%{transform:translate(90px,-55px) rotate(-7deg)}39%{transform:translate(195px,-23px) rotate(0)}42%{transform:translate(205px,-27px) rotate(.5deg)}45%{transform:translate(217px,-24px) rotate(-.5deg)}48%{transform:translate(225px,-28px) rotate(0)}50%{transform:translate(195px,-14px) rotate(.5deg)}53%{transform:translate(210px,-17px) rotate(-.5deg)}56%{transform:translate(223px,-15px) rotate(0)}59%{transform:translate(195px,-5px) rotate(.5deg)}62%{transform:translate(207px,-8px) rotate(-.5deg)}65%{transform:translate(218px,-7px) rotate(0)}68%{transform:translate(200px,3px) rotate(.5deg)}71%{transform:translate(214px,6px) rotate(0)}
76%{transform:translate(220px,-42px) rotate(-5deg)}82%{transform:translate(120px,-64px) rotate(-8deg)}89%{transform:translate(8px,-20px) rotate(-3deg)}94%,100%{transform:translate(0,0) rotate(-2deg)}}
@keyframes artist-left-work{0%,28%{opacity:1;transform:translate(0,0)}35%{opacity:1;transform:translate(-80px,32px) rotate(-7deg)}42%,77%{opacity:0;transform:translate(-230px,55px) rotate(-10deg)}84%{opacity:1;transform:translate(-80px,28px) rotate(-5deg)}91%,100%{opacity:1;transform:translate(0,0)}}
@keyframes artist-marks-fade{0%,37%{opacity:0}39%,74%{opacity:.55}80%,100%{opacity:0}}
@keyframes artist-pencil-line{0%,39%{stroke-dashoffset:65}49%,100%{stroke-dashoffset:0}}
@keyframes artist-pencil-line-two{0%,50%{stroke-dashoffset:65}57%,100%{stroke-dashoffset:0}}
@keyframes artist-pencil-line-three{0%,59%{stroke-dashoffset:65}66%,100%{stroke-dashoffset:0}}
@keyframes artist-pencil-line-four{0%,68%{stroke-dashoffset:65}73%,100%{stroke-dashoffset:0}}
@keyframes portrait-reveal{from{opacity:0;transform:translateY(14px) rotate(-1.5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes tools-away{to{opacity:0;transform:translateY(14px) scale(.95)}}
@media(max-width:420px){body.guest.sketchbook{padding:16px 12px 28px}.sketchbook-card{padding:26px 23px 20px}.guest-branding{padding-bottom:18px}.guest-welcome{margin-top:23px}.photo-choice{min-height:112px!important;font-size:14px!important}.photo-choices{gap:10px}.artist-caption{font-size:16px;margin-top:-6px}.guest-event-logo{max-height:75px;max-width:150px}.sketchbook h1{font-size:39px}.creation-stage h1{font-size:35px}.sharing-note{font-size:12px}.consent{font-size:13px!important}}
@media(prefers-reduced-motion:reduce){.artist-desk *,.finished-portrait,.is-revealing #workbench{animation:none!important}.artist-desk .sketching-hand{opacity:0}.artist-desk .sharpening-hand{opacity:1;transform:none}.is-revealing #workbench{opacity:0}}

@media(prefers-reduced-motion:reduce){.coloured-pencil-desk .artist-drawing-hand,.coloured-pencil-desk .artist-sharpener-hand{animation:none!important;transform:none;opacity:1}.coloured-pencil-desk .artist-colour-marks{display:none}}