:root { color-scheme: light; --paper: #e9dec9; --ink: #241f19; --rose: #985c66; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body, "DM Sans"), sans-serif; }
main { width: min(100%, 430px); height: 100dvh; margin: 0 auto; padding: max(32px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-align: center; }
.heart-scene { --orbit: clamp(140px, 20dvh, 175px); position: relative; display: flex; flex: 1; min-height: 0; }
.name-heart { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--rose); font-family: ui-monospace, "Courier New", monospace; font-size: clamp(10px, 3vw, 13px); line-height: 1.7; font-weight: 400; }
.rayan-cat { position: absolute; width: clamp(60px, 20vw, 78px); height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.rayan-rose { top: max(0px, calc(50% - var(--orbit))); right: 8px; transform: rotate(9deg); }
.rayan-lasagna { bottom: max(0px, calc(50% - var(--orbit))); left: 8px; transform: rotate(-9deg); }
.heart-row { white-space: pre; }
.heart-cleft { display: inline-block; width: 3ch; }
.gallery { --cat-size: clamp(116px, 23dvh, 182px); display: flex; flex-direction: column; align-items: center; flex: none; }
.cat { position: relative; display: block; width: var(--cat-size); height: var(--cat-size); padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cat img { display: block; width: 100%; height: 100%; object-fit: contain; }
button:focus-visible { outline: 2px dashed var(--rose); outline-offset: 4px; border-radius: 10px; }
.little-heart { pointer-events: none; position: absolute; top: 50%; left: calc(50% - 5px); width: 10px; height: 10px; background: #bd747b; transform: rotate(-45deg); opacity: 0; }
.little-heart::before, .little-heart::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: inherit; }
.little-heart::before { top: -5px; left: 0; }
.little-heart::after { left: 5px; top: 0; }
.gallery-dots { display: flex; justify-content: center; margin-top: 8px; }
.gallery-dot { width: 32px; height: 32px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.gallery-dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #b7a899; }
.gallery-dot[aria-pressed="true"]::after { background: var(--rose); width: 7px; height: 7px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-height: 500px) { main { padding-top: 16px; padding-bottom: 8px; } .heart-scene { --orbit: 110px; } .rayan-cat { width: 48px; } .name-heart { line-height: 1.35; font-size: 10px; } .gallery { --cat-size: 100px; } .gallery-dots { margin-top: 0; } }
@media (max-height: 350px) and (min-width: 480px) { main { width: min(100%, 640px); display: grid; grid-template-columns: 1fr 160px; grid-template-rows: auto 1fr; } h1 { grid-column: 1 / -1; } .heart-scene { grid-column: 1; } .gallery { grid-column: 2; justify-content: center; } }