html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #817476 #f3ecec; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
body { background-color: #f3ecec; overflow-x: hidden; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f3ecec;
}
::-webkit-scrollbar-thumb {
    background: #817476;
    border-radius: 9999px;
    border: 2px solid #f3ecec;
}
::-webkit-scrollbar-thumb:hover {
    background: #78555e;
}

:root {
    --spine-width: 30px;
    --page-left-offset: 30px;
    --ring-width: 24px;
    --ring-left: -12px;
    --ring-height: 10px;
    --notebook-height: 80vh;
    --notebook-height: 80dvh;
}

@media (max-width: 640px) {
    :root {
        --spine-width: 18px;
        --page-left-offset: 18px;
        --ring-width: 16px;
        --ring-left: -8px;
        --ring-height: 8px;
        --notebook-height: 75vh;
        --notebook-height: 75dvh;
    }
}

/* Short screens optimization */
@media (max-height: 600px) {
    :root {
        --notebook-height: 85vh;
        --notebook-height: 85dvh;
    }
}

/* Notebook Styling */
.notebook-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
}

.notebook {
    width: 92vw;
    max-width: 500px;
    height: var(--notebook-height);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Ring Spine */
.spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--spine-width);
    background: linear-gradient(to right, #e8e1e0 0%, #ffffff 40%, #e8e1e0 100%);
    border-right: 2px solid #817476;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15px 0;
    align-items: center;
    border-radius: 1.5rem 0 0 1.5rem;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
}
.ring {
    width: var(--ring-width);
    height: var(--ring-height);
    background: linear-gradient(to bottom, #817476, #4f4446, #817476);
    border-radius: 10px;
    position: relative;
    left: var(--ring-left);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    z-index: 61;
}

/* Page Container */
.pages-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.page {
    position: absolute;
    top: 0;
    left: var(--page-left-offset); /* Offset for spine */
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-radius: 0 1.5rem 1.5rem 0;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
    border: 3px solid #817476;
    border-left: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 1.2s ease, z-index 0s 0.6s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    overflow: hidden;
    will-change: transform;
}

.page-back {
    position: absolute;
    inset: 0;
    background: #f9f2f1;
    transform: rotateY(180deg) translateZ(1px);
    backface-visibility: hidden;
    border-radius: 1.5rem 0 0 1.5rem;
    border: 3px solid #817476;
    border-right: none;
    box-shadow: inset -10px 0 20px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.page-back::after {
     content: "";
     position: absolute;
     top: 0; bottom: 0; right: 0;
     width: var(--spine-width);
     background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
}

/* Paper Texture */
.page::before, .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.06;
    pointer-events: none;
    z-index: 10;
}

/* Scribble Page Edge */
.page::after, .cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0,50 Q25,45 50,50 T100,50' fill='none' stroke='%23817476' stroke-width='1'/%3E%3C/svg%3E") 10 stretch;
    pointer-events: none;
    opacity: 0.3;
}

/* Cover Specifics */
.cover {
    background-color: #f1d7d4; /* tertiary-container */
    border-color: #7a5761;
}

/* Scrollytelling Hidden States */
.page.past {
    transform: rotateY(-180deg) translateZ(-2px);
    box-shadow: -10px 10px 30px rgba(0,0,0,0.1);
    z-index: 0 !important;
}
.page.future {
    transform: rotateY(0deg);
}
.page.active {
    transform: rotateY(0deg) translateZ(1px);
}

/* Prevent content bleed */
.page-content {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    box-sizing: border-box;
    transform: translateZ(2px);
    backface-visibility: hidden;
}
@media (min-width: 640px) {
    .page-content {
        padding: 2rem;
    }
}

/* Hand-drawn elements */
.hand-drawn-circle {
    position: relative;
    display: inline-block;
}
.hand-drawn-circle::after {
    content: "";
    position: absolute;
    inset: -10px -15px;
    border: 3px solid #78555e;
    border-radius: 48% 52% 55% 45% / 42% 58% 42% 58%;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-2deg);
}

.hand-drawn-underline {
    position: relative;
    display: inline-block;
}
.hand-drawn-underline::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e7bbc6;
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
    opacity: 0;
    transform: rotate(-1.5deg);
}

.page.active .hand-drawn-circle::after,
.page.active .hand-drawn-underline::after {
    animation: drawImage 0.8s ease-out forwards;
    animation-delay: 1.2s;
}

.scribble-accent {
    position: absolute;
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(1);
}

.doodle {
    position: absolute;
    pointer-events: none;
    color: #78555e;
    opacity: 0.3;
    font-size: 24px;
    z-index: 15;
}

@media (min-width: 768px) {
    .doodle { font-size: 32px; }
}

