feat: implement phase 4 interactive cooking mode and workspace rules

assets/style.css

@@ -2071,3 +2071,145 @@ body.nav-open { overflow: hidden; }
   transition: width 1.5s var(--ease-out-expo) 0.2s;
   will-change: width;
 }
+
+/* ==========================================================================
+   Cooking Mode Overlay
+   ========================================================================== */
+
+.cooking-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--surface-1);
+  color: var(--ink);
+  display: flex;
+  flex-direction: column;
+  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
+  transition: clip-path 0.6s var(--ease-out-expo);
+}
+.cooking-overlay.is-open {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+.btn-close-cooking {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  border: none;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 10;
+  display: grid;
+  place-items: center;
+  backdrop-filter: blur(8px);
+}
+.cooking-slider {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.cooking-slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.4s ease, visibility 0.4s;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.cooking-slide.active {
+  opacity: 1;
+  visibility: visible;
+}
+.cooking-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+.cooking-content {
+  position: relative;
+  z-index: 1;
+  padding: 48px 24px;
+  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
+  color: #fff;
+}
+.cooking-step-indicator {
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 0.8rem;
+  margin-bottom: 8px;
+  opacity: 0.8;
+}
+.cooking-step-text {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  margin: 0 0 24px 0;
+  max-width: 800px;
+  line-height: 1.2;
+}
+.cooking-timer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: rgba(255,255,255,0.1);
+  backdrop-filter: blur(12px);
+  padding: 12px 24px;
+  border-radius: 100px;
+  width: fit-content;
+  border: 1px solid rgba(255,255,255,0.2);
+}
+.timer-display {
+  font-family: var(--font-mono);
+  font-size: 1.5rem;
+  font-variant-numeric: tabular-nums;
+}
+.timer-controls {
+  display: flex;
+  gap: 8px;
+}
+.btn-timer {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.btn-timer.reset {
+  background: rgba(255,255,255,0.2);
+}
+.cooking-nav {
+  position: absolute;
+  bottom: 48px;
+  right: 24px;
+  z-index: 2;
+  display: flex;
+  gap: 12px;
+}
+.btn-circle {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.3);
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 1.5rem;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  display: grid;
+  place-items: center;
+}
+.btn-circle:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}