.family-page {
  --family-ink: #684e2d;
  --family-muted: #8b7355;
  --family-cream: #fff8ec;
  --family-peach: #e9b36b;
  position: relative;
  width: min(100%, 430px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  padding:
    max(44px, env(safe-area-inset-top))
    max(28px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
  background: var(--surface);
  color: var(--family-ink);
}

.family-dots,
.family-dots::before,
.family-dots::after {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  border-radius: 50%;
}

.family-dots {
  top: 10px;
  left: 12px;
  width: 4px;
  height: 4px;
  background: rgb(255 255 255 / 82%);
  box-shadow:
    193px 786px 0 0.5px rgb(255 255 255 / 65%),
    156px 651px 0 1.5px rgb(255 255 255 / 54%),
    130px 35px 0 1px rgb(255 255 255 / 79%),
    49px 602px 0 0.5px rgb(255 255 255 / 64%),
    262px 813px 0 1px rgb(255 255 255 / 63%),
    280px 367px 0 1.5px rgb(255 255 255 / 85%),
    53px 853px 0 0.5px rgb(255 255 255 / 74%),
    212px 361px 0 0.5px rgb(255 255 255 / 62%),
    316px 471px 0 0.5px rgb(255 255 255 / 56%),
    206px 576px 0 0.5px rgb(255 255 255 / 84%),
    325px 130px 0 0.5px rgb(255 255 255 / 86%),
    88px 79px 0 0.5px rgb(255 255 255 / 79%),
    286px 457px 0 1.5px rgb(255 255 255 / 83%),
    313px 516px 0 1.5px rgb(255 255 255 / 80%),
    29px 839px 0 1.5px rgb(255 255 255 / 70%),
    86px 48px 0 1.5px rgb(255 255 255 / 76%),
    321px 468px 0 0.5px rgb(255 255 255 / 82%),
    112px 439px 0 1px rgb(255 255 255 / 56%),
    66px 127px 0 0.5px rgb(255 255 255 / 66%),
    350px 191px 0 0.5px rgb(255 255 255 / 66%),
    75px 776px 0 1px rgb(255 255 255 / 65%),
    85px 646px 0 1.5px rgb(255 255 255 / 75%),
    155px 371px 0 1.5px rgb(255 255 255 / 83%),
    234px 477px 0 1.5px rgb(255 255 255 / 80%),
    192px 363px 0 0.5px rgb(255 255 255 / 68%),
    213px 325px 0 0.5px rgb(255 255 255 / 66%),
    292px 16px 0 0.5px rgb(255 255 255 / 68%),
    263px 113px 0 1px rgb(255 255 255 / 54%),
    31px 531px 0 0.5px rgb(255 255 255 / 54%),
    138px 178px 0 1px rgb(255 255 255 / 57%),
    51px 418px 0 0.5px rgb(255 255 255 / 86%),
    188px 129px 0 1px rgb(255 255 255 / 57%),
    303px 95px 0 0.5px rgb(255 255 255 / 62%),
    37px 76px 0 0.5px rgb(255 255 255 / 72%),
    365px 170px 0 0.5px rgb(255 255 255 / 68%),
    38px 735px 0 0.5px rgb(255 255 255 / 59%),
    149px 29px 0 1.5px rgb(255 255 255 / 70%),
    187px 290px 0 1px rgb(255 255 255 / 69%),
    28px 878px 0 0.5px rgb(255 255 255 / 69%),
    223px 40px 0 1px rgb(255 255 255 / 52%),
    146px 70px 0 0.5px rgb(255 255 255 / 73%),
    244px 58px 0 0.5px rgb(255 255 255 / 83%),
    230px 368px 0 0.5px rgb(255 255 255 / 71%),
    229px 321px 0 1px rgb(255 255 255 / 61%),
    184px 426px 0 0.5px rgb(255 255 255 / 67%),
    26px 667px 0 0.5px rgb(255 255 255 / 60%),
    298px 402px 0 0.5px rgb(255 255 255 / 60%),
    71px 686px 0 0.5px rgb(255 255 255 / 72%),
    149px 555px 0 0.5px rgb(255 255 255 / 56%),
    191px 109px 0 0.5px rgb(255 255 255 / 54%),
    59px 724px 0 1.5px rgb(255 255 255 / 55%),
    37px 823px 0 0.5px rgb(255 255 255 / 64%),
    33px 492px 0 0.5px rgb(255 255 255 / 77%),
    319px 274px 0 0.5px rgb(255 255 255 / 76%),
    356px 375px 0 0.5px rgb(255 255 255 / 55%),
    41px 314px 0 0.5px rgb(255 255 255 / 63%),
    38px 514px 0 1.5px rgb(255 255 255 / 58%),
    372px 458px 0 0.5px rgb(255 255 255 / 66%),
    195px 185px 0 0.5px rgb(255 255 255 / 84%),
    99px 288px 0 1.5px rgb(255 255 255 / 79%),
    354px 206px 0 0.5px rgb(255 255 255 / 81%),
    202px 141px 0 1px rgb(255 255 255 / 67%),
    176px 181px 0 0.5px rgb(255 255 255 / 79%),
    19px 331px 0 1.5px rgb(255 255 255 / 66%),
    107px 348px 0 1px rgb(255 255 255 / 79%),
    311px 845px 0 1.5px rgb(255 255 255 / 75%),
    28px 885px 0 0.5px rgb(255 255 255 / 74%),
    322px 487px 0 0.5px rgb(255 255 255 / 84%),
    11px 702px 0 0.5px rgb(255 255 255 / 59%),
    278px 400px 0 1px rgb(255 255 255 / 61%),
    335px 809px 0 0.5px rgb(255 255 255 / 74%),
    214px 432px 0 1px rgb(255 255 255 / 72%),
    16px 65px 0 1.5px rgb(255 255 255 / 83%),
    237px 255px 0 0.5px rgb(255 255 255 / 69%),
    197px 8px 0 1.5px rgb(255 255 255 / 52%),
    34px 338px 0 0.5px rgb(255 255 255 / 56%),
    27px 781px 0 0.5px rgb(255 255 255 / 58%),
    19px 496px 0 0.5px rgb(255 255 255 / 59%),
    48px 894px 0 1px rgb(255 255 255 / 58%),
    269px 409px 0 1.5px rgb(255 255 255 / 79%),
    265px 135px 0 0.5px rgb(255 255 255 / 84%),
    316px 873px 0 0.5px rgb(255 255 255 / 68%),
    8px 384px 0 1.5px rgb(255 255 255 / 55%),
    258px 378px 0 0.5px rgb(255 255 255 / 59%),
    242px 348px 0 1px rgb(255 255 255 / 53%),
    17px 267px 0 1.5px rgb(255 255 255 / 86%),
    142px 353px 0 1.5px rgb(255 255 255 / 86%),
    30px 523px 0 0.5px rgb(255 255 255 / 58%),
    86px 229px 0 1px rgb(255 255 255 / 85%),
    363px 35px 0 0.5px rgb(255 255 255 / 70%),
    73px 348px 0 1px rgb(255 255 255 / 69%),
    356px 440px 0 1.5px rgb(255 255 255 / 59%),
    338px 469px 0 0.5px rgb(255 255 255 / 74%),
    354px 824px 0 0.5px rgb(255 255 255 / 60%),
    212px 625px 0 0.5px rgb(255 255 255 / 66%),
    179px 791px 0 1px rgb(255 255 255 / 59%),
    204px 826px 0 1px rgb(255 255 255 / 72%),
    11px 702px 0 0.5px rgb(255 255 255 / 56%),
    19px 638px 0 1.5px rgb(255 255 255 / 83%),
    295px 829px 0 0.5px rgb(255 255 255 / 61%),
    14px 560px 0 0.5px rgb(255 255 255 / 53%),
    305px 858px 0 1.5px rgb(255 255 255 / 75%),
    148px 232px 0 1px rgb(255 255 255 / 54%),
    113px 28px 0 1.5px rgb(255 255 255 / 78%),
    274px 896px 0 1.5px rgb(255 255 255 / 82%),
    264px 599px 0 0.5px rgb(255 255 255 / 73%),
    251px 435px 0 1px rgb(255 255 255 / 80%),
    168px 753px 0 1px rgb(255 255 255 / 69%),
    113px 394px 0 0.5px rgb(255 255 255 / 73%),
    87px 858px 0 1px rgb(255 255 255 / 55%),
    315px 605px 0 1.5px rgb(255 255 255 / 65%),
    173px 623px 0 0.5px rgb(255 255 255 / 56%),
    47px 900px 0 0.5px rgb(255 255 255 / 59%),
    316px 482px 0 1px rgb(255 255 255 / 57%),
    255px 800px 0 0.5px rgb(255 255 255 / 82%),
    123px 854px 0 1px rgb(255 255 255 / 69%),
    93px 856px 0 1px rgb(255 255 255 / 64%),
    68px 160px 0 0.5px rgb(255 255 255 / 86%),
    119px 674px 0 1.5px rgb(255 255 255 / 72%),
    114px 213px 0 0.5px rgb(255 255 255 / 68%),
    58px 321px 0 1.5px rgb(255 255 255 / 79%),
    341px 493px 0 1.5px rgb(255 255 255 / 53%),
    327px 290px 0 1px rgb(255 255 255 / 80%),
    328px 228px 0 0.5px rgb(255 255 255 / 53%),
    56px 717px 0 0.5px rgb(255 255 255 / 55%),
    201px 634px 0 0.5px rgb(255 255 255 / 61%),
    362px 104px 0 1.5px rgb(255 255 255 / 78%),
    29px 675px 0 1px rgb(255 255 255 / 85%),
    260px 725px 0 1.5px rgb(255 255 255 / 61%),
    316px 254px 0 0.5px rgb(255 255 255 / 64%),
    118px 342px 0 1px rgb(255 255 255 / 60%),
    327px 78px 0 0.5px rgb(255 255 255 / 69%),
    34px 526px 0 1.5px rgb(255 255 255 / 61%),
    59px 577px 0 0.5px rgb(255 255 255 / 74%),
    300px 327px 0 0.5px rgb(255 255 255 / 76%),
    69px 458px 0 1.5px rgb(255 255 255 / 77%),
    89px 554px 0 0.5px rgb(255 255 255 / 64%),
    168px 331px 0 0.5px rgb(255 255 255 / 77%),
    45px 198px 0 0.5px rgb(255 255 255 / 83%),
    176px 227px 0 0.5px rgb(255 255 255 / 62%),
    269px 256px 0 1px rgb(255 255 255 / 83%),
    308px 32px 0 0.5px rgb(255 255 255 / 57%),
    9px 861px 0 1px rgb(255 255 255 / 63%),
    369px 554px 0 0.5px rgb(255 255 255 / 59%),
    364px 146px 0 0.5px rgb(255 255 255 / 55%),
    22px 537px 0 0.5px rgb(255 255 255 / 71%),
    336px 303px 0 0.5px rgb(255 255 255 / 52%),
    150px 44px 0 0.5px rgb(255 255 255 / 69%),
    211px 150px 0 1px rgb(255 255 255 / 75%),
    287px 178px 0 1px rgb(255 255 255 / 79%),
    315px 605px 0 0.5px rgb(255 255 255 / 71%),
    123px 781px 0 0.5px rgb(255 255 255 / 75%),
    321px 352px 0 1.5px rgb(255 255 255 / 67%),
    278px 805px 0 0.5px rgb(255 255 255 / 77%),
    338px 563px 0 1.5px rgb(255 255 255 / 79%),
    133px 784px 0 1.5px rgb(255 255 255 / 54%),
    50px 53px 0 0.5px rgb(255 255 255 / 56%),
    329px 900px 0 1px rgb(255 255 255 / 73%),
    119px 749px 0 0.5px rgb(255 255 255 / 56%),
    260px 545px 0 0.5px rgb(255 255 255 / 53%),
    127px 430px 0 1.5px rgb(255 255 255 / 80%),
    147px 348px 0 1px rgb(255 255 255 / 57%),
    2px 82px 0 1px rgb(255 255 255 / 72%),
    93px 26px 0 1px rgb(255 255 255 / 53%),
    256px 552px 0 1px rgb(255 255 255 / 69%),
    154px 878px 0 0.5px rgb(255 255 255 / 69%),
    50px 261px 0 0.5px rgb(255 255 255 / 75%),
    116px 503px 0 1px rgb(255 255 255 / 56%),
    16px 339px 0 1.5px rgb(255 255 255 / 80%),
    38px 768px 0 1.5px rgb(255 255 255 / 52%),
    83px 24px 0 1.5px rgb(255 255 255 / 82%),
    160px 72px 0 1px rgb(255 255 255 / 64%),
    88px 696px 0 1px rgb(255 255 255 / 77%),
    92px 539px 0 1px rgb(255 255 255 / 73%),
    322px 89px 0 0.5px rgb(255 255 255 / 66%),
    265px 320px 0 1.5px rgb(255 255 255 / 60%),
    9px 170px 0 1.5px rgb(255 255 255 / 65%),
    186px 518px 0 1.5px rgb(255 255 255 / 72%),
    1px 291px 0 0.5px rgb(255 255 255 / 76%),
    197px 383px 0 0.5px rgb(255 255 255 / 57%);
}

.family-dots::before {
  content: "";
  top: 24px;
  left: 160px;
  width: 3px;
  height: 3px;
  background: rgb(255 255 255 / 72%);
  box-shadow:
    151px 207px 0 0.5px rgb(255 255 255 / 61%),
    113px 557px 0 0.5px rgb(255 255 255 / 52%),
    158px 782px 0 1px rgb(255 255 255 / 49%),
    146px 699px 0 0.5px rgb(255 255 255 / 68%),
    69px 248px 0 1px rgb(255 255 255 / 70%),
    176px 206px 0 0.5px rgb(255 255 255 / 69%),
    200px 227px 0 0.5px rgb(255 255 255 / 52%),
    15px 611px 0 1px rgb(255 255 255 / 74%),
    155px 398px 0 1px rgb(255 255 255 / 55%),
    171px 598px 0 0.5px rgb(255 255 255 / 48%),
    148px 300px 0 0.5px rgb(255 255 255 / 64%),
    -29px 659px 0 0.5px rgb(255 255 255 / 62%),
    113px 673px 0 1px rgb(255 255 255 / 74%),
    41px 682px 0 1px rgb(255 255 255 / 61%),
    176px 709px 0 0.5px rgb(255 255 255 / 49%),
    185px 256px 0 0.5px rgb(255 255 255 / 78%),
    119px 393px 0 1px rgb(255 255 255 / 67%),
    92px 159px 0 0.5px rgb(255 255 255 / 51%),
    -21px 128px 0 0.5px rgb(255 255 255 / 49%),
    64px 223px 0 1px rgb(255 255 255 / 67%),
    159px 92px 0 1px rgb(255 255 255 / 51%),
    64px 802px 0 0.5px rgb(255 255 255 / 78%),
    67px 723px 0 1px rgb(255 255 255 / 66%),
    -21px 41px 0 1px rgb(255 255 255 / 51%),
    132px 245px 0 0.5px rgb(255 255 255 / 78%),
    -6px 695px 0 1px rgb(255 255 255 / 59%),
    185px 826px 0 1px rgb(255 255 255 / 59%),
    93px 480px 0 1px rgb(255 255 255 / 70%),
    -32px 45px 0 0.5px rgb(255 255 255 / 66%),
    -38px 535px 0 0.5px rgb(255 255 255 / 78%),
    118px 838px 0 1px rgb(255 255 255 / 49%),
    108px 187px 0 0.5px rgb(255 255 255 / 70%),
    -36px 827px 0 1px rgb(255 255 255 / 49%),
    34px 438px 0 0.5px rgb(255 255 255 / 50%),
    34px 172px 0 0.5px rgb(255 255 255 / 50%),
    115px 33px 0 0.5px rgb(255 255 255 / 75%),
    134px 433px 0 0.5px rgb(255 255 255 / 73%),
    200px 283px 0 1px rgb(255 255 255 / 74%),
    199px 329px 0 1px rgb(255 255 255 / 48%),
    -15px 113px 0 0.5px rgb(255 255 255 / 62%),
    20px 313px 0 0.5px rgb(255 255 255 / 52%),
    174px 610px 0 1px rgb(255 255 255 / 60%),
    119px 826px 0 1px rgb(255 255 255 / 70%),
    -20px 527px 0 0.5px rgb(255 255 255 / 71%),
    -1px 705px 0 0.5px rgb(255 255 255 / 48%),
    -4px 406px 0 0.5px rgb(255 255 255 / 58%),
    -23px 205px 0 1px rgb(255 255 255 / 58%),
    71px 481px 0 0.5px rgb(255 255 255 / 69%),
    87px 245px 0 0.5px rgb(255 255 255 / 64%),
    193px 731px 0 0.5px rgb(255 255 255 / 51%),
    -35px 218px 0 0.5px rgb(255 255 255 / 72%),
    -15px 146px 0 0.5px rgb(255 255 255 / 49%),
    119px 696px 0 0.5px rgb(255 255 255 / 73%),
    2px 536px 0 0.5px rgb(255 255 255 / 49%),
    59px 496px 0 0.5px rgb(255 255 255 / 61%),
    150px 754px 0 0.5px rgb(255 255 255 / 58%),
    2px 236px 0 0.5px rgb(255 255 255 / 65%),
    -37px 311px 0 1px rgb(255 255 255 / 61%),
    9px 690px 0 1px rgb(255 255 255 / 74%),
    109px 738px 0 1px rgb(255 255 255 / 58%),
    25px 779px 0 1px rgb(255 255 255 / 76%),
    125px 299px 0 1px rgb(255 255 255 / 73%),
    -28px 853px 0 1px rgb(255 255 255 / 60%),
    186px 58px 0 0.5px rgb(255 255 255 / 67%),
    164px 315px 0 0.5px rgb(255 255 255 / 67%),
    35px 237px 0 0.5px rgb(255 255 255 / 66%),
    24px 516px 0 1px rgb(255 255 255 / 70%),
    115px 28px 0 1px rgb(255 255 255 / 72%),
    13px 479px 0 1px rgb(255 255 255 / 51%),
    172px 13px 0 0.5px rgb(255 255 255 / 74%),
    -40px 61px 0 0.5px rgb(255 255 255 / 52%),
    57px 699px 0 0.5px rgb(255 255 255 / 72%),
    139px 709px 0 1px rgb(255 255 255 / 51%),
    83px 405px 0 1px rgb(255 255 255 / 78%),
    154px 659px 0 0.5px rgb(255 255 255 / 72%),
    66px 257px 0 1px rgb(255 255 255 / 72%),
    -15px 650px 0 1px rgb(255 255 255 / 68%),
    -23px 377px 0 1px rgb(255 255 255 / 55%),
    28px 145px 0 0.5px rgb(255 255 255 / 57%),
    155px 564px 0 0.5px rgb(255 255 255 / 77%),
    147px 673px 0 1px rgb(255 255 255 / 52%),
    171px 509px 0 0.5px rgb(255 255 255 / 66%),
    157px 633px 0 1px rgb(255 255 255 / 51%),
    74px 494px 0 1px rgb(255 255 255 / 55%),
    139px 856px 0 1px rgb(255 255 255 / 71%),
    73px 493px 0 0.5px rgb(255 255 255 / 53%),
    -20px 283px 0 0.5px rgb(255 255 255 / 67%),
    19px 583px 0 0.5px rgb(255 255 255 / 72%),
    -32px 108px 0 1px rgb(255 255 255 / 72%),
    134px 660px 0 0.5px rgb(255 255 255 / 66%);
}

.family-logo,
.family-intro,
.family-card,
.family-button,
.family-pointer,
.family-page .status-message {
  position: relative;
  z-index: 1;
}

.family-logo {
  display: block;
  width: 168px;
  height: auto;
}

.family-intro {
  margin-top: 56px;
}

.family-title-prefix,
.family-title {
  margin: 0;
  font-size: clamp(30px, 8vw, 36px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.18;
}

.family-title-prefix:empty {
  display: none;
}

.family-title {
  margin-top: 2px;
}

.family-steps {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding-left: 1.25em;
  color: var(--family-muted);
  font-size: 16px;
  line-height: 1.6;
}

.family-card {
  width: 100%;
  margin-top: 20px;
  padding: 24px 20px;
  border: 3px solid var(--family-ink);
  border-radius: 36px;
  background: #fff;
  box-shadow: inset 0 0 0 4px var(--family-peach);
}

.family-copy-label {
  color: var(--family-muted);
  font-size: 16px;
  font-weight: 700;
}

.family-copy {
  margin-top: 8px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.7;
  white-space: pre-line;
}

.family-copy .topic-item {
  display: inline-block;
  white-space: nowrap;
}

.family-button {
  width: 100%;
  margin-top: 40px;
  padding: 16px 20px;
  border: 0;
  border-radius: 999px;
  color: #fff8ec;
  background: var(--accent);
  box-shadow:
    0 8px 0 var(--accent-deep),
    0 14px 24px rgb(218 126 91 / 28%);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.family-button:hover {
  filter: brightness(1.03);
}

.family-button:active {
  box-shadow:
    0 3px 0 var(--accent-deep),
    0 8px 16px rgb(218 126 91 / 22%);
  transform: translateY(4px);
}

.family-button:focus-visible {
  outline: 3px solid rgb(233 179 107 / 70%);
  outline-offset: 4px;
}

.family-button.is-copied {
  background: #c86b4b;
}

.family-page .status-message {
  min-height: 18px;
  margin-top: 11px;
  color: var(--family-muted);
  font-size: 12px;
  text-align: center;
}

.family-page .status-message:empty {
  display: none;
}

@media (min-width: 700px) {
  .family-page {
    min-height: 900px;
  }
}

@media (max-width: 430px) {
  .family-page {
    padding:
      max(36px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }

  .family-logo {
    width: 148px;
  }

  .family-intro {
    margin-top: 48px;
  }

  .family-title-prefix,
  .family-title {
    font-size: 32px;
  }

  .family-steps {
    font-size: 15px;
  }

  .family-copy {
    font-size: 16px;
  }

  .family-button {
    margin-top: 32px;
  }
}