html,body {margin:0;width:100%;min-height:100%;background:#faf7f1;}
body {overflow:hidden;}
@media(min-width:1024px){
 .intro.subpage .message,.intro.subpage .preview-controls,.intro .message[hidden] {display:none!important;}
 .intro.dialog-open .message,.intro.dialog-open .preview-controls {visibility:hidden!important;}
}
.photo-page {position:fixed;inset:0;width:100%;height:100%;border:0;background:#faf7f1;visibility:hidden;}
.photo-page.is-ready {visibility:visible;}
.intro.is-complete {pointer-events:none;background:transparent;}
.intro.is-complete .message,.intro.is-complete .closing {visibility:hidden;}
.intro.is-complete .preview-controls {pointer-events:auto;background:#faf7f1;padding:0 18px;left:50%;right:auto;width:max-content;max-width:calc(100% - 24px);transform:translateX(-50%);border:1px solid #e6dfd4;border-radius:3px;gap:20px;}
.intro {position:relative;width:100%;height:100svh;min-height:440px;overflow:hidden;background:#faf7f1;isolation:isolate;}
.hands {position:absolute;inset:0;perspective:1400px;}
.hand {position:absolute;left:0;top:50%;width:100%;aspect-ratio:3/2; margin-top:calc(-100vw / 3);will-change:transform,opacity;opacity:0;pointer-events:none;}
.hand img {width:100%;height:100%;object-fit:contain;user-select:none;filter:grayscale(1) sepia(.48) saturate(.65) contrast(.97);}
.hand-human {clip-path:inset(0 50% 0 0);transform-origin:0% 60%;}
.hand-anatomy {clip-path:inset(0 0 0 50%);transform-origin:100% 60%;}
.touch-light {position:absolute;top:50%;left:50%;width:110px;height:110px;margin:-55px;border-radius:50%;background:radial-gradient(circle,rgba(225,218,198,.28),rgba(225,218,198,0) 68%);opacity:0;pointer-events:none;}
.message {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;}
.message h1 {font-family:var(--font-serif);font-size:clamp(38px,5.1vw,78px);line-height:1.13;font-weight:500;color:#201f1d;letter-spacing:-.025em;margin:0;}
.message h1 span,.message h1 em {display:block;opacity:0;will-change:transform,opacity;}
.message h1 em {color:#5c7a8a;font-weight:500;}
.message h1 b,.message h1 small,.message h1 i {font:inherit;}
.word-place::after {content:' ';}
@media(min-width:768px){
 .intro.is-complete .message {visibility:visible;}
 .message {inset:0;display:block;text-align:left;padding:0;}
 .message h1 {position:absolute;top:22svh;left:7.2%;width:70%;font-weight:400;line-height:1;letter-spacing:-.055em;}
 .message h1 .word-place {display:block;font-size:min(17vw,28svh);line-height:.88;font-weight:400;letter-spacing:-.065em;color:#111;transition:color 1s;padding-bottom:.14em;margin-bottom:-.14em;}
 .intro.photo-revealed .word-place {background:linear-gradient(90deg,#111 0%,#111 22%,#faf7f1 46%,#faf7f1 100%);background-clip:text;-webkit-background-clip:text;color:transparent;}
 .message h1 .word-created {display:block;font:400 clamp(14px,1.7vw,28px)/1.4 var(--font-sans);letter-spacing:.55em;text-transform:uppercase;color:#646464;margin-top:10px;}
 .message h1 em {margin-top:12px;display:grid;grid-template-columns:max-content max-content;}
 .message h1 em::before {content:'żeby\00a0';grid-column:1;grid-row:2;visibility:hidden;font-size:min(3.3vw,5.5svh);line-height:1;font-style:normal;letter-spacing:-.04em;}
 .message h1 .word-for {grid-column:1 / -1;grid-row:1;}
 .message h1 .word-help {grid-column:2;grid-row:2;}
 .message h1 .word-for {display:block;font-size:min(3.3vw,5.5svh);line-height:1;font-style:normal;color:#111;letter-spacing:-.04em;}
 .message h1 .word-help {display:block;font-size:min(9vw,15svh);line-height:.92;font-style:italic;color:var(--color-accent);letter-spacing:-.045em;}
 .intro.is-complete .preview-controls {left:auto;right:20px;bottom:14px;transform:none;background:rgba(250,247,241,.8);font-size:11px;opacity:.6;}
 .intro.is-complete .preview-controls:hover {opacity:1;}
}
.closing {position:absolute;bottom:21%;left:0;width:100%;text-align:center;opacity:0;}
.closing span {display:block;font-family:var(--font-sans);font-size:11px;letter-spacing:.2em;line-height:1.7;color:#5c7a8a;}
.preview-controls {position:absolute;bottom:26px;left:24px;right:24px;display:flex;justify-content:center;gap:28px;align-items:center;opacity:0;visibility:hidden;}
.preview-controls button,.preview-controls a,#skip {font-family:var(--font-sans);font-size:13px;line-height:1.4;color:#5c7a8a;background:none;border:0;text-decoration:none;padding:12px 0;cursor:pointer;}
.preview-controls button {border-bottom:1px solid #5c7a8a;}
#skip {position:absolute;right:26px;bottom:26px;color:#66625e;}
#asset-error {position:absolute;left:20px;right:20px;top:25%;text-align:center;}
.preview-controls.is-visible {opacity:1;visibility:visible;transition:opacity .6s;}
@media(max-width:600px){
 .hand {width:170%;left:-35%;margin-top:calc(-170vw / 3);}
 .closing {bottom:25%;}
 .preview-controls {gap:18px;bottom:20px;}
 .preview-controls button,.preview-controls a {font-size:12px;}
 .message h1 {font-size:clamp(35px,8.8vw,52px);}
}
@media(prefers-reduced-motion:reduce){.preview-controls.is-visible{transition:none;}}
@media(max-width:767px){
 .message {inset:0;display:block;padding:0;text-align:left;}
 .intro.is-complete .message {visibility:visible;}
 .message h1 {position:absolute;top:23svh;left:7%;width:88%;font-weight:400;line-height:1;}
 .message h1 .word-place {display:block;font-size:clamp(76px,23vw,150px);line-height:.95;letter-spacing:-.065em;font-weight:400;}
 .message h1 .word-created {display:block;margin-top:14px;font:400 12px/1.4 var(--font-sans);letter-spacing:.42em;text-transform:uppercase;color:#646464;}
 .message h1 em {margin-top:15px;}
 .message h1 .word-for {display:block;font-size:30px;font-style:normal;color:#201f1d;}
 .message h1 .word-help {display:block;font-size:clamp(66px,19vw,104px);line-height:1;font-style:italic;color:var(--color-accent);}
 .intro.is-complete .preview-controls {bottom:12px;gap:12px;padding:0 10px;background:rgba(250,247,241,.7);}
 .preview-controls button,.preview-controls a {font-size:10px;}
 .intro.photo-revealed .message h1,.intro.photo-revealed .message h1 .word-created,.intro.photo-revealed .message h1 .word-for {color:#faf7f1;text-shadow:0 2px 16px rgba(0,0,0,.25);}
 .intro.photo-revealed .message h1 .word-help {color:var(--color-accent);}
}


@media(min-width:768px){
 .message h1 .word-place {padding-bottom:.28em;margin-bottom:-.28em;overflow:visible;}
 .intro.photo-revealed .word-place {background-image:linear-gradient(90deg,#111 0%,#111 22%,#faf7f1 34%,#faf7f1 100%);}
}

/* Mobile hero composition approved from the supplied reference. */
@media(max-width:767px){
 .message h1 {top:16svh;left:10.5%;width:84%;}
 .message h1 .word-place {width:max-content;max-width:100%;font-size:clamp(68px,22vw,150px);line-height:.95;padding-bottom:.25em;margin-bottom:-.25em;}
 .intro.photo-revealed .message h1 .word-place {background:linear-gradient(90deg,#171715 0%,#171715 42%,#cfc9be 65%,#fffdf8 82%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;}
 .message h1 .word-created {margin-top:10px;font:400 clamp(14px,5.5vw,24px)/1.2 var(--font-serif);letter-spacing:.1em;}
 .message h1 em {margin-top:0;}
 .message h1 .word-for {margin-left:18vw;font-size:clamp(30px,10.5vw,60px);line-height:1.05;letter-spacing:-.025em;}
 .intro.photo-revealed .message h1 .word-for {width:max-content;background:linear-gradient(90deg,#fffdf8 0%,#f1eee7 100%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;}
 .message h1 .word-help {margin-top:14px;font-size:clamp(66px,22vw,130px);line-height:1;letter-spacing:-.045em;}
 .intro.photo-revealed .message h1 .word-created {color:#fffdf8;text-shadow:0 1px 5px rgba(0,0,0,.35);}
 .intro.photo-revealed .message h1 .word-for {text-shadow:0 1px 5px rgba(0,0,0,.3);}
 .intro.photo-revealed .message h1 .word-help {color:#86b2c6;text-shadow:0 1px 6px rgba(0,0,0,.38);}
}

@media(max-width:767px){
 .intro.dialog-open .message,.intro.dialog-open .preview-controls {visibility:hidden!important;}
}

/* Allow serif overhangs and avoid a shadow appearing ahead of the mobile text. */
@media(max-width:767px){
 .message h1 .word-place {max-width:none;padding-right:.12em;overflow:visible;}
 .intro.photo-revealed .message h1 {text-shadow:none;}
 .intro.photo-revealed .message h1 .word-for {background:none;color:#fffdf8;text-shadow:0 1px 3px rgba(0,0,0,.2);padding-right:.1em;}
}

/* The external hero title belongs only to the homepage, at every width. */
.intro.subpage .message,.intro.subpage .preview-controls,.intro .message[hidden] {display:none!important;}

/* Mobile lettering: warm midtones across the requested letter groups. */
@media(max-width:767px){
 .intro.photo-revealed .message h1 .word-place {background-image:linear-gradient(90deg,#171715 0%,#171715 22%,#888479 30%,#a7a297 48%,#bdb7ac 59%,#fffdf8 80%,#ded9cf 100%);}
 .intro.photo-revealed .message h1 .word-created {width:max-content;background:linear-gradient(90deg,#fffdf8 0%,#fffdf8 61%,#bdb7ac 76%,#aaa599 100%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;}
 .intro.photo-revealed .message h1 .word-for {background:linear-gradient(90deg,#fffdf8 0%,#fffdf8 33%,#c3bdb2 53%,#aaa599 100%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;}
}