.s3{--vw:1vw;--vh:1vh;--sw:clamp(420px,calc(var(--vw)*36),540px);--k:calc(var(--sw)/1068);--fw:calc(var(--sw)*1.16);--wh:96px;position:relative;height:calc(var(--vh)*250);color:var(--navy);background:var(--cream)}
.s3-stage{position:sticky;top:0;height:calc(var(--vh)*100);overflow:hidden}
.s3-in{height:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,520px) auto;justify-content:center;column-gap:calc(var(--vw)*3.2);align-items:center;padding:0 calc(var(--vw)*6)}
.s3-copy{display:flex;flex-direction:column;gap:22px;opacity:var(--ci,1);transform:translateY(calc((1 - var(--ci,1))*24px))}
.s3-eye{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--coral-text)}
.s3-eye::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--coral)}
.s3 h2{margin:0;font-size:clamp(34px,calc(var(--vw)*3.4),58px);font-weight:600;line-height:1.24;color:var(--navy);text-wrap:balance}
.s3-p{margin:0;font-size:clamp(17px,calc(var(--vw)*1.3),20px);line-height:1.85;color:var(--ink);max-width:24em;text-wrap:pretty}
.s3-idx{display:flex;gap:8px;margin-top:8px}
.s3-idx button{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 18px;border:none;border-radius:999px;background:transparent;font:500 17px var(--font-sans);color:var(--slate);cursor:pointer;transition:background 360ms var(--ease-calm),color 360ms var(--ease-calm),box-shadow 360ms}
.s3-idx button img{width:28px;height:28px;object-fit:contain}
.s3-idx button[aria-selected="true"]{background:var(--white);color:var(--navy);font-weight:600;box-shadow:0 0 0 1.5px var(--sand-line)}
.s3-idx button:hover{color:var(--navy)}
.s3-vis{position:relative;width:var(--fw);height:calc(var(--k)*1190 + var(--wh) + var(--fw)*.07 + 44px);transform:translateY(calc((1 - var(--en,1))*60px))}
.s3-field{position:absolute;left:0;right:0;top:18px;bottom:calc(var(--k)*1190*.32);border-radius:calc(var(--fw)/2) calc(var(--fw)/2) 36px 36px;overflow:hidden}
.s3-field i{position:absolute;inset:0;opacity:0;transition:none}
.s3-field{opacity:.5;-webkit-mask-image:radial-gradient(70% 62% at 50% 40%,#000 40%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(70% 62% at 50% 40%,#000 40%,rgba(0,0,0,0) 100%)}
.s3-field i[data-p="0"]{background:radial-gradient(90% 70% at 50% 10%,#F6F0E8,#EFE7DD 72%)}
.s3-field i[data-p="1"]{background:radial-gradient(90% 70% at 50% 10%,#EFF7F3,#E5F2EC 72%)}
.s3-field i[data-p="2"]{background:radial-gradient(90% 70% at 50% 10%,#FBEDE6,#F7E0D6 72%)}
.s3-who{position:absolute;left:0;right:0;top:calc(var(--fw)*.07 + 8px);height:var(--wh)}
.s3-who span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;will-change:transform,opacity}
.s3-who img{width:40px;height:40px;object-fit:contain}
.s3-who b{font-size:clamp(28px,calc(var(--sw)*.072),38px);font-weight:500;line-height:1;color:var(--navy)}
.s3-sheet{position:absolute;left:50%;bottom:0;box-shadow:0 50px 90px -40px rgba(30,42,74,.46),0 0 0 1px rgba(30,42,74,.07)!important;margin:0;width:var(--sw);height:calc(var(--k)*1190);transform:translate(-50%,calc((1 - var(--en,1))*40px));border-radius:calc(var(--k)*64) calc(var(--k)*64) calc(var(--k)*44) calc(var(--k)*44);overflow:hidden;background:var(--cream);box-shadow:0 46px 80px -44px rgba(30,42,74,.42),0 0 0 1px rgba(30,42,74,.06);z-index:10}
.s3-base{display:block;width:100%}
.s3-sel{position:absolute;left:calc(var(--k)*73);width:calc(var(--k)*921);height:calc(var(--k)*202);top:calc(var(--k)*(var(--y,404.5) - 101));border-radius:calc(var(--k)*48);background:rgb(242,236,231);mix-blend-mode:multiply}
.s3-badge{position:absolute;left:calc(var(--k)*100);width:calc(var(--k)*250);top:calc(var(--k)*(var(--y,404.5) - 45))}
.s3-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.s3.rm .s3-field i,.s3.rm .s3-who span{transition:opacity 500ms var(--ease-calm)}
.s3.t{--sw:clamp(300px,calc(var(--vw)*33),370px);--wh:130px}
.s3.t .s3-in{column-gap:calc(var(--vw)*4);padding:0 calc(var(--vw)*5)}
.s3.t h2{font-size:clamp(28px,calc(var(--vw)*3.4),38px)}
.s3.t .s3-p{font-size:16px;line-height:1.8}
.s3.t .s3-idx button{height:42px;padding:0 12px 0 14px;font-size:15px}.s3.t .s3-idx button img{width:24px;height:24px}
.s3.tp .s3-in{grid-template-columns:1fr;align-content:center;justify-items:center;row-gap:40px;padding:0 calc(var(--vw)*8)}
.s3.tp .s3-copy{justify-self:stretch}
.s3.tp{--sw:clamp(340px,calc(var(--vw)*52),460px);--wh:158px}
.s3.m{--sw:calc(var(--vw)*100 - 56px);--fw:calc(var(--vw)*100 - 24px);--wh:96px;height:calc(var(--vh)*230)}
.s3.m .s3-in{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;padding:calc(var(--vh)*7) 12px 0}
.s3.m .s3-copy{gap:12px;align-self:stretch;padding:0 12px}
.s3.m h2{font-size:clamp(26px,calc(var(--vw)*7.4),32px)}
.s3.m .s3-p{font-size:15px;line-height:1.75}
.s3.m .s3-idx{display:none}
.s3.m .s3-who{top:22px}.s3.m .s3-who img{width:40px;height:40px}.s3.m .s3-who span{gap:6px}.s3.m .s3-who b{font-size:32px}
.s3.m .s3-field{bottom:40px;border-radius:calc(var(--fw)/2) calc(var(--fw)/2) 28px 28px}
.s3.m .s3-vis{height:calc(var(--k)*1190 + var(--wh) + 40px)}