:root { color-scheme: light; --cream:#faf4eb; --brown:#634739; --muted:#846e60; --peach:#f0d3bf; --line:#e6d8c9; }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--cream); color:var(--brown); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
    button,input { font:inherit; }
    button { cursor:pointer; }
    [hidden] { display:none !important; }
    .shell { max-width:1240px; margin:auto; padding:34px 6vw 24px; }
    header { display:flex; align-items:center; gap:12px; }
    .seal { display:grid; place-items:center; width:34px; height:38px; background:#a7644d; color:#fff7ed; border-radius:10px 10px 13px 10px; }
    .seal svg { width:22px; height:22px; }
    .brand { font-family:Georgia,"Times New Roman",serif; font-size:30px; letter-spacing:-1px; font-weight:normal; }
    main { display:grid; grid-template-columns:1.12fr 1fr; gap:9%; align-items:center; min-height:710px; padding:48px 0 50px; }
    .art { position:relative; min-width:0; }
    .illustration { position:relative; height:510px; overflow:hidden; border-radius:220px 220px 24px 24px; background:#f0e3d2; border:1px solid #e9dac8; display:flex; align-items:center; justify-content:center; }
    .sun { position:absolute; width:230px; height:230px; border-radius:50%; background:#efd0b7; top:65px; left:50%; transform:translateX(-50%); }
    .window { position:absolute; inset:24px; border:1px solid #dac5ae; border-radius:210px 210px 13px 13px; }
    .window:before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#dac5ae; }
    .window:after { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:#dac5ae; }
    .future { position:relative; text-align:center; background:#faf4ebe8; padding:25px 28px; border:1px solid #e3d3c0; border-radius:18px; max-width:80%; }
    .future svg { width:42px; height:42px; color:#a9795e; margin-bottom:12px; }
    .future strong { display:block; font-family:Georgia,serif; font-size:24px; font-weight:normal; }
    .future span { display:block; margin-top:9px; color:var(--muted); font-size:12px; letter-spacing:.05em; }
    .art-caption { display:flex; align-items:center; justify-content:center; gap:12px; margin:20px 0 0; color:var(--muted); font-size:12px; letter-spacing:.08em; }
    .art-caption:before,.art-caption:after { content:""; width:26px; height:1px; background:#cbb39c; }
    .eyebrow { color:#a3654b; letter-spacing:.16em; font-size:11px; text-transform:uppercase; font-weight:600; margin:0 0 22px; }
    h1 { font-family:Georgia,"Times New Roman",serif; font-weight:normal; font-size:clamp(42px,4.7vw,62px); line-height:1.09; letter-spacing:-2px; margin:0 0 22px; }
    .description { font-size:16px; line-height:1.8; color:var(--muted); max-width:340px; margin:0 0 32px; }
    .actions { max-width:360px; }
    .action { width:100%; min-height:52px; border-radius:14px; border:1px solid var(--line); background:#fffcf7; color:var(--brown); display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 20px; font-weight:500; transition:background .18s,transform .18s; }
    .action:hover { background:#f3e7da; transform:translateY(-1px); }
    .primary { background:var(--brown); border-color:var(--brown); color:#fffaf3; margin-top:12px; }
    .primary:hover { background:#795745; }
    .google { font-size:20px; font-weight:650; font-family:Arial,sans-serif; }
    .login { margin:20px 0; text-align:center; font-size:13px; color:var(--muted); }
    .text-button { border:0; padding:4px; background:transparent; color:var(--brown); text-decoration:underline; text-underline-offset:4px; }
    .divider { display:flex; align-items:center; gap:14px; color:#a49180; font-size:11px; margin:22px 0; }
    .divider:before,.divider:after { content:""; height:1px; flex:1; background:var(--line); }
    .guest { background:transparent; border-color:#ccb8a5; }
    .note { text-align:center; font-size:11px; line-height:1.6; color:var(--muted); margin:12px 0 0; }
    .status { font-size:13px; line-height:1.6; color:var(--muted); margin:12px 0; }
    .status:empty { display:none; }
    .guest-panel { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
    label { display:block; font-size:13px; margin-bottom:9px; }
    input { width:100%; border:1px solid #ccb8a5; border-radius:12px; background:#fffcf7; color:var(--brown); padding:13px 15px; }
    button:focus-visible,input:focus-visible { outline:3px solid #bd8060; outline-offset:4px; }
    #message { font-size:14px; line-height:1.7; }
    #catHome { padding:18px; background:#f1e3d4; border-radius:14px; margin-top:18px; }
    #catHome h2 { font-family:Georgia,serif; font-weight:normal; margin:0 0 10px; }
    #catHome p { font-size:13px; margin:0; }
    #catHome h3 { font-size:14px; font-weight:500; }
    footer { padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:11px; line-height:1.7; }
    @media(min-width:1500px) { main { min-height:calc(100vh - 165px); } }
    @media(max-width:760px) {
      .shell { padding:24px 24px 22px; } main { grid-template-columns:1fr; gap:34px; min-height:0; padding:30px 0 40px; }
      .art { max-width:440px; width:100%; margin:auto; } .illustration { height:310px; border-radius:160px 160px 20px 20px; } .sun { width:170px; height:170px; top:35px; }
      .future { padding:18px 24px; } .future svg { width:30px; height:30px; margin-bottom:6px; } .future strong { font-size:22px; }
      .content { width:100%; max-width:440px; margin:auto; } h1 { font-size:46px; } .eyebrow { margin-bottom:16px; } .description,.actions { max-width:none; }
      footer { flex-direction:column; gap:4px; } .art-caption { margin-top:14px; }
    }
    @media(prefers-reduced-motion:reduce) { .action { transition:none; } }
  
    a.action { text-decoration:none; }
    .pets-main { display:block; min-height:710px; max-width:850px; margin:auto; }
    .pets-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
    .pets-heading .action { width:auto; margin:0; }
    .pets-heading h1 { margin:0; }
    .pet-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
    .pet-card,.empty-state,.pet-form { padding:26px; border:1px solid var(--line); border-radius:20px; background:#fffcf7; }
    .pet-card h2 { overflow-wrap:anywhere; font-family:Georgia,serif; font-weight:normal; }
    .pet-form { max-width:500px; margin:28px 0; }
    .form-actions { display:flex; gap:12px; margin-top:20px; } .form-actions .primary { margin:0; }
    .back { display:inline-block; margin-bottom:28px; color:var(--brown); text-underline-offset:4px; }
    @media(max-width:480px) { .pets-heading { align-items:flex-start; flex-direction:column; } }

    .pet-card { position:relative; min-width:0; }
    .pet-card h2 { margin:0; padding-right:44px; }
    .pet-menu { position:absolute; top:18px; right:16px; }
    .pet-menu summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; font-size:26px; background:#f5e8dc; }
    .pet-menu summary::-webkit-details-marker { display:none; }
    .pet-menu summary:focus-visible { outline:3px solid #bd8060; outline-offset:3px; }
    .pet-menu-actions { position:absolute; right:0; top:46px; z-index:2; width:150px; padding:6px; border:1px solid var(--line); border-radius:14px; background:#fffcf7; box-shadow:0 8px 24px #63473918; }
    .pet-menu-actions button { display:block; width:100%; text-align:left; padding:12px; border:0; border-radius:9px; background:transparent; color:var(--brown); }
    .pet-menu-actions button:hover { background:#f5e8dc; }
    .pet-menu-actions .delete-pet { color:#9a493c; }

    #deleteDialog { max-width:440px; width:calc(100% - 40px); padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--cream); color:var(--brown); box-shadow:0 20px 70px #63473933; }
    #deleteDialog::backdrop { background:#39271d55; }
    #deleteDescription { line-height:1.7; overflow-wrap:anywhere; }
    select { font:inherit; width:100%; padding:13px 15px; border:1px solid #ccb8a5; border-radius:12px; background:#fffcf7; color:var(--brown); }
    .pet-form label:not(:first-of-type) { margin-top:18px; }
    .pet-profile-link { color:inherit; text-decoration:none; }
    .pet-profile-link::after { content:""; position:absolute; inset:0; border-radius:20px; }
    .pet-profile-link:focus-visible { outline:3px solid #bd8060; outline-offset:5px; }
    .pet-menu { z-index:1; }
    .pet-card:hover { border-color:#cbb39c; }
    .profile-sections { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .profile-section { padding:26px; border:1px solid var(--line); border-radius:20px; background:#fffcf7; }
    .profile-section > span { display:grid; place-items:center; width:40px; height:40px; background:#f4e2d3; border-radius:12px; font-size:23px; }
    .profile-section h2 { font-family:Georgia,serif; font-weight:normal; font-size:25px; }
    .profile-section p { color:var(--muted); line-height:1.7; font-size:14px; }
    .profile-section small { display:inline-block; padding:5px 10px; border-radius:16px; background:#f4e9df; color:var(--muted); }
    @media(max-width:520px) { .profile-sections { grid-template-columns:1fr; } }
    /* Soft paper, moon-window curves, and a small clay seal echo a quiet courtyard. */
    :root { --cream:#fbf5ec; --brown:#604638; --muted:#7e695b; --line:#e7d8c8; }
    body { background:radial-gradient(ellipse at 5% 0%,#f3e0cb66,transparent 45%),var(--cream); }
    .shell { max-width:1280px; }
    header { padding-bottom:16px; }
    header::after { content:""; height:1px; width:64px; background:#cab097; margin-left:10px; }
    .brand { font-size:32px; }
    h1 { letter-spacing:-.045em; }
    .eyebrow { color:#925b43; letter-spacing:.14em; line-height:1.8; }
    .description { line-height:1.9; font-size:16px; max-width:380px; }
    .illustration { background:linear-gradient(155deg,#f5e7d5,#eddbc7); box-shadow:inset 0 0 55px #d9bda733; height:530px; border-radius:240px 240px 28px 28px; }
    .sun { background:linear-gradient(150deg,#f1cbb0,#e9bc9b); width:220px; height:220px; top:70px; opacity:.7; }
    .future { padding:32px 18px; width:88%; max-width:88%; border:1px solid #fff9ef; border-radius:80px 80px 22px 22px; background:#fbf5ecdf; box-shadow:0 12px 40px #7957450a; margin-top:90px; }
    .future strong { font-size:23px; line-height:1.5; }
    .future span { font-size:12px; line-height:1.7; letter-spacing:.01em; }
    .family-marks { display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
    .family-marks div { display:grid; place-items:center; width:52px; height:64px; background:#f1e0ce; border:1px solid #e6cdb7; border-radius:30px 30px 18px 18px; }
    .family-marks div:nth-child(2) { transform:translateY(-7px); background:#edd3bc; }
    .family-marks div:last-child { background:#e7d6c1; }
    .family-marks svg { width:39px; height:39px; margin:0; }
    .art-caption { font-size:11px; letter-spacing:.06em; line-height:1.8; }
    .action { min-height:54px; box-shadow:0 2px 4px #60463804; }
    .primary { background:linear-gradient(120deg,#72513e,#604638); }
    .guest { background:#f5e5d6; border-color:#dfc2a8; }
    .guest:hover { background:#eed8c3; }
    .note { font-size:12px; }
    .pets-main { max-width:900px; padding-top:36px; }
    .back { text-decoration:none; border-bottom:1px solid #c9b39e; padding-bottom:5px; font-size:13px; }
    .back:hover { color:#9c6045; }
    .pet-list { gap:22px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
    .pet-card { min-height:170px; padding:32px 26px; background:linear-gradient(135deg,#fffaf3,#f7ebde); border-radius:24px; box-shadow:0 5px 18px #60463805; }
    .pet-card::before { content:""; display:block; width:30px; height:22px; border:1px solid #c8a98c; border-bottom:0; border-radius:25px 25px 0 0; margin-bottom:20px; }
    .pet-card h2 { font-size:27px; }
    .pet-menu summary { background:#eddbca; color:#684937; }
    .pet-form { max-width:560px; padding:32px; box-shadow:0 8px 32px #60463808; background:#fffaf3; }
    .pet-form h2 { font-family:Georgia,serif; font-weight:normal; font-size:32px; margin:0 0 10px; }
    .pet-form .eyebrow { margin-bottom:10px; }
    .form-intro { color:var(--muted); font-size:14px; line-height:1.8; margin:0 0 26px; }
    input,select { background:#fcf6ee; min-height:50px; border-color:#d9c6b3; }
    input::placeholder { color:#917967; opacity:1; }
    input:focus,select:focus { background:#fffdf8; }
    select:focus-visible { outline:3px solid #bd8060; outline-offset:4px; }
    .empty-state { padding:45px 30px; background:#f6e9da; }
    .empty-state h2 { font-family:Georgia,serif; font-weight:normal; }
    .section-heading { margin:0 0 24px; }
    .section-heading h2 { font:normal 28px/1.4 Georgia,serif; margin:0 0 8px; }
    .section-heading p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; }
    .profile-section { padding:28px; border-radius:24px; background:#fffaf3; }
    .profile-section small { font-size:11px; }
    footer { margin-top:12px; font-size:12px; }
    @media(max-width:760px) {
      .illustration { height:340px; max-width:440px; }
      .sun { width:160px; height:160px; top:30px; }
      .future { margin-top:60px; padding:20px 14px; }
      .future strong { font-size:21px; }
      .family-marks { margin-bottom:12px; }
      .family-marks div { width:44px; height:51px; }
      .family-marks svg { width:32px; height:32px; }
      .description { max-width:none; }
      .pets-main { padding-top:26px; }
    }
    @media(max-width:520px) {
      .pet-list { grid-template-columns:minmax(0,1fr); }
      .pet-form { padding:24px; }
      .art-caption { font-size:10px; }
      .shell { padding-left:22px; padding-right:22px; }
    }