@papernote/ui 1.0.0 → 1.2.0

package/dist/styles.css

@@ -1,5 +1,247 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
+/* Component styles */
+
+/**
+ * Spreadsheet Component Styles
+ *
+ * Custom styling for react-spreadsheet to match notebook-ui's paper aesthetic
+ */
+
+/* Container */
+
+.spreadsheet-container {
+  width: 100%;
+  overflow: auto;
+  background-color: #fafaf9; /* paper-50 */
+  border-radius: 0.5rem;
+  border: 1px solid #e7e5e4; /* stone-200 */
+}
+
+/* Spreadsheet base */
+
+.notebook-spreadsheet {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.875rem;
+  color: #1c1917; /* ink-900 */
+}
+
+/* Table styling */
+
+.notebook-spreadsheet table {
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: #ffffff;
+  width: 100%;
+}
+
+/* Cell styling */
+
+.notebook-spreadsheet td {
+  border: 1px solid #e7e5e4; /* stone-200 */
+  padding: 0;
+  background-color: #ffffff;
+  transition: background-color 0.15s ease;
+}
+
+/* Cell hover */
+
+.notebook-spreadsheet td:hover {
+  background-color: #fafaf9; /* paper-50 */
+}
+
+/* Selected cell */
+
+.notebook-spreadsheet td.Spreadsheet__active-cell {
+  border: 2px solid #334155; /* primary-700 */
+  box-shadow: 0 0 0 1px #334155;
+  background-color: #ffffff;
+  z-index: 10;
+}
+
+/* Header cells (row/column labels) */
+
+.notebook-spreadsheet th {
+  background-color: #f5f5f4; /* stone-100 */
+  color: #57534e; /* ink-600 */
+  border: 1px solid #e7e5e4; /* stone-200 */
+  padding: 0.5rem;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-align: center;
+  position: sticky;
+  z-index: 5;
+}
+
+/* Column headers */
+
+.notebook-spreadsheet thead th {
+  top: 0;
+  z-index: 10;
+}
+
+/* Row headers */
+
+.notebook-spreadsheet tbody th {
+  left: 0;
+  z-index: 5;
+}
+
+/* Corner header (top-left cell) */
+
+.notebook-spreadsheet thead th:first-child {
+  left: 0;
+  z-index: 15;
+}
+
+/* Cell input */
+
+.notebook-spreadsheet .Spreadsheet__data-editor {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  padding: 0.5rem;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+.notebook-spreadsheet .Spreadsheet__data-editor:focus {
+  background-color: #ffffff;
+  border: 2px solid #334155; /* primary-700 */
+  padding: calc(0.5rem - 1px);
+}
+
+/* Cell with formula indicator */
+
+.notebook-spreadsheet .Spreadsheet__cell--formula {
+  font-style: italic;
+  background-color: #f0fdf4; /* success-50 */
+}
+
+/* Read-only cells */
+
+.notebook-spreadsheet .Spreadsheet__cell--readonly {
+  background-color: #f5f5f4; /* stone-100 */
+  color: #78716c; /* ink-500 */
+}
+
+/* Selection highlight */
+
+.notebook-spreadsheet .Spreadsheet__cell--selected {
+  background-color: #e0f2fe; /* primary-100 */
+}
+
+/* Cell error state */
+
+.notebook-spreadsheet .Spreadsheet__cell--error {
+  background-color: #fef2f2; /* error-50 */
+  color: #991b1b; /* error-800 */
+}
+
+/* Cell value display */
+
+.notebook-spreadsheet .Spreadsheet__value {
+  padding: 0.5rem;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Number cells - align right */
+
+.notebook-spreadsheet .Spreadsheet__cell--number .Spreadsheet__value {
+  justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Empty cells */
+
+.notebook-spreadsheet .Spreadsheet__cell--empty .Spreadsheet__value {
+  color: #a8a29e; /* ink-400 */
+}
+
+/* Copy/paste indicator */
+
+.notebook-spreadsheet .Spreadsheet__floating-rect {
+  border: 2px dashed #334155; /* primary-700 */
+  background-color: rgba(51, 65, 85, 0.1);
+  pointer-events: none;
+}
+
+/* Scrollbar styling for webkit browsers */
+
+.spreadsheet-container::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.spreadsheet-container::-webkit-scrollbar-track {
+  background-color: #fafaf9; /* paper-50 */
+  border-radius: 0.5rem;
+}
+
+.spreadsheet-container::-webkit-scrollbar-thumb {
+  background-color: #d6d3d1; /* stone-300 */
+  border-radius: 0.5rem;
+  border: 2px solid #fafaf9;
+}
+
+.spreadsheet-container::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a29e; /* ink-400 */
+}
+
+/* Loading state */
+
+.spreadsheet-container.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Responsive adjustments */
+
+@media (max-width: 768px) {
+  .notebook-spreadsheet {
+    font-size: 0.75rem;
+  }
+
+  .notebook-spreadsheet .Spreadsheet__value {
+    padding: 0.375rem;
+    min-height: 1.75rem;
+  }
+
+  .notebook-spreadsheet .Spreadsheet__data-editor {
+    padding: 0.375rem;
+  }
+
+  .notebook-spreadsheet th {
+    padding: 0.375rem;
+    font-size: 0.6875rem;
+  }
+}
+
+/* Print styles */
+
+@media print {
+  .spreadsheet-container {
+    border: none;
+    overflow: visible;
+  }
+
+  .notebook-spreadsheet td,
+  .notebook-spreadsheet th {
+    border-color: #000;
+  }
+
+  .notebook-spreadsheet .Spreadsheet__active-cell {
+    border: 1px solid #000;
+    box-shadow: none;
+  }
+}
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -108,9 +350,7 @@
   --tw-contain-style:  ;
 }
 
-/*
-! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -544,41 +784,50 @@ h4{
   font-size: 1.125rem;
   line-height: 1.875rem;
 }
+
 .container{
   width: 100%;
 }
+
 @media (min-width: 640px){
 
   .container{
     max-width: 640px;
   }
 }
+
 @media (min-width: 768px){
 
   .container{
     max-width: 768px;
   }
 }
+
 @media (min-width: 1024px){
 
   .container{
     max-width: 1024px;
   }
 }
+
 @media (min-width: 1280px){
 
   .container{
     max-width: 1280px;
   }
 }
+
 @media (min-width: 1536px){
 
   .container{
     max-width: 1536px;
   }
 }
+
 /* Button Styles - Minimal & Professional */
+
 /* Input Styles - Comfortable & Clear */
+
 .input{
   display: block;
   width: 100%;
@@ -597,23 +846,28 @@ h4{
   --tw-text-opacity: 1;
   color: rgb(41 37 36 / var(--tw-text-opacity, 1));
 }
+
 .input::-moz-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity, 1));
 }
+
 .input::placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity, 1));
 }
+
 .input{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 }
+
 .input:hover{
   --tw-border-opacity: 1;
   border-color: rgb(168 162 158 / var(--tw-border-opacity, 1));
 }
+
 .input:focus{
   --tw-border-opacity: 1;
   border-color: rgb(168 165 153 / var(--tw-border-opacity, 1));
@@ -625,6 +879,7 @@ h4{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(168 165 153 / var(--tw-ring-opacity, 1));
 }
+
 .\!label{
   margin-bottom: 0.5rem;
   display: flex;
@@ -635,6 +890,7 @@ h4{
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity, 1));
 }
+
 .label{
   margin-bottom: 0.5rem;
   display: flex;
@@ -645,7 +901,9 @@ h4{
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity, 1));
 }
+
 /* Card Styles - Paper-like */
