/* Self-hosted copies of the same Google Fonts the design loads (Instrument Serif, DM Mono) */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:block;src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:block;src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:block;src:url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:block;src:url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2")}

/* ---------- design styles: copied verbatim from the canvas ---------- */
body{margin:0;background:#EFE4CF;font-family:"DM Mono",ui-monospace,Menlo,monospace;color:#3E2418}
a{color:#B3261E}a:hover{color:#7E1A16}

/* ---------- 3D scaffolding ---------- */
.p3{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fi{transform:rotateY(180deg)}
.swing{animation:swing calc(22s*var(--s)) ease-in-out 0s infinite}
@keyframes swing{0%,100%{transform:rotateY(0deg)}25%{transform:rotateY(24deg)}75%{transform:rotateY(-24deg)}}
.swing.still{animation:none;transform:rotateY(0deg)}

/* ---------- soil ---------- */
.disk{position:absolute;border-radius:50%;animation:diskIn calc(.9s*var(--s)) cubic-bezier(.2,.7,.3,1) calc(var(--d)*var(--s)) both}
@keyframes diskIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.d1{left:-250px;top:-250px;width:500px;height:500px;background:
 radial-gradient(ellipse 10px 7px at 28% 62%,#D8C6A2 0 55%,transparent 100%),
 radial-gradient(ellipse 7px 5px at 70% 34%,#CDB894 0 55%,transparent 100%),
 radial-gradient(ellipse 12px 8px at 76% 70%,#BFA982 0 55%,transparent 100%),
 radial-gradient(ellipse 6px 4px at 36% 24%,#D8C6A2 0 55%,transparent 100%),
 radial-gradient(circle,rgba(239,228,207,.28) 0 1.2px,transparent 1.8px) 0 0/23px 19px,
 radial-gradient(circle,rgba(30,15,8,.45) 0 1.5px,transparent 2.1px) 7px 11px/31px 27px,
 radial-gradient(closest-side,#6B4228 0%,#573520 58%,#3E2418 86%,rgba(62,36,24,0) 100%)}
.d2{left:-175px;top:-175px;width:350px;height:350px;background:
 radial-gradient(circle,rgba(239,228,207,.22) 0 1.1px,transparent 1.7px) 3px 5px/19px 21px,
 radial-gradient(closest-side,#7A4B2E 0%,#6B4228 62%,rgba(107,66,40,0) 100%)}
.d3{left:-100px;top:-100px;width:200px;height:200px;background:
 radial-gradient(circle,rgba(30,15,8,.35) 0 1.3px,transparent 1.9px) 5px 2px/17px 15px,
 radial-gradient(closest-side,#8A5A38 0%,#7A4B2E 60%,rgba(122,75,46,0) 100%)}
.d4{left:-48px;top:-48px;width:96px;height:96px;background:radial-gradient(closest-side,#93613F 0%,#84563A 55%,rgba(132,86,58,0) 100%)}

/* ---------- garden markers ---------- */
.mk{animation:mk calc(.9s*var(--s)) cubic-bezier(.3,1.5,.5,1) calc(var(--d)*var(--s)) both}
@keyframes mk{from{transform:scale3d(1,.001,1)}to{transform:scale3d(1,1,1)}}
.stick{position:absolute;left:-3px;top:-84px;width:6px;height:100px;background:linear-gradient(90deg,#5A3620,#8A5A38 50%,#5A3620)}
.tag{position:absolute;left:-54px;top:-124px;width:108px;height:46px;box-sizing:border-box;border:1.5px solid #6B4228;border-radius:3px;background:#F3E9D4;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#3E2418}

/* ---------- entwined stems (segments sprout one after another) ---------- */
.sg{animation:segGrow calc(.5s*var(--s)) cubic-bezier(.3,.6,.4,1) calc(var(--d)*var(--s)) both}
@keyframes segGrow{from{transform:scale3d(1,.001,1)}to{transform:scale3d(1,var(--k),1)}}
.sp{position:absolute;left:-5.5px;top:-30px;width:11px;height:30px;background:linear-gradient(90deg,#2F4A1E,#5E7A34 34%,#8FA656 50%,#5E7A34 66%,#2F4A1E)}
.r2{transform:rotateY(60deg)}.r3{transform:rotateY(120deg)}

/* ---------- leaves ---------- */
.leaf{animation:leafOpen calc(2.2s*var(--s)) cubic-bezier(.2,.7,.3,1) calc(var(--d)*var(--s)) both}
@keyframes leafOpen{from{transform:translateZ(6px) rotateX(6deg) scale3d(.04,.04,.04)}to{transform:translateZ(6px) rotateX(var(--la)) scale3d(var(--ls),var(--ls),var(--ls))}}
.leaftip{animation:leafTip calc(2.6s*var(--s)) cubic-bezier(.3,.6,.3,1) calc(var(--d)*var(--s)) both}
@keyframes leafTip{from{transform:translateY(-72px) rotateX(8deg)}to{transform:translateY(-72px) rotateX(var(--lt))}}
.lf1,.lf2{position:absolute;left:-12px;width:24px}
.lf1{top:-72px;height:72px;clip-path:path('M8 72 C 4 50, 0 26, 0 0 L 24 0 C 24 26, 20 50, 16 72 Z');background:
 linear-gradient(to top,rgba(30,45,15,.45),rgba(30,45,15,0) 55%),
 linear-gradient(90deg,#2F4A1E,#4F6B2E 30%,#93AA5A 50%,#4F6B2E 70%,#2F4A1E)}
.lf2{top:-64px;height:64px;clip-path:path('M0 64 C 0 40, 6 18, 12 0 C 18 18, 24 40, 24 64 Z');background:
 linear-gradient(to top,rgba(143,166,86,.15),rgba(47,74,30,.25)),
 linear-gradient(90deg,#2F4A1E,#4F6B2E 30%,#93AA5A 50%,#4F6B2E 70%,#2F4A1E)}

/* ---------- the two lilies ---------- */
.bud{animation:budGrow calc(2.6s*var(--s)) cubic-bezier(.3,.6,.3,1) calc(var(--d)*var(--s)) both}
@keyframes budGrow{from{transform:scale3d(.001,.001,.001)}to{transform:scale3d(.78,.78,.78)}}
.htilt{animation:htilt calc(3.4s*var(--s)) ease-in-out calc(var(--d)*var(--s)) both}
@keyframes htilt{from{transform:rotateZ(var(--t0)) rotateX(0deg)}to{transform:rotateZ(var(--t1)) rotateX(-14deg)}}
.tpb{animation:tpOpen calc(3.2s*var(--s)) cubic-bezier(.45,0,.25,1) calc(var(--d)*var(--s)) both}
@keyframes tpOpen{0%{transform:rotateX(-8deg)}72%{transform:rotateX(-66deg)}100%{transform:rotateX(-60deg)}}
.tpt{animation:tpCurl calc(3.4s*var(--s)) cubic-bezier(.45,0,.25,1) calc((var(--d) + .4s)*var(--s)) both}
@keyframes tpCurl{from{transform:translateY(-120px) rotateX(22deg)}to{transform:translateY(-120px) rotateX(-50deg)}}
.b1{left:-32px;top:-120px;width:64px;height:120px;clip-path:path('M26 120 C 12 92, 0 50, 2 0 L 62 0 C 64 50, 52 92, 38 120 Z')}
.t1{left:-32px;top:-100px;width:64px;height:100px;clip-path:path('M2 100 C 0 60, 18 22, 32 0 C 46 22, 64 60, 62 100 Z')}
.b1.fi{background:
 radial-gradient(circle at 38% 48%,#4A2416 0 2.2px,transparent 3px),
 radial-gradient(circle at 61% 40%,#4A2416 0 2.6px,transparent 3.4px),
 radial-gradient(circle at 46% 64%,#4A2416 0 2px,transparent 2.8px),
 radial-gradient(circle at 57% 73%,#4A2416 0 1.8px,transparent 2.6px),
 radial-gradient(circle at 31% 30%,#4A2416 0 1.8px,transparent 2.6px),
 radial-gradient(circle at 67% 58%,#4A2416 0 2px,transparent 2.8px),
 radial-gradient(circle at 50% 85%,#4A2416 0 1.6px,transparent 2.4px),
 radial-gradient(circle at 42% 18%,#4A2416 0 1.5px,transparent 2.2px),
 linear-gradient(90deg,transparent 47%,rgba(244,213,106,.6) 50%,transparent 53%),
 linear-gradient(90deg,rgba(62,20,12,.45),transparent 22%,transparent 78%,rgba(62,20,12,.45)),
 linear-gradient(to top,var(--throat) 0%,var(--throat) 12%,var(--mid) 34%,var(--petal) 62%,var(--petal) 100%)}
.t1.fi{background:
 radial-gradient(circle at 44% 88%,#4A2416 0 1.4px,transparent 2px),
 linear-gradient(90deg,transparent 48%,rgba(255,200,150,.35) 50%,transparent 52%),
 linear-gradient(90deg,rgba(62,20,12,.45),transparent 24%,transparent 76%,rgba(62,20,12,.45)),
 linear-gradient(to top,var(--petal) 0%,var(--petal) 50%,var(--deep) 100%)}
.b1.fo{background:
 linear-gradient(90deg,transparent 47%,rgba(40,8,4,.35) 50%,transparent 53%),
 linear-gradient(90deg,rgba(40,8,4,.4),transparent 24%,transparent 76%,rgba(40,8,4,.4)),
 linear-gradient(rgba(40,8,4,.2),rgba(40,8,4,.2)),
 linear-gradient(to top,#7F9A45 0%,#9C7A3A 16%,var(--petal) 48%,var(--petal) 100%)}
.t1.fo{background:
 linear-gradient(90deg,rgba(40,8,4,.4),transparent 24%,transparent 76%,rgba(40,8,4,.4)),
 linear-gradient(rgba(40,8,4,.25),rgba(40,8,4,.25)),
 linear-gradient(to top,var(--petal),var(--deep))}
.stm{animation:stamen calc(2.6s*var(--s)) cubic-bezier(.3,.6,.3,1) calc(var(--d)*var(--s)) both}
@keyframes stamen{from{transform:rotateX(0deg) scale3d(.35,.35,.35)}to{transform:rotateX(-24deg) scale3d(1,1,1)}}
.fil{position:absolute;left:-1.5px;top:-150px;width:3px;height:150px;background:linear-gradient(to top,#9DB25A,#E8D98A)}
.anth{position:absolute;left:-13px;top:-5px;width:26px;height:10px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#A5502A,#6B2E17 70%,#4A2416)}
.sty{position:absolute;left:-2.5px;top:-170px;width:5px;height:170px;background:linear-gradient(90deg,#5E7A34,#B9C46A 50%,#5E7A34)}
.stig{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F4D56A,#B08A2A 80%)}

/* ---------- the heart made of both flowers' petals ---------- */
.hp{position:absolute;left:-8px;top:-12px;width:16px;height:24px;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;animation:fly calc(2.6s*var(--s)) cubic-bezier(.35,.1,.25,1) calc(var(--d)*var(--s)) both}
.ha{background:linear-gradient(90deg,transparent 45%,rgba(244,213,106,.5) 50%,transparent 55%),linear-gradient(to top,#7E1A16,var(--pa) 55%,#D2452F)}
.hb{background:linear-gradient(90deg,transparent 45%,rgba(126,26,22,.35) 50%,transparent 55%),linear-gradient(to top,#8A5A1C,var(--pb) 55%,#F4D56A)}
@keyframes fly{
 0%{opacity:0;transform:translate3d(var(--sx),var(--sy),0px) rotateZ(0deg) rotateY(0deg) scale(.15)}
 15%{opacity:1}
 55%{transform:translate3d(var(--mx),var(--my),var(--mz)) rotateZ(calc(var(--r) * .5)) rotateY(200deg) scale(.85)}
 100%{opacity:1;transform:translate3d(var(--x),var(--y),var(--z)) rotateZ(var(--r)) rotateY(var(--ry)) scale(1)}}
.hspin{animation:hspin calc(16s*var(--s)) linear calc(19.4s*var(--s)) infinite}
@keyframes hspin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.hbeat{animation:beat calc(1.6s*var(--s)) ease-in-out calc(19.4s*var(--s)) infinite}
@keyframes beat{0%,60%,100%{transform:scale3d(1,1,1)}14%{transform:scale3d(1.09,1.09,1.09)}28%{transform:scale3d(1,1,1)}42%{transform:scale3d(1.06,1.06,1.06)}}

/* ---------- 2D atmosphere ---------- */
.shadow{animation:diskIn calc(.9s*var(--s)) ease-out 0s both}
.glow{position:absolute;left:280px;top:10px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,213,106,.5),rgba(210,69,47,.14) 55%,rgba(210,69,47,0));animation:glowIn calc(2s*var(--s)) ease-out calc(17.4s*var(--s)) both,glowPulse calc(1.6s*var(--s)) ease-in-out calc(19.4s*var(--s)) infinite}
@keyframes glowIn{from{opacity:0}to{opacity:1}}
@keyframes glowPulse{0%,60%,100%{transform:scale(1)}14%{transform:scale(1.07)}42%{transform:scale(1.04)}}
.mote{position:absolute;border-radius:50%;background:#E9B33B;box-shadow:0 0 8px rgba(233,179,59,.8);opacity:0;animation:mote calc(5s*var(--s)) ease-in-out calc(var(--d)*var(--s)) infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-90px)}}

/* ---------- words ---------- */
.line{position:absolute;left:0;right:0;top:1192px;text-align:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:44px;line-height:1.1;color:#3E2418;animation:lineIn calc(.9s*var(--s)) ease-out calc(var(--d)*var(--s)) both,lineOut calc(.8s*var(--s)) ease-in calc(var(--o)*var(--s)) forwards}
@keyframes lineIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineOut{from{opacity:1}to{opacity:0}}
.final{animation:lineIn calc(1.6s*var(--s)) cubic-bezier(.2,.7,.3,1) calc(18.8s*var(--s)) both}
.sign{animation:lineIn calc(1.2s*var(--s)) ease-out calc(20s*var(--s)) both}
.looping .stage,.looping .fx,.looping .words{animation:sceneOut calc(1.2s*var(--s)) ease-in calc(31s*var(--s)) both}
@keyframes sceneOut{to{opacity:0}}

.ctl{width:44px;height:44px;border-radius:50%;border:1.5px solid #3E2418;background:rgba(247,240,225,.7);color:#3E2418;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s}
.ctl:hover{background:#3E2418;color:#F7F0E1}
.ctl:focus-visible{outline:2px solid #B3261E;outline-offset:3px}
.paused *{animation-play-state:paused !important}

/* ---------- website wrapper: only scales the untouched 1080x1350 artboard to fit the screen ---------- */
html,body{height:100%}
body{overflow:hidden}
.fit{position:fixed;left:50%;top:50%;width:1080px;height:1350px;transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:50% 50%}