add docs..add this is a joke

styles.css

@@ -1,3 +1,92 @@
+/* Disclaimer Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    backdrop-filter: blur(4px);
+}
+
+.modal-overlay.hidden {
+    display: none;
+}
+
+.modal {
+    background-color: var(--md-sys-color-surface, #fff);
+    color: var(--md-sys-color-on-surface, #1C1B1F);
+    border-radius: 24px;
+    padding: 32px;
+    max-width: 400px;
+    margin: 16px;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    animation: modalIn 0.3s ease-out;
+}
+
+@keyframes modalIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.modal-icon {
+    width: 64px;
+    height: 64px;
+    background-color: #FFF3E0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px;
+}
+
+.modal-icon .material-icons {
+    font-size: 32px;
+    color: #E65100;
+}
+
+.modal h2 {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 16px;
+}
+
+.modal p {
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.modal .modal-sub {
+    font-size: 0.875rem;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    margin-bottom: 24px;
+}
+
+.modal .btn {
+    min-width: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .modal-icon {
+        background-color: #3E2723;
+    }
+
+    .modal-icon .material-icons {
+        color: #FFB74D;
+    }
+}
+
 /* CSS Custom Properties - Material Design 3 inspired */
 :root {
     /* Light theme (default) */