+
 .card{
   border-radius: 0.75rem;
   border-width: 1px;
@@ -662,12 +920,15 @@ h4{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 }
+
 .card:hover{
   --tw-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.06);
   --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 /* Badge Styles - Muted & Professional */
+
 .\!badge{
   display: inline-flex;
   align-items: center;
@@ -680,6 +941,7 @@ h4{
   line-height: 1.125rem;
   font-weight: 500;
 }
+
 .badge{
   display: inline-flex;
   align-items: center;
@@ -692,10 +954,13 @@ h4{
   line-height: 1.125rem;
   font-weight: 500;
 }
+
 /* Table Styles - Clean & Minimal */
+
 .table{
   min-width: 100%;
 }
+
 .table > :not([hidden]) ~ :not([hidden]){
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -703,10 +968,12 @@ h4{
   --tw-divide-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-divide-opacity, 1));
 }
+
 .table-header{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
 }
+
 .table-header-cell{
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -721,6 +988,7 @@ h4{
   --tw-text-opacity: 1;
   color: rgb(120 113 108 / var(--tw-text-opacity, 1));
 }
+
 .table-cell{
   white-space: nowrap;
   padding-left: 1.5rem;
@@ -732,28 +1000,35 @@ h4{
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity, 1));
 }
+
 .table-row{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .table-row:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
 }
+
 /* Navigation Styles - Notebook-like */
+
 /* Switch Toggle Styles - Refined */
+
 .switch{
   position: relative;
   display: inline-block;
   height: 1.5rem;
   width: 2.75rem;
 }
+
 .switch input{
   height: 0px;
   width: 0px;
   opacity: 0;
 }
+
 .slider{
   position: absolute;
   top: 0px;
@@ -768,6 +1043,7 @@ h4{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 }
+
 .slider:before{
   position: absolute;
   left: 0.125rem;
@@ -786,16 +1062,23 @@ h4{
   --tw-content: '';
   content: var(--tw-content);
 }
+
 input:checked + .slider{
   --tw-bg-opacity: 1;
   background-color: rgb(139 136 120 / var(--tw-bg-opacity, 1));
 }
+
 input:checked + .slider:before{
   --tw-translate-x: 1.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 /* Stat Card Styles - Paper-like */
-/* Notebook Page Container - Creates bounded page effect */
+
+/* Notebook Page Container - Creates bounded page effect
+     NOTE: This class is deprecated - Page component now handles responsive layout via props
+     Keeping for backward compatibility only */
+
 .notebook-page{
   border-radius: 0.125rem;
   border-left-width: 4px;
@@ -808,15 +1091,54 @@ input:checked + .slider:before{
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     max-width: 1400px;
-    margin: 1rem auto 1rem 1rem; /* Top margin, auto right for anchoring, bottom margin, small left margin */
-    padding: 3rem 4rem 3rem 5rem; /* Extra left padding for binding margin */
-    min-height: calc(100vh - 12rem);
+    /* Responsive margins - fixed left/top, responsive right/bottom */
+    margin-top: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    /* Responsive padding - fixed left/top, responsive right/bottom */
+    padding-top: 3rem;
+    padding-left: 5rem; /* Extra left padding for binding margin */
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    min-height: calc(100vh - 2rem);
     position: relative;
 }
+
+/* Responsive padding/margin increases on larger screens */
+
+@media (min-width: 640px) {
+    .notebook-page {
+      margin-right: 1.5rem;
+      margin-bottom: 2rem;
+      padding-right: 2rem;
+      padding-bottom: 2rem;
+    }
+  }
+
+@media (min-width: 768px) {
+    .notebook-page {
+      margin-right: 2rem;
+      margin-bottom: 2rem;
+      padding-right: 3rem;
+      padding-bottom: 3rem;
+    }
+  }
+
+@media (min-width: 1024px) {
+    .notebook-page {
+      margin-right: auto; /* Center on large screens */
+      padding-right: 4rem;
+      padding-bottom: 4rem;
+    }
+  }
+
 /* Notebook binding effect on sidebar */
+
 .notebook-binding {
     position: relative;
   }
+
 .notebook-binding::after {
     content: '';
     position: absolute;
@@ -833,17 +1155,22 @@ input:checked + .slider:before{
     );
     box-shadow: 2px 0 4px rgba(0,0,0,0.04);
   }
+
 /* Ruled lines for notebook page (very subtle) */
+
 .notebook-ruled {
     background-image:
       linear-gradient(transparent 0%, transparent calc(100% - 1px), rgba(231, 229, 228, 0.3) 100%);
     background-size: 100% 2rem;
     background-position: 0 1.5rem;
   }
+
 /* Left margin line for notebook page */
+
 .notebook-margin {
     position: relative;
   }
+
 .notebook-margin::before {
     content: '';
     position: absolute;
@@ -853,8 +1180,11 @@ input:checked + .slider:before{
     width: 1px;
     background-color: rgba(239, 68, 68, 0.05); /* Very subtle red margin line */
   }
+
 /* Page Navigation / TOC - Sits in gutter between sidebar and page */
+
 /* Tab-style navigation items */
+
 .page-nav-item.active{
   --tw-border-opacity: 1;
   border-color: rgb(139 136 120 / var(--tw-border-opacity, 1));
@@ -864,7 +1194,9 @@ input:checked + .slider:before{
   --tw-text-opacity: 1;
   color: rgb(42 41 34 / var(--tw-text-opacity, 1));
 }
+
 /* Alternative: Dot navigation style (simpler) */
+
 .page-nav-dot{
   pointer-events: auto;
   height: 0.5rem;
@@ -877,17 +1209,20 @@ input:checked + .slider:before{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 }
+
 .page-nav-dot:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(168 165 153 / var(--tw-bg-opacity, 1));
     transform: scale(1.2);
 }
+
 .page-nav-dot.active{
   height: 0.625rem;
   width: 0.625rem;
   --tw-bg-opacity: 1;
   background-color: rgb(139 136 120 / var(--tw-bg-opacity, 1));
 }
+
 .sr-only{
   position: absolute;
   width: 1px;
@@ -899,783 +1234,1043 @@ input:checked + .slider:before{
   white-space: nowrap;
   border-width: 0;
 }
+
 .pointer-events-none{
   pointer-events: none;
 }
+
 .pointer-events-auto{
   pointer-events: auto;
 }
+
 .visible{
   visibility: visible;
 }
+
 .invisible{
   visibility: hidden;
 }
+
 .collapse{
   visibility: collapse;
 }
+
 .static{
   position: static;
 }
+
 .fixed{
   position: fixed;
 }
+
 .absolute{
   position: absolute;
 }
+
 .relative{
   position: relative;
 }
+
 .sticky{
   position: sticky;
 }
+
 .inset-0{
   inset: 0px;
 }
+
 .inset-y-0{
   top: 0px;
   bottom: 0px;
 }
+
 .-bottom-0\.5{
   bottom: -0.125rem;
 }
+
 .-right-0\.5{
   right: -0.125rem;
 }
+
 .-right-1{
   right: -0.25rem;
 }
+
 .-top-1{
   top: -0.25rem;
 }
+
 .bottom-0{
   bottom: 0px;
 }
+
 .bottom-1{
   bottom: 0.25rem;
 }
+
 .bottom-6{
   bottom: 1.5rem;
 }
+
 .bottom-full{
   bottom: 100%;
 }
+
 .left-0{
   left: 0px;
 }
+
 .left-0\.5{
   left: 0.125rem;
 }
+
 .left-1\/2{
   left: 50%;
 }
+
 .left-2{
   left: 0.5rem;
 }
+
 .left-3{
   left: 0.75rem;
 }
+
 .left-5{
   left: 1.25rem;
 }
+
 .left-6{
   left: 1.5rem;
 }
+
 .left-full{
   left: 100%;
 }
+
 .right-0{
   right: 0px;
 }
+
 .right-2{
   right: 0.5rem;
 }
+
 .right-3{
   right: 0.75rem;
 }
+
 .right-4{
   right: 1rem;
 }
+
 .right-6{
   right: 1.5rem;
 }
+
 .right-full{
   right: 100%;
 }
+
 .top-0{
   top: 0px;
 }
+
 .top-0\.5{
   top: 0.125rem;
 }
+
 .top-1\/2{
   top: 50%;
 }
+
 .top-10{
   top: 2.5rem;
 }
+
 .top-2{
   top: 0.5rem;
 }
+
 .top-20{
   top: 5rem;
 }
+
 .top-4{
   top: 1rem;
 }
+
 .top-full{
   top: 100%;
 }
+
 .z-10{
   z-index: 10;
 }
+
 .z-20{
   z-index: 20;
 }
+
 .z-50{
   z-index: 50;
 }
+
 .z-\[9998\]{
   z-index: 9998;
 }
+
 .z-\[9999\]{
   z-index: 9999;
 }
+
 .col-span-1{
   grid-column: span 1 / span 1;
 }
+
 .col-span-10{
   grid-column: span 10 / span 10;
 }
+
 .col-span-11{
   grid-column: span 11 / span 11;
 }
+
 .col-span-12{
   grid-column: span 12 / span 12;
 }
+
 .col-span-2{
   grid-column: span 2 / span 2;
 }
+
 .col-span-3{
   grid-column: span 3 / span 3;
 }
+
 .col-span-4{
   grid-column: span 4 / span 4;
 }
+
 .col-span-5{
   grid-column: span 5 / span 5;
 }
+
 .col-span-6{
   grid-column: span 6 / span 6;
 }
+
 .col-span-7{
   grid-column: span 7 / span 7;
 }
+
 .col-span-8{
   grid-column: span 8 / span 8;
 }
+
 .col-span-9{
   grid-column: span 9 / span 9;
 }
+
 .row-span-1{
   grid-row: span 1 / span 1;
 }
+
 .row-span-2{
   grid-row: span 2 / span 2;
 }
+
 .row-span-3{
   grid-row: span 3 / span 3;
 }
+
 .row-span-4{
   grid-row: span 4 / span 4;
 }
+
 .row-span-5{
   grid-row: span 5 / span 5;
 }
+
 .row-span-6{
   grid-row: span 6 / span 6;
 }
+
 .mx-1{
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+
 .mx-2{
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+
 .mx-4{
   margin-left: 1rem;
   margin-right: 1rem;
 }
+
 .mx-6{
   margin-left: 1.5rem;
   margin-right: 1.5rem;
 }
+
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
+
 .my-1{
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+
 .my-2{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+
 .my-4{
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+
 .my-6{
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
+
 .-mb-\[1px\]{
   margin-bottom: -1px;
 }
+
 .-mb-px{
   margin-bottom: -1px;
 }
+
 .-ml-3{
   margin-left: -0.75rem;
 }
+
 .-ml-px{
   margin-left: -1px;
 }
+
 .-mr-\[1px\]{
   margin-right: -1px;
 }
+
 .mb-1{
   margin-bottom: 0.25rem;
 }
+
 .mb-1\.5{
   margin-bottom: 0.375rem;
 }
+
 .mb-2{
   margin-bottom: 0.5rem;
 }
+
 .mb-3{
   margin-bottom: 0.75rem;
 }
+
 .mb-4{
   margin-bottom: 1rem;
 }
+
 .mb-6{
   margin-bottom: 1.5rem;
 }
+
 .mb-8{
   margin-bottom: 2rem;
 }
+
 .ml-1{
   margin-left: 0.25rem;
 }
+
 .ml-1\.5{
   margin-left: 0.375rem;
 }
+
 .ml-2{
   margin-left: 0.5rem;
 }
+
 .ml-3{
   margin-left: 0.75rem;
 }
+
 .ml-4{
   margin-left: 1rem;
 }
+
 .ml-5{
   margin-left: 1.25rem;
 }
+
 .ml-auto{
   margin-left: auto;
 }
+
 .mr-1{
   margin-right: 0.25rem;
 }
+
 .mr-2{
   margin-right: 0.5rem;
 }
+
+.mr-4{
+  margin-right: 1rem;
+}
+
 .mt-0\.5{
   margin-top: 0.125rem;
 }
+
 .mt-1{
   margin-top: 0.25rem;
 }
+
 .mt-1\.5{
   margin-top: 0.375rem;
 }
+
 .mt-2{
   margin-top: 0.5rem;
 }
+
 .mt-3{
   margin-top: 0.75rem;
 }
+
 .mt-4{
   margin-top: 1rem;
 }
+
 .mt-5{
   margin-top: 1.25rem;
 }
+
 .mt-6{
   margin-top: 1.5rem;
 }
+
 .mt-8{
   margin-top: 2rem;
 }
+
 .mt-\[-30px\]{
   margin-top: -30px;
 }
+
 .mt-auto{
   margin-top: auto;
 }
+
 .line-clamp-1{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
+
 .line-clamp-2{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+
 .line-clamp-4{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
+
 .line-clamp-5{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
 }
+
 .line-clamp-6{
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 6;
 }
+
 .block{
   display: block;
 }
+
 .inline-block{
   display: inline-block;
 }
+
 .inline{
   display: inline;
 }
+
 .flex{
   display: flex;
 }
+
 .inline-flex{
   display: inline-flex;
 }
+
 .table{
   display: table;
 }
+
 .table-cell{
   display: table-cell;
 }
+
 .table-row{
   display: table-row;
 }
+
 .grid{
   display: grid;
 }
+
 .hidden{
   display: none;
 }
+
 .h-0{
   height: 0px;
 }
+
 .h-0\.5{
   height: 0.125rem;
 }
+
 .h-1{
   height: 0.25rem;
 }
+
 .h-1\.5{
   height: 0.375rem;
 }
+
 .h-10{
   height: 2.5rem;
 }
+
 .h-12{
   height: 3rem;
 }
+
 .h-16{
   height: 4rem;
 }
+
 .h-2{
   height: 0.5rem;
 }
+
 .h-2\.5{
   height: 0.625rem;
 }
+
 .h-24{
   height: 6rem;
 }
+
 .h-3{
   height: 0.75rem;
 }
+
 .h-3\.5{
   height: 0.875rem;
 }
+
 .h-32{
   height: 8rem;
 }
+
 .h-4{
   height: 1rem;
 }
+
 .h-5{
   height: 1.25rem;
 }
+
 .h-6{
   height: 1.5rem;
 }
+
 .h-64{
   height: 16rem;
 }
+
 .h-7{
   height: 1.75rem;
 }
+
 .h-8{
   height: 2rem;
 }
+
 .h-9{
   height: 2.25rem;
 }
+
 .h-96{
   height: 24rem;
 }
+
 .h-\[18px\]{
   height: 18px;
 }
+
 .h-\[32rem\]{
   height: 32rem;
 }
+
 .h-auto{
   height: auto;
 }
+
 .h-full{
   height: 100%;
 }
+
 .h-px{
   height: 1px;
 }
+
 .h-screen{
   height: 100vh;
 }
+
 .max-h-32{
   max-height: 8rem;
 }
+
 .max-h-48{
   max-height: 12rem;
 }
+
 .max-h-60{
   max-height: 15rem;
 }
+
 .max-h-64{
   max-height: 16rem;
 }
+
 .max-h-\[400px\]{
   max-height: 400px;
 }
+
 .max-h-\[600px\]{
   max-height: 600px;
 }
+
 .min-h-0{
   min-height: 0px;
 }
+
 .min-h-\[200px\]{
   min-height: 200px;
 }
+
 .min-h-\[400px\]{
   min-height: 400px;
 }
+
 .min-h-\[40px\]{
   min-height: 40px;
 }
+
 .min-h-\[42px\]{
   min-height: 42px;
 }
+
+.min-h-\[calc\(100vh-2rem\)\]{
+  min-height: calc(100vh - 2rem);
+}
+
 .min-h-screen{
   min-height: 100vh;
 }
+
 .w-0\.5{
   width: 0.125rem;
 }
+
 .w-1{
   width: 0.25rem;
 }
+
 .w-1\.5{
   width: 0.375rem;
 }
+
 .w-1\/2{
   width: 50%;
 }
+
 .w-10{
   width: 2.5rem;
 }
+
 .w-11{
   width: 2.75rem;
 }
+
 .w-12{
   width: 3rem;
 }
+
 .w-14{
   width: 3.5rem;
 }
+
 .w-16{
   width: 4rem;
 }
+
 .w-2{
   width: 0.5rem;
 }
+
 .w-2\.5{
   width: 0.625rem;
 }
+
 .w-20{
   width: 5rem;
 }
+
 .w-24{
   width: 6rem;
 }
+
 .w-3{
   width: 0.75rem;
 }
+
 .w-3\.5{
   width: 0.875rem;
 }
+
 .w-3\/4{
   width: 75%;
 }
+
 .w-4{
   width: 1rem;
 }
+
 .w-4\/6{
   width: 66.666667%;
 }
+
 .w-48{
   width: 12rem;
 }
+
 .w-5{
   width: 1.25rem;
 }
+
 .w-5\/6{
   width: 83.333333%;
 }
+
 .w-56{
   width: 14rem;
 }
+
 .w-6{
   width: 1.5rem;
 }
+
 .w-64{
   width: 16rem;
 }
+
 .w-7{
   width: 1.75rem;
 }
+
 .w-72{
   width: 18rem;
 }
+
 .w-8{
   width: 2rem;
 }
+
 .w-80{
   width: 20rem;
 }
+
 .w-9{
   width: 2.25rem;
 }
+
 .w-96{
   width: 24rem;
 }
+
 .w-\[32rem\]{
   width: 32rem;
 }
+
 .w-auto{
   width: auto;
 }
+
 .w-fit{
   width: -moz-fit-content;
   width: fit-content;
 }
+
 .w-full{
   width: 100%;
 }
+
 .w-px{
   width: 1px;
 }
+
 .w-screen{
   width: 100vw;
 }
+
 .min-w-0{
   min-width: 0px;
 }
+
 .min-w-32{
   min-width: 8rem;
 }
+
 .min-w-5{
   min-width: 1.25rem;
 }
+
 .min-w-64{
   min-width: 16rem;
 }
+
 .min-w-\[150px\]{
   min-width: 150px;
 }
+
 .min-w-\[16px\]{
   min-width: 16px;
 }
+
 .min-w-\[18px\]{
   min-width: 18px;
 }
+
 .min-w-\[200px\]{
   min-width: 200px;
 }
+
 .min-w-\[20px\]{
   min-width: 20px;
 }
+
 .min-w-\[250px\]{
   min-width: 250px;
 }
+
 .min-w-\[320px\]{
   min-width: 320px;
 }
+
+.min-w-full{
+  min-width: 100%;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
+
 .max-w-4xl{
   max-width: 56rem;
 }
+
+.max-w-5xl{
+  max-width: 64rem;
+}
+
 .max-w-6xl{
   max-width: 72rem;
 }
+
 .max-w-7xl{
   max-width: 80rem;
 }
+
 .max-w-\[200px\]{
   max-width: 200px;
 }
+
 .max-w-\[calc\(100\%-0\.25rem\)\]{
   max-width: calc(100% - 0.25rem);
 }
+
 .max-w-full{
   max-width: 100%;
 }
+
 .max-w-lg{
   max-width: 32rem;
 }
+
 .max-w-md{
   max-width: 28rem;
 }
+
 .max-w-none{
   max-width: none;
 }
+
 .max-w-sm{
   max-width: 24rem;
 }
+
 .max-w-xl{
   max-width: 36rem;
 }
+
 .max-w-xs{
   max-width: 20rem;
 }
+
 .flex-1{
   flex: 1 1 0%;
 }
+
 .flex-shrink-0{
   flex-shrink: 0;
 }
+
 .shrink{
   flex-shrink: 1;
 }
+
 .grow{
   flex-grow: 1;
 }
+
 .border-collapse{
   border-collapse: collapse;
 }
+
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .-translate-y-1\/2{
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-x-0{
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-x-4{
   --tw-translate-x: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-x-5{
   --tw-translate-x: 1.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-x-7{
   --tw-translate-x: 1.75rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-x-full{
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-y-0{
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-y-full{
   --tw-translate-y: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .-rotate-90{
   --tw-rotate: -90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .rotate-0{
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .rotate-180{
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .rotate-90{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .scale-100{
   --tw-scale-x: 1;
   --tw-scale-y: 1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .scale-105{
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .scale-110{
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 @keyframes bounce{
 
   0%, 100%{
@@ -1688,9 +2283,11 @@ input:checked + .slider:before{
     animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
+
 .animate-bounce{
   animation: bounce 1s infinite;
 }
+
 @keyframes fadeIn{
 
   0%{
@@ -1701,18 +2298,22 @@ input:checked + .slider:before{
     opacity: 1;
   }
 }
+
 .animate-fade-in{
   animation: fadeIn 0.5s ease-in-out;
 }
+
 @keyframes pulse{
 
   50%{
     opacity: .5;
   }
 }
+
 .animate-pulse{
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
 @keyframes scaleIn{
 
   0%{
@@ -1725,9 +2326,11 @@ input:checked + .slider:before{
     opacity: 1;
   }
 }
+
 .animate-scale-in{
   animation: scaleIn 0.2s ease-out;
 }
+
 @keyframes shimmer{
 
   0%{
@@ -1738,9 +2341,11 @@ input:checked + .slider:before{
     transform: translateX(100%);
   }
 }
+
 .animate-shimmer{
   animation: shimmer 2s linear infinite;
 }
+
 @keyframes slideIn{
 
   0%{
@@ -1753,9 +2358,11 @@ input:checked + .slider:before{
     opacity: 1;
   }
 }
+
 .animate-slide-in{
   animation: slideIn 0.3s ease-out;
 }
+
 @keyframes slideInRight{
 
   0%{
@@ -1768,1445 +2375,1912 @@ input:checked + .slider:before{
     opacity: 1;
   }
 }
+
 .animate-slide-in-right{
   animation: slideInRight 0.3s ease-out;
 }
+
 @keyframes spin{
 
   to{
     transform: rotate(360deg);
   }
 }
+
 .animate-spin{
   animation: spin 1s linear infinite;
 }
+
 .cursor-col-resize{
   cursor: col-resize;
 }
+
 .cursor-default{
   cursor: default;
 }
+
 .cursor-grab{
   cursor: grab;
 }
+
 .cursor-move{
   cursor: move;
 }
+
 .cursor-not-allowed{
   cursor: not-allowed;
 }
+
 .cursor-pointer{
   cursor: pointer;
 }
+
 .select-none{
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
+
 .resize-none{
   resize: none;
 }
+
 .resize-y{
   resize: vertical;
 }
+
 .resize-x{
   resize: horizontal;
 }
+
 .resize{
   resize: both;
 }
+
+.list-inside{
+  list-style-position: inside;
+}
+
+.list-disc{
+  list-style-type: disc;
+}
+
 .grid-cols-1{
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+
 .grid-cols-12{
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
+
 .grid-cols-2{
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+
 .grid-cols-3{
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+
 .grid-cols-4{
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
+
 .grid-cols-6{
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
+
 .grid-cols-7{
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
+
 .flex-row{
   flex-direction: row;
 }
+
 .flex-row-reverse{
   flex-direction: row-reverse;
 }
+
 .flex-col{
   flex-direction: column;
 }
+
 .flex-wrap{
   flex-wrap: wrap;
 }
+
 .items-start{
   align-items: flex-start;
 }
+
 .items-end{
   align-items: flex-end;
 }
+
 .items-center{
   align-items: center;
 }
+
 .items-stretch{
   align-items: stretch;
 }
+
 .justify-start{
   justify-content: flex-start;
 }
+
 .justify-end{
   justify-content: flex-end;
 }
+
 .justify-center{
   justify-content: center;
 }
+
 .justify-between{
   justify-content: space-between;
 }
+
 .justify-around{
   justify-content: space-around;
 }
+
 .gap-0{
   gap: 0px;
 }
+
 .gap-0\.5{
   gap: 0.125rem;
 }
+
 .gap-1{
   gap: 0.25rem;
 }
+
 .gap-1\.5{
   gap: 0.375rem;
 }
+
 .gap-12{
   gap: 3rem;
 }
+
 .gap-2{
   gap: 0.5rem;
 }
+
 .gap-2\.5{
   gap: 0.625rem;
 }
+
 .gap-3{
   gap: 0.75rem;
 }
+
 .gap-4{
   gap: 1rem;
 }
+
 .gap-6{
   gap: 1.5rem;
 }
+
 .gap-8{
   gap: 2rem;
 }
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-12 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(3rem * var(--tw-space-x-reverse));
   margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-3 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-6 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-8 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
+
 .space-y-12 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(3rem * var(--tw-space-y-reverse));
 }
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+
 .space-y-3 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+
 .space-y-6 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+
 .space-y-8 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
+
 .overflow-auto{
   overflow: auto;
 }
+
 .overflow-hidden{
   overflow: hidden;
 }
+
 .overflow-visible{
   overflow: visible;
 }
+
 .overflow-x-auto{
   overflow-x: auto;
 }
+
 .overflow-y-auto{
   overflow-y: auto;
 }
+
 .overflow-y-visible{
   overflow-y: visible;
 }
+
 .truncate{
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .whitespace-nowrap{
   white-space: nowrap;
 }
+
 .whitespace-pre-line{
   white-space: pre-line;
 }
+
 .whitespace-pre-wrap{
   white-space: pre-wrap;
 }
+
 .break-words{
   overflow-wrap: break-word;
 }
+
 .break-all{
   word-break: break-all;
 }
+
 .\!rounded{
   border-radius: 0.25rem !important;
 }
+
 .rounded{
   border-radius: 0.25rem;
 }
+
 .rounded-full{
   border-radius: 9999px;
 }
+
 .rounded-lg{
   border-radius: 0.5rem;
 }
+
 .rounded-md{
   border-radius: 0.375rem;
 }
+
 .rounded-none{
   border-radius: 0px;
 }
+
 .rounded-sm{
   border-radius: 0.125rem;
 }
+
 .rounded-xl{
   border-radius: 0.75rem;
 }
+
 .rounded-b-lg{
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
 }
+
 .rounded-l-lg{
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
 }
+
 .rounded-l-md{
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
+
 .rounded-r-lg{
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
 }
+
 .rounded-r-md{
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
+
 .rounded-t-2xl{
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
+
 .rounded-t-lg{
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
+
 .border{
   border-width: 1px;
 }
+
 .border-2{
   border-width: 2px;
 }
+
 .border-4{
   border-width: 4px;
 }
+
 .border-b{
   border-bottom-width: 1px;
 }
+
 .border-b-0{
   border-bottom-width: 0px;
 }
+
 .border-b-2{
   border-bottom-width: 2px;
 }
+
 .border-b-4{
   border-bottom-width: 4px;
 }
+
 .border-l{
   border-left-width: 1px;
 }
+
 .border-l-0{
   border-left-width: 0px;
 }
+
 .border-l-2{
   border-left-width: 2px;
 }
+
 .border-l-4{
   border-left-width: 4px;
 }
+
 .border-r{
   border-right-width: 1px;
 }
+
 .border-r-0{
   border-right-width: 0px;
 }
+
 .border-r-2{
   border-right-width: 2px;
 }
+
 .border-r-4{
   border-right-width: 4px;
 }
+
 .border-t{
   border-top-width: 1px;
 }
+
 .border-t-2{
   border-top-width: 2px;
 }
+
 .border-t-4{
   border-top-width: 4px;
 }
+
 .border-dashed{
   border-style: dashed;
 }
+
 .border-none{
   border-style: none;
 }
+
 .border-accent-200{
   --tw-border-opacity: 1;
   border-color: rgb(232 231 224 / var(--tw-border-opacity, 1));
 }
+
 .border-accent-300{
   --tw-border-opacity: 1;
   border-color: rgb(212 210 200 / var(--tw-border-opacity, 1));
 }
+
 .border-accent-400{
   --tw-border-opacity: 1;
   border-color: rgb(168 165 153 / var(--tw-border-opacity, 1));
 }
+
 .border-accent-500{
   --tw-border-opacity: 1;
   border-color: rgb(139 136 120 / var(--tw-border-opacity, 1));
 }
+
 .border-accent-600{
   --tw-border-opacity: 1;
   border-color: rgb(110 109 94 / var(--tw-border-opacity, 1));
 }
+
 .border-blue-500{
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
+
 .border-current{
   border-color: currentColor;
 }
+
 .border-error-200{
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
+
 .border-error-300{
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
 }
+
 .border-error-400{
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
 }
+
 .border-error-500{
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
+
 .border-gray-100{
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
 }
+
 .border-gray-200{
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
+
 .border-ink-200{
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
 }
+
 .border-ink-300{
   --tw-border-opacity: 1;
   border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
 }
+
 .border-paper-200{
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
 }
+
 .border-paper-300{
   --tw-border-opacity: 1;
   border-color: rgb(214 211 209 / var(--tw-border-opacity, 1));
 }
+
 .border-paper-300\/80{
   border-color: rgb(214 211 209 / 0.8);
 }
+
 .border-primary-200{
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
 }
+
 .border-primary-200\/80{
   border-color: rgb(226 232 240 / 0.8);
 }
+
 .border-primary-300{
   --tw-border-opacity: 1;
   border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
 }
+
 .border-primary-500{
   --tw-border-opacity: 1;
   border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
 }
+
 .border-primary-600{
   --tw-border-opacity: 1;
   border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
 }
+
 .border-slate-200\/80{
   border-color: rgb(226 232 240 / 0.8);
 }
+
+.border-stone-200{
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
+}
+
 .border-success-200{
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
 }
+
 .border-success-200\/80{
   border-color: rgb(187 247 208 / 0.8);
 }
+
 .border-success-300{
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
 }
+
 .border-success-400{
   --tw-border-opacity: 1;
   border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
 }
+
 .border-success-500{
   --tw-border-opacity: 1;
   border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
 }
+
 .border-transparent{
   border-color: transparent;
 }
+
 .border-warning-200{
   --tw-border-opacity: 1;
   border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
 }
+
 .border-warning-300{
   --tw-border-opacity: 1;
   border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
 }
+
 .border-warning-400{
   --tw-border-opacity: 1;
   border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
 }
+
 .border-warning-500{
   --tw-border-opacity: 1;
   border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
 }
+
 .border-white{
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+
 .border-b-ink-800{
   --tw-border-opacity: 1;
   border-bottom-color: rgb(41 37 36 / var(--tw-border-opacity, 1));
 }
+
 .border-l-ink-800{
   --tw-border-opacity: 1;
   border-left-color: rgb(41 37 36 / var(--tw-border-opacity, 1));
 }
+
 .border-r-ink-800{
   --tw-border-opacity: 1;
   border-right-color: rgb(41 37 36 / var(--tw-border-opacity, 1));
 }
+
 .border-t-ink-800{
   --tw-border-opacity: 1;
   border-top-color: rgb(41 37 36 / var(--tw-border-opacity, 1));
 }
+
 .border-t-transparent{
   border-top-color: transparent;
 }
+
 .bg-accent-100{
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 240 / var(--tw-bg-opacity, 1));
 }
+
 .bg-accent-200{
   --tw-bg-opacity: 1;
   background-color: rgb(232 231 224 / var(--tw-bg-opacity, 1));
 }
+
 .bg-accent-50{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 248 / var(--tw-bg-opacity, 1));
 }
+
 .bg-accent-50\/50{
   background-color: rgb(250 250 248 / 0.5);
 }
+
 .bg-accent-500{
   --tw-bg-opacity: 1;
   background-color: rgb(139 136 120 / var(--tw-bg-opacity, 1));
 }
+
 .bg-accent-600{
   --tw-bg-opacity: 1;
   background-color: rgb(110 109 94 / var(--tw-bg-opacity, 1));
 }
+
 .bg-black{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
+
 .bg-black\/50{
   background-color: rgb(0 0 0 / 0.5);
 }
+
 .bg-current{
   background-color: currentColor;
 }
+
 .bg-error-100{
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
 }
+
 .bg-error-200{
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
+
 .bg-error-400{
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
 }
+
 .bg-error-50{
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
+
 .bg-error-500{
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
+
 .bg-error-600{
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
 }
+
 .bg-gray-50{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-100{
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-200{
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-300{
   --tw-bg-opacity: 1;
   background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-400{
   --tw-bg-opacity: 1;
   background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-50{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-500{
   --tw-bg-opacity: 1;
   background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-600{
   --tw-bg-opacity: 1;
   background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-800{
   --tw-bg-opacity: 1;
   background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
 }
+
 .bg-ink-900{
   --tw-bg-opacity: 1;
   background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
 }
+
 .bg-paper-100{
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
 }
+
 .bg-paper-100\/80{
   background-color: rgb(245 245 244 / 0.8);
 }
+
 .bg-paper-200{
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
 }
+
 .bg-paper-300{
   --tw-bg-opacity: 1;
   background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
 }
+
 .bg-paper-50{
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
 }
+
 .bg-primary-100{
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
 }
+
 .bg-primary-200{
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
+
 .bg-primary-50{
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
 }
+
 .bg-primary-50\/80{
   background-color: rgb(248 250 252 / 0.8);
 }
+
 .bg-primary-500{
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
 }
+
 .bg-primary-600{
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
 }
+
 .bg-slate-50\/80{
   background-color: rgb(248 250 252 / 0.8);
 }
+
 .bg-success-100{
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
 }
+
 .bg-success-200{
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
 }
+
 .bg-success-400{
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
 }
+
 .bg-success-50{
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
 }
+
 .bg-success-50\/80{
   background-color: rgb(240 253 244 / 0.8);
 }
+
 .bg-success-500{
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
 }
+
 .bg-success-600{
   --tw-bg-opacity: 1;
   background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
 }
+
 .bg-transparent{
   background-color: transparent;
 }
+
 .bg-warning-100{
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
+
 .bg-warning-200{
   --tw-bg-opacity: 1;
   background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
 }
+
 .bg-warning-50{
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
 }
+
 .bg-warning-500{
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
 }
+
 .bg-warning-600{
   --tw-bg-opacity: 1;
   background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
 }
+
 .bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+
 .bg-white\/90{
   background-color: rgb(255 255 255 / 0.9);
 }
+
 .bg-opacity-50{
   --tw-bg-opacity: 0.5;
 }
+
 .bg-opacity-75{
   --tw-bg-opacity: 0.75;
 }
+
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
+
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+
 .bg-subtle-grain{
   background-image: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3e%3c/svg%3e");
 }
+
 .from-accent-400{
   --tw-gradient-from: #a8a599 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(168 165 153 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .from-error-50{
   --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .from-primary-50{
   --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .from-success-50{
   --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .from-warning-50{
   --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .to-accent-600{
   --tw-gradient-to: #6e6d5e var(--tw-gradient-to-position);
 }
+
 .to-error-100{
   --tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);
 }
+
 .to-primary-100{
   --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
 }
+
 .to-success-100{
   --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);
 }
+
 .to-warning-100{
   --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
 }
+
 .fill-current{
   fill: currentColor;
 }
+
 .stroke-accent-100{
   stroke: #f5f5f0;
 }
+
 .stroke-accent-600{
   stroke: #6e6d5e;
 }
+
 .stroke-error-100{
   stroke: #fee2e2;
 }
+
 .stroke-error-500{
   stroke: #ef4444;
 }
+
 .stroke-success-100{
   stroke: #dcfce7;
 }
+
 .stroke-success-500{
   stroke: #10b981;
 }
+
 .stroke-warning-100{
   stroke: #fef3c7;
 }
+
 .stroke-warning-500{
   stroke: #f59e0b;
 }
+
 .object-cover{
   -o-object-fit: cover;
      object-fit: cover;
 }
+
+.p-0{
+  padding: 0px;
+}
+
 .p-0\.5{
   padding: 0.125rem;
 }
+
 .p-1{
   padding: 0.25rem;
 }
+
 .p-1\.5{
   padding: 0.375rem;
 }
+
 .p-2{
   padding: 0.5rem;
 }
+
 .p-2\.5{
   padding: 0.625rem;
 }
+
 .p-3{
   padding: 0.75rem;
 }
+
 .p-4{
   padding: 1rem;
 }
+
 .p-5{
   padding: 1.25rem;
 }
+
 .p-6{
   padding: 1.5rem;
 }
+
 .p-8{
   padding: 2rem;
 }
+
 .px-0\.5{
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
+
 .px-1{
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+
 .px-1\.5{
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
+
 .px-2{
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+
 .px-2\.5{
   padding-left: 0.625rem;
   padding-right: 0.625rem;
 }
+
 .px-3{
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+
 .px-4{
   padding-left: 1rem;
   padding-right: 1rem;
 }
+
 .px-5{
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+
 .px-6{
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+
 .py-0\.5{
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
+
 .py-1{
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+
 .py-1\.5{
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
+
 .py-16{
   padding-top: 4rem;
   padding-bottom: 4rem;
 }
+
 .py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+
 .py-2\.5{
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+
 .py-3{
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+
 .py-4{
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+
 .py-6{
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+
 .py-8{
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+
+.pb-0{
+  padding-bottom: 0px;
+}
+
+.pb-12{
+  padding-bottom: 3rem;
+}
+
+.pb-16{
+  padding-bottom: 4rem;
+}
+
 .pb-20{
   padding-bottom: 5rem;
 }
+
 .pb-4{
   padding-bottom: 1rem;
 }
+
 .pb-6{
   padding-bottom: 1.5rem;
 }
+
+.pb-8{
+  padding-bottom: 2rem;
+}
+
+.pl-0{
+  padding-left: 0px;
+}
+
 .pl-10{
   padding-left: 2.5rem;
 }
+
 .pl-11{
   padding-left: 2.75rem;
 }
+
 .pl-12{
   padding-left: 3rem;
 }
+
 .pl-2{
   padding-left: 0.5rem;
 }
+
+.pl-20{
+  padding-left: 5rem;
+}
+
+.pl-24{
+  padding-left: 6rem;
+}
+
 .pl-3{
   padding-left: 0.75rem;
 }
+
 .pl-4{
   padding-left: 1rem;
 }
+
+.pl-6{
+  padding-left: 1.5rem;
+}
+
 .pl-8{
   padding-left: 2rem;
 }
+
 .pl-9{
   padding-left: 2.25rem;
 }
+
+.pr-0{
+  padding-right: 0px;
+}
+
 .pr-10{
   padding-right: 2.5rem;
 }
+
+.pr-16{
+  padding-right: 4rem;
+}
+
 .pr-2{
   padding-right: 0.5rem;
 }
+
 .pr-20{
   padding-right: 5rem;
 }
+
 .pr-3{
   padding-right: 0.75rem;
 }
+
 .pr-4{
   padding-right: 1rem;
 }
+
 .pr-6{
   padding-right: 1.5rem;
 }
+
 .pr-9{
   padding-right: 2.25rem;
 }
+
+.pt-0{
+  padding-top: 0px;
+}
+
 .pt-1{
   padding-top: 0.25rem;
 }
+
+.pt-12{
+  padding-top: 3rem;
+}
+
+.pt-16{
+  padding-top: 4rem;
+}
+
 .pt-2{
   padding-top: 0.5rem;
 }
+
 .pt-3{
   padding-top: 0.75rem;
 }
+
 .pt-4{
   padding-top: 1rem;
 }
+
 .pt-6{
   padding-top: 1.5rem;
 }
+
 .pt-\[20vh\]{
   padding-top: 20vh;
 }
+
 .text-left{
   text-align: left;
 }
+
 .text-center{
   text-align: center;
 }
+
 .text-right{
   text-align: right;
 }
+
 .align-middle{
   vertical-align: middle;
 }
+
 .font-mono{
   font-family: JetBrains Mono Variable, JetBrains Mono, Fira Code, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
+
 .text-2xl{
   font-size: 1.5rem;
   line-height: 2.25rem;
 }
+
 .text-3xl{
   font-size: 1.875rem;
   line-height: 2.5rem;
 }
+
 .text-\[10px\]{
   font-size: 10px;
 }
+
 .text-\[11px\]{
   font-size: 11px;
 }
+
 .text-base{
   font-size: 1rem;
   line-height: 1.625rem;
 }
+
 .text-lg{
   font-size: 1.125rem;
   line-height: 1.875rem;
 }
+
 .text-sm{
   font-size: 0.875rem;
   line-height: 1.375rem;
 }
+
 .text-xl{
   font-size: 1.25rem;
   line-height: 2rem;
 }
+
 .text-xs{
   font-size: 0.75rem;
   line-height: 1.125rem;
 }
+
 .font-bold{
   font-weight: 700;
 }
+
 .font-medium{
   font-weight: 500;
 }
+
 .font-normal{
   font-weight: 400;
 }
+
 .font-semibold{
   font-weight: 600;
 }
+
 .uppercase{
   text-transform: uppercase;
 }
+
 .lowercase{
   text-transform: lowercase;
 }
+
 .capitalize{
   text-transform: capitalize;
 }
+
 .normal-case{
   text-transform: none;
 }
+
 .italic{
   font-style: italic;
 }
+
 .leading-5{
   line-height: 1.25rem;
 }
+
 .leading-relaxed{
   line-height: 1.625;
 }
+
 .leading-tight{
   line-height: 1.25;
 }
+
 .tracking-tight{
   letter-spacing: -0.025em;
 }
+
 .tracking-wider{
   letter-spacing: 0.05em;
 }
+
 .text-accent-200{
   --tw-text-opacity: 1;
   color: rgb(232 231 224 / var(--tw-text-opacity, 1));
 }
+
 .text-accent-500{
   --tw-text-opacity: 1;
   color: rgb(139 136 120 / var(--tw-text-opacity, 1));
 }
+
 .text-accent-600{
   --tw-text-opacity: 1;
   color: rgb(110 109 94 / var(--tw-text-opacity, 1));
 }
+
 .text-accent-700{
   --tw-text-opacity: 1;
   color: rgb(86 85 72 / var(--tw-text-opacity, 1));
 }
+
 .text-accent-800{
   --tw-text-opacity: 1;
   color: rgb(63 62 53 / var(--tw-text-opacity, 1));
 }
+
 .text-accent-900{
   --tw-text-opacity: 1;
   color: rgb(42 41 34 / var(--tw-text-opacity, 1));
 }
+
 .text-blue-600{
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
+
 .text-current{
   color: currentColor;
 }
+
 .text-error-200{
   --tw-text-opacity: 1;
   color: rgb(254 202 202 / var(--tw-text-opacity, 1));
 }
+
 .text-error-500{
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
+
 .text-error-600{
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1));
 }
+
 .text-error-700{
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
+
 .text-error-800{
   --tw-text-opacity: 1;
   color: rgb(153 27 27 / var(--tw-text-opacity, 1));
 }
+
 .text-error-900{
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity, 1));
 }
+
 .text-gray-400{
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
+
 .text-gray-500{
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+
 .text-gray-600{
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
+
 .text-gray-700{
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-300{
   --tw-text-opacity: 1;
   color: rgb(214 211 209 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-400{
   --tw-text-opacity: 1;
   color: rgb(168 162 158 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-500{
   --tw-text-opacity: 1;
   color: rgb(120 113 108 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-600{
   --tw-text-opacity: 1;
   color: rgb(87 83 78 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-700{
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-800{
   --tw-text-opacity: 1;
   color: rgb(41 37 36 / var(--tw-text-opacity, 1));
 }
+
 .text-ink-900{
   --tw-text-opacity: 1;
   color: rgb(28 25 23 / var(--tw-text-opacity, 1));
 }
+
 .text-primary-500{
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity, 1));
 }
+
 .text-primary-600{
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity, 1));
 }
+
 .text-primary-700{
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity, 1));
 }
+
 .text-primary-800{
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity, 1));
 }
+
 .text-primary-900{
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
+
 .text-red-600{
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1));
 }
+
 .text-success-500{
   --tw-text-opacity: 1;
   color: rgb(16 185 129 / var(--tw-text-opacity, 1));
 }
+
 .text-success-600{
   --tw-text-opacity: 1;
   color: rgb(5 150 105 / var(--tw-text-opacity, 1));
 }
+
 .text-success-700{
   --tw-text-opacity: 1;
   color: rgb(4 120 87 / var(--tw-text-opacity, 1));
 }
+
 .text-success-800{
   --tw-text-opacity: 1;
   color: rgb(6 95 70 / var(--tw-text-opacity, 1));
 }
+
 .text-success-900{
   --tw-text-opacity: 1;
   color: rgb(6 78 59 / var(--tw-text-opacity, 1));
 }
+
 .text-warning-200{
   --tw-text-opacity: 1;
   color: rgb(253 230 138 / var(--tw-text-opacity, 1));
 }
+
 .text-warning-500{
   --tw-text-opacity: 1;
   color: rgb(245 158 11 / var(--tw-text-opacity, 1));
 }
+
 .text-warning-600{
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
 }
+
 .text-warning-700{
   --tw-text-opacity: 1;
   color: rgb(180 83 9 / var(--tw-text-opacity, 1));
 }
+
 .text-warning-800{
   --tw-text-opacity: 1;
   color: rgb(146 64 14 / var(--tw-text-opacity, 1));
 }
+
 .text-warning-900{
   --tw-text-opacity: 1;
   color: rgb(120 53 15 / var(--tw-text-opacity, 1));
 }
+
 .text-white{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+
 .underline{
   text-decoration-line: underline;
 }
+
 .line-through{
   text-decoration-line: line-through;
 }
+
 .placeholder-ink-400::-moz-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity, 1));
 }
+
 .placeholder-ink-400::placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity, 1));
 }
+
 .opacity-0{
   opacity: 0;
 }
+
 .opacity-100{
   opacity: 1;
 }
+
 .opacity-25{
   opacity: 0.25;
 }
+
 .opacity-40{
   opacity: 0.4;
 }
+
 .opacity-50{
   opacity: 0.5;
 }
+
 .opacity-70{
   opacity: 0.7;
 }
+
 .opacity-75{
   opacity: 0.75;
 }
+
 .opacity-90{
   opacity: 0.9;
 }
+
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-2xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.12);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-\[4px_0_6px_-2px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]{
   --tw-shadow: 4px 0 6px -2px rgba(0,0,0,0.1);
   --tw-shadow-colored: 4px 0 6px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-lg{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-md{
   --tw-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.06);
   --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-sm{
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-xl{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-xs{
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-error-500\/20{
   --tw-shadow-color: rgb(239 68 68 / 0.2);
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .shadow-primary-500\/20{
   --tw-shadow-color: rgb(100 116 139 / 0.2);
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .shadow-success-500\/20{
   --tw-shadow-color: rgb(16 185 129 / 0.2);
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .shadow-warning-500\/20{
   --tw-shadow-color: rgb(245 158 11 / 0.2);
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
 .outline{
   outline-style: solid;
 }
+
 .ring-1{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .ring-2{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .ring-accent-400{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(168 165 153 / var(--tw-ring-opacity, 1));
 }
+
 .ring-black{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
 }
+
 .ring-primary-300{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
 }
+
 .ring-opacity-5{
   --tw-ring-opacity: 0.05;
 }
+
 .blur{
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .drop-shadow{
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .backdrop-blur-sm{
   --tw-backdrop-blur: blur(4px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+
 .transition{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-colors{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-opacity{
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-shadow{
   transition-property: box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-transform{
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .duration-100{
   transition-duration: 100ms;
 }
+
 .duration-150{
   transition-duration: 150ms;
 }
+
 .duration-200{
   transition-duration: 200ms;
 }
+
 .duration-300{
   transition-duration: 300ms;
 }
+
 .ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .ease-out{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+
 .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
+
 .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+
 .line-clamp-3 {
     overflow: hidden;
     display: -webkit-box;
@@ -3215,6 +4289,7 @@ input:checked + .slider:before{
   }
 
 /* Custom scrollbar - Subtle paper aesthetic */
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -3235,6 +4310,7 @@ input:checked + .slider:before{
 }
 
 /* Loading animations */
+
 @keyframes pulse {
   0%, 100% {
     opacity: 1;
@@ -3249,9 +4325,11 @@ input:checked + .slider:before{
 }
 
 /* Table styles - Clean & minimal */
+
 .table{
   min-width: 100%;
 }
+
 .table > :not([hidden]) ~ :not([hidden]){
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -3306,6 +4384,7 @@ input:checked + .slider:before{
 }
 
 /* Prevent table layout shifts */
+
 .table-fixed {
   table-layout: fixed !important;
 }
@@ -3315,11 +4394,11 @@ input:checked + .slider:before{
   /* Removed min-height to allow content-based sizing for two-row layout */
 }
 
-  .table-stable thead {
+.table-stable thead {
     height: auto !important;
   }
 
-  .table-stable thead th {
+.table-stable thead th {
     position: sticky;
     top: 0;
     z-index: 10;
@@ -3338,28 +4417,30 @@ input:checked + .slider:before{
   }
 
 /* Primary rows with normal content */
+
 .table-stable tbody tr {
   height: auto; /* Allow content-based sizing for two-row layout */
 }
 
 /* Secondary rows should be compact */
+
 .table-stable tbody tr.secondary-row {
   height: auto;
 }
 
 .table-stable tbody tr td {
   vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 /* Smooth loading overlay */
+
 .table-loading-overlay {
   transition: opacity 0.3s ease-in-out;
   backdrop-filter: blur(1px);
 }
 
 /* Prevent content jumping during loading */
+
 .loading-stable {
   min-height: inherit;
   visibility: visible;
@@ -3370,6 +4451,7 @@ input:checked + .slider:before{
 }
 
 /* Custom tooltip for navigation dots using CSS */
+
 .page-nav-dot {
   position: relative;
 }
@@ -3400,6 +4482,7 @@ input:checked + .slider:before{
 }
 
 /* DataTable Expanded Row Animation */
+
 @keyframes expandRow {
   from {
     opacity: 0;
@@ -3419,6 +4502,7 @@ input:checked + .slider:before{
 }
 
 /* Drawer Slide Animations */
+
 @keyframes slideInLeft {
   from {
     transform: translateX(-100%);
@@ -4045,6 +5129,14 @@ input:checked + .slider:before{
 
 @media (min-width: 640px){
 
+  .sm\:mb-6{
+    margin-bottom: 1.5rem;
+  }
+
+  .sm\:mr-6{
+    margin-right: 1.5rem;
+  }
+
   .sm\:block{
     display: block;
   }
@@ -4085,6 +5177,34 @@ input:checked + .slider:before{
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
+  .sm\:pb-12{
+    padding-bottom: 3rem;
+  }
+
+  .sm\:pb-6{
+    padding-bottom: 1.5rem;
+  }
+
+  .sm\:pb-8{
+    padding-bottom: 2rem;
+  }
+
+  .sm\:pr-12{
+    padding-right: 3rem;
+  }
+
+  .sm\:pr-4{
+    padding-right: 1rem;
+  }
+
+  .sm\:pr-6{
+    padding-right: 1.5rem;
+  }
+
+  .sm\:pr-8{
+    padding-right: 2rem;
+  }
+
   .sm\:text-sm{
     font-size: 0.875rem;
     line-height: 1.375rem;
@@ -4093,6 +5213,14 @@ input:checked + .slider:before{
 
 @media (min-width: 768px){
 
+  .md\:mb-8{
+    margin-bottom: 2rem;
+  }
+
+  .md\:mr-8{
+    margin-right: 2rem;
+  }
+
   .md\:block{
     display: block;
   }
@@ -4124,6 +5252,34 @@ input:checked + .slider:before{
   .md\:grid-cols-6{
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+
+  .md\:pb-12{
+    padding-bottom: 3rem;
+  }
+
+  .md\:pb-16{
+    padding-bottom: 4rem;
+  }
+
+  .md\:pb-8{
+    padding-bottom: 2rem;
+  }
+
+  .md\:pr-12{
+    padding-right: 3rem;
+  }
+
+  .md\:pr-16{
+    padding-right: 4rem;
+  }
+
+  .md\:pr-6{
+    padding-right: 1.5rem;
+  }
+
+  .md\:pr-8{
+    padding-right: 2rem;
+  }
 }
 
 @media (min-width: 1024px){
@@ -4132,6 +5288,10 @@ input:checked + .slider:before{
     grid-column: span 2 / span 2;
   }
 
+  .lg\:mr-auto{
+    margin-right: auto;
+  }
+
   .lg\:block{
     display: block;
   }
@@ -4163,6 +5323,22 @@ input:checked + .slider:before{
   .lg\:grid-cols-6{
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+
+  .lg\:pb-16{
+    padding-bottom: 4rem;
+  }
+
+  .lg\:pb-20{
+    padding-bottom: 5rem;
+  }
+
+  .lg\:pr-16{
+    padding-right: 4rem;
+  }
+
+  .lg\:pr-20{
+    padding-right: 5rem;
+  }
 }
 
 @media (min-width: 1280px){