/* SNAPYOURDATE: original sculptural thoughts, drawn locally in SVG and staged
   in CSS 3D. All selectors are scoped to this component. */
.emotion-stage{
  --emotion-ink:#2d2037;--emotion-muted:#776780;--emotion-border:#d8cadf;
  --emotion-progress:0;position:relative;isolation:isolate;min-width:0;width:100%;
  margin:0;color:var(--emotion-ink);padding:clamp(18px,3vw,32px) 0 0;
}
.emotion-stage-top{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-inline:clamp(14px,2vw,25px)}
.emotion-stage-top>span{max-width:290px;font-size:10px;line-height:1.55;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--emotion-muted)}
.emotion-stage .emotion-playback{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;background:transparent;border:1px solid var(--emotion-border);border-radius:50%;color:var(--emotion-ink);transition:background .2s,border-color .2s}
.emotion-stage .emotion-playback:hover{background:#c6aed123;border-color:var(--emotion-muted)}
.emotion-stage .emotion-playback:disabled{opacity:.4;cursor:default}
.emotion-stage .emotion-playback svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.emotion-stage .emotion-playback[data-action=play] .emotion-pause-icon,.emotion-stage .emotion-playback:not([data-action=play]) .emotion-play-icon{display:none}
.emotion-stage .emotion-playback .emotion-play-icon{fill:currentColor;stroke:none;width:15px}
.emotion-stage .emotion-viewport{position:relative;overflow:hidden;isolation:isolate;width:100%;aspect-ratio:1.24;min-height:250px;max-height:620px;perspective:1000px;perspective-origin:50% 45%;contain:layout paint}
.emotion-stage .emotion-world{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(1deg) rotateY(-3deg);transition:transform 1.15s cubic-bezier(.22,.8,.25,1)}
.emotion-stage .emotion-character{position:absolute;width:34%;top:19%;left:33%;transform-origin:50% 89%;transition:transform 1.15s cubic-bezier(.22,.8,.25,1),filter 1.15s,opacity .95s;filter:drop-shadow(4px 10px 11px #44254020);backface-visibility:hidden;will-change:transform}
.emotion-stage .emotion-sculpture{display:block;width:100%;height:auto;overflow:visible}
.emotion-stage .emotion-sculpture .emotion-face{transform-origin:112px 135px;transition:transform 1.1s cubic-bezier(.22,.8,.25,1)}
.emotion-stage .emotion-sculpture .emotion-face path{fill:none}
.emotion-stage .emotion-character--thinking{width:31%;top:11%;left:36%;transform:translate3d(25%,-2%,-60px) rotateZ(8deg) rotateY(-12deg);filter:drop-shadow(1px 9px 6px #3927441c);opacity:1}
.emotion-stage .emotion-character--curiosity{transform:translate3d(-62%,10%,60px) rotateZ(-7deg) rotateY(-8deg)}
.emotion-stage .emotion-character--courage{transform:translate3d(70%,13%,18px) rotateZ(8deg) rotateY(4deg)}
.emotion-stage .emotion-thought{position:absolute;z-index:5;max-width:43%;padding:10px 15px;border:1px solid #dfcddc;background:linear-gradient(125deg,#fffdf8,#fff5eb);box-shadow:0 7px 25px #5431600c,0 1px 0 #fff9 inset;border-radius:16px 16px 16px 4px;color:#39253f;font-size:clamp(12px,1.04vw,14px);line-height:1.5;font-weight:700;text-wrap:balance;transition:opacity .75s,transform .95s cubic-bezier(.2,.7,.2,1);white-space:normal}
.emotion-stage .emotion-thought--one{left:5%;top:20%;transform:translateZ(75px) rotate(-5deg)}
.emotion-stage .emotion-thought--two{right:2%;top:33%;transform:translateZ(100px) rotate(5deg);border-radius:16px 16px 4px 16px}
.emotion-stage .emotion-thought--three{left:40%;top:6%;max-width:45%;transform:translateZ(10px) rotate(3deg);font-size:clamp(11px,1vw,12px);background:#ece2f4}
.emotion-stage .emotion-shared{position:absolute;z-index:6;left:calc(50% - 34px);top:31%;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid #ffe4c9;background:linear-gradient(135deg,#f8c38b,#cf7848 80%);box-shadow:0 8px 35px #ac633137,1px 2px 0 #fff4 inset;transform:translate3d(0,24px,130px) scale(.65);opacity:0;transition:transform 1.15s cubic-bezier(.22,.8,.25,1),opacity .7s}
.emotion-stage .emotion-shared svg{width:32px;height:32px;fill:none;stroke:#4a2636;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.emotion-stage .emotion-shared svg path+path{stroke-width:1.3;stroke:#fff6e9}
.emotion-stage .emotion-link{position:absolute;z-index:0;left:27%;right:24%;top:61%;display:flex;align-items:center;gap:7px;opacity:0;transform:translateZ(-15px) scaleX(.6);transition:opacity .8s,transform 1.2s}
.emotion-stage .emotion-link i{height:2px;flex:1;background:linear-gradient(90deg,#ba7151,#d79775,#ba7151)}
.emotion-stage .emotion-link span{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#c87e50;box-shadow:0 0 0 7px #d9a47312}
.emotion-stage .emotion-caption{position:relative;display:grid;max-width:520px;min-height:3em;margin:0 auto;padding:0 20px;place-items:start center;text-align:center;font-size:clamp(15px,1.45vw,20px);line-height:1.45;font-weight:700;letter-spacing:-.3px;text-wrap:balance}
.emotion-stage .emotion-caption>span{grid-area:1/1;opacity:1;visibility:visible;transition:opacity .55s}
.emotion-stage .emotion-caption>span[aria-hidden=true]{opacity:0;visibility:hidden}
.emotion-stage .emotion-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:490px;margin:8px auto 0;padding:0 20px}
.emotion-stage .emotion-controls button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:9px 0 15px;background:transparent;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.2px;color:var(--emotion-muted);text-align:center;transition:color .2s;overflow-wrap:anywhere}
.emotion-stage .emotion-controls button[aria-pressed=true]{color:var(--emotion-ink)}
.emotion-stage .emotion-controls i{position:absolute;bottom:3px;inset-inline:0;height:2px;background:var(--emotion-border);overflow:hidden;border-radius:2px}
.emotion-stage .emotion-controls i:before{position:absolute;content:'';inset:0;background:#ab5939;transform-origin:left;transform:scaleX(0);transition:transform .3s}
.emotion-stage .emotion-controls button[aria-pressed=true] i:before{transform:scaleX(max(.08,var(--emotion-progress)))}
.emotion-stage[data-emotion-playing=false] .emotion-controls button[aria-pressed=true] i:before{transform:scaleX(1)}
.emotion-stage[data-emotion-scene='1'] .emotion-world{transform:rotateX(1deg) rotateY(2deg)}
.emotion-stage[data-emotion-scene='1'] .emotion-character--curiosity{transform:translate3d(-46%,5%,80px) rotateZ(0deg) rotateY(13deg)}
.emotion-stage[data-emotion-scene='1'] .emotion-character--courage{transform:translate3d(51%,5%,80px) rotateZ(-2deg) rotateY(-13deg)}
.emotion-stage[data-emotion-scene='1'] .emotion-character--thinking{transform:translate3d(36%,-5%,-80px) rotateZ(-9deg) scale(.88);opacity:.72;filter:drop-shadow(1px 9px 6px #3927441c)}
.emotion-stage[data-emotion-scene='1'] .emotion-thought--one,.emotion-stage[data-emotion-scene='1'] .emotion-thought--two{opacity:0;transform:translate3d(0,-18px,20px) scale(.9)}
.emotion-stage[data-emotion-scene='1'] .emotion-thought--three{opacity:0;transform:translate3d(0,-5px,-10px) scale(.9)}
.emotion-stage[data-emotion-scene='1'] .emotion-character--curiosity .emotion-face{transform:translateX(5px)}
.emotion-stage[data-emotion-scene='1'] .emotion-character--courage .emotion-face{transform:translateX(-6px)}
.emotion-stage[data-emotion-scene='2'] .emotion-character--curiosity{transform:translate3d(-46%,9%,70px) rotateZ(3deg) rotateY(9deg)}
.emotion-stage[data-emotion-scene='2'] .emotion-character--courage{transform:translate3d(49%,7%,80px) rotateZ(-4deg) rotateY(-9deg)}
.emotion-stage[data-emotion-scene='2'] .emotion-character--thinking{transform:translate3d(19%,-8%,-110px) scale(.77);opacity:0}
.emotion-stage[data-emotion-scene='2'] .emotion-thought{opacity:0;transform:translate3d(0,-25px,10px) scale(.9)}
.emotion-stage[data-emotion-scene='2'] .emotion-shared{opacity:1;transform:translate3d(0,-3px,130px) scale(1)}
.emotion-stage[data-emotion-scene='2'] .emotion-link{opacity:.9;transform:translateZ(-15px) scaleX(1)}
.emotion-stage[data-emotion-scene='2'] .emotion-character--curiosity .emotion-face{transform:translateX(5px)}
.emotion-stage[data-emotion-scene='2'] .emotion-character--courage .emotion-face{transform:translateX(-5px)}
.emotion-stage--compact{padding-top:0}
.emotion-stage--compact .emotion-viewport{aspect-ratio:1.35;max-height:450px}
.emotion-stage--compact .emotion-stage-top>span{max-width:240px;font-size:9px}
:root[data-theme=dark] .emotion-stage{--emotion-ink:#f6edf7;--emotion-muted:#bfafc9;--emotion-border:#584161}
:root[data-theme=dark] .emotion-stage .emotion-thought{background:linear-gradient(130deg,#46374e,#31243c);border-color:#8e739b;color:#fff7f4;box-shadow:0 12px 25px #0002,0 1px 0 #eadcf012 inset}
:root[data-theme=dark] .emotion-stage .emotion-thought--three{background:#574363}
:root[data-theme=dark] .emotion-stage .emotion-controls i:before{background:#f0b080}
@media(min-width:1600px){.emotion-stage .emotion-thought{font-size:14px}.emotion-stage .emotion-thought--three{font-size:12px}.emotion-stage .emotion-controls button{font-size:12px}}
@media(max-width:760px){
  .emotion-stage{max-width:660px;margin-inline:auto;padding-top:8px}
  .emotion-stage .emotion-viewport{aspect-ratio:1.2;min-height:240px}
  .emotion-stage .emotion-stage-top{padding-inline:8px}
  .emotion-stage .emotion-stage-top>span{font-size:9px;max-width:240px}
  .emotion-stage .emotion-thought{padding:8px 10px;font-size:12px;max-width:42%;border-radius:12px 12px 12px 3px}
  .emotion-stage .emotion-thought--two{right:2%;border-radius:12px 12px 3px 12px}
  .emotion-stage .emotion-thought--three{font-size:11px;max-width:46%;left:38%;top:4%}
  .emotion-stage .emotion-shared{left:calc(50% - 27px);width:54px;height:54px}
  .emotion-stage .emotion-shared svg{width:28px;height:28px}
  .emotion-stage .emotion-caption{font-size:17px;padding-inline:10px}
  .emotion-stage .emotion-controls{padding-inline:8px;gap:10px;max-width:430px}
  .emotion-stage .emotion-controls button{font-size:10px}
  .emotion-stage--compact .emotion-viewport{aspect-ratio:1.25}
}
@media(max-width:400px){
  .emotion-stage .emotion-viewport{aspect-ratio:1.08;min-height:242px}
  .emotion-stage .emotion-thought{font-size:11px;padding:7px 8px;max-width:43%;line-height:1.5}
  .emotion-stage .emotion-thought--one{left:1%;top:21%}
  .emotion-stage .emotion-thought--two{right:0;top:33%}
  .emotion-stage .emotion-thought--three{font-size:10.5px;max-width:48%;left:35%;top:7%}
  .emotion-stage .emotion-caption{font-size:15px;min-height:3em}
  .emotion-stage .emotion-controls{gap:8px;padding-inline:2px}
  .emotion-stage .emotion-controls button{font-size:9px}
  .emotion-stage .emotion-stage-top>span{font-size:8px;letter-spacing:.75px;max-width:195px}
  .emotion-stage .emotion-character{top:23%}
  .emotion-stage .emotion-character--thinking{top:17%}
  .emotion-stage .emotion-shared{top:35%;width:46px;height:46px;left:calc(50% - 23px)}
}
@media(prefers-reduced-motion:reduce){
  .emotion-stage *{transition:none!important;animation:none!important;will-change:auto!important}
}
:root[data-motion=paused] .emotion-stage *{transition:none!important;animation:none!important;will-change:auto!important}