/* Hand-drawn Buttons */
.btn-hand-drawn {
    position: relative;
    background: transparent;
    border: none;
    padding: 0.8rem 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.btn-hand-drawn::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid currentColor;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    z-index: -1;
    background: white;
    transition: transform 0.2s ease;
}
.btn-yes::before {
    background: #ffd1dc;
}
.btn-hand-drawn:hover::before {
    transform: scale(1.05) rotate(1deg);
}
.btn-hand-drawn:active {
    transform: scale(0.95);
}

/* Drawing Animations */
@keyframes drawImage {
    0% { clip-path: circle(0% at 50% 50%); opacity: 0; }
    100% { clip-path: circle(150% at 50% 50%); opacity: 1; }
}

@keyframes typewriter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.draw-in, .type-in span {
    opacity: 0;
}

.page.active .draw-in {
    animation: drawImage 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.4s;
}

.page.active .type-in span {
    display: inline-block;
    animation: typewriter 0.1s forwards;
}

/* Animation Keyframes */
@keyframes floating {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.floating-doodle { animation: floating 4s ease-in-out infinite; }

/* Custom Scroll Snap Mockup */
.scroll-trigger {
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

/* Ensure pages stack correctly for 3D flip */
#page-5 { z-index: 5; }
#page-4 { z-index: 10; }
#page-3 { z-index: 20; }
#page-2 { z-index: 30; }
#page-1 { z-index: 40; }
#page-0 { z-index: 50; } /* Cover */

/* Notebook Bottom Controls Bar */
#notebook-controls-bar {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
}

.btn-nav-arrow {
    width: 38px;
    height: 38px;
    background: #fff8f7;
    border: 2px solid #78555e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78555e;
    cursor: pointer;
    box-shadow: 2px 2px 6px rgba(120, 85, 94, 0.12);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
    outline: none;
}
.btn-nav-arrow:hover {
    transform: scale(1.08) rotate(-5deg);
    background: #ffd9e2;
}
.btn-nav-arrow:active {
    transform: scale(0.95);
}
.btn-nav-arrow:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    transform: none !important;
}

/* Notebook dots absolute positioning removed as parent bar handles centering */
#notebook-dots-container {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
}

.dot-indicator {
    width: 13px;
    height: 13px;
    border: 2px solid #78555e;
    border-radius: 48% 52% 55% 45% / 42% 58% 42% 58%;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    outline: none;
}
.dot-indicator.active {
    background: #78555e;
    transform: scale(1.3) rotate(12deg);
    box-shadow: 0 0 0 4px rgba(120, 85, 94, 0.18);
}

/* Cozy Night Theme (Dark Mode) overrides */
html.dark {
    scrollbar-color: #817476 #1e1b1b;
}
html.dark body {
    background-color: #1a1717;
}
html.dark ::-webkit-scrollbar-track {
    background: #1e1b1b;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #544341;
    border-color: #1e1b1b;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #cac1be;
}

