@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=DM+Serif+Display:ital@0;1&display=swap');
:root{--paper:#f7f2e9;--ink:#191516;--muted:#766d69;--pink:#eb547c;--pink-dark:#d83e68;--leather:#26140f;--cognac:#c77e52;--cream:#f8eee2;--brass:#d6aa65;--progress:0;--leather-progress:0}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper)}body{font-family:"DM Sans",Arial,sans-serif;color:var(--ink);overscroll-behavior:none}button{font:inherit}.experience{--pointer-x:0;--pointer-y:0;position:relative;min-height:100svh;overflow:hidden;padding:clamp(25px,5vw,62px);isolation:isolate;background:radial-gradient(circle at calc(70% + var(--pointer-x)*1.2%) calc(20% + var(--pointer-y)*1.2%),#fffdf9 0,transparent 38%),var(--paper)}
.grain{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.14;mix-blend-mode:multiply;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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.ambient{position:absolute;inset:0;z-index:-1;pointer-events:none}.ambient i{position:absolute;border:1px solid #eb547c18;border-radius:50%;transition:transform .25s ease-out}.ambient i:nth-child(1){width:46vw;height:46vw;right:-18vw;top:-18vw;transform:translate(calc(var(--pointer-x)*-8px),calc(var(--pointer-y)*-8px))}.ambient i:nth-child(2){width:22vw;height:22vw;right:8vw;bottom:11vh;transform:translate(calc(var(--pointer-x)*12px),calc(var(--pointer-y)*12px))}.ambient i:nth-child(3){width:8vw;height:8vw;left:28vw;top:24vh;background:#eb547c08;border:0;transform:translate(calc(var(--pointer-x)*17px),calc(var(--pointer-y)*17px))}
.topbar{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:35;font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:color .8s}.counter{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);transition:opacity .45s}.counter b{color:var(--pink);font-weight:500}.counter.is-complete{opacity:0}.chapters{position:absolute;right:0;display:flex;gap:6px;opacity:0;transform:translateY(5px);transition:.5s}.chapters.is-visible{opacity:1;transform:none}.chapters i{display:block;width:18px;height:2px;background:#c9c0b8;transition:background .45s,transform .45s}.chapters[data-active="1"] i:nth-child(-n+1),.chapters[data-active="2"] i:nth-child(-n+2),.chapters[data-active="3"] i:nth-child(-n+3),.chapters[data-active="4"] i:nth-child(-n+4){background:var(--pink);transform:scaleX(1.08)}
.scene{position:absolute;inset:0;padding:clamp(25px,5vw,62px);pointer-events:none;visibility:hidden}.wordmark{margin:0;font:italic 31px/1 "DM Serif Display",Georgia,serif}h1,h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.055em}h1 em,h2 em{color:var(--pink);font-weight:400}.intro{position:relative;padding:0;visibility:visible;pointer-events:auto;z-index:3;margin-top:clamp(30px,7vh,80px);transition:opacity .75s,transform .9s cubic-bezier(.16,1,.3,1),visibility 0s}.intro .wordmark{margin-bottom:clamp(48px,8vh,90px);animation:rise .8s both}.intro h1{margin:0;font-size:clamp(50px,8vw,108px);line-height:.86;max-width:750px}.intro h1 span{display:block;animation:rise .9s both}.intro h1 span:nth-child(1){animation-delay:.08s}.intro h1 span:nth-child(2){animation-delay:.16s}.intro h1 span:nth-child(3){animation-delay:.24s}.instruction{margin:25px 0 0;color:var(--muted);font-size:13px;line-height:1.5;animation:rise .9s .34s both}
.thread-canvas{position:absolute;inset:auto -5vw 10vh 24vw;height:min(55vw,560px);z-index:1;pointer-events:none;transition:opacity .8s,transform 1s cubic-bezier(.16,1,.3,1)}.stitch-art{width:100%;height:100%;overflow:visible;transform:translate(calc(var(--pointer-x)*-5px),calc(var(--pointer-y)*-5px));transition:transform .25s}.stitch-art path{fill:none;vector-effect:non-scaling-stroke}.guide{stroke:#d9d0c8;stroke-width:1;stroke-dasharray:4 7}.thread{stroke:var(--pink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--progress));filter:drop-shadow(0 1px 0 #fff)}.bag.thread{stroke-dashoffset:calc(1 - max(0,(var(--progress) - .35)/.65))}.bag.guide{opacity:.65}.drag-region{position:absolute;left:clamp(25px,5vw,62px);right:clamp(25px,5vw,62px);bottom:max(30px,env(safe-area-inset-bottom));z-index:8;transition:opacity .55s,transform .8s cubic-bezier(.16,1,.3,1)}.track{position:relative;height:100px}.track-label{position:absolute;top:0;left:0;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.track-line{position:absolute;top:52px;left:0;right:0;height:1px;background:linear-gradient(to right,var(--pink) calc(var(--progress)*100%),#d7cec6 calc(var(--progress)*100%))}.spool{position:absolute;left:calc(var(--progress)*(100% - 52px));top:21px;width:52px;height:70px;border:0;background:none;padding:0;cursor:grab;touch-action:none;filter:drop-shadow(0 8px 7px #37222922);transform:rotate(calc(8deg + var(--progress)*360deg));transform-origin:center;transition:filter .2s}.spool:active{cursor:grabbing;filter:drop-shadow(0 14px 11px #37222940)}.spool:focus-visible,.brass-tool:focus-visible{outline:1px solid var(--pink);outline-offset:8px}.spool-cap{position:absolute;left:0;width:52px;height:10px;border-radius:50%;background:#211b1c}.spool-cap.top{top:0}.spool-cap.bottom{bottom:0}.spool-thread{position:absolute;left:8px;top:5px;width:36px;height:60px;border-radius:7px;background:repeating-linear-gradient(0deg,var(--pink) 0 2px,var(--pink-dark) 2px 4px);box-shadow:inset 7px 0 8px #ab1f4636}
.scene-copy,.summary-copy{position:absolute;left:clamp(25px,8vw,118px);right:clamp(25px,8vw,118px);top:50%;transform:translateY(-46%);max-width:920px}.kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 23px}.kicker span{margin-left:12px;color:var(--pink)}.scene h2,.summary h2{font-size:clamp(62px,10vw,140px);line-height:.82;margin:0}.voucher{margin-top:clamp(42px,7vh,74px);max-width:590px;padding:19px 0;border-top:1px solid;border-bottom:1px solid;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:end}.voucher span{font-size:9px;letter-spacing:.18em;text-transform:uppercase}.voucher strong{font:400 23px/1.1 "DM Serif Display",Georgia,serif;margin-top:7px}.voucher b{grid-row:1/3;grid-column:2;font:400 28px/1 "DM Sans",sans-serif;color:var(--pink)}.text-button{margin-top:26px;padding:13px 0;min-height:44px;border:0;border-bottom:1px solid;background:transparent;text-transform:uppercase;letter-spacing:.16em;font-size:9px;cursor:pointer;pointer-events:auto}.text-button i{display:inline-block;margin-left:16px;font-style:normal;transition:transform .25s}.text-button:hover i,.text-button:focus-visible i{transform:translateX(6px)}.text-button:focus-visible{outline:1px solid currentColor;outline-offset:6px}.pale{color:var(--cream);border-color:#f8eee2}
.sewing{z-index:5;opacity:0;transform:translateY(30px);transition:opacity .8s .18s,transform 1s cubic-bezier(.16,1,.3,1) .18s,visibility 0s .9s}.sewing .kicker,.sewing h2,.sewing .voucher,.sewing .text-button{opacity:0;transform:translateY(18px)}[data-capitulo="sewing"] .intro{opacity:0;transform:translateY(-28px);visibility:hidden;transition-delay:0s,0s,.75s}[data-capitulo="sewing"] .drag-region{opacity:0;transform:translateY(25px);pointer-events:none}[data-capitulo="sewing"] .thread-canvas{opacity:.22;transform:scale(1.07)}[data-capitulo="sewing"] .sewing{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:.18s,.18s,0s}[data-capitulo="sewing"] .sewing .kicker,[data-capitulo="sewing"] .sewing h2,[data-capitulo="sewing"] .sewing .voucher,[data-capitulo="sewing"] .sewing .text-button{animation:rise .75s cubic-bezier(.16,1,.3,1) both}[data-capitulo="sewing"] .sewing h2{animation-delay:.1s}[data-capitulo="sewing"] .sewing .voucher{animation-delay:.2s}[data-capitulo="sewing"] .sewing .text-button{animation-delay:.3s}
.leather-intro{z-index:12;padding:0;color:var(--cream);background:var(--leather);clip-path:inset(0 0 0 100%);transition:clip-path 1.15s cubic-bezier(.76,0,.24,1),visibility 0s 1.15s}.leather-sheet{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at calc(76% + var(--pointer-x)*2%) calc(28% + var(--pointer-y)*2%),#7e4931 0,transparent 29%),linear-gradient(140deg,#40251c,#1d0f0c 73%)}.leather-sheet::after,.leather-surface::after{content:"";position:absolute;inset:0;opacity:.34;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.18 .72' numOctaves='5' seed='12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='.58'/%3E%3C/svg%3E")}.leather-sheet>span{position:absolute;right:-.06em;bottom:-.13em;font:400 min(43vw,600px)/1 "DM Serif Display",serif;color:#2b1712;text-shadow:1px 1px 1px #85503655,-1px -1px 1px #130907;opacity:.68;letter-spacing:-.08em}.leather-sheet i{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0c078,#a96f32 52%,#553015);box-shadow:0 2px 5px #0009}.leather-sheet i:nth-of-type(1){top:14%;right:12%}.leather-sheet i:nth-of-type(2){bottom:13%;left:11%}.leather-sheet i:nth-of-type(3){top:48%;left:49%}.leather-intro .scene-copy{z-index:2}.leather-intro .kicker,.leather-intro h2,.leather-intro .material-note,.leather-intro .text-button{opacity:0;transform:translateY(22px)}.leather-intro h2 em{color:#e4a17a}.material-note{max-width:280px;margin:24px 0 0;color:#decfc5;font:400 14px/1.55 "DM Sans",sans-serif}
[data-capitulo="leather-intro"] .topbar,[data-capitulo="leather"] .topbar{color:var(--cream)}[data-capitulo="leather-intro"] .intro,[data-capitulo="leather-intro"] .drag-region,[data-capitulo="leather-intro"] .thread-canvas,[data-capitulo="leather-intro"] .sewing{opacity:0;visibility:hidden;pointer-events:none}[data-capitulo="leather-intro"] .leather-intro{visibility:visible;clip-path:inset(0);pointer-events:auto;transition-delay:0s,0s}[data-capitulo="leather-intro"] .leather-intro .kicker,[data-capitulo="leather-intro"] .leather-intro h2,[data-capitulo="leather-intro"] .leather-intro .material-note,[data-capitulo="leather-intro"] .leather-intro .text-button{animation:rise .8s cubic-bezier(.16,1,.3,1) both}[data-capitulo="leather-intro"] .leather-intro .kicker{animation-delay:.55s}[data-capitulo="leather-intro"] .leather-intro h2{animation-delay:.65s}[data-capitulo="leather-intro"] .leather-intro .material-note{animation-delay:.75s}[data-capitulo="leather-intro"] .leather-intro .text-button{animation-delay:.85s}
.leather{z-index:15;padding:0;color:var(--cream);background:var(--leather);clip-path:circle(0 at 50% 54%);transition:clip-path 1.2s cubic-bezier(.65,0,.2,1),visibility 0s 1.2s}.leather-surface{position:absolute;inset:0;background:radial-gradient(circle at calc(68% + var(--pointer-x)*3%) calc(24% + var(--pointer-y)*3%),#75432d 0,transparent 32%),linear-gradient(145deg,#3b2119,#180c09 76%)}.light-sweep{position:absolute;inset:-40%;background:linear-gradient(112deg,transparent 42%,#fff1 49%,transparent 56%);transform:translateX(-55%);animation:sweep 7s 1.2s ease-in-out infinite}.leather-bag{position:absolute;width:min(74vw,590px);height:min(64vh,620px);left:50%;top:51%;transform:translate(-50%,-45%);overflow:visible;filter:drop-shadow(0 34px 42px #0007)}.leather-bag path,.leather-bag circle{vector-effect:non-scaling-stroke}.bag-shadow{fill:#2f1913;stroke:#8f5538;stroke-width:1}.bag-outline,.handle{fill:none;stroke:#d39a75;stroke-width:2}.handle{stroke-width:3}.seam-guide{fill:none;stroke:#bd7a56;stroke-width:2;stroke-dasharray:3 8;opacity:.32}.seam-progress{fill:none;stroke:#efb68e;stroke-width:3;stroke-linecap:round;stroke-dasharray:.015 .022;stroke-dashoffset:calc(1 - var(--leather-progress));filter:drop-shadow(0 1px 1px #000)}.leather-bag circle{fill:var(--brass);stroke:#6c421f;stroke-width:2}.emboss{position:absolute;right:3vw;bottom:0;font:400 min(38vw,520px)/1 "DM Serif Display",serif;color:#25120e;text-shadow:1px 1px 1px #75452f66,-1px -1px 1px #100705;opacity:.58}.leather-action,.leather-reveal{position:absolute;z-index:3;left:clamp(25px,8vw,118px);right:clamp(25px,8vw,118px);top:clamp(105px,14vh,160px)}.leather-action h2,.leather-reveal h2{font-size:clamp(54px,8vw,112px)}.leather-action .kicker,.leather-action h2{animation:rise .8s .55s both}.leather-action h2{animation-delay:.68s}.leather-track{position:fixed;left:clamp(25px,5vw,62px);right:clamp(25px,5vw,62px);bottom:max(35px,env(safe-area-inset-bottom));height:96px;z-index:5;animation:rise .8s .83s both}.leather-track>span{position:absolute;top:0;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#cfbdb1}.leather-track>div{position:absolute;left:0;right:0;top:51px;height:1px;background:linear-gradient(to right,var(--brass) calc(var(--leather-progress)*100%),#f7eee238 calc(var(--leather-progress)*100%))}.brass-tool{position:absolute;left:calc(var(--leather-progress)*(100% - 58px));top:22px;width:58px;height:58px;border-radius:50%;border:1px solid #66401f;background:radial-gradient(circle at 34% 28%,#ffe0a4 0,#d0a05a 29%,#8a5428 68%,#40230f 100%);box-shadow:0 10px 22px #0008,inset 0 0 0 4px #d9ab6466;cursor:grab;touch-action:none}.brass-tool i{position:absolute;inset:17px;border-radius:50%;border:1px solid #5b3519;box-shadow:inset 1px 1px 2px #3d210e,1px 1px 1px #ffd99955}.leather-reveal{opacity:0;visibility:hidden;transform:translateY(25px);transition:opacity .75s .2s,transform .9s cubic-bezier(.16,1,.3,1) .2s,visibility 0s 1s}.leather-reveal .workshop-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#d8c4b7;margin:20px 0 0}.voucher.dark{border-color:#f7eee288}
[data-capitulo="leather"] .intro,[data-capitulo="leather"] .drag-region,[data-capitulo="leather"] .thread-canvas,[data-capitulo="leather"] .sewing,[data-capitulo="leather"] .leather-intro{opacity:0;visibility:hidden;pointer-events:none}[data-capitulo="leather"] .leather{visibility:visible;clip-path:circle(150vmax at 50% 54%);pointer-events:auto;transition-delay:0s,0s}.leather.is-finished .leather-action{animation:none;opacity:0;transform:translateY(-18px);visibility:hidden;transition:opacity .5s,transform .7s,visibility 0s .7s}.leather.is-finished .leather-bag{opacity:.23;transform:translate(-50%,-45%) scale(1.08);transition:opacity .8s,transform 1.2s cubic-bezier(.16,1,.3,1)}.leather.is-finished .leather-track{animation:none;opacity:0;transform:translateY(25px);pointer-events:none;transition:.55s}.leather.is-finished .leather-reveal{opacity:1;visibility:visible;transform:none;transition-delay:.25s,.25s,0s}.leather.is-finished .leather-reveal .kicker,.leather.is-finished .leather-reveal h2,.leather.is-finished .workshop-label,.leather.is-finished .leather-reveal .voucher,.leather.is-finished .leather-reveal .text-button{animation:rise .75s cubic-bezier(.16,1,.3,1) both}.leather.is-finished .leather-reveal h2{animation-delay:.1s}.leather.is-finished .workshop-label{animation-delay:.18s}.leather.is-finished .leather-reveal .voucher{animation-delay:.25s}.leather.is-finished .leather-reveal .text-button{animation-delay:.33s}
.summary{z-index:19;background:var(--paper);opacity:0;transform:translateY(9%);transition:opacity .7s,transform 1s cubic-bezier(.16,1,.3,1),visibility 0s 1s}.summary>.wordmark{position:absolute;top:clamp(70px,10vh,110px);left:clamp(25px,8vw,118px)}.summary-copy{transform:translateY(-39%)}.summary .kicker,.summary h2,.gift-list,.summary .signature,.summary .text-button{opacity:0;transform:translateY(18px)}.gift-list{margin-top:clamp(35px,5vh,58px);max-width:760px;border-top:1px solid}.gift-list div{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid}.gift-list span{color:var(--pink);font-size:10px}.gift-list strong{font:400 clamp(18px,2.3vw,27px)/1.1 "DM Serif Display",serif}.gift-list i{font-style:normal;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}.signature{font:400 18px/1 "DM Serif Display",serif;margin:25px 0 0}[data-capitulo="complete"] .topbar{color:var(--ink)}[data-capitulo="complete"] .leather{clip-path:circle(0 at 50% 50%);visibility:hidden}[data-capitulo="complete"] .summary{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:.18s,.18s,0s}[data-capitulo="complete"] .summary .kicker,[data-capitulo="complete"] .summary h2,[data-capitulo="complete"] .gift-list,[data-capitulo="complete"] .summary .signature,[data-capitulo="complete"] .summary .text-button{animation:rise .75s cubic-bezier(.16,1,.3,1) both}[data-capitulo="complete"] .summary h2{animation-delay:.08s}[data-capitulo="complete"] .gift-list{animation-delay:.16s}[data-capitulo="complete"] .summary .signature{animation-delay:.24s}[data-capitulo="complete"] .summary .text-button{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes sweep{0%,42%{transform:translateX(-55%)}68%,100%{transform:translateX(55%)}}
@media(max-width:650px){.experience{padding:25px 22px}.topbar{font-size:8px}.chapters i{width:14px}.intro{margin-top:30px}.intro .wordmark{margin-bottom:10vh;font-size:28px}.intro h1{font-size:clamp(53px,17.5vw,80px)}.instruction{width:215px;margin-top:22px}.thread-canvas{inset:auto -38vw 12vh -16vw;height:54vh}.drag-region{left:22px;right:22px}.scene{padding:25px 22px}.scene-copy,.summary-copy{left:22px;right:22px;top:48%;transform:translateY(-44%)}.scene h2,.summary h2{font-size:clamp(62px,19vw,90px)}.voucher{margin-top:45px}.leather-intro .scene-copy{top:48%}.material-note{font-size:13px}.leather-sheet>span{font-size:65vw;right:-.12em;bottom:-.04em}.leather-action,.leather-reveal{left:22px;right:22px;top:112px}.leather-action h2{font-size:16vw}.leather-bag{width:92vw;height:58vh;top:59%}.leather-track{left:22px;right:22px;bottom:max(27px,env(safe-area-inset-bottom))}.leather-reveal{top:50%;transform:translateY(-45%)}.leather.is-finished .leather-reveal{transform:translateY(-45%)}.leather-reveal h2{font-size:clamp(45px,13.2vw,63px);line-height:.88}.leather-reveal .voucher{margin-top:31px}.workshop-label{margin-top:15px!important}.summary>.wordmark{top:67px;left:22px}.summary-copy{top:50%;transform:translateY(-39%)}.summary h2{font-size:clamp(56px,17vw,80px)}.gift-list{margin-top:30px}.gift-list div{grid-template-columns:29px 1fr;padding:15px 0}.gift-list i{display:none}.signature{margin-top:20px}}
@media(max-height:740px) and (max-width:650px){.intro .wordmark{margin-bottom:6vh}.scene-copy{top:52%}.scene h2{font-size:58px}.voucher{margin-top:27px;padding:14px 0}.leather-action{top:86px}.leather-action h2{font-size:54px}.leather-bag{height:54vh;top:61%}.leather-reveal h2{font-size:46px}.leather-reveal .voucher{margin-top:22px}.summary>.wordmark{top:53px}.summary h2{font-size:53px}.gift-list{margin-top:20px}.gift-list div{padding:10px 0}.summary .text-button{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}.spool,.stitch-art{transform:none}.light-sweep{display:none}}