:root{--primary-clr:150 100 66;--text-clr:193 38 86;--neutral-600:217 19 38;--neutral-900:217 19 24;--neutral-950:218 23 16;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--spacing-4xl:5rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:2rem;--text-3xl:2.25rem;--text-4xl:2.5rem;--text-5xl:3rem}@layer defaults{*,:before,:after{box-sizing:inherit}html{box-sizing:border-box}body{min-block-size:100dvh;color:hsl(var(--text-clr));background-color:hsl(var(--neutral-950));justify-content:center;align-items:center;margin:0;font-family:Manrope,sans-serif,system-ui;font-weight:800;line-height:1.5;display:flex}h2,p{margin:0}img{max-inline-size:100%;object-fit:cover;height:auto;display:block}button{border:none;border-radius:0;font-family:inherit;font-size:1rem;line-height:1}}@layer components{.btn{--size:4rem;inline-size:var(--size);block-size:var(--size);background-color:hsl(var(--primary-clr));border-radius:50%;justify-content:center;align-items:center;display:flex}.btn:focus-visible{outline:2px solid hsl(var(--primary-clr));outline-offset:4px}.btn:disabled{background-color:hsl(var(--neutral-600));cursor:not-allowed}}@layer utilities{.sr-only{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}.advice-card{align-items:center;gap:var(--spacing-lg);inline-size:min(90%,31.25rem);padding-block:var(--spacing-2xl) 0;padding-inline:var(--spacing-xl);background-color:hsl(var(--neutral-900));text-align:center;border-radius:12px;flex-direction:column;margin-inline:auto;display:flex}.advice-id{color:hsl(var(--primary-clr));font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.3em;font-weight:800}.advice-quote{font-size:var(--text-xl);font-weight:800}.separator{margin-block-end:calc(var(--text-base) * (-1.25))}.advice-card .btn{position:relative;top:30px}@media screen and (width>64em){@layer components{.btn{cursor:pointer;position:relative}.btn:after{content:"";box-shadow:0 0 32px 6px hsl(var(--primary-clr) / .5);opacity:0;pointer-events:none;border-radius:50%;transition:opacity .45s ease-out;display:block;position:absolute;inset:0}.btn:hover:after{opacity:1}}}@media (prefers-reduced-motion:reduce){.btn:after{transition:none}}