html.dark .notebook-wrapper {
    background-color: rgba(0,0,0,0.1);
}
html.dark .notebook {
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
html.dark .spine {
    background: linear-gradient(to right, #252020 0%, #3e3838 40%, #252020 100%);
    border-right-color: #544341;
}
html.dark .ring {
    background: linear-gradient(to bottom, #cac1be, #817476, #cac1be);
}
html.dark .page {
    background: #2d2828;
    border-color: #544341;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.25);
}
html.dark .page-back {
    background: #252020;
    border-color: #544341;
}
html.dark .page::before, html.dark .cover::before {
    opacity: 0.15;
}

/* Dark mode text colors */
html.dark .text-primary {
    color: #dac1be !important;
}
html.dark .text-on-primary-container {
    color: #ffd9e2 !important;
}
html.dark .text-on-surface-variant {
    color: #dfd8d8 !important;
}
html.dark .text-on-surface {
    color: #f6efef !important;
}
html.dark .cover {
    background-color: #5e3e47;
    border-color: #ffd1dc;
}
html.dark .cover .text-on-primary-container {
    color: #ffd1dc !important;
}
html.dark .hand-drawn-circle::after {
    border-color: #dac1be;
}
html.dark .hand-drawn-underline::after {
    background: #5e3e47;
}
html.dark .doodle {
    color: #dac1be;
}
html.dark .btn-hand-drawn::before {
    background: #3e3838;
    border-color: #dac1be;
}
html.dark .btn-hand-drawn {
    color: #f7ddda !important;
}
html.dark .btn-yes::before {
    background: #5e3e47;
}
html.dark .calendar-container {
    color: #dac1be;
}
html.dark .calendar-day:hover:not(.disabled) {
    background: rgba(218, 193, 190, 0.1);
}
html.dark .calendar-day.selected::after {
    border-color: #dac1be;
}
html.dark .notebook-nav-tab {
    background: #2d2828;
    border-color: #544341;
    color: #dac1be;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.25);
}
html.dark .notebook-nav-tab:hover {
    background: #3e3838;
}
html.dark .notebook-nav-tab:disabled {
    background: #252020;
    border-color: #3e3838;
    color: #544341;
}
html.dark .dot-indicator {
    border-color: #dac1be;
}
html.dark .dot-indicator.active {
    background: #dac1be;
    box-shadow: 0 0 0 4px rgba(218, 193, 190, 0.2);
}
html.dark .calendar-btn:hover {
    background: rgba(218, 193, 190, 0.15);
}
html.dark #notebook-dots-container {
    background: rgba(45, 40, 40, 0.95);
    border-color: #dac1be;
}

/* Polaroid Stack Styling */
.polaroid-stack {
    position: relative;
    width: 180px;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
    perspective: 1000px;
}
@media (min-width: 640px) {
    .polaroid-stack {
        width: 240px;
        height: 260px;
    }
}
.polaroid {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 6px solid #ffffff;
    border-bottom: 24px solid #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.2), z-index 0s;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center bottom;
    border-radius: 2px;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .polaroid {
        border: 8px solid #ffffff;
        border-bottom: 36px solid #ffffff;
    }
}
.polaroid img {
    width: 100%;
    height: 80%;
    object-fit: cover;
    border: 1px solid #ede7e6;
}
.polaroid-caption {
    font-family: 'Gochi Hand', cursive;
    font-size: 1rem;
    color: #78555e;
    margin-top: 4px;
    text-align: center;
}
@media (min-width: 640px) {
    .polaroid-caption {
        font-size: 1.25rem;
        margin-top: 8px;
    }
}

/* Dark mode overrides for Polaroids */
html.dark .polaroid {
    background: #3e3838;
    border-color: #3e3838;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
html.dark .polaroid img {
    border-color: #544341;
}
html.dark .polaroid-caption {
    color: #dac1be;
}

/* Polaroid Rotation Angles */
.polaroid:nth-child(1) { transform: rotate(-4deg) translateZ(3px); z-index: 30; }
.polaroid:nth-child(2) { transform: rotate(5deg) translateZ(2px); z-index: 20; }
.polaroid:nth-child(3) { transform: rotate(-1deg) translateZ(1px); z-index: 10; }

/* Polaroid slide-out animation */
.polaroid.slide-out {
    animation: polaroidSlideOut 0.6s ease-in-out forwards;
}

@keyframes polaroidSlideOut {
    0% { transform: translate(0, 0) rotate(var(--orig-rot)) translateZ(3px); }
    50% { transform: translate(140px, -20px) rotate(20deg) translateZ(3px); opacity: 0.85; }
    100% { transform: translate(0, 0) rotate(var(--new-rot)) translateZ(1px); z-index: 10; }
}

/* Notebook Theme Tab Toggle */
.notebook-theme-tab {
    position: absolute;
    top: -38px;
    right: 24px;
    z-index: 70;
    width: 44px;
    height: 40px;
    background: #ffffff;
    border: 3px solid #817476;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78555e;
    cursor: pointer;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
    outline: none;
    transform-origin: bottom center;
}
.notebook-theme-tab:hover {
    transform: translateY(-4px) scale(1.05);
    background: #fff8f7;
    color: #78555e;
}
.notebook-theme-tab:active {
    transform: translateY(0) scale(0.95);
}

/* Dark mode overrides for notebook theme tab */
html.dark .notebook-theme-tab {
    background: #2d2828;
    border-color: #544341;
    color: #dac1be;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}
html.dark .notebook-theme-tab:hover {
    background: #3e3838;
}

/* Calendar Styling */
.calendar-container {
    width: 100%;
    max-width: 280px;
    background: transparent;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #78555e;
    user-select: none;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Gochi Hand', cursive;
    font-size: 1.25rem;
    padding: 0 0.5rem;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 0.9rem;
}
.calendar-day-label {
    font-family: 'Gochi Hand', cursive;
    font-weight: bold;
    opacity: 0.8;
    font-size: 0.85rem;
    padding-bottom: 2px;
}
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.calendar-day:hover:not(.disabled) {
    background: rgba(120, 85, 94, 0.08);
    transform: scale(1.05);
}
.calendar-day.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    text-decoration: line-through;
}
.calendar-day.selected {
    font-weight: bold;
}
.calendar-day.selected::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid #78555e;
    border-radius: 48% 52% 55% 45% / 42% 58% 42% 58%;
    pointer-events: none;
    animation: drawCircle 0.4s ease-out forwards;
}
.calendar-btn {
    font-family: 'Material Symbols Outlined';
    cursor: pointer;
    font-size: 1.5rem;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.calendar-btn:hover {
    background: rgba(120, 85, 94, 0.1);
}

@keyframes drawCircle {
    0% { transform: scale(0) rotate(-15deg); opacity: 0; }
    100% { transform: scale(1) rotate(5deg); opacity: 1; }
}