@font-face {
  font-family: Jua;
  src: url('/assets/Jua-Regular.ttf') format('truetype');
  font-display: swap;
}
:root { color-scheme: light; font-family: Jua, system-ui, sans-serif; color: #203136; background: #f6f0e3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: max(44px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); }
header { padding-bottom: 44px; }
header img { display: block; max-width: 64vw; height: auto; }
main { width: min(100%, 420px); text-align: center; margin: auto 0; }
.stone { position: relative; width: 92px; height: 82px; border: 2px solid #203136; border-radius: 48% 53% 39% 44%; margin: 0 auto 36px; background: #55aaa7; transform: rotate(-8deg); box-shadow: 5px 5px 0 #203136; }
.stone i { position: absolute; top: 29px; width: 6px; height: 12px; border-radius: 5px; background: #203136; }
.stone i:first-child { left: 28px; }
.stone i:nth-child(2) { right: 25px; }
.stone span { position: absolute; left: 40px; top: 47px; width: 12px; height: 5px; border-radius: 5px; background: #203136; }
.eyebrow { margin: 0 0 14px; color: #416563; font-size: 19px; }
h1 { margin: 0; font-size: clamp(30px, 7vw, 39px); line-height: 1.35; word-break: keep-all; }
.description { font-size: 22px; line-height: 1.6; margin: 24px 0 36px; word-break: keep-all; }
.primary { display: block; min-height: 56px; padding: 16px 20px; border: 2px solid #203136; border-radius: 16px; background: #e97465; color: #203136; font-size: 23px; text-decoration: none; }
.primary:focus-visible { outline: 3px solid #203136; outline-offset: 5px; }
.primary:active { transform: translateY(1px); }
[hidden] { display: none !important; }
.hint, .status { font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.7; color: #526365; word-break: keep-all; }
.hint { margin: 22px 4px 0; }
#install-app { display: inline-block; padding: 12px; color: #416563; text-underline-offset: 4px; }
.status { min-height: 3.4em; margin: 12px 4px 0; }
footer { padding-top: 44px; text-align: center; color: #526365; font-size: 16px; line-height: 1.5; }
@media (max-height: 650px) { header { padding-bottom: 28px; } .stone { margin-bottom: 24px; } footer { padding-top: 24px; } }