:root{font-family:"Noto Serif TC",PingFang TC,Microsoft JhengHei,serif;color:#4f4650;background:#fff8fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;overflow-x:hidden;background:#fff8fa}img{max-width:100%}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}.screen-shell{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(circle at top,#ffdbe1cc,#ffdbe100 30%),linear-gradient(180deg,#fff9fb,#fdeff3)}.phone-stage{width:100%;display:grid;place-items:center}.phone-frame{position:relative;width:min(100%,420px);aspect-ratio:9/16;overflow:hidden;border:1px solid rgba(228,166,178,.6);border-radius:28px;box-shadow:0 28px 70px #d08b9747;background:#fff8fa}.step-frame{animation:frame-enter .68s cubic-bezier(.22,1,.36,1) both;will-change:transform,opacity,filter}.step-frame .phone-background{animation:background-enter .9s cubic-bezier(.22,1,.36,1) both;transform-origin:center center}.step-frame .overlay{animation:overlay-enter .62s cubic-bezier(.22,1,.36,1) both}.step-frame.is-leaving{animation:frame-leave .56s cubic-bezier(.55,0,.34,1) both}.step-frame.is-leaving .phone-background{animation:background-leave .56s cubic-bezier(.55,0,.34,1) both}.step-frame.is-leaving .overlay{animation:overlay-leave .52s ease both}.phone-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none}.pandora-logo{position:absolute;top:2.8%;left:50%;z-index:2;width:35%;transform:translate(-50%)}.overlay{position:absolute;inset:0;z-index:3}.overlay-home{display:flex;justify-content:center;align-items:flex-end;touch-action:pan-down}.home-frame .pandora-logo,.birthday-frame .pandora-logo,.nickname-frame .pandora-logo,.result-frame .pandora-logo{animation:logo-enter .76s cubic-bezier(.22,1,.36,1) both}.step-frame.is-leaving .pandora-logo{animation:logo-leave .42s ease both}.home-start-button{position:absolute;bottom:23.8%;width:28%}.image-button{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;appearance:none;cursor:pointer;transition:transform .18s ease,opacity .18s ease}.image-button img{display:block;width:100%;height:auto}.image-button:hover:not(:disabled){transform:translateY(-2px)}.image-button:disabled{cursor:not-allowed;opacity:.52}.overlay-home .home-start-button,.overlay-birthday .birthday-submit-button,.overlay-nickname .name-submit-button{animation:cta-enter .9s cubic-bezier(.22,1,.36,1) both}.overlay-birthday,.overlay-nickname{display:flex;flex-direction:column;align-items:center}.input-frame{position:absolute;display:flex;align-items:center;justify-content:center;width:74.1%;min-height:8.6%;padding:0;border:4px solid #d86c82;border-radius:14px;background:#ffffffe6;box-shadow:0 1px #ffffffb3 inset,0 0 0 1px #ffffff4d}.input-frame-birthday{top:22.2%}.input-frame-name{top:48.6%}.input-display,.native-text-input{position:absolute;inset:0;width:100%;height:100%;padding:0 7.5%;border:0;background:transparent;color:#e896a2;font-size:clamp(1rem,2.9vw,1.45rem);line-height:1;letter-spacing:.12em;text-align:center}.input-display{display:flex;align-items:center;justify-content:center;color:#efb7c0;pointer-events:none}.input-display-birthday{font-size:clamp(1rem,3vw,20px)}.input-display.has-value{color:#d6788a}.native-overlay-input{position:absolute;inset:0;border:0;background:transparent;outline:none;appearance:none;-webkit-appearance:none}.input-trigger-button{cursor:pointer}.native-date-input{position:absolute;inset:0;z-index:2;opacity:0;cursor:pointer;color:transparent;caret-color:transparent}.native-date-input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.native-date-input::-webkit-datetime-edit,.native-date-input::-webkit-datetime-edit-fields-wrapper,.native-date-input::-webkit-datetime-edit-text,.native-date-input::-webkit-datetime-edit-year-field,.native-date-input::-webkit-datetime-edit-month-field,.native-date-input::-webkit-datetime-edit-day-field{color:transparent}.native-text-input::placeholder{color:#efb7c0}.native-text-input{position:absolute;z-index:1}.native-text-input:focus{outline:none}.input-frame-name .native-text-input{font-size:clamp(1rem,3vw,1.5rem)}.birthday-submit-button,.name-submit-button{position:absolute;width:50.9%}.birthday-submit-button{top:65.7%}.name-submit-button{top:66.8%}.overlay-result{display:flex;flex-direction:column;align-items:center}.result-name-chip{position:absolute;top:var(--result-name-top, 17.7%);left:var(--result-name-left, 50%);width:var(--result-name-width, 21.8%);min-height:var(--result-name-height, 4.2%);transform:translate(var(--result-name-translate-x, -50%),var(--result-name-translate-y, 0%)) rotate(var(--result-name-rotate, 0deg));display:flex;align-items:center;justify-content:center;color:var(--result-name-color, #616267);font-family:Noto Sans CJK TC,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;font-size:var(--result-name-font-size, 12px);font-weight:700;line-height:1;letter-spacing:var(--result-name-letter-spacing, .04em);text-align:center;white-space:nowrap}.result-name-path{position:absolute;top:var(--result-name-top, 17.7%);left:var(--result-name-left, 50%);width:var(--result-name-svg-width, 21.8%);height:var(--result-name-svg-height, 4.2%);overflow:visible;transform:translate(var(--result-name-translate-x, -50%),var(--result-name-translate-y, 0%)) rotate(var(--result-name-rotate, 0deg))}.result-name-path-text{fill:var(--result-name-color, #616267);font-family:Noto Sans CJK TC,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;font-size:var(--result-name-font-size, 12px);font-weight:700;letter-spacing:var(--result-name-letter-spacing, .04em)}.result-name-path-guide{stroke:#00aaffd9;stroke-width:1.5;stroke-dasharray:3 2}.result-name-path-guide.is-hidden{display:none}.result-actions{position:absolute;top:78.8%;left:50%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.2%;row-gap:2%;width:90%;transform:translate(-50%)}.result-action-button{width:100%}.result-actions .result-action-button:nth-child(3){grid-column:1/span 2;justify-self:center;width:57%}.text-link-button{position:absolute;bottom:5.7%;padding:0;border:0;background:transparent;color:#d98e9c;font-size:.95rem;letter-spacing:.16em;cursor:pointer}.text-link-button:hover{color:#bf7183}@media(max-width:480px){.screen-shell{padding:0;background:#fff8fa}.phone-frame{width:100vw;border:0;border-radius:0;box-shadow:none}.result-actions{top:78.8%;width:90%}.result-actions .result-action-button:nth-child(3){width:58%}}@keyframes frame-enter{0%{opacity:0;transform:translateY(28px) scale(.985);filter:saturate(.94)}to{opacity:1;transform:translateY(0) scale(1);filter:saturate(1)}}@keyframes overlay-enter{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes background-enter{0%{opacity:.82;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@keyframes logo-enter{0%{opacity:0;transform:translate(-50%,-16px) scale(.97)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes cta-enter{0%{opacity:0;transform:translateY(18px) scale(.96)}55%{opacity:1}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes frame-leave{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-9%) scale(.992)}}@keyframes overlay-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-18px)}}@keyframes background-leave{0%{opacity:1;transform:scale(1)}to{opacity:.8;transform:scale(1.03)}}@keyframes logo-leave{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-10px) scale(.98)}}