| HEAD = """ |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Caveat:wght@400;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> |
| """ |
|
|
| JS = """ |
| () => { |
| const root = document.querySelector('.gradio-container'); |
| if (!root) return; |
| root.dataset.ready = 'true'; |
| } |
| """ |
|
|
| CSS = """ |
| /* ═══════════════════════════════════════════════ |
| KNOWLEDGEMESH — CHALKBOARD CLASSROOM THEME |
| Palette: Dark chalkboard green · Frosted glass · Warm chalk yellow · Neon chalk green |
| Texture: Wood border, vignette board, chalk doodles |
| ═══════════════════════════════════════════════ */ |
| |
| /* ══ PAGE BACKGROUND — Dark cozy classroom ══ */ |
| .gradio-container { |
| min-height: 100vh !important; |
| background: radial-gradient(circle at center, #181715 0%, #0a0a09 100%) !important; |
| color: #f8fafc !important; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important; |
| padding: 20px 10px !important; |
| } |
| |
| /* ══ NUKE GRADIO STYLING OVERRIDES ══ */ |
| .gradio-container *, |
| .gradio-container .block, |
| .gradio-container .form, |
| .gradio-container .wrap, |
| .gradio-container .gap, |
| .gradio-container .container, |
| .gradio-container .svelte-1f354aw, |
| .gradio-container .input-wrap, |
| .gradio-container .component-wrapper, |
| .gradio-container [data-testid], |
| .gradio-container .lg, |
| .gradio-container .sm, |
| .gradio-container .stretch { |
| background-color: transparent !important; |
| color: inherit; |
| } |
| |
| /* ══ CHALKBOARD CONTAINER (FRAME & SURFACE) ══ */ |
| #kh-shell { |
| position: relative !important; |
| max-width: 1200px !important; |
| margin: 30px auto !important; |
| padding: 40px 40px 60px 40px !important; |
| |
| /* Wood Frame border styling */ |
| border: 14px solid #3d2314 !important; |
| border-radius: 12px !important; |
| |
| /* Multi-layered shadows for frame bevel and board depth */ |
| box-shadow: |
| 0 15px 35px rgba(0,0,0,0.85), |
| inset 0 0 20px rgba(0,0,0,0.9), |
| inset 0 0 0 1px #4f2f1c, |
| 0 0 0 1px #1d1009 !important; |
| |
| /* Multiple backgrounds: |
| 1. Hanging lamp doodle (top right) |
| 2. Idea lightbulb (top center) |
| 3. Atom doodle (left) |
| 4. Neural Network sketch (left, lower) |
| 5. Mathematical graph (bottom left) |
| 6. Equations & math doodle (right) |
| 7. Tiny star/arrow doodle (top left) |
| 8. Chalkboard green vignette surface |
| */ |
| background-image: |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='180' viewBox='0 0 80 180'><path d='M 40,0 L 40,90' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1.5'/><path d='M 25,90 L 55,90 L 60,105 L 20,105 Z' fill='rgba(255,255,255,0.04)' stroke='rgba(255,255,255,0.22)' stroke-width='1.5' stroke-linejoin='round'/><circle cx='40' cy='113' r='8' fill='rgba(255,255,220,0.12)' stroke='rgba(255,255,255,0.25)' stroke-width='1.5'/><path d='M 38,110 L 40,115 L 42,110' fill='none' stroke='rgba(255,255,220,0.5)' stroke-width='1'/><path d='M 20,125 L 10,135 M 30,128 L 25,140 M 50,128 L 55,140 M 60,125 L 70,135' fill='none' stroke='rgba(255,255,220,0.18)' stroke-width='1' stroke-linecap='round'/></svg>"), |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='70' viewBox='0 0 60 70'><path d='M 30,10 C 20,10 15,20 15,30 C 15,40 25,45 25,50 L 35,50 C 35,45 45,40 45,30 C 45,20 40,10 30,10 Z M 25,50 L 35,50 M 27,54 L 33,54 M 29,58 L 31,58' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/><path d='M 10,25 L 5,22 M 12,15 L 7,10 M 30,5 L 30,0 M 48,15 L 53,10 M 50,25 L 55,22' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1' stroke-linecap='round'/></svg>"), |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><ellipse cx='50' cy='50' rx='42' ry='12' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2' transform='rotate(30 50 50)'/><ellipse cx='50' cy='50' rx='42' ry='12' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2' transform='rotate(-30 50 50)'/><ellipse cx='50' cy='50' rx='42' ry='12' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2' transform='rotate(90 50 50)'/><circle cx='50' cy='50' r='5' fill='rgba(255,255,255,0.08)'/></svg>"), |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='120' viewBox='0 0 90 120'><circle cx='20' cy='20' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='20' cy='60' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='20' cy='100' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='70' cy='40' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><circle cx='70' cy='80' r='4' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><line x1='24' y1='20' x2='66' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='20' x2='66' y2='80' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='60' x2='66' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='60' x2='66' y2='80' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='100' x2='66' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/><line x1='24' y1='100' x2='66' y2='80' stroke='rgba(255,255,255,0.03)' stroke-width='1'/></svg>"), |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='80' viewBox='0 0 90 80'><path d='M 10,10 L 10,70 L 80,70' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2'/><path d='M 10,60 Q 30,30 50,50 T 80,20' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.2' stroke-dasharray='3,3'/><path d='M 10,50 Q 25,20 45,30 T 75,10' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.2'/></svg>"), |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><path d='M 90,20 L 93,27 L 100,27 L 95,31 L 97,38 L 90,34 L 83,38 L 85,31 L 80,27 L 87,27 Z' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.2'/><text x='10' y='70' font-family=''Gochi Hand', cursive' font-size='15' fill='rgba(255,255,255,0.07)' transform='rotate(-5 10 70)'>e^(i.pi) %2B 1 = 0</text><path d='M 20,90 L 50,90 M 50,90 L 45,86 M 50,90 L 45,94' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/><path d='M 20,90 L 40,110 M 40,110 L 35,110 M 40,110 L 40,105' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/><text x='55' y='93' font-family=''Gochi Hand', cursive' font-size='12' fill='rgba(255,255,255,0.06)'>F</text></svg>"), |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M 10,20 Q 25,5 40,20 Q 55,35 40,50 Q 25,65 15,50' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1.5' stroke-linecap='round'/></svg>"), |
| radial-gradient(circle at 50% 30%, #1c3d28 0%, #0d1e13 100%) !important; |
| |
| background-position: |
| right 35px top 0px, |
| center top 20px, |
| left 20px top 220px, |
| left 30px top 450px, |
| left 40px top 650px, |
| right 30px top 350px, |
| left 30px top 60px, |
| center center !important; |
| background-repeat: no-repeat !important; |
| background-size: auto, auto, auto, auto, auto, auto, auto, cover !important; |
| overflow: visible !important; |
| } |
| } |
| |
| /* ══ ROOM TAG ══ */ |
| .kh-room-tag { |
| position: absolute; |
| top: -12px; |
| left: 35px; |
| background: #142d1c !important; |
| border: 1.5px solid rgba(94, 189, 114, 0.45) !important; |
| color: #5ebd72 !important; |
| padding: 4px 14px; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.15rem !important; |
| border-radius: 6px !important; |
| transform: rotate(-1.5deg) !important; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; |
| z-index: 10; |
| pointer-events: none; |
| } |
| |
| /* ══ HEADER & TYPOGRAPHY ══ */ |
| #kh-title { |
| padding: 10px 0 15px !important; |
| border-bottom: 2px dashed rgba(255, 255, 255, 0.12) !important; |
| background: transparent !important; |
| text-align: left; |
| } |
| |
| #kh-title h1 { |
| color: #ffffff !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: clamp(2.8rem, 6vw, 4.8rem) !important; |
| font-weight: 400 !important; |
| line-height: 1.0; |
| margin: 0 0 6px !important; |
| text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0,0,0,0.6) !important; |
| } |
| |
| #kh-title p { |
| color: rgba(255, 255, 255, 0.75) !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.35rem !important; |
| margin: 0 !important; |
| letter-spacing: 0.03em !important; |
| } |
| |
| /* ══ CODE CHIPS ══ */ |
| .kh-chip-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin: 14px 0 24px !important; |
| background: transparent !important; |
| } |
| |
| .kh-chip { |
| border: 1px solid rgba(255, 255, 255, 0.15) !important; |
| border-radius: 999px !important; |
| padding: 4px 12px !important; |
| color: rgba(255, 255, 255, 0.7) !important; |
| background: rgba(255, 255, 255, 0.03) !important; |
| font-size: 0.82rem !important; |
| font-weight: 500 !important; |
| } |
| |
| .kh-chip code { |
| color: #5ebd72 !important; |
| background: rgba(94, 189, 114, 0.08) !important; |
| border: 1px solid rgba(94, 189, 114, 0.2) !important; |
| border-radius: 4px; |
| padding: 1px 4px; |
| font-family: "JetBrains Mono", monospace; |
| font-size: 0.85em; |
| } |
| |
| /* ══ CHALKBOARD TABS NAVIGATION ══ */ |
| .tabs { |
| margin-top: 10px !important; |
| border: none !important; |
| } |
| |
| .tab-nav { |
| border-bottom: 2px dashed rgba(255, 255, 255, 0.15) !important; |
| margin-bottom: 22px !important; |
| gap: 12px !important; |
| background: transparent !important; |
| } |
| |
| .tab-nav button { |
| color: rgba(255, 255, 255, 0.55) !important; |
| background: transparent !important; |
| border: none !important; |
| border-radius: 0 !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.45rem !important; |
| font-weight: normal !important; |
| padding: 6px 20px !important; |
| transition: all 0.2s ease !important; |
| } |
| |
| .tab-nav button:hover { |
| color: #ffffff !important; |
| text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important; |
| } |
| |
| .tab-nav button.selected { |
| color: #ffffff !important; |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important; |
| border-bottom: 3px solid #5ebd72 !important; |
| } |
| |
| /* ══ FROSTED GLASS CARDS ══ */ |
| .kh-panel { |
| background: rgba(255, 255, 255, 0.038) !important; |
| backdrop-filter: blur(12px) !important; |
| -webkit-backdrop-filter: blur(12px) !important; |
| border: 1px solid rgba(255, 255, 255, 0.09) !important; |
| border-radius: 12px !important; |
| padding: 24px !important; |
| box-shadow: |
| 0 8px 32px 0 rgba(0, 0, 0, 0.28), |
| inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; |
| color: #f8fafc !important; |
| margin-bottom: 15px !important; |
| } |
| |
| .kh-panel h3 { |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.6rem !important; |
| font-weight: normal !important; |
| color: #ffffff !important; |
| margin-top: 0 !important; |
| margin-bottom: 8px !important; |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.4) !important; |
| } |
| |
| .kh-subhead { |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.15rem !important; |
| color: rgba(255, 255, 255, 0.55) !important; |
| line-height: 1.4 !important; |
| margin-bottom: 16px !important; |
| } |
| |
| /* ══ INPUTS & TEXTAREAS ══ */ |
| textarea, |
| input[type="text"], |
| input[type="number"], |
| [data-testid="textbox"] input, |
| [data-testid="textbox"] textarea { |
| background: rgba(0, 0, 0, 0.28) !important; |
| color: #f8fafc !important; |
| border: 1px solid rgba(255, 255, 255, 0.14) !important; |
| border-radius: 8px !important; |
| padding: 10px 14px !important; |
| font-size: 0.94rem !important; |
| font-family: Inter, ui-sans-serif, sans-serif !important; |
| box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important; |
| transition: all 0.2s ease !important; |
| } |
| |
| textarea:focus, |
| input[type="text"]:focus, |
| [data-testid="textbox"] input:focus, |
| [data-testid="textbox"] textarea:focus { |
| border-color: rgba(94, 189, 114, 0.5) !important; |
| box-shadow: |
| 0 0 8px rgba(94, 189, 114, 0.25), |
| inset 0 2px 4px rgba(0,0,0,0.5) !important; |
| outline: none !important; |
| } |
| |
| textarea::placeholder, |
| input::placeholder { |
| color: rgba(255, 255, 255, 0.38) !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.18rem !important; |
| } |
| |
| /* Custom styles for Gradio form labels */ |
| .kh-panel label span, |
| .kh-panel .label-wrap span { |
| color: rgba(255, 255, 255, 0.5) !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.15rem !important; |
| font-weight: normal !important; |
| margin-bottom: 4px !important; |
| } |
| |
| /* ══ UPLOAD DRAG/DROP FILE BLOCK ══ */ |
| .upload-container, |
| .file-preview, |
| [data-testid="file"], |
| .file-upload { |
| background: rgba(0, 0, 0, 0.2) !important; |
| border: 2px dashed rgba(255, 255, 255, 0.14) !important; |
| border-radius: 8px !important; |
| color: rgba(255, 255, 255, 0.5) !important; |
| padding: 14px !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.18rem !important; |
| transition: all 0.2s ease !important; |
| text-align: center; |
| } |
| |
| .upload-container:hover { |
| border-color: rgba(94, 189, 114, 0.45) !important; |
| background: rgba(94, 189, 114, 0.04) !important; |
| } |
| |
| .upload-container *, .file-preview * { |
| background: transparent !important; |
| color: rgba(255, 255, 255, 0.55) !important; |
| } |
| |
| /* ══ BUTTONS ══ */ |
| /* Primary Button — Warm Chalk Yellow, Slight Glow */ |
| button.primary, |
| button[variant="primary"], |
| .primary { |
| min-height: 42px; |
| background: #d9b84a !important; |
| color: #1c1605 !important; |
| border: none !important; |
| border-radius: 8px !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.38rem !important; |
| font-weight: bold !important; |
| padding: 8px 24px !important; |
| box-shadow: 0 0 15px rgba(217, 184, 74, 0.32) !important; |
| cursor: pointer !important; |
| transition: all 0.2s ease !important; |
| } |
| |
| button.primary:hover { |
| background: #e4c45a !important; |
| box-shadow: 0 0 22px rgba(217, 184, 74, 0.5) !important; |
| transform: translateY(-1.5px) !important; |
| } |
| |
| button.primary:active { |
| transform: translateY(0.5px) !important; |
| } |
| |
| /* Secondary Button — Neon Chalk Green Outline */ |
| button.secondary, |
| button[variant="secondary"], |
| .secondary { |
| min-height: 42px; |
| background: transparent !important; |
| color: #5ebd72 !important; |
| border: 2px dashed #5ebd72 !important; |
| border-radius: 8px !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.38rem !important; |
| font-weight: bold !important; |
| padding: 6px 22px !important; |
| cursor: pointer !important; |
| transition: all 0.2s ease !important; |
| } |
| |
| button.secondary:hover { |
| background: rgba(94, 189, 114, 0.08) !important; |
| box-shadow: 0 0 12px rgba(94, 189, 114, 0.35) !important; |
| border-style: solid !important; |
| } |
| |
| /* ══ PIPELINE STATUS WATERMARK ══ */ |
| #kh-status { |
| min-height: 100px; |
| color: #ffffff !important; |
| padding: 10px !important; |
| } |
| |
| #kh-status h3 { |
| color: #d9b84a !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.38rem !important; |
| margin-top: 0; |
| } |
| |
| #kh-status p { |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.25rem !important; |
| color: rgba(255, 255, 255, 0.85) !important; |
| line-height: 1.4 !important; |
| } |
| |
| #kh-status code { |
| color: #5ebd72 !important; |
| background: rgba(94, 189, 114, 0.1) !important; |
| border: 1px dashed rgba(94, 189, 114, 0.25) !important; |
| } |
| |
| /* ══ STAT BOXES (INGEST STATS) ══ */ |
| .kh-stat { |
| border: 1px solid rgba(255,255,255,0.08) !important; |
| border-radius: 8px !important; |
| padding: 8px 12px !important; |
| background: rgba(0,0,0,0.18) !important; |
| } |
| |
| /* ══ PREVIEW & METADATA SECTIONS ══ */ |
| #kh-text-preview textarea { |
| min-height: 400px !important; |
| font-family: "JetBrains Mono", monospace !important; |
| font-size: 0.86rem !important; |
| background: rgba(0,0,0,0.3) !important; |
| color: #e2e8f0 !important; |
| } |
| |
| #kh-search-results, #kh-answer, #kh-reasoning { |
| min-height: 180px; |
| background: rgba(0, 0, 0, 0.24) !important; |
| border: 1px solid rgba(255,255,255,0.08) !important; |
| border-radius: 8px !important; |
| padding: 16px !important; |
| color: #f1f5f9 !important; |
| } |
| |
| #kh-search-results h3 { |
| color: #5ebd72 !important; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.35rem !important; |
| margin-top: 10px !important; |
| } |
| |
| #kh-reasoning { |
| font-family: "JetBrains Mono", monospace !important; |
| font-size: 0.85rem !important; |
| color: #94a3b8 !important; |
| } |
| |
| /* ══ PROSE / MARKDOWN INTERNALS ══ */ |
| .prose, .markdown, |
| .prose *, .markdown * { |
| color: rgba(255, 255, 255, 0.85) !important; |
| background: transparent !important; |
| } |
| |
| .prose strong, .markdown strong { |
| color: #ffffff !important; |
| } |
| |
| .prose h3, .markdown h3 { |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif !important; |
| font-size: 1.38rem !important; |
| color: #ffffff !important; |
| } |
| |
| code { |
| color: #5ebd72 !important; |
| background: rgba(94,189,114,0.08) !important; |
| border: 1px solid rgba(94,189,114,0.2) !important; |
| border-radius: 4px; |
| padding: 1px 4px; |
| font-family: "JetBrains Mono", monospace; |
| } |
| |
| /* ══ RETRIEVE COLUMN WATERMARK & INDICATORS ══ */ |
| .kh-retrieve-status { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-top: 15px; |
| padding: 0 6px; |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif; |
| font-size: 1.25rem; |
| color: rgba(255,255,255,0.55); |
| } |
| |
| .kh-online-status { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| |
| .kh-dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: rgba(255,255,255,0.2); |
| display: inline-block; |
| } |
| |
| .kh-dot.green { |
| background: #5ebd72; |
| box-shadow: 0 0 6px #5ebd72; |
| } |
| |
| .kh-brackets { |
| font-size: 1.6rem; |
| color: rgba(255, 255, 255, 0.35); |
| font-weight: bold; |
| letter-spacing: 2px; |
| } |
| |
| /* ══ BOTTOM TRAY & COLORED CHALK PIECES ══ */ |
| #kh-bottom-container { |
| margin-top: 15px !important; |
| background: transparent !important; |
| } |
| |
| .kh-bottom-tray { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| padding: 10px 10px 0 10px; |
| position: relative; |
| } |
| |
| /* Wooden Tray Ledge below the board frame */ |
| .kh-bottom-tray::before { |
| content: ""; |
| position: absolute; |
| bottom: -32px; |
| left: -40px; |
| right: -40px; |
| height: 13px; |
| background: linear-gradient(to bottom, #6d3f27, #442516); |
| border-radius: 2px; |
| box-shadow: |
| 0 10px 18px rgba(0, 0, 0, 0.65), |
| inset 0 1px 0 rgba(255, 255, 255, 0.12); |
| z-index: 5; |
| } |
| |
| .kh-chalks { |
| display: flex; |
| gap: 10px; |
| position: absolute; |
| bottom: -31px; |
| left: 20px; |
| z-index: 6; |
| } |
| |
| .kh-chalk { |
| width: 30px; |
| height: 7px; |
| border-radius: 2px; |
| box-shadow: 1px 1px 2px rgba(0,0,0,0.3); |
| } |
| |
| .kh-chalk.white { |
| background: #f1f5f9; |
| transform: rotate(2deg); |
| } |
| |
| .kh-chalk.yellow { |
| background: #e2c362; |
| transform: rotate(-3deg); |
| } |
| |
| .kh-chalk.purple { |
| background: #d8b4fe; |
| transform: rotate(5deg); |
| } |
| |
| .kh-watermark { |
| font-family: 'Gochi Hand', 'Caveat', cursive, sans-serif; |
| font-size: 1.15rem; |
| color: rgba(255, 255, 255, 0.35); |
| margin-bottom: -15px; |
| z-index: 6; |
| } |
| |
| /* ══ SCROLLBARS ══ */ |
| ::-webkit-scrollbar { width: 6px; height: 6px; } |
| ::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); } |
| ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; } |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } |
| |
| /* ══ RESPONSIVE ══ */ |
| @media (max-width: 768px) { |
| #kh-shell { |
| padding: 25px 20px 45px 20px !important; |
| border-width: 10px !important; |
| margin: 15px auto !important; |
| } |
| .kh-bottom-tray::before { |
| left: -20px; |
| right: -20px; |
| } |
| #kh-title h1 { font-size: 2.3rem !important; } |
| } |
| """ |
|
|
