@dodlhuat/basix 1.2.0 → 1.2.1

package/css/style.css

@@ -52,17 +52,27 @@ table {
   --divider: #D8D9E0;
   --accent-text: #3D63DD;
   --error: #D64545;
+  --error-tint: color-mix(in srgb, #D64545 12%, transparent);
   --warning: #C28A00;
+  --warning-tint: color-mix(in srgb, #C28A00 12%, transparent);
   --success: #2E8B57;
+  --success-tint: color-mix(in srgb, #2E8B57 12%, transparent);
   --secondary-background: #E7E8EC;
   --background: #F9F9FB;
+  --primary-bg: #F9F9FB;
   --accent-color: #3D63DD;
   --accent-color-lighten: #87A5EF;
+  --accent-color-tint: color-mix(in srgb, #3D63DD 12%, transparent);
   --accent-color-text: #D8D9E0;
   --disabled: #D8D9E0;
   --primary-dark: #1A1B1F;
   --primary-light: #F0F1F3;
   --hover: rgba(0, 0, 0, 0.04);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.4rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
 }
 
 [data-theme=dark] {
@@ -71,12 +81,17 @@ table {
   --divider: #393A40;
   --accent-text: #0E496D;
   --error: #FF6B6B;
+  --error-tint: color-mix(in srgb, #FF6B6B 12%, transparent);
   --warning: #F7B500;
+  --warning-tint: color-mix(in srgb, #F7B500 12%, transparent);
   --success: #5CC689;
+  --success-tint: color-mix(in srgb, #5CC689 12%, transparent);
   --background: #111113;
+  --primary-bg: #111113;
   --secondary-background: #19191B;
   --accent-color: #1B7BB4;
   --accent-color-lighten: #175982;
+  --accent-color-tint: color-mix(in srgb, #1B7BB4 12%, transparent);
   --accent-color-text: #B2B3BD;
   --disabled: #303136;
   --primary-dark: #0C0C0E;
@@ -214,6 +229,7 @@ code.code .code-content {
 }
 .row .column {
   flex: 1;
+  min-width: 0;
   padding: 1rem;
 }
 .row .column.grow-2 {
@@ -987,25 +1003,11 @@ select {
   letter-spacing: 0.01em;
 }
 .form-group .form-hint {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.3rem;
   font-size: 0.75rem;
   line-height: 1.45;
   color: var(--secondary-text);
   margin-top: 0.125rem;
 }
-.form-group .form-hint::before {
-  content: "";
-  display: block;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: currentColor;
-  flex-shrink: 0;
-  margin-top: 0.38em;
-  opacity: 0.55;
-}
 .form-group.error input, .form-group.error textarea, .form-group.error select {
   border-color: var(--error);
   background-color: color-mix(in srgb, var(--error) 4%, var(--background));
@@ -1421,7 +1423,7 @@ input.input-lg, textarea.input-lg {
   --track-width: 12px;
   --track-radius: 8px;
   --thumb-min: 28px;
-  --track-gap: 8px;
+  --track-gap: 6px;
 }
 
 .scroll-container {
@@ -1460,21 +1462,57 @@ input.input-lg, textarea.input-lg {
 .scroll-container .track {
   position: relative;
   height: 100%;
-  border-radius: var(--track-radius);
   width: 100%;
+  border-radius: var(--track-radius);
+  background: transparent;
   pointer-events: auto;
+  transition: background 0.3s ease;
+}
+.scroll-container .track:hover {
+  background: var(--hover);
+}
+.scroll-container .track:hover .thumb {
+  opacity: 0.7;
+  transform: scaleX(0.7);
 }
 .scroll-container .thumb {
   position: absolute;
-  left: 2px;
-  right: 2px;
+  left: 0;
+  right: 0;
   top: 0;
   height: 40px;
-  border-radius: calc(var(--track-radius) - 2px);
+  border-radius: var(--track-radius);
   background: var(--secondary-text);
+  opacity: 0.2;
   cursor: pointer;
   pointer-events: auto;
   touch-action: none;
+  transform: scaleX(0.3);
+  transform-origin: right center;
+  transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.25s ease;
+  will-change: top, height, transform, opacity;
+}
+.scroll-container:hover .thumb {
+  opacity: 0.45;
+  transform: scaleX(0.5);
+}
+.scroll-container.is-scrolling .thumb {
+  opacity: 0.6;
+  transform: scaleX(0.5);
+}
+.scroll-container.is-dragging {
+  cursor: grabbing;
+}
+.scroll-container.is-dragging .track {
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+}
+.scroll-container.is-dragging .thumb {
+  opacity: 1;
+  transform: scaleX(1);
+  background: var(--accent-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
+  cursor: grabbing;
+  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, box-shadow 0.2s ease;
 }
 
 button,
@@ -1519,6 +1557,39 @@ button:disabled,
   opacity: 0.45;
   cursor: not-allowed;
 }
+button.is-loading,
+.button.is-loading {
+  pointer-events: none;
+  position: relative;
+  color: transparent !important;
+}
+button.is-loading::after,
+.button.is-loading::after {
+  content: "";
+  position: absolute;
+  width: 1.1em;
+  height: 1.1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spinner-rotate 0.8s ease-in-out infinite;
+  color: var(--primary-text);
+}
+button.is-loading > *,
+.button.is-loading > * {
+  visibility: hidden;
+}
+
+.button-primary.is-loading::after,
+button.button-primary.is-loading::after,
+.button-success.is-loading::after,
+button.button-success.is-loading::after,
+.button-warning.is-loading::after,
+button.button-warning.is-loading::after,
+.button-error.is-loading::after,
+button.button-error.is-loading::after {
+  color: var(--background);
+}
 
 .button-primary,
 button.button-primary {
@@ -1659,6 +1730,16 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-error:active:not(:disabled) {
   background: color-mix(in srgb, var(--error) 70%, white);
 }
+[data-theme=dark] .button-primary.is-loading::after,
+[data-theme=dark] button.button-primary.is-loading::after,
+[data-theme=dark] .button-success.is-loading::after,
+[data-theme=dark] button.button-success.is-loading::after,
+[data-theme=dark] .button-warning.is-loading::after,
+[data-theme=dark] button.button-warning.is-loading::after,
+[data-theme=dark] .button-error.is-loading::after,
+[data-theme=dark] button.button-error.is-loading::after {
+  color: var(--primary-text);
+}
 
 .modal-wrapper {
   position: fixed;
@@ -1763,6 +1844,192 @@ button.button-error:active:not(:disabled) {
     border-radius: 0;
   }
 }
+.popover {
+  position: fixed;
+  z-index: 900;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: 1rem;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 12px 24px -4px rgba(0, 0, 0, 0.12);
+  min-width: 160px;
+  max-width: 320px;
+  opacity: 0;
+  pointer-events: none;
+}
+.popover[data-placement=top] {
+  transform-origin: bottom center;
+  transform: translateY(6px) scale(0.95);
+}
+.popover[data-placement=bottom] {
+  transform-origin: top center;
+  transform: translateY(-6px) scale(0.95);
+}
+.popover[data-placement=left] {
+  transform-origin: right center;
+  transform: translateX(6px) scale(0.95);
+}
+.popover[data-placement=right] {
+  transform-origin: left center;
+  transform: translateX(-6px) scale(0.95);
+}
+.popover[data-placement=bottom][data-align=start] {
+  transform-origin: top left;
+}
+.popover[data-placement=bottom][data-align=end] {
+  transform-origin: top right;
+}
+.popover[data-placement=top][data-align=start] {
+  transform-origin: bottom left;
+}
+.popover[data-placement=top][data-align=end] {
+  transform-origin: bottom right;
+}
+.popover {
+  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.popover.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none !important;
+}
+.popover[data-arrow=true]::before, .popover[data-arrow=true]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.popover[data-arrow=true][data-placement=bottom]::before {
+  top: -7px;
+  left: var(--popover-arrow-offset, 50%);
+  transform: translateX(-50%);
+  border: 7px solid transparent;
+  border-top-width: 0;
+  border-bottom-color: var(--divider);
+}
+.popover[data-arrow=true][data-placement=bottom]::after {
+  top: -6px;
+  left: var(--popover-arrow-offset, 50%);
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-top-width: 0;
+  border-bottom-color: var(--background);
+}
+.popover[data-arrow=true][data-placement=top]::before {
+  bottom: -7px;
+  left: var(--popover-arrow-offset, 50%);
+  transform: translateX(-50%);
+  border: 7px solid transparent;
+  border-bottom-width: 0;
+  border-top-color: var(--divider);
+}
+.popover[data-arrow=true][data-placement=top]::after {
+  bottom: -6px;
+  left: var(--popover-arrow-offset, 50%);
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-bottom-width: 0;
+  border-top-color: var(--background);
+}
+.popover[data-arrow=true][data-placement=right]::before {
+  left: -7px;
+  top: var(--popover-arrow-offset, 50%);
+  transform: translateY(-50%);
+  border: 7px solid transparent;
+  border-left-width: 0;
+  border-right-color: var(--divider);
+}
+.popover[data-arrow=true][data-placement=right]::after {
+  left: -6px;
+  top: var(--popover-arrow-offset, 50%);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-left-width: 0;
+  border-right-color: var(--background);
+}
+.popover[data-arrow=true][data-placement=left]::before {
+  right: -7px;
+  top: var(--popover-arrow-offset, 50%);
+  transform: translateY(-50%);
+  border: 7px solid transparent;
+  border-right-width: 0;
+  border-left-color: var(--divider);
+}
+.popover[data-arrow=true][data-placement=left]::after {
+  right: -6px;
+  top: var(--popover-arrow-offset, 50%);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-width: 0;
+  border-left-color: var(--background);
+}
+
+.popover-header {
+  padding: 0.65rem 1rem;
+  border-bottom: 1px solid var(--divider);
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--primary-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 1rem 1rem 0 0;
+}
+
+.popover-body {
+  padding: 0.75rem 1rem;
+  color: var(--primary-text);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.popover-footer {
+  padding: 0.65rem 1rem;
+  border-top: 1px solid var(--divider);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-radius: 0 0 1rem 1rem;
+}
+
+.popover-menu {
+  padding: 0.375rem 0;
+}
+.popover-menu .popover-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 1rem;
+  font-size: 0.875rem;
+  color: var(--primary-text);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+  user-select: none;
+}
+.popover-menu .popover-menu-item:hover {
+  background: var(--hover);
+}
+.popover-menu .popover-menu-item.is-destructive {
+  color: var(--error);
+}
+.popover-menu .popover-menu-item.is-destructive:hover {
+  background: color-mix(in srgb, var(--error) 8%, transparent);
+}
+.popover-menu .popover-menu-divider {
+  height: 1px;
+  background: var(--divider);
+  margin: 0.375rem 0;
+}
+.popover-menu .popover-menu-label {
+  padding: 0.3rem 1rem 0.2rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--secondary-text);
+}
+
 .placeholder {
   display: inline-block;
   cursor: wait;
@@ -1818,25 +2085,75 @@ button.button-error:active:not(:disabled) {
     background-position: -200% 0;
   }
 }
-.progress-bar {
-  background: var(--background);
+.progress {
+  width: 100%;
+  height: 8px;
+  background: var(--secondary-background);
   border-radius: 0.4rem;
+  overflow: hidden;
 }
-.progress-bar .progress {
+
+.progress-bar {
+  height: 100%;
   border-radius: 0.4rem;
-  background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0.15) 75%), var(--accent-color);
-  background-size: 40px 40px;
-  animation: stripes 2.5s linear infinite;
+  background: var(--primary-text);
+  transition: width 0.3s ease;
+  min-width: 0;
+}
+.progress-bar.accent {
+  background: var(--accent-color);
+}
+.progress-bar.success {
+  background: var(--success);
+}
+.progress-bar.warning {
+  background: var(--warning);
+}
+.progress-bar.error {
+  background: var(--error);
+}
+.progress-bar.animated {
+  width: 40% !important;
+  background: var(--accent-color);
+  animation: progress-indeterminate 1.4s ease-in-out infinite;
 }
 
-@keyframes stripes {
-  from {
-    background-position: 0 0;
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
   }
-  to {
-    background-position: 40px 0;
+  100% {
+    transform: translateX(350%);
+  }
+}
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
   }
 }
+.skeleton-avatar, .skeleton-text, .skeleton {
+  background: linear-gradient(90deg, var(--secondary-background) 25%, var(--divider) 50%, var(--secondary-background) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 0.4rem;
+  display: block;
+}
+
+.skeleton-text {
+  height: 0.85em;
+  width: 100%;
+}
+
+.skeleton-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 .spinner {
   width: 2.5rem;
   height: 2.5rem;
@@ -1963,72 +2280,178 @@ button.button-error:active:not(:disabled) {
   line-height: 1.5;
 }
 
-.push-content {
-  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
-}
-
-nav {
+nav.push-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 280px;
   height: 100%;
+  overflow: hidden;
   transform: translateX(-100%);
-  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 10;
 }
+nav.push-menu.pushed {
+  transform: translateX(0);
+  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
+}
 
-nav ul {
-  width: 100%;
-  height: 100%;
-  padding: 4.5rem 0 1rem;
-  margin: 0;
-  list-style: none;
+.push-content {
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+.push-content.pushed {
+  transform: translate3d(280px, 0, 0);
+}
+
+.push-menu-panel {
+  position: absolute;
+  inset: 0;
   background: var(--primary-dark);
+  transform: translateX(105%);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
+  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  will-change: transform;
+}
+.push-menu-panel.is-active {
+  transform: translateX(0);
+}
+.push-menu-panel.is-prev {
+  transform: translateX(-20%);
 }
 
-nav li {
+.push-menu-panel[data-level="0"] > ul {
+  padding-top: 4.5rem;
+  padding-bottom: 1rem;
   margin: 0;
+  list-style: none;
+  width: 100%;
 }
 
-nav a {
-  color: var(--accent-color-text);
-  font-size: 0.9rem;
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  text-decoration: none;
-  text-transform: uppercase;
+.push-menu-panel-header {
   display: flex;
   align-items: center;
-  padding: 0.85rem 1.5rem;
-  transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
+  gap: 0.75rem;
+  padding: 4.5rem 1.5rem 1rem 1.25rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  position: sticky;
+  top: 0;
+  background: var(--primary-dark);
+  z-index: 1;
+  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
+  transition: background 160ms ease;
+}
+.push-menu-panel-header:hover {
+  background: rgba(255, 255, 255, 0.05);
 }
-nav a:hover {
+.push-menu-panel-header:hover .push-menu-back {
+  background: rgba(255, 255, 255, 0.14);
   color: #fff;
-  background: rgba(255, 255, 255, 0.06);
 }
-nav a:active {
-  background: rgba(255, 255, 255, 0.1);
+.push-menu-panel-header:active {
+  background: rgba(255, 255, 255, 0.08);
+}
+.push-menu-panel-header:active .push-menu-back {
+  transform: scale(0.92);
 }
 
-nav li + li a {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+.push-menu-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.3rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.65);
+  pointer-events: none;
+  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
 }
 
-.navigation-controls {
-  line-height: inherit;
+.push-menu-panel-title {
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.navigation-controls label {
-  display: block;
-  width: 1.5rem;
-  height: 100%;
-  color: var(--primary-text);
-  text-align: center;
-  top: 0;
+
+.push-menu-panel:not([data-level="0"]) > ul {
+  padding: 0.5rem 0;
+  margin: 0;
+  list-style: none;
+  width: 100%;
+}
+
+nav li {
+  margin: 0;
+}
+
+nav a,
+.push-menu-item {
+  color: var(--accent-color-text);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-decoration: none;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  padding: 0.85rem 1.5rem;
+  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  user-select: none;
+}
+nav a:hover,
+.push-menu-item:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.06);
+}
+nav a:active,
+.push-menu-item:active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+nav li + li a,
+nav li + li .push-menu-item {
+  border-top: 1px solid rgba(255, 255, 255, 0.055);
+}
+
+.push-menu-chevron {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.35;
+  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.push-menu-item:hover .push-menu-chevron {
+  opacity: 0.7;
+  transform: translateX(2px);
+}
+
+.navigation-controls {
+  line-height: inherit;
+}
+.navigation-controls label {
+  display: block;
+  width: 1.5rem;
+  height: 100%;
+  color: var(--primary-text);
+  text-align: center;
+  top: 0;
   left: 0;
   z-index: 500;
   cursor: pointer;
@@ -2044,7 +2467,7 @@ nav li + li a {
   background: rgba(0, 0, 0, 0.4);
   opacity: 0;
   visibility: hidden;
-  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 9;
   -webkit-tap-highlight-color: transparent;
 }
@@ -2053,21 +2476,12 @@ nav li + li a {
   visibility: visible;
 }
 
-nav.pushed {
-  transform: translateX(0);
-  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.3);
-}
-
-.push-content.pushed {
-  transform: translate3d(280px, 0, 0);
-}
-
 .main-header {
   position: fixed;
   background: var(--secondary-background);
   width: 100%;
   right: 0;
-  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
   height: 3rem;
   display: flex;
   z-index: 2;
@@ -2503,45 +2917,119 @@ nav.pushed {
   }
 }
 
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
 .chips .chip {
-  margin: 0 0.25rem 0.2rem 0;
-  display: inline-block;
-  background: var(--divider);
-  padding: 0.3rem 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: var(--secondary-background);
+  color: var(--primary-text);
+  padding: 0.3rem 0.75rem;
   border-radius: 1.6rem;
   font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border: 1px solid transparent;
   position: relative;
+  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
 }
 .chips .chip.clickable {
   cursor: pointer;
 }
 .chips .chip.clickable:hover {
-  filter: brightness(105%);
+  background: var(--divider);
+}
+.chips .chip.clickable:active {
+  transform: scale(0.96);
+}
+.chips .chip.clickable:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
 }
 .chips .chip.closeable {
-  padding-right: 2rem;
+  padding-right: 1.8rem;
 }
 .chips .chip.closeable button {
+  position: absolute;
+  right: 0.4rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 0;
-  background: var(--divider);
+  background: transparent;
   color: var(--secondary-text);
-  display: inline-block;
   border: 0;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1.1rem;
+  width: 1.1rem;
   border-radius: 50%;
-  margin: 0 -0.25rem 0 0.25rem;
   cursor: pointer;
-  position: absolute;
-  right: 0.8rem;
+  transition: background 0.15s ease, color 0.15s ease;
 }
 .chips .chip.closeable button:hover {
-  filter: brightness(105%);
+  background: color-mix(in srgb, var(--primary-text) 12%, transparent);
+  color: var(--primary-text);
 }
-.chips .chip.closeable button .icon {
-  font-size: 0.9rem;
-  top: 1px;
-  position: relative;
+.chips .chip.closeable button:active {
+  background: color-mix(in srgb, var(--primary-text) 18%, transparent);
+}
+.chips .chip.closeable button .icon,
+.chips .chip.closeable button .icon-svg {
+  font-size: 0.8rem;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.chips .chip-accent {
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+  color: var(--accent-color);
+  border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+}
+.chips .chip-accent.closeable button:hover {
+  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
+  color: var(--accent-color);
+}
+.chips .chip-success {
+  background: color-mix(in srgb, var(--success) 12%, var(--background));
+  color: var(--success);
+  border-color: color-mix(in srgb, var(--success) 20%, transparent);
+}
+.chips .chip-success.closeable button:hover {
+  background: color-mix(in srgb, var(--success) 15%, transparent);
+  color: var(--success);
+}
+.chips .chip-warning {
+  background: color-mix(in srgb, var(--warning) 12%, var(--background));
+  color: var(--warning);
+  border-color: color-mix(in srgb, var(--warning) 20%, transparent);
+}
+.chips .chip-warning.closeable button:hover {
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  color: var(--warning);
+}
+.chips .chip-error {
+  background: color-mix(in srgb, var(--error) 12%, var(--background));
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 20%, transparent);
+}
+.chips .chip-error.closeable button:hover {
+  background: color-mix(in srgb, var(--error) 15%, transparent);
+  color: var(--error);
+}
+.chips .chip-outline {
+  background: transparent;
+  border-color: var(--divider);
+  color: var(--secondary-text);
+}
+.chips .chip-outline.clickable:hover {
+  background: var(--hover);
+  border-color: color-mix(in srgb, var(--divider) 80%, var(--primary-text));
 }
 
 .badge {
@@ -2655,12 +3143,36 @@ nav.pushed {
     box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 35%, transparent);
   }
   65% {
-    box-shadow: 0 0 0 5px transparent;
+    box-shadow: 0 0 0 6px transparent;
   }
   100% {
     box-shadow: 0 0 0 0 transparent;
   }
 }
+@keyframes stepper-check-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes stepper-complete-pop {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.18);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 .stepper {
   display: flex;
   align-items: flex-start;
@@ -2688,7 +3200,7 @@ nav.pushed {
   border: 2px solid var(--divider);
   background: var(--background);
   color: var(--secondary-text);
-  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
   position: relative;
   z-index: 1;
 }
@@ -2709,7 +3221,7 @@ nav.pushed {
   font-size: 0.8125rem;
   font-weight: 500;
   color: var(--secondary-text);
-  transition: color 0.2s ease;
+  transition: color 0.25s ease, font-weight 0.25s ease;
   white-space: nowrap;
 }
 
@@ -2718,6 +3230,7 @@ nav.pushed {
   color: var(--secondary-text);
   opacity: 0.6;
   white-space: nowrap;
+  transition: opacity 0.25s ease;
 }
 
 .stepper-connector {
@@ -2726,6 +3239,7 @@ nav.pushed {
   margin-top: calc(2rem / 2 - 2px / 2);
   min-width: 1rem;
   background: var(--divider);
+  border-radius: 2px;
   position: relative;
   overflow: hidden;
 }
@@ -2736,7 +3250,7 @@ nav.pushed {
   background: var(--accent-color);
   transform: scaleX(0);
   transform-origin: left;
-  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .stepper-connector.completed::after {
   transform: scaleX(1);
@@ -2752,10 +3266,17 @@ nav.pushed {
   color: var(--accent-color);
   font-weight: 600;
 }
+.stepper-step.active .stepper-desc {
+  opacity: 0.8;
+}
 .stepper-step.completed .stepper-indicator {
   border-color: var(--accent-color);
   background: var(--accent-color);
   color: #fff;
+  animation: stepper-complete-pop 0.35s ease-out;
+}
+.stepper-step.completed .stepper-indicator .icon-svg {
+  animation: stepper-check-in 0.3s ease-out 0.05s both;
 }
 .stepper-step.completed .stepper-title {
   color: var(--primary-text);
@@ -2769,6 +3290,10 @@ nav.pushed {
 .stepper-step.error .stepper-title {
   color: var(--error);
 }
+.stepper-step.error .stepper-desc {
+  color: var(--error);
+  opacity: 0.7;
+}
 
 .stepper-vertical {
   flex-direction: column;
@@ -2792,6 +3317,7 @@ nav.pushed {
   margin-top: 0;
   margin-left: calc(2rem / 2 - 2px / 2);
   align-self: flex-start;
+  border-radius: 2px;
 }
 .stepper-vertical .stepper-connector::after {
   transform: scaleY(0);
@@ -2805,10 +3331,14 @@ nav.pushed {
   cursor: pointer;
 }
 .stepper-clickable .stepper-step.completed .stepper-indicator, .stepper-clickable .stepper-step.active .stepper-indicator {
-  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
+  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 .stepper-clickable .stepper-step.completed:hover .stepper-indicator, .stepper-clickable .stepper-step.active:hover .stepper-indicator {
-  transform: scale(1.1);
+  transform: scale(1.12);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 25%, transparent);
+}
+.stepper-clickable .stepper-step.completed:active .stepper-indicator, .stepper-clickable .stepper-step.active:active .stepper-indicator {
+  transform: scale(1.04);
 }
 
 @media (max-width: 480px) {
@@ -3355,7 +3885,7 @@ body {
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--transition-speed), visibility var(--transition-speed);
-  z-index: 40;
+  z-index: 200;
 }
 
 .flyout-overlay.is-visible {
@@ -3369,7 +3899,7 @@ body {
   background: var(--flyout-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  z-index: 50;
+  z-index: 210;
   display: flex;
   flex-direction: column;
   padding: 2rem;
@@ -3694,6 +4224,29 @@ body {
   flex: 1;
 }
 
+.tabs-container.tabs-pills .tabs-header {
+  border-bottom: none;
+  padding-bottom: 0.5rem;
+}
+.tabs-container.tabs-pills .tabs-list {
+  gap: 0.375rem;
+}
+.tabs-container.tabs-pills .tab-item {
+  border-bottom: none;
+  border-radius: 2rem;
+  padding: 0.4rem 1rem;
+  background: transparent;
+}
+.tabs-container.tabs-pills .tab-item:hover {
+  background: var(--hover);
+  color: var(--primary-text);
+}
+.tabs-container.tabs-pills .tab-item.active {
+  background: var(--accent-color);
+  color: #fff;
+  border-bottom-color: transparent;
+}
+
 @media (max-width: 768px) {
   .tabs-container.tabs-vertical {
     flex-direction: column;
@@ -3727,16 +4280,15 @@ body {
 .accordion-item {
   border-bottom: 1px solid var(--divider);
 }
-
 .accordion-item:last-child {
   border-bottom: none;
 }
 
-.accordion-input {
+.accordion-toggle {
   display: none;
 }
 
-.accordion-label {
+.accordion-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -3748,14 +4300,13 @@ body {
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
-.accordion-label:hover {
+.accordion-header:hover {
   background: var(--hover);
 }
-.accordion-label:active {
+.accordion-header:active {
   background: var(--hover);
 }
-
-.accordion-label::after {
+.accordion-header::after {
   content: "";
   width: 8px;
   height: 8px;
@@ -3767,10 +4318,10 @@ body {
   flex-shrink: 0;
 }
 
-.accordion-input:checked + .accordion-label {
+.accordion-toggle:checked + .accordion-header {
   color: var(--accent-color);
 }
-.accordion-input:checked + .accordion-label::after {
+.accordion-toggle:checked + .accordion-header::after {
   transform: rotate(-135deg);
   border-color: var(--accent-color);
 }
@@ -3782,155 +4333,229 @@ body {
   overflow: hidden;
 }
 
+.accordion-toggle:checked ~ .accordion-content {
+  grid-template-rows: 1fr;
+}
+
 .accordion-body {
   min-height: 0;
+  padding: 0;
+  overflow: hidden;
 }
-
-.accordion-body > div {
+.accordion-body > * {
   padding: 0 1.25rem 1.25rem;
   color: var(--secondary-text);
   font-size: 0.9rem;
   line-height: 1.6;
 }
 
-.accordion-input:checked ~ .accordion-content {
-  grid-template-rows: 1fr;
-}
-
 .timeline {
   position: relative;
-  max-width: 800px;
-  padding: 1.25rem 0;
   list-style: none;
+  padding: 0;
+  margin: 0;
 }
-
 .timeline::before {
   content: "";
   position: absolute;
+  left: calc(0.625rem - 1px);
   top: 0;
   bottom: 0;
-  left: 1.25rem;
   width: 2px;
   background: var(--divider);
 }
 
 .timeline-item {
-  position: relative;
+  display: flex;
+  gap: 1.25rem;
+  align-items: flex-start;
   margin-bottom: 2rem;
-  padding-left: 3rem;
+  position: relative;
+}
+.timeline-item:last-child {
+  margin-bottom: 0;
 }
 
-.timeline-item::before {
-  content: "";
-  position: absolute;
-  left: 0.5rem;
-  top: 5px;
+.timeline-marker {
+  flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 50%;
-  border: 3px solid var(--divider);
-  z-index: 1;
+  border: 2px solid var(--divider);
   background: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--secondary-text);
+  position: relative;
+  z-index: 1;
+  margin-top: 0.15rem;
 }
-
-.timeline-item.active::before {
+.timeline-marker.success {
+  border-color: var(--success);
+  background: var(--success);
+  color: #fff;
+}
+.timeline-marker.warning {
+  border-color: var(--warning);
+  background: var(--warning);
+  color: #fff;
+}
+.timeline-marker.error {
+  border-color: var(--error);
+  background: var(--error);
+  color: #fff;
+}
+.timeline-marker.accent {
   border-color: var(--accent-color);
-  background-color: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+  background: var(--accent-color);
+  color: #fff;
+}
+.timeline-marker svg {
+  display: block;
 }
 
 .timeline-content {
-  padding: 1.5rem;
+  flex: 1;
+  min-width: 0;
+  padding: 1.25rem;
+  border: 1px solid var(--divider);
   border-radius: 0.4rem;
+  background: var(--background);
   box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  border: 1px solid var(--divider);
 }
 
-.timeline-date {
-  font-size: 0.85rem;
-  color: var(--secondary-text);
-  font-weight: 600;
-  margin-bottom: 0.5rem;
+.timeline-time {
   display: block;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--secondary-text);
+  margin-bottom: 0.2rem;
 }
 
 .timeline-title {
-  font-size: 1.1rem;
-  font-weight: 700;
-  margin: 0 0 0.5rem 0;
+  font-size: 0.95rem;
+  font-weight: 600;
   color: var(--primary-text);
+  margin: 0 0 0.3rem;
 }
 
-.timeline-body {
-  font-size: 0.95rem;
+.timeline-content p {
+  font-size: 0.875rem;
   line-height: 1.6;
   color: var(--secondary-text);
   margin: 0;
 }
 
-.chat-container {
-  width: 100%;
+:root {
+  --bubble-radius: 18px;
+}
+
+.chat {
   display: flex;
   flex-direction: column;
+  gap: 0.4rem;
   padding: 1rem;
-  gap: 0.5rem;
+  width: 100%;
 }
 
-.message {
-  max-width: 75%;
-  padding: 1rem 1.5rem;
-  border-radius: 0.4rem;
-  position: relative;
-  line-height: 1.2rem;
-  color: var(--primary-text);
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  word-wrap: break-word;
+.chat-message.incoming + .chat-message.outgoing,
+.chat-message.outgoing + .chat-message.incoming {
+  margin-top: 0.5rem;
 }
 
-/* Metadata (time) */
-.message-meta {
-  display: block;
-  font-size: 0.8rem;
-  color: var(--primary-text);
-  text-align: right;
-  margin-top: 4px;
+.chat-message {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.6rem;
 }
-
-/* Incoming Message */
-.message-incoming {
-  align-self: flex-start;
-  background-color: var(--background);
-  border-top-left-radius: 0;
+.chat-message.outgoing {
+  flex-direction: row-reverse;
 }
-
-.message-incoming::before {
+.chat-message.outgoing .chat-bubble {
+  background: var(--accent-color);
+  color: #fff;
+  border-bottom-right-radius: 0;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
+}
+.chat-message.outgoing .chat-bubble::after {
   content: "";
   position: absolute;
-  top: 0;
+  bottom: 0;
+  right: -8px;
+  width: 8px;
+  height: 8px;
+  background: var(--accent-color);
+  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
+}
+.chat-message.outgoing .chat-bubble .chat-time {
+  color: rgba(255, 255, 255, 0.65);
+}
+.chat-message.incoming .chat-bubble {
+  background: var(--secondary-background);
+  color: var(--primary-text);
+  border-bottom-left-radius: 0;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
+}
+.chat-message.incoming .chat-bubble::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
   left: -8px;
-  width: 0;
-  height: 0;
-  border: 8px solid transparent;
-  border-top-color: var(--secondary-background);
-  border-right: 0;
-  margin-top: 0px;
+  width: 8px;
+  height: 8px;
+  background: var(--secondary-background);
+  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
 }
 
-.message-outgoing {
-  align-self: flex-end;
-  background-color: var(--accent-color-lighten);
-  border-top-right-radius: 0;
+.chat-avatar {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--accent-color-tint);
+  color: var(--accent-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  overflow: hidden;
+}
+.chat-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-.message-outgoing::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -8px;
-  width: 0;
-  height: 0;
-  border: 8px solid transparent;
-  border-top-color: var(--accent-color-lighten);
-  border-left: 0;
+.chat-bubble {
+  position: relative;
+  max-width: 72%;
+  padding: 0.55rem 0.85rem;
+  border-radius: var(--bubble-radius);
+  line-height: 1.45;
+  word-wrap: break-word;
+}
+.chat-bubble p {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.chat-time {
+  display: block;
+  font-size: 0.68rem;
+  letter-spacing: 0.01em;
+  text-align: right;
+  margin-top: 4px;
+  opacity: 0.5;
+  color: inherit;
+}
+
+[data-theme=dark] .chat-message.incoming .chat-bubble {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
+}
+[data-theme=dark] .chat-message.outgoing .chat-bubble {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
 }
 
 .carousel {
@@ -4156,16 +4781,16 @@ body {
     transform: translateY(0);
   }
 }
-.uploader-content .header h2 {
+.file-uploader .header h2 {
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 0.25rem;
 }
-.uploader-content .header p {
+.file-uploader .header p {
   color: var(--secondary-text);
   font-size: 0.875rem;
 }
-.uploader-content .drop-zone {
+.file-uploader .drop-zone {
   border: 2px dashed var(--divider);
   border-radius: 0.4rem;
   padding: 2rem 1rem;
@@ -4174,18 +4799,18 @@ body {
   transition: border-color 0.2s ease, background-color 0.2s ease;
   background-color: var(--background);
 }
-.uploader-content .drop-zone:hover, .uploader-content .drop-zone.drag-over {
+.file-uploader .drop-zone:hover, .file-uploader .drop-zone.drag-over {
   border-color: var(--accent-color);
   background-color: color-mix(in srgb, var(--accent-color) 6%, var(--background));
 }
-.uploader-content .drop-zone-content {
+.file-uploader .drop-zone-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   pointer-events: none;
 }
-.uploader-content .icon-container {
+.file-uploader .icon-container {
   width: 40px;
   height: 40px;
   border-radius: 50%;
@@ -4196,16 +4821,16 @@ body {
   justify-content: center;
   margin-bottom: 0.5rem;
 }
-.uploader-content .primary-text {
+.file-uploader .primary-text {
   font-weight: 500;
   color: var(--accent-color);
   font-size: 0.875rem;
 }
-.uploader-content .secondary-text {
+.file-uploader .secondary-text {
   color: var(--secondary-text);
   font-size: 0.75rem;
 }
-.uploader-content .file-list {
+.file-uploader .file-list {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -4213,7 +4838,7 @@ body {
   overflow-y: auto;
   margin-top: 1rem;
 }
-.uploader-content .file-item {
+.file-uploader .file-item {
   display: flex;
   flex-direction: column;
   padding: 0.75rem;
@@ -4223,39 +4848,39 @@ body {
   animation: fileSlideIn 0.2s ease-out;
   gap: 0.75rem;
 }
-.uploader-content .file-item-header {
+.file-uploader .file-item-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-.uploader-content .file-info {
+.file-uploader .file-info {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   overflow: hidden;
 }
-.uploader-content .file-icon {
+.file-uploader .file-icon {
   color: var(--secondary-text);
   flex-shrink: 0;
 }
-.uploader-content .file-details {
+.file-uploader .file-details {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.uploader-content .file-name {
+.file-uploader .file-name {
   font-size: 0.875rem;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.uploader-content .file-size {
+.file-uploader .file-size {
   font-size: 0.75rem;
   color: var(--secondary-text);
 }
-.uploader-content .remove-btn {
+.file-uploader .remove-btn {
   flex-shrink: 0;
   background: none;
   border: none;
@@ -4268,11 +4893,11 @@ body {
   align-items: center;
   justify-content: center;
 }
-.uploader-content .remove-btn:hover {
+.file-uploader .remove-btn:hover {
   color: var(--error);
   background-color: color-mix(in srgb, var(--error) 10%, var(--background));
 }
-.uploader-content .progress-container {
+.file-uploader .progress-container {
   width: 100%;
   height: 4px;
   background-color: var(--divider);
@@ -4280,26 +4905,26 @@ body {
   overflow: hidden;
   display: none;
 }
-.uploader-content .progress-bar {
+.file-uploader .progress-bar {
   height: 100%;
   background-color: var(--accent-color);
   width: 0%;
   transition: width 0.3s ease, background-color 0.3s ease;
 }
-.uploader-content .status-text {
+.file-uploader .status-text {
   font-size: 0.75rem;
   color: var(--secondary-text);
   text-align: right;
   display: none;
 }
-.uploader-content .status-text.error {
+.file-uploader .status-text.error {
   color: var(--error);
 }
-.uploader-content .status-text.success {
+.file-uploader .status-text.success {
   color: var(--success);
 }
 @media (max-width: 480px) {
-  .uploader-content .drop-zone {
+  .file-uploader .drop-zone {
     padding: 1.5rem 1rem;
   }
 }
@@ -4324,8 +4949,24 @@ body {
   border-radius: 0.4rem;
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
   position: relative;
+  cursor: pointer;
+}
+.masonry-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+.masonry-item:hover img.loaded {
+  transform: scale(1.03);
+}
+.masonry-item:active {
+  transform: translateY(-1px);
+  transition-duration: 0.1s;
+}
+.masonry-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
 }
 
 .masonry-item img {
@@ -4334,34 +4975,119 @@ body {
   display: block;
   object-fit: cover;
   opacity: 0;
-  transition: opacity 0.5s ease-in;
+  transform: scale(1.06);
+  filter: blur(4px);
+  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0, 0, 1), filter 0.5s ease;
 }
 
 .masonry-item img.loaded {
   opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
 }
 
 .masonry-item-info {
-  padding: 1rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--divider);
 }
 
 .masonry-item-title {
   margin: 0 0 0.25rem;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: 600;
+  color: var(--primary-text);
+  line-height: 1.3;
 }
 
 .masonry-item-desc {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
   color: var(--secondary-text);
+  line-height: 1.5;
 }
 
 .loader {
   text-align: center;
   padding: 2.5rem;
+  color: var(--secondary-text);
+  font-size: 0.8125rem;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .masonry-item {
+    animation: masonry-in 0.4s cubic-bezier(0.2, 0, 0, 1) both;
+  }
+  .masonry-column .masonry-item:nth-child(1) {
+    animation-delay: 0.04s;
+  }
+  .masonry-column .masonry-item:nth-child(2) {
+    animation-delay: 0.08s;
+  }
+  .masonry-column .masonry-item:nth-child(3) {
+    animation-delay: 0.12s;
+  }
+  .masonry-column .masonry-item:nth-child(4) {
+    animation-delay: 0.16s;
+  }
+  .masonry-column .masonry-item:nth-child(5) {
+    animation-delay: 0.2s;
+  }
+  .masonry-column .masonry-item:nth-child(6) {
+    animation-delay: 0.24s;
+  }
+  .masonry-column .masonry-item:nth-child(7) {
+    animation-delay: 0.28s;
+  }
+  .masonry-column .masonry-item:nth-child(8) {
+    animation-delay: 0.32s;
+  }
+  .masonry-column .masonry-item:nth-child(9) {
+    animation-delay: 0.36s;
+  }
+  .masonry-column .masonry-item:nth-child(10) {
+    animation-delay: 0.4s;
+  }
+  .masonry-column .masonry-item:nth-child(11) {
+    animation-delay: 0.44s;
+  }
+  .masonry-column .masonry-item:nth-child(12) {
+    animation-delay: 0.48s;
+  }
+  .masonry-column .masonry-item:nth-child(13) {
+    animation-delay: 0.52s;
+  }
+  .masonry-column .masonry-item:nth-child(14) {
+    animation-delay: 0.56s;
+  }
+  .masonry-column .masonry-item:nth-child(15) {
+    animation-delay: 0.6s;
+  }
+  .masonry-column .masonry-item:nth-child(16) {
+    animation-delay: 0.64s;
+  }
+  .masonry-column .masonry-item:nth-child(17) {
+    animation-delay: 0.68s;
+  }
+  .masonry-column .masonry-item:nth-child(18) {
+    animation-delay: 0.72s;
+  }
+  .masonry-column .masonry-item:nth-child(19) {
+    animation-delay: 0.76s;
+  }
+  .masonry-column .masonry-item:nth-child(20) {
+    animation-delay: 0.8s;
+  }
+}
+@keyframes masonry-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
 .dropdown-container {
   position: relative;
   display: inline-block;
@@ -4492,13 +5218,13 @@ body {
   }
 }
 
-.virtual-dropdown .custom-dropdown {
+.custom-dropdown {
   position: relative;
   width: 100%;
   user-select: none;
   display: inline-block;
 }
-.virtual-dropdown .dropdown-trigger {
+.custom-dropdown .dropdown-trigger {
   background: var(--background);
   border: 1px solid var(--divider);
   border-radius: 0.4rem;
@@ -4510,28 +5236,28 @@ body {
   align-items: center;
   transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.15s, border-bottom-color 0.15s;
 }
-.virtual-dropdown .dropdown-trigger:focus {
+.custom-dropdown .dropdown-trigger:focus {
   border-color: var(--accent-color);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
   outline: none;
 }
-.virtual-dropdown .custom-dropdown.open .dropdown-trigger {
+.custom-dropdown.open .dropdown-trigger {
   border-color: var(--accent-color);
   border-radius: 0.4rem 0.4rem 0 0;
   border-bottom-color: var(--background);
   box-shadow: none;
   outline: none;
 }
-.virtual-dropdown .trigger-text {
+.custom-dropdown .trigger-text {
   color: var(--primary-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.virtual-dropdown .trigger-text:not(.has-value) {
+.custom-dropdown .trigger-text:not(.has-value) {
   color: var(--secondary-text);
 }
-.virtual-dropdown .trigger-arrow {
+.custom-dropdown .trigger-arrow {
   font-size: 0.75em;
   color: var(--secondary-text);
   margin-left: 0.5rem;
@@ -4539,10 +5265,10 @@ body {
   display: inline-block;
   transition: transform 0.2s ease;
 }
-.virtual-dropdown .custom-dropdown.open .trigger-arrow {
+.custom-dropdown.open .trigger-arrow {
   transform: rotate(180deg);
 }
-.virtual-dropdown .dropdown-menu {
+.custom-dropdown .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
@@ -4559,18 +5285,18 @@ body {
   pointer-events: none;
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
 }
-.virtual-dropdown .dropdown-menu.open {
+.custom-dropdown .dropdown-menu.open {
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
 }
-.virtual-dropdown .dropdown-search {
+.custom-dropdown .dropdown-search {
   padding: 0.5rem;
   border-bottom: 1px solid var(--divider);
 }
-.virtual-dropdown .dropdown-search input {
+.custom-dropdown .dropdown-search input {
   width: 100%;
   padding: 0 0.5rem;
   height: 2rem;
@@ -4582,25 +5308,25 @@ body {
   outline: none;
   transition: border-color 0.2s;
 }
-.virtual-dropdown .dropdown-search input:focus {
+.custom-dropdown .dropdown-search input:focus {
   border-color: var(--accent-color);
 }
-.virtual-dropdown .dropdown-list-wrapper {
+.custom-dropdown .dropdown-list-wrapper {
   max-height: 250px;
   overflow-y: auto;
   position: relative;
   -webkit-overflow-scrolling: touch;
 }
-.virtual-dropdown .dropdown-list-scroller {
+.custom-dropdown .dropdown-list-scroller {
   position: relative;
 }
-.virtual-dropdown .virtual-content {
+.custom-dropdown .virtual-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
 }
-.virtual-dropdown .dropdown-item {
+.custom-dropdown .dropdown-item {
   padding: 0 0.75rem;
   cursor: pointer;
   box-sizing: border-box;
@@ -4611,16 +5337,16 @@ body {
   color: var(--primary-text);
   transition: background-color 0.15s, color 0.15s;
 }
-.virtual-dropdown .dropdown-item:hover {
+.custom-dropdown .dropdown-item:hover {
   background-color: var(--hover);
   color: var(--accent-color);
 }
-.virtual-dropdown .dropdown-item.selected {
+.custom-dropdown .dropdown-item.selected {
   background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
   color: var(--accent-color);
   font-weight: 500;
 }
-.virtual-dropdown .dropdown-item input[type=checkbox] {
+.custom-dropdown .dropdown-item input[type=checkbox] {
   appearance: none;
   -webkit-appearance: none;
   flex-shrink: 0;
@@ -4637,11 +5363,11 @@ body {
   position: relative;
   transition: border-color 0.15s, background-color 0.15s;
 }
-.virtual-dropdown .dropdown-item input[type=checkbox]:checked {
+.custom-dropdown .dropdown-item input[type=checkbox]:checked {
   background-color: var(--accent-color);
   border-color: var(--accent-color);
 }
-.virtual-dropdown .dropdown-item input[type=checkbox]:checked::after {
+.custom-dropdown .dropdown-item input[type=checkbox]:checked::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -4653,7 +5379,7 @@ body {
   transform: translate(-50%, -55%) rotate(45deg);
 }
 @media (max-width: 600px) {
-  .virtual-dropdown .custom-dropdown {
+  .custom-dropdown {
     max-width: 100%;
   }
 }
@@ -4666,11 +5392,18 @@ body {
   border-radius: 0.4rem;
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  transition: border-color 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.timespan-picker:focus-within {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
 }
 .timespan-picker.is-error {
   border-color: var(--error);
 }
+.timespan-picker.is-error:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 12%, transparent);
+}
 
 .timespan-field {
   flex: 1;
@@ -4678,6 +5411,7 @@ body {
   flex-direction: column;
   padding: 0.75rem 1rem;
   min-width: 0;
+  position: relative;
 }
 .timespan-field label {
   font-size: 0.6875rem;
@@ -4688,6 +5422,13 @@ body {
   margin-bottom: 0.25rem;
   pointer-events: none;
   display: block;
+  transition: color 0.15s ease;
+}
+.timespan-field:focus-within label {
+  color: var(--accent-color);
+}
+.timespan-picker.is-error .timespan-field-end:focus-within .timespan-field label {
+  color: var(--error);
 }
 .timespan-field input[type=time] {
   border: none;
@@ -4730,7 +5471,7 @@ body {
   border-right: 1px solid var(--divider);
   background: var(--background);
   min-width: 4.5rem;
-  gap: 0.2rem;
+  gap: 0.25rem;
   flex-shrink: 0;
 }
 
@@ -4738,6 +5479,13 @@ body {
   font-size: 1rem;
   color: var(--secondary-text);
   line-height: 1;
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+.timespan-picker:focus-within .timespan-arrow {
+  color: var(--accent-color);
+}
+.timespan-picker.is-error .timespan-arrow {
+  color: var(--error);
 }
 
 .timespan-duration {
@@ -4748,17 +5496,26 @@ body {
   white-space: nowrap;
   line-height: 1;
   min-height: 0.75rem;
+  padding: 2px 6px;
+  border-radius: 0.8rem;
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  transition: color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.2, 0, 0, 1);
+}
+.timespan-duration:empty {
+  background: transparent;
+  padding: 0;
 }
 .timespan-picker.is-error .timespan-duration {
   color: var(--error);
+  background: color-mix(in srgb, var(--error) 10%, transparent);
 }
 
 .timespan-bar {
   margin-top: 0.5rem;
-  height: 3px;
+  height: 6px;
   background: var(--divider);
   border-radius: 99px;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
 }
 
@@ -4769,12 +5526,60 @@ body {
   height: 100%;
   background: var(--accent-color);
   border-radius: inherit;
-  transition: left 0.3s ease, width 0.3s ease;
+  transition: left 0.3s cubic-bezier(0.2, 0, 0, 1), width 0.3s cubic-bezier(0.2, 0, 0, 1);
+}
+.timespan-bar-fill::before, .timespan-bar-fill::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  border: 2px solid var(--background);
+  transform: translateY(-50%);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+}
+.timespan-bar-fill::before {
+  left: -6px;
+}
+.timespan-bar-fill::after {
+  right: -6px;
+}
+.timespan-bar-fill[style*=width]:not([style*="width: 0"]):not([style*="width:0"])::before, .timespan-bar-fill[style*=width]:not([style*="width: 0"]):not([style*="width:0"])::after {
+  opacity: 1;
 }
 .timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill {
   background: var(--error);
 }
+.timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill::before, .timespan-picker.is-error ~ .timespan-bar .timespan-bar-fill::after {
+  background: var(--error);
+}
 
+@media (prefers-reduced-motion: no-preference) {
+  .timespan-picker.is-error {
+    animation: timespan-shake 0.35s cubic-bezier(0.2, 0, 0, 1);
+  }
+}
+@keyframes timespan-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-4px);
+  }
+  40% {
+    transform: translateX(4px);
+  }
+  60% {
+    transform: translateX(-2px);
+  }
+  80% {
+    transform: translateX(2px);
+  }
+}
 @media (max-width: 480px) {
   .timespan-picker {
     flex-direction: column;
@@ -4789,6 +5594,9 @@ body {
     padding: 0.5rem 1rem;
     min-width: unset;
   }
+  .timespan-arrow {
+    transform: rotate(90deg);
+  }
   .timespan-field input[type=time] {
     font-size: 2rem;
   }
@@ -4989,6 +5797,39 @@ body {
   border-radius: 0.18rem;
 }
 
+/* Block-format select — reset all global form overrides */
+.editor-block-select {
+  width: auto;
+  flex-shrink: 0;
+  height: 2rem;
+  min-height: unset;
+  padding: 0 0.375rem;
+  border: none;
+  box-shadow: none;
+  border-radius: 0.24rem;
+  background: transparent;
+  color: var(--secondary-text);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+  appearance: auto;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.editor-block-select:hover {
+  background: var(--divider);
+  color: var(--primary-text);
+}
+.editor-block-select:focus {
+  border: none;
+  box-shadow: none;
+}
+.editor-block-select option {
+  background: var(--background);
+  color: var(--primary-text);
+  font-weight: 400;
+}
+
 /* Separators: invisible spacers — visual grouping comes from .toolbar-group */
 .toolbar-separator {
   width: 0.35rem;
@@ -5773,4 +6614,2068 @@ body {
   user-select: none;
 }
 
-/*# sourceMappingURL=style.css.map */
+.cal {
+  --cal-spacing-xs: 4px;
+  --cal-spacing-sm: 8px;
+  --cal-spacing-md: 12px;
+  --cal-spacing-lg: 16px;
+  --cal-bg: var(--background);
+  --cal-bg-alt: var(--secondary-background);
+  --cal-bg-hover: var(--hover);
+  --cal-border: var(--divider);
+  --cal-text: var(--primary-text);
+  --cal-text-muted: var(--secondary-text);
+  --cal-accent: var(--accent-color);
+  --cal-accent-light: var(--accent-color-lighten);
+  --cal-accent-text: #fff;
+  --cal-today-ring: var(--accent-color);
+  --cal-hour-height: 48px;
+  --cal-time-col-width: 52px;
+  --cal-radius: 0.4rem;
+  --cal-radius-sm: calc(0.4rem * 0.5);
+  font-family: var(--font-family, "Outfit", sans-serif);
+  color: var(--cal-text);
+  box-sizing: border-box;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.cal *,
+.cal *::before,
+.cal *::after {
+  box-sizing: inherit;
+}
+
+.cal__header {
+  display: flex;
+  align-items: center;
+  gap: var(--cal-spacing-sm);
+  margin-bottom: var(--cal-spacing-lg);
+  flex-wrap: wrap;
+}
+
+.cal__title {
+  flex: 1;
+  min-width: 120px;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--cal-text);
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.cal__nav {
+  display: flex;
+  gap: var(--cal-spacing-xs);
+  align-items: center;
+}
+
+.cal__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cal-spacing-xs);
+  padding: 6px var(--cal-spacing-md);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  background: transparent;
+  color: var(--cal-text);
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
+  white-space: nowrap;
+}
+.cal__btn:hover {
+  background: var(--cal-bg-hover);
+}
+.cal__btn:focus-visible {
+  outline: 2px solid var(--cal-accent);
+  outline-offset: 2px;
+}
+.cal__btn:active {
+  transform: scale(0.95);
+}
+.cal__btn--active, .cal__btn[aria-pressed=true] {
+  background: var(--cal-accent);
+  border-color: var(--cal-accent);
+  color: var(--cal-accent-text);
+  font-weight: 600;
+}
+.cal__btn .icon-svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  vertical-align: middle;
+}
+
+.cal__view-toggle {
+  display: flex;
+  background: var(--cal-bg-alt);
+  border-radius: var(--cal-radius);
+  padding: 3px;
+  gap: 2px;
+  position: relative;
+}
+.cal__view-toggle .cal__btn {
+  border: none;
+  border-radius: calc(var(--cal-radius) - 2px);
+  padding: 5px 14px;
+  font-size: 0.75rem;
+  background: transparent;
+  color: var(--cal-text-muted);
+  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+.cal__view-toggle .cal__btn--active, .cal__view-toggle .cal__btn[aria-pressed=true] {
+  background: var(--cal-bg);
+  color: var(--cal-text);
+  font-weight: 600;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
+}
+
+.cal__body {
+  width: 100%;
+}
+
+.cal__month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  overflow: hidden;
+  gap: 1px;
+  background: var(--cal-border);
+}
+
+.cal__weekday {
+  background: var(--cal-bg-alt);
+  padding: var(--cal-spacing-sm) var(--cal-spacing-xs);
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cal-text-muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cal__day {
+  background: var(--cal-bg);
+  padding: var(--cal-spacing-xs) var(--cal-spacing-sm);
+  min-height: 88px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  position: relative;
+}
+.cal__day:hover {
+  background: var(--cal-bg-hover);
+}
+.cal__day:focus-visible {
+  outline: 2px solid var(--cal-accent);
+  outline-offset: -2px;
+  z-index: 1;
+}
+.cal__day--empty {
+  background: var(--cal-bg-alt);
+  cursor: default;
+  pointer-events: none;
+}
+.cal__day--outside .cal__day-num {
+  opacity: 0.25;
+}
+.cal__day--outside .cal__day-events {
+  opacity: 0.25;
+}
+.cal__day.is-today .cal__day-num {
+  background: var(--cal-today-ring);
+  color: var(--cal-accent-text);
+  border-radius: 50%;
+  font-weight: 700;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+}
+.cal__day.is-selected {
+  background: color-mix(in srgb, var(--cal-accent) 6%, var(--cal-bg));
+}
+.cal__day.is-selected .cal__day-num {
+  background: var(--cal-accent);
+  color: var(--cal-accent-text);
+  border-radius: 50%;
+  font-weight: 700;
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--cal-accent) 35%, transparent);
+}
+.cal__day.has-events::after {
+  content: "";
+  display: none;
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--cal-accent);
+}
+
+.cal__day-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--cal-text);
+  margin-bottom: var(--cal-spacing-xs);
+  flex-shrink: 0;
+  border-radius: 50%;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
+}
+
+.cal__day-events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.cal__event-pill {
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  padding: 2px 6px;
+  border-radius: var(--cal-radius-sm);
+  background: var(--cal-bg-alt);
+  color: var(--cal-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border: none;
+  border-left: 2px solid var(--cal-accent-light);
+  display: block;
+  text-align: left;
+  width: 100%;
+  transition: background 0.12s ease, transform 0.1s ease;
+}
+.cal__event-pill:hover {
+  background: var(--cal-bg-hover);
+}
+.cal__event-pill:active {
+  transform: scale(0.97);
+}
+.cal__event-pill:focus-visible {
+  outline: 2px solid var(--cal-accent);
+  outline-offset: 1px;
+}
+.cal__event-pill.badge-success {
+  border-left-color: var(--success);
+}
+.cal__event-pill.badge-warning {
+  border-left-color: var(--warning);
+}
+.cal__event-pill.badge-error {
+  border-left-color: var(--error);
+}
+.cal__event-pill.badge-info {
+  border-left-color: var(--accent-color);
+}
+
+.cal__event-more {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--cal-accent);
+  padding: 1px 6px;
+  cursor: pointer;
+}
+
+.cal__event-time {
+  font-weight: 600;
+  margin-right: 3px;
+  opacity: 0.7;
+}
+
+.cal__week {
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  overflow: hidden;
+}
+
+.cal__week-head {
+  display: grid;
+  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  background: var(--cal-bg-alt);
+  border-bottom: 1px solid var(--cal-border);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.cal__week-head::-webkit-scrollbar {
+  width: 5px;
+}
+.cal__week-head::-webkit-scrollbar-track, .cal__week-head::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.cal__week-head-time {
+  padding: var(--cal-spacing-sm) var(--cal-spacing-xs);
+  font-size: 0.6875rem;
+  color: var(--cal-text-muted);
+}
+
+.cal__week-head-day {
+  padding: var(--cal-spacing-sm) var(--cal-spacing-xs);
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cal-text-muted);
+  border-left: 1px solid var(--cal-border);
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.cal__week-head-day span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: var(--cal-text);
+  line-height: 1;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-top: 2px;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
+  text-transform: none;
+  letter-spacing: normal;
+}
+.cal__week-head-day.is-today span {
+  background: var(--cal-today-ring);
+  color: var(--cal-accent-text);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+}
+.cal__week-head-day.is-selected span {
+  background: var(--cal-accent);
+  color: var(--cal-accent-text);
+}
+
+.cal__allday {
+  display: grid;
+  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  border-bottom: 1px solid var(--cal-border);
+  min-height: 32px;
+  background: var(--cal-bg);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.cal__allday::-webkit-scrollbar {
+  width: 5px;
+}
+.cal__allday::-webkit-scrollbar-track, .cal__allday::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.cal__allday-label {
+  padding: var(--cal-spacing-xs);
+  font-size: 0.625rem;
+  color: var(--cal-text-muted);
+  display: flex;
+  align-items: flex-start;
+  padding-top: 6px;
+  font-weight: 500;
+}
+
+.cal__allday-col {
+  border-left: 1px solid var(--cal-border);
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cal__week-body {
+  overflow-y: auto;
+  max-height: 480px;
+  position: relative;
+  background: var(--cal-bg);
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--cal-border) transparent;
+}
+.cal__week-body::-webkit-scrollbar {
+  width: 5px;
+}
+.cal__week-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cal__week-body::-webkit-scrollbar-thumb {
+  background: var(--cal-border);
+  border-radius: 3px;
+}
+
+.cal__week-grid {
+  display: grid;
+  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  position: relative;
+}
+
+.cal__time-col {
+  display: flex;
+  flex-direction: column;
+  background: var(--cal-bg-alt);
+}
+
+.cal__time-slot {
+  height: var(--cal-hour-height);
+  display: flex;
+  align-items: flex-start;
+  padding-top: 3px;
+  padding-right: var(--cal-spacing-sm);
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: var(--cal-text-muted);
+  justify-content: flex-end;
+  border-top: 1px solid var(--cal-border);
+  flex-shrink: 0;
+}
+.cal__time-slot:first-child {
+  border-top: none;
+}
+
+.cal__day-col {
+  border-left: 1px solid var(--cal-border);
+  position: relative;
+}
+
+.cal__day-col-hour {
+  height: var(--cal-hour-height);
+  border-top: 1px solid var(--cal-border);
+  flex-shrink: 0;
+  position: relative;
+}
+.cal__day-col-hour:first-child {
+  border-top: none;
+}
+.cal__day-col-hour::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  background: var(--cal-border);
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.cal__week-event {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  border-radius: var(--cal-radius-sm);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+  padding: 3px 6px;
+  overflow: hidden;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--cal-accent) 10%, var(--cal-bg));
+  color: var(--cal-text);
+  border-left: 3px solid var(--cal-accent);
+  z-index: 1;
+  transition: box-shadow 0.15s ease, transform 0.1s ease;
+}
+.cal__week-event:hover {
+  z-index: 2;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+}
+.cal__week-event:active {
+  transform: scale(0.98);
+}
+.cal__week-event:focus-visible {
+  outline: 2px solid var(--cal-accent);
+  outline-offset: 1px;
+  z-index: 3;
+}
+.cal__week-event.badge-success {
+  border-left-color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, var(--cal-bg));
+}
+.cal__week-event.badge-warning {
+  border-left-color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 10%, var(--cal-bg));
+}
+.cal__week-event.badge-error {
+  border-left-color: var(--error);
+  background: color-mix(in srgb, var(--error) 10%, var(--cal-bg));
+}
+.cal__week-event.badge-info {
+  border-left-color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 10%, var(--cal-bg));
+}
+
+.cal__now-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--error);
+  z-index: 5;
+  pointer-events: none;
+}
+.cal__now-line::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -5px;
+  top: -4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--error);
+  animation: cal-now-pulse 2s ease-in-out infinite;
+}
+
+.cal__agenda {
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  overflow: hidden;
+}
+
+.cal__agenda-day {
+  display: flex;
+  gap: var(--cal-spacing-lg);
+  padding: var(--cal-spacing-md) var(--cal-spacing-lg);
+  border-bottom: 1px solid var(--cal-border);
+}
+.cal__agenda-day:last-child {
+  border-bottom: none;
+}
+.cal__agenda-day.is-today {
+  background: color-mix(in srgb, var(--cal-accent) 4%, var(--cal-bg));
+}
+
+.cal__agenda-date {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 44px;
+  flex-shrink: 0;
+}
+
+.cal__agenda-dow {
+  font-size: 0.625rem;
+  color: var(--cal-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+}
+
+.cal__agenda-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--cal-text);
+  border-radius: 50%;
+  margin-top: 2px;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+.cal__agenda-num.is-today {
+  background: var(--cal-today-ring);
+  color: var(--cal-accent-text);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+}
+
+.cal__agenda-events {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cal-spacing-sm);
+  padding-top: 4px;
+  min-width: 0;
+}
+
+.cal__agenda-event {
+  display: flex;
+  align-items: baseline;
+  gap: var(--cal-spacing-sm);
+  padding: var(--cal-spacing-sm) var(--cal-spacing-md);
+  border-radius: var(--cal-radius-sm);
+  background: var(--cal-bg-alt);
+  border-left: 3px solid var(--cal-accent-light);
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+}
+.cal__agenda-event:hover {
+  background: var(--cal-bg-hover);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+.cal__agenda-event:active {
+  transform: scale(0.98);
+}
+.cal__agenda-event:focus-visible {
+  outline: 2px solid var(--cal-accent);
+  outline-offset: 1px;
+}
+.cal__agenda-event.badge-success {
+  border-left-color: var(--success);
+}
+.cal__agenda-event.badge-warning {
+  border-left-color: var(--warning);
+}
+.cal__agenda-event.badge-error {
+  border-left-color: var(--error);
+}
+.cal__agenda-event.badge-info {
+  border-left-color: var(--accent-color);
+}
+
+.cal__agenda-event-time {
+  font-size: 0.75rem;
+  color: var(--cal-text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  min-width: 110px;
+  flex-shrink: 0;
+}
+
+.cal__agenda-event-title {
+  font-size: 0.875rem;
+  color: var(--cal-text);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cal__agenda-empty {
+  padding: var(--cal-spacing-lg);
+  color: var(--cal-text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  .cal__header {
+    gap: var(--cal-spacing-xs);
+  }
+  .cal__title {
+    font-size: 1.0625rem;
+    order: -1;
+    width: 100%;
+  }
+  .cal__nav {
+    flex: 1;
+  }
+  .cal__view-toggle {
+    padding: 2px;
+    gap: 1px;
+  }
+  .cal__view-toggle .cal__btn {
+    padding: 4px 10px;
+    font-size: 0.6875rem;
+  }
+  .cal__month-grid {
+    border: none;
+    border-radius: 0;
+    gap: 0;
+    background: transparent;
+  }
+  .cal__weekday {
+    background: transparent;
+    padding: var(--cal-spacing-sm) 0;
+    font-size: 0.625rem;
+  }
+  .cal__day {
+    min-height: 52px;
+    padding: var(--cal-spacing-xs) 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    background: transparent;
+  }
+  .cal__day:hover {
+    background: transparent;
+  }
+  .cal__day:hover .cal__day-num {
+    background: var(--cal-bg-hover);
+  }
+  .cal__day--empty {
+    background: transparent;
+  }
+  .cal__day--outside .cal__day-num {
+    opacity: 0.25;
+  }
+  .cal__day.is-selected {
+    background: transparent;
+  }
+  .cal__day.has-events::after {
+    display: block;
+    position: static;
+    transform: none;
+    margin-top: 3px;
+  }
+  .cal__day-num {
+    width: 36px;
+    height: 36px;
+    font-size: 0.8125rem;
+    margin-bottom: 0;
+  }
+  .cal__day-events,
+  .cal__event-pill,
+  .cal__event-more {
+    display: none;
+  }
+  .cal {
+    --cal-time-col-width: 40px;
+  }
+  .cal__week-body {
+    max-height: 360px;
+  }
+  .cal__week-head-day {
+    font-size: 0.5625rem;
+    padding: var(--cal-spacing-xs) 2px;
+  }
+  .cal__week-head-day span {
+    font-size: 0.875rem;
+    width: 28px;
+    height: 28px;
+  }
+  .cal__time-slot {
+    font-size: 0.5rem;
+    padding-right: 3px;
+  }
+  .cal__agenda-day {
+    padding: var(--cal-spacing-sm) var(--cal-spacing-md);
+    gap: var(--cal-spacing-md);
+  }
+  .cal__agenda-event {
+    padding: var(--cal-spacing-xs) var(--cal-spacing-sm);
+    flex-direction: column;
+    gap: 2px;
+  }
+  .cal__agenda-event-time {
+    min-width: 0;
+    font-size: 0.6875rem;
+  }
+  .cal__agenda-event-title {
+    font-size: 0.8125rem;
+  }
+}
+@media print {
+  .cal__header .cal__view-toggle,
+  .cal__header .cal__nav .cal__btn--today {
+    display: none;
+  }
+  .cal__week-body {
+    max-height: none;
+    overflow: visible;
+  }
+  .cal__month-grid,
+  .cal__week,
+  .cal__agenda {
+    border: 1px solid #ccc;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .cal__body {
+    animation: cal-slide-in 0.25s cubic-bezier(0.2, 0, 0, 1);
+  }
+  .cal__day,
+  .cal__agenda-day {
+    animation: cal-cell-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
+  }
+  .cal__month-grid .cal__day:nth-child(1) {
+    animation-delay: 0.01s;
+  }
+  .cal__month-grid .cal__day:nth-child(2) {
+    animation-delay: 0.02s;
+  }
+  .cal__month-grid .cal__day:nth-child(3) {
+    animation-delay: 0.03s;
+  }
+  .cal__month-grid .cal__day:nth-child(4) {
+    animation-delay: 0.04s;
+  }
+  .cal__month-grid .cal__day:nth-child(5) {
+    animation-delay: 0.05s;
+  }
+  .cal__month-grid .cal__day:nth-child(6) {
+    animation-delay: 0.06s;
+  }
+  .cal__month-grid .cal__day:nth-child(7) {
+    animation-delay: 0.07s;
+  }
+  .cal__month-grid .cal__day:nth-child(8) {
+    animation-delay: 0.08s;
+  }
+  .cal__month-grid .cal__day:nth-child(9) {
+    animation-delay: 0.09s;
+  }
+  .cal__month-grid .cal__day:nth-child(10) {
+    animation-delay: 0.1s;
+  }
+  .cal__month-grid .cal__day:nth-child(11) {
+    animation-delay: 0.11s;
+  }
+  .cal__month-grid .cal__day:nth-child(12) {
+    animation-delay: 0.12s;
+  }
+  .cal__month-grid .cal__day:nth-child(13) {
+    animation-delay: 0.13s;
+  }
+  .cal__month-grid .cal__day:nth-child(14) {
+    animation-delay: 0.14s;
+  }
+  .cal__month-grid .cal__day:nth-child(15) {
+    animation-delay: 0.15s;
+  }
+  .cal__month-grid .cal__day:nth-child(16) {
+    animation-delay: 0.16s;
+  }
+  .cal__month-grid .cal__day:nth-child(17) {
+    animation-delay: 0.17s;
+  }
+  .cal__month-grid .cal__day:nth-child(18) {
+    animation-delay: 0.18s;
+  }
+  .cal__month-grid .cal__day:nth-child(19) {
+    animation-delay: 0.19s;
+  }
+  .cal__month-grid .cal__day:nth-child(20) {
+    animation-delay: 0.2s;
+  }
+  .cal__month-grid .cal__day:nth-child(21) {
+    animation-delay: 0.21s;
+  }
+  .cal__month-grid .cal__day:nth-child(22) {
+    animation-delay: 0.22s;
+  }
+  .cal__month-grid .cal__day:nth-child(23) {
+    animation-delay: 0.23s;
+  }
+  .cal__month-grid .cal__day:nth-child(24) {
+    animation-delay: 0.24s;
+  }
+  .cal__month-grid .cal__day:nth-child(25) {
+    animation-delay: 0.25s;
+  }
+  .cal__month-grid .cal__day:nth-child(26) {
+    animation-delay: 0.26s;
+  }
+  .cal__month-grid .cal__day:nth-child(27) {
+    animation-delay: 0.27s;
+  }
+  .cal__month-grid .cal__day:nth-child(28) {
+    animation-delay: 0.28s;
+  }
+  .cal__month-grid .cal__day:nth-child(29) {
+    animation-delay: 0.29s;
+  }
+  .cal__month-grid .cal__day:nth-child(30) {
+    animation-delay: 0.3s;
+  }
+  .cal__month-grid .cal__day:nth-child(31) {
+    animation-delay: 0.31s;
+  }
+  .cal__month-grid .cal__day:nth-child(32) {
+    animation-delay: 0.32s;
+  }
+  .cal__month-grid .cal__day:nth-child(33) {
+    animation-delay: 0.33s;
+  }
+  .cal__month-grid .cal__day:nth-child(34) {
+    animation-delay: 0.34s;
+  }
+  .cal__month-grid .cal__day:nth-child(35) {
+    animation-delay: 0.35s;
+  }
+  .cal__month-grid .cal__day:nth-child(36) {
+    animation-delay: 0.36s;
+  }
+  .cal__month-grid .cal__day:nth-child(37) {
+    animation-delay: 0.37s;
+  }
+  .cal__month-grid .cal__day:nth-child(38) {
+    animation-delay: 0.38s;
+  }
+  .cal__month-grid .cal__day:nth-child(39) {
+    animation-delay: 0.39s;
+  }
+  .cal__month-grid .cal__day:nth-child(40) {
+    animation-delay: 0.4s;
+  }
+  .cal__month-grid .cal__day:nth-child(41) {
+    animation-delay: 0.41s;
+  }
+  .cal__month-grid .cal__day:nth-child(42) {
+    animation-delay: 0.42s;
+  }
+  .cal__month-grid .cal__day:nth-child(43) {
+    animation-delay: 0.43s;
+  }
+  .cal__month-grid .cal__day:nth-child(44) {
+    animation-delay: 0.44s;
+  }
+  .cal__month-grid .cal__day:nth-child(45) {
+    animation-delay: 0.45s;
+  }
+  .cal__month-grid .cal__day:nth-child(46) {
+    animation-delay: 0.46s;
+  }
+  .cal__month-grid .cal__day:nth-child(47) {
+    animation-delay: 0.47s;
+  }
+  .cal__month-grid .cal__day:nth-child(48) {
+    animation-delay: 0.48s;
+  }
+  .cal__month-grid .cal__day:nth-child(49) {
+    animation-delay: 0.49s;
+  }
+  .cal__agenda-day:nth-child(1) {
+    animation-delay: 0.03s;
+  }
+  .cal__agenda-day:nth-child(2) {
+    animation-delay: 0.06s;
+  }
+  .cal__agenda-day:nth-child(3) {
+    animation-delay: 0.09s;
+  }
+  .cal__agenda-day:nth-child(4) {
+    animation-delay: 0.12s;
+  }
+  .cal__agenda-day:nth-child(5) {
+    animation-delay: 0.15s;
+  }
+  .cal__agenda-day:nth-child(6) {
+    animation-delay: 0.18s;
+  }
+  .cal__agenda-day:nth-child(7) {
+    animation-delay: 0.21s;
+  }
+  .cal__agenda-day:nth-child(8) {
+    animation-delay: 0.24s;
+  }
+  .cal__agenda-day:nth-child(9) {
+    animation-delay: 0.27s;
+  }
+  .cal__agenda-day:nth-child(10) {
+    animation-delay: 0.3s;
+  }
+}
+@keyframes cal-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes cal-cell-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes cal-now-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.3);
+  }
+}
+.group-picker {
+  position: relative;
+  width: 100%;
+  color: var(--primary-text);
+}
+.group-picker__selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2rem;
+  padding: 0.35rem 0.6rem;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: 0.2rem;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.group-picker__selection .chip {
+  margin: 0;
+  animation: gp-chip-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.group-picker__selection .chip.closeable button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.group-picker__selection .chip.closeable button .icon {
+  font-size: 0.7rem;
+  top: 0;
+}
+.group-picker__selection:empty::before {
+  content: attr(data-placeholder);
+  color: var(--secondary-text);
+  font-size: 0.875rem;
+}
+.group-picker__selection:focus-within {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+}
+.group-picker__selection .chip.group-picker__chip--parent {
+  background: var(--accent-color);
+  color: var(--background);
+}
+.group-picker__selection .chip.group-picker__chip--parent button {
+  background: color-mix(in srgb, var(--accent-color) 78%, black);
+  color: var(--background);
+}
+.group-picker__search {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+.group-picker__search input {
+  padding-left: 2.2rem;
+}
+.group-picker__search-icon {
+  position: absolute;
+  left: 0.55rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: var(--secondary-text);
+  pointer-events: none;
+  opacity: 0.45;
+  z-index: 1;
+}
+.group-picker__list {
+  max-height: 420px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--divider);
+  border-radius: 0.2rem;
+  background: var(--background);
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+}
+.group-picker__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1rem;
+  color: var(--secondary-text);
+  font-size: 0.875rem;
+  text-align: center;
+  gap: 0.5rem;
+}
+.group-picker__empty .icon {
+  font-size: 2rem;
+  opacity: 0.2;
+}
+.group-picker__group {
+  border-bottom: 1px solid var(--divider);
+}
+.group-picker__group:last-child {
+  border-bottom: none;
+}
+.group-picker__group.is-expanded > .group-picker__group-header {
+  background: color-mix(in srgb, var(--accent-color) 4%, transparent);
+}
+.group-picker__group.is-expanded > .group-picker__group-header .group-picker__group-label {
+  color: var(--accent-color);
+}
+.group-picker__group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0.85rem;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.15s ease;
+}
+.group-picker__group-header:hover {
+  background: var(--hover);
+}
+.group-picker__group-header:active {
+  background: var(--secondary-background);
+}
+.group-picker__chevron {
+  flex-shrink: 0;
+  font-size: 1rem;
+  color: var(--secondary-text);
+  opacity: 0.5;
+  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease, opacity 0.15s ease;
+}
+.group-picker__group.is-expanded .group-picker__chevron {
+  transform: rotate(90deg);
+  color: var(--accent-color);
+  opacity: 1;
+}
+.group-picker__group-label {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary-text);
+  transition: color 0.15s ease;
+}
+.group-picker__group-label mark {
+  background: color-mix(in srgb, var(--warning) 22%, transparent);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+.group-picker__group-action {
+  flex-shrink: 0;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  padding: 0.15rem 0.6rem;
+  border-radius: 1.2rem;
+  border: 1px solid var(--divider);
+  background: transparent;
+  color: var(--secondary-text);
+  line-height: 1.5;
+  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
+}
+.group-picker__group-action:hover:not(.button-primary):not(:disabled) {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+  transform: none;
+}
+.group-picker__group-action:active:not(:disabled) {
+  transform: scale(0.94);
+}
+.group-picker__group-action.button-primary {
+  border-radius: 1.2rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  padding: 0.15rem 0.6rem;
+  border: 1px solid transparent;
+  line-height: 1.5;
+}
+.group-picker__group.is-leaf {
+  cursor: pointer;
+}
+.group-picker__group.is-leaf.is-selected > .group-picker__group-header {
+  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+}
+.group-picker__group.is-leaf.is-selected > .group-picker__group-header .group-picker__group-label {
+  color: var(--accent-color);
+}
+.group-picker__group.is-leaf.is-selected .group-picker__leaf-check {
+  opacity: 1;
+  transform: scale(1);
+}
+.group-picker__leaf-check {
+  flex-shrink: 0;
+  font-size: 1.1rem;
+  color: var(--accent-color);
+  opacity: 0;
+  transform: scale(0.3);
+  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.group-picker__subgroups {
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+.group-picker__group.is-expanded .group-picker__subgroups {
+  opacity: 1;
+}
+.group-picker__subgroup-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  padding: 0.3rem 0.85rem 0.75rem 2.35rem;
+}
+.group-picker__subgroup-list .chip {
+  margin: 0;
+}
+.group-picker__subgroup {
+  transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
+}
+.group-picker__subgroup.is-selected {
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+  color: var(--accent-color);
+  outline: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
+  font-weight: 500;
+}
+.group-picker__subgroup.is-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.group-picker__subgroup mark {
+  background: color-mix(in srgb, var(--warning) 22%, transparent);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+@keyframes gp-chip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.7) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@media (max-width: 768px) {
+  .group-picker__list {
+    max-height: 55vh;
+  }
+  .group-picker__group-header {
+    padding: 0.9rem 0.85rem;
+  }
+  .group-picker__subgroup-list {
+    padding-left: 2rem;
+  }
+}
+.chart {
+  --chart-color-1: var(--accent-color);
+  --chart-color-2: var(--success);
+  --chart-color-3: var(--warning);
+  --chart-color-4: var(--error);
+  --chart-color-5: #8B5CF6;
+  --chart-color-6: #06B6D4;
+  --chart-color-7: #F97316;
+  --chart-color-8: #EC4899;
+}
+
+.chart {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  color: var(--primary-text);
+  font-size: 0.875rem;
+}
+.chart-header {
+  margin-bottom: 0.75rem;
+}
+.chart-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--primary-text);
+  line-height: 1.3;
+}
+.chart-subtitle {
+  font-size: 0.8125rem;
+  color: var(--secondary-text);
+  margin-top: 0.2rem;
+}
+.chart-canvas {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.chart-svg {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+.chart .chart-axis-line {
+  stroke: var(--divider);
+  stroke-width: 1;
+}
+.chart .chart-grid-line {
+  stroke: var(--divider);
+  stroke-width: 1;
+  stroke-dasharray: 3 4;
+  opacity: 0.7;
+}
+.chart .chart-axis-label {
+  fill: var(--secondary-text);
+  font-size: 0.6875rem;
+  font-family: inherit;
+}
+.chart .chart-line {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: var(--path-length, 9999);
+  stroke-dashoffset: var(--path-length, 9999);
+  animation: chart-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.chart .chart-area {
+  animation: chart-fade-in 0.8s ease forwards;
+}
+.chart .chart-point-dot {
+  transition: r 0.15s ease;
+}
+.chart .chart-point-ring {
+  opacity: 0;
+  transition: opacity 0.15s ease, r 0.15s ease;
+}
+.chart .chart-point-group {
+  cursor: pointer;
+}
+.chart .chart-point-group:hover .chart-point-dot {
+  r: 5;
+}
+.chart .chart-point-group:hover .chart-point-ring {
+  opacity: 1;
+}
+.chart .chart-bar {
+  transition: opacity 0.15s ease, filter 0.15s ease;
+  cursor: pointer;
+  transform-box: fill-box;
+}
+.chart .chart-bar--vertical {
+  transform-origin: bottom center;
+  animation: chart-grow-y calc(0.5s + var(--animation-delay, 0ms)) cubic-bezier(0.4, 0, 0.2, 1) both;
+  animation-delay: var(--animation-delay, 0ms);
+}
+.chart .chart-bar--horizontal {
+  transform-origin: left center;
+  animation: chart-grow-x calc(0.5s + var(--animation-delay, 0ms)) cubic-bezier(0.4, 0, 0.2, 1) both;
+  animation-delay: var(--animation-delay, 0ms);
+}
+.chart .chart-bar:hover {
+  opacity: 0.85;
+  filter: brightness(1.08);
+}
+.chart .chart-slice {
+  cursor: pointer;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s ease;
+  animation: chart-slice-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
+  animation-delay: var(--animation-delay, 0ms);
+}
+.chart .chart-slice:hover {
+  filter: brightness(1.08);
+}
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 1rem;
+  margin-top: 0.75rem;
+}
+.chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--secondary-text);
+  cursor: default;
+}
+.chart-legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+.chart-pie-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1.25rem;
+  margin-top: 0.75rem;
+  justify-content: center;
+}
+.chart-pie-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--secondary-text);
+}
+.chart-pie-legend-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.chart-pie-legend-value {
+  font-weight: 600;
+  color: var(--primary-text);
+  margin-left: 0.15rem;
+}
+.chart-tooltip {
+  position: fixed;
+  background: var(--primary-dark);
+  color: var(--primary-light);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.4rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 9999;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.chart-tooltip.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.chart-tooltip strong {
+  display: block;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 1px;
+}
+
+@keyframes chart-draw {
+  from {
+    stroke-dashoffset: var(--path-length, 9999);
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes chart-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes chart-grow-y {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+@keyframes chart-grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+@keyframes chart-slice-in {
+  from {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.sidebar-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar-nav {
+  width: var(--sidebar-width, 240px);
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  background: var(--primary-bg);
+  border-right: 1px solid var(--divider);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+}
+.sidebar-nav .sidebar-scroll {
+  flex: 1;
+  min-height: 0;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.sidebar-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--sidebar-width, 240px);
+}
+
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 99;
+}
+.sidebar-backdrop.is-visible {
+  display: block;
+}
+
+.sidebar-toggle {
+  display: none;
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--primary-text);
+  border-radius: 0.4rem;
+}
+.sidebar-toggle:hover {
+  background: var(--secondary-background);
+}
+.sidebar-toggle svg {
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .sidebar-toggle {
+    display: flex;
+    align-items: center;
+  }
+  .sidebar-nav {
+    left: calc(-1 * var(--sidebar-width, 240px));
+    transition: left 0.25s ease;
+    box-shadow: none;
+  }
+  .sidebar-nav.is-open {
+    left: 0;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+  }
+  .sidebar-main {
+    margin-left: 0;
+  }
+}
+.sidebar-nav .docs-sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.25rem 1rem;
+  border-bottom: 1px solid var(--divider);
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--primary-text);
+  text-decoration: none;
+  letter-spacing: -0.01em;
+}
+.sidebar-nav .docs-sidebar-logo .docs-logo-badge {
+  font-size: 0.6rem;
+  font-weight: 700;
+  background: var(--accent-color);
+  color: #fff;
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.25rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.sidebar-nav .docs-sidebar-search {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--divider);
+}
+.sidebar-nav .docs-sidebar-search input {
+  width: 100%;
+  height: 2rem;
+  font-size: 0.8rem;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.4rem;
+  padding: 0 0.75rem;
+  color: var(--primary-text);
+  outline: none;
+}
+.sidebar-nav .docs-sidebar-search input::placeholder {
+  color: var(--secondary-text);
+}
+.sidebar-nav .docs-sidebar-search input:focus {
+  border-color: var(--accent-color);
+}
+
+.docs-nav {
+  flex: 1;
+  padding: 0.75rem 0 2rem;
+  overflow-y: auto;
+}
+.docs-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.docs-nav .docs-nav-section {
+  margin-bottom: 0.25rem;
+}
+.docs-nav .docs-nav-section-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--secondary-text);
+  padding: 0.85rem 1rem 0.3rem;
+}
+.docs-nav .docs-nav-item a {
+  display: block;
+  padding: 0.3rem 1rem 0.3rem 1.25rem;
+  font-size: 0.85rem;
+  color: var(--secondary-text);
+  text-decoration: none;
+  border-radius: 0;
+  transition: color 0.15s, background 0.15s;
+  border-left: 2px solid transparent;
+}
+.docs-nav .docs-nav-item a:hover {
+  color: var(--primary-text);
+  background: var(--secondary-background);
+}
+.docs-nav .docs-nav-item a.is-active {
+  color: var(--accent-color);
+  border-left-color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  font-weight: 500;
+}
+
+.docs-topbar {
+  position: sticky;
+  top: 0;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2rem;
+  background: var(--primary-bg);
+  border-bottom: 1px solid var(--divider);
+  z-index: 90;
+  gap: 1rem;
+}
+.docs-topbar .docs-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--secondary-text);
+}
+.docs-topbar .docs-breadcrumb a {
+  color: var(--secondary-text);
+  text-decoration: none;
+}
+.docs-topbar .docs-breadcrumb a:hover {
+  color: var(--primary-text);
+}
+.docs-topbar .docs-breadcrumb .sep {
+  opacity: 0.4;
+}
+.docs-topbar .docs-breadcrumb .current {
+  color: var(--primary-text);
+  font-weight: 500;
+}
+.docs-topbar .docs-topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.docs-content {
+  flex: 1;
+  padding: 2.5rem 2rem 4rem;
+  max-width: 860px;
+}
+.docs-content h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.5rem;
+}
+.docs-content .docs-lead {
+  font-size: 1rem;
+  color: var(--secondary-text);
+  margin: 0 0 1rem;
+  line-height: 1.6;
+  max-width: 600px;
+}
+.docs-content .docs-import {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 2rem;
+  padding: 0.4rem 0.75rem;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.4rem;
+  font-size: 0.8rem;
+  font-family: ui-monospace, "Cascadia Code", "SF Mono", monospace;
+  color: var(--accent-color);
+}
+.docs-content .docs-import::before {
+  content: "import";
+  color: var(--secondary-text);
+  font-style: italic;
+  font-family: inherit;
+}
+.docs-content h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 2.5rem 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--divider);
+}
+.docs-content h3 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 1.75rem 0 0.75rem;
+}
+.docs-content p {
+  line-height: 1.7;
+  margin: 0 0 1rem;
+}
+.docs-content code {
+  font-size: 0.8em;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.25rem;
+  padding: 0.1em 0.35em;
+}
+.docs-content .docs-demo {
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.4rem;
+  padding: 2rem;
+  margin: 1rem 0;
+}
+.docs-content .docs-demo h1 {
+  font-size: 2rem;
+  font-weight: 800;
+}
+.docs-content .docs-demo h2 {
+  font-size: 1.625rem;
+  font-weight: 750;
+  border: none;
+  padding: 0;
+  margin-top: 0;
+}
+.docs-content .docs-demo h3 {
+  font-size: 1.375rem;
+  font-weight: 700;
+}
+.docs-content .docs-demo h4 {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.docs-content .docs-demo h5 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.docs-content .docs-demo.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.docs-content .docs-props-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.82rem;
+  margin: 1rem 0 2rem;
+}
+.docs-content .docs-props-table th {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  font-weight: 600;
+  color: var(--secondary-text);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.docs-content .docs-props-table td {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--divider);
+  vertical-align: top;
+}
+.docs-content .docs-props-table td code {
+  font-size: 0.78em;
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+  color: var(--accent-color);
+}
+.docs-content .docs-props-table tr:hover td {
+  background: var(--secondary-background);
+}
+
+.landing-hero {
+  padding: 5rem 2rem 4rem;
+  text-align: center;
+  background: var(--primary-bg);
+  border-bottom: 1px solid var(--divider);
+}
+.landing-hero .landing-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
+  border-radius: 2rem;
+  padding: 0.25rem 0.75rem;
+  margin-bottom: 1.5rem;
+}
+.landing-hero h1 {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  margin: 0 0 1rem;
+  line-height: 1.1;
+}
+.landing-hero .landing-tagline {
+  font-size: clamp(1rem, 2.5vw, 1.2rem);
+  color: var(--secondary-text);
+  max-width: 520px;
+  margin: 0 auto 2rem;
+  line-height: 1.6;
+}
+.landing-hero .landing-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.landing-hero .landing-install {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.4rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  font-family: monospace;
+  color: var(--primary-text);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.landing-hero .landing-install:hover {
+  border-color: var(--accent-color);
+}
+.landing-hero .landing-install .install-prefix {
+  color: var(--secondary-text);
+}
+
+.landing-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0;
+  border-bottom: 1px solid var(--divider);
+}
+.landing-features .feature-item {
+  padding: 1.5rem 2rem;
+  border-right: 1px solid var(--divider);
+}
+.landing-features .feature-item:last-child {
+  border-right: none;
+}
+.landing-features .feature-item .feature-icon {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+.landing-features .feature-item .feature-icon svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+.landing-features .feature-item .feature-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.2rem;
+}
+.landing-features .feature-item .feature-desc {
+  font-size: 0.78rem;
+  color: var(--secondary-text);
+  line-height: 1.5;
+}
+
+.landing-section {
+  padding: 3.5rem 2rem;
+  max-width: 1100px;
+  margin: 0 auto;
+  width: 100%;
+}
+.landing-section-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.4rem;
+}
+.landing-section-sub {
+  color: var(--secondary-text);
+  font-size: 0.9rem;
+  margin: 0 0 2rem;
+}
+
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.component-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.25rem 1.25rem 1rem;
+  border: 1px solid var(--divider);
+  border-radius: 0.8rem;
+  text-decoration: none;
+  color: var(--primary-text);
+  background: var(--primary-bg);
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+.component-card:hover {
+  border-color: var(--accent-color);
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 15%, transparent);
+  transform: translateY(-1px);
+}
+.component-card .cc-icon {
+  font-size: 1.4rem;
+  line-height: 1;
+  margin-bottom: 0.25rem;
+}
+.component-card .cc-icon svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+.component-card .cc-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.component-card .cc-desc {
+  font-size: 0.78rem;
+  color: var(--secondary-text);
+  line-height: 1.5;
+}
+.component-card .cc-count {
+  font-size: 0.7rem;
+  color: var(--secondary-text);
+  margin-top: auto;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--divider);
+}
+
+.landing-quickstart {
+  background: var(--secondary-background);
+  border-top: 1px solid var(--divider);
+  border-bottom: 1px solid var(--divider);
+  padding: 3.5rem 2rem;
+}
+.landing-quickstart .qs-inner {
+  max-width: 700px;
+  margin: 0 auto;
+}
+.landing-quickstart h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.4rem;
+}
+.landing-quickstart p {
+  color: var(--secondary-text);
+  font-size: 0.9rem;
+  margin: 0 0 1.5rem;
+}
+.landing-quickstart .qs-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.landing-quickstart .qs-step {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+.landing-quickstart .qs-step .qs-num {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--accent-color);
+  color: #fff;
+  border-radius: 50%;
+  font-size: 0.7rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.1rem;
+}
+.landing-quickstart .qs-step .qs-text {
+  flex: 1;
+}
+.landing-quickstart .qs-step .qs-text strong {
+  display: block;
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+.landing-quickstart .qs-step .qs-text p {
+  margin: 0;
+  font-size: 0.82rem;
+}
+.landing-quickstart .qs-step .qs-text code {
+  display: block;
+  background: var(--primary-bg);
+  border: 1px solid var(--divider);
+  border-radius: 0.4rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  margin-top: 0.4rem;
+  font-family: monospace;
+  color: var(--primary-text);
+}
+
+.landing-footer {
+  padding: 1.5rem 2rem;
+  border-top: 1px solid var(--divider);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.78rem;
+  color: var(--secondary-text);
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.landing-footer a {
+  color: var(--secondary-text);
+  text-decoration: none;
+}
+.landing-footer a:hover {
+  color: var(--primary-text);
+}
+.landing-footer .footer-links {
+  display: flex;
+  gap: 1.25rem;
+}