@font-face {
    font-family: Inter;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: Nunito;
    src: url('/fonts/nunito-800.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: Nunito;
    src: url('/fonts/nunito-900.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}
:root {
    color-scheme: light;
    --background: #faf6ed;
    --secondary: #f1e9dc;
    --foreground: #3d3028;
    --muted: #75624f;
    --success: #40583f;
    --accent: #865230;
    --accent-text: #fff9f0;
    --accent-soft-text: #784626;
    --warning: #7c591c;
    --accent-soft: #f0e3d3;
    --success-soft: #e8ede1;
    --warning-soft: #f6edd6;
    --separator: #e8dccb;
    --border: #d8c6af;
    --surface: #fffcf6;
    --shadow: #5a3b2426;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        color-scheme: dark;
        --background: #1c1713;
        --secondary: #241d17;
        --foreground: #f8eddc;
        --muted: #beaa91;
        --success: #b4c69d;
        --accent: #d6a66b;
        --accent-text: #2b211a;
        --accent-soft-text: #e8bc85;
        --warning: #e5c484;
        --accent-soft: #463322;
        --success-soft: #2c3827;
        --warning-soft: #443621;
        --separator: #3b2f24;
        --border: #5a493a;
        --surface: #30261d;
        --shadow: #130e0b66;
    }
}
:root[data-theme=dark] {
    color-scheme: dark;
    --background: #1c1713;
    --secondary: #241d17;
    --foreground: #f8eddc;
    --muted: #beaa91;
    --success: #b4c69d;
    --accent: #d6a66b;
    --accent-text: #2b211a;
    --accent-soft-text: #e8bc85;
    --warning: #e5c484;
    --accent-soft: #463322;
    --success-soft: #2c3827;
    --warning-soft: #443621;
    --separator: #3b2f24;
    --border: #5a493a;
    --surface: #30261d;
    --shadow: #130e0b66;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Inter, sans-serif; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand, .duration { font-family: Nunito, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button:disabled { cursor: not-allowed; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
a:hover { color: var(--accent); }
[hidden] { display: none !important; }
.page-width { max-width: 1440px; margin-inline: auto; padding-inline: 80px; }
.icon { width: 20px; height: 20px; flex: none; }
.site-header { border-bottom: 1px solid var(--separator); }
.header-content { height: 95px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 900; letter-spacing: -.8px; white-space: nowrap; }
.mascot { display: block; overflow: hidden; border-radius: 50%; background: #f6edd6; flex: none; }
.mascot img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brand-mark { width: 48px; height: 48px; }
.navigation { display: flex; align-items: center; gap: 32px; color: var(--muted); font-size: 15px; font-weight: 500; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; height: 56px; padding: 12px 24px; border: 0; border-radius: 24px; white-space: nowrap; font-size: 16px; font-weight: 700; line-height: 1.5; }
.primary { background: var(--accent); color: var(--accent-text); }
.outline { border: 1px solid var(--border); background: transparent; color: var(--foreground); }
.outline:hover { background: var(--secondary); color: var(--foreground); }
.small { height: 44px; padding: 8px 20px; font-weight: 600; }
.icon-button { width: 44px; height: 44px; padding: 0; cursor: pointer; }
.theme-toggle .sun, .close-icon { display: none; }
[data-theme=dark] .theme-toggle .sun { display: block; }
[data-theme=dark] .theme-toggle .moon { display: none; }
.menu-toggle { display: none; }
.menu-toggle[aria-expanded=true] .menu-icon { display: none; }
.menu-toggle[aria-expanded=true] .close-icon { display: block; }
.mobile-navigation { display: none; }
.hero { display: flex; align-items: center; gap: 64px; padding-top: 48px; padding-bottom: 64px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--accent-soft-text); }
.friendly { display: flex; align-items: center; gap: 8px; letter-spacing: 1.3px; color: var(--success); }
.friendly .icon { width: 18px; height: 18px; }
h1 { font-size: 76px; font-weight: 900; line-height: 1.04; letter-spacing: -2.5px; }
.hero-description { font-size: 19px; line-height: 1.65; color: var(--muted); }
.hero-actions { display: flex; gap: 12px; }
.how-link { font-size: 15px; font-weight: 600; padding-inline: 20px; }
.how-link .icon { width: 18px; height: 18px; }
.availability { font-size: 14px; line-height: 1.5; color: var(--muted); }
.break-buddy { position: relative; width: 570px; height: 590px; flex: none; }
.resting { position: absolute; top: 14px; width: 570px; height: 570px; }
.encouragement { position: absolute; left: 302px; top: 22px; width: 246px; height: 48px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; transform: rotate(-3deg); }
.encouragement .icon { width: 16px; height: 16px; color: var(--warning); }
.playful-sparkle { position: absolute; left: 14px; top: 100px; width: 28px; height: 28px; color: var(--warning); }
.reminder { position: absolute; left: 4px; top: 409px; width: 328px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.reminder-heading { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.reminder-heading .icon { width: 18px; height: 18px; color: var(--accent-soft-text); }
.reminder-content { display: flex; align-items: center; gap: 16px; }
.duration { font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.suggestion { display: flex; flex-direction: column; gap: 4px; }
.suggestion strong { font-size: 13px; color: var(--success); }
.suggestion p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.reassurance { border-block: 1px solid var(--separator); }
.reassurance ul { height: 90px; list-style: none; display: flex; align-items: center; justify-content: space-between; margin-block: 0; padding-block: 24px; }
.reassurance li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: var(--muted); }
.reassurance .icon { width: 22px; height: 22px; color: var(--success); }
.story { display: flex; align-items: center; gap: 112px; padding: 64px 112px; }
.working { width: 370px; height: 370px; }
.story-copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
h2 { font-size: 44px; font-weight: 900; line-height: 1.15; letter-spacing: -1.2px; }
.story-description { font-size: 18px; line-height: 1.65; color: var(--muted); }
.rhythm { display: flex; align-items: center; gap: 12px; }
.rhythm .icon { width: 16px; height: 16px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.work { background: var(--accent-soft); color: var(--accent-soft-text); }
.pause { background: var(--warning-soft); color: var(--warning); }
.refreshed { background: var(--success-soft); color: var(--success); }
.reset { background: var(--secondary); }
.reset-content { padding-block: 64px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.reset-heading { max-width: 800px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.reset-heading p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.break-ideas { display: flex; align-items: center; gap: 64px; width: 100%; }
.break-idea { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.break-idea .mascot { width: 220px; height: 220px; }
.break-idea h3 { font-size: 25px; font-weight: 900; line-height: 1.15; letter-spacing: -1.2px; margin-bottom: 12px; }
.break-idea p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.invitation { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 56px; }
.invitation h2 { font-size: 36px; margin-bottom: 12px; }
.invitation p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.site-footer { border-top: 1px solid var(--separator); }
.footer-content { height: 95px; display: flex; justify-content: space-between; align-items: center; padding-block: 24px; color: var(--muted); font-size: 14px; }
.footer-links { display: flex; gap: 28px; }
@media (min-width: 901px) and (max-width: 1250px) {
    .page-width { padding-inline: 40px; }
    .hero { gap: 32px; }
    h1 { font-size: 64px; }
    .break-buddy { width: 440px; height: 480px; }
    .resting { width: 440px; height: 440px; }
    .encouragement { left: 180px; }
    .reminder { top: 320px; }
    .hero-actions { flex-wrap: wrap; }
    .story { gap: 64px; }
    .working { width: 300px; height: 300px; }
    .break-ideas { gap: 32px; }
    .break-idea { gap: 16px; }
    .break-idea .mascot { width: 160px; height: 160px; }
}
@media (max-width: 900px) {
    .page-width { padding-inline: 24px; }
    .header-content { height: 79px; padding-inline: 20px; }
    .brand { gap: 8px; font-size: 22px; letter-spacing: -.6px; }
    .brand-mark { width: 38px; height: 38px; }
    .navigation { gap: 8px; }
    .desktop-navigation { display: none; }
    .menu-toggle { display: inline-flex; }
    .mobile-navigation { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-top: 1px solid var(--separator); font-size: 15px; font-weight: 500; color: var(--muted); }
    .hero { flex-direction: column; gap: 24px; padding-top: 36px; padding-bottom: 32px; }
    .hero-copy { width: 100%; gap: 20px; }
    h1 { font-size: clamp(44px, 12.82vw, 50px); line-height: 1.08; letter-spacing: -1.5px; }
    .hero-description { font-size: 17px; line-height: 1.6; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .button { width: 100%; }
    .how-link { height: 52px; }
    .availability { font-size: 13px; }
    .break-buddy { width: 312px; height: 370px; max-width: 100%; }
    .resting { width: 312px; height: auto; aspect-ratio: 1; max-width: 100%; }
    .encouragement { left: 70px; top: 24px; width: 242px; height: 44px; font-size: 13px; transform: rotate(-2deg); }
    .playful-sparkle { left: 10px; top: 50px; width: 22px; height: 22px; }
    .reminder { left: 0; top: 244px; width: 300px; max-width: 100%; padding: 16px; gap: 10px; }
    .reassurance ul { height: auto; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 28px; }
    .story { flex-direction: column; gap: 32px; padding-block: 48px; }
    .working { width: 300px; height: auto; max-width: 100%; aspect-ratio: 1; }
    .story-copy { gap: 16px; width: 100%; }
    .story .eyebrow { font-size: 12px; line-height: 1.6; }
    .story h2 { font-size: 34px; letter-spacing: -.8px; }
    .story-description { font-size: 17px; line-height: 1.6; }
    .rhythm { gap: 8px; }
    .chip { padding-inline: 8px; }
    .reset-content { padding-block: 48px; gap: 32px; }
    h2 { font-size: 32px; letter-spacing: -.8px; }
    .reset-heading p { font-size: 16px; }
    .break-ideas { flex-direction: column; gap: 36px; }
    .break-idea { width: 100%; gap: 16px; }
    .break-idea .mascot { width: 132px; height: 132px; }
    .break-idea h3 { font-size: 24px; letter-spacing: -.5px; }
    .break-idea p { font-size: 15px; }
    .invitation { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 40px; }
    .invitation h2 { font-size: 30px; letter-spacing: -.8px; }
    .invitation p { font-size: 16px; }
    .footer-content { height: auto; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 28px; }
}
@media (max-width: 374px) {
    .encouragement { left: auto; right: 0; }
    .rhythm { gap: 6px; }
}