@twick/studio 0.15.13 → 0.15.15

package/dist/studio.css

@@ -18,7 +18,9 @@
 }
 
 body {
-  background-color: var(--color-neutral-900);
+  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 60%),
+    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.015), transparent 60%),
+    var(--color-neutral-900);
   color: var(--color-gray-100);
   font-family: 'Inter', sans-serif;
   font-feature-settings: "rlig" 1, "calt" 1;
@@ -30,6 +32,13 @@ html {
 
 /* Components */
 
+.header-separator {
+  width: 1px;
+  height: 2.5rem;
+  background-color: var(--color-gray-600);
+  margin: 0 1rem;
+}
+
 /* ========================================
    SEARCH UTILITIES
    ======================================== */
@@ -50,7 +59,7 @@ html {
   left: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--color-gray-400);
+  color: rgba(148, 163, 184, 0.8);
   transition: var(--transition-all);
   pointer-events: none;
 }
@@ -91,29 +100,33 @@ html {
 /* Panel styles */
 
 .panel-container {  
-  height: 100%;
-  width: 18rem;
-  min-width: 18rem;
-  max-width: 18rem;
+  height: auto;
+  max-height: 100%;
+  width: 100%;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  background-color: var(--color-neutral-900);
-  padding: 0.5rem;
+  background: rgba(23, 23, 28, 0.96);
+  padding: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 .panel-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-gray-100);
-  margin-bottom: 1rem;
+  font-size: var(--typography-h1);
+  font-weight: var(--typography-h1-weight);
+  letter-spacing: var(--typography-h1-spacing);
+  color: rgba(226, 232, 240, 0.96);
+  margin: var(--typography-h1-margin);
 }
 
 .panel-section {
   display: flex;
   flex-direction: column;
-  gap: 8;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
@@ -125,26 +138,31 @@ html {
 /* Properties Panel */
 
 .properties-panel {
-  width: 18rem;
   height: 100%;
-  background: linear-gradient(to bottom, rgba(38, 38, 38, 0.9), rgba(23, 23, 23, 0.8));
-  border-left: 1px solid rgba(75, 85, 99, 0.4);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: rgba(23, 23, 28, 0.98);
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
   overflow-y: hidden;
   overflow-x: hidden;
   backdrop-filter: blur(24px);
-  box-shadow: var(--shadow-xl);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
 }
 
 .properties-header {
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(75, 85, 99, 0.3);
-  background: linear-gradient(to right, rgba(147, 51, 234, 0.1), transparent);
+  padding: 0.25rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(18, 18, 23, 0.98);
 }
 
 .properties-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: white;
+  font-size: var(--typography-h1);
+  font-weight: var(--typography-h1-weight);
+  letter-spacing: var(--typography-h1-spacing);
+  text-transform: uppercase;
+  color: var(--color-gray-100);
+  margin: 0.5rem 0rem;
 }
 
 /* Property Groups */
@@ -156,19 +174,28 @@ html {
 }
 
 .property-section {
-  background-color: rgba(38, 38, 38, 0.4);
+  background-color: rgba(18, 18, 23, 0.8);
   border-radius: 0.5rem;
-  padding: 0.625rem;
-  border: 1px solid rgba(75, 85, 99, 0.2);
+  padding: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  margin-bottom: 0.5rem;
+}
+
+.property-section:last-child {
+  margin-bottom: 0;
 }
 
 .property-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-gray-200);
-  margin-bottom: 0.5rem;
+  font-size: var(--typography-h1);
+  font-weight: var(--typography-h1-weight);
+  letter-spacing: var(--typography-h1-spacing);
+  color: rgba(226, 232, 240, 0.9);
+  margin: var(--typography-h1-margin);
   display: flex;
   align-items: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
   gap: 0.375rem;
 }
 
@@ -185,35 +212,85 @@ html {
   gap: 0.5rem;
 }
 
