:root { color-scheme: light; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color: #654453; background: #fff4f8; font-synthesis: none; }
    * { box-sizing: border-box; }
    body { margin: 0; min-width: 280px; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    button, a { touch-action: manipulation; }
    .page { min-height: 100svh; display: grid; place-items: center; padding: 28px 20px; background: radial-gradient(circle, #dfa2bc26 1px, transparent 1.6px) 0 0 / 24px 24px, radial-gradient(ellipse at 0 0, #ffdce9 0, transparent 56%), radial-gradient(ellipse at 100% 100%, #f0e3fb 0, transparent 56%), #fff7fa; }
    .room { position: relative; width: min(420px, 100%); overflow: hidden; padding: 32px 26px 29px; border: 3px solid white; border-radius: 38px; background: linear-gradient(180deg, #fff8fb, #fffcfd 70%); text-align: center; box-shadow: 0 22px 75px #b1648b1c, 0 3px 10px #cd8aab0a; }
    .room::before { content: ''; position: absolute; pointer-events: none; width: 260px; height: 260px; top: 48px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #ffdeed9c 0, #ffeaf440 52%, transparent 70%); }
    .room-label { position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 15px; border: 1px solid #f5d7e4; border-radius: 999px; background: #ffffffbf; color: #b78098; font-size: 10px; font-weight: 500; letter-spacing: .17em; }
    .portrait-area { position: relative; display: grid; place-items: center; width: 208px; height: 208px; margin: 29px auto 21px; }
    .halo { position: absolute; inset: 0; border: 1px solid #ecc7d862; border-radius: 50%; }
    .halo.inner { inset: 14px; border-color: #edc1d587; }
    .ripple { position: absolute; inset: 12px; pointer-events: none; border: 1.5px solid #dca0bb; border-radius: 50%; opacity: 0; animation: call-ripple 3.6s ease-out infinite; }
    .ripple.second { animation-delay: -1.2s; }
    .ripple.third { animation-delay: -2.4s; }
    .portrait { position: relative; width: 150px; height: 150px; border: 6px solid white; border-radius: 50%; background: #f8e7f0; box-shadow: 0 9px 30px #bd739e21, 0 0 0 1px #f4d3e3; animation: gentle-breathe 3.6s ease-in-out infinite; }
    .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .phone-badge { position: absolute; bottom: 20px; right: 22px; display: grid; place-items: center; width: 40px; height: 40px; border: 4px solid #fffafb; border-radius: 50%; background: #d877a1; color: white; box-shadow: 0 3px 12px #b8648b20; }
    .phone-badge svg { animation: phone-sway 3.6s ease-in-out infinite; transform-origin: center; }
    .decoration { position: absolute; font-family: sans-serif; font-weight: 400; }
    .heart { top: 20px; right: 10px; color: #d68bab; font-size: 30px; transform: rotate(17deg); }
    .star { bottom: 36px; left: 5px; color: #d0aa88; font-size: 27px; }
    h1 { position: relative; margin: 0; font-size: clamp(21px, 5.7vw, 25px); font-weight: 700; line-height: 1.8; letter-spacing: .025em; }
    h1 span { display: block; }
    .name { color: #cb6797; }
    .divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 19px 0 25px; color: #d3a4b9; font-family: sans-serif; font-size: 14px; }
    .divider::before, .divider::after { content: ''; display: block; width: 40px; height: 1px; background: #f1d9e5; }
    .waiting-dots { display: inline-flex; align-items: center; gap: 6px; min-height: 16px; }
    .waiting-dots span { width: 5px; height: 5px; border-radius: 50%; background: #d28bac; animation: waiting-dot 1.8s ease-in-out infinite; }
    .waiting-dots span:nth-child(2) { animation-delay: .2s; }
    .waiting-dots span:nth-child(3) { animation-delay: .4s; }
    .primary { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 60px; padding: 16px 12px; border: 1px solid #ffffff80; border-radius: 999px; background: linear-gradient(105deg, #df82ab, #cd6a9d); color: white; font-size: 17px; font-weight: 700; letter-spacing: .035em; line-height: 1.6; text-decoration: none; cursor: pointer; box-shadow: 0 7px 0 #b95b8810, 0 10px 24px #cf76a429, inset 0 1px 0 #ffffff40; transition: transform .18s, filter .18s; }
    .primary:hover { filter: brightness(1.04); transform: translateY(-2px); }
    .primary:active { transform: translateY(0); }
    .room-note { margin: 23px 0 0; color: #b59ca8; font-size: 10px; font-weight: 400; letter-spacing: .11em; }
    :focus-visible { outline: 3px solid #e69bbf; outline-offset: 4px; }
    dialog { width: min(390px, calc(100% - 40px)); max-height: calc(100svh - 40px); overflow: auto; margin: auto; border: 3px solid white; border-radius: 32px; padding: 0; background: #fffafb; color: #654453; box-shadow: 0 25px 80px #8a4a7026; }
    dialog::backdrop { background: #79596d35; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
    .popup { padding: 34px 24px 22px; text-align: center; background: radial-gradient(ellipse at 50% 0, #ffe4f0 0, transparent 65%); }
    .app-mark { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border: 1px solid #f5cddd; border-radius: 25px; background: #fff0f6; color: #d377a2; box-shadow: 0 5px 14px #d68daf0c; }
    h2 { margin: 0; font-size: clamp(19px, 5.2vw, 23px); font-weight: 700; line-height: 1.85; letter-spacing: .02em; }
    h2 span { display: block; }
    .emphasis { color: #c86695; }
    .popup .primary { margin-top: 25px; }
    .install-note { margin: 17px 0 0; color: #ac94a0; font-size: 10px; line-height: 1.8; }
    .destination { margin: 5px 0 0; color: #b29ba7; font-size: 10px; letter-spacing: .03em; }
    .back { display: inline-block; min-height: 40px; margin-top: 12px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: #aa8196; font-size: 12px; cursor: pointer; }
    .back:hover { background: #faeaf2; }
    @keyframes call-ripple {
      0% { transform: scale(.78); opacity: 0; }
      18% { opacity: .45; }
      100% { transform: scale(1.22); opacity: 0; }
    }
    @keyframes gentle-breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.025); }
    }
    @keyframes phone-sway {
      0%, 12%, 38%, 100% { transform: rotate(0); }
      18%, 30% { transform: rotate(-12deg); }
      24%, 34% { transform: rotate(10deg); }
    }
    @keyframes waiting-dot {
      0%, 65%, 100% { transform: translateY(0); opacity: .35; }
      30% { transform: translateY(-3px); opacity: .9; }
    }
    .showing-install .ripple, .showing-install .portrait, .showing-install .phone-badge svg, .showing-install .waiting-dots span { animation-play-state: paused; }
    @media (max-width: 360px) { .page { padding: 20px 14px; } .room { padding: 28px 19px 25px; } .portrait-area { margin-top: 22px; } dialog { width: calc(100% - 28px); } .popup { padding: 29px 19px 18px; } }
    @media (prefers-reduced-motion: reduce) {
      .primary { transition: none; }
      .ripple, .portrait, .phone-badge svg, .waiting-dots span { animation: none; }
      .ripple { opacity: 0; }
    }
  
h1,.room-note{overflow-wrap:anywhere}.preview-notice{position:relative;z-index:2;padding:10px 16px;background:#fff0cf;text-align:center;font:13px/1.7 system-ui,sans-serif;color:#715623}.preview-notice a{color:inherit}.avatar-placeholder{display:grid;place-items:center;height:100%;font-size:64px;color:#d68bab}