/* YAMH — You Are My Hero. The look, carried whole from the design she chose on 19 Oct 2026. */

:root{
  --pearl:#FBF8F5; --deep:#2B2236; --soft:#6A5E73;
  --brass:#E6C97A; --gold:#D9B05A; --copper:#E8915A; --peach:#F0BE96;
}
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes turn{to{--spin:360deg}}
@keyframes cw{to{transform:rotate(360deg)}}
@keyframes ccw{to{transform:rotate(-360deg)}}
@keyframes morph{0%{border-radius:47% 53% 58% 42%/45% 41% 59% 55%}50%{border-radius:58% 42% 40% 60%/52% 60% 40% 48%}100%{border-radius:42% 58% 55% 45%/60% 45% 55% 40%}}
*{box-sizing:border-box}
html,body{margin:0;background:#FFFFFF;color:var(--deep);font-family:Karla,system-ui,-apple-system,sans-serif}
body{padding-inline:16px}
.app{max-width:480px;margin:0 auto;position:relative;min-height:100vh;padding-top:10px}

/* the liquid pearl, one recipe for everything that shines */
.liquid{background-image:radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 28%),conic-gradient(from var(--spin),#F7F1EC,#E6C97A,#D9B05A,#F3E7DC,#F0BE96,#E8915A,#FBF6F2,#E6C97A,#F7F1EC)}

/* the top */
.strip{position:relative;border-radius:30px;overflow:hidden;background:var(--pearl);padding:26px 0 30px;display:flex;flex-direction:column;align-items:center}
.menu{position:absolute;left:14px;top:12px;width:58px;height:58px;z-index:3;border:0;padding:0;cursor:pointer;background:none;isolation:isolate;font-size:46px;line-height:58px;text-align:center;filter:drop-shadow(0 10px 12px rgba(232,145,90,.3))}
.menu:after{content:"\01F64F";position:absolute;inset:0;font-size:46px;line-height:58px;text-align:center;color:transparent;background:conic-gradient(from var(--spin),#F7F1EC,#E6C97A,#D9B05A,#F3E7DC,#F0BE96,#E8915A,#FBF6F2,#E6C97A,#F7F1EC);-webkit-background-clip:text;background-clip:text;mix-blend-mode:color;pointer-events:none}
.menu:active{transform:translateY(3px)}
.menu:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:14px}

/* YAMH, in the Reflection's lettering */
.name{margin:44px 0 0;text-align:center}
.big{display:block;font:800 104px/1 Karla,sans-serif;letter-spacing:.02em;color:transparent;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 #F4C49C) drop-shadow(0 1px 0 #F0B488) drop-shadow(0 1px 0 #ECA677) drop-shadow(0 2px 0 #E89A6A) drop-shadow(0 16px 14px rgba(232,145,90,.28))}
.water{display:block;position:relative;height:38px;margin-top:6px;overflow:hidden;border-top:1px solid rgba(230,201,122,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,230,218,.35) 50%,rgba(251,248,245,0))}
.ghost{display:block;font:800 104px/1 Karla,sans-serif;letter-spacing:.02em;transform:scaleY(-1);transform-origin:50% 0;color:#E6C97A;opacity:.22;
  -webkit-mask:linear-gradient(0deg,#000,transparent 60%);mask:linear-gradient(0deg,#000,transparent 60%)}

/* the two orbits: slim mother-of-pearl rings, taking their colours from the liquid pearl in the middle */
.orbit{position:relative;width:360px;height:360px;margin-top:10px;flex:none}
.tube{position:absolute;border-radius:50%}
.tube.o{inset:0;--ri:77.8%;background:radial-gradient(circle closest-side,transparent 0 var(--ri),#E6C97A calc(var(--ri) + .1%),#FFF8E6 85.3%,#FFFFFF 88.2%,#F6E3AE 93.6%,#E6C97A 100%);
  filter:drop-shadow(0 12px 16px rgba(230,201,122,.5))}
.tube.i{inset:52px;--ri:76.6%;background:radial-gradient(circle closest-side,transparent 0 var(--ri),#E06A32 calc(var(--ri) + .1%),#EC8048 83.2%,#F39A64 87.8%,#EA7C44 94.4%,#E06A32 100%);
  filter:drop-shadow(0 8px 12px rgba(232,145,90,.4))}
/* the sheen of the pearl, drifting round each ring */
.tube:after{content:"";position:absolute;inset:0;border-radius:50%;
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 var(--ri),#000 calc(var(--ri) + .1%));mask:radial-gradient(circle closest-side,transparent 0 var(--ri),#000 calc(var(--ri) + .1%))}
.tube.o:after{background:conic-gradient(from var(--spin),rgba(255,255,255,.6),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 50%,rgba(255,255,255,.45) 66%,rgba(255,255,255,0) 84%,rgba(255,255,255,.6))}
.tube.i:after{background:conic-gradient(from var(--spin),rgba(255,255,255,.45),rgba(255,255,255,0) 20%,rgba(255,255,255,0) 52%,rgba(255,255,255,.35) 68%,rgba(255,255,255,0) 86%,rgba(255,255,255,.45))}
.tube:before{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;background:linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,0) 45%,rgba(232,145,90,.08));
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 var(--ri),#000 calc(var(--ri) + .1%));mask:radial-gradient(circle closest-side,transparent 0 var(--ri),#000 calc(var(--ri) + .1%))}
.blob{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:47% 53% 58% 42%/45% 41% 59% 55%;
  box-shadow:inset -18px -24px 40px rgba(232,145,90,.26),inset 16px 16px 30px rgba(255,255,255,.8),0 24px 36px -20px rgba(232,145,90,.45)}
.ring{position:absolute;inset:0}
.ch{position:absolute;left:0;top:0;white-space:pre;line-height:1}
.outer .ch{font:800 23px/1 Karla,sans-serif;color:#D9622B;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.inner .ch{font:600 15px/1 Jost,Karla,sans-serif;color:#FFFFFF;text-shadow:0 1px 1px rgba(190,80,30,.45)}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the thank-yous: the deeper the difference, the deeper the card */
.river{position:relative;margin-top:-30px;padding:50px 0 130px;border-radius:0 0 30px 30px}
.river:before{content:"";position:absolute;inset:0;border-radius:30px;z-index:0;
  background:radial-gradient(ellipse at 82% 0%,rgba(230,201,122,.85),rgba(255,255,255,0) 55%),radial-gradient(ellipse at 10% 35%,rgba(240,190,150,.75),rgba(255,255,255,0) 50%),radial-gradient(ellipse at 70% 72%,rgba(246,227,174,.8),rgba(255,255,255,0) 55%),var(--pearl)}
.river > *{position:relative;z-index:1}
.cards{display:grid;gap:14px;padding:0 14px}
.card{position:relative;border-radius:24px;padding:18px 20px 16px;overflow:hidden}
.card > *{position:relative}
.depth{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:700 11px Karla,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--copper)}
.depth i{width:9px;height:9px;border-radius:50%;border:1px solid var(--brass);background:transparent}
.depth i.on{border:0;background:conic-gradient(#FBF6F2,#E6C97A,#F0BE96,#FBF6F2);box-shadow:inset -1px -1px 2px rgba(232,145,90,.5)}
.depth span{margin-left:4px}
.card .yrole{margin:0 0 2px;font:700 11px Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.d3 .yrole{color:#FFF3E6}
.card h2{margin:0 0 6px;font:700 22px/1.2 Karla,sans-serif;letter-spacing:-.005em;text-wrap:balance;color:var(--deep)}
.card p.words{margin:0;font:400 16px/1.55 Karla,sans-serif;color:var(--deep)}
.card .from{margin:10px 0 0;font:400 13.5px Karla,sans-serif;color:var(--soft)}
.card .from b{font-weight:400;color:var(--soft)}
/* made a difference: a small white note, narrower, light as paper */
.d1{margin:0 22px;padding:12px 16px 10px;border-radius:16px;background:#FFFFFF;box-shadow:0 6px 14px -10px rgba(232,145,90,.35)}
.d1 .depth{font-size:10px;margin-bottom:5px}
.d1 h2{font-size:17px;margin-bottom:3px}
.d1 p.words{font-size:14.5px;line-height:1.5}
.d1 .from{font-size:12.5px;margin-top:6px}
/* touched a life: the gold of the outer ring, a soft gold card with a gold ring for its edge */
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
.d2{padding:24px 24px 20px;border-radius:26px;background:linear-gradient(160deg,#FFFBEF,#F8EBC4 55%,#F3DEA0);
  box-shadow:inset 0 0 0 2px #E6C97A,inset 0 0 0 5px #FFF8E6,inset 0 0 0 7px #E6C97A,0 22px 40px -20px rgba(230,201,122,.9)}
.d2:before{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0))}
.d2 .depth{color:#C98A1E}
.d2 .depth i{border-color:#E6C97A}
.d2 h2{font-size:23px}
/* changed a life: the orange of the inner ring, the whole card alive and turning, white words, its own little dial */
.d3{margin:14px 0 10px;padding:96px 30px 34px;border-radius:34px;text-align:center;
  box-shadow:0 0 0 4px #FFF8E6,0 0 0 9px #E6C97A,0 0 0 11px #FFFFFF,0 0 70px 12px rgba(236,128,72,.45),0 40px 60px -24px rgba(224,106,50,.7)}
.d3:before{content:"";position:absolute;inset:-60%;background:conic-gradient(from var(--spin),#E06A32,#E8783E,#EE8A4C,#E8803F,#E06A32,#E8783E,#EE8E52,#E06A32)}
.d3:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 45%)}
.d3 > *{z-index:1}
.d3 .orb{position:absolute;left:50%;top:22px;width:54px;height:54px;margin-left:-27px;border-radius:50%;z-index:2;
  box-shadow:0 0 0 4px #FFF8E6,0 0 0 9px #E6C97A,0 0 0 10px #FFFFFF,0 10px 18px -6px rgba(150,60,20,.35)}
.d3 .depth{justify-content:center;font-size:12.5px;color:#FFFFFF}
.d3 .depth i{border-color:#FFFFFF}
.d3 .depth i.on{background:#FFFFFF;box-shadow:none}
.d3 h2{font-size:34px;line-height:1.1;color:#FFFFFF;text-shadow:0 2px 10px rgba(190,80,30,.35)}
.d3 p.words{font-size:19px;font-weight:500;line-height:1.5;color:#FFFFFF;text-shadow:0 1px 6px rgba(190,80,30,.35)}
.d3 .from{color:#FFF3E6}

.thank{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;border:0;cursor:pointer;color:var(--deep);
  font:700 14px Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;border-radius:999px;padding:18px 34px;white-space:nowrap;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.9),inset 0 -8px 14px rgba(232,145,90,.3),inset 6px 0 10px rgba(255,255,255,.35),0 7px 0 #EEC48E,0 18px 28px -10px rgba(232,145,90,.5);transition:transform .15s,box-shadow .15s}
.thank:active{transform:translate(-50%,5px);box-shadow:inset 0 3px 2px rgba(255,255,255,.9),inset 0 -6px 12px rgba(232,145,90,.3),0 2px 0 #EEC48E,0 8px 16px -8px rgba(232,145,90,.45)}
.thank:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.ynote{text-align:center;font:400 12px Karla,sans-serif;color:var(--soft);margin:6px 0 0}

@media (prefers-reduced-motion:no-preference){
  .liquid,.menu:after{animation:turn 14s linear infinite}
  .d3:before{animation:turn 9s linear infinite}
  .d2:before{animation:sheen 5s ease-in-out infinite}
  .blob{animation:turn 30s linear infinite,morph 14s ease-in-out infinite alternate}
  .tube:after{animation:turn 40s linear infinite}
  .outer{animation:cw 240s linear infinite}
  .inner{animation:ccw 200s linear infinite}
}

/* on a computer: YAMH beside the orbits, the thank-yous in two columns, a life changed across both */
@media (min-width:860px){
  .app{max-width:1040px}
  .strip{padding:56px 40px 64px}
  .big,.ghost{font-size:150px}
  .water{height:54px}
  .orbit{transform:scale(1.4);margin:80px 0 70px}
  .cards{grid-template-columns:1fr 1fr;padding:0 24px;gap:18px}
  .d1{margin:0}
  .d3{grid-column:1 / -1}
}


/* Thank Your Hero: orange words on a paler pearl, so the orange always reads */
.thank.liquid{color:#D9622B;font-weight:800;font-size:15px;text-shadow:0 1px 0 rgba(255,255,255,.9);
  background-image:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,0) 40%),conic-gradient(from var(--spin),#FFFFFF,#FBF1E4,#F6E3AE,#FFFFFF,#FCE6D8,#F8E7C0,#FFFFFF)}


/* the menu: a small dial, the same gold ring and pearl */
.menu.dial{width:52px;height:52px;border-radius:50%;padding:0;background:#FFF8E6;filter:none;
  box-shadow:inset 0 0 0 3px #E6C97A,inset 0 0 0 5px #FFF8E6,inset 0 0 0 6px #E6C97A,0 10px 18px -8px rgba(230,201,122,.9)}
.menu.dial:after{content:none}
.dialpearl{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;box-shadow:inset -3px -4px 6px rgba(232,145,90,.3)}
.menu.dial:hover .dialpearl{transform:scale(1.08)}
/* the states */
.states{display:flex;gap:8px;overflow-x:auto;padding:0 14px 16px;scrollbar-width:none}
.states::-webkit-scrollbar{display:none}
.chip{flex:none;border:0;cursor:pointer;border-radius:999px;padding:10px 16px;font:700 13px Karla,sans-serif;letter-spacing:.08em;color:#D9622B;background:#FFFFFF;
  box-shadow:inset 0 0 0 1.5px #F6E3AE,0 6px 12px -8px rgba(232,145,90,.5)}
.chip[aria-pressed="true"]{background:#E8914A;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px #E8914A,0 8px 16px -8px rgba(224,106,50,.7)}
.chip:focus-visible,.report:focus-visible,.pick:focus-visible,.go:focus-visible,.back:focus-visible{outline:2px solid #E8914A;outline-offset:3px}
.card.hide-state{display:none}
.report{position:absolute;right:14px;bottom:10px;border:0;background:none;cursor:pointer;font:400 11.5px Karla,sans-serif;color:var(--soft);opacity:.6;padding:4px}
.d3 .report{color:#FFF3E6;right:22px;bottom:14px}
.report:hover{opacity:1}
.card.arrive{animation:arrive 1.6s ease-out}
@keyframes arrive{0%{transform:translateY(-30px) scale(.94);opacity:0;filter:brightness(1.4)}60%{opacity:1}100%{transform:none;filter:none}}
.none{margin:10px 14px;padding:22px;border-radius:20px;background:#FFFFFF;font:400 16px/1.5 Karla,sans-serif;color:var(--soft);text-align:center}

/* the sheets that rise over the page: menu, writing, a hero finding theirs */
.sheet{position:fixed;inset:0;z-index:70;display:none;overflow:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(ellipse at 85% 0%,rgba(246,227,174,.9),rgba(255,255,255,0) 50%),radial-gradient(ellipse at 0% 60%,rgba(240,190,150,.55),rgba(255,255,255,0) 50%),#FBF8F5}
.sheet.open{display:block;animation:rise .45s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.inner-sheet{max-width:520px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(130px + env(safe-area-inset-bottom,0px));position:relative}
.close{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top,0px));width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:#FFFFFF;
  font:400 26px/44px Karla,sans-serif;color:#D9622B;box-shadow:inset 0 0 0 1.5px #F6E3AE}
.q{margin:54px 0 10px;font:800 31px/1.12 Karla,sans-serif;color:var(--deep);text-wrap:balance}
.ywhy{margin:0 0 22px;font:400 17px/1.5 Karla,sans-serif;color:var(--soft)}
.lab{display:block;margin:18px 0 8px;font:700 12px Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#D9622B}
.field{width:100%;border:0;border-radius:18px;padding:16px 18px;font:400 20px Karla,sans-serif;color:var(--deep);background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #F6E3AE}
.field:focus{outline:0;box-shadow:inset 0 0 0 2px #E8914A}
textarea.field{min-height:200px;line-height:1.5;resize:vertical}
.ychips{display:flex;flex-wrap:wrap;gap:8px}
.picks{display:grid;gap:14px}
.pick{all:unset;cursor:pointer;display:block;border-radius:24px;position:relative;overflow:hidden}
.pick .card{pointer-events:none;margin:0}
.pick[aria-pressed="true"]{outline:3px solid #E8914A;outline-offset:4px}
.step{display:none}.step.on{display:block;animation:rise .4s ease-out}
.dots{display:flex;gap:7px;justify-content:center;position:absolute;left:0;right:0;top:calc(30px + env(safe-area-inset-top,0px))}
.dots i{width:8px;height:8px;border-radius:50%;background:#F6E3AE}.dots i.on{background:#E8914A}
.yfoot{position:fixed;left:0;right:0;bottom:0;z-index:71;display:flex;justify-content:center;gap:12px;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,#FBF8F5 60%,rgba(251,248,245,0))}
.back{border:0;background:#FFFFFF;cursor:pointer;border-radius:999px;padding:16px 22px;font:700 14px Karla,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);box-shadow:inset 0 0 0 1.5px #F6E3AE}
.go{border:0;cursor:pointer;border-radius:999px;padding:16px 30px;font:800 15px Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF;background:#E8914A;
  box-shadow:0 6px 0 #E6C97A,0 16px 26px -10px rgba(224,106,50,.6)}
.go:active{transform:translateY(4px);box-shadow:0 2px 0 #E6C97A}
.preview{margin-top:20px}
.kind{display:none;margin:14px 0 0;padding:14px 16px;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #F6E3AE;font:400 16px/1.5 Karla,sans-serif;color:var(--deep)}
.kind.show{display:block}
.toggle{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.small{font:400 14px/1.5 Karla,sans-serif;color:var(--soft);margin:10px 0 0}
/* the menu sheet */
.menu-list{display:grid;gap:14px;margin-top:70px}
.menu-list button{all:unset;cursor:pointer;display:block;border-radius:24px;padding:22px 24px;background:#FFFFFF;box-shadow:inset 0 0 0 2px #F6E3AE,0 14px 26px -18px rgba(232,145,90,.6)}
.menu-list button b{display:block;font:800 24px Karla,sans-serif;color:#D9622B}
.menu-list button span{display:block;margin-top:4px;font:400 16px/1.45 Karla,sans-serif;color:var(--soft)}
.menu-list button:focus-visible{outline:2px solid #E8914A;outline-offset:3px}
/* a hero finding theirs */
.found-top{display:flex;justify-content:center;margin-top:56px}
.mini{width:120px;height:120px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 10px #F6E3AE,inset 0 0 0 12px #E6C97A,inset 0 0 0 22px #FFF8E6,inset 0 0 0 24px #E8914A}
.mini .liquid{position:absolute;inset:34px;border-radius:50%}
.found-line{text-align:center;margin:22px 0 18px;font:800 28px/1.15 Karla,sans-serif;color:var(--deep);text-wrap:balance}

[hidden]{display:none!important}

/* her lettering, 19 Oct: Julius Sans One for the hero's name, Jost for the story and the small lines */
.card h2{font-family:"Julius Sans One",Karla,sans-serif;font-weight:400;letter-spacing:.01em}
.d1 h2{font-size:17px}.d2 h2{font-size:22px}.d3 h2{font-size:32px}
.card p.words{font-family:Jost,Karla,sans-serif;font-weight:300}
.d3 p.words{font-weight:400;text-shadow:0 1px 3px rgba(190,80,30,.45)}
.d3 h2,.d3 .from,.d3 .yrole,.d3 .depth{text-shadow:0 1px 3px rgba(190,80,30,.45)}
.card .from,.card .yrole,.depth,.card .report{font-family:Jost,Karla,sans-serif}

/* the real site: no bar from the template, the page draws its own top */
.w-bar{display:none}
.w-foot{text-align:center;font:400 13px Jost,Karla,sans-serif;color:var(--soft);padding:24px 16px 120px}
.examples-note{text-align:center;font:400 12px Jost,Karla,sans-serif;color:var(--soft);margin:6px 0 0}
.w-foot .powered{margin-top:6px;font:400 13px Jost,Karla,sans-serif;color:var(--soft)}
.w-foot .powered a{color:#D9622B;text-decoration:none;font-weight:500}
.w-foot .powered a:hover{text-decoration:underline}

.skip-link{position:absolute;left:-999px;top:0}.skip-link:focus{left:16px;top:16px;z-index:99;background:#FFFFFF;color:#D9622B;padding:10px 14px;border-radius:12px}
.card .from{padding-right:54px}.d3 .from{padding-left:54px}

/* the menu is the thank-you hands, hers 19 Oct: "The emoji, like a hand saying thank you, is the burger menu. You're thanking somebody." Bright pearl, never brown. */
.menu:after{background:conic-gradient(from var(--spin),#FFFFFF,#F6E3AE,#E8914A,#FFF3E6,#E6C97A,#F0BE96,#FFFFFF)}

/* search */
.find{padding:0 14px 12px}
.findbox{font:400 17px Jost,Karla,sans-serif;padding:14px 18px;border-radius:999px}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the heart hands, hers 19 Oct: "We have to do the hearts with the hands then". Shown as themselves, untouched. */
.menu:after{content:none}
.menu{font-size:40px}

/* the menu: Gigi's gold hands in copper sleeves, her choice 19 Oct */
.menu{font-size:0;line-height:0;display:grid;place-items:center}
.menu-hands{width:46px;height:46px;display:block;filter:drop-shadow(0 6px 8px rgba(230,170,90,.45))}
.w-foot .credit{margin-top:6px;font:400 11px Jost,Karla,sans-serif;color:var(--soft);opacity:.75}

/* YAMH, far more 3D and metallic: a deep copper-gold extrusion, a brighter turning metal, and a real mirror beneath it (hers, 19 Oct) */
.name{position:relative}
.big{position:relative;z-index:2;
  background-image:radial-gradient(ellipse at 28% 22%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 24%),conic-gradient(from var(--spin),#FFF7E2,#F2D488,#E0AE4E,#FFF1CC,#F4BE8C,#E8914A,#FFFAEE,#EBC66E,#FFF7E2);
  filter:drop-shadow(0 1px 0 #F7D3AE) drop-shadow(0 1px 0 #F3C49A) drop-shadow(0 1px 0 #F0B587) drop-shadow(0 1px 0 #ECA674) drop-shadow(0 1px 0 #E89863) drop-shadow(0 1px 0 #E58B55) drop-shadow(0 1px 0 #E27F49) drop-shadow(0 16px 14px rgba(226,127,73,.32))}
.water{display:block;position:relative;z-index:1;height:64px;margin-top:-2px;border-top:1px solid rgba(230,201,122,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(246,227,174,.28) 35%,rgba(251,248,245,0))}
@media (min-width:860px){ .water{height:92px} }

/* the search: a pearl pill in a gold ring, set into the page, with a gold glass (hers, 19 Oct: "much more beautiful") */
.find{position:relative;padding:0 14px 16px}
.findbox{width:100%;border:0;border-radius:999px;padding:18px 22px 18px 58px;font:400 18px Jost,Karla,sans-serif;letter-spacing:.01em;color:var(--deep);-webkit-appearance:none;appearance:none;
  background:radial-gradient(ellipse at 22% 0%,rgba(255,255,255,1) 0 30%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#FFFFFF,#FCF4EA);
  box-shadow:inset 0 2px 5px rgba(232,145,90,.16),inset 0 -2px 0 rgba(255,255,255,.9),0 0 0 2px #FFF8E6,0 0 0 4px #E6C97A,0 0 0 5px #FFFFFF,0 14px 26px -16px rgba(230,170,90,.8);
  transition:box-shadow .25s}
.findbox::placeholder{color:#D9A27A;opacity:1}
.findbox:focus{outline:0;box-shadow:inset 0 2px 5px rgba(232,145,90,.16),0 0 0 2px #FFF8E6,0 0 0 4px #E8914A,0 0 0 5px #FFFFFF,0 0 26px 4px rgba(240,190,150,.55)}
.findbox::-webkit-search-cancel-button{-webkit-appearance:none}
.find-glass{position:absolute;left:36px;top:17px;width:24px;height:24px;pointer-events:none}

/* no reflection, hers 19 Oct: "I don't want the reflection. I just wanted the YAMH." */
.water,.ghost{display:none!important}
.name{margin-bottom:18px}

/* the search, made into an object: a 3D gold ring like the dial's, a recessed pearl inside, a turning pearl orb holding the glass,
   and a sheen that passes along the gold (hers, 19 Oct: "still isn't wow enough") */
@keyframes findsheen{0%,55%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(420%) skewX(-20deg)}}
.find{padding:4px 14px 20px}
.find-ring{position:relative;border-radius:999px;padding:7px;overflow:hidden;
  background:linear-gradient(180deg,#FFF8E6 0%,#E6C97A 22%,#FFFFFF 46%,#F6E3AE 64%,#E6C97A 82%,#E8B46A 100%);
  box-shadow:0 1px 0 #FFFFFF inset,0 -2px 4px rgba(232,145,90,.35) inset,0 18px 30px -16px rgba(230,170,90,.95),0 0 0 1px rgba(255,255,255,.9)}
.find-ring:after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0))}
.findbox{position:relative;z-index:1;width:100%;border:0;border-radius:999px;padding:19px 22px 19px 70px;-webkit-appearance:none;appearance:none;
  font:400 15px "Julius Sans One",Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);
  background:radial-gradient(ellipse at 30% -20%,#FFFFFF 0 40%,rgba(255,255,255,0) 75%),linear-gradient(180deg,#FBF3EA,#FFFFFF 60%);
  box-shadow:inset 0 3px 8px rgba(214,140,80,.28),inset 0 -1px 0 rgba(255,255,255,1)}
.findbox::placeholder{color:#E0874E;opacity:1}
.findbox:focus{outline:0;box-shadow:inset 0 3px 8px rgba(214,140,80,.28),0 0 0 2px #E8914A,0 0 22px 2px rgba(240,190,150,.7)}
.findbox::-webkit-search-cancel-button{-webkit-appearance:none}
.find-orb{position:absolute;z-index:2;left:15px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 0 0 3px #FFF8E6,0 0 0 5px #E6C97A,0 6px 12px -4px rgba(214,120,60,.55),inset -4px -5px 8px rgba(232,145,90,.35)}
.find-orb svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(190,90,40,.5))}
.find-glass{display:none}
@media (prefers-reduced-motion:no-preference){ .find-ring:after{animation:findsheen 6s ease-in-out infinite} }
.findbox{font-size:14px;letter-spacing:.05em;padding-left:68px;padding-right:16px}
.findbox::placeholder{color:#D9622B}
@media (min-width:860px){ .findbox{font-size:16px;letter-spacing:.12em} }

/* one lettering everywhere, hers 19 Oct: Julius Sans One for names and questions, Jost for everything you read and press.
   YAMH and YOU ARE MY HERO on the ring keep their own, which she loved. */
.q,.found-line,.menu-list button b{font-family:"Julius Sans One",Jost,sans-serif!important;font-weight:400!important;letter-spacing:.02em}
.q{font-size:28px;line-height:1.2}
.found-line{font-size:26px}
.menu-list button b{font-size:22px}
.ywhy,.lab,.field,.small,.kind,.none,.ynote,.menu-list button span,.chip,.go,.back,.thank,.examples-note,.close{font-family:Jost,Karla,sans-serif!important}
.chip,.go,.back,.thank{font-weight:600!important}
.field{font-weight:400}
.card .share{position:absolute;right:70px;bottom:10px;border:0;background:none;cursor:pointer;font:500 11.5px Jost,Karla,sans-serif;color:#D9622B;opacity:.85;padding:4px}
.d3 .share{color:#FFFFFF;right:80px;bottom:14px}
.card .share:hover{opacity:1}
.card .from{padding-right:118px}.d3 .from{padding-left:118px}
.w-foot .foot-links{margin-top:8px;font:400 13px Jost,Karla,sans-serif}
.w-foot .foot-links a{color:#D9622B;text-decoration:none}
/* the terms and privacy pages */
.w-page{max-width:44rem;margin:0 auto;padding:48px 20px 40px;font-family:Jost,Karla,sans-serif;color:var(--deep)}
.w-page h1{font:400 34px/1.15 "Julius Sans One",Jost,sans-serif;margin:0 0 20px}
.w-page h2{font:400 21px/1.3 "Julius Sans One",Jost,sans-serif;margin:30px 0 8px}
.w-prose p,.w-prose li{font:300 17px/1.65 Jost,Karla,sans-serif}
.w-prose a{color:#D9622B}

/* the pages beyond the front: a way home, the writing, terms and privacy */
.w-back{display:flex;align-items:center;justify-content:space-between;max-width:44rem;margin:0 auto;padding:18px 20px 0}
.w-back__home{font:800 30px/1 Karla,sans-serif;letter-spacing:.02em;text-decoration:none;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:conic-gradient(from 40deg,#FFF7E2,#F2D488,#E0AE4E,#FFF1CC,#F4BE8C,#E8914A,#FFFAEE,#EBC66E,#FFF7E2);filter:drop-shadow(0 1px 0 #F3C49A) drop-shadow(0 1px 0 #ECA674) drop-shadow(0 1px 0 #E58B55)}
.w-back__link{font:600 12px Jost,Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#D9622B;text-decoration:none}
.w-eyebrow{margin:0 0 10px}.w-eyebrow a{font:600 12px Jost,Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#D9622B;text-decoration:none}
.w-prose h2{font:400 22px/1.3 "Julius Sans One",Jost,sans-serif;margin:34px 0 8px;color:var(--deep)}
.w-prose h3{font:600 17px/1.4 Jost,Karla,sans-serif;margin:24px 0 6px;color:#D9622B}
.w-prose ul{padding-left:20px}.w-prose em{color:#7A5A6E}
.w-after{margin:40px 0 0;text-align:center}.w-after .go{display:inline-block;text-decoration:none}
.w-postcard{display:block;text-decoration:none;margin:0 0 16px;padding:24px 24px 20px;border-radius:24px;background:linear-gradient(160deg,#FFFBEF,#F8EBC4 60%,#F3DEA0);
  box-shadow:inset 0 0 0 2px #E6C97A,inset 0 0 0 5px #FFF8E6,inset 0 0 0 7px #E6C97A,0 20px 36px -22px rgba(230,201,122,.9)}
.w-postcard__title{display:block;font:400 22px/1.25 "Julius Sans One",Jost,sans-serif;color:var(--deep)}
.w-postcard__line{display:block;margin-top:8px;font:300 16px/1.55 Jost,Karla,sans-serif;color:var(--deep)}
.w-postcard__go{display:inline-block;margin-top:12px;font:600 12px Jost,Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#D9622B}
.menu-list .menu-link{display:block;text-decoration:none;border-radius:24px;padding:22px 24px;background:#FFFFFF;box-shadow:inset 0 0 0 2px #F6E3AE,0 14px 26px -18px rgba(232,145,90,.6)}
.menu-list .menu-link b{display:block;font:400 22px "Julius Sans One",Jost,sans-serif;color:#D9622B}
.menu-list .menu-link span{display:block;margin-top:4px;font:400 16px/1.45 Jost,Karla,sans-serif;color:var(--soft)}

/* Read More: the next page of the river */
.more-wrap{text-align:center;padding:22px 14px 6px}
.more{background:#FFF8EE;color:#D9622B;box-shadow:0 0 0 2px #E6C97A,0 6px 0 #EEC48E}
.more[disabled]{opacity:.6}

/* the menu sits on the right, hers 19 Oct: "The burger menu icon should be on the other side" */
.menu{left:auto;right:14px}

/* every example says so, so nobody mistakes it for a real thank-you */
.example-tag{margin-left:8px;padding:2px 8px;border-radius:999px;font:600 9.5px Jost,Karla,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6A5E73;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px #F6E3AE}
.d3 .example-tag{color:#D9622B}

/* the hero's reply, under their thank-you */
.reply{margin:14px 0 2px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px #F6E3AE}
.d3 .reply{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.reply-lab{margin:0 0 4px;font:600 11px Jost,Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#D9622B}
.d3 .reply-lab{color:#FFF3E6}
.reply-words{margin:0;font:300 16px/1.55 Jost,Karla,sans-serif;color:var(--deep)}
.d3 .reply-words{color:#FFFFFF;font-weight:400}
.writeback{margin-top:8px}
/* Share and Report sit on their own line under who it's from, so the name never squeezes to one word a line */
.card .from,.d3 .from{padding-left:0;padding-right:0}
.card .share,.card .report,.d3 .share,.d3 .report{position:static;display:inline-block;margin:10px 16px 0 0;padding:6px 0}
.d3 .share,.d3 .report{margin:10px 8px 0}

/* Share as its own small object: a pearl pill in a gold ring, the share mark beside the word */
.card .share,.d3 .share{display:inline-flex;align-items:center;gap:7px;margin:12px 14px 0 0;padding:8px 16px 8px 13px;border-radius:999px;opacity:1;
  font:600 11.5px Jost,Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#D9622B;
  background:linear-gradient(180deg,#FFFFFF,#FFF6EA);box-shadow:0 0 0 1.5px #E6C97A,0 0 0 3px #FFFFFF,0 6px 12px -6px rgba(214,120,60,.45)}
.card .share svg{width:15px;height:15px}
.card .share:hover{box-shadow:0 0 0 1.5px #E8914A,0 0 0 3px #FFFFFF,0 8px 14px -6px rgba(214,120,60,.55)}
.card .share:active{transform:translateY(1px)}
.d3 .share{margin:14px 8px 0}
.card .report{vertical-align:middle;margin-top:12px}

.card .share,.card .report{position:relative;z-index:1}
/* Thank Your Hero stands clear of the pale cards beneath it: a gold rim, a white halo and a deeper lift (hers, 19 Oct) */
.thank.liquid{font-size:16px;padding:19px 36px;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.95),inset 0 -8px 14px rgba(232,145,90,.3),0 0 0 2.5px #E6C97A,0 0 0 6px rgba(255,255,255,.95),0 7px 0 4px #EEC48E,0 22px 34px -8px rgba(214,110,55,.6)}
/* Share stands out: solid copper with white words, white with copper words on the orange cards */
.card .share{color:#FFFFFF;background:#E07A42;box-shadow:0 0 0 2px #FFFFFF,0 0 0 3.5px #E6C97A,0 8px 14px -6px rgba(214,110,55,.6)}
.card .share:hover{background:#D9622B;box-shadow:0 0 0 2px #FFFFFF,0 0 0 3.5px #E8914A,0 10px 16px -6px rgba(214,110,55,.7)}
.d3 .share{color:#D9622B;background:#FFFFFF;box-shadow:0 0 0 2px #E6C97A,0 8px 14px -6px rgba(150,60,20,.45)}
.d3 .share:hover{background:#FFF6EA}

.card .share,.card .report,.d3 .share,.d3 .report{right:auto;bottom:auto;left:auto;top:auto}

/* the share sheet: every way to send it, as pearl pills */
.share-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.way{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:999px;background:#FFFFFF;
  font:600 14px Jost,Karla,sans-serif;letter-spacing:.06em;color:#2B2236;box-shadow:0 0 0 1.5px #F6E3AE,0 8px 16px -10px rgba(214,120,60,.45)}
.way:hover,.way:focus-visible{box-shadow:0 0 0 2px #E8914A,0 10px 18px -10px rgba(214,120,60,.55)}
.way-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E07A42;color:#FFFFFF;font:700 14px Jost,Karla,sans-serif;flex:none}
#wWhats .way-dot{background:#25A35A}
#wFace .way-dot{background:#3B6FD8}

/* crisp, not wishy-washy: clean white behind everything so the gold, orange and pearl stand out (hers, 19 Oct) */
:root{--pearl:#FFFFFF}
html,body{background:#FFFFFF}
.strip{background:#FFFFFF}
.river:before{background:#FFFFFF;box-shadow:inset 0 1.5px 0 #F6E3AE}
.sheet{background:#FFFFFF}
.d1{box-shadow:0 0 0 1.5px #F6E3AE,0 10px 20px -14px rgba(214,120,60,.4)}
/* the share icon where everyone has one, top left, the menu hands on the right */
.topshare{position:absolute;left:16px;top:16px;z-index:3;width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:#D9622B;
  background:linear-gradient(180deg,#FFFFFF,#FFF6EA);box-shadow:0 0 0 2px #E6C97A,0 0 0 4px #FFFFFF,0 8px 16px -8px rgba(214,120,60,.55)}
.topshare svg{width:22px;height:22px}
.topshare:active{transform:translateY(1px)}
.topshare:focus-visible{outline:2px solid #E8914A;outline-offset:3px}
.way-dot svg{width:17px;height:17px}

/* three backgrounds to choose from, on the real page: ?bg=pearl | glow | satin */
body.bg-pearl,body.bg-glow,body.bg-satin{background:#FFFFFF}
body.bg-pearl:before,body.bg-glow:before,body.bg-satin:before{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none}
body.bg-pearl:before{background:conic-gradient(from var(--spin) at 50% 40%,#FFFFFF,#FBEBD2,#F8D9C2,#FFFFFF,#F6E3AE,#FCE3D4,#FFFFFF,#F3DCA0,#FFFFFF);animation:turn 60s linear infinite;filter:saturate(1.15)}
body.bg-glow:before{background:radial-gradient(circle at 18% 12%,rgba(246,200,120,.75) 0 9%,rgba(246,200,120,0) 22%),radial-gradient(circle at 85% 30%,rgba(240,150,100,.55) 0 8%,rgba(240,150,100,0) 20%),radial-gradient(circle at 25% 62%,rgba(232,145,90,.45) 0 7%,rgba(232,145,90,0) 19%),radial-gradient(circle at 78% 78%,rgba(230,201,122,.7) 0 9%,rgba(230,201,122,0) 23%),radial-gradient(circle at 50% 45%,rgba(255,236,214,.9) 0 12%,rgba(255,236,214,0) 34%),#FFFFFF;animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,-3%) scale(1.06)}}
body.bg-satin:before{background:linear-gradient(115deg,#FFFFFF 0%,#FBEBCB 14%,#FFFFFF 26%,#F7D8C2 40%,#FFFFFF 52%,#F4E2AE 66%,#FFFFFF 78%,#F9DCCB 90%,#FFFFFF 100%);background-size:220% 220%;animation:satin 18s ease-in-out infinite alternate}
@keyframes satin{to{background-position:100% 100%}}
body.bg-pearl .strip,body.bg-glow .strip,body.bg-satin .strip{background:rgba(255,255,255,.25)}
body.bg-pearl .river:before,body.bg-glow .river:before,body.bg-satin .river:before{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){body.bg-pearl:before,body.bg-glow:before,body.bg-satin:before{animation:none}}
/* stronger, so the background is felt, not guessed at */
body.bg-pearl:before{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.65),rgba(255,255,255,0) 45%),conic-gradient(from var(--spin) at 50% 40%,#FFFFFF,#F4D29A,#F0B48C,#FFF2E6,#E9C06A,#F3BFA2,#FFFFFF,#E6BC70,#FFFFFF)}
body.bg-glow:before{background:radial-gradient(circle at 15% 10%,rgba(240,190,100,.95) 0 10%,rgba(240,190,100,0) 26%),radial-gradient(circle at 88% 28%,rgba(232,120,62,.75) 0 9%,rgba(232,120,62,0) 24%),radial-gradient(circle at 20% 60%,rgba(232,120,62,.6) 0 8%,rgba(232,120,62,0) 22%),radial-gradient(circle at 80% 76%,rgba(230,190,100,.9) 0 10%,rgba(230,190,100,0) 26%),radial-gradient(circle at 50% 42%,rgba(255,226,196,.95) 0 14%,rgba(255,226,196,0) 38%),#FFF8F0}
body.bg-satin:before{background:linear-gradient(115deg,#FFFFFF 0%,#F4D49A 13%,#FFFFFF 25%,#F0B994 38%,#FFF6EC 50%,#EAC56E 63%,#FFFFFF 75%,#F3C2A6 88%,#FFFFFF 100%);background-size:220% 220%}
body.bg-pearl .strip,body.bg-glow .strip,body.bg-satin .strip{background:transparent}
body.bg-pearl .river:before,body.bg-glow .river:before,body.bg-satin .river:before{background:rgba(255,255,255,.38)}

/* the body itself must be clear, or its own white paints over the background behind it */
body.bg-pearl,body.bg-glow,body.bg-satin{background:transparent!important}

/* THE BACKGROUND, hers 19 Oct: liquid pearl with more of the orange glow blended in, slowly turning, for everyone */
html{background:#FFFFFF}
body{background:transparent!important}
body:before{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 82% 30%,rgba(232,120,62,.55) 0 7%,rgba(232,120,62,0) 22%),
    radial-gradient(circle at 18% 66%,rgba(232,120,62,.45) 0 6%,rgba(232,120,62,0) 20%),
    radial-gradient(circle at 70% 80%,rgba(240,150,90,.45) 0 7%,rgba(240,150,90,0) 22%),
    radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 42%),
    conic-gradient(from var(--spin) at 50% 40%,#FFFFFF,#F4D29A,#EFA27A,#FFF2E6,#E9C06A,#F0A888,#FFFFFF,#E6BC70,#F4B48E,#FFFFFF);
  animation:turn 60s linear infinite}
.strip{background:transparent}
.river:before{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){body:before{animation:none}}
/* YAMH stands out on it: a pool of white light behind the letters, and a crisper copper edge */
.name{position:relative}
.name:before{content:"";position:absolute;left:50%;top:50%;width:130%;height:170%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0 35%,rgba(255,255,255,.6) 55%,rgba(255,255,255,0) 72%)}
.big{z-index:2;filter:drop-shadow(0 1px 0 #F7D3AE) drop-shadow(0 1px 0 #F0B587) drop-shadow(0 1px 0 #E89863) drop-shadow(0 1px 0 #E27F49) drop-shadow(0 1px 0 #DD7540) drop-shadow(0 2px 0 #D9622B) drop-shadow(0 14px 16px rgba(217,98,43,.38))}
/* the rings sit in a soft halo too, so their words stay clear */
.orbit:before{content:"";position:absolute;inset:-8%;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.75) 0 55%,rgba(255,255,255,0) 72%)}

/* the share and the hands match the search: turning liquid pearl orbs held in a 3D gold ring (hers, 19 Oct: "much more us") */
.topshare,.menu.orb-btn{width:58px;height:58px;border:0;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 0 0 3px #FFF8E6,0 0 0 6px #E6C97A,0 0 0 7.5px #FFFFFF,inset -6px -8px 12px rgba(232,145,90,.38),inset 5px 5px 10px rgba(255,255,255,.85),0 12px 22px -8px rgba(214,110,55,.65)}
.topshare{left:18px;top:18px;color:#FFFFFF}
.topshare svg{width:24px;height:24px;filter:drop-shadow(0 1px 1.5px rgba(190,90,40,.65))}
.menu.orb-btn{right:18px;top:18px;left:auto;font-size:0;line-height:0;filter:none}
.menu.orb-btn .menu-hands{width:36px;height:36px;filter:drop-shadow(0 2px 3px rgba(150,70,20,.35))}
.topshare:active,.menu.orb-btn:active{transform:translateY(2px)}
.topshare,.menu.orb-btn{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 28%),conic-gradient(from var(--spin),#F7F1EC,#E6C97A,#D9B05A,#F3E7DC,#F0BE96,#E8914A,#FBF6F2,#E6C97A,#F7F1EC)!important}
@media (prefers-reduced-motion:no-preference){.topshare,.menu.orb-btn{animation:turn 14s linear infinite}}
/* no white patch (hers: "it looks like someone's taken an eraser"). The letters stand out on their own: richer metal, a fine bright rim, a deeper copper edge */
.name:before,.orbit:before{content:none!important;display:none!important}
.big{background-image:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,0) 20%),conic-gradient(from var(--spin),#FFF3D6,#F0C35E,#E8914A,#FFE9C2,#EFA06A,#E2843F,#FFF6E0,#E9B850,#FFF3D6)!important;
  -webkit-text-stroke:1.6px rgba(255,248,234,.95);
  filter:drop-shadow(0 1px 0 #F4C49C) drop-shadow(0 1px 0 #EDA673) drop-shadow(0 1px 0 #E8914A) drop-shadow(0 1px 0 #E27F49) drop-shadow(0 1px 0 #DC6F38) drop-shadow(0 1px 0 #D9622B) drop-shadow(0 2px 0 #CF5A25) drop-shadow(0 18px 18px rgba(170,70,25,.42))!important}
/* full width on a phone, no gutters either side (hers, 19 Oct: "it's like you've got a gutter thing on the phone") */
@media (max-width:859px){
  body{padding-inline:0!important}
  .app{max-width:none;padding-top:0}
  .strip{border-radius:0;padding-top:30px}
  .river,.river:before{border-radius:0!important}
  .cards{padding:0 12px}
  .orbit{margin-left:auto;margin-right:auto}
}
@media (max-width:368px){ .orbit{transform:scale(.92);margin-top:-6px;margin-bottom:-14px} }
/* YAMH clears the two orbs above it */
.name{margin-top:64px}

/* no hard seam where the thank-yous begin: the glass fades in */
.river:before{box-shadow:none!important;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.42) 90px)!important}