:root { color-scheme:light; --paper:#faf9f6; --ink:#253f48; --brand-font:'soleil','Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-height:100svh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 40%,#fffefa 0%,var(--paper) 70%); color:var(--ink); font-family:var(--brand-font); font-weight:400; -webkit-font-smoothing:antialiased; }
.brand { display:flex; justify-content:center; padding:clamp(28px,4vh,52px) 24px 0; }
.brand img { width:174px; height:auto; display:block; }
main { flex:1; display:grid; place-items:center; padding:42px 24px 48px; }
.announcement { width:100%; text-align:center; animation:arrive .9s ease-out both; }
.pomegranate { display:block; width:clamp(240px,27vh,340px); max-width:70vw; height:auto; margin:0 auto 24px; }
h1 { margin:0; font-size:clamp(34px,3vw,44px); font-weight:400; line-height:1.2; letter-spacing:-.035em; }
.pomegranate { overflow:visible; user-select:none; -webkit-user-select:none; }
.fruit-shell, .juice, .droplets { pointer-events:none; }
.is-interactive .seed { cursor:grab; touch-action:none; outline:none; }
.is-interactive .seed:focus-visible path { stroke:var(--ink); stroke-width:2; stroke-dasharray:3 3; }
.is-interactive .seed.is-popped { opacity:0; pointer-events:none; }
.is-interactive .seed.is-popped:focus-visible { opacity:.2; }
.is-dragging, .is-dragging .seed { cursor:grabbing; }
@keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(max-width:600px) {
 .brand { padding-top:28px; }
 .brand img { width:151px; }
 main { padding:42px 20px; }
 .pomegranate { width:clamp(185px,49vw,240px); max-width:70vw; margin-bottom:24px; }
 h1 { font-size:clamp(28px,7.5vw,34px); }
}
@media(max-height:650px) and (min-width:601px) { .brand{padding-top:24px} main{padding-block:28px} .pomegranate{width:220px} h1{font-size:34px} }
@media(prefers-reduced-motion:reduce) { .announcement { animation:none; } }