/* LOVE THAT HOLDS — a pale ground, pearl and soft rose metal, one object at the centre. */
:root{--lth-ground:#EEE9EC;--lth-ink:#3F3A45;--lth-soft:#6D6674;--lth-rose:#D98FA0;
  --lth-head:'Bodoni Moda',Georgia,serif;--lth-body:'Jost',system-ui,sans-serif}
html,body{background:var(--lth-ground);color:var(--lth-ink)}
body{font-family:var(--lth-body);margin:0}
.lth-arrive{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 20px 11vh;box-sizing:border-box;
  background:radial-gradient(70% 60% at 50% 40%,#FFFFFF 0%,#F3EFF2 40%,#E4DDE3 80%,#D9D1D9 100%)}
.lth-object{position:absolute;inset:0;width:100%;height:100%}
.lth-name{position:relative;z-index:2;margin:0;font-family:var(--lth-head);font-weight:400;font-style:italic;
  font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.01em;color:var(--lth-ink);text-align:center;
  opacity:0;transform:translateY(10px);animation:lth-up 1.6s ease 1.2s forwards}
@keyframes lth-up{to{opacity:1;transform:none}}
.lth-looks{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99;display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.8);border:1px solid rgba(63,58,69,.15);font:500 .66rem/1 var(--lth-body);letter-spacing:.16em;text-transform:uppercase}
.lth-looks a{color:var(--lth-ink);text-decoration:none;padding:.9em 1.2em;border-radius:999px}
.lth-looks a[aria-current]{background:var(--lth-ink);color:#fff}
/* the engine's screens, in this world's hand */
.oms-heading{font-family:var(--lth-head)!important;font-weight:400;letter-spacing:-.01em;line-height:1.12;text-transform:capitalize}
.oms-words{font-family:var(--lth-body);font-weight:300;line-height:1.7}
.oms-onward{font-family:var(--lth-body);font-weight:500;letter-spacing:.08em;border-radius:999px;background:var(--lth-ink);color:#fff;border:0;padding:1em 2.1em}
.oms-choice{font-family:var(--lth-body);border-radius:14px;background:#EFEBEE;color:var(--lth-ink);border:0;padding:1em 1.4em;
  box-shadow:inset 0 3px 7px rgba(70,60,80,.28),inset 0 -1px 0 #fff}
.oms-choice:hover,.oms-choice:focus-visible{background:var(--lth-ink);color:#fff;box-shadow:none}
/* the quick exit */
.lth-exit{position:fixed;top:14px;right:14px;z-index:9999;font:500 .72rem/1 var(--lth-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lth-ink);background:rgba(255,255,255,.88);border:1px solid rgba(63,58,69,.25);border-radius:999px;padding:.9em 1.2em;text-decoration:none}
.lth-exit:hover,.lth-exit:focus-visible{background:var(--lth-ink);color:#fff;outline:none}
@media (prefers-reduced-motion:reduce){ .lth-name{animation:none;opacity:1;transform:none} }

/* the arrival over the journey, and its Begin press (11 Oct) */
.lth-arrive--over{position:fixed;inset:0;z-index:50;transition:opacity .9s ease,transform .9s ease}
.lth-arrive.is-leaving{opacity:0;transform:scale(1.03);pointer-events:none}
.lth-begin{position:relative;z-index:2;margin-top:1.6rem;display:inline-block;font:500 .78rem/1 var(--lth-body);letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:var(--lth-ink);text-decoration:none;padding:1.15em 2.6em;border-radius:999px;opacity:0;animation:lth-up 1.4s ease 2.6s forwards}
.lth-begin:hover,.lth-begin:focus-visible{background:#2C2830;outline:none}
.lth-begin:focus-visible{box-shadow:0 0 0 3px rgba(63,58,69,.25)}
@media (prefers-reduced-motion:reduce){ .lth-begin{animation:none;opacity:1} }

/* hers, 11 Oct: "I don't like this not being in capitals, but holds has to be in emphasis" */
.lth-name{font-style:normal;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(2rem,5vw,4rem);font-weight:400}
.lth-name em{font-style:italic;color:#E2407A;font-weight:500;letter-spacing:.06em}


/* THE GLASS (hers, 11 Oct: "Background more like glass" … "doesn't look like glass enough yet"). Colour drifts
   behind, and three panes of frosted glass stand over it at angles, each with a bright edge and a sheen, behind
   the bangles and behind every screen of the journey. */
html{background:#EFEBF1}
body{background:transparent!important}
/* the journey waits, unseen, until Begin */
.lth-arriving .oms{opacity:0;pointer-events:none}
.oms{transition:opacity .9s ease}
.lth-arrive{background:transparent!important}
.oms-screen{background:transparent!important}
.lth-glass{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#EFEBF1}
.lth-glass::before{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(26% 30% at 20% 28%,rgba(255,150,190,.9),rgba(255,150,190,0) 70%),
    radial-gradient(28% 32% at 80% 24%,rgba(170,160,255,.8),rgba(170,160,255,0) 70%),
    radial-gradient(32% 28% at 66% 80%,rgba(255,200,165,.8),rgba(255,200,165,0) 70%),
    radial-gradient(28% 28% at 26% 82%,rgba(150,225,215,.7),rgba(150,225,215,0) 70%);
  filter:blur(24px);animation:lth-drift 24s ease-in-out infinite alternate}
/* ONE SHEET OF GLASS (hers, 11 Oct: "I just said I want it like glass … I don't understand why you've got these three
   bits"). The whole screen is a single frosted pane: colour moves softly behind it, light catches across it in two long
   reflections, and its edge is bevelled bright. Nothing floats on it. */
.lth-sheet{position:absolute;inset:0;display:block;
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.55) 27%,rgba(255,255,255,.12) 31%,rgba(255,255,255,0) 40%,
      rgba(255,255,255,0) 58%,rgba(255,255,255,.3) 64%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.22) 50%,rgba(255,255,255,.34)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  -webkit-backdrop-filter:blur(34px) saturate(1.4);backdrop-filter:blur(34px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 0 0 6px rgba(255,255,255,.22),inset 0 0 60px rgba(255,255,255,.45)}
.lth-says{position:relative;z-index:2;max-width:30ch;margin:1.1rem auto 0;text-align:center;font-family:var(--lth-body);font-weight:300;
  font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;color:var(--lth-ink);opacity:0;animation:lth-up 1.4s ease 2s forwards}
@media (prefers-reduced-motion:reduce){ .lth-says{animation:none;opacity:1} }
@keyframes lth-drift{0%{transform:translate3d(-4%,-3%,0) rotate(0deg)}100%{transform:translate3d(4%,3%,0) rotate(10deg)}}
@media (prefers-reduced-motion:reduce){ .lth-glass::before{animation:none} }

/* THE SCREENS, MADE BEAUTIFUL (hers, 11 Oct: "the words are too big, it's yelling, I don't like the font, and I don't
   like it black … I hate the onward … why don't you have a beautiful button … I don't like this screen for them to
   type into … Look what made One Thing." Italiana as One Thing has it, set quietly; the world's own deep berry for every
   word, never black; one solid pink press; and a frosted glass well to write in. */
:root{--lth-ink:#5E2A4A;--lth-soft:#7E5A72;--lth-pink:#E2407A}
.oms-screen{color:var(--lth-ink)!important}
.oms-wrap{max-width:34rem}
.oms-heading{font-family:'Italiana',Georgia,serif!important;font-weight:400!important;font-size:clamp(1.55rem,3.4vw,2.2rem)!important;
  line-height:1.25!important;letter-spacing:.03em!important;color:var(--lth-ink)!important;margin:0 0 .9em!important}
.oms-words{font-family:var(--lth-body)!important;font-weight:300;font-size:clamp(1rem,1.5vw,1.1rem)!important;line-height:1.75!important;
  color:var(--lth-soft)!important;max-width:30rem!important}
.oms-onward{display:inline-flex!important;align-items:center;gap:.7em;margin-top:2.2rem!important;
  font:500 .76rem/1 var(--lth-body)!important;letter-spacing:.24em!important;text-transform:uppercase;
  color:#fff!important;background:var(--lth-pink)!important;border:0!important;border-radius:999px!important;
  padding:1.2em 2.4em!important;opacity:1!important;cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(226,64,122,.55),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .3s ease,box-shadow .3s ease!important}
.oms-onward::after{content:"";width:16px;height:1px;background:currentColor;box-shadow:none;
  -webkit-mask:none;transition:width .3s ease}
.oms-onward:hover,.oms-onward:focus-visible{transform:translateY(-1px);box-shadow:0 16px 34px -10px rgba(226,64,122,.65),inset 0 1px 0 rgba(255,255,255,.35)!important;outline:none}
.oms-onward:hover::after{width:24px}
.oms-onward:focus-visible{box-shadow:0 0 0 4px rgba(226,64,122,.25),0 16px 34px -10px rgba(226,64,122,.65)!important}
/* the writing well: frosted glass, set gently into the sheet */
.oms-answer{margin:1.8em auto 0!important;max-width:30rem!important;min-height:8.5em;padding:1.2em 1.4em!important;resize:none!important;
  font-family:var(--lth-body)!important;font-weight:300;font-size:1.05rem!important;line-height:1.7!important;color:var(--lth-ink)!important;
  background:rgba(255,255,255,.42)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.95)!important;border-radius:24px!important;
  box-shadow:inset 0 2px 10px rgba(94,42,74,.08),0 18px 40px -24px rgba(94,42,74,.35)!important;
  transition:background .3s ease,box-shadow .3s ease;caret-color:var(--lth-pink)}
.oms-answer::placeholder{color:var(--lth-soft);opacity:.7;font-style:italic}
.oms-answer:focus{outline:none!important;background:rgba(255,255,255,.62)!important;
  box-shadow:0 0 0 4px rgba(226,64,122,.14),inset 0 2px 10px rgba(94,42,74,.06),0 18px 40px -24px rgba(94,42,74,.35)!important}
.oms-choice{background:rgba(255,255,255,.5)!important;color:var(--lth-ink)!important;border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 10px 26px -16px rgba(94,42,74,.4)!important;font-weight:400}
.oms-choice:hover,.oms-choice:focus-visible{background:var(--lth-pink)!important;color:#fff!important}
.oms-powered{color:var(--lth-soft)}
/* the arrival and the exit in the same hand */
.lth-begin{background:var(--lth-pink)!important;box-shadow:0 12px 28px -10px rgba(226,64,122,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.lth-begin:hover,.lth-begin:focus-visible{background:#D23570!important}
.lth-says{color:var(--lth-soft)}
.lth-exit{color:var(--lth-ink);border-color:rgba(94,42,74,.2)}
.lth-exit:hover,.lth-exit:focus-visible{background:var(--lth-ink)}

/* THE ARRIVAL, LAID OUT SO NOTHING CLIMBS (hers, 11 Oct: "the text is going up. It's not resizing"). The bangles have
   their own stage above the words and size themselves to it, so widening, narrowing or shortening the window never
   puts the words over them. */
.lth-arrive{justify-content:flex-start!important;padding:64px 20px max(6vh,28px)!important}
.lth-stage{position:relative;flex:1 1 auto;min-height:170px;width:100%}
.lth-stage .lth-object{position:absolute;inset:0;width:100%;height:100%}
.lth-words{flex:none;display:flex;flex-direction:column;align-items:center}
.lth-name,.lth-says,.lth-begin{transform:none!important}
@keyframes lth-up{from{opacity:0}to{opacity:1}}

/* THE PRESS, A JEWEL RATHER THAN A FLAT PILL (hers: "Don't ever give me a shit button like that. I hate the flatness").
   One solid rose gold, the same as the bangle, with light along its top edge, a shadow under its lower edge and a soft
   glow beneath, so it sits up off the glass like the bangles do. */
.lth-begin,.oms-onward{background:#E4A3B3!important;color:#fff!important;border:1px solid rgba(255,255,255,.75)!important;
  text-shadow:0 1px 1px rgba(122,48,72,.45);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.75),inset 0 -4px 8px rgba(150,62,92,.38),inset 0 0 0 1px rgba(255,255,255,.18),
    0 14px 30px -12px rgba(150,62,92,.55),0 3px 6px -2px rgba(150,62,92,.25)!important}
.lth-begin:hover,.lth-begin:focus-visible,.oms-onward:hover,.oms-onward:focus-visible{background:#E096A9!important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -4px 8px rgba(150,62,92,.42),0 18px 36px -12px rgba(150,62,92,.6),0 0 0 4px rgba(228,163,179,.25)!important}
.lth-begin:active,.oms-onward:active{box-shadow:inset 0 3px 8px rgba(150,62,92,.45),inset 0 -1px 0 rgba(255,255,255,.5)!important}
.oms-onward::after{display:none}

/* CLEAR GLASS (hers, 11 Oct: "I didn't ask for a rainbow-coloured background. I want it to be like glass"). No colour
   behind it at all: one clear frosted sheet, light running across it, and the faint sea-green a real pane of glass
   holds at its edge. */
html,.lth-glass{background:#EDF0F1!important}
.lth-glass::before{content:"";position:absolute;inset:0;animation:none;filter:none;
  background:radial-gradient(90% 70% at 30% 20%,#FBFCFC 0%,rgba(251,252,252,0) 60%),radial-gradient(80% 60% at 75% 85%,#E3E9EA 0%,rgba(227,233,234,0) 70%)}
.lth-sheet{-webkit-backdrop-filter:blur(30px)!important;backdrop-filter:blur(30px)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 0 0 7px rgba(200,224,220,.35),inset 0 0 0 8px rgba(255,255,255,.6),
    inset 0 0 110px rgba(186,214,210,.4)!important}

/* THE TYPE, chosen with ?try */
html{--t-head:'Cormorant Garamond',Georgia,serif;--t-w:400;--t-body:'Jost',system-ui,sans-serif}
html[data-type="marcellus"]{--t-head:'Marcellus',Georgia,serif}
html[data-type="tenor"]{--t-head:'Tenor Sans',system-ui,sans-serif}
html[data-type="josefin"]{--t-head:'Josefin Sans',system-ui,sans-serif;--t-w:200;--t-body:'Josefin Sans',system-ui,sans-serif}
html[data-type="playfair"]{--t-head:'Playfair Display',Georgia,serif}
html[data-type="italiana"]{--t-head:'Italiana',Georgia,serif}
.lth-name,.oms-heading{font-family:var(--t-head)!important;font-weight:var(--t-w)!important}
.lth-says,.oms-words,.oms-answer,.lth-kicker,.lth-begin,.oms-onward{font-family:var(--t-body)!important}
.lth-name{letter-spacing:.12em;font-size:clamp(1.9rem,4.6vw,3.6rem)!important}
.lth-kicker{margin:.9rem 0 0;font-weight:400;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-em)}
.lth-says{max-width:34ch!important;margin-top:.8rem!important}

/* THE INK, chosen with ?try. Every word is set into the glass: light under each letter, shade over it. */
html{--ink-head:#1F5A5E;--ink-body:#3E6466;--ink-em:#2E8A8C}
html[data-ink="midnight"]{--ink-head:#232B4A;--ink-body:#444B66;--ink-em:#4A5BA8}
html[data-ink="violet"]{--ink-head:#4B3A8C;--ink-body:#5A5277;--ink-em:#7A5CD0}
html[data-ink="rose"]{--ink-head:#B0285C;--ink-body:#6B4E63;--ink-em:#E2407A}
html[data-ink="silver"]{--ink-head:#5B6270;--ink-body:#666C7A;--ink-em:#8A93A6}
.lth-name,.oms-heading{color:var(--ink-head)!important;background:none!important;-webkit-text-fill-color:currentColor}
.lth-name em{color:var(--ink-em)!important;-webkit-text-fill-color:var(--ink-em)}
.lth-name,.oms-heading{filter:none;text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(20,40,50,.12)}
.lth-says,.oms-words,.oms-powered{color:var(--ink-body)!important;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.oms-answer,.oms-choice{color:var(--ink-body)!important}
.oms-answer::placeholder{color:var(--ink-body)!important}
.oms-answer:focus{box-shadow:0 0 0 4px rgba(46,138,140,.14),inset 0 2px 10px rgba(30,60,70,.06),0 18px 40px -24px rgba(30,60,70,.3)!important}
.lth-exit{color:var(--ink-body)!important;border-color:rgba(30,60,70,.18)!important}
.lth-exit:hover,.lth-exit:focus-visible{background:var(--ink-head)!important;color:#fff!important}

/* THE PRESS: the bevelled jewel drawn in face.js, one size everywhere */
.lth-begin,.oms-onward{display:inline-flex!important;align-items:center;justify-content:center;width:240px;max-width:80vw;height:62px;padding:0!important;
  background:#E4A3B3 var(--lth-jewel) center/100% 100% no-repeat!important;border:0!important;border-radius:999px!important;
  color:#fff!important;font-weight:500!important;font-size:.78rem!important;letter-spacing:.26em!important;text-transform:uppercase;
  text-shadow:0 1px 1px rgba(110,40,62,.55),0 0 1px rgba(110,40,62,.3);
  box-shadow:0 16px 30px -14px rgba(130,60,85,.55),0 4px 8px -4px rgba(130,60,85,.35)!important;transition:transform .25s ease,filter .25s ease,box-shadow .25s ease!important}
.lth-begin:hover,.lth-begin:focus-visible,.oms-onward:hover,.oms-onward:focus-visible{background:#E4A3B3 var(--lth-jewel) center/100% 100% no-repeat!important;
  filter:brightness(1.05);transform:translateY(-1px)!important;box-shadow:0 20px 36px -14px rgba(130,60,85,.6),0 0 0 4px rgba(228,163,179,.28)!important;outline:none}
.lth-begin:active,.oms-onward:active{transform:translateY(1px)!important;filter:brightness(.97)}

.lth-inks{position:fixed;left:12px;top:12px;right:120px;z-index:9998;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.lth-inks-row{display:flex;flex-wrap:wrap;gap:3px;padding:4px;border-radius:18px;background:rgba(255,255,255,.88);border:1px solid rgba(30,60,70,.15);
  font:500 .62rem/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.lth-inks a{color:#3E4A52;text-decoration:none;padding:.8em 1em;border-radius:999px;white-space:nowrap}
.lth-inks a[aria-current]{background:#3E4A52;color:#fff}

/* hers, 11 Oct: "go Tenor and Sea Glass" */
html{--t-head:'Tenor Sans',system-ui,sans-serif;--t-w:400}
html[data-type="cormorant"]{--t-head:'Cormorant Garamond',Georgia,serif}
.lth-name{letter-spacing:.16em}
/* HOLDS, four ways to press between with ?try (her sentence "the holds needs to be…" was cut off) */
.lth-name em{font-style:normal!important;letter-spacing:inherit!important}
html[data-holds="pink"] .lth-name em{color:#E2407A!important;-webkit-text-fill-color:#E2407A}
html[data-holds="deep"] .lth-name em{color:#2E8A8C!important;-webkit-text-fill-color:#2E8A8C;-webkit-text-stroke:.5px #2E8A8C;text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 18px rgba(120,200,195,.45)}
html[data-holds="shine"] .lth-name em{background:linear-gradient(100deg,#1F5A5E 0%,#1F5A5E 40%,#9FD6D2 50%,#1F5A5E 60%,#1F5A5E 100%)!important;
  background-size:250% 100%!important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:lth-shine 5s ease-in-out infinite}
@keyframes lth-shine{0%{background-position:100% 0}60%,100%{background-position:0 0}}
html[data-holds="larger"] .lth-name em{color:#E2407A!important;-webkit-text-fill-color:#E2407A;font-size:1.32em;vertical-align:-.04em}
@media (prefers-reduced-motion:reduce){ html[data-holds="shine"] .lth-name em{animation:none} }
/* the band of light across the jewel when touched */
.lth-begin,.oms-onward{position:relative;overflow:hidden}
.lth-begin::before,.oms-onward::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;border-radius:999px;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0}
.lth-begin:hover::before,.lth-begin:focus-visible::before,.oms-onward:hover::before,.oms-onward:focus-visible::before{animation:lth-sweep 1.1s ease forwards}
@keyframes lth-sweep{0%{left:-40%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}

/* HOLDS, ITS OWN HAND (hers, 11 Oct: "it needs to be a different font … or a little less space between the letters
   just in that one word, and italicise"). Sea glass, closer letters, a true italic; four to press with ?try. */
html .lth-name em{color:#2E8A8C!important;-webkit-text-fill-color:#2E8A8C;-webkit-text-stroke:0;background:none!important;animation:none;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 18px rgba(120,200,195,.4);font-size:1em;vertical-align:baseline;margin-left:.08em}
html[data-holds="corm"] .lth-name em{font-family:'Cormorant Garamond',Georgia,serif!important;font-style:italic!important;font-weight:500;
  letter-spacing:.03em!important;font-size:1.22em;vertical-align:-.03em}
html[data-holds="playfair"] .lth-name em{font-family:'Playfair Display',Georgia,serif!important;font-style:italic!important;font-weight:400;
  letter-spacing:.02em!important;font-size:1.04em}
html[data-holds="bodoni"] .lth-name em{font-family:'Bodoni Moda',Georgia,serif!important;font-style:italic!important;font-weight:500;
  letter-spacing:.02em!important;font-size:1.08em}
html[data-holds="tight"] .lth-name em{font-style:normal!important;display:inline-block;transform:skewX(-10deg);letter-spacing:.04em!important}

/* HOLDS in metal: the word is drawn by face.js; the real letters stay, unseen, for anybody reading aloud */
html[data-holds] .lth-name em{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;font-size:1.1em!important;
  letter-spacing:.12em!important;margin-left:.06em;vertical-align:baseline!important;transform:none!important;display:inline-block;animation:none!important}
html[data-holds] .lth-name em.is-metal{color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;
  background-repeat:no-repeat!important;background-position:center!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  filter:drop-shadow(0 2px 2px rgba(110,60,80,.22)) drop-shadow(0 8px 14px rgba(110,60,80,.14))}
html[data-holds="crystal"] .lth-name em.is-metal{filter:drop-shadow(0 1px 1px rgba(40,90,95,.25)) drop-shadow(0 8px 14px rgba(40,90,95,.12))}
html[data-holds="gold"] .lth-name em.is-metal{filter:drop-shadow(0 2px 2px rgba(120,85,30,.25)) drop-shadow(0 8px 14px rgba(120,85,30,.14))}
html[data-holds="deepsea"] .lth-name em.is-metal{filter:drop-shadow(0 2px 2px rgba(20,60,62,.25)) drop-shadow(0 8px 14px rgba(20,60,62,.14))}

/* THE MOMENTS — one small part of a love that holds at a time, on the glass */
.lth-arriving .lth-journey{opacity:0;pointer-events:none}
.lth-journey{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:84px 22px 64px;box-sizing:border-box;transition:opacity .9s ease;text-align:center}
.lth-journey.is-ended{align-items:flex-start}
.lth-moment{width:100%;max-width:34rem;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.lth-moment.is-in{opacity:1;transform:none}
.lth-dots{display:flex;gap:9px;justify-content:center;list-style:none;padding:0;margin:0 0 2.6rem}
.lth-dots li{width:7px;height:7px;border-radius:50%;background:rgba(31,90,94,.14);box-shadow:inset 0 1px 1px rgba(255,255,255,.9);transition:background .4s ease,transform .4s ease}
.lth-dots li.is-done{background:rgba(31,90,94,.42)}
.lth-dots li.is-now{background:#2E8A8C;transform:scale(1.35)}
.lth-m-title,.lth-end-title{font-family:var(--t-head);font-weight:400;font-size:clamp(1.7rem,3.8vw,2.4rem);letter-spacing:.08em;line-height:1.2;
  color:var(--ink-head);margin:0 0 1.1rem;text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(20,40,50,.1)}
.lth-m-picture{font-family:var(--t-body);font-weight:300;font-size:clamp(1.12rem,2.1vw,1.32rem);line-height:1.7;color:var(--ink-body);
  margin:0 auto;max-width:27ch;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.lth-m-ask{margin:2.4rem 0 1.1rem;font:400 .7rem/1 var(--t-body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-em)}
.lth-m-choices{display:flex;flex-direction:column;gap:12px;align-items:center}
.lth-pick{width:min(320px,86vw);padding:1.1em 1.4em;border-radius:999px;cursor:pointer;font:400 .95rem/1 var(--t-body);letter-spacing:.06em;
  color:var(--ink-head);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 7px rgba(31,90,94,.08),0 12px 26px -16px rgba(31,90,94,.4);transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.lth-pick:hover,.lth-pick:focus-visible{background:rgba(255,255,255,.78);transform:translateY(-1px);outline:none;box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(46,138,140,.16),0 14px 28px -16px rgba(31,90,94,.45)}
.lth-pick[aria-pressed="true"]{background:#2E8A8C;color:#fff;border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px 8px rgba(10,50,52,.35),0 14px 28px -14px rgba(31,90,94,.55)}
.lth-back{margin-top:1.8rem;background:none;border:0;cursor:pointer;font:400 .72rem/1 var(--t-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-body);opacity:.75}
.lth-back:hover,.lth-back:focus-visible{opacity:1;outline:none;text-decoration:underline;text-underline-offset:4px}
/* the end */
.lth-end{width:100%;max-width:38rem;opacity:0;transition:opacity .8s ease}
.lth-end.is-in{opacity:1}
.lth-end h3{margin:2.6rem 0 .6rem;font:400 .76rem/1.4 var(--t-body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-em)}
.lth-end p{font-family:var(--t-body);font-weight:300;font-size:1.05rem;line-height:1.7;color:var(--ink-body);margin:0 auto;max-width:34ch}
.lth-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;padding:0;margin:1.2rem 0 0}
.lth-tags li{padding:.75em 1.2em;border-radius:999px;font:400 .9rem/1 var(--t-body);letter-spacing:.04em;color:#fff;background:#2E8A8C;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -3px 6px rgba(10,50,52,.3),0 10px 22px -14px rgba(31,90,94,.55)}
.lth-cards{display:flex;flex-direction:column;gap:14px;margin-top:1.3rem}
.lth-card,.lth-last{padding:1.5rem 1.4rem;border-radius:26px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 18px 40px -26px rgba(31,90,94,.45)}
.lth-card h4{margin:0 0 .5rem;font-family:var(--t-head);font-weight:400;font-size:1.2rem;letter-spacing:.08em;color:var(--ink-head)}
.lth-card .lth-card-picture{font-size:1rem}
.lth-card-start,.lth-card-note{margin-top:.8rem!important;font-style:italic;color:var(--ink-head)!important}
.lth-end-all{margin-top:2rem!important;font-size:1.15rem!important}
.lth-last{margin-top:2.6rem}
.lth-last h3{margin-top:0}
.lth-quiet{margin-top:1rem!important;font-size:.88rem!important;opacity:.85}
.lth-quiet a{color:var(--ink-head)}
.lth-again{margin:2.4rem auto 0;display:inline-flex!important;align-items:center;justify-content:center;width:240px;max-width:80vw;height:62px;padding:0;cursor:pointer;
  background:#E4A3B3 var(--lth-jewel) center/100% 100% no-repeat;border:0;border-radius:999px;color:#fff;font:500 .78rem/1 var(--t-body);letter-spacing:.26em;text-transform:uppercase;
  text-shadow:0 1px 1px rgba(110,40,62,.55);box-shadow:0 16px 30px -14px rgba(130,60,85,.55),0 4px 8px -4px rgba(130,60,85,.35)}
.lth-again:hover,.lth-again:focus-visible{filter:brightness(1.05);outline:none}
@media (prefers-reduced-motion:reduce){ .lth-moment,.lth-end{transition:none} }

/* THE EIGHT AND THE FOUR WAYS — glass on glass, sea glass words, the jewel to move on */
.lth-journey{align-items:flex-start}
.lth-ring,.lth-area,.lth-view{width:100%;max-width:46rem;margin:0 auto;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.lth-ring.is-in,.lth-area.is-in,.lth-view.is-in{opacity:1;transform:none}
.lth-ring-ask{font-family:var(--t-head);font-weight:400;color:var(--ink-head);font-size:clamp(1.45rem,3.4vw,2.1rem);letter-spacing:.06em;line-height:1.3;
  margin:2vh auto 2rem;max-width:22ch;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.95)}
.lth-ring-round{position:relative}
.lth-ring-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lth-ring-list.is-round{display:block;position:relative;width:min(78vh,640px);aspect-ratio:1;margin:0 auto}
.lth-ring-list.is-round li{position:absolute;transform:translate(-50%,-50%)}
.lth-ring-glow{display:none}
.lth-ring-list.is-round ~ .lth-ring-glow,.lth-ring-round:has(.is-round) .lth-ring-glow{display:block;position:absolute;left:50%;top:50%;width:min(52vh,420px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 0 0 10px rgba(200,224,220,.25),inset 0 0 60px rgba(255,255,255,.7),0 30px 60px -40px rgba(31,90,94,.5);pointer-events:none}
.lth-gem{width:100%;min-height:84px;padding:1em .9em;border-radius:22px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;
  font:400 .98rem/1.25 var(--t-head);letter-spacing:.06em;color:var(--ink-head);background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 8px rgba(31,90,94,.08),0 14px 30px -18px rgba(31,90,94,.45);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.lth-ring-list.is-round .lth-gem{width:150px;min-height:96px;border-radius:999px}
.lth-gem:hover,.lth-gem:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.82);outline:none;
  box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(46,138,140,.16),0 18px 34px -18px rgba(31,90,94,.5)}
.lth-gem.is-soon{opacity:.62}
.lth-home,.lth-up{display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.8rem;background:none;border:0;cursor:pointer;padding:.4em 0;
  font:400 .72rem/1 var(--t-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-body)}
.lth-home::before,.lth-up::before{content:"";width:18px;height:1px;background:currentColor}
.lth-home:hover,.lth-up:hover,.lth-home:focus-visible,.lth-up:focus-visible{color:var(--ink-head);outline:none}
.lth-a-title{font-family:var(--t-head);font-weight:400;font-size:clamp(2rem,5vw,3rem);letter-spacing:.08em;color:var(--ink-head);margin:0 0 .6rem;
  text-shadow:0 1px 0 rgba(255,255,255,.95)}
.lth-a-line,.lth-pic-p,.lth-scene{font-family:var(--t-body);font-weight:300;font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.7;color:var(--ink-body);
  max-width:30ch;margin:0 auto;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.lth-a-ask{margin:2.4rem 0 1.1rem;font:400 .7rem/1 var(--t-body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-em)}
.lth-ways{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:34rem;margin:0 auto}
.lth-way{display:flex;flex-direction:column;align-items:center;gap:.45em;padding:1.4em 1em 1.3em;border-radius:24px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 16px 32px -20px rgba(31,90,94,.45);transition:transform .3s ease,box-shadow .3s ease,background .3s ease;color:var(--ink-head)}
.lth-way:hover,.lth-way:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.82);outline:none;box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(46,138,140,.16),0 20px 36px -20px rgba(31,90,94,.5)}
.lth-way b{font:400 1.02rem/1.25 var(--t-head);letter-spacing:.06em}
.lth-way span{font:300 .86rem/1.4 var(--t-body);color:var(--ink-body)}
.lth-way-mark{position:relative;width:38px;height:38px;margin-bottom:.3em}
.lth-way-mark::before,.lth-way-mark::after{content:"";position:absolute;border-radius:50%;border:2px solid #2E8A8C;opacity:.85}
.lth-way-mark--picture::before{inset:6px;border-color:#2E8A8C}
.lth-way-mark--picture::after{inset:14px;background:#2E8A8C;border:0;opacity:.35}
.lth-way-mark--two::before{left:2px;top:9px;width:20px;height:20px}
.lth-way-mark--two::after{right:2px;top:9px;width:20px;height:20px;border-color:#E4A3B3}
.lth-way-mark--truths::before{left:6px;top:6px;width:22px;height:28px;border-radius:6px;transform:rotate(-8deg)}
.lth-way-mark--truths::after{left:12px;top:4px;width:22px;height:28px;border-radius:6px;transform:rotate(7deg);background:rgba(255,255,255,.8)}
.lth-way-mark--small::before{left:13px;top:13px;width:12px;height:12px;background:#E4A3B3;border:0;opacity:1;box-shadow:0 0 0 7px rgba(228,163,179,.25)}
.lth-way-mark--small::after{display:none}
/* how it can be */
.lth-pic{opacity:0;transition:opacity .4s ease}.lth-pic.is-in{opacity:1}
.lth-pic-h{font-family:var(--t-head);font-weight:400;font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:.07em;color:var(--ink-head);margin:0 0 1rem;line-height:1.2;
  text-shadow:0 1px 0 rgba(255,255,255,.95)}
.lth-jewel{margin:2.2rem auto 0;display:inline-flex;align-items:center;justify-content:center;width:240px;max-width:80vw;height:62px;padding:0;cursor:pointer;
  background:#E4A3B3 var(--lth-jewel) center/100% 100% no-repeat;border:0;border-radius:999px;color:#fff;font:500 .78rem/1 var(--t-body);letter-spacing:.26em;text-transform:uppercase;
  text-shadow:0 1px 1px rgba(110,40,62,.55);box-shadow:0 16px 30px -14px rgba(130,60,85,.55),0 4px 8px -4px rgba(130,60,85,.35);transition:transform .25s ease,filter .25s ease}
.lth-jewel:hover,.lth-jewel:focus-visible{filter:brightness(1.05);transform:translateY(-1px);outline:none}
.lth-turns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.8rem auto 0;max-width:36rem}
.lth-turn{position:relative;min-height:150px;border:0;padding:0;cursor:pointer;background:none;perspective:900px}
.lth-turn-f,.lth-turn-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:22px;text-align:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1);border:1px solid rgba(255,255,255,.95)}
.lth-turn-f{font:400 1.02rem/1.35 var(--t-head);letter-spacing:.05em;color:var(--ink-head);background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 16px 30px -20px rgba(31,90,94,.45)}
.lth-turn-b{font:300 .9rem/1.5 var(--t-body);color:#fff;background:#2E8A8C;transform:rotateY(180deg);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.35),inset 0 -4px 10px rgba(10,50,52,.3),0 16px 30px -18px rgba(31,90,94,.55)}
.lth-turn.is-turned .lth-turn-f{transform:rotateY(-180deg)}
.lth-turn.is-turned .lth-turn-b{transform:rotateY(0)}
.lth-turn:focus-visible{outline:2px solid #2E8A8C;outline-offset:3px;border-radius:22px}
@media (max-width:420px){ .lth-turn{min-height:176px} }
/* two people */
.lth-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:1.6rem 0 1.4rem}
.lth-tab{padding:.95em 1.3em;border-radius:999px;cursor:pointer;font:400 .86rem/1 var(--t-body);letter-spacing:.06em;color:var(--ink-head);
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 10px 22px -14px rgba(31,90,94,.4)}
.lth-tab[aria-pressed="true"]{background:#2E8A8C;color:#fff;box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -3px 7px rgba(10,50,52,.3)}
.lth-talk[data-k="hurt"] .lth-tab{} 
.lth-talk{display:flex;flex-direction:column;gap:12px;max-width:30rem;margin:0 auto;min-height:320px}
.lth-say{max-width:80%;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;text-align:left}
.lth-say.is-in{opacity:1;transform:none}
.lth-say.is-left{align-self:flex-start}.lth-say.is-right{align-self:flex-end;text-align:right}
.lth-who{display:block;font:400 .66rem/1 var(--t-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-em);margin:0 .9em .4em}
.lth-said{display:inline-block;padding:.85em 1.1em;border-radius:20px;font:300 1.02rem/1.5 var(--t-body);color:var(--ink-head);
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 10px 22px -16px rgba(31,90,94,.45)}
.lth-say.is-right .lth-said{background:rgba(228,163,179,.28)}
.lth-talk[data-k="hurt"] .lth-said{color:#5B6270}
.lth-say.is-told{align-self:center;max-width:92%;text-align:center}
.lth-say.is-told .lth-said{background:none;border:0;box-shadow:none;font-style:italic;color:var(--ink-body)}
/* little truths */
.lth-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.4rem 4px 1.8rem;margin:0 -4px;-webkit-overflow-scrolling:touch}
.lth-rail:focus-visible{outline:2px solid #2E8A8C;outline-offset:4px;border-radius:12px}
.lth-truth{flex:0 0 min(78%,300px);scroll-snap-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:.8rem;padding:1.6rem 1.4rem;
  border-radius:26px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 18px 34px -22px rgba(31,90,94,.5);text-align:left}
.lth-truth-k{font:400 .68rem/1.3 var(--t-body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-em)}
.lth-truth-p{margin:0;font:400 1.3rem/1.4 var(--t-head);letter-spacing:.03em;color:var(--ink-head)}
.lth-truth--x{background:rgba(228,163,179,.22)}
.lth-truth--x .lth-truth-k{color:#B0587A}
.lth-truth--c{background:#2E8A8C}
.lth-truth--c .lth-truth-k{color:rgba(255,255,255,.8)}
.lth-truth--c .lth-truth-p{color:#fff}
/* one small thing */
.lth-small{max-width:32rem;margin:0 auto;padding:2rem 1.6rem;border-radius:28px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 20px 40px -26px rgba(31,90,94,.5)}
.lth-small-say{margin:1.4rem auto;font:400 1.4rem/1.45 var(--t-head);letter-spacing:.03em;color:#2E8A8C;max-width:22ch}
@media (max-width:420px){ .lth-ways{grid-template-columns:1fr 1fr;gap:10px} .lth-way{padding:1.1em .7em} }
@media (prefers-reduced-motion:reduce){ .lth-ring,.lth-area,.lth-view,.lth-pic,.lth-say{transition:none} .lth-turn-f,.lth-turn-b{transition:none} }
/* the ring fits the screen; its centre shows the area you are touching */
.lth-ring-ask{margin:0 auto 1.2rem}
.lth-ring-list.is-round{width:min(66vh,600px)}
.lth-ring-round:has(.is-round) .lth-ring-glow{width:min(40vh,360px);display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;padding:2rem;box-sizing:border-box;text-align:center}
.lth-ring-glow b{font:400 1.35rem/1.25 var(--t-head);letter-spacing:.07em;color:var(--ink-head)}
.lth-ring-glow span{font:300 .98rem/1.55 var(--t-body);color:var(--ink-body);max-width:20ch}
.lth-ring-glow i{font:400 .68rem/1 var(--t-body);font-style:normal;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-em)}
.lth-gem.is-soon{opacity:.82}