:root {
--cream: #fdf8f0;
--cream-dark: #f5eddc;
--ink: #2c2416;
--ink-light: #6b5d4a;
--red: #E63946;
--orange: #F4A261;
--yellow: #E9C46A;
--teal: #2A9D8F;
--navy: #264653;
--sky: #A8DADC;
--purple: #6D6875;
--pink: #B5838D;
--matcha: #A3B18A;
--green: #588157;
--brown: #8B5E3C;
--dark: #333333;
}

* {
box-sizing: border-box;
}

body {
font-family: 'M PLUS Rounded 1c', sans-serif;
background-color: var(--cream);
color: var(--ink);
overflow-x: hidden;
}

body::before {
content: '';
position: fixed;
inset: 0;
background-image:
    repeating-linear-gradient(0deg,
    transparent,
    transparent 27px,
    rgba(180, 160, 120, 0.06) 28px);
pointer-events: none;
z-index: 0;
}

.font-hand {
font-family: 'Caveat', cursive;
}

.deco-svg {
position: absolute;
pointer-events: none;
}

.underline-hand {
position: relative;
display: inline-block;
white-space: nowrap;
}

.underline-hand::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 6px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10'%3E%3Cpath d='M0 7 Q50 3 100 6 Q150 9 200 5' stroke='%23E9C46A' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / auto 100%;
}

.paper-card {
background: #fff;
border-radius: 2px;
box-shadow:
    2px 2px 0 rgba(180, 150, 100, 0.15),
    4px 4px 0 rgba(180, 150, 100, 0.08);
position: relative;
}

.paper-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent, #E9C46A);
border-radius: 2px 2px 0 0;
}

.check {
color: var(--green);
font-size: 1.4rem;
}

.cross {
color: #ccc;
font-size: 1.4rem;
}

@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(24px);
}

to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes float {

0%,
100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-8px);
}
}

@keyframes wiggle {

0%,
100% {
    transform: rotate(-2deg);
}

50% {
    transform: rotate(2deg);
}
}

.anim-fade-up {
animation: fadeUp 0.8s ease forwards;
}

.anim-float {
animation: float 4s ease-in-out infinite;
}

.anim-wiggle {
animation: wiggle 3s ease-in-out infinite;
}

.delay-1 {
animation-delay: 0.15s;
opacity: 0;
}

.delay-2 {
animation-delay: 0.30s;
opacity: 0;
}

.delay-3 {
animation-delay: 0.45s;
opacity: 0;
}

.delay-4 {
animation-delay: 0.60s;
opacity: 0;
}

.delay-5 {
animation-delay: 0.75s;
opacity: 0;
}

.step-num {
font-family: 'Caveat', cursive;
font-size: 5rem;
line-height: 1;
color: var(--cream-dark);
position: absolute;
top: -1rem;
left: -0.5rem;
z-index: 0;
user-select: none;
}

#hero-canvas {
border-radius: 4px;
box-shadow:
    0 0 0 1px rgba(180, 150, 100, 0.2),
    4px 8px 32px rgba(100, 70, 30, 0.12);
}

.btn-download {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--navy);
color: #fff;
font-family: 'Caveat', cursive;
font-size: 1.5rem;
padding: 0.75rem 2.5rem;
border-radius: 4px;
text-decoration: none;
position: relative;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.btn-download:hover {
transform: translate(-2px, -2px);
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
}

.btn-download:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.swatch {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

nav {
backdrop-filter: blur(8px);
background: rgba(253, 248, 240, 0.85);
border-bottom: 1px solid rgba(180, 150, 100, 0.15);
}

.ruled {
background-image: repeating-linear-gradient(transparent,
    transparent 31px,
    rgba(180, 160, 120, 0.12) 32px);
}

.scroll-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}