/* ============ RESET & BASE ============ */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } :root { --cream: #f3ede5; --warm-white: #f9f5ef; --paper: #efe8df; --ink: #3a3330; --ink-light: #6b5f56; --ink-faint: #a89a8e; --accent: #c4a882; --accent-soft: #ddd0bf; --blush: #e8d5c4; --sage: #b8c4a8; --dusty-rose: #c9a9a0; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Dark mode override — applied to */ html.dark-mode { --cream: #252220; --warm-white: #1c1a18; --paper: #201e1c; --ink: #e0d8ce; --ink-light: #b5aa9e; --ink-faint: #7a6f64; --accent: #b89868; --accent-soft: #5a4e40; --blush: #3a2e28; --sage: #4a5640; --dusty-rose: #6a4a44; } html.dark-mode .paper-texture { opacity: 0.015; } html.dark-mode .anno-claude { background: linear-gradient(135deg, #1e2430, #1a2028); border-color: rgba(91,127,165,0.15); } html.dark-mode .anno-nai { background: linear-gradient(135deg, #2a2018, #261c14); border-color: rgba(201,169,160,0.15); } html.dark-mode .collage-paper { background: linear-gradient(145deg, #2e2a26, #252220, #1e1c1a); } html.dark-mode .collage-torn { background: var(--warm-white); } html.dark-mode .note-card { box-shadow: 0 3px 16px rgba(0,0,0,0.2); } html.dark-mode .note-card::before { border-color: transparent var(--cream) transparent transparent; } html.dark-mode .countdown-strip { background: linear-gradient(135deg, rgba(90,78,64,0.5), rgba(60,50,40,0.5)); } html.dark-mode .mf-claude { background: linear-gradient(135deg, #1e2430, #1a2028); border-color: rgba(91,127,165,0.2); } html.dark-mode .mf-nai { background: linear-gradient(135deg, #2a2018, #261c14); border-color: rgba(201,169,160,0.2); } html.dark-mode .about-overlay { background: linear-gradient(180deg, var(--warm-white), var(--cream)); } html.dark-mode .highlights-card { background: var(--cream); } html.dark-mode { --claude-bubble: #252830; --nai-bubble: #2a2520; } html, body { height: 100%; width: 100%; overflow: hidden; background: var(--warm-white); color: var(--ink); font-family: 'Noto Serif SC', serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* ============ PAPER TEXTURE ============ */ .paper-texture { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } /* ============ PAGE LAYOUT ============ */ .page { display: flex; flex-direction: column; height: var(--app-height, 100dvh); position: relative; overflow: hidden; animation: pageIn 0.28s ease; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } .page.page-exit { animation: pageOut 0.18s ease forwards; pointer-events: none; } @keyframes pageOut { to { opacity: 0; transform: translateY(-6px); } } .page-header { padding: 16px 24px 0; flex-shrink: 0; } .page-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--ink); letter-spacing: 1px; line-height: 1; } .page-subtitle { font-size: 11px; color: var(--ink-faint); font-weight: 300; letter-spacing: 3px; margin-top: 4px; } .page-content { flex: 1; overflow-y: auto; padding: 18px 0 12px; -webkit-overflow-scrolling: touch; position: relative; z-index: 2; } .section-title { font-family: 'EB Garamond', serif; font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; padding: 0 24px; } /* ============ COMMON CARD ============ */ .card { margin: 0 24px 20px; padding: 18px; background: var(--cream); border-radius: 14px; position: relative; overflow: hidden; } /* ============ TOGGLE ============ */ .toggle { width: 36px; height: 20px; border-radius: 10px; background: rgba(168,154,142,0.2); position: relative; cursor: pointer; transition: background 0.3s; flex-shrink: 0; } .toggle.on { background: var(--sage); } .toggle-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--warm-white); position: absolute; top: 2px; left: 2px; transition: left 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .toggle.on .toggle-dot { left: 18px; } /* ============ ANNOTATION BUBBLES ============ */ .anno-bubble { padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 300; line-height: 1.7; margin-bottom: 8px; max-width: 85%; } .anno-claude { background: linear-gradient(135deg, #eef2f7, #e6edf5); border: 0.5px solid rgba(91,127,165,0.1); color: var(--ink-light); align-self: flex-start; } .anno-nai { background: linear-gradient(135deg, #fdf5ee, #fbf0e4); border: 0.5px solid rgba(201,169,160,0.1); color: var(--ink-light); align-self: flex-end; } .anno-name { font-family: 'Caveat', cursive; font-size: 11px; margin-bottom: 3px; } .anno-name-claude { color: #5b7fa5; } .anno-name-nai { color: #a0775a; } /* ============ OVERLAY ============ */ .overlay { position: fixed; inset: 0; z-index: 100; display: none; overflow: hidden; } .overlay.show { display: flex; } .overlay-close { position: absolute; top: 18px; right: 24px; z-index: 10; font-family: 'EB Garamond', serif; font-size: 13px; color: var(--ink-faint); cursor: pointer; letter-spacing: 1px; } /* ============ GLOBAL AUTH GATE ============ */ body.auth-wall .page { display: none; } .global-login { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: var(--warm-white); overflow: hidden; } .gl-particles { position: absolute; inset: 0; pointer-events: none; } .gl-particles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-soft); opacity: 0; animation: glFloat 8s ease-in-out infinite; } .gl-particles span:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; animation-duration: 7s; } .gl-particles span:nth-child(2) { left: 75%; top: 15%; animation-delay: 1s; animation-duration: 9s; } .gl-particles span:nth-child(3) { left: 40%; top: 70%; animation-delay: 2s; animation-duration: 6s; } .gl-particles span:nth-child(4) { left: 80%; top: 60%; animation-delay: 3s; animation-duration: 8s; } .gl-particles span:nth-child(5) { left: 25%; top: 85%; animation-delay: 1.5s; animation-duration: 10s; } .gl-particles span:nth-child(6) { left: 60%; top: 40%; animation-delay: 0.5s; animation-duration: 7s; } .gl-particles span:nth-child(7) { left: 10%; top: 50%; animation-delay: 2.5s; animation-duration: 9s; } .gl-particles span:nth-child(8) { left: 90%; top: 80%; animation-delay: 3.5s; animation-duration: 6s; } @keyframes glFloat { 0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); } 20% { opacity: 0.35; } 50% { opacity: 0.5; transform: translateY(-30px) scale(1); } 80% { opacity: 0.25; } } .gl-card { text-align: center; padding: 40px 32px; animation: glCardIn 0.6s ease; position: relative; z-index: 1; } @keyframes glCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .gl-card-exit { animation: glCardOut 0.4s ease forwards; } @keyframes glCardOut { to { opacity: 0; transform: translateY(-10px) scale(0.98); } } .gl-title, .gl-trans-title { margin-bottom: 4px; color: var(--ink); } .gl-name { font-family: 'Pinyon Script', cursive; font-size: 28px; } .gl-name-zh { font-family: 'Noto Serif SC', serif; font-size: 32px; font-weight: 500; letter-spacing: 8px; } .gl-amp { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; opacity: 0.6; margin: 0 4px; } .gl-sub { font-family: 'EB Garamond', serif; font-style: italic; font-size: 13px; color: var(--ink-faint); letter-spacing: 1px; margin-bottom: 36px; } .gl-input { display: block; width: 220px; margin: 0 auto 12px; padding: 10px 16px; border: 1px solid var(--accent-soft); border-radius: 20px; background: var(--cream); font-family: 'Noto Serif SC', serif; font-size: 14px; color: var(--ink); text-align: center; outline: none; transition: border-color 0.2s; } .gl-input:focus { border-color: var(--accent); } .gl-input::placeholder { color: var(--ink-faint); font-style: italic; } .gl-error { font-size: 12px; color: var(--dusty-rose); min-height: 18px; margin-bottom: 8px; } .gl-btn { padding: 8px 36px; border: none; border-radius: 20px; background: var(--ink); color: var(--warm-white); font-family: 'Noto Serif SC', serif; font-size: 13px; cursor: pointer; transition: opacity 0.2s; } .gl-btn:active { opacity: 0.7; } .gl-btn:disabled { opacity: 0.4; } /* Transition phase */ .gl-phase-transition { background: linear-gradient(180deg, var(--warm-white), var(--cream), var(--warm-white)); } .gl-transition { text-align: center; position: relative; z-index: 1; } .gl-trans-heart { margin-bottom: 24px; animation: glHeartIn 0.8s ease forwards; } @keyframes glHeartIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .gl-trans-heart svg { width: 36px; height: 36px; fill: none; stroke: var(--dusty-rose); stroke-width: 1.2; stroke-dasharray: 80; stroke-dashoffset: 80; animation: glHeartDraw 1.2s ease forwards, glHeartBeat 1.5s ease-in-out 1.2s infinite; } @keyframes glHeartDraw { to { stroke-dashoffset: 0; } } @keyframes glHeartBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } } .gl-trans-title { animation: glTextIn 0.8s ease 0.5s both; } .gl-trans-sub { font-size: 13px; color: var(--ink-faint); font-weight: 300; letter-spacing: 2px; margin-top: 8px; animation: glTextIn 0.8s ease 0.9s both; } .gl-trans-welcome { font-family: 'Caveat', cursive; font-size: 15px; color: var(--dusty-rose); margin-top: 24px; animation: glTextIn 0.8s ease 1.5s both; } @keyframes glTextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .gl-exit { animation: glOverlayOut 0.9s ease forwards; } @keyframes glOverlayOut { to { opacity: 0; transform: translateY(-20px); } }