/* Exact dominant logo colors: coral #F48071, green #8CC63F, purple #931D61.
   Neutral supporting surfaces and darker interaction colors preserve readability. */
@font-face{font-family:'Cloudy Peaches';src:url('../assets/branding/fonts/Cloudy Peaches Demo.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
:root{
 --hf-brand-coral:#f48071;--hf-brand-green:#8cc63f;--hf-brand-purple:#931d61;
 --hf-background:#fff8ed;--hf-surface:#fffdf8;--hf-text-primary:#302329;--hf-text-secondary:#69545e;--hf-accent:var(--hf-brand-purple);--hf-on-accent:#fff;--hf-focus:#41112e;--hf-border:#baa2ae;--hf-overlay:rgb(42 26 36 / .3);
 --hf-font-display:'Cloudy Peaches',Arial,sans-serif;--hf-font-heading:'Cloudy Peaches',Arial,sans-serif;--hf-display:clamp(2.75rem,6vw,4.5rem);
 --hf-logo-header:3.5rem;--hf-logo-title:7.5rem;--hf-logo-loading:10rem;--hf-art-width:12rem;--hf-title-width:54rem;
}
.site-header{border-bottom:var(--hf-border-width) solid var(--hf-brand-coral)}
.brand-slot img{width:var(--hf-logo-header);height:auto;max-height:none;max-width:100%;object-fit:contain}
#title-panel{--hf-panel-width:var(--hf-title-width);border-top:var(--hf-space-1) solid var(--hf-brand-coral)}
#title-panel .brand-slot img{width:var(--hf-logo-title)}
.loading .brand-slot img{width:var(--hf-logo-loading)}
h1,h2{color:var(--hf-brand-purple)}h1{letter-spacing:0;line-height:1.02}
.primary:hover{background:#72164b}
.seed-counter{background:var(--hf-brand-green);color:var(--hf-text-primary);border-color:var(--hf-brand-green)}
.title-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--hf-art-width);gap:var(--hf-space-5);align-items:center}
.title-art{margin:0;background:#fff;padding:var(--hf-space-2);border-radius:var(--hf-radius)}
.title-art img{display:block;width:100%;height:auto;object-fit:contain}
#title-panel .actions{gap:var(--hf-space-2)}#title-panel .play{flex-basis:100%}
@media(max-width:650px){.title-layout{grid-template-columns:minmax(0,1fr)}.title-art{display:none}#title-panel .brand-slot img{width:5rem}#title-panel .stack{gap:var(--hf-space-3)}}
@media(max-height:600px){#title-panel .brand-slot img{width:3.5rem}#title-panel .stack{gap:var(--hf-space-2)}#title-panel{padding:var(--hf-space-3)}#title-panel h1{font-size:var(--hf-heading)}}