+/* Property row layout: label left, control right */
+
+.property-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) auto;
+  align-items: center;
+  column-gap: 0.75rem;
+  row-gap: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.property-row:last-child {
+  margin-bottom: 0;
+}
+
+.property-row-label {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 0;
+  padding-top: 0.125rem;
+}
+
+.property-row-control {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.property-row-control .color-picker {
+  flex-shrink: 0;
+}
+
+.property-row-secondary {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: var(--typography-value);
+  font-weight: var(--typography-value-weight);
+  color: var(--color-gray-300);
+  min-width: 2.5rem;
+  flex-shrink: 0;
+}
+
 .property-label {
   display: block;
-  font-size: 0.75rem;
-  color: var(--color-gray-400);
-  margin-bottom: 0.25rem;
+  font-size: var(--typography-label);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  opacity: var(--typography-label-opacity);
+  color: rgba(148, 163, 184, 0.9);
+  margin-bottom: 0.15rem;
 }
 
 .property-input {
   width: 100%;
-  background-color: rgba(64, 64, 64, 0.6);
-  border: 1px solid rgba(75, 85, 99, 0.4);
+  background-color: rgba(15, 23, 42, 0.9);
+  border: 1px solid rgba(51, 65, 85, 0.9);
   border-radius: 0.375rem;
   color: white;
-  font-size: 0.75rem;
+  font-size: var(--typography-value);
+  font-weight: var(--typography-value-weight);
   padding: 0.375rem 0.5rem;
   transition: var(--transition-all);
 }
 
 .property-input:focus {
-  border-color: var(--color-purple-500);
+  border-color: rgba(255, 255, 255, 0.3);
   outline: none;
-  box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .property-range-labels {
   display: flex;
   justify-content: space-between;
   font-size: 0.75rem;
-  color: var(--color-gray-400);
+  color: rgba(148, 163, 184, 0.85);
   margin-top: 0.25rem;
 }
 
@@ -221,6 +298,7 @@ html {
   flex: 1;
   overflow-y: auto;
   min-height: 300px;
+  min-width: 0;
 }
 
 /* Media List */
@@ -375,7 +453,7 @@ html {
 
 .media-count {
   padding: 0.5rem 0.75rem;
-  color: var(--color-gray-400);
+  color: rgba(148, 163, 184, 0.85);
   font-size: 0.875rem;
 }
 
@@ -383,10 +461,19 @@ html {
 
 .media-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(125px, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.75rem;
   padding: 0.25rem;
   overflow: hidden;
+  min-width: 0;
+}
+
+.media-item-draggable {
+  cursor: grab;
+}
+
+.media-item-draggable:active {
+  cursor: grabbing;
 }
 
 .media-item {
@@ -396,6 +483,7 @@ html {
   border-radius: 0.5rem;
   background-color: var(--color-neutral-800);
   aspect-ratio: 9/16;
+  min-width: 0;
 }
 
 .media-item:hover {
@@ -406,6 +494,7 @@ html {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
 }
 
 .media-duration {
@@ -539,24 +628,26 @@ html {
 /* Sidebar styles */
 
 .sidebar {
-  min-width: 3.5rem;
-  max-width: 3.5rem;
+  position: relative;
+  z-index: 2;
+  min-width: 3.8rem;
+  max-width: 3.8rem;
   padding-top: 0.75rem;
-  background-color: rgba(38, 38, 38, 0.8);
-  border-right: 1px solid rgba(75, 85, 99, 0.5);
+  background: rgba(23, 23, 28, 0.98);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   padding: 0.35rem;
   backdrop-filter: blur(12px);
-  box-shadow: var(--shadow-lg);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
 }
 
 .toolbar-label {
   text-align: center;
-  font-size: smaller;
-  color: var(--color-gray-300); 
+  font-size: 0.75rem;
+  color: rgba(203, 213, 225, 0.9); 
 }
 
 /* Timeline track styles */
@@ -564,8 +655,12 @@ html {
 .timeline-track {
   position: relative;
   height: 3rem;
-  background-color: rgba(64, 64, 64, 0.5);
-  border: 1px solid rgba(75, 85, 99, 0.5);
+  background: linear-gradient(
+    to right,
+    rgba(30, 64, 175, 0.55),
+    rgba(8, 47, 73, 0.85)
+  );
+  border: 1px solid rgba(56, 189, 248, 0.45);
   border-radius: 0.5rem;
   overflow: hidden;
   backdrop-filter: blur(4px);
@@ -577,15 +672,15 @@ html {
   top: 0.25rem;
   bottom: 0.25rem;
   border-radius: 0.375rem;
-  border: 1px solid rgba(147, 51, 234, 0.5);
-  background: linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(147, 51, 234, 0.3));
+  border: 1px solid rgba(56, 189, 248, 0.7);
+  background: linear-gradient(to right, rgba(37, 99, 235, 0.75), rgba(56, 189, 248, 0.75));
   transition: var(--transition-all);
   cursor: pointer;
   box-shadow: var(--shadow-lg);
 }
 
 .timeline-element:hover {
-  background: linear-gradient(to right, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.5));
+  background: linear-gradient(to right, rgba(59, 130, 246, 0.9), rgba(56, 189, 248, 0.9));
 }
 
 /* Canvas styles */
@@ -593,7 +688,11 @@ html {
 .canvas-container {
   position: relative;
   overflow: hidden;
-  box-shadow: var(--shadow-xl);
+  border-radius: 0.75rem;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 0 40px rgba(0, 0, 0, 0.6);
 }
 
 /* Props Toolbar styles */
@@ -601,7 +700,7 @@ html {
 .props-toolbar-label {
   text-align: center;
   font-size: xx-small;
-  color: var(--color-gray-300); 
+  color: rgba(203, 213, 225, 0.9); 
   margin-top: 0.25rem;
   transition: var(--transition-all);
   word-wrap: break-word;
@@ -618,24 +717,25 @@ html {
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem;
-  background-color: rgba(38, 38, 38, 0.8);
+  background: rgba(23, 23, 28, 0.98);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(75, 85, 99, 0.5);
-  box-shadow: var(--shadow-md);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
 }
 
-/* Header styles */
+/* Header styles – glassmorphism */
 
 .header {
   height: 3.5rem;
-  background-color: rgba(38, 38, 38, 0.9);
-  border-bottom: 1px solid rgba(75, 85, 99, 0.5);
+  background: rgba(23, 23, 28, 0.75);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem;
-  backdrop-filter: blur(12px);
-  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
 }
 
 /* Media library styles */
@@ -658,10 +758,10 @@ html {
 
 /* Button hover effects - using twick-utilities.css */
 
-/* Accent colors */
+/* Accent colors - neutral to avoid color overuse */
 
 .accent-purple {
-  color: var(--color-purple-400);
+  color: var(--color-gray-400);
 }
 
 /* Gradient text - using twick-utilities.css */
@@ -672,23 +772,22 @@ html {
 
 .aspect-ratio-btn {
   padding: 0.375rem 0.75rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-gray-600);
+  border-radius: 0.375rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
   color: var(--color-gray-300);
   transition: var(--transition-all);
   font-size: 0.875rem;
 }
 
 .aspect-ratio-btn:hover {
-  border-color: var(--color-purple-500);
+  border-color: rgba(255, 255, 255, 0.25);
   color: var(--color-purple-400);
 }
 
 .aspect-ratio-btn.active {
-  border-color: var(--color-purple-500);
-  background-color: rgba(147, 51, 234, 0.2);
-  color: var(--color-purple-400);
-  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--color-neutral-700);
+  color: white;
 }
 
 /* Slider styles */
@@ -728,14 +827,14 @@ html {
 .slider-thumb::-webkit-slider-track {
   width: 100%;
   height: 0.375rem;
-  background-color: rgba(64, 64, 64, 0.5);
+  background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.9));
   border-radius: 9999px;
 }
 
 .slider-thumb::-moz-range-track {
   width: 100%;
   height: 0.375rem;
-  background-color: rgba(64, 64, 64, 0.5);
+  background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.9));
   border-radius: 9999px;
   border: 0;
 }
@@ -745,26 +844,26 @@ html {
 .form-btn {
   width: 2rem;
   height: 2rem;
-  background: linear-gradient(to bottom right, var(--color-gray-700), var(--color-gray-800));
-  border-radius: 0.5rem;
+  background: var(--color-neutral-800);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-gray-300);
   transition: var(--transition-all);
-  box-shadow: var(--shadow-sm);
 }
 
 .form-btn:hover {
-  background: linear-gradient(to bottom right, var(--color-gray-600), var(--color-gray-700));
+  background: var(--color-neutral-700);
   color: white;
-  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2);
+  border-color: rgba(255, 255, 255, 0.15);
 }
 
 .form-btn.active {
-  background: linear-gradient(to bottom right, var(--color-purple-500), var(--color-purple-600));
+  background: var(--color-neutral-600);
   color: white;
-  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.25);
+  border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Toolbar buttons */
@@ -778,23 +877,61 @@ html {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  transition: var(--transition-all);
+  transition: transform var(--duration-fast) ease,
+    background-color var(--duration-fast) ease,
+    color var(--duration-fast) ease,
+    box-shadow var(--duration-fast) ease;
   box-shadow: var(--shadow-sm);
 }
 
 .toolbar-btn.active {
   background: linear-gradient(to bottom right, var(--color-purple-500), var(--color-purple-600));
   color: white;
-  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.25);
+  transform: scale(1.08);
+  box-shadow: 0 0 12px rgba(147, 51, 234, 0.25);
 }
 
 .toolbar-btn:not(.active) {
-  color: var(--color-gray-400);
+  color: rgba(148, 163, 184, 0.9);
 }
 
 .toolbar-btn:not(.active):hover {
   color: white;
-  background-color: rgba(64, 64, 64, 0.5);
+  background-color: var(--color-purple-muted);
+}
+
+/* Toolbar tooltip - smooth fade-in, 150ms delay, elevation shadow */
+
+.toolbar-btn[data-tooltip] {
+  position: relative;
+}
+
+.toolbar-btn[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(8px);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-gray-100);
+  background: rgba(30, 30, 35, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--duration-normal) ease var(--duration-normal),
+    transform var(--duration-normal) ease var(--duration-normal);
+  z-index: 100;
+}
+
+.toolbar-btn[data-tooltip]:hover::after {
+  opacity: 1;
+  transform: translateY(-50%) translateX(12px);
+  transition-delay: 150ms;
 }
 
 /* Props Toolbar buttons */
@@ -836,20 +973,23 @@ html {
   padding: 0.625rem 0.75rem;
   text-align: left;
   color: var(--color-gray-200);
-  transition: var(--transition-all);
-  border-left: 2px solid transparent;
+  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 180ms ease,
+    border-color 180ms ease;
+  border-left: 1px solid transparent;
 }
 
 .prop-header:hover {
   color: white;
-  background: linear-gradient(to right, rgba(147, 51, 234, 0.2), rgba(147, 51, 234, 0.1));
-  border-left-color: rgba(147, 51, 234, 0.5);
+  background: var(--color-purple-muted);
+  border-left-color: rgba(147, 51, 234, 0.4);
 }
 
 .prop-content {
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  padding-right: 1rem;
   transition: var(--transition-all);
 }
 
@@ -870,17 +1010,19 @@ html {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.625rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   text-align: left;
   color: var(--color-gray-200);
-  transition: var(--transition-all);
-  border-left: 2px solid transparent;
+  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 180ms ease,
+    border-color 180ms ease;
+  border-left: 1px solid transparent;
 }
 
 .accordion-header:hover {
   color: white;
-  background: linear-gradient(to right, rgba(147, 51, 234, 0.2), rgba(147, 51, 234, 0.1));
-  border-left-color: rgba(147, 51, 234, 0.5);
+  background: var(--color-purple-muted);
+  border-left-color: rgba(147, 51, 234, 0.4);
 }
 
 .accordion-content {
@@ -888,19 +1030,33 @@ html {
   overflow-y: auto;
   max-height: 0;
   opacity: 0;
-  transition: all 300ms ease-in-out;
+  transition: max-height 180ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .accordion-content.expanded {
-  max-height: 24rem;
+  max-height: 20rem;
   opacity: 1;
 }
 
+.properties-size-readonly {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.35rem 0.6rem;
+  margin-top: 0.25rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  letter-spacing: 0.04em;
+  background: rgba(15, 23, 42, 0.95);
+  border: 1px solid rgba(51, 65, 85, 0.9);
+  color: var(--color-gray-100);
+}
+
 .accordion-panel {
-  padding: 0.5rem 0.75rem;
+  padding: 0.25rem;
   background-color: rgba(23, 23, 23, 0.3);
-  border-left: 2px solid rgba(147, 51, 234, 0.3);
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
 }
 
 /* Studio-specific utilities */
@@ -929,6 +1085,7 @@ html {
 
 .slider-purple {
   flex: 1;
+  min-width: 0;
   height: 0.25rem;
   background: var(--color-neutral-700);
   border-radius: 9999px;
@@ -938,17 +1095,26 @@ html {
 
 .slider-purple::-webkit-slider-thumb {
   appearance: none;
-  width: 1rem;
-  height: 1rem;
-  background: var(--color-purple-500);
+  width: 0.875rem;
+  height: 0.875rem;
+  background: var(--color-neutral-300);
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid var(--color-neutral-900);
+  border: 1px solid var(--color-neutral-600);
+}
+
+.slider-purple::-moz-range-thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+  background: var(--color-neutral-300);
+  border-radius: 50%;
+  cursor: pointer;
+  border: 1px solid var(--color-neutral-600);
 }
 
 .slider-value {
   min-width: 3rem;
-  color: var(--color-gray-300);
+  color: rgba(203, 213, 225, 0.95);
   font-size: 0.875rem;
 }
 
@@ -959,31 +1125,38 @@ html {
 
 .select-dark {
   flex: 1;
+  min-width: 0;
   background-color: var(--color-neutral-800);
-  border: 1px solid var(--color-gray-600);
-  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
   color: var(--color-gray-100);
   padding: 0.5rem;
   font-size: 0.875rem;
 }
 
 .btn-icon {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--color-neutral-800);
-  border: 1px solid var(--color-gray-600);
-  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
   color: var(--color-gray-300);
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   cursor: pointer;
 }
 
+.btn-icon:hover {
+  background-color: var(--color-neutral-700);
+  color: white;
+}
+
 .btn-icon-active {
-  background-color: var(--color-purple-500);
-  border-color: var(--color-purple-600);
+  background-color: var(--color-neutral-600);
+  border-color: rgba(255, 255, 255, 0.2);
   color: white;
 }
 
@@ -1005,10 +1178,10 @@ html {
 }
 
 .color-picker {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
   padding: 0;
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 0.375rem;
   cursor: pointer;
   background: none;
@@ -1016,9 +1189,10 @@ html {
 
 .color-text {
   flex: 1;
+  min-width: 0;
   background-color: var(--color-neutral-800);
-  border: 1px solid var(--color-gray-600);
-  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
   color: var(--color-gray-100);
   padding: 0.5rem;
   font-size: 0.875rem;
@@ -1034,7 +1208,7 @@ html {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--color-gray-300);
+  color: rgba(203, 213, 225, 0.95);
   font-size: 0.875rem;
   cursor: pointer;
 }
@@ -1043,14 +1217,14 @@ html {
   width: 1rem;
   height: 1rem;
   border-radius: 0.25rem;
-  border: 2px solid var(--color-gray-600);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   appearance: none;
   cursor: pointer;
 }
 
 .checkbox-purple:checked {
-  background-color: var(--color-purple-500);
-  border-color: var(--color-purple-600);
+  background-color: var(--color-neutral-500);
+  border-color: var(--color-neutral-400);
 }
 
 /* btn-primary - using twick-utilities.css */
@@ -1063,28 +1237,81 @@ html {
   height: 100dvh;
   width: 100dvw;
   overflow: hidden;
-  background-color: var(--color-neutral-900);
+  background: var(--color-neutral-900);
   color: var(--color-gray-100);
+  position: relative;
+}
+
+/* Subtle background noise texture */
+
+.studio-container::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  z-index: 0;
+}
+
+.studio-container > * {
+  position: relative;
+  z-index: 1;
 }
 
 .studio-content {
   display: flex;
   width: 100%;
+  min-width: 0; /* allow flex row to shrink below content size */
+  max-width: 100%;
   height: calc(100vh - 56px);
+  background: var(--color-neutral-900);
 }
 
 .main-container {
   flex: 1;
+  min-width: 0; /* allow shrinking below canvas/video intrinsic size in landscape */
   display: flex;
   flex-direction: column;
-  background-color: var(--color-neutral-700);
-  max-width: calc(100% - 43rem);
+  background-color: #0a0a0f;
+  overflow: hidden;
 }
 
 .canvas-wrapper {
   flex: 1;
-  overflow-y: auto;
-  padding: 0.25rem;
+  min-width: 0;
+  overflow: auto;
+  padding: 0.75rem;
+  background: radial-gradient(
+    circle at center,
+    rgba(255, 255, 255, 0.03),
+    rgba(0, 0, 0, 0.6)
+  );
+}
+
+/* Side panels */
+
+.studio-left-panel {
+  position: relative;
+  z-index: 1;
+  width: 288px;
+  flex-shrink: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(23, 23, 28, 0.98);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: var(--elevation-panel);
+}
+
+.studio-right-panel {
+  width: 360px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  background-color: rgba(23, 23, 28, 0.98);
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: var(--elevation-panel);
 }
 
 /* Color Input */
@@ -1122,16 +1349,16 @@ video::-webkit-media-controls-panel {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-gray-700);
+  background: var(--color-neutral-800);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-purple-600);
+  background: var(--color-neutral-600);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-purple-500);
+  background: var(--color-neutral-500);
 }:root {
     /* Colors */
     --color-purple-100: #f3e8ff;
@@ -1182,6 +1409,34 @@ video::-webkit-media-controls-panel {
     
     /* Transitions */
     --transition-all: all 0.2s ease;
+
+    /* Elevation system */
+    --elevation-panel: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-canvas: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-scrubber: 0 0 8px rgba(139,92,246,0.8);
+
+    /* Motion */
+    --duration-fast: 120ms;
+    --duration-normal: 150ms;
+    --duration-medium: 180ms;
+    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Muted purple for hover (reduce primary purple overuse) */
+    --color-purple-muted: rgba(139, 92, 246, 0.15);
+
+    /* Typography – Level 1 Section Headers */
+    --typography-h1: 16px;
+    --typography-h1-weight: 600;
+    --typography-h1-spacing: 0.3px;
+    --typography-h1-margin: 8px 0 12px 0;
+
+    /* Typography – Level 2 Sub Labels */
+    --typography-label: 13px;
+    --typography-label-opacity: 0.8;
+
+    /* Typography – Level 3 Values */
+    --typography-value: 13px;
+    --typography-value-weight: 500;
   }/* ========================================
    LAYOUT UTILITIES
    ======================================== *//* Flexbox utilities */.flex {
@@ -1309,7 +1564,11 @@ video::-webkit-media-controls-panel {
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
@@ -1327,7 +1586,7 @@ video::-webkit-media-controls-panel {
   outline: none;
   box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.15);
 }.btn:active {
-  transform: translateY(1px);
+  transform: scale(0.98);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }.btn:disabled {
   opacity: 0.6;
@@ -1347,7 +1606,9 @@ video::-webkit-media-controls-panel {
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease;
   background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700), var(--color-purple-800));
   color: white;
   border: 1px solid var(--color-purple-500);
@@ -1355,10 +1616,11 @@ video::-webkit-media-controls-panel {
 }.btn-primary:hover {
   background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600), var(--color-purple-700));
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }.btn-primary:active {
   background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
   box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: scale(0.98);
 }.btn-primary:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -1404,7 +1666,11 @@ video::-webkit-media-controls-panel {
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   background: rgba(64, 64, 64, 0.3);
   color: var(--color-neutral-300);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1415,7 +1681,9 @@ video::-webkit-media-controls-panel {
   color: white;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
+}.btn-ghost:active {
+  transform: scale(0.98);
 }.btn-ghost:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -1508,8 +1776,8 @@ video::-webkit-media-controls-panel {
   color: var(--color-neutral-400);
 }.input:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }.input-dark {
   width: 100%;
   padding: 0.75rem;
@@ -1521,8 +1789,8 @@ video::-webkit-media-controls-panel {
   transition: var(--transition-all);
 }.input-dark:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }/* ========================================
    CARD UTILITIES
    ======================================== */.card {
@@ -1536,6 +1804,7 @@ video::-webkit-media-controls-panel {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  background-color: var(--color-neutral-900);
   gap: 6px;
 }.twick-editor-view-section {
   display: flex;
@@ -1549,8 +1818,8 @@ video::-webkit-media-controls-panel {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: #252525;
-  border-radius: 10px;
+  background-color: #141419;
+  border-radius: 0.75rem;
   overflow-x: hidden;
 }.twick-editor-container {
   position: relative;
@@ -1592,6 +1861,38 @@ video::-webkit-media-controls-panel {
 }@keyframes twick-editor-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
+}/* Canvas context menu (z-order: Bring to Front / Send to Back) */.twick-canvas-context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 160px;
+  padding: 4px 0;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+}.twick-canvas-context-menu-item {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  color: #e5e5e5;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+}.twick-canvas-context-menu-item:hover {
+  background: #3a3a3a;
+}.twick-canvas-context-menu-separator {
+  height: 1px;
+  margin: 4px 8px;
+  background: #444;
+}.twick-canvas-context-menu-item-danger:hover {
+  background: #7f1d1d;
+}.twick-canvas-context-menu-item.twick-canvas-context-menu-item-danger {
+  color: #fca5a5;
 }.twick-timeline-scroll-container {
   display: flex;
   flex-direction: column;
@@ -1637,9 +1938,9 @@ video::-webkit-media-controls-panel {
 }.twick-seek-track {
   position: relative;
   width: 100%;
-  border-top: 1px solid #262626;
-  border-bottom: 1px solid #262626;
-  background-color: #171717;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background-color: #0f0f14;
 }.twick-seek-track-canvas {
   min-width: 100%;
   height: 2rem;
@@ -1654,8 +1955,9 @@ video::-webkit-media-controls-panel {
   top: 0;
   left: 0;
   z-index: 30;
-  width: 1.5px;
-  background-color: #FFFFFF;
+  width: 2px;
+  background-color: var(--color-purple-400);
+  box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
 }.twick-seek-track-handle {
   position: absolute;
   top: 0;
@@ -1665,6 +1967,7 @@ video::-webkit-media-controls-panel {
   transform: translate(-50%, -50%);
   background-color: #FFFFFF;
   border-radius: 25%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }.twick-track-element {
   position: absolute;
   height: 100%;
@@ -1765,6 +2068,14 @@ video::-webkit-media-controls-panel {
   height: 2.5rem;
   margin-top: 2px;
   background-color: #474747;
+}/* Drop preview - ghost placeholder when dragging files over timeline */.twick-drop-preview {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+  background: rgba(96, 165, 250, 0.35);
+  border: 2px dashed rgba(96, 165, 250, 0.8);
+  border-radius: 6px;
+  transition: left 0.05s ease-out, top 0.05s ease-out;
 }:root {
     /* Colors */
     --color-purple-100: #f3e8ff;
@@ -1815,6 +2126,34 @@ video::-webkit-media-controls-panel {
     
     /* Transitions */
     --transition-all: all 0.2s ease;
+
+    /* Elevation system */
+    --elevation-panel: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-canvas: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
+    --elevation-scrubber: 0 0 8px rgba(139,92,246,0.8);
+
+    /* Motion */
+    --duration-fast: 120ms;
+    --duration-normal: 150ms;
+    --duration-medium: 180ms;
+    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Muted purple for hover (reduce primary purple overuse) */
+    --color-purple-muted: rgba(139, 92, 246, 0.15);
+
+    /* Typography – Level 1 Section Headers */
+    --typography-h1: 16px;
+    --typography-h1-weight: 600;
+    --typography-h1-spacing: 0.3px;
+    --typography-h1-margin: 8px 0 12px 0;
+
+    /* Typography – Level 2 Sub Labels */
+    --typography-label: 13px;
+    --typography-label-opacity: 0.8;
+
+    /* Typography – Level 3 Values */
+    --typography-value: 13px;
+    --typography-value-weight: 500;
   }/* ========================================
    LAYOUT UTILITIES
    ======================================== *//* Flexbox utilities */.flex {
@@ -1942,7 +2281,11 @@ video::-webkit-media-controls-panel {
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
@@ -1960,7 +2303,7 @@ video::-webkit-media-controls-panel {
   outline: none;
   box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.15);
 }.btn:active {
-  transform: translateY(1px);
+  transform: scale(0.98);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }.btn:disabled {
   opacity: 0.6;
@@ -1980,7 +2323,9 @@ video::-webkit-media-controls-panel {
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease;
   background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700), var(--color-purple-800));
   color: white;
   border: 1px solid var(--color-purple-500);
@@ -1988,10 +2333,11 @@ video::-webkit-media-controls-panel {
 }.btn-primary:hover {
   background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600), var(--color-purple-700));
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }.btn-primary:active {
   background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
   box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: scale(0.98);
 }.btn-primary:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -2037,7 +2383,11 @@ video::-webkit-media-controls-panel {
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
   background: rgba(64, 64, 64, 0.3);
   color: var(--color-neutral-300);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -2048,7 +2398,9 @@ video::-webkit-media-controls-panel {
   color: white;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
+}.btn-ghost:active {
+  transform: scale(0.98);
 }.btn-ghost:disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -2141,8 +2493,8 @@ video::-webkit-media-controls-panel {
   color: var(--color-neutral-400);
 }.input:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }.input-dark {
   width: 100%;
   padding: 0.75rem;
@@ -2154,8 +2506,8 @@ video::-webkit-media-controls-panel {
   transition: var(--transition-all);
 }.input-dark:focus {
   outline: none;
-  border-color: var(--color-purple-500);
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }/* ========================================
    CARD UTILITIES
    ======================================== */.card {
@@ -2166,8 +2518,8 @@ video::-webkit-media-controls-panel {
   box-shadow: var(--shadow-md);
 }/* Player Controls */.player-controls {
   height: 3rem;
-  background-color: var(--color-neutral-800);
-  border-top: 1px solid var(--color-neutral-600);
+  background-color: #141419;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 0 0.5rem;
   display: flex;
   align-items: center;
@@ -2189,13 +2541,16 @@ video::-webkit-media-controls-panel {
   background: transparent;
   border: none;
   color: var(--color-neutral-400);
-  transition: var(--transition-all);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 150ms ease,
+    background-color 150ms ease;
   cursor: pointer;
 }.control-btn:hover {
   color: var(--color-neutral-100);
   background-color: var(--color-neutral-700);
+  transform: translateY(-1px);
 }.control-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.98);
   background-color: var(--color-neutral-600);
 }.control-btn.btn-disabled {
   opacity: 0.5;
@@ -2210,6 +2565,10 @@ video::-webkit-media-controls-panel {
   color: var(--color-purple-400);
 }.split-btn:hover {
   color: var(--color-purple-300);
+}.follow-btn-active {
+  color: var(--color-purple-400);
+}.follow-btn-active:hover {
+  color: var(--color-purple-300);
 }.play-pause-btn {
   padding: 0.75rem;
   color: white;