/* --- IMAGE PROTECTION --- */
        img, video, canvas {
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            pointer-events: auto;
        }

        /* --- THEME CONFIGURATION (Notebook Palette) --- */
        :root {
            --bg-paper: #f4f1ea;
            --line-color: rgba(0, 0, 0, 0.05);
            --ink-primary: #2c2c2c;
            --ink-secondary: #555555;
            --accent-red: #d93025;
            --accent-blue: #1a73e8;
            --accent-highlight: #fff9c4;
        }

        html {
            scroll-behavior: smooth;
            /* Smooth scrolling for the whole page */
            height: 100%;
        }

        body {
            font-family: 'Courier Prime', monospace;
            background-color: var(--bg-paper);
            color: var(--ink-primary);
            overflow-x: hidden;
            /* Prevent horizontal scroll globally */
            min-height: 100%;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
            /* Crisper text on macOS/iOS */
            -moz-osx-font-smoothing: grayscale;
        }

        /* Custom Selection Color */
        ::selection {
            background: var(--accent-red);
            color: #fff;
        }

        /* --- Optimized Fixed Background Layer --- */
        #bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh; /* override with dynamic viewport on supported browsers */
            /* Dynamic Viewport Height for Mobile Browsers */
            z-index: -2;
            background-image:
                linear-gradient(var(--line-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--line-color) 1px, transparent 1px);
            background-size: 2rem 2rem;
            pointer-events: none;
            will-change: transform;
            /* Hint for browser compositor */
        }

        /* --- Paper Texture Overlay --- */
        .paper-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.3;
            -webkit-mix-blend-mode: multiply;
            mix-blend-mode: multiply;
            transform: translateZ(0);
            background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
        }

        /* --- Animations --- */
        @keyframes scribble {
            0% {
                transform: rotate(-1deg);
            }

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

            100% {
                transform: rotate(-1deg);
            }
        }

        .animate-scribble:hover {
            animation: scribble 0.5s ease-in-out infinite;
        }

        @keyframes slide-up {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

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

        .animate-fade-in {
            animation: slide-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        /* Smooth modal / overlay entrance */
        @keyframes fade-in-scale {
            from { opacity: 0; transform: scale(0.96); }
            to   { opacity: 1; transform: scale(1); }
        }

        /* GPU layer hint for frequently composited elements */
        .site-sidebar,
        .site-content {
            transform: translateZ(0);
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Custom Scrollbar for inner containers */
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: #d93025 rgba(0, 0, 0, 0.05);
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #d93025;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #b91c1c;
        }

        /* --- Typography --- */
        .font-hand {
            font-family: 'Patrick Hand', cursive;
        }

        .font-typewriter {
            font-family: 'Special Elite', cursive;
        }

        .font-mono {
            font-family: 'Courier Prime', monospace;
        }

        .font-devanagari {
            font-family: 'Noto Serif Devanagari', serif;
        }

        /* Utility for very small screens */
        @media (max-width: 380px) {
            .xs-text-scale {
                font-size: 0.85em;
            }
        }

        /* Utility: hidden until JS initializes */
        .hide-on-load { display: none; }

        /* --- Mobile-First Utilities --- */
        /* Minimum touch target size for accessibility */
        .touch-target {
            min-height: 44px;
            min-width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Fluid carousel cards */
        .carousel-card {
            width: 82vw;
            max-width: 288px;
            flex-shrink: 0;
        }

        @media (min-width: 480px) {
            .carousel-card {
                width: 72vw;
            }
        }

        @media (min-width: 640px) {
            .carousel-card {
                width: 18rem;
                max-width: 320px;
            }
        }

        /* Prevent overflow on all sections */
        section,
        .page-container {
            max-width: 100vw;
        }

        /* Tap highlight removal + fix 300ms tap delay */
        a,
        button,
        [onclick] {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        /* Better prose on mobile */
        .prose p {
            font-size: 0.95rem;
            line-height: 1.75;
        }

        @media (min-width: 640px) {
            .prose p {
                font-size: 1.125rem;
            }
        }

        /* --- UI Elements --- */
        .polaroid {
            background: white;
            padding: 0.75rem 0.75rem 2.5rem 0.75rem;
            box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
            transform: rotate(var(--rotation));
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            /* Optimized properties */
            border: 1px solid #e5e5e5;
            height: 100%;
            display: flex;
            flex-direction: column;
            will-change: transform;
            /* Hardware acceleration */
            backface-visibility: hidden;
        }

        .polaroid:hover {
            transform: rotate(0deg) scale(1.02);
            z-index: 10;
            box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.15);
        }

        .ink-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Reader Styles */
        .reader-content h1,
        .reader-content h2 {
            font-family: 'Special Elite', cursive;
            color: #1a1a1a;
            margin-top: 1.5em;
            line-height: 1.2;
        }

        .reader-content blockquote {
            border-left: 3px solid var(--accent-blue);
            font-family: 'Patrick Hand', cursive;
            font-size: 1.1rem;
            color: var(--ink-secondary);
            background: rgba(0, 0, 0, 0.02);
            padding: 0.75rem;
            margin: 1.5rem 0;
        }

        .reader-content a {
            color: var(--accent-red);
            text-decoration-style: wavy;
            word-break: break-all;
        }

        /* Responsive Images in Prose */
        .prose img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1.5rem auto;
            border-radius: 2px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Responsive Grid & Layouts */
        .page-container {
            padding-top: 1rem;
            padding-bottom: 6rem;
            /* Extra padding for bottom nav */
            padding-left: 1rem;
            padding-right: 1rem;
            width: 100%;
            overflow-x: hidden;
            /* Ensure content doesn't spill over */
        }

        @media (min-width: 640px) {
            .page-container {
                padding-top: 1.25rem;
                padding-bottom: 7rem;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        }

        @media (min-width: 768px) {
            .page-container {
                padding-top: 1.5rem;
                padding-left: 2.5rem;
                padding-right: 2.5rem;
            }
        }

        .masonry-grid {
            column-count: 1;
            column-gap: 1.5rem;
        }

        @media (min-width: 640px) {
            .masonry-grid {
                column-count: 2;
            }
        }

        @media (min-width: 1024px) {
            .masonry-grid {
                column-count: 3;
            }
        }

        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1.5rem;
        }

        /* Nav Scroll */
        .nav-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* Momentum scrolling for iOS */
            scrollbar-width: none;
            max-width: 95vw;
        }

        .nav-scroll::-webkit-scrollbar {
            display: none;
        }

        @media (min-width: 768px) {
            .nav-scroll {
                overflow-x: visible;
                max-width: none;
            }
        }

        /* Unique Hand-Drawn Elements */
        .stamp {
            border: 4px double #d93025;
            color: #d93025;
            padding: 2px 10px;
            font-family: 'Special Elite', cursive;
            text-transform: uppercase;
            font-weight: bold;
            display: inline-block;
            transform: rotate(-12deg);
            opacity: 0.7;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .coffee-stain {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 8px solid rgba(139, 69, 19, 0.1);
            position: absolute;
            z-index: 0;
            filter: blur(2px);
        }

        /* --- Page Turn Animation Styles --- */
        #curtain {
            background-color: var(--bg-paper);
            background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
            box-shadow: -20px 0 50px rgba(0, 0, 0, 0.15);
            transform: translateX(100%);
            z-index: 100;
            pointer-events: none;
            display: block;
            opacity: 1;
            border-left: 1px solid rgba(0, 0, 0, 0.05);
            will-change: transform;
            /* Hardware acceleration */
        }

        /* Secret phrase input in MM */
        .mm-secret-input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px dashed;
            padding: 4px 2px;
            font-size: 12px;
            outline: none;
            letter-spacing: 0.05em;
            text-align: center;
        }

        .mm-secret-input::placeholder {
            opacity: 0.5;
            font-style: italic;
        }

        .mm-secret-input {
            border-color: #d0c8b8;
            color: #2c2c2c;
            font-family: 'Patrick Hand', cursive;
        }

        .page-edge-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
            pointer-events: none;
        }
        /* ========== DESKTOP WIDGETS (Kundali + Astro Event) ========== */
        .desktop-widgets-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 50;
            pointer-events: none;
        }

        .desktop-widget {
            position: absolute;
            background: transparent;
            border: none;
            box-shadow: none;
            overflow: hidden;
            pointer-events: auto;
        }

        .desktop-widget:hover {
            border: none;
            box-shadow: none;
        }

        .desktop-widget-body {
            padding: 8px 10px;
        }

        .gochar-planet-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px 0;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
            font-size: 13px;
        }

        .gochar-planet-row:last-child {
            border-bottom: none;
        }

        .gochar-planet-name {
            font-family: 'Noto Serif Devanagari', serif;
            font-weight: bold;
            min-width: 30px;
        }

        .gochar-planet-rashi {
            font-family: 'Noto Serif Devanagari', serif;
            font-size: 12px;
            color: #555;
            flex: 1;
            text-align: center;
        }

        .gochar-planet-deg {
            font-family: 'Courier Prime', monospace;
            font-size: 11px;
            color: #888;
            min-width: 40px;
            text-align: right;
        }

        .gochar-retro {
            color: #dc2626;
        }

        .gochar-combust {
            color: #71717a;
        }

        .astro-event-card {
            text-align: center;
            padding: 6px 0;
        }

        .astro-event-name {
            font-family: 'Special Elite', cursive;
            font-size: 14px;
            color: #2c2c2c;
            margin-bottom: 4px;
        }

        .astro-event-date {
            font-family: 'Courier Prime', monospace;
            font-size: 11px;
            color: #888;
            margin-bottom: 6px;
        }

        .astro-event-countdown {
            font-family: 'Patrick Hand', cursive;
            font-size: 18px;
            color: #d93025;
            font-weight: bold;
        }

        .astro-event-desc {
            font-family: 'Patrick Hand', cursive;
            font-size: 12px;
            color: #555;
            margin-top: 4px;
            line-height: 1.3;
        }

        .astro-sun-times {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            border-top: 1px dashed rgba(0, 0, 0, 0.08);
            margin-top: 6px;
            font-family: 'Courier Prime', monospace;
            font-size: 10px;
            color: #888;
        }

        @media (max-width: 1200px) {
            .desktop-widgets-container {
                flex-direction: column;
                align-items: flex-end;
            }

            .desktop-widget {
                width: 240px;
            }
        }

        @media (max-width: 768px) {
            .desktop-widgets-container {
                display: none;
            }
        }

        /* ========== TOP TITLE BAR (v002) ========== */

        .hp-titlebar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 32px;
            background: linear-gradient(180deg, #e8e4dc 0%, #f0ece4 100%);
            border-bottom: 2px solid #2c2c2c;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px 0 20px;
            z-index: 300;
            user-select: none;
            -webkit-user-select: none;
        }

        .hp-titlebar-text {
            font-family: 'Special Elite', cursive;
            font-size: 13px;
            color: #2c2c2c;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .hp-titlebar-controls {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .hp-titlebar-controls span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            border: 1px solid rgba(0,0,0,0.15);
        }

        .hp-titlebar-controls .ctl-close { background: #d93025; }
        .hp-titlebar-controls .ctl-minimize { background: #f4b400; }
        .hp-titlebar-controls .ctl-fullscreen { background: #0f9d58; }

        /* ========== HOMEPAGE REDESIGN (v002) ========== */

        .hp-desktop-shell {
            width: 100%;
            height: calc(100vh - 78px);
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 34px;
        }

        .hp-wrapper {
            display: grid;
            grid-template-columns: 300px 1fr 280px;
            gap: 0;
            min-height: calc(100vh - 78px);
            padding-left: 20px;
        }

        /* --- Left Column --- */
        .hp-left {
            position: sticky;
            top: 0;
            height: calc(100vh - 78px);
            overflow-y: auto;
            scrollbar-width: none;
            padding: 20px 16px 20px 8px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .hp-left::-webkit-scrollbar { display: none; }

        /* Profile Card */
        .hp-profile-card {
            background: #fff;
            border: 2px solid #e5e5e5;
            padding: 24px 20px;
            box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
            position: relative;
            text-align: center;
        }

        .hp-profile-clip {
            position: absolute;
            top: -6px;
            right: 24px;
            width: 8px;
            height: 18px;
            border: 3px solid #a0a0a0;
            border-radius: 50%;
            border-bottom: none;
            background: transparent;
            z-index: 2;
        }

        .hp-profile-avatar {
            width: 100px;
            height: 100px;
            margin: 0 auto 14px;
            border-radius: 50%;
            background: #f5f5f5;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #bbb;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
        }

        .hp-profile-name {
            font-family: 'Special Elite', cursive;
            font-size: 20px;
            font-weight: 700;
            color: #2c2c2c;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
        }

        .hp-profile-divider {
            width: 40px;
            height: 2px;
            background: #d93025;
            margin: 0 auto 10px;
        }

        .hp-profile-date {
            font-family: 'Courier Prime', monospace;
            font-size: 11px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin: 0;
        }

        .hp-profile-date-bs {
            font-family: 'Courier Prime', monospace;
            font-size: 10px;
            color: #aaa;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0 0 12px;
        }

        .hp-profile-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }

        .hp-profile-tags button {
            padding: 3px 8px;
            background: #fafafa;
            border: 1px solid #ddd;
            font-family: 'Courier Prime', monospace;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
        }

        .hp-profile-tags button:hover {
            background: #2c2c2c;
            color: #fff;
            border-color: #2c2c2c;
        }

        /* Sidebar */
        .hp-sidebar {
            background: #fff;
            border: 2px solid #e5e5e5;
            box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
            overflow: hidden;
            flex: 1;
        }

        .hp-sidebar-header {
            background: #2c2c2c;
            color: #f4f1ea;
            font-family: 'Special Elite', cursive;
            font-size: 13px;
            letter-spacing: 0.1em;
            padding: 10px 16px;
        }

        .hp-sidebar-nav {
            display: flex;
            flex-direction: column;
        }

        .hp-sidebar-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            cursor: pointer;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            transition: all 0.15s;
        }

        .hp-sidebar-item:hover {
            background: rgba(217, 48, 37, 0.06);
        }

        .hp-sidebar-item:last-child {
            border-bottom: none;
        }

        .hp-sidebar-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .hp-sidebar-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .hp-sidebar-text strong {
            font-family: 'Courier Prime', monospace;
            font-size: 13px;
            color: #2c2c2c;
            font-weight: 700;
        }

        .hp-sidebar-text span {
            font-family: 'Patrick Hand', cursive;
            font-size: 11px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hp-sidebar-desktop {
            border-top: 1px solid rgba(0,0,0,0.08);
            margin-top: auto;
        }

        /* --- Center Column --- */
        .hp-center {
            padding: 32px 40px 60px;
            border-left: 1px solid rgba(0,0,0,0.06);
            border-right: 1px solid rgba(0,0,0,0.06);
            overflow-y: auto;
            position: relative;
        }

        /* Red margin line like a notebook */
        .hp-center::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: rgba(217, 48, 37, 0.2);
        }

        /* --- Right Column --- */
        .hp-right {
            position: sticky;
            top: 0;
            height: calc(100vh - 78px);
            overflow-y: auto;
            scrollbar-width: none;
            padding: 20px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .hp-right::-webkit-scrollbar { display: none; }

        .hp-widget {
            background: transparent;
            border: none;
        }

        /* --- Responsive: collapse to 2-col or 1-col on smaller desktops --- */
        @media (max-width: 1200px) {
            .hp-wrapper {
                grid-template-columns: 260px 1fr 240px;
            }
        }

        @media (max-width: 1024px) {
            .hp-wrapper {
                grid-template-columns: 1fr;
                padding-left: 10px;
            }
            .hp-left {
                position: static;
                height: auto;
                flex-direction: row;
                padding: 12px;
                gap: 12px;
            }
            .hp-profile-card {
                flex: 0 0 auto;
                width: 220px;
            }
            .hp-sidebar {
                flex: 1;
            }
            .hp-center {
                padding: 20px;
            }
            .hp-center::before { display: none; }
            .hp-right {
                position: static;
                height: auto;
                flex-direction: row;
                gap: 16px;
                padding: 12px 20px;
            }
            .hp-widget {
                flex: 1;
                min-width: 0;
            }
        }