diff --git a/backend/Dockerfile b/backend/Dockerfile
index af59bac..9ae2881 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -8,7 +8,7 @@ RUN go build -o /usr/bin/migrate ./cmd/migrate
 RUN go build -o /usr/bin/seed ./cmd/seed
 
 FROM alpine:3.21
-RUN apk add --no-cache ca-certificates
+RUN apk add --no-cache ca-certificates ffmpeg
 COPY --from=builder /usr/bin/server /usr/bin/migrate /usr/bin/seed /usr/bin/
 EXPOSE 8080
 CMD ["server"]
\ No newline at end of file
diff --git a/backend/internal/media/processor.go b/backend/internal/media/processor.go
index ce2b19f..6ea34c5 100644
--- a/backend/internal/media/processor.go
+++ b/backend/internal/media/processor.go
@@ -5,9 +5,15 @@ import (
 	"context"
 	"fmt"
 	"image"
+	"image/color"
+	"image/draw"
 	"image/jpeg"
 	_ "image/png"
 	"io"
+	"log"
+	"os"
+	"os/exec"
+	"path/filepath"
 	"sync"
 
 	"github.com/example/sndit/backend/internal/storage"
@@ -70,23 +76,31 @@ func (p *Processor) process(mediaID uuid.UUID) {
 		return
 	}
 
-	if item.ExternalURL != "" || !IsImage(item) {
+	if item.ExternalURL != "" {
 		_ = p.repository.MarkReady(ctx, mediaID, item.StorageKey, item.StorageKey, item.Width, item.Height)
 		return
 	}
 
+	if IsImage(item) {
+		p.processImage(ctx, item)
+	} else if IsVideo(item) {
+		p.processVideo(ctx, item)
+	} else {
+		_ = p.repository.MarkReady(ctx, mediaID, item.StorageKey, item.StorageKey, item.Width, item.Height)
+	}
+}
+
+func (p *Processor) processImage(ctx context.Context, item Record) {
 	object, err := p.storage.Get(ctx, item.StorageKey)
 	if err != nil {
-		_ = p.repository.MarkFailed(ctx, mediaID, err.Error())
+		_ = p.repository.MarkFailed(ctx, item.ID, err.Error())
 		return
 	}
 	defer object.Close()
 
 	decoded, _, err := image.Decode(io.LimitReader(object, 100<<20))
 	if err != nil {
-		// Formats without a stdlib decoder, such as HEIC, remain usable through
-		// the original object until a dedicated processing service is added.
-		_ = p.repository.MarkReady(ctx, mediaID, item.StorageKey, item.StorageKey, 0, 0)
+		_ = p.repository.MarkReady(ctx, item.ID, item.StorageKey, item.StorageKey, 0, 0)
 		return
 	}
 
@@ -94,27 +108,132 @@ func (p *Processor) process(mediaID uuid.UUID) {
 	height := decoded.Bounds().Dy()
 	previewKey := variantKey(item, "preview.jpg")
 	thumbnailKey := variantKey(item, "thumbnail.jpg")
+
 	preview, err := encodeJPEG(resize(decoded, 2400), 88)
 	if err != nil {
-		_ = p.repository.MarkFailed(ctx, mediaID, err.Error())
+		_ = p.repository.MarkFailed(ctx, item.ID, err.Error())
 		return
 	}
 	thumbnail, err := encodeJPEG(resize(decoded, 640), 84)
 	if err != nil {
-		_ = p.repository.MarkFailed(ctx, mediaID, err.Error())
+		_ = p.repository.MarkFailed(ctx, item.ID, err.Error())
 		return
 	}
 	if err := p.storage.Put(ctx, previewKey, bytes.NewReader(preview), int64(len(preview)), "image/jpeg"); err != nil {
-		_ = p.repository.MarkFailed(ctx, mediaID, err.Error())
+		_ = p.repository.MarkFailed(ctx, item.ID, err.Error())
 		return
 	}
 	if err := p.storage.Put(ctx, thumbnailKey, bytes.NewReader(thumbnail), int64(len(thumbnail)), "image/jpeg"); err != nil {
-		_ = p.repository.MarkFailed(ctx, mediaID, err.Error())
+		_ = p.repository.MarkFailed(ctx, item.ID, err.Error())
 		return
 	}
-	if err := p.repository.MarkReady(ctx, mediaID, previewKey, thumbnailKey, width, height); err != nil {
+	_ = p.repository.MarkReady(ctx, item.ID, previewKey, thumbnailKey, width, height)
+}
+
+func (p *Processor) processVideo(ctx context.Context, item Record) {
+	thumbnailKey := variantKey(item, "thumbnail.jpg")
+	previewKey := variantKey(item, "preview.mp4")
+
+	if err := p.generateVideoThumbnail(ctx, item, thumbnailKey); err != nil {
+		p.log("video thumbnail failed for %s: %s — using fallback", item.ID, err)
+		p.generateFallbackThumbnail(ctx, item, thumbnailKey)
+	}
+	if err := p.generateVideoPreview(ctx, item, previewKey); err != nil {
+		p.log("video preview failed for %s: %s — using original", item.ID, err)
+		_ = p.repository.MarkReady(ctx, item.ID, item.StorageKey, thumbnailKey, 0, 0)
 		return
 	}
+	_ = p.repository.MarkReady(ctx, item.ID, previewKey, thumbnailKey, 0, 0)
+}
+
+func (p *Processor) generateVideoThumbnail(ctx context.Context, item Record, key string) error {
+	tmp := filepath.Join(os.TempDir(), fmt.Sprintf("sndit-%s", uuid.New()))
+	defer os.Remove(tmp)
+
+	if err := p.downloadToFile(ctx, item.StorageKey, tmp); err != nil {
+		return err
+	}
+
+	var stderr bytes.Buffer
+	cmd := exec.CommandContext(ctx, "ffmpeg",
+		"-ss", "0",
+		"-i", tmp,
+		"-vframes", "1",
+		"-q:v", "6",
+		"-f", "image2pipe",
+		"-c:v", "mjpeg",
+		"pipe:1",
+	)
+	cmd.Stderr = &stderr
+
+	output, err := cmd.Output()
+	if err != nil {
+		return fmt.Errorf("ffmpeg thumbnail: %w, stderr: %s", err, stderr.String())
+	}
+
+	return p.storage.Put(ctx, key, bytes.NewReader(output), int64(len(output)), "image/jpeg")
+}
+
+func (p *Processor) generateVideoPreview(ctx context.Context, item Record, key string) error {
+	tmpInput := filepath.Join(os.TempDir(), fmt.Sprintf("sndit-in-%s", uuid.New()))
+	tmpOutput := filepath.Join(os.TempDir(), fmt.Sprintf("sndit-out-%s.mp4", uuid.New()))
+	defer os.Remove(tmpInput)
+	defer os.Remove(tmpOutput)
+
+	if err := p.downloadToFile(ctx, item.StorageKey, tmpInput); err != nil {
+		return err
+	}
+
+	var stderr bytes.Buffer
+	cmd := exec.CommandContext(ctx, "ffmpeg",
+		"-i", tmpInput,
+		"-vf", "scale='min(720,iw)':-1:force_original_aspect_ratio=decrease,pad='ceil(iw/2)*2':'ceil(ih/2)*2':-1:-1:black",
+		"-c:v", "libx264",
+		"-preset", "fast",
+		"-crf", "28",
+		"-movflags", "+faststart",
+		"-c:a", "aac",
+		"-b:a", "64k",
+		"-y", tmpOutput,
+	)
+	cmd.Stderr = &stderr
+
+	if err := cmd.Run(); err != nil {
+		return fmt.Errorf("ffmpeg preview: %w, stderr: %s", err, stderr.String())
+	}
+
+	data, err := os.ReadFile(tmpOutput)
+	if err != nil {
+		return fmt.Errorf("read output file: %w", err)
+	}
+
+	return p.storage.Put(ctx, key, bytes.NewReader(data), int64(len(data)), "video/mp4")
+}
+
+func (p *Processor) downloadToFile(ctx context.Context, storageKey, tmp string) error {
+	object, err := p.storage.Get(ctx, storageKey)
+	if err != nil {
+		return fmt.Errorf("get original: %w", err)
+	}
+	defer object.Close()
+
+	f, err := os.Create(tmp)
+	if err != nil {
+		return fmt.Errorf("create temp file: %w", err)
+	}
+
+	if _, err := io.Copy(f, object); err != nil {
+		f.Close()
+		os.Remove(tmp)
+		return fmt.Errorf("copy to temp file: %w", err)
+	}
+	if err := f.Sync(); err != nil {
+		f.Close()
+		os.Remove(tmp)
+		return fmt.Errorf("sync temp file: %w", err)
+	}
+	f.Close()
+	return nil
 }
 
 func variantKey(item Record, filename string) string {
@@ -152,3 +271,26 @@ func encodeJPEG(source image.Image, quality int) ([]byte, error) {
 	}
 	return output.Bytes(), nil
 }
+
+func (p *Processor) log(format string, args ...any) {
+	log.Printf("[media-processor] "+format, args...)
+}
+
+func (p *Processor) generateFallbackThumbnail(ctx context.Context, item Record, key string) {
+	img := image.NewRGBA(image.Rect(0, 0, 640, 480))
+	bg := color.RGBA{20, 20, 20, 255}
+	draw.Draw(img, img.Bounds(), &image.Uniform{bg}, image.Point{}, draw.Src)
+
+	data, err := encodeJPEG(img, 60)
+	if err != nil {
+		p.log("fallback thumbnail encode failed: %s", err)
+		_ = p.repository.MarkReady(ctx, item.ID, item.StorageKey, item.StorageKey, 0, 0)
+		return
+	}
+	if err := p.storage.Put(ctx, key, bytes.NewReader(data), int64(len(data)), "image/jpeg"); err != nil {
+		p.log("fallback thumbnail upload failed: %s", err)
+		_ = p.repository.MarkReady(ctx, item.ID, item.StorageKey, item.StorageKey, 0, 0)
+		return
+	}
+	_ = p.repository.MarkReady(ctx, item.ID, item.StorageKey, key, 0, 0)
+}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2220f92..20d297d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import GalleryPreviewPage from './pages/GalleryPreviewPage';
 import LoginPage from './pages/LoginPage';
 import PublicGalleryPage from './pages/PublicGalleryPage';
 import RegisterPage from './pages/RegisterPage';
+import RootPage from './pages/RootPage';
 import DashboardPage from './pages/dashboard/DashboardPage';
 import GalleriesPage from './pages/dashboard/GalleriesPage';
 import GalleryEditorPage from './pages/dashboard/GalleryEditorPage';
@@ -19,6 +20,7 @@ export default function App() {
     <BrowserRouter>
       <AuthProvider>
         <Routes>
+          <Route path="/" element={<RootPage />} />
           <Route path="/g/:slug" element={<PublicGalleryPage />} />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
diff --git a/frontend/src/components/app/AuthLayout.tsx b/frontend/src/components/app/AuthLayout.tsx
index 0e5d7e3..5076bb4 100644
--- a/frontend/src/components/app/AuthLayout.tsx
+++ b/frontend/src/components/app/AuthLayout.tsx
@@ -1,17 +1,20 @@
 import type { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
 
 export function AuthLayout({ children }: { children: ReactNode }) {
   return (
     <div className="auth-shell">
       <div className="auth-shell__texture" aria-hidden="true" />
-      <div className="auth-shell__brand">
-        <span className="platform-mark">N</span>
-        <span>Noah Bianchi</span>
-      </div>
-      <div className="auth-shell__aside">
-        <p className="platform-kicker">Private delivery system</p>
-        <h1 className="platform-display">Studio Access</h1>
-        <p>Photographer gallery console for client delivery.</p>
+      <div className="auth-shell__content">
+        <Link to="/" className="auth-shell__brand">
+          <span className="platform-mark">N</span>
+          <span>Noah Bianchi</span>
+        </Link>
+        <div className="auth-shell__aside">
+          <p className="platform-kicker">Private delivery system</p>
+          <h1 className="platform-display">Studio Access</h1>
+          <p>Photographer gallery console for client delivery.</p>
+        </div>
       </div>
       <div className="auth-shell__panel">{children}</div>
     </div>
diff --git a/frontend/src/components/dashboard/DashboardLayout.tsx b/frontend/src/components/dashboard/DashboardLayout.tsx
index ed14f51..0832486 100644
--- a/frontend/src/components/dashboard/DashboardLayout.tsx
+++ b/frontend/src/components/dashboard/DashboardLayout.tsx
@@ -45,13 +45,6 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
           ))}
         </nav>
         <div className="studio-sidebar__bottom">
-          <div className="studio-sidebar__note">
-            <span className="studio-sidebar__note-mark">+</span>
-            <span>
-              <strong>System Status</strong>
-              <small>Delivery console active.</small>
-            </span>
-          </div>
           <div className="studio-account">
             <span className="studio-account__avatar">{initials || 'N'}</span>
             <span className="studio-account__details">
diff --git a/frontend/src/components/dashboard/GalleryCard.tsx b/frontend/src/components/dashboard/GalleryCard.tsx
index 57e194b..bc0bd8a 100644
--- a/frontend/src/components/dashboard/GalleryCard.tsx
+++ b/frontend/src/components/dashboard/GalleryCard.tsx
@@ -23,6 +23,10 @@ export function GalleryCard({ gallery, onDelete }: GalleryCardProps) {
     }
   }
 
+  function openLink() {
+    window.open(clientURL, '_blank', 'noopener');
+  }
+
   return (
     <article className="gallery-card">
       <Link className="gallery-card__cover" to={`/dashboard/galleries/${gallery.id}/edit`}>
@@ -61,13 +65,15 @@ export function GalleryCard({ gallery, onDelete }: GalleryCardProps) {
             Preview
           </Link>
           {gallery.status === 'published' && (
-            <button
-              className="text-action text-action--muted"
-              type="button"
-              onClick={() => void copyLink()}
-            >
-              {copied ? 'Copied' : 'Copy link'}
-            </button>
+            <>
+              <button className="gallery-card__link-button" type="button" onClick={() => void copyLink()}>
+                <span>{copied ? 'Copied' : 'Copy link'}</span>
+              </button>
+              <button className="gallery-card__link-button gallery-card__link-button--open" type="button" onClick={openLink}>
+                <span>Open</span>
+                <span aria-hidden="true">&#8599;</span>
+              </button>
+            </>
           )}
           <button
             className="gallery-card__delete"
diff --git a/frontend/src/components/gallery/ClientGallery.tsx b/frontend/src/components/gallery/ClientGallery.tsx
index 7600fc3..2ee2070 100644
--- a/frontend/src/components/gallery/ClientGallery.tsx
+++ b/frontend/src/components/gallery/ClientGallery.tsx
@@ -95,7 +95,7 @@ export function ClientGallery({ gallery }: ClientGalleryProps) {
   }
 
   function openPhoto(item: MediaItem) {
-    const index = photos.findIndex((photo) => photo.id === item.id);
+    const index = gallery.media.findIndex((photo) => photo.id === item.id);
     setViewerIndex(index >= 0 ? index : null);
   }
 
@@ -275,7 +275,7 @@ export function ClientGallery({ gallery }: ClientGalleryProps) {
       <AnimatePresence>
         {viewerIndex !== null && (
           <PhotoViewer
-            items={photos}
+            items={gallery.media}
             index={viewerIndex}
             onClose={() => setViewerIndex(null)}
             onChange={setViewerIndex}
@@ -308,15 +308,24 @@ function MediaCard({
       className={`client-media-card ${isVideo ? 'client-media-card--video' : ''} ${gallery.watermarkEnabled ? 'client-media-card--watermarked' : ''}`}
     >
       {isVideo ? (
-        <div className="client-media-card__video-wrap">
-          {ready && item.previewUrl ? (
-            <video
-              controls
-              playsInline
-              preload="metadata"
-              poster={gallery.cover?.previewUrl}
-              src={item.previewUrl}
-            />
+        <button
+          className="client-media-card__video-wrap"
+          type="button"
+          onClick={onOpen}
+          disabled={!ready}
+        >
+          {ready && (item.thumbnailUrl || item.previewUrl) ? (
+            <>
+              <video
+                playsInline
+                preload="metadata"
+                poster={item.thumbnailUrl || item.previewUrl}
+                src={item.previewUrl}
+                muted
+                disablePictureInPicture
+              />
+              <span className="client-media-card__play-icon">&#9654;</span>
+            </>
           ) : (
             <div className="client-media-card__processing">
               {item.processingStatus.toLowerCase()}
@@ -325,7 +334,7 @@ function MediaCard({
           <span className="client-media-card__video-label">
             Film {formatDuration(item.durationSeconds)}
           </span>
-        </div>
+        </button>
       ) : (
         <button
           className="client-media-card__image"
diff --git a/frontend/src/components/gallery/PhotoViewer.tsx b/frontend/src/components/gallery/PhotoViewer.tsx
index cb443b0..3ca0cc1 100644
--- a/frontend/src/components/gallery/PhotoViewer.tsx
+++ b/frontend/src/components/gallery/PhotoViewer.tsx
@@ -22,7 +22,9 @@ export function PhotoViewer({
   onDownload,
 }: PhotoViewerProps) {
   const startX = useRef<number | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
   const item = items[index];
+  const isVideo = item?.mimeType.startsWith('video/');
 
   useEffect(() => {
     const previousOverflow = document.body.style.overflow;
@@ -35,7 +37,7 @@ export function PhotoViewer({
   useEffect(() => {
     [index - 1, index + 1].forEach((neighborIndex) => {
       const neighbor = items[neighborIndex];
-      if (neighbor?.previewUrl) {
+      if (neighbor?.previewUrl && !neighbor.mimeType.startsWith('video/')) {
         const image = new Image();
         image.src = neighbor.previewUrl;
       }
@@ -101,7 +103,20 @@ export function PhotoViewer({
             exit={{ opacity: 0, scale: 1.02 }}
             transition={{ duration: 0.25 }}
           >
-            {item.previewUrl ? (
+            {isVideo ? (
+              item.previewUrl ? (
+                <video
+                  ref={videoRef}
+                  className="photo-viewer__video"
+                  src={item.previewUrl}
+                  controls
+                  autoPlay
+                  playsInline
+                />
+              ) : (
+                <span>Preview processing</span>
+              )
+            ) : item.previewUrl ? (
               <img src={item.previewUrl} alt={item.originalFilename} draggable={false} />
             ) : (
               <span>Preview processing</span>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 13d7e6f..9f1bf0b 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -34,7 +34,6 @@ export default function LoginPage() {
     <AuthLayout>
       <div className="auth-card">
         <div className="auth-card__heading">
-          <p className="platform-kicker platform-kicker--accent">01 / Authenticate</p>
           <h2 className="platform-display">Sign In</h2>
           <p>Photographer console access.</p>
         </div>
diff --git a/frontend/src/pages/RootPage.tsx b/frontend/src/pages/RootPage.tsx
new file mode 100644
index 0000000..c2da43b
--- /dev/null
+++ b/frontend/src/pages/RootPage.tsx
@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+
+export default function RootPage() {
+  return (
+    <div className="root-shell">
+      <div className="root-shell__center">
+        <span className="root-shell__mark">N</span>
+        <h1 className="root-shell__title">Noah Bianchi</h1>
+        <div className="root-shell__actions">
+          <Link className="platform-button platform-button--accent" to="/login">
+            <span>Studio Access</span>
+            <span aria-hidden="true">&#8599;</span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/DashboardPage.tsx b/frontend/src/pages/dashboard/DashboardPage.tsx
index ef59d86..20e1165 100644
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -45,7 +45,6 @@ export default function DashboardPage() {
           <div>
             <p className="studio-kicker">{user?.name || 'Studio'} / Overview</p>
             <h1 className="studio-display">Dashboard</h1>
-            <p className="studio-page__lede">Active delivery workspace.</p>
           </div>
           <Link className="platform-button platform-button--accent" to="/dashboard/galleries/new">
             <span>New Gallery</span>
@@ -81,15 +80,7 @@ export default function DashboardPage() {
         </section>
 
         <section className="studio-section studio-section--recent">
-          <div className="studio-section__heading">
-            <div>
-              <p className="studio-kicker">06 / Recent activity</p>
-              <h2 className="studio-heading">Recent Galleries</h2>
-            </div>
-            <Link className="inline-link" to="/dashboard/galleries">
-              View All <span aria-hidden="true">&#8599;</span>
-            </Link>
-          </div>
+          <span className="studio-section__heading"></span>
           {error && <p className="studio-alert studio-alert--error">{error}</p>}
           {loading ? (
             <div className="studio-list-loading">
diff --git a/frontend/src/pages/dashboard/GalleriesPage.tsx b/frontend/src/pages/dashboard/GalleriesPage.tsx
index d844ae6..4ae2acd 100644
--- a/frontend/src/pages/dashboard/GalleriesPage.tsx
+++ b/frontend/src/pages/dashboard/GalleriesPage.tsx
@@ -35,9 +35,7 @@ export default function GalleriesPage() {
       <div className="studio-page">
         <header className="studio-page__header studio-page__header--compact">
           <div>
-            <p className="studio-kicker">Workspace / Galleries</p>
             <h1 className="studio-display">Galleries</h1>
-            <p className="studio-page__lede">All delivery records.</p>
           </div>
           <Link className="platform-button platform-button--accent" to="/dashboard/galleries/new">
             <span>New Gallery</span>
diff --git a/frontend/src/pages/dashboard/GalleryEditorPage.tsx b/frontend/src/pages/dashboard/GalleryEditorPage.tsx
index a9fdf3b..05988a4 100644
--- a/frontend/src/pages/dashboard/GalleryEditorPage.tsx
+++ b/frontend/src/pages/dashboard/GalleryEditorPage.tsx
@@ -91,6 +91,23 @@ export default function GalleryEditorPage() {
   const [publishing, setPublishing] = useState(false);
   const [notice, setNotice] = useState('');
   const [error, setError] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [videoItem, setVideoItem] = useState<MediaItem | null>(null);
+  const clientURL = gallery?.slug ? `${window.location.origin}/g/${gallery.slug}` : '';
+
+  async function copyLink() {
+    try {
+      await navigator.clipboard.writeText(clientURL);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1800);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  function openLink() {
+    if (clientURL) window.open(clientURL, '_blank', 'noopener');
+  }
 
   useEffect(() => {
     if (isNew) return;
@@ -222,6 +239,27 @@ export default function GalleryEditorPage() {
     }
   }
 
+  async function moveMediaToIndex(fromIndex: number, toIndex: number) {
+    if (!gallery) return;
+    const items = [...gallery.media];
+    const [moved] = items.splice(fromIndex, 1);
+    items.splice(toIndex, 0, moved);
+    setGallery((current) => (current ? { ...current, media: items } : current));
+    try {
+      const updates: { id: string; sortOrder: number }[] = [];
+      items.forEach((item, i) => {
+        const original = gallery.media.find((m) => m.id === item.id);
+        if (original && original.sortOrder !== i) {
+          updates.push({ id: item.id, sortOrder: i });
+        }
+      });
+      await Promise.all(updates.map((u) => updateMediaOrder(u.id, u.sortOrder)));
+    } catch (reason) {
+      setGallery((current) => (current ? { ...current, media: gallery.media } : current));
+      setError(reason instanceof Error ? reason.message : 'Could not reorder media.');
+    }
+  }
+
   function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     void save();
@@ -253,6 +291,16 @@ export default function GalleryEditorPage() {
                 Preview <span aria-hidden="true">&#8599;</span>
               </Link>
             )}
+            {gallery?.status === 'published' && clientURL && (
+              <>
+                <button className="editor-button editor-button--quiet" type="button" onClick={() => void copyLink()}>
+                  {copied ? 'Copied' : 'Copy link'}
+                </button>
+                <button className="editor-button editor-button--quiet" type="button" onClick={openLink}>
+                  Open <span aria-hidden="true">&#8599;</span>
+                </button>
+              </>
+            )}
             <button
               className="editor-button editor-button--quiet"
               type="button"
@@ -344,10 +392,7 @@ export default function GalleryEditorPage() {
             <section className="editor-section">
               <div className="editor-section__heading">
                 <p className="studio-kicker">02 / Media_Buffer</p>
-                <h2>Upload_Files</h2>
-                <p>
-                  Originals stay private in object storage. Previews are prepared in the background.
-                </p>
+                <h2>Upload Files</h2>
               </div>
               {gallery ? (
                 <UploadDropzone
@@ -361,7 +406,6 @@ export default function GalleryEditorPage() {
                 />
               ) : (
                 <div className="editor-locked">
-                  <span>01</span>
                   <p>Save the gallery details above to start uploading work.</p>
                 </div>
               )}
@@ -376,7 +420,9 @@ export default function GalleryEditorPage() {
                       cover={draft.coverMediaId === item.id}
                       onCover={() => setField('coverMediaId', item.id)}
                       onMove={(direction) => void moveMedia(item, direction)}
+                      onMoveToIndex={(toIndex) => void moveMediaToIndex(index, toIndex)}
                       onDelete={() => void removeMedia(item)}
+                      onOpenVideo={() => setVideoItem(item)}
                     />
                   ))}
                 </div>
@@ -387,11 +433,32 @@ export default function GalleryEditorPage() {
             </section>
           </div>
 
+          {videoItem && (
+            <div className="editor-video-viewer" role="dialog" aria-modal="true" onClick={() => setVideoItem(null)}>
+              <button className="editor-video-viewer__close" type="button" onClick={() => setVideoItem(null)} aria-label="Close video">
+                &#215;
+              </button>
+              <div className="editor-video-viewer__stage" onClick={(e) => e.stopPropagation()}>
+                {videoItem.previewUrl ? (
+                  <video
+                    className="editor-video-viewer__player"
+                    src={videoItem.previewUrl}
+                    controls
+                    autoPlay
+                    playsInline
+                  />
+                ) : (
+                  <p>Video is still processing.</p>
+                )}
+              </div>
+            </div>
+          )}
+
           <aside className="editor-aside">
             <section className="editor-section editor-section--aside">
               <div className="editor-section__heading">
-                <p className="studio-kicker">03 / Client_Control</p>
-                <h2>Access_Settings</h2>
+                <p className="studio-kicker">03 / Client Control</p>
+                <h2>Access Settings</h2>
               </div>
               <div className="toggle-list">
                 <Toggle
@@ -588,7 +655,9 @@ function EditorMediaTile({
   cover,
   onCover,
   onMove,
+  onMoveToIndex,
   onDelete,
+  onOpenVideo,
 }: {
   item: MediaItem;
   index: number;
@@ -596,13 +665,58 @@ function EditorMediaTile({
   cover: boolean;
   onCover: () => void;
   onMove: (direction: -1 | 1) => void;
+  onMoveToIndex: (toIndex: number) => void;
   onDelete: () => void;
+  onOpenVideo?: () => void;
 }) {
   const isVideo = item.mimeType.startsWith('video/');
+  const [dragOver, setDragOver] = useState(false);
+
+  function handleDragStart(event: React.DragEvent) {
+    event.dataTransfer.setData('text/plain', String(index));
+    event.dataTransfer.effectAllowed = 'move';
+  }
+
+  function handleDragOver(event: React.DragEvent) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    setDragOver(true);
+  }
+
+  function handleDragLeave() {
+    setDragOver(false);
+  }
+
+  function handleDrop(event: React.DragEvent) {
+    event.preventDefault();
+    setDragOver(false);
+    const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10);
+    if (fromIndex !== index && !isNaN(fromIndex)) {
+      onMoveToIndex(index);
+    }
+  }
+
   return (
-    <article className={`editor-media-tile ${cover ? 'is-cover' : ''}`}>
+    <article
+      className={`editor-media-tile ${cover ? 'is-cover' : ''} ${dragOver ? 'is-drag-over' : ''} ${isVideo ? 'editor-media-tile--video' : ''}`}
+      draggable
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
       <div className="editor-media-tile__image">
-        {item.previewUrl ? (
+        {isVideo ? (
+          <button
+            className="editor-media-tile__video-placeholder"
+            type="button"
+            onClick={(e) => { e.stopPropagation(); onOpenVideo?.(); }}
+            aria-label="Play video"
+          >
+            <span className="editor-media-tile__play-icon">&#9654;</span>
+            <span>VIDEO</span>
+          </button>
+        ) : item.previewUrl ? (
           <img src={item.previewUrl} alt="" loading="lazy" />
         ) : (
           <div className="editor-media-tile__placeholder">
@@ -610,8 +724,8 @@ function EditorMediaTile({
           </div>
         )}
         {isVideo && (
-          <span className="editor-media-tile__video">
-            VIDEO {formatDuration(item.durationSeconds)}
+          <span className="editor-media-tile__video-label">
+            Film {formatDuration(item.durationSeconds)}
           </span>
         )}
         {cover && <span className="editor-media-tile__cover">Cover</span>}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index d88b4bf..e6e162c 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -3,16 +3,37 @@
 @tailwind utilities;
 
 :root {
-  font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
-  color: #f6eee2;
-  background: #17131b;
+  --bg: #0a0a0a;
+  --surface: #111111;
+  --surface-elevated: #181818;
+  --surface-hover: #1e1e1e;
+  --fg: #f0ede8;
+  --fg-secondary: #b0aca4;
+  --fg-muted: #7d7972;
+  --border: rgba(240, 237, 232, 0.1);
+  --border-subtle: rgba(240, 237, 232, 0.06);
+  --accent: #bc9b7a;
+  --accent-hover: #cdae8f;
+  --accent-subtle: rgba(188, 155, 122, 0.12);
+  --danger: #c45544;
+  --success: #7d9b6a;
+  --radius-sm: 3px;
+  --radius: 5px;
+  --radius-lg: 8px;
+  --transition: 250ms cubic-bezier(0.22, 1, 0.36, 1);
+
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: var(--fg);
+  background: var(--bg);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -36,12 +57,15 @@ a {
 button {
   border: 0;
   font: inherit;
+  cursor: pointer;
+  background: none;
+  padding: 0;
 }
 
 button:focus-visible,
 a:focus-visible {
-  outline: 2px solid #f5d58d;
-  outline-offset: 5px;
+  outline: 1px solid var(--accent);
+  outline-offset: 3px;
 }
 
 a {
@@ -49,14 +73,133 @@ a {
   text-decoration: none;
 }
 
+:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 3px;
+}
+
+::selection {
+  background: var(--accent);
+  color: var(--bg);
+}
+
 .display {
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    'Times New Roman',
-    serif;
+  font-family: Georgia, 'Times New Roman', serif;
   font-weight: 400;
-  letter-spacing: -0.055em;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.eyebrow {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.eyebrow--warm {
+  color: var(--accent);
+}
+
+.eyebrow--ink {
+  color: var(--fg);
+}
+
+.eyebrow--quiet {
+  color: var(--fg-muted);
+}
+
+.studio-kicker {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.platform-kicker {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.platform-kicker--accent {
+  color: var(--accent);
+}
+
+.platform-display {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(32px, 5vw, 52px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.08;
+  color: var(--fg);
+}
+
+.studio-display {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(24px, 3.5vw, 38px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: var(--fg);
+}
+
+.studio-heading {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+}
+
+.platform-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--accent);
+  color: var(--bg);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.brand-lockup {
+  display: inline-flex;
+  flex-direction: column;
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.brand-lockup span:last-child {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  text-transform: none;
+  color: var(--fg);
+  margin-top: 3px;
+}
+
+.brand-lockup--light span:last-child {
+  color: var(--fg);
+}
+
+.brand-lockup--ink span:last-child {
+  color: var(--fg);
 }
 
 .experience-screen {
@@ -69,11 +212,12 @@ a {
   display: flex;
   flex: 1;
   width: 100%;
-  max-width: 1320px;
+  max-width: 1200px;
   min-height: calc(100svh - clamp(48px, 8vw, 112px));
   margin: 0 auto;
   flex-direction: column;
   justify-content: space-between;
+  padding: 0 clamp(24px, 4vw, 64px);
 }
 
 .intro-screen__topline,
@@ -84,2694 +228,3036 @@ a {
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
-}
-
-.brand-lockup {
-  display: inline-flex;
-  flex-direction: column;
-  color: #f5d58d;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.11em;
-  line-height: 0.95;
-  text-transform: uppercase;
-}
-
-.brand-lockup span:last-child {
-  color: #f6eee2;
-  font-weight: 400;
-  letter-spacing: 0.17em;
-}
-
-.brand-lockup--light {
-  color: #ed9a79;
-}
-
-.brand-lockup--light span:last-child {
-  color: #f6eee2;
-}
-
-.brand-lockup--ink {
-  color: #b06c62;
-}
-
-.brand-lockup--ink span:last-child {
-  color: #29232a;
-}
-
-.topline-note {
-  color: rgba(246, 238, 226, 0.54);
-  font-size: 10px;
-  letter-spacing: 0.15em;
-  line-height: 1.4;
-  text-align: right;
-  text-transform: uppercase;
-}
-
-.intro-screen__center {
-  width: min(100%, 760px);
-  margin: auto 0;
-  padding: 9vh 0 8vh;
-}
-
-.eyebrow {
-  margin: 0 0 25px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.19em;
-  line-height: 1.3;
-  text-transform: uppercase;
-}
-
-.eyebrow--warm {
-  color: #ed9a79;
-}
-
-.eyebrow--quiet {
-  color: rgba(246, 238, 226, 0.54);
-}
-
-.eyebrow--ink {
-  color: #a7655f;
-}
-
-.intro-screen__title {
-  max-width: 820px;
-  margin: 0;
-  color: #f6eee2;
-  font-size: clamp(72px, 12.5vw, 178px);
-  line-height: 0.84;
-}
-
-.intro-screen__title em,
-.finish-screen h1 em,
-.content-screen h1 em {
-  color: #ed9a79;
-  font-style: italic;
-}
-
-.intro-screen__message {
-  max-width: 350px;
-  margin: 38px 0 34px;
-  color: rgba(246, 238, 226, 0.68);
-  font-size: clamp(17px, 2vw, 22px);
-  font-weight: 300;
-  letter-spacing: -0.02em;
-  line-height: 1.45;
-}
-
-.primary-action,
-.ghost-action,
-.next-action {
-  display: inline-flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: space-between;
-  gap: 28px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  line-height: 1;
-  text-transform: uppercase;
-  transition:
-    border-color 180ms ease,
-    background-color 180ms ease,
-    color 180ms ease;
-}
-
-.primary-action {
-  min-width: 235px;
-  padding: 8px 8px 8px 21px;
-  background: #f6eee2;
-  color: #29232a;
-}
-
-.primary-action:hover {
-  background: #f5d58d;
-}
-
-.primary-action__icon {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  place-items: center;
-  border-radius: 50%;
-  background: #ed9a79;
-  color: #29232a;
-}
-
-.primary-action__icon svg {
-  width: 18px;
-  height: 18px;
-}
-
-.intro-screen__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 24px;
-  border-top: 1px solid rgba(246, 238, 226, 0.13);
-  color: rgba(246, 238, 226, 0.4);
-  font-size: 10px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.intro-screen__footer strong {
-  color: rgba(246, 238, 226, 0.72);
-  font-weight: 500;
-}
-
-.reveal-screen__center {
-  position: relative;
-  display: flex;
-  width: min(100%, 660px);
-  margin: auto;
-  flex-direction: column;
-  align-items: center;
-  padding: 8vh 0;
-  text-align: center;
-}
-
-.reveal-screen__copy {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.reveal-screen__copy .eyebrow {
-  margin-bottom: 20px;
-}
-
-.reveal-screen__copy h1 {
-  max-width: 540px;
-  margin: 0;
-  color: #f6eee2;
-  font-size: clamp(42px, 6vw, 78px);
-  line-height: 0.94;
-}
-
-.reveal-screen__copy p:last-child {
-  max-width: 320px;
-  margin: 22px 0 0;
-  color: rgba(246, 238, 226, 0.55);
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.reveal-seal {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  width: clamp(136px, 20vw, 190px);
-  height: clamp(136px, 20vw, 190px);
-  margin-bottom: 58px;
-  place-items: center;
-  border: 1px solid rgba(246, 238, 226, 0.5);
-  border-radius: 50%;
-  background: rgba(43, 36, 67, 0.7);
-  box-shadow:
-    0 0 0 12px rgba(246, 238, 226, 0.025),
-    0 20px 80px rgba(0, 0, 0, 0.22);
-}
-
-.reveal-seal__halo {
-  position: absolute;
-  inset: 14px;
-  border: 1px dashed rgba(246, 238, 226, 0.3);
-  border-radius: 50%;
-}
-
-.reveal-seal__mark {
-  position: relative;
-  margin-top: -7px;
-  color: #f5d58d;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 42px;
-  font-style: italic;
-  letter-spacing: -0.15em;
-}
-
-.reveal-seal__label {
-  position: absolute;
-  bottom: 31px;
-  color: rgba(246, 238, 226, 0.55);
-  font-size: 8px;
-  letter-spacing: 0.19em;
-  text-transform: uppercase;
-}
-
-.ghost-action {
-  position: relative;
-  z-index: 1;
-  min-width: 225px;
-  margin-top: 36px;
-  padding: 16px 3px 16px 20px;
-  border: 1px solid rgba(246, 238, 226, 0.28);
-  background: transparent;
-}
-
-.ghost-action--light {
-  color: #f6eee2;
-}
-
-.ghost-action:hover {
-  border-color: rgba(246, 238, 226, 0.7);
-  background: rgba(246, 238, 226, 0.08);
-}
-
-.ghost-action > span:last-child,
-.next-action > span:last-child {
-  display: grid;
-  width: 30px;
-  height: 30px;
-  place-items: center;
-  border: 1px solid currentColor;
-  border-radius: 50%;
-  font-size: 17px;
-  font-weight: 300;
-  letter-spacing: 0;
-  line-height: 1;
-}
-
-.content-screen {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  max-width: 1000px;
-  min-height: calc(100svh - clamp(48px, 8vw, 112px));
-  margin: 0 auto;
-  flex-direction: column;
-  justify-content: space-between;
+  padding-top: clamp(24px, 4vw, 48px);
 }
 
 .content-screen__intro {
-  margin-top: clamp(50px, 9vh, 100px);
+  max-width: 600px;
+  margin-bottom: 60px;
 }
 
 .content-screen__intro .eyebrow {
-  margin-bottom: 18px;
+  margin-bottom: 12px;
 }
 
 .content-screen h1 {
-  margin: 0;
-  color: #29232a;
-  font-size: clamp(46px, 7.4vw, 90px);
-  line-height: 0.9;
+  font-size: clamp(28px, 4vw, 44px);
+  line-height: 1.12;
+  font-weight: 400;
+  letter-spacing: -0.02em;
 }
 
-.progress-indicator {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  margin: clamp(38px, 7vh, 70px) 0 26px;
-}
-
-.progress-indicator__track {
-  display: flex;
-  width: 100%;
-  max-width: 350px;
-  gap: 5px;
-}
-
-.progress-indicator__segment {
-  height: 2px;
-  flex: 1;
-  background: rgba(41, 35, 42, 0.16);
-  transition: background-color 300ms ease;
-}
-
-.progress-indicator__segment.is-active {
-  background: #a7655f;
-}
-
-.progress-indicator__count {
-  color: rgba(41, 35, 42, 0.54);
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  white-space: nowrap;
+.content-screen h1 em {
+  font-style: normal;
+  color: var(--accent);
 }
 
 .content-screen__item {
-  width: 100%;
-  max-width: 780px;
-  min-height: 245px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 13px;
 }
 
 .content-screen__bottomline {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 24px;
-  padding-top: 28px;
-  border-top: 1px solid rgba(41, 35, 42, 0.14);
+  gap: 16px;
+  padding: clamp(24px, 4vw, 48px) 0;
 }
 
 .content-screen__bottomline > span {
-  color: rgba(41, 35, 42, 0.48);
+  font-size: 11px;
+  color: var(--fg-muted);
+}
+
+.topline-note {
   font-size: 10px;
-  letter-spacing: 0.15em;
+  color: var(--fg-muted);
+  letter-spacing: 0.02em;
+}
+
+.progress-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.progress-indicator__track {
+  display: flex;
+  gap: 5px;
+}
+
+.progress-indicator__segment {
+  width: 32px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--border);
+  transition: background var(--transition);
+}
+
+.progress-indicator__segment.is-active {
+  background: var(--accent);
+}
+
+.progress-indicator__count {
+  font-size: 10px;
+  color: var(--fg-muted);
+  font-weight: 500;
+}
+
+.intro-screen__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 24px;
+  padding: 80px 0;
+}
+
+.intro-screen__title {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(40px, 8vw, 80px);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  max-width: 700px;
+}
+
+.intro-screen__message {
+  font-size: 14px;
+  color: var(--fg-secondary);
+  max-width: 400px;
+  line-height: 1.6;
+}
+
+.intro-screen__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: clamp(32px, 5vw, 64px);
+}
+
+.intro-screen__footer strong {
+  font-weight: 600;
+}
+
+.reveal-screen__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  padding: 60px 0;
+}
+
+.reveal-screen__copy {
+  text-align: center;
+  max-width: 520px;
+}
+
+.reveal-screen__copy .eyebrow {
+  margin-bottom: 12px;
+}
+
+.reveal-screen__copy h1 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(28px, 4vw, 42px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin-bottom: 16px;
+}
+
+.reveal-screen__copy p:last-child {
+  font-size: 14px;
+  color: var(--fg-secondary);
+  line-height: 1.6;
+}
+
+.reveal-seal {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 1px solid var(--accent);
+  margin-bottom: 20px;
+}
+
+.reveal-seal__halo {
+  position: absolute;
+  inset: -8px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+}
+
+.reveal-seal__mark {
+  font-size: 36px;
+  line-height: 1;
+}
+
+.reveal-seal__label {
+  position: absolute;
+  bottom: -24px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
+  color: var(--fg-muted);
+  white-space: nowrap;
 }
 
-.next-action {
-  min-width: 190px;
-  padding: 7px 7px 7px 19px;
-  background: #29232a;
-  color: #f6eee2;
+.reveal-orbit {
+  position: absolute;
+  inset: -40px;
+  border-radius: 50%;
+  border: 1px dashed var(--border);
+  animation: orbit-spin 30s linear infinite;
 }
 
-.next-action:hover {
-  background: #a7655f;
+.reveal-orbit--inner {
+  inset: -24px;
+  animation-duration: 20s;
+  animation-direction: reverse;
 }
 
-.next-action > span:last-child {
-  color: #f5d58d;
+@keyframes orbit-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .finish-screen__center {
   display: flex;
-  max-width: 700px;
-  margin: auto 0;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 7vh 0;
-}
-
-.finish-screen__spark {
-  display: grid;
-  width: 52px;
-  height: 52px;
-  margin-bottom: 34px;
-  place-items: center;
-  border: 1px solid rgba(245, 213, 141, 0.5);
-  border-radius: 50%;
-  color: #f5d58d;
-  font-size: 22px;
+  align-items: center;
+  text-align: center;
+  gap: 16px;
+  padding: 80px 0;
 }
 
 .finish-screen h1 {
-  margin: 0;
-  color: #f6eee2;
-  font-size: clamp(58px, 9.5vw, 126px);
-  line-height: 0.86;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(32px, 5vw, 56px);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  max-width: 600px;
+}
+
+.finish-screen h1 em {
+  font-style: normal;
+  color: var(--accent);
 }
 
 .finish-screen__message {
-  max-width: 480px;
-  margin: 38px 0 0;
-  color: rgba(246, 238, 226, 0.66);
-  font-size: clamp(17px, 2vw, 21px);
-  font-weight: 300;
-  line-height: 1.52;
+  font-size: 14px;
+  color: var(--fg-secondary);
+  max-width: 400px;
+  line-height: 1.6;
 }
 
 .finish-screen__signature {
-  margin: 34px 0 0;
-  color: rgba(246, 238, 226, 0.45);
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 20px;
-  line-height: 1.25;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--fg-muted);
 }
 
 .finish-screen__signature strong {
-  color: #ed9a79;
-  font-size: 27px;
-  font-style: italic;
-  font-weight: 400;
+  font-weight: 600;
+  color: var(--fg);
 }
 
 .finish-screen__replay {
-  align-self: flex-start;
-  margin-top: 0;
+  margin-top: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: color var(--transition);
+}
+
+.finish-screen__replay:hover {
+  color: var(--accent);
+}
+
+.finish-screen__spark {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
 .confetti {
-  position: absolute;
-  z-index: 4;
+  position: fixed;
   inset: 0;
-  overflow: hidden;
   pointer-events: none;
+  z-index: 1000;
 }
 
 .confetti__piece {
   position: absolute;
-  display: block;
-  border-radius: 999px;
-  animation: confetti-fall 4.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
+  width: 6px;
+  height: 6px;
   opacity: 0;
 }
 
 @keyframes confetti-fall {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -40px, 0) rotate(0deg);
-  }
-  12% {
-    opacity: 0.9;
-  }
-  75% {
-    opacity: 0.85;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(20px, 88vh, 0) rotate(280deg);
-  }
+  0% { opacity: 1; transform: translateY(-10vh) rotate(0deg); }
+  100% { opacity: 0; transform: translateY(110vh) rotate(720deg); }
 }
 
 .request-state {
   display: flex;
-  width: min(100%, 620px);
-  margin: auto;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  text-align: center;
+  gap: 8px;
 }
 
 .request-state .display {
-  margin: 0;
-  color: #f6eee2;
-  font-size: clamp(55px, 9vw, 106px);
-  line-height: 0.88;
+  font-size: 28px;
+  color: var(--fg);
 }
 
 .request-state > p:not(.eyebrow) {
-  max-width: 400px;
-  margin: 28px 0 32px;
-  color: rgba(246, 238, 226, 0.6);
-  font-size: 17px;
-  line-height: 1.5;
-}
-
-.request-state--loading {
-  align-items: center;
-  text-align: center;
+  font-size: 13px;
+  color: var(--fg-secondary);
+  max-width: 360px;
+  line-height: 1.6;
 }
 
 .request-state--loading .eyebrow {
-  margin-top: 32px;
+  animation: pulse-opacity 1.2s ease-in-out infinite;
 }
 
 .request-state--loading .display {
-  font-size: clamp(52px, 8vw, 92px);
+  animation: pulse-opacity 1.2s ease-in-out infinite 0.2s;
 }
 
-@media (max-width: 640px) {
-  .topline-note {
-    max-width: 130px;
-    font-size: 9px;
-  }
-
-  .intro-screen__center {
-    padding: 14vh 0 10vh;
-  }
-
-  .intro-screen__title {
-    font-size: clamp(65px, 19vw, 110px);
-  }
-
-  .intro-screen__message {
-    margin-top: 30px;
-    font-size: 17px;
-  }
-
-  .intro-screen__footer {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .reveal-screen__center {
-    padding: 8vh 0;
-  }
-
-  .reveal-seal {
-    margin-bottom: 44px;
-  }
-
-  .reveal-orbit {
-    top: 7vh;
-    width: min(84vw, 360px);
-    height: min(84vw, 360px);
-  }
-
-  .reveal-orbit--inner {
-    width: min(62vw, 270px);
-    height: min(62vw, 270px);
-  }
-
-  .reveal-screen__copy h1 {
-    font-size: clamp(40px, 11vw, 58px);
-  }
-
-  .content-screen__intro {
-    margin-top: 58px;
-  }
-
-  .content-screen h1 {
-    font-size: clamp(46px, 13vw, 72px);
-  }
-
-  .progress-indicator {
-    margin-top: 42px;
-  }
-
-  .content-screen__item {
-    min-height: 300px;
-  }
-
-  .content-screen__bottomline {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 18px;
-  }
-
-  .next-action {
-    width: 100%;
-  }
-
-  .finish-screen__center {
-    padding: 9vh 0;
-  }
-
-  .finish-screen h1 {
-    font-size: clamp(58px, 15.5vw, 96px);
-  }
-
-  .finish-screen__message {
-    margin-top: 30px;
-    font-size: 17px;
-  }
-
-  .request-state .display {
-    font-size: clamp(53px, 15vw, 88px);
-  }
+@keyframes pulse-opacity {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    animation-duration: 0.001ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
-  }
-}
-
-/* Studio and client-gallery surfaces */
-.app-loading {
-  display: grid;
-  min-height: 100svh;
-  place-items: center;
-  background: #18151b;
-  color: #f4eee4;
-}
-
-.app-loading__mark,
-.client-loading__mark {
-  display: block;
-  color: #efb084;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 24px;
-  font-style: italic;
-}
-
-.auth-shell {
-  display: grid;
-  min-height: 100svh;
-  grid-template-columns: minmax(360px, 0.95fr) minmax(500px, 1.05fr);
-  background: #ece8e1;
-  color: #27232a;
-}
-
-.auth-shell__texture {
-  position: absolute;
-  z-index: 0;
-  inset: 0 50% 0 0;
-  background: #1b181e;
-}
-
-.auth-shell__brand,
-.auth-shell__aside,
-.auth-shell__panel {
-  position: relative;
-  z-index: 1;
-}
-
-.auth-shell__brand {
-  position: absolute;
-  top: 44px;
-  left: clamp(24px, 5vw, 72px);
-  display: flex;
+.primary-action {
+  display: inline-flex;
   align-items: center;
-  gap: 12px;
-  color: #f5eee3;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-}
-
-.platform-mark,
-.client-monogram,
-.studio-logo__mark,
-.client-brand__mark {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border: 1px solid currentColor;
-  border-radius: 50%;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 17px;
-  font-style: italic;
-  font-weight: 400;
-  letter-spacing: -0.12em;
-}
-
-.auth-shell__aside {
-  align-self: center;
-  max-width: 500px;
-  margin-left: clamp(24px, 10vw, 150px);
-  padding: 100px 30px 70px 0;
-  color: #f5eee3;
-}
-
-.platform-kicker,
-.studio-kicker,
-.client-kicker {
-  margin: 0 0 20px;
-  color: #c17d6d;
+  gap: 10px;
+  padding: 10px 10px 10px 22px;
+  background: var(--surface-elevated);
+  color: var(--fg);
   font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  line-height: 1.3;
+  font-weight: 600;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
+  transition: background var(--transition), color var(--transition);
 }
 
-.platform-kicker--accent {
-  color: #bd7567;
+.primary-action:hover {
+  background: var(--accent);
+  color: var(--bg);
 }
 
-.platform-display,
-.studio-display,
-.client-display {
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    'Times New Roman',
-    serif;
-  font-weight: 400;
-  letter-spacing: -0.065em;
-  line-height: 0.88;
-}
-
-.auth-shell__aside h1 {
-  margin: 0;
-  font-size: clamp(68px, 8vw, 132px);
-}
-
-.platform-display em,
-.studio-display em,
-.client-display em {
-  color: #ce816f;
-  font-style: italic;
-}
-
-.auth-shell__aside > p:last-child {
-  max-width: 260px;
-  margin: 34px 0 0;
-  color: rgba(245, 238, 227, 0.58);
-  font-size: 16px;
-  line-height: 1.5;
-}
-
-.auth-shell__panel {
+.primary-action__icon {
   display: flex;
-  min-height: 100svh;
+  width: 32px;
+  height: 32px;
   align-items: center;
   justify-content: center;
-  padding: 60px clamp(24px, 8vw, 130px);
-  background: #eeeae3;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 14px;
+  line-height: 1;
+  transition: background var(--transition), color var(--transition);
 }
 
-.auth-card {
-  width: min(100%, 430px);
+.primary-action:hover .primary-action__icon {
+  background: var(--bg);
+  color: var(--accent);
 }
 
-.auth-card__heading h2 {
-  margin: 0;
-  font-size: clamp(53px, 6vw, 80px);
-  line-height: 0.86;
+.primary-action__icon svg {
+  width: 16px;
+  height: 16px;
 }
 
-.auth-card__heading > p:last-child {
-  max-width: 370px;
-  margin: 29px 0 0;
-  color: rgba(39, 35, 42, 0.61);
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.auth-form {
-  display: flex;
-  margin-top: 42px;
-  flex-direction: column;
-  gap: 19px;
-}
-
-.auth-form label,
-.editor-fields label,
-.editor-fields__full,
-.editor-field-single,
-.editor-color-field {
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
-  color: rgba(39, 35, 42, 0.68);
+.ghost-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 8px 8px 18px;
+  border: 1px solid var(--border);
+  color: var(--fg);
   font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
+  font-weight: 600;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
+  transition: border-color var(--transition), background var(--transition);
 }
 
-.auth-form input,
-.editor-fields input,
-.editor-fields textarea,
-.editor-field-single input,
-.editor-color-field input[type='url'] {
-  width: 100%;
-  border: 0;
-  border-bottom: 1px solid rgba(39, 35, 42, 0.25);
-  border-radius: 0;
-  outline: 0;
-  background: transparent;
-  color: #27232a;
-  font-size: 16px;
+.ghost-action:hover {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+}
+
+.ghost-action--light {
+  color: var(--fg);
+}
+
+.ghost-action > span:last-child,
+.next-action > span:last-child {
+  display: flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  font-size: 14px;
   font-weight: 400;
   letter-spacing: 0;
-  padding: 8px 0 12px;
-  text-transform: none;
-  transition: border-color 180ms ease;
+  line-height: 1;
+  transition: border-color var(--transition);
 }
 
-.auth-form input:focus,
-.editor-fields input:focus,
-.editor-fields textarea:focus,
-.editor-field-single input:focus {
-  border-color: #ad695b;
+.ghost-action:hover > span:last-child {
+  border-color: var(--accent);
 }
 
-.platform-button,
-.editor-button,
-.client-download-button {
+.next-action {
   display: inline-flex;
-  cursor: pointer;
   align-items: center;
-  justify-content: space-between;
-  gap: 23px;
-  border: 0;
+  gap: 10px;
+  padding: 8px 8px 8px 18px;
+  background: var(--surface-elevated);
+  color: var(--fg);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  transition: background var(--transition);
+}
+
+.next-action:hover {
+  background: var(--accent);
+}
+
+.next-action > span:last-child {
+  border-color: var(--border);
+  color: var(--accent);
+  transition: border-color var(--transition), color var(--transition);
+}
+
+.next-action:hover > span:last-child {
+  border-color: var(--bg);
+  color: var(--bg);
+}
+
+.platform-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 8px 8px 18px;
   border-radius: 999px;
   font-size: 10px;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.1em;
-  line-height: 1;
   text-transform: uppercase;
-  transition:
-    background-color 180ms ease,
-    color 180ms ease,
-    transform 180ms ease;
+  transition: background var(--transition), color var(--transition), transform var(--transition);
+  white-space: nowrap;
 }
 
-.platform-button:hover,
-.editor-button:hover,
-.client-download-button:hover {
-  transform: translateY(-2px);
-}
-
-.platform-button:disabled,
-.editor-button:disabled,
-.client-download-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  transform: none;
+.platform-button:hover {
+  transform: translateY(-1px);
 }
 
 .platform-button--dark {
-  width: 100%;
-  margin-top: 9px;
-  padding: 18px 18px 18px 22px;
-  background: #27232a;
-  color: #f5eee3;
+  background: var(--surface-elevated);
+  color: var(--fg);
 }
 
 .platform-button--dark:hover {
-  background: #ad695b;
+  background: var(--accent);
+  color: var(--bg);
 }
 
 .platform-button--dark > span:last-child,
 .platform-button--accent > span:last-child {
-  display: grid;
-  width: 28px;
-  height: 28px;
-  place-items: center;
+  display: flex;
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
   border: 1px solid currentColor;
   border-radius: 50%;
-  font-size: 16px;
-  font-weight: 300;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  transition: transform var(--transition);
+}
+
+.platform-button:hover > span:last-child {
+  transform: translateX(2px) translateY(-1px);
 }
 
 .platform-button--accent {
   min-width: 160px;
   padding: 8px 8px 8px 18px;
-  background: #ad695b;
-  color: #fff8ed;
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.platform-button--accent:hover {
+  background: var(--accent-hover);
 }
 
 .platform-button--accent > span:last-child {
-  color: #f4d5a0;
+  color: var(--bg);
+  border-color: rgba(0, 0, 0, 0.2);
 }
 
-.form-error,
-.studio-alert {
+.platform-button--accent:hover > span:last-child {
+  border-color: rgba(0, 0, 0, 0.3);
+}
+
+.inline-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+  transition: color var(--transition);
+}
+
+.inline-link:hover {
+  color: var(--accent);
+}
+
+.inline-link span {
+  font-size: 13px;
+  font-weight: 300;
+  transition: transform var(--transition);
+}
+
+.inline-link:hover span {
+  transform: translateX(2px) translateY(-1px);
+}
+
+.text-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--transition);
+}
+
+.text-action:hover {
+  color: var(--accent);
+}
+
+.text-action--muted {
+  color: var(--fg-muted);
+}
+
+.auth-shell {
+  display: flex;
+  min-height: 100svh;
+}
+
+.auth-shell__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  max-width: 520px;
+  padding: clamp(32px, 6vw, 80px);
+  gap: 24px;
+}
+
+.auth-shell__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+  transition: color var(--transition);
+}
+
+.auth-shell__brand:hover {
+  color: var(--accent);
+}
+
+.auth-shell__aside {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.auth-shell__aside h1 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(28px, 4vw, 42px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
   margin: 0;
-  font-size: 12px;
-  line-height: 1.45;
 }
 
-.form-error,
-.studio-alert--error,
-.client-form-error,
-.client-download-error {
-  color: #a84f4a;
+.auth-shell__aside > p:last-child {
+  font-size: 13px;
+  color: var(--fg-secondary);
+  line-height: 1.6;
+  max-width: 360px;
+}
+
+.auth-shell__texture {
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .auth-shell__texture {
+    display: block;
+    flex: 1;
+    background: var(--surface);
+    background-image: radial-gradient(circle at 30% 40%, rgba(188, 155, 122, 0.06) 0%, transparent 60%);
+  }
+}
+
+.auth-shell__panel {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  padding: clamp(24px, 4vw, 48px);
+}
+
+.auth-card__heading {
+  margin-bottom: 32px;
+}
+
+.auth-card__heading h2 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(22px, 3vw, 30px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin: 0 0 8px;
+}
+
+.auth-card__heading > p:last-child {
+  font-size: 12px;
+  color: var(--fg-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.auth-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.auth-form input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 400;
+  transition: border-color var(--transition), background var(--transition);
+  outline: none;
+}
+
+.auth-form input:focus {
+  border-color: var(--accent);
+  background: var(--surface-elevated);
+}
+
+.auth-form input::placeholder {
+  color: var(--fg-muted);
+  font-weight: 400;
+}
+
+.form-error {
+  font-size: 10px;
+  color: var(--danger);
+  font-weight: 500;
 }
 
 .auth-card__footer {
-  margin-top: 30px;
-  color: rgba(39, 35, 42, 0.52);
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 12px;
+  color: var(--fg-secondary);
 }
 
-.auth-card__footer a,
-.inline-link {
-  color: #9d5d54;
-  font-weight: 700;
+.auth-card__footer a {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--accent);
+  transition: color var(--transition);
+}
+
+.auth-card__footer a:hover {
+  color: var(--accent-hover);
 }
 
 .studio-shell {
   display: flex;
   min-height: 100svh;
-  background: #e8e4dd;
-  color: #2b272d;
 }
 
 .studio-sidebar {
   display: flex;
-  width: 258px;
-  flex: 0 0 258px;
-  padding: 36px 27px 28px;
   flex-direction: column;
-  background: #211d24;
-  color: #eee8df;
+  width: 220px;
+  min-width: 220px;
+  padding: 28px 20px;
+  background: var(--surface);
+  border-right: 1px solid var(--border-subtle);
+  overflow-y: auto;
+  transition: transform var(--transition);
+  z-index: 100;
+}
+
+.studio-sidebar__label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  margin-bottom: 14px;
 }
 
 .studio-logo {
   display: inline-flex;
   align-items: center;
-  gap: 11px;
-  color: #f2ece1;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.studio-logo small {
-  display: block;
-  margin-top: 4px;
-  color: rgba(242, 236, 225, 0.4);
-  font-size: 8px;
-  font-weight: 400;
-  letter-spacing: 0.17em;
+  gap: 10px;
+  margin-bottom: 36px;
 }
 
 .studio-logo__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
-  color: #efaa82;
-  font-size: 15px;
-}
-
-.studio-sidebar__label {
-  margin: 92px 0 16px;
-  color: rgba(242, 236, 225, 0.32);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--accent);
+  color: var(--bg);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .studio-nav {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
+  margin-bottom: 24px;
 }
 
 .studio-nav__item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 11px;
-  border-radius: 4px;
-  color: rgba(242, 236, 225, 0.5);
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
   font-size: 12px;
-  transition:
-    background-color 180ms ease,
-    color 180ms ease;
+  font-weight: 500;
+  color: var(--fg-secondary);
+  transition: background var(--transition), color var(--transition);
+  cursor: pointer;
+}
+
+.studio-nav__item:hover {
+  background: var(--surface-hover);
+  color: var(--fg);
 }
 
-.studio-nav__item:hover,
 .studio-nav__item.is-active {
-  background: rgba(242, 236, 225, 0.08);
-  color: #f2ece1;
-}
-
-.studio-nav__item.is-active .studio-nav__dot {
-  background: #efaa82;
+  background: var(--accent-subtle);
+  color: var(--accent);
+  font-weight: 600;
 }
 
 .studio-nav__dot {
-  width: 5px;
-  height: 5px;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
-  background: rgba(242, 236, 225, 0.28);
+  background: var(--fg-muted);
+}
+
+.studio-nav__item.is-active .studio-nav__dot {
+  background: var(--accent);
+}
+
+.studio-sidebar__note {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  color: var(--fg-muted);
+  line-height: 1.5;
+  margin-bottom: 24px;
+}
+
+.studio-sidebar__note strong {
+  font-weight: 600;
+  color: var(--fg-secondary);
+}
+
+.studio-sidebar__note small {
+  font-size: 9px;
+}
+
+.studio-sidebar__note-mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--accent-subtle);
+  color: var(--accent);
+  font-size: 12px;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-top: 1px;
 }
 
 .studio-sidebar__bottom {
   margin-top: auto;
 }
 
-.studio-sidebar__note {
-  display: flex;
-  align-items: flex-start;
-  gap: 11px;
-  margin-bottom: 32px;
-  padding: 17px 14px;
-  border: 1px solid rgba(242, 236, 225, 0.11);
-  color: rgba(242, 236, 225, 0.65);
-}
-
-.studio-sidebar__note-mark {
-  color: #efaa82;
-  font-size: 24px;
-  font-weight: 200;
-  line-height: 0.7;
-}
-
-.studio-sidebar__note strong,
-.studio-sidebar__note small {
-  display: block;
-}
-
-.studio-sidebar__note strong {
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.studio-sidebar__note small {
-  margin-top: 7px;
-  color: rgba(242, 236, 225, 0.38);
-  font-size: 9px;
-  line-height: 1.35;
-}
-
 .studio-account {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding-top: 19px;
-  border-top: 1px solid rgba(242, 236, 225, 0.13);
+  padding: 12px;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .studio-account__avatar {
-  display: grid;
-  width: 29px;
-  height: 29px;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background: #d88c75;
-  color: #211d24;
-  font-size: 9px;
-  font-weight: 800;
+  background: var(--surface-hover);
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  flex-shrink: 0;
 }
 
 .studio-account__details {
-  min-width: 0;
-  flex: 1;
-}
-
-.studio-account__details strong,
-.studio-account__details small {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .studio-account__details strong {
-  color: #eee8df;
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 600;
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .studio-account__details small {
-  margin-top: 3px;
-  color: rgba(242, 236, 225, 0.35);
   font-size: 9px;
+  color: var(--fg-muted);
 }
 
-.studio-account__logout,
-.studio-mobilebar__account {
-  display: grid;
-  cursor: pointer;
-  width: 25px;
-  height: 25px;
-  place-items: center;
-  border: 1px solid rgba(242, 236, 225, 0.23);
+.studio-account__logout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-left: auto;
   border-radius: 50%;
-  background: transparent;
-  color: rgba(242, 236, 225, 0.7);
-  font-size: 13px;
+  color: var(--fg-muted);
+  font-size: 14px;
+  line-height: 1;
+  transition: background var(--transition), color var(--transition);
+  flex-shrink: 0;
+}
+
+.studio-account__logout:hover {
+  background: var(--surface-hover);
+  color: var(--fg);
 }
 
 .studio-main {
-  min-width: 0;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 }
 
 .studio-mobilebar {
   display: none;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.studio-mobilebar .studio-logo {
+  margin-bottom: 0;
+}
+
+.studio-mobilebar__account {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--surface-hover);
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--transition);
+}
+
+.studio-mobilebar__account:hover {
+  background: var(--surface-elevated);
 }
 
 .studio-page {
-  width: min(100%, 1300px);
-  margin: 0 auto;
-  padding: clamp(38px, 5vw, 75px) clamp(23px, 5vw, 72px);
+  flex: 1;
+  padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 56px);
+  max-width: 1200px;
+  width: 100%;
 }
 
 .studio-page__header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  gap: 30px;
-}
-
-.studio-page__header--compact {
-  align-items: center;
+  gap: 20px;
+  margin-bottom: 40px;
 }
 
 .studio-page__header .studio-display {
-  max-width: 690px;
   margin: 0;
-  font-size: clamp(58px, 7vw, 105px);
+}
+
+.studio-page__header .platform-button {
+  flex-shrink: 0;
+}
+
+.studio-page__header--compact .studio-display {
+  font-size: clamp(20px, 2.5vw, 28px);
 }
 
 .studio-page__lede {
-  margin: 21px 0 0;
-  color: rgba(43, 39, 45, 0.56);
-  font-size: 15px;
-  line-height: 1.45;
+  font-size: 13px;
+  color: var(--fg-secondary);
+  line-height: 1.6;
+  max-width: 480px;
+  margin-top: 8px;
+}
+
+.studio-section {
+  margin-bottom: 48px;
+}
+
+.studio-section__heading {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.studio-section__heading .studio-kicker {
+  flex-shrink: 0;
 }
 
 .studio-stats {
   display: grid;
-  margin-top: clamp(55px, 8vw, 100px);
-  grid-template-columns: repeat(4, 1fr);
-  border-top: 1px solid rgba(43, 39, 45, 0.15);
-  border-bottom: 1px solid rgba(43, 39, 45, 0.15);
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1px;
+  background: var(--border-subtle);
+  border: 1px solid var(--border-subtle);
 }
 
 .studio-stat {
-  min-height: 155px;
-  padding: 20px 18px 18px 0;
-  border-right: 1px solid rgba(43, 39, 45, 0.13);
-}
-
-.studio-stat:not(:first-child) {
-  padding-left: 23px;
-}
-
-.studio-stat:last-child {
-  border-right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 24px;
+  background: var(--surface);
 }
 
 .studio-stat__topline {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  color: rgba(43, 39, 45, 0.5);
+  gap: 8px;
   font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
+  font-weight: 600;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
+  color: var(--fg-muted);
 }
 
 .studio-stat__topline i {
-  display: block;
+  font-style: normal;
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #d98a76;
 }
 
 .studio-stat--violet .studio-stat__topline i {
-  background: #9381bf;
+  background: #8b7fa8;
 }
+
 .studio-stat--gold .studio-stat__topline i {
-  background: #cba65c;
+  background: var(--accent);
 }
+
 .studio-stat--ink .studio-stat__topline i {
-  background: #3f3841;
+  background: var(--fg-muted);
 }
 
 .studio-stat > strong {
-  display: block;
-  margin-top: 24px;
-  color: #2b272d;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: clamp(38px, 4vw, 57px);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 28px;
   font-weight: 400;
-  letter-spacing: -0.06em;
+  color: var(--fg);
+  line-height: 1;
 }
 
 .studio-stat > small {
-  display: block;
-  margin-top: 5px;
-  color: rgba(43, 39, 45, 0.45);
   font-size: 10px;
-}
-
-.studio-section {
-  margin-top: clamp(65px, 9vw, 110px);
-}
-
-.studio-section__heading {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 27px;
-}
-
-.studio-section__heading .studio-kicker {
-  margin-bottom: 14px;
-}
-
-.studio-heading {
-  margin: 0;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: clamp(38px, 5vw, 60px);
-  font-weight: 400;
-  letter-spacing: -0.06em;
-  line-height: 0.95;
-}
-
-.inline-link {
-  font-size: 10px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.inline-link span {
-  margin-left: 5px;
-  font-size: 15px;
-  font-weight: 300;
+  color: var(--fg-muted);
 }
 
 .gallery-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1px;
+  background: var(--border-subtle);
+  border: 1px solid var(--border-subtle);
 }
 
 .gallery-grid--dashboard {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 }
 
 .gallery-card {
-  overflow: hidden;
-  border: 1px solid rgba(43, 39, 45, 0.12);
-  background: #eeeae3;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  transition: background var(--transition);
+  position: relative;
+}
+
+.gallery-card:hover {
+  background: var(--surface-hover);
 }
 
 .gallery-card__cover {
   position: relative;
-  display: block;
+  aspect-ratio: 16 / 10;
   overflow: hidden;
-  aspect-ratio: 1.45;
-  background: #c7b8aa;
+  background: var(--surface);
 }
 
-.gallery-card__cover img,
-.gallery-card__cover-placeholder {
-  display: block;
+.gallery-card__cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.gallery-card__cover:hover img,
-.gallery-card__cover:hover .gallery-card__cover-placeholder {
-  transform: scale(1.04);
+.gallery-card:hover .gallery-card__cover img {
+  transform: scale(1.03);
 }
 
 .gallery-card__cover-placeholder {
-  display: grid;
-  place-items: center;
-  background: #9c6f67;
-  color: rgba(255, 248, 237, 0.85);
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 72px;
-}
-
-.status-pill {
-  position: absolute;
-  top: 14px;
-  left: 14px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 9px;
-  background: rgba(31, 27, 33, 0.72);
-  color: #f4eee5;
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-  backdrop-filter: blur(7px);
-}
-
-.status-pill i {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #d18a76;
-}
-
-.status-pill--published i {
-  background: #b6d29d;
-}
-.status-pill--archived i {
-  background: #aaa4a5;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--fg-muted);
+  font-size: 12px;
 }
 
 .gallery-card__cover-arrow {
   position: absolute;
-  right: 14px;
-  bottom: 14px;
-  display: grid;
-  width: 28px;
-  height: 28px;
-  place-items: center;
-  border: 1px solid rgba(255, 248, 237, 0.7);
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(240, 237, 232, 0.5);
   border-radius: 50%;
-  color: #fff8ed;
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity var(--transition), transform var(--transition);
+}
+
+.gallery-card:hover .gallery-card__cover-arrow {
+  opacity: 1;
+  transform: translateY(-2px);
 }
 
 .gallery-card__body {
-  padding: 19px 19px 16px;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
 }
 
 .gallery-card__heading {
   display: flex;
   justify-content: space-between;
   gap: 12px;
+  align-items: flex-start;
 }
 
-.gallery-card__heading p {
-  margin: 0 0 7px;
-  color: #a7655f;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-}
-
-.gallery-card__heading h3 {
-  margin: 0;
-  color: #2b272d;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: clamp(24px, 3vw, 33px);
-  font-weight: 400;
-  letter-spacing: -0.04em;
-  line-height: 0.95;
-}
-
-.gallery-card__date {
-  color: rgba(43, 39, 45, 0.4);
-  font-size: 9px;
-  white-space: nowrap;
-}
-
-.gallery-card__meta {
-  display: flex;
-  gap: 18px;
-  margin-top: 19px;
-  color: rgba(43, 39, 45, 0.48);
-  font-size: 9px;
-  letter-spacing: 0.04em;
+.gallery-card__heading span:first-child {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg);
+  line-height: 1.3;
 }
 
 .gallery-card__actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 14px;
-  margin-top: 22px;
-  padding-top: 13px;
-  border-top: 1px solid rgba(43, 39, 45, 0.11);
+  gap: 6px;
+  margin-top: 6px;
 }
 
-.text-action,
-.gallery-card__delete {
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: #a7655f;
+.gallery-card__link-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border: 1px solid var(--border);
   font-size: 9px;
-  font-weight: 700;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+  transition: border-color var(--transition), color var(--transition);
+  cursor: pointer;
+  background: none;
+}
+
+.gallery-card__link-button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.gallery-card__link-button--open span:last-child {
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.gallery-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  color: var(--fg-muted);
+}
+
+.gallery-card__date {
+  color: var(--fg-muted);
+}
+
+.gallery-card__delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  flex-shrink: 0;
+  color: var(--fg-muted);
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1;
+  transition: color var(--transition);
+}
+
+.gallery-card__delete:hover {
+  color: var(--danger);
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  font-size: 8px;
+  font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  border: 1px solid var(--border);
+  color: var(--fg-muted);
 }
 
-.text-action--muted {
-  color: rgba(43, 39, 45, 0.42);
-  font-weight: 500;
+.status-pill i {
+  font-style: normal;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--fg-muted);
 }
 
-.gallery-card__delete {
-  margin-left: auto;
-  color: rgba(43, 39, 45, 0.35);
-  font-size: 19px;
-  font-weight: 300;
-  line-height: 0.5;
+.status-pill--published {
+  color: var(--success);
+  border-color: rgba(125, 155, 106, 0.3);
 }
 
-.studio-alert {
-  margin-bottom: 22px;
-  padding: 11px 13px;
-  border: 1px solid currentColor;
+.status-pill--published i {
+  background: var(--success);
 }
 
-.studio-alert--success {
-  color: #5e825c;
+.status-pill--archived i {
+  background: var(--fg-muted);
 }
 
 .studio-empty {
   display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 27px 0;
-  border-top: 1px solid rgba(43, 39, 45, 0.13);
-  border-bottom: 1px solid rgba(43, 39, 45, 0.13);
-}
-
-.studio-empty--large {
-  min-height: 250px;
-  align-items: flex-start;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
+  text-align: center;
+  padding: 80px 24px;
+  gap: 8px;
+  border: 1px solid var(--border-subtle);
 }
 
 .studio-empty__mark {
-  display: grid;
-  width: 42px;
-  height: 42px;
-  place-items: center;
-  border: 1px solid #b67366;
-  border-radius: 50%;
-  color: #b67366;
-  font-size: 25px;
-  font-weight: 200;
+  font-size: 24px;
+  margin-bottom: 8px;
+  color: var(--fg-muted);
 }
 
 .studio-empty h3 {
-  margin: 0;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 28px;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 20px;
   font-weight: 400;
-  letter-spacing: -0.04em;
+  color: var(--fg);
+  margin: 0;
+  line-height: 1.2;
 }
 
 .studio-empty p {
-  max-width: 400px;
-  margin: 8px 0 0;
-  color: rgba(43, 39, 45, 0.53);
-  font-size: 13px;
-  line-height: 1.45;
+  font-size: 12px;
+  color: var(--fg-secondary);
+  margin: 0;
+  line-height: 1.5;
+  max-width: 280px;
+}
+
+.studio-empty--large {
+  padding: 120px 24px;
 }
 
 .studio-list-loading {
   display: flex;
-  gap: 8px;
-  padding: 30px 0;
+  align-items: center;
+  gap: 6px;
+  padding: 24px;
+  font-size: 12px;
+  color: var(--fg-muted);
 }
 
 .studio-list-loading span {
-  display: block;
-  width: 7px;
-  height: 7px;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
-  background: #b67467;
-  animation: studio-loading 1s ease-in-out infinite alternate;
+  background: var(--fg-muted);
+  animation: pulse-dot 1.2s ease-in-out infinite;
 }
 
 .studio-list-loading span:nth-child(2) {
   animation-delay: 0.2s;
 }
+
 .studio-list-loading span:nth-child(3) {
   animation-delay: 0.4s;
 }
 
-@keyframes studio-loading {
-  from {
-    opacity: 0.2;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(-5px);
-  }
+@keyframes pulse-dot {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
 }
 
-.studio-page--placeholder {
-  padding-top: 18vh;
+.studio-alert {
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--fg-secondary);
+  line-height: 1.5;
+}
+
+.studio-alert--success {
+  border-color: rgba(125, 155, 106, 0.3);
+  color: var(--success);
+}
+
+.studio-alert--error {
+  border-color: rgba(196, 85, 68, 0.3);
+  color: var(--danger);
+}
+
+.studio-page--loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 12px;
+  color: var(--fg-muted);
+  font-size: 11px;
 }
 
 .studio-page--placeholder .studio-display {
-  max-width: 700px;
-  margin: 0;
-  font-size: clamp(64px, 9vw, 125px);
+  margin-bottom: 12px;
 }
 
 .studio-page--placeholder .studio-page__lede {
-  max-width: 400px;
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }
 
-/* Editor */
 .editor-page {
-  width: min(100%, 1440px);
-  margin: 0 auto;
-  padding: 26px clamp(23px, 4vw, 62px) 90px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .editor-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid rgba(43, 39, 45, 0.15);
+  gap: 16px;
+  padding: 16px clamp(24px, 4vw, 48px);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface);
 }
 
 .editor-header__back {
   display: flex;
   align-items: center;
-  gap: 11px;
-  color: rgba(43, 39, 45, 0.47);
+  gap: 6px;
   font-size: 10px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--fg-muted);
+  transition: color var(--transition);
 }
 
-.editor-header__back a {
-  color: #a7655f;
-  font-weight: 700;
+.editor-header__back:hover {
+  color: var(--fg);
 }
 
 .editor-header__actions {
   display: flex;
+  align-items: center;
   gap: 8px;
+  margin-left: auto;
 }
 
-.editor-button {
-  min-height: 38px;
-  padding: 0 15px;
+.editor-header__actions .editor-button {
+  padding: 6px 14px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition: color var(--transition), background var(--transition);
 }
 
-.editor-button--quiet {
-  border: 1px solid rgba(43, 39, 45, 0.17);
-  background: transparent;
-  color: rgba(43, 39, 45, 0.67);
-}
-
-.editor-button--accent {
-  background: #ad695b;
-  color: #fff8ed;
+.editor-header__actions button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
 }
 
 .editor-titlebar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 22px;
-  padding: 54px 0 60px;
+  padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 48px) 0;
 }
 
 .editor-titlebar .studio-display {
   margin: 0;
-  font-size: clamp(55px, 7.2vw, 105px);
-}
-
-.editor-live {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding-bottom: 9px;
-  color: #5d805f;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.11em;
-  text-transform: uppercase;
-}
-
-.editor-live i {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #79a27b;
 }
 
 .editor-layout {
   display: grid;
-  align-items: start;
-  gap: clamp(35px, 6vw, 100px);
-  grid-template-columns: minmax(0, 1fr) minmax(290px, 380px);
+  grid-template-columns: 1fr 320px;
+  gap: 0;
+  flex: 1;
+  padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 48px);
+}
+
+.editor-maincol {
+  min-width: 0;
 }
 
 .editor-section {
-  padding: 44px 0 50px;
-  border-top: 1px solid rgba(43, 39, 45, 0.15);
+  margin-bottom: 32px;
 }
 
 .editor-section--first {
-  padding-top: 0;
-  border-top: 0;
-}
-.editor-section--aside {
-  padding: 0 0 45px;
-  border-top: 0;
+  margin-top: 0;
 }
+
 .editor-section--aside + .editor-section--aside {
-  padding-top: 35px;
-  border-top: 1px solid rgba(43, 39, 45, 0.15);
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .editor-section__heading {
-  margin-bottom: 32px;
+  margin-bottom: 16px;
 }
+
 .editor-section__heading .studio-kicker {
-  margin-bottom: 13px;
+  margin-bottom: 4px;
 }
+
 .editor-section__heading h2 {
-  margin: 0;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: clamp(33px, 4vw, 53px);
-  font-weight: 400;
-  letter-spacing: -0.06em;
-  line-height: 0.92;
-}
-.editor-section__heading > p:last-child {
-  max-width: 470px;
-  margin: 14px 0 0;
-  color: rgba(43, 39, 45, 0.48);
   font-size: 13px;
-  line-height: 1.45;
+  font-weight: 600;
+  color: var(--fg);
+  margin: 0 0 4px;
+}
+
+.editor-section__heading > p:last-child {
+  font-size: 11px;
+  color: var(--fg-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.editor-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
 .editor-fields--two {
   display: grid;
-  gap: 28px;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
 }
+
 .editor-fields__full {
-  margin-top: 31px;
+  grid-column: 1 / -1;
 }
-.editor-fields textarea {
+
+.editor-field-single {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.editor-field-single label,
+.editor-fields label,
+.editor-fields__full {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.editor-field-single input,
+.editor-field-single textarea,
+.editor-fields label input,
+.editor-fields label textarea,
+.editor-fields__full input,
+.editor-fields__full textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 400;
+  transition: border-color var(--transition), background var(--transition);
+  outline: none;
+}
+
+.editor-field-single input:focus,
+.editor-field-single textarea:focus,
+.editor-fields label input:focus,
+.editor-fields label textarea:focus,
+.editor-fields__full input:focus,
+.editor-fields__full textarea:focus {
+  border-color: var(--accent);
+  background: var(--surface-elevated);
+}
+
+.editor-field-single textarea,
+.editor-fields label textarea,
+.editor-fields__full textarea {
   resize: vertical;
-  line-height: 1.45;
+  min-height: 80px;
+}
+
+input[type='color'] {
+  width: 100% !important;
+  height: 38px;
+  padding: 3px !important;
+  cursor: pointer;
+}
+
+.editor-aside {
+  border-left: 1px solid var(--border-subtle);
+  padding-left: clamp(24px, 3vw, 40px);
+}
+
+.editor-locked {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 80px 24px;
+  gap: 8px;
+  color: var(--fg-muted);
+}
+
+.editor-live {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--success);
+}
+
+.editor-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition: color var(--transition), background var(--transition);
+  cursor: pointer;
+}
+
+.editor-button--quiet {
+  border: 1px solid var(--border);
+  color: var(--fg-secondary);
+}
+
+.editor-button--quiet:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.editor-button--accent {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.editor-button--accent:hover {
+  background: var(--accent-hover);
+}
+
+.upload-zone-wrap {
+  width: 100%;
 }
 
 .upload-zone {
   display: flex;
-  width: 100%;
-  min-height: 230px;
-  cursor: pointer;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px dashed rgba(43, 39, 45, 0.32);
-  flex-direction: column;
-  gap: 13px;
-  background: rgba(255, 252, 247, 0.22);
-  color: #2b272d;
-  transition:
-    background-color 180ms ease,
-    border-color 180ms ease;
+  width: 100%;
+  min-height: 240px;
+  padding: 48px 24px;
+  border: 1px dashed var(--border);
+  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition);
+  gap: 12px;
+  text-align: center;
+}
+
+.upload-zone:hover {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
 }
 
-.upload-zone:hover,
 .upload-zone.is-dragging {
-  border-color: #ad695b;
-  background: rgba(220, 166, 145, 0.14);
+  border-color: var(--accent);
+  background: var(--accent-subtle);
 }
+
+.upload-zone__orb {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  color: var(--accent);
+  font-size: 22px;
+  font-weight: 300;
+  line-height: 1;
+  transition: background var(--transition), color var(--transition);
+}
+
+.upload-zone:hover .upload-zone__orb {
+  background: var(--accent);
+  color: var(--bg);
+}
+
 .upload-zone__title {
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 25px;
-  letter-spacing: -0.04em;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fg);
 }
+
 .upload-zone__hint {
-  color: rgba(43, 39, 45, 0.45);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  font-size: 10px;
+  color: var(--fg-muted);
 }
 
 .upload-queue {
-  margin-top: 24px;
-  padding: 17px 0 0;
-  border-top: 1px solid rgba(43, 39, 45, 0.13);
+  margin-top: 20px;
 }
+
 .upload-queue__heading {
-  display: flex;
-  justify-content: space-between;
-  color: rgba(43, 39, 45, 0.51);
   font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.13em;
+  font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
+  color: var(--fg-muted);
+  margin-bottom: 12px;
 }
-.upload-queue__heading strong {
-  color: #ad695b;
-  font-weight: 700;
-}
-.upload-queue__track {
-  height: 2px;
-  margin: 11px 0;
-  background: rgba(43, 39, 45, 0.13);
-}
-.upload-queue__track span {
-  display: block;
-  height: 100%;
-  background: #ad695b;
-  transition: width 200ms ease;
-}
+
 .upload-queue__items {
   display: flex;
   flex-direction: column;
+  gap: 1px;
+  background: var(--border-subtle);
+  border: 1px solid var(--border-subtle);
 }
+
 .upload-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-width: 0;
-  padding: 11px 0;
-  border-bottom: 1px solid rgba(43, 39, 45, 0.09);
-}
-.upload-row__type {
-  display: grid;
-  width: 26px;
-  height: 26px;
-  place-items: center;
-  background: #cbb3aa;
-  color: #fff8ed;
-  font-size: 7px;
-  font-weight: 800;
-}
-.upload-row__name {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  color: #2b272d;
+  gap: 12px;
+  padding: 10px 14px;
+  background: var(--surface);
   font-size: 11px;
+}
+
+.upload-row__name {
+  font-weight: 500;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.upload-row__type {
+  font-size: 9px;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.upload-row__status {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--fg-muted);
+  flex-shrink: 0;
+}
+
+.upload-row__status--ready {
+  color: var(--success);
+}
+
+.upload-row__status--failed {
+  color: var(--danger);
+}
+
+.upload-row__error {
+  font-size: 9px;
+  color: var(--danger);
+  max-width: 200px;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.upload-row__name small {
-  display: inline;
-  margin-left: 8px;
-  color: rgba(43, 39, 45, 0.4);
-  font-size: 9px;
+
+.upload-queue__track {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
 }
-.upload-row__status {
-  color: #ad695b;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.upload-row__status--ready {
-  color: #5d805f;
-}
-.upload-row__status--failed {
-  color: #a84f4a;
-}
-.upload-row button {
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: rgba(43, 39, 45, 0.43);
+
+.upload-queue__track span {
   font-size: 10px;
-  font-weight: 700;
+  color: var(--fg-muted);
+  flex-shrink: 0;
+}
+
+.upload-queue__track progress {
+  flex: 1;
+  height: 2px;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.upload-queue__track progress::-webkit-progress-bar {
+  background: var(--border);
+  border-radius: 1px;
+}
+
+.upload-queue__track progress::-webkit-progress-value {
+  background: var(--accent);
+  border-radius: 1px;
 }
 
 .editor-media-grid {
   display: grid;
-  gap: 14px;
-  margin-top: 26px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 1px;
+  background: var(--border-subtle);
+  border: 1px solid var(--border-subtle);
 }
+
 .editor-media-tile {
-  overflow: hidden;
-  border: 1px solid rgba(43, 39, 45, 0.14);
-  background: #f1ede7;
-}
-.editor-media-tile.is-cover {
-  border-color: #ad695b;
-}
-.editor-media-tile__image {
   position: relative;
+  aspect-ratio: 1;
+  background: var(--surface);
   overflow: hidden;
-  aspect-ratio: 1.2;
-  background: #c6b9b0;
+  cursor: grab;
+  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
 }
-.editor-media-tile__image img {
+
+.editor-media-tile:active {
+  cursor: grabbing;
+}
+
+.editor-media-tile.is-cover {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.editor-media-tile.is-drag-over {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  transform: scale(1.03);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  z-index: 2;
+}
+
+.editor-media-tile--video {
+  cursor: pointer;
+}
+
+/* Editor video viewer overlay */
+.editor-video-viewer {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.92);
+  z-index: 500;
+  animation: viewer-enter 250ms ease;
+  padding: 24px;
+}
+
+.editor-video-viewer__close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(240, 237, 232, 0.25);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--fg);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition);
+  z-index: 1;
+}
+
+.editor-video-viewer__close:hover {
+  border-color: var(--accent);
+  background: rgba(188, 155, 122, 0.15);
+}
+
+.editor-video-viewer__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 90vw;
+  max-height: 85vh;
+}
+
+.editor-video-viewer__player {
+  max-width: 90vw;
+  max-height: 85vh;
+  width: auto;
+  height: auto;
+  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
+}
+
+.editor-video-viewer__stage p {
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.editor-media-tile__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.editor-media-tile:hover .editor-media-tile__image {
+  transform: scale(1.04);
+}
+
+.editor-media-tile__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.editor-media-tile__placeholder {
-  display: grid;
+
+.editor-media-tile__video-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   height: 100%;
-  place-items: center;
-  color: rgba(255, 248, 237, 0.75);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
+  gap: 8px;
+  color: var(--fg-muted);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
+  background: var(--surface);
+  border: 0;
+  cursor: pointer;
+  transition: background var(--transition);
 }
-.editor-media-tile__video,
-.editor-media-tile__cover {
+
+.editor-media-tile__video-placeholder:hover {
+  background: var(--surface-hover);
+}
+
+.editor-media-tile__play-icon {
+  font-size: 24px;
+  color: var(--fg-secondary);
+  line-height: 1;
+}
+
+.editor-media-tile__video-label {
   position: absolute;
   bottom: 8px;
-  padding: 5px 6px;
-  background: rgba(33, 29, 36, 0.72);
-  color: #f4eee5;
-  font-size: 7px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-.editor-media-tile__video {
   left: 8px;
+  padding: 3px 7px;
+  font-size: 8px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--fg);
 }
-.editor-media-tile__cover {
-  right: 8px;
-  color: #efbd8f;
+
+.editor-media-tile__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--fg-muted);
+  font-size: 10px;
 }
+
 .editor-media-tile__body {
-  padding: 11px 11px 5px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  opacity: 0;
+  transition: opacity var(--transition);
 }
-.editor-media-tile__body strong,
-.editor-media-tile__body small {
-  display: block;
+
+.editor-media-tile:hover .editor-media-tile__body {
+  opacity: 1;
+}
+
+.editor-media-tile__body strong {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
 }
-.editor-media-tile__body strong {
-  color: #2b272d;
-  font-size: 10px;
-  font-weight: 600;
-}
+
 .editor-media-tile__body small {
-  margin-top: 5px;
-  color: rgba(43, 39, 45, 0.43);
   font-size: 8px;
+  color: rgba(240, 237, 232, 0.7);
+}
+
+.editor-media-tile__cover {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 6px;
+  font-size: 7px;
+  font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
+  background: var(--accent);
+  color: var(--bg);
 }
+
 .editor-media-tile__actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 11px 11px;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity var(--transition);
 }
+
+.editor-media-tile:hover .editor-media-tile__actions {
+  opacity: 1;
+}
+
 .editor-media-tile__actions button {
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: #a7655f;
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.editor-media-tile__actions button:not(:first-child) {
-  color: rgba(43, 39, 45, 0.4);
-  font-size: 13px;
-}
-.editor-media-tile__actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.25;
-}
-.editor-media-empty,
-.editor-locked {
-  padding: 25px;
-  border: 1px dashed rgba(43, 39, 45, 0.23);
-  color: rgba(43, 39, 45, 0.5);
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 20px;
-}
-.editor-locked {
   display: flex;
   align-items: center;
-  gap: 15px;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1;
+  transition: background var(--transition);
 }
-.editor-locked span {
-  color: #ad695b;
-  font-size: 12px;
+
+.editor-media-tile__actions button:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.editor-media-tile__actions button:not(:first-child) {
+  margin-left: 0;
+}
+
+.editor-media-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  border: 1px dashed var(--border);
+  color: var(--fg-muted);
+  font-size: 11px;
 }
 
 .toggle-list {
-  margin-bottom: 26px;
-}
-.toggle-line {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 14px 0;
-  border-bottom: 1px solid rgba(43, 39, 45, 0.11);
-}
-.toggle-line > span {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 10px;
 }
-.toggle-line strong {
-  color: #2b272d;
-  font-size: 12px;
-  font-weight: 600;
-}
-.toggle-line small {
-  color: rgba(43, 39, 45, 0.46);
-  font-size: 9px;
-}
-.toggle-line input {
-  position: absolute;
-  opacity: 0;
-}
-.toggle-line i {
-  position: relative;
-  display: block;
-  width: 32px;
-  height: 18px;
-  flex: 0 0 32px;
-  border-radius: 99px;
-  background: rgba(43, 39, 45, 0.18);
-  transition: background-color 180ms ease;
-}
-.toggle-line i::after {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #eeeae3;
-  content: '';
-  transition: transform 180ms ease;
-}
-.toggle-line input:checked + i {
-  background: #ad695b;
-}
-.toggle-line input:checked + i::after {
-  transform: translateX(14px);
-}
-.editor-field-single {
-  margin-top: 21px;
-}
-.checkbox-line {
+
+.toggle-line {
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin-top: 13px;
-  color: rgba(43, 39, 45, 0.47);
-  font-size: 9px;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-subtle);
 }
-.checkbox-line input {
-  accent-color: #ad695b;
+
+.toggle-line > span {
+  font-size: 12px;
+  color: var(--fg);
+  font-weight: 500;
+  flex: 1;
 }
-.choice-label {
-  margin: 22px 0 9px;
-  color: rgba(43, 39, 45, 0.48);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+
+.toggle-line strong {
+  font-weight: 600;
+  font-size: 11px;
 }
+
+.toggle-line small {
+  font-size: 10px;
+  color: var(--fg-muted);
+}
+
+.toggle-line input[type='checkbox'] {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background var(--transition);
+  flex-shrink: 0;
+}
+
+.toggle-line input[type='checkbox']:checked {
+  background: var(--accent);
+}
+
+.toggle-line input[type='checkbox']::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--fg);
+  transition: transform var(--transition);
+}
+
+.toggle-line input[type='checkbox']:checked::after {
+  transform: translateX(16px);
+}
+
 .choice-row {
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
 }
+
 .choice-row--wrap {
   flex-wrap: wrap;
 }
+
 .choice-row button {
-  cursor: pointer;
-  padding: 9px 11px;
-  border: 1px solid rgba(43, 39, 45, 0.17);
-  background: transparent;
-  color: rgba(43, 39, 45, 0.55);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
+  padding: 6px 14px;
+  border: 1px solid var(--border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
+  color: var(--fg-muted);
+  transition: border-color var(--transition), color var(--transition), background var(--transition);
 }
+
+.choice-row button:hover {
+  border-color: var(--fg-secondary);
+  color: var(--fg);
+}
+
 .choice-row button.is-selected {
-  border-color: #ad695b;
-  background: #ad695b;
-  color: #fff8ed;
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
+
+.checkbox-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--fg-secondary);
+}
+
+.checkbox-line input[type='checkbox'] {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--accent);
+}
+
+.choice-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  transition: border-color var(--transition);
+}
+
+.choice-label:hover {
+  border-color: var(--fg-secondary);
+}
+
 .editor-color-field {
-  margin-top: 20px;
-}
-.editor-color-field > span {
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.editor-color-field input[type='color'] {
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-.editor-color-field code {
-  color: rgba(43, 39, 45, 0.55);
+
+.editor-color-field > span {
   font-size: 10px;
-  font-weight: 400;
-  letter-spacing: 0.03em;
-  text-transform: none;
+  font-weight: 500;
+  color: var(--fg-muted);
 }
 
-/* Public gallery */
+input[type='url'] {
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+}
+
+/* Client Gallery - Public facing */
+.client-gallery,
+.client-lock-screen,
 .client-loading,
 .client-error {
-  display: flex;
-  min-height: 100svh;
-  padding: 32px 7vw;
-  align-items: center;
-  background: #1b181e;
-  color: #f2ece1;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.client-loading p {
-  margin: 24px 0 9px;
-  color: rgba(242, 236, 225, 0.68);
-  font-size: 11px;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-.client-loading__line {
-  display: block;
-  width: 110px;
-  height: 1px;
-  overflow: hidden;
-  background: rgba(242, 236, 225, 0.2);
-}
-.client-loading__line::after {
-  display: block;
-  width: 40%;
-  height: 100%;
-  background: #dc9478;
-  content: '';
-}
-.client-error {
-  align-items: flex-start;
-  text-align: left;
-}
-.client-error h1 {
-  margin: 0;
-  font-size: clamp(62px, 9vw, 130px);
-  line-height: 0.85;
-}
-.client-error > p:last-child {
-  max-width: 390px;
-  margin: 29px 0 0;
-  color: rgba(242, 236, 225, 0.57);
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.client-lock-screen {
-  position: relative;
-  display: flex;
-  min-height: 100svh;
-  overflow: hidden;
-  padding: 32px clamp(24px, 5vw, 80px);
-  background: #1b181e;
-  color: #f2ece1;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.client-lock-screen__brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: rgba(242, 236, 225, 0.8);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-}
-.client-lock-screen__lock {
-  display: grid;
-  width: 51px;
-  height: 51px;
-  margin-bottom: 35px;
-  place-items: center;
-  border: 1px solid rgba(239, 170, 130, 0.65);
-  border-radius: 50%;
-  color: #efaa82;
-  font-size: 27px;
-  font-weight: 200;
-}
-.client-lock-screen__center {
-  position: relative;
-  z-index: 1;
-  width: min(100%, 640px);
-  margin: auto 0;
-}
-.client-lock-screen__center h1 {
-  margin: 0;
-  font-size: clamp(58px, 8vw, 113px);
-  line-height: 0.85;
-}
-.client-lock-screen__center > p:not(.client-kicker):not(.client-form-error) {
-  max-width: 360px;
-  margin: 29px 0 28px;
-  color: rgba(242, 236, 225, 0.57);
-  font-size: 15px;
-  line-height: 1.5;
-}
-.client-password-form {
-  display: flex;
-  width: min(100%, 390px);
-  align-items: center;
-  border-bottom: 1px solid rgba(242, 236, 225, 0.35);
-}
-.client-password-form input {
-  width: 100%;
-  padding: 14px 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: #f2ece1;
-  font-size: 17px;
-}
-.client-password-form input::placeholder {
-  color: rgba(242, 236, 225, 0.37);
-}
-.client-round-button {
-  display: grid;
-  width: 37px;
-  height: 37px;
-  cursor: pointer;
-  place-items: center;
-  border: 1px solid #efaa82;
-  border-radius: 50%;
-  background: transparent;
-  color: #efaa82;
-  font-size: 17px;
-}
-.client-lock-screen__footer {
-  color: rgba(242, 236, 225, 0.35);
-  font-size: 9px;
-  letter-spacing: 0.17em;
-  text-transform: uppercase;
+  --gallery-ink: #f3ede2;
+  --gallery-muted: rgba(243, 237, 226, 0.56);
 }
 
 .client-gallery {
-  --gallery-ink: #2b272d;
-  --gallery-muted: rgba(43, 39, 45, 0.53);
   min-height: 100svh;
-  background: #eae6de;
   color: var(--gallery-ink);
+  background: var(--bg);
 }
+
 .client-gallery--dark {
   --gallery-ink: #f3ede2;
   --gallery-muted: rgba(243, 237, 226, 0.56);
-  background: #1a171d;
-  color: var(--gallery-ink);
+  background: var(--bg);
 }
+
 .client-gallery--dark .client-gallery__nav,
 .client-gallery--dark .client-section-heading,
 .client-gallery--dark .client-footer {
-  border-color: rgba(243, 237, 226, 0.16);
-}
-.preview-ribbon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 8px 15px;
-  background: #ad695b;
-  color: #fff8ed;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-.preview-ribbon span:last-child {
-  color: rgba(255, 248, 237, 0.68);
-  font-weight: 400;
+  border-color: rgba(243, 237, 226, 0.1);
 }
+
 .client-gallery__nav {
   display: flex;
-  min-height: 82px;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
-  margin: 0 clamp(22px, 5vw, 82px);
-  border-bottom: 1px solid rgba(43, 39, 45, 0.15);
-}
-.client-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--gallery-ink);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-}
-.client-brand img {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-}
-.client-brand__mark {
-  width: 31px;
-  height: 31px;
-  color: var(--gallery-accent);
-  font-size: 15px;
+  padding: 20px clamp(22px, 4vw, 48px);
+  border-bottom: 1px solid rgba(243, 237, 226, 0.08);
 }
+
 .client-gallery__nav-actions {
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 20px;
 }
+
+.client-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.client-brand img {
+  height: 24px;
+  width: auto;
+}
+
+.client-brand__mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--accent);
+  color: var(--bg);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+}
+
 .client-nav-button {
-  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--gallery-ink);
   font-size: 9px;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
+  cursor: pointer;
+  transition: opacity var(--transition);
 }
+
+.client-nav-button:hover {
+  opacity: 0.7;
+}
+
 .client-nav-button span {
-  margin-left: 6px;
-  color: var(--gallery-accent);
-  font-size: 15px;
-  font-weight: 300;
-}
-.client-gallery__edition {
-  color: var(--gallery-muted);
-  font-size: 9px;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-}
-.client-hero {
-  display: grid;
-  min-height: calc(100svh - 82px);
-  padding: clamp(70px, 10vw, 145px) clamp(22px, 10vw, 160px) clamp(45px, 6vw, 80px);
-  grid-template-columns: minmax(220px, 0.72fr) minmax(300px, 1.28fr);
-  grid-template-rows: 1fr auto;
-  column-gap: clamp(35px, 7vw, 120px);
-}
-.client-hero__copy {
-  align-self: center;
-  padding-bottom: 4vh;
-}
-.client-hero__copy h1 {
-  max-width: 650px;
-  margin: 0;
-  font-size: clamp(67px, 10vw, 154px);
-  line-height: 0.81;
-}
-.client-hero__description {
-  max-width: 310px;
-  margin: 30px 0 0;
-  color: var(--gallery-muted);
   font-size: 14px;
-  line-height: 1.5;
+  font-weight: 400;
+  transition: transform var(--transition);
 }
-.client-hero__cover {
-  position: relative;
-  overflow: hidden;
-  min-height: 420px;
-  grid-row: span 2;
-  background: #baa89e;
+
+.client-nav-button:hover span {
+  transform: translateX(2px);
 }
-.client-hero__cover img,
-.client-hero__fallback {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.client-hero__fallback {
-  display: grid;
-  min-height: 420px;
-  place-items: center;
-  background: #967169;
-  color: #fdf3e6;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 140px;
-}
-.client-hero__cover-caption {
-  position: absolute;
-  right: 17px;
-  bottom: 17px;
-  left: 17px;
-  display: flex;
-  justify-content: space-between;
-  color: rgba(255, 248, 237, 0.75);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-.client-hero__scroll {
-  display: flex;
-  align-items: center;
-  align-self: end;
-  gap: 9px;
-  color: var(--gallery-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.11em;
-  text-transform: uppercase;
-}
-.client-hero__scroll span {
-  display: block;
-  width: 22px;
-  height: 1px;
-  background: var(--gallery-accent);
-}
-.client-work-section,
-.client-download-section {
-  margin: 0 clamp(22px, 5vw, 82px);
-  padding: clamp(75px, 10vw, 145px) 0;
-  border-top: 1px solid rgba(43, 39, 45, 0.15);
-}
-.client-section-heading {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 30px;
-  padding-bottom: 43px;
-  border-bottom: 1px solid rgba(43, 39, 45, 0.13);
-}
-.client-section-heading .client-kicker {
-  color: var(--gallery-accent);
-}
-.client-section-heading h2 {
-  margin: 0;
-  font-size: clamp(53px, 7vw, 101px);
-  line-height: 0.84;
-}
-.client-section-heading h2 em {
-  color: var(--gallery-accent);
-  font-style: italic;
-}
-.client-section-heading > span {
-  padding-bottom: 4px;
+
+.client-gallery__edition {
   color: var(--gallery-muted);
   font-size: 9px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
+
+.client-hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  min-height: 60svh;
+  border-bottom: 1px solid rgba(243, 237, 226, 0.08);
+}
+
+.client-hero__copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(32px, 5vw, 64px) clamp(32px, 5vw, 64px);
+  gap: 16px;
+}
+
+.client-hero__copy h1 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(28px, 4vw, 48px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  margin: 0;
+}
+
+.client-hero__description {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--gallery-muted);
+  max-width: 400px;
+}
+
+.client-hero__cover {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40svh;
+  background: var(--surface);
+}
+
+.client-hero__cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  inset: 0;
+}
+
+.client-hero__cover-caption {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  font-size: 9px;
+  color: rgba(243, 237, 226, 0.6);
+}
+
+.client-hero__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--surface);
+  color: var(--gallery-muted);
+  font-size: 12px;
+}
+
+.client-hero__scroll {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 8px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--gallery-muted);
+}
+
+.client-hero__scroll span {
+  display: block;
+  width: 1px;
+  height: 28px;
+  background: var(--gallery-muted);
+  margin-top: 2px;
+}
+
+.client-section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 0;
+  margin: 0 clamp(22px, 4vw, 48px);
+  border-bottom: 1px solid rgba(243, 237, 226, 0.08);
+}
+
+.client-section-heading h2 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  margin: 0;
+}
+
+.client-section-heading h2 em {
+  font-style: normal;
+  color: var(--gallery-muted);
+}
+
+.client-section-heading > span {
+  font-size: 10px;
+  color: var(--gallery-muted);
+}
+
+.client-work-section {
+  padding: 0 clamp(22px, 4vw, 48px);
+}
+
 .client-media-grid {
   display: grid;
-  gap: 28px 15px;
-  padding-top: 39px;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1px;
+  padding: 1px 0;
 }
+
 .client-media-card {
-  min-width: 0;
-  grid-column: span 4;
-}
-.client-media-card:nth-child(7n + 1),
-.client-gallery--editorial .client-media-card:nth-child(5n + 3) {
-  grid-column: span 7;
-}
-.client-gallery--grid .client-media-card,
-.client-gallery--masonry .client-media-card {
-  grid-column: span 4;
-}
-.client-gallery--masonry .client-media-card:nth-child(3n + 2) {
-  transform: translateY(58px);
-}
-.client-media-card__image,
-.client-media-card__video-wrap {
+  break-inside: avoid;
   position: relative;
-  display: block;
-  overflow: hidden;
-  width: 100%;
-  aspect-ratio: 1.12;
-  border: 0;
-  background: #b8a69e;
 }
+
 .client-media-card__image {
-  cursor: zoom-in;
+  position: relative;
+  overflow: hidden;
+  background: var(--surface);
+  cursor: pointer;
+  width: 100%;
   padding: 0;
+  border: 0;
+  display: block;
 }
+
 .client-media-card__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
+  display: block;
 }
+
 .client-media-card__image:hover img {
-  transform: scale(1.045);
+  transform: scale(1.03);
 }
+
 .client-media-card:nth-child(7n + 1) .client-media-card__image {
   aspect-ratio: 1.5;
 }
+
 .client-media-card__open {
   position: absolute;
-  right: 13px;
-  bottom: 13px;
-  display: grid;
-  width: 29px;
-  height: 29px;
-  place-items: center;
-  border: 1px solid rgba(255, 248, 237, 0.75);
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(243, 237, 226, 0.4);
   border-radius: 50%;
-  color: #fff8ed;
-  font-size: 16px;
+  color: var(--gallery-ink);
+  font-size: 14px;
+  line-height: 1;
   opacity: 0;
-  transition: opacity 180ms ease;
+  transition: opacity var(--transition), transform var(--transition);
 }
+
 .client-media-card__image:hover .client-media-card__open {
   opacity: 1;
 }
+
+.client-media-card__video-wrap {
+  position: relative;
+  aspect-ratio: 1;
+  background: var(--surface);
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  overflow: hidden;
+}
+
 .client-media-card__video-wrap video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  background: var(--surface);
+  pointer-events: none;
 }
+
+.client-media-card__play-icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  color: rgba(243, 237, 226, 0.8);
+  pointer-events: none;
+  transition: opacity var(--transition), transform var(--transition);
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+.client-media-card__video-wrap:hover .client-media-card__play-icon {
+  transform: scale(1.08);
+}
+
 .client-media-card__video-label {
   position: absolute;
-  right: 12px;
   bottom: 12px;
   left: 12px;
-  color: rgba(255, 248, 237, 0.8);
+  padding: 3px 8px;
   font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
+  font-weight: 600;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--fg);
 }
+
 .client-media-card__processing {
-  display: grid;
-  width: 100%;
-  height: 100%;
-  place-items: center;
-  color: rgba(255, 248, 237, 0.75);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 10px;
+  color: var(--gallery-muted);
 }
+
 .client-media-card__footer {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding-top: 11px;
-  color: var(--gallery-muted);
-  font-size: 9px;
-  letter-spacing: 0.06em;
+  padding: 8px 0;
 }
+
 .client-media-card__footer > span {
+  font-size: 10px;
+  color: var(--gallery-muted);
   overflow: hidden;
-  flex: 1;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
 }
+
 .client-media-card__footer button {
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--gallery-muted);
-  font-size: 17px;
-  font-weight: 300;
-  line-height: 1;
-}
-.client-media-card__footer button.is-favorited {
-  color: var(--gallery-accent);
-}
-.client-watermark {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  color: rgba(255, 248, 237, 0.67);
-  font-size: 8px;
-  font-weight: 700;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-.client-empty {
-  display: flex;
-  min-height: 200px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
   color: var(--gallery-muted);
+  transition: color var(--transition), transform var(--transition);
+  padding: 2px;
+}
+
+.client-media-card__footer button:hover {
+  color: var(--gallery-ink);
+}
+
+.client-media-card__footer button.is-favorited {
+  color: var(--accent);
+}
+
+.client-watermark {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  font-size: 8px;
+  color: rgba(243, 237, 226, 0.3);
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  pointer-events: none;
+}
+
+.client-empty {
+  display: flex;
   flex-direction: column;
-  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  gap: 8px;
+  text-align: center;
+  color: var(--gallery-muted);
 }
+
 .client-empty span {
-  color: var(--gallery-accent);
-  font-size: 33px;
-  font-weight: 200;
-}
-.client-empty p {
-  margin: 0;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
   font-size: 24px;
 }
-.client-download-section {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 40px;
-}
-.client-download-section__copy h2 {
-  margin: 0;
-  font-size: clamp(55px, 7vw, 103px);
-  line-height: 0.83;
-}
-.client-download-section__copy h2 em {
-  color: var(--gallery-accent);
-  font-style: italic;
-}
-.client-download-section__copy > p:last-child {
-  max-width: 300px;
-  margin: 30px 0 0;
-  color: var(--gallery-muted);
-  font-size: 14px;
+
+.client-empty p {
+  font-size: 12px;
   line-height: 1.5;
 }
-.client-download-button {
-  min-width: 220px;
-  padding: 8px 8px 8px 18px;
-  background: var(--gallery-ink);
-  color: #eae6de;
-}
-.client-gallery--dark .client-download-button {
-  background: #eae6de;
-  color: #2b272d;
-}
-.client-download-button > span:last-child {
-  display: grid;
-  width: 32px;
-  height: 32px;
-  place-items: center;
-  border: 1px solid var(--gallery-accent);
-  border-radius: 50%;
-  color: var(--gallery-accent);
-  font-size: 17px;
-  font-weight: 300;
-}
-.client-download-ready {
-  color: var(--gallery-accent);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-.client-download-error {
-  max-width: 230px;
-  margin: 0;
-  font-size: 11px;
-  line-height: 1.4;
-}
-.client-footer {
-  display: grid;
+
+.client-loading {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 25px;
-  margin: 0 clamp(22px, 5vw, 82px);
-  padding: 35px 0 42px;
-  border-top: 1px solid rgba(43, 39, 45, 0.15);
-  grid-template-columns: 1fr auto 1fr;
+  justify-content: center;
+  min-height: 100svh;
+  gap: 20px;
+  background: var(--bg);
 }
-.client-footer > div:first-child {
+
+.client-loading__mark {
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(243, 237, 226, 0.2);
+  border-radius: 50%;
+  color: var(--accent);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 16px;
 }
-.client-footer > div:first-child > div {
+
+.client-loading p {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--gallery-muted);
+}
+
+.client-loading__line {
+  width: 100px;
+  height: 1px;
+  background: var(--border);
+  position: relative;
+  overflow: hidden;
+}
+
+.client-loading__line::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -40px;
+  width: 40px;
+  height: 1px;
+  background: var(--accent);
+  animation: loading-sweep 1.4s ease-in-out infinite;
+}
+
+@keyframes loading-sweep {
+  0% { left: -40px; }
+  100% { left: 100px; }
+}
+
+.client-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100svh;
+  gap: 12px;
+  text-align: center;
+  padding: 24px;
+  background: var(--bg);
+}
+
+.client-error h1 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 28px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.client-error > p:last-child {
+  font-size: 12px;
+  color: var(--gallery-muted);
+  max-width: 320px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.client-lock-screen {
+  display: flex;
+  flex-direction: column;
+  min-height: 100svh;
+  background: var(--bg);
+}
+
+.client-lock-screen__brand {
+  padding: 20px clamp(22px, 4vw, 48px);
+}
+
+.client-lock-screen__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 16px;
+  padding: 40px 24px;
+  text-align: center;
+}
+
+.client-lock-screen__lock {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(239, 170, 130, 0.4);
+  border-radius: 50%;
+  color: var(--accent);
+  font-size: 22px;
+  font-weight: 200;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.client-lock-screen__center h1 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(24px, 3vw, 32px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.client-lock-screen__center > p:not(.client-kicker):not(.client-form-error) {
+  font-size: 12px;
+  color: var(--gallery-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.client-password-form {
+  display: flex;
+  width: min(100%, 360px);
+  align-items: stretch;
+  margin-top: 8px;
+}
+
+.client-password-form input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid rgba(243, 237, 226, 0.2);
+  background: transparent;
+  color: var(--gallery-ink);
+  font-size: 13px;
+  outline: none;
+  transition: border-color var(--transition);
+}
+
+.client-password-form input:focus {
+  border-color: var(--accent);
+}
+
+.client-password-form input::placeholder {
+  color: var(--gallery-muted);
+}
+
+.client-round-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  padding: 10px 18px;
+  border: 1px solid rgba(243, 237, 226, 0.2);
+  background: transparent;
+  color: var(--gallery-ink);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--transition), border-color var(--transition);
+  margin-left: -1px;
+}
+
+.client-round-button:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg);
+}
+
+.client-lock-screen__footer {
+  padding: 20px clamp(22px, 4vw, 48px);
+}
+
+.client-form-error {
+  font-size: 10px;
+  color: var(--danger);
+}
+
+.client-kicker {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--gallery-muted);
+}
+
+.client-display {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(20px, 3vw, 28px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.client-monogram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--accent);
+  color: var(--bg);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.client-download-section {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 24px;
+  padding: 32px 0;
+  margin: 0 clamp(22px, 4vw, 48px);
+  border-bottom: 1px solid rgba(243, 237, 226, 0.08);
+}
+
+.client-download-section__copy h2 {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  margin: 0 0 4px;
+}
+
+.client-download-section__copy h2 em {
+  font-style: normal;
+  color: var(--gallery-muted);
+}
+
+.client-download-section__copy > p:last-child {
+  font-size: 11px;
+  color: var(--gallery-muted);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.client-download-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 8px 8px 18px;
+  background: var(--gallery-ink);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition);
+}
+
+.client-download-button:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.client-gallery--dark .client-download-button {
+  background: var(--gallery-ink);
+  color: var(--bg);
+}
+
+.client-gallery--dark .client-download-button:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.client-download-button > span:last-child {
+  display: flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1;
+  transition: transform var(--transition);
+}
+
+.client-download-button:hover > span:last-child {
+  transform: translateY(1px);
+}
+
+.client-download-ready {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent);
+  cursor: pointer;
+  transition: opacity var(--transition);
+}
+
+.client-download-ready:hover {
+  opacity: 0.7;
+}
+
+.client-download-error {
+  max-width: 240px;
+  font-size: 10px;
+  color: var(--danger);
+  line-height: 1.4;
+}
+
+.client-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+  padding: 28px 0;
+  margin: 0 clamp(22px, 4vw, 48px);
+  border-top: 1px solid rgba(243, 237, 226, 0.08);
+}
+
+.client-footer > div:first-child {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.client-footer strong {
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-.client-footer small {
-  color: var(--gallery-muted);
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 15px;
-}
-.client-footer__links {
+
+.client-footer > div:first-child > div {
   display: flex;
-  gap: 20px;
-  color: var(--gallery-accent);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-.client-footer__credit {
-  color: var(--gallery-muted);
-  font-size: 9px;
-  letter-spacing: 0.12em;
-  text-align: right;
-  text-transform: uppercase;
+  align-items: center;
+  gap: 6px;
 }
 
+.client-footer strong {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.client-footer small {
+  font-size: 9px;
+  color: var(--gallery-muted);
+}
+
+.client-footer__credit {
+  text-align: center;
+  font-size: 9px;
+  color: var(--gallery-muted);
+}
+
+.client-footer__links {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+}
+
+.client-footer__links a {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--gallery-muted);
+  transition: color var(--transition);
+}
+
+.client-footer__links a:hover {
+  color: var(--gallery-ink);
+}
+
+/* Photo Viewer / Lightbox */
 .photo-viewer {
   position: fixed;
-  z-index: 20;
   inset: 0;
   display: flex;
-  padding: 22px clamp(18px, 4vw, 62px);
-  background: rgba(23, 20, 26, 0.97);
-  color: #f3ede2;
   flex-direction: column;
+  background: rgba(0, 0, 0, 0.95);
+  z-index: 500;
+  animation: viewer-enter 300ms ease;
 }
-.photo-viewer__topline,
-.photo-viewer__bottomline {
+
+@keyframes viewer-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.photo-viewer__topline {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
-}
-.photo-viewer__topline {
-  color: rgba(243, 237, 226, 0.58);
-  font-size: 9px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  padding: 16px 20px;
+  z-index: 1;
 }
+
 .photo-viewer__topline button {
-  display: grid;
-  cursor: pointer;
-  width: 39px;
-  height: 39px;
-  place-items: center;
-  border: 1px solid rgba(243, 237, 226, 0.42);
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(243, 237, 226, 0.25);
   border-radius: 50%;
   background: transparent;
-  color: #f3ede2;
-  font-size: 23px;
-  font-weight: 200;
+  color: var(--gallery-ink);
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition);
 }
+
+.photo-viewer__topline button:hover {
+  border-color: var(--accent);
+  background: rgba(188, 155, 122, 0.15);
+}
+
 .photo-viewer__stage {
   position: relative;
   display: flex;
@@ -2779,1561 +3265,410 @@ a {
   flex: 1;
   align-items: center;
   justify-content: center;
-  gap: 20px;
+  padding: 20px;
 }
+
 .photo-viewer__image-wrap {
+  position: relative;
+  max-width: 90vw;
+  max-height: 80vh;
   display: flex;
-  width: min(76vw, 1100px);
-  height: min(76vh, 740px);
   align-items: center;
   justify-content: center;
 }
-.photo-viewer__image-wrap img {
+
+.photo-viewer__image-wrap img,
+.photo-viewer__video {
   max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
+  max-height: 80vh;
+  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
 }
+
+.photo-viewer__video {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 90vw;
+  max-height: 80vh;
+}
+
 .photo-viewer__image-wrap > span {
-  color: rgba(243, 237, 226, 0.6);
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: 25px;
+  position: absolute;
+  bottom: -30px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 10px;
+  color: rgba(243, 237, 226, 0.4);
 }
+
 .photo-viewer__arrow {
-  display: grid;
-  z-index: 1;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  place-items: center;
-  border: 1px solid rgba(243, 237, 226, 0.42);
+  position: absolute;
+  top: 50%;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(243, 237, 226, 0.25);
   border-radius: 50%;
   background: transparent;
-  color: #f3ede2;
-  font-size: 19px;
-  font-weight: 300;
+  color: var(--gallery-ink);
+  font-size: 18px;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: border-color var(--transition), background var(--transition);
 }
+
+.photo-viewer__arrow:hover {
+  border-color: var(--accent);
+  background: rgba(188, 155, 122, 0.15);
+}
+
 .photo-viewer__arrow:disabled {
-  cursor: not-allowed;
-  opacity: 0.18;
+  opacity: 0.2;
+  cursor: default;
 }
+
+.photo-viewer__arrow--left {
+  left: 20px;
+}
+
+.photo-viewer__arrow--right {
+  right: 20px;
+}
+
 .photo-viewer__bottomline {
-  padding-top: 19px;
-  border-top: 1px solid rgba(243, 237, 226, 0.17);
-  color: rgba(243, 237, 226, 0.75);
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 20px;
+  z-index: 1;
 }
+
 .photo-viewer__bottomline small {
-  margin-left: 9px;
-  color: rgba(243, 237, 226, 0.35);
-  font-size: 9px;
+  font-size: 10px;
+  color: rgba(243, 237, 226, 0.4);
 }
+
 .photo-viewer__bottomline > div {
   display: flex;
-  gap: 18px;
+  align-items: center;
+  gap: 12px;
 }
+
 .photo-viewer__bottomline button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
   cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: rgba(243, 237, 226, 0.7);
+  font-size: 14px;
+  color: rgba(243, 237, 226, 0.5);
+  transition: color var(--transition);
+}
+
+.photo-viewer__bottomline button:hover {
+  color: var(--gallery-ink);
+}
+
+.photo-viewer__bottomline button.is-favorited {
+  color: var(--accent) !important;
+}
+
+.photo-viewer__bottomline button span {
   font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* Gallery editorial variant */
+.client-gallery--editorial .client-media-card:nth-child(5n+3) {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.client-gallery--grid .client-media-card {
+  margin-bottom: 0;
+}
+
+.client-gallery--masonry .client-media-card {
+  margin-bottom: 0;
+}
+
+.client-gallery--masonry .client-media-card:nth-child(3n+2) {
+  margin-top: 40px;
+}
+
+/* Preview mode */
+.preview-ribbon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
-.photo-viewer__bottomline button.is-favorited {
-  color: #eea980;
+
+.preview-ribbon span:last-child {
+  font-weight: 400;
+  opacity: 0.8;
 }
 
 .preview-return-link {
-  position: fixed;
-  z-index: 5;
-  right: 25px;
-  bottom: 25px;
-  color: #efaa82;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--surface);
   font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--fg-secondary);
+  transition: color var(--transition);
 }
 
-@media (max-width: 900px) {
-  .auth-shell {
-    display: block;
-  }
-  .auth-shell__texture {
-    inset: 0 0 53% 0;
-  }
-  .auth-shell__brand {
-    top: 25px;
-    left: 25px;
-  }
-  .auth-shell__aside {
-    max-width: 400px;
-    margin: 0;
-    padding: 130px 25px 95px;
-  }
-  .auth-shell__aside h1 {
-    font-size: clamp(67px, 15vw, 110px);
-  }
-  .auth-shell__panel {
-    min-height: 47svh;
-    padding: 68px 25px;
-  }
-  .studio-sidebar {
-    display: none;
-  }
-  .studio-mobilebar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 19px 22px;
-    background: #211d24;
-  }
-  .studio-mobilebar .studio-logo {
-    font-size: 11px;
-  }
-  .studio-mobilebar__account {
-    color: #efaa82;
-  }
-  .studio-page__header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .studio-page__header .platform-button {
-    align-self: flex-start;
-  }
-  .gallery-grid--dashboard {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .editor-layout {
-    gap: 45px;
-    grid-template-columns: 1fr;
-  }
-  .editor-aside {
-    display: grid;
-    gap: 35px;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .editor-section--aside + .editor-section--aside {
-    padding-top: 0;
-    border-top: 0;
-  }
-  .editor-section--aside:last-child {
-    grid-column: span 2;
-  }
+.preview-return-link:hover {
+  color: var(--accent);
 }
 
-@media (max-width: 640px) {
-  .auth-shell__aside {
-    padding-bottom: 75px;
-  }
-  .auth-shell__aside > p:last-child {
-    margin-top: 25px;
-  }
-  .auth-shell__panel {
-    padding: 55px 22px 65px;
-  }
-  .auth-card__heading h2 {
-    font-size: 57px;
-  }
-  .studio-page {
-    padding: 44px 21px 70px;
-  }
-  .studio-page__header .studio-display,
-  .studio-page__header--compact .studio-display {
-    font-size: 65px;
-  }
-  .studio-page__lede {
-    font-size: 14px;
-  }
-  .studio-stats {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .studio-stat,
-  .studio-stat:not(:first-child) {
-    min-height: 125px;
-    padding: 17px 12px 15px 0;
-  }
-  .studio-stat:nth-child(2n) {
-    padding-left: 15px;
-    border-right: 0;
-  }
-  .studio-stat:nth-child(n + 3) {
-    border-top: 1px solid rgba(43, 39, 45, 0.13);
-  }
-  .studio-stat > strong {
-    margin-top: 15px;
-    font-size: 38px;
-  }
-  .studio-section__heading {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .gallery-grid,
-  .gallery-grid--dashboard {
-    grid-template-columns: 1fr;
-  }
-  .gallery-card__cover {
-    aspect-ratio: 1.5;
-  }
-  .studio-empty {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .editor-page {
-    padding: 18px 21px 65px;
-  }
-  .editor-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .editor-header__actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-  .editor-header__actions .editor-button {
-    flex: 1;
-    justify-content: center;
-  }
-  .editor-titlebar {
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 40px 0 47px;
-  }
-  .editor-titlebar .studio-display {
-    font-size: 61px;
-  }
-  .editor-fields--two {
-    grid-template-columns: 1fr;
-  }
-  .editor-media-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .editor-aside {
-    display: block;
-  }
-  .editor-section--aside:last-child {
-    grid-column: auto;
-  }
-  .upload-zone {
-    min-height: 200px;
-    text-align: center;
-  }
-.upload-zone__orb {
-  display: grid;
-  width: 43px;
-  height: 43px;
-  place-items: center;
-  color: #ad695b;
-  font-size: 26px;
-  font-weight: 200;
-}
-.upload-zone__title {
-    font-size: 22px;
-  }
-  .upload-zone__hint {
-    max-width: 230px;
-    line-height: 1.5;
-  }
-  .upload-row__name small {
-    display: block;
-    margin: 4px 0 0;
-  }
-  .client-gallery__nav {
-    min-height: 70px;
-    margin: 0 20px;
-  }
-  .client-gallery__nav-actions {
-    gap: 12px;
-  }
-  .client-gallery__edition {
-    display: none;
-  }
-  .client-nav-button {
-    font-size: 8px;
-  }
-  .client-hero {
-    display: flex;
-    min-height: auto;
-    padding: 75px 20px 65px;
-    flex-direction: column;
-  }
-  .client-hero__copy {
-    padding-bottom: 52px;
-  }
-  .client-hero__copy h1 {
-    font-size: clamp(66px, 19vw, 105px);
-  }
-  .client-hero__cover {
-    min-height: 68vh;
-  }
-  .client-hero__fallback {
-    min-height: 68vh;
-  }
-  .client-hero__scroll {
-    margin-top: 32px;
-  }
-  .client-work-section,
-  .client-download-section {
-    margin: 0 20px;
-    padding: 74px 0;
-  }
-  .client-section-heading {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 20px;
-  }
-  .client-section-heading h2 {
-    font-size: 59px;
-  }
-  .client-section-heading > span {
-    padding-bottom: 0;
-  }
-  .client-media-grid {
-    display: flex;
-    padding-top: 28px;
-    flex-direction: column;
-    gap: 30px;
-  }
-  .client-media-card,
-  .client-media-card:nth-child(7n + 1),
-  .client-gallery--editorial .client-media-card:nth-child(5n + 3),
-  .client-gallery--grid .client-media-card,
-  .client-gallery--masonry .client-media-card {
-    width: 100%;
-  }
-  .client-gallery--masonry .client-media-card:nth-child(3n + 2) {
-    transform: none;
-  }
-  .client-media-card__image,
-  .client-media-card:nth-child(7n + 1) .client-media-card__image {
-    aspect-ratio: 1.08;
-  }
-  .client-download-section {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .client-download-section__copy h2 {
-    font-size: 61px;
-  }
-  .client-download-button {
-    width: 100%;
-  }
-  .client-footer {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    margin: 0 20px;
-  }
-  .client-footer__credit {
-    text-align: left;
-  }
-  .photo-viewer {
-    padding: 15px 15px 17px;
-  }
-  .photo-viewer__stage {
-    gap: 8px;
-  }
-  .photo-viewer__image-wrap {
-    width: calc(100vw - 86px);
-    height: 68vh;
-  }
-  .photo-viewer__arrow {
-    width: 31px;
-    height: 31px;
-    font-size: 15px;
-  }
-  .photo-viewer__bottomline {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 18px;
-  }
-  .photo-viewer__bottomline > div {
-    width: 100%;
-    justify-content: space-between;
-  }
-  .preview-ribbon {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 3px;
-    padding-left: 20px;
-  }
-}
-
-.upload-row__error {
-  max-width: 260px;
-  overflow: hidden;
-  color: #a84f4a;
-  font-size: 9px;
-  line-height: 1.35;
-  text-overflow: ellipsis;
-}
-
-/* Developer diagnostics */
+/* Dev page */
 .dev-page__actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
+  margin-bottom: 24px;
 }
 
 .dev-grid {
   display: grid;
-  gap: 15px;
-  margin-top: 68px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1px;
+  background: var(--border-subtle);
+  border: 1px solid var(--border-subtle);
 }
 
 .dev-panel {
-  padding: 25px 23px;
-  border: 1px solid rgba(43, 39, 45, 0.14);
-  background: rgba(247, 243, 237, 0.42);
+  padding: 20px;
+  background: var(--surface);
 }
 
 .dev-panel--wide {
-  margin-top: 15px;
+  grid-column: 1 / -1;
 }
 
 .dev-panel__heading {
-  margin-bottom: 25px;
+  margin-bottom: 16px;
 }
 
 .dev-panel__heading .studio-kicker {
-  margin-bottom: 11px;
+  margin-bottom: 4px;
 }
 
 .dev-panel__heading h2 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg);
   margin: 0;
-  font-family:
-    Iowan Old Style,
-    Baskerville,
-    serif;
-  font-size: clamp(27px, 3vw, 42px);
-  font-weight: 400;
-  letter-spacing: -0.055em;
-  line-height: 0.92;
+}
+
+.dev-panel__error {
+  padding: 8px 12px;
+  background: rgba(196, 85, 68, 0.1);
+  color: var(--danger);
+  font-size: 11px;
+  margin-top: 8px;
+}
+
+.dev-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.dev-status::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--success);
+}
+
+.dev-status.is-failed::before {
+  background: var(--danger);
 }
 
 .dev-row {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  align-items: center;
   gap: 12px;
-  padding: 10px 0;
-  border-top: 1px solid rgba(43, 39, 45, 0.1);
-}
-
-.dev-row span {
-  color: rgba(43, 39, 45, 0.48);
-  font-size: 9px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px;
 }
 
 .dev-row strong {
-  max-width: 68%;
-  overflow: hidden;
-  color: #2b272d;
-  font-size: 10px;
   font-weight: 600;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dev-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 7px;
-  padding: 9px 10px;
-  background: rgba(93, 128, 95, 0.1);
-  color: #5d805f;
-}
-
-.dev-status.is-failed {
-  background: rgba(168, 79, 74, 0.1);
-  color: #a84f4a;
-}
-
-.dev-status i {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.dev-status strong {
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.dev-status span {
-  margin-left: auto;
-  font-size: 9px;
-  text-transform: uppercase;
-}
-
-.dev-panel__error {
-  margin: 14px 0 0;
-  color: #a84f4a;
-  font-size: 10px;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.dev-loading {
-  display: flex;
-  gap: 6px;
-  padding: 18px 0;
-}
-
-.dev-loading span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #ad695b;
-  animation: studio-loading 1s ease-in-out infinite alternate;
-}
-
-.dev-loading span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.dev-loading span:nth-child(3) {
-  animation-delay: 0.4s;
+  color: var(--fg);
+  min-width: 100px;
 }
 
 .dev-flow {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 0;
+  font-size: 11px;
 }
 
 .dev-flow > span {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  padding: 15px;
-  border: 1px solid rgba(43, 39, 45, 0.13);
-  color: #ad695b;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
   font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  flex-direction: column;
-  gap: 9px;
-}
-
-.dev-flow strong {
-  color: #2b272d;
-  font-size: 11px;
-  letter-spacing: 0;
-  text-transform: none;
-}
-
-.dev-flow small {
-  color: rgba(43, 39, 45, 0.48);
-  font-size: 9px;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 1.35;
-  text-transform: none;
+  color: var(--fg-secondary);
 }
 
 .dev-flow > i {
-  color: #ad695b;
-  font-size: 18px;
   font-style: normal;
+  color: var(--fg-muted);
+  font-size: 12px;
 }
 
 .dev-hint {
-  max-width: 700px;
-  margin: 24px 0 0;
-  color: rgba(43, 39, 45, 0.54);
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: 10px;
+  color: var(--fg-muted);
+  font-style: italic;
 }
 
 .dev-cors {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 20px;
-  color: rgba(43, 39, 45, 0.48);
-  font-size: 9px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  margin-top: 8px;
 }
 
 .dev-cors code {
-  padding: 6px 8px;
-  background: rgba(43, 39, 45, 0.08);
-  color: #2b272d;
   font-size: 10px;
-  letter-spacing: 0;
-  text-transform: none;
+  color: var(--fg-muted);
+  word-break: break-all;
+}
+
+.dev-raw {
+  max-height: 300px;
+  overflow: auto;
+  padding: 12px;
+  background: var(--bg);
+  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+  font-size: 10px;
+  line-height: 1.5;
+  color: var(--fg-secondary);
+  white-space: pre-wrap;
 }
 
 .dev-last-error {
   display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  padding: 16px;
-  border: 1px solid rgba(168, 79, 74, 0.35);
-  background: rgba(168, 79, 74, 0.06);
+  flex-direction: column;
+  gap: 6px;
 }
 
 .dev-last-error__mark {
-  display: grid;
-  width: 27px;
-  height: 27px;
-  flex: 0 0 27px;
-  place-items: center;
-  border: 1px solid #a84f4a;
-  border-radius: 50%;
-  color: #a84f4a;
-  font-weight: 700;
+  font-size: 20px;
 }
 
 .dev-last-error > div {
-  min-width: 0;
-  flex: 1;
+  font-size: 11px;
+  color: var(--fg-secondary);
+  line-height: 1.5;
 }
 
 .dev-last-error strong {
-  color: #2b272d;
+  font-weight: 600;
   font-size: 11px;
+  color: var(--fg);
 }
+
 .dev-last-error p {
-  margin: 7px 0;
-  color: #a84f4a;
-  font-size: 12px;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-.dev-last-error small {
-  color: rgba(43, 39, 45, 0.47);
-  font-size: 9px;
-}
-.dev-last-error button {
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: rgba(43, 39, 45, 0.48);
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-.dev-empty {
+  font-size: 10px;
+  color: var(--fg-muted);
   margin: 0;
-  color: rgba(43, 39, 45, 0.5);
-  font-size: 13px;
+}
+
+.dev-last-error small {
+  font-size: 9px;
+  color: var(--fg-muted);
+}
+
+.dev-last-error button {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--danger);
+  transition: opacity var(--transition);
+}
+
+.dev-last-error button:hover {
+  opacity: 0.7;
 }
 
 .dev-check-result {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 19px;
-  padding: 11px 13px;
-  background: rgba(93, 128, 95, 0.1);
-  color: #5d805f;
-  font-size: 10px;
-}
-
-.dev-check-result.is-failed {
-  background: rgba(168, 79, 74, 0.1);
-  color: #a84f4a;
-}
-.dev-check-result span {
-  color: rgba(43, 39, 45, 0.6);
-  overflow-wrap: anywhere;
-}
-.dev-raw {
-  margin-top: 15px;
-  border-top: 1px solid rgba(43, 39, 45, 0.14);
-  color: rgba(43, 39, 45, 0.54);
-}
-.dev-raw summary {
-  cursor: pointer;
-  padding: 15px 0;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-.dev-raw pre {
-  max-height: 400px;
-  overflow: auto;
-  padding: 15px;
-  background: #211d24;
-  color: #efd6bf;
+  padding: 12px;
+  border: 1px solid var(--border);
   font-size: 11px;
   line-height: 1.5;
 }
 
-@media (max-width: 900px) {
-  .dev-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .dev-flow {
-    align-items: stretch;
-    flex-direction: column;
-  }
-  .dev-flow > i {
-    align-self: center;
-    transform: rotate(90deg);
-  }
+.dev-check-result span {
+  font-size: 12px;
 }
 
-@media (max-width: 640px) {
-  .dev-page__actions {
-    width: 100%;
-  }
-  .dev-page__actions button {
-    flex: 1;
-    justify-content: center;
-  }
-  .dev-grid {
-    grid-template-columns: 1fr;
-  }
+.dev-check-result.is-failed {
+  border-color: rgba(196, 85, 68, 0.3);
 }
 
-/* Customer delivery art direction: warm editorial, intentionally separate from the studio UI. */
-.client-gallery,
-.client-lock-screen,
-.client-loading,
-.client-error {
-  --client-paper: #f3f0ea;
-  --client-ink: #1e1d1b;
-  --client-muted: #77736d;
-  --client-line: rgba(30, 29, 27, 0.18);
-  --client-accent: var(--gallery-accent, #bc6655);
-  --client-accent-soft: #e4c3b8;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-}
-
-.client-gallery {
-  min-height: 100svh !important;
-  background: var(--client-paper) !important;
-  color: var(--client-ink) !important;
-}
-
-.client-gallery--dark {
-  --client-paper: #1e1d1b;
-  --client-ink: #f3f0ea;
-  --client-muted: #aaa49c;
-  --client-line: rgba(243, 240, 234, 0.22);
-  --client-accent-soft: #55342f;
-  background: var(--client-paper) !important;
-  color: var(--client-ink) !important;
-}
-
-.client-gallery .client-display,
-.client-lock-screen .client-display,
-.client-error .client-display {
-  font-family: 'Iowan Old Style', 'Baskerville', 'Times New Roman', serif !important;
-  font-weight: 400 !important;
-  letter-spacing: -0.065em !important;
-  line-height: 0.9 !important;
-  text-transform: none !important;
-}
-
-.client-gallery .client-kicker,
-.client-lock-screen .client-kicker,
-.client-error .client-kicker {
-  color: var(--client-accent) !important;
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.14em !important;
-  text-transform: uppercase !important;
-}
-
-.client-gallery button,
-.client-lock-screen button {
-  border-radius: 3px !important;
-  box-shadow: none !important;
-  font-family: inherit !important;
-}
-
-.client-gallery button:hover,
-.client-lock-screen button:hover {
-  transform: none !important;
-}
-
-.preview-ribbon {
+.dev-empty {
   display: flex;
-  min-height: 32px;
-  padding: 8px 20px !important;
   align-items: center;
   justify-content: center;
-  gap: 16px;
-  border: 0 !important;
-  background: var(--client-ink) !important;
-  color: var(--client-paper) !important;
-  font-size: 9px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.12em !important;
-  text-transform: uppercase !important;
+  padding: 40px;
+  color: var(--fg-muted);
+  font-size: 11px;
 }
 
-.preview-ribbon span:last-child {
-  color: rgba(243, 240, 234, 0.58) !important;
-  font-weight: 400 !important;
-}
-
-.client-gallery__nav {
-  display: flex;
-  width: min(100% - 48px, 1220px) !important;
-  min-height: 77px !important;
-  margin: 0 auto !important;
-  padding: 0 !important;
-  align-items: center;
-  justify-content: space-between;
-  gap: 28px;
-  border-bottom: 1px solid var(--client-line) !important;
-}
-
-.client-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--client-ink) !important;
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.04em !important;
-  text-decoration: none !important;
-  text-transform: uppercase !important;
-}
-
-.client-brand img {
-  width: 28px !important;
-  height: 28px !important;
-  border-radius: 50% !important;
-  object-fit: cover;
-}
-
-.client-brand__mark {
-  display: grid !important;
-  width: 29px !important;
-  height: 29px !important;
-  place-items: center;
-  border: 1px solid var(--client-ink) !important;
-  border-radius: 50% !important;
-  color: var(--client-ink) !important;
-  font-family: 'Iowan Old Style', Baskerville, serif !important;
-  font-size: 15px !important;
-  font-weight: 400 !important;
-}
-
-.client-gallery__nav-actions {
+.dev-loading {
   display: flex;
   align-items: center;
-  gap: 22px !important;
+  justify-content: center;
+  padding: 40px;
+  color: var(--fg-muted);
+  font-size: 11px;
 }
 
-.client-nav-button {
-  min-height: 0 !important;
-  padding: 6px 0 !important;
-  border: 0 !important;
-  background: transparent !important;
-  color: var(--client-ink) !important;
-  font-size: 9px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.1em !important;
-  text-decoration: underline !important;
-  text-underline-offset: 4px;
-  text-transform: uppercase !important;
-}
-
-.client-nav-button:hover {
-  background: transparent !important;
-  color: var(--client-accent) !important;
-}
-
-.client-nav-button span {
-  color: var(--client-accent) !important;
-  font-size: 13px !important;
-}
-
-.client-gallery__edition {
-  color: var(--client-muted) !important;
-  font-size: 9px !important;
-  letter-spacing: 0.1em !important;
-  text-transform: uppercase !important;
-}
-
-.client-hero {
-  display: grid !important;
-  width: min(100% - 48px, 1220px) !important;
-  min-height: 660px !important;
-  margin: 0 auto !important;
-  padding: 96px 0 84px !important;
-  align-items: center;
-  gap: clamp(45px, 8vw, 135px);
-  grid-template-columns: minmax(250px, 0.75fr) minmax(400px, 1.25fr);
-}
-
-.client-hero__copy {
-  padding: 0 !important;
-}
-
-.client-hero__copy h1 {
-  max-width: 560px !important;
-  margin: 0 !important;
-  color: var(--client-ink) !important;
-  font-size: clamp(62px, 8.5vw, 128px) !important;
-  text-wrap: balance;
-}
-
-.client-hero__description {
-  max-width: 330px !important;
-  margin: 28px 0 0 !important;
-  color: var(--client-muted) !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  line-height: 1.6 !important;
-  text-transform: none !important;
-}
-
-.client-hero__cover {
-  min-height: 560px !important;
-  border: 0 !important;
-  background: var(--client-accent-soft) !important;
-  transform: translateY(22px);
-}
-
-.client-hero__cover img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.client-hero__fallback {
-  display: grid;
-  min-height: 560px !important;
-  place-items: center;
-  background: var(--client-accent-soft) !important;
-  color: var(--client-ink) !important;
-  font-family: 'Iowan Old Style', Baskerville, serif !important;
-  font-size: 150px !important;
-  font-weight: 400 !important;
-}
-
-.client-hero__cover-caption {
-  right: 18px !important;
-  bottom: 16px !important;
-  left: 18px !important;
-  color: var(--client-paper) !important;
-  font-size: 9px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.11em !important;
-  text-transform: uppercase !important;
-}
-
-.client-hero__scroll {
-  display: flex;
-  margin-top: 40px !important;
-  align-items: center;
-  gap: 10px;
-  color: var(--client-muted) !important;
-  font-size: 9px !important;
-  letter-spacing: 0.12em !important;
-  text-transform: uppercase !important;
-}
-
-.client-hero__scroll span {
-  width: 27px !important;
-  background: var(--client-accent) !important;
-}
-
-.client-work-section,
-.client-download-section {
-  width: min(100% - 48px, 1220px) !important;
-  margin: 0 auto !important;
-  padding: 96px 0 !important;
-  border-top: 1px solid var(--client-line) !important;
-}
-
-.client-section-heading {
-  display: flex;
-  padding-bottom: 22px !important;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 30px;
-  border-bottom: 1px solid var(--client-line) !important;
-}
-
-.client-section-heading h2,
-.client-download-section__copy h2 {
-  margin: 0 !important;
-  color: var(--client-ink) !important;
-  font-size: clamp(45px, 6vw, 82px) !important;
-  text-transform: none !important;
-}
-
-.client-section-heading h2 em,
-.client-download-section__copy h2 em {
-  color: var(--client-accent) !important;
-  font-style: italic !important;
-  background: transparent !important;
-}
-
-.client-section-heading > span {
-  padding-bottom: 3px;
-  color: var(--client-muted) !important;
-  font-size: 9px !important;
-  letter-spacing: 0.1em !important;
-  text-transform: uppercase !important;
-}
-
-.client-media-grid {
-  display: grid !important;
-  gap: 58px 24px !important;
-  padding-top: 50px !important;
-  grid-template-columns: repeat(12, 1fr) !important;
-}
-
-.client-media-card,
-.client-media-card:nth-child(7n + 1),
-.client-gallery--editorial .client-media-card:nth-child(5n + 3),
-.client-gallery--grid .client-media-card,
-.client-gallery--masonry .client-media-card {
-  grid-column: span 4 !important;
-  transform: none !important;
-}
-
-.client-media-card:nth-child(5n + 1) {
-  grid-column: span 7 !important;
-}
-
-.client-media-card:nth-child(5n + 2) {
-  grid-column: span 5 !important;
-  padding-top: 80px;
-}
-
-.client-media-card__image,
-.client-media-card__video-wrap {
-  min-height: 280px;
-  aspect-ratio: 1.08 !important;
-  border: 0 !important;
-  border-radius: 0 !important;
-  background: var(--client-accent-soft) !important;
-}
-
-.client-media-card:nth-child(5n + 1) .client-media-card__image,
-.client-media-card:nth-child(5n + 1) .client-media-card__video-wrap {
-  aspect-ratio: 1.46 !important;
-}
-
-.client-media-card__image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: saturate(0.9);
-}
-
-.client-media-card__image:hover img {
-  transform: scale(1.015);
-}
-
-.client-media-card__video-wrap video {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.client-media-card__video-label {
-  right: 14px !important;
-  bottom: 14px !important;
-  padding: 6px 8px !important;
-  border: 0 !important;
-  background: var(--client-paper) !important;
-  color: var(--client-ink) !important;
-  font-size: 8px !important;
-  letter-spacing: 0.1em !important;
-}
-
-.client-media-card__processing {
-  color: var(--client-muted) !important;
-  font-size: 9px !important;
-  font-weight: 700 !important;
-  text-transform: uppercase !important;
-}
-
-.client-media-card__footer {
-  padding-top: 13px !important;
-  color: var(--client-muted) !important;
-  font-size: 10px !important;
-  letter-spacing: 0.02em !important;
-}
-
-.client-media-card__footer button {
-  min-height: 0 !important;
-  padding: 0 2px !important;
-  border: 0 !important;
-  background: transparent !important;
-  color: var(--client-ink) !important;
-  font-size: 18px !important;
-}
-
-.client-media-card__footer button:hover {
-  background: transparent !important;
-  color: var(--client-accent) !important;
-}
-
-.client-media-card__footer button.is-favorited {
-  color: var(--client-accent) !important;
-}
-
-.client-watermark {
-  top: 14px !important;
-  left: 14px !important;
-  padding: 5px 7px !important;
-  border: 0 !important;
-  background: var(--client-paper) !important;
-  color: var(--client-ink) !important;
-  font-size: 8px !important;
-}
-
-.client-download-section {
-  display: grid !important;
-  padding: 104px 0 !important;
-  align-items: end !important;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 30px;
-}
-
-.client-download-section__copy > p:last-child {
-  max-width: 360px;
-  margin: 24px 0 0 !important;
-  color: var(--client-muted) !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  line-height: 1.6 !important;
-  text-transform: none !important;
-}
-
-.client-download-button {
-  min-width: 214px !important;
-  padding: 13px 16px !important;
-  background: var(--client-accent) !important;
-  color: #fffaf6 !important;
-  font-size: 10px !important;
-  letter-spacing: 0.08em !important;
-}
-
-.client-download-button:hover {
-  background: var(--client-ink) !important;
-  color: var(--client-paper) !important;
-}
-
-.client-download-button > span:last-child {
-  color: inherit !important;
-}
-
-.client-download-ready {
-  grid-column: 2;
-  color: var(--client-accent) !important;
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.08em !important;
-  text-transform: uppercase !important;
-}
-
-.client-download-error {
-  grid-column: 2;
-  color: var(--client-accent) !important;
-  font-size: 10px !important;
-  font-weight: 700 !important;
-}
-
-.client-footer {
-  display: flex !important;
-  width: min(100% - 48px, 1220px) !important;
-  margin: 0 auto !important;
-  padding: 25px 0 32px !important;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  border-top: 1px solid var(--client-line) !important;
-}
-
-.client-footer .client-brand__mark {
-  width: 25px !important;
-  height: 25px !important;
-  font-size: 12px !important;
-}
-
-.client-footer strong,
-.client-footer small,
-.client-footer__links,
-.client-footer__credit {
-  color: var(--client-muted) !important;
-  font-family: inherit !important;
-  font-size: 9px !important;
-  font-weight: 500 !important;
-  letter-spacing: 0.08em !important;
-  text-transform: uppercase !important;
-}
-
-.client-footer__links {
-  display: flex;
-  gap: 18px;
-}
-
-.client-footer__links a {
-  color: var(--client-ink) !important;
-}
-
-/* Client states */
-.client-loading,
-.client-error,
-.client-lock-screen {
-  background: var(--client-paper) !important;
-  color: var(--client-ink) !important;
-}
-
-.client-loading__mark {
-  display: grid !important;
-  width: 55px !important;
-  height: 55px !important;
-  place-items: center;
-  border: 1px solid var(--client-ink) !important;
-  border-radius: 50% !important;
-  color: var(--client-accent) !important;
-  font-family: 'Iowan Old Style', Baskerville, serif !important;
-  font-size: 25px !important;
-  font-weight: 400 !important;
-}
-
-.client-loading p {
-  color: var(--client-muted) !important;
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.14em !important;
-  text-transform: uppercase !important;
-}
-
-.client-loading__line {
-  width: 110px !important;
-  height: 1px !important;
-  border: 0 !important;
-  background: var(--client-line) !important;
-}
-
-.client-loading__line::after {
-  width: 35% !important;
-  background: var(--client-accent) !important;
-}
-
-.client-error {
-  justify-content: center !important;
-}
-
-.client-error h1 {
-  max-width: 650px;
-  color: var(--client-ink) !important;
-  font-size: clamp(48px, 8vw, 104px) !important;
-}
-
-.client-error h1 em {
-  color: var(--client-accent) !important;
-  background: transparent !important;
-}
-
-.client-error > p:last-child {
-  max-width: 390px;
-  color: var(--client-muted) !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  line-height: 1.6 !important;
-  text-transform: none !important;
-}
-
-.client-lock-screen {
-  padding: 30px clamp(24px, 6vw, 90px) !important;
-}
-
-.client-lock-screen__brand {
-  color: var(--client-ink) !important;
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.1em !important;
-  text-transform: uppercase !important;
-}
-
-.client-lock-screen__center h1 {
-  color: var(--client-ink) !important;
-  font-size: clamp(50px, 8vw, 112px) !important;
-  text-transform: none !important;
-}
-
-.client-lock-screen__center > p:not(.client-kicker):not(.client-form-error) {
-  max-width: 350px;
-  margin: 22px 0 !important;
-  color: var(--client-muted) !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  line-height: 1.6 !important;
-  text-transform: none !important;
-}
-
-.client-lock-screen__lock {
-  margin-bottom: 28px !important;
-  color: var(--client-accent) !important;
-  font-size: 20px !important;
-}
-
-.client-password-form {
-  display: flex;
-  width: min(100%, 390px) !important;
-  align-items: stretch;
-}
-
-.client-password-form input {
-  min-height: 43px !important;
-  border: 1px solid var(--client-ink) !important;
-  border-radius: 3px !important;
-  padding: 11px 13px !important;
-  background: transparent !important;
-  color: var(--client-ink) !important;
-}
-
-.client-password-form input:focus {
-  background: var(--client-accent-soft) !important;
-}
-
-.client-round-button {
-  min-width: 53px !important;
-  min-height: 43px !important;
-  margin-left: 8px;
-  border: 1px solid var(--client-ink) !important;
-  border-radius: 3px !important;
-  background: var(--client-ink) !important;
-  color: var(--client-paper) !important;
-}
-
-.client-round-button:hover {
-  background: var(--client-accent) !important;
-  color: #fffaf6 !important;
-}
-
-.client-lock-screen__footer {
-  color: var(--client-muted) !important;
-  font-size: 9px !important;
-  letter-spacing: 0.12em !important;
-  text-transform: uppercase !important;
-}
-
-/* Viewer */
-.client-gallery .photo-viewer {
-  padding: 24px !important;
-  background: rgba(30, 29, 27, 0.98) !important;
-  color: #f3f0ea !important;
-}
-
-.client-gallery .photo-viewer__topline,
-.client-gallery .photo-viewer__bottomline {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-}
-
-.client-gallery .photo-viewer__topline {
-  color: rgba(243, 240, 234, 0.68) !important;
-  font-size: 10px !important;
-  letter-spacing: 0.1em !important;
-  text-transform: uppercase !important;
-}
-
-.client-gallery .photo-viewer__topline button,
-.client-gallery .photo-viewer__arrow {
-  width: 37px !important;
-  height: 37px !important;
-  min-height: 37px !important;
-  border: 1px solid rgba(243, 240, 234, 0.65) !important;
-  border-radius: 50% !important;
-  background: transparent !important;
-  color: #f3f0ea !important;
-  box-shadow: none !important;
-  font-size: 18px !important;
-}
-
-.client-gallery .photo-viewer__topline button:hover,
-.client-gallery .photo-viewer__arrow:hover {
-  background: #f3f0ea !important;
-  color: #1e1d1b !important;
-}
-
-.client-gallery .photo-viewer__bottomline {
-  padding-top: 18px !important;
-  border-top: 1px solid rgba(243, 240, 234, 0.28) !important;
-  color: rgba(243, 240, 234, 0.8) !important;
-  font-size: 10px !important;
-  letter-spacing: 0.1em !important;
-  text-transform: uppercase !important;
-}
-
-.client-gallery .photo-viewer__bottomline button {
-  min-height: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-  background: transparent !important;
-  color: #f3f0ea !important;
-  box-shadow: none !important;
-  font-size: 10px !important;
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-.client-gallery .photo-viewer__bottomline button:hover {
-  background: transparent !important;
-  color: #e4aa97 !important;
-  transform: none !important;
-}
-
-.client-gallery .photo-viewer__bottomline button.is-favorited {
-  color: #e4aa97 !important;
-}
-
-@media (max-width: 700px) {
-  .client-gallery__nav,
-  .client-hero,
-  .client-work-section,
-  .client-download-section,
-  .client-footer {
-    width: min(100% - 36px, 1220px) !important;
-  }
-
-  .preview-ribbon {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 3px;
-    padding-left: 18px !important;
-  }
-
-  .client-gallery__nav {
-    min-height: 70px !important;
-  }
-
-  .client-gallery__nav-actions {
-    gap: 0 !important;
-  }
-
-  .client-gallery__edition {
-    display: none;
-  }
-
-  .client-hero {
-    display: flex !important;
-    min-height: auto !important;
-    padding: 64px 0 70px !important;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 50px;
-  }
-
-  .client-hero__copy h1 {
-    font-size: clamp(58px, 17vw, 100px) !important;
-  }
-
-  .client-hero__cover,
-  .client-hero__fallback {
-    min-height: 68vh !important;
-    transform: none;
-  }
-
-  .client-hero__scroll {
-    margin-top: -20px !important;
-  }
-
-  .client-work-section,
-  .client-download-section {
-    padding: 72px 0 !important;
-  }
-
-  .client-section-heading {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 20px;
-  }
-
-  .client-section-heading h2,
-  .client-download-section__copy h2 {
-    font-size: 49px !important;
-  }
-
-  .client-media-grid {
-    display: flex !important;
-    padding-top: 30px !important;
-    flex-direction: column;
-    gap: 42px !important;
-  }
-
-  .client-media-card,
-  .client-media-card:nth-child(5n + 1),
-  .client-media-card:nth-child(5n + 2) {
-    width: 100% !important;
-    padding-top: 0;
-  }
-
-  .client-media-card__image,
-  .client-media-card__video-wrap,
-  .client-media-card:nth-child(5n + 1) .client-media-card__image,
-  .client-media-card:nth-child(5n + 1) .client-media-card__video-wrap {
-    aspect-ratio: 1.08 !important;
-  }
-
-  .client-download-section {
-    display: flex !important;
-    align-items: flex-start !important;
-    flex-direction: column !important;
-  }
-
-  .client-download-button {
-    width: auto !important;
-  }
-
-  .client-download-ready,
-  .client-download-error {
-    grid-column: auto;
-  }
-
-  .client-footer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .client-error h1,
-  .client-lock-screen__center h1 {
-    font-size: 55px !important;
-  }
-}
-
-/* Account settings stay in the backoffice utility style. */
+/* Settings page */
 .settings-page__header {
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 }
 
 .settings-layout {
   display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
 }
 
 .settings-panel {
-  padding: 22px;
-  border: 3px solid #000;
-  background: #fff;
+  padding: 24px;
+  border: 1px solid var(--border);
 }
 
 .settings-panel--session {
@@ -4341,89 +3676,119 @@ a {
 }
 
 .settings-panel__heading {
-  margin-bottom: 22px;
-  padding-bottom: 12px;
-  border-bottom: 3px solid #000;
+  margin-bottom: 16px;
 }
 
 .settings-panel__heading .studio-kicker {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .settings-panel__heading h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 900;
-  letter-spacing: -0.05em;
-  text-transform: uppercase;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fg);
+  margin: 0 0 4px;
 }
 
 .settings-panel__heading p:last-child {
-  margin: 8px 0 0;
-  color: #666;
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1.45;
-  text-transform: uppercase;
+  font-size: 11px;
+  color: var(--fg-secondary);
+  margin: 0;
+  line-height: 1.5;
 }
 
 .settings-form {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 16px;
 }
 
 .settings-form label {
   display: flex;
-  gap: 7px;
-  font-size: 10px;
-  font-weight: 900;
-  text-transform: uppercase;
   flex-direction: column;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.settings-form input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--fg);
+  font-size: 13px;
+  outline: none;
+  transition: border-color var(--transition);
+}
+
+.settings-form input:focus {
+  border-color: var(--accent);
 }
 
 .settings-button {
   width: fit-content;
-  margin-top: 3px;
-  padding: 8px 13px;
+  padding: 8px 18px;
+  border: 1px solid var(--border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.settings-button:hover {
+  border-color: var(--accent);
+  color: var(--fg);
 }
 
 .settings-message {
-  margin: 0;
-  padding: 7px 9px;
-  border: 2px solid #000;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
   font-size: 10px;
-  font-weight: 900;
-  text-transform: uppercase;
+  line-height: 1.4;
+  color: var(--fg-secondary);
 }
 
 .settings-message--success {
-  background: #0f0;
+  border-color: rgba(125, 155, 106, 0.3);
+  color: var(--success);
 }
 
 .settings-message--error {
-  background: #f00;
-  color: #fff;
+  border-color: rgba(196, 85, 68, 0.3);
+  color: var(--danger);
 }
 
 .settings-session-row {
   display: flex;
   align-items: baseline;
   gap: 10px;
-  padding: 9px 0;
-  border-bottom: 2px solid #000;
-  font-size: 10px;
-  text-transform: uppercase;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px;
 }
 
 .settings-session-row strong {
-  padding: 3px 5px;
-  background: #0f0;
+  font-weight: 600;
+  padding: 2px 6px;
+  background: var(--accent-subtle);
+  color: var(--accent);
+  font-size: 9px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 .settings-session-row code {
-  overflow: hidden;
   font-size: 10px;
+  color: var(--fg-muted);
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -4437,21 +3802,425 @@ a {
 
 .settings-session-actions a,
 .settings-session-actions button {
-  min-height: 0;
-  padding: 3px 0;
-  border: 0;
-  background: transparent;
-  color: #000;
-  box-shadow: none;
   font-size: 10px;
-  font-weight: 900;
-  text-decoration: underline;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--fg-muted);
+  transition: color var(--transition);
+}
+
+.settings-session-actions a:hover,
+.settings-session-actions button:hover {
+  color: var(--fg);
 }
 
 .settings-session-actions button {
-  color: #c00;
+  color: var(--danger);
 }
 
+/* App Loading */
+.app-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100svh;
+  gap: 16px;
+  background: var(--bg);
+}
+
+.app-loading__mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  color: var(--accent);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 16px;
+  line-height: 1;
+  animation: pulse-loading 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse-loading {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.95); }
+}
+
+/* Responsive - Tablet */
+@media (max-width: 900px) {
+  .auth-shell {
+    flex-direction: column;
+  }
+
+  .auth-shell__content {
+    max-width: 100%;
+    padding: 40px 24px 0;
+    text-align: center;
+    align-items: center;
+  }
+
+  .auth-shell__panel {
+    padding: 0 24px 40px;
+  }
+
+  .studio-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    transform: translateX(-100%);
+    z-index: 200;
+  }
+
+  .studio-sidebar.is-open {
+    transform: translateX(0);
+  }
+
+  .studio-mobilebar {
+    display: flex;
+  }
+
+  .studio-page {
+    padding: 20px;
+  }
+
+  .gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1px;
+  }
+
+  .editor-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .editor-aside {
+    border-left: none;
+    border-top: 1px solid var(--border-subtle);
+    padding: 24px 0 0;
+    margin-top: 24px;
+  }
+
+  .studio-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Responsive - Mobile */
+@media (max-width: 640px) {
+  .intro-screen,
+  .reveal-screen,
+  .finish-screen {
+    padding: 0 16px;
+  }
+
+  .intro-screen__center {
+    padding: 40px 0;
+  }
+
+  .intro-screen__title {
+    font-size: 32px;
+  }
+
+  .reveal-seal {
+    width: 80px;
+    height: 80px;
+  }
+
+  .intro-screen__footer {
+    gap: 12px;
+    padding-bottom: 24px;
+  }
+
+  .studio-page {
+    padding: 16px;
+  }
+
+  .studio-page__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 24px;
+  }
+
+  .studio-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .gallery-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .auth-shell {
+    flex-direction: column;
+  }
+
+  .auth-shell__content {
+    padding: 32px 20px 0;
+    text-align: center;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  .auth-shell__panel {
+    padding: 0 20px 32px;
+  }
+
+  .auth-card {
+    padding: 0;
+  }
+
+  .studio-mobilebar {
+    display: flex;
+  }
+
+  .editor-header {
+    padding: 12px 16px;
+  }
+
+  .editor-titlebar {
+    padding: 16px 16px 0;
+  }
+
+  .editor-layout {
+    grid-template-columns: 1fr;
+    padding: 16px;
+  }
+
+  .editor-aside {
+    border-left: none;
+    border-top: 1px solid var(--border-subtle);
+    padding: 20px 0 0;
+    margin-top: 20px;
+  }
+
+  .editor-fields--two {
+    grid-template-columns: 1fr;
+  }
+
+  .editor-media-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .editor-media-tile__body {
+    opacity: 1;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  }
+
+  .editor-media-tile__actions {
+    opacity: 1;
+  }
+
+  .upload-zone {
+    min-height: 160px;
+    padding: 32px 16px;
+  }
+
+  .photo-viewer__arrow {
+    display: none;
+  }
+
+  .photo-viewer__topline {
+    padding: 12px 16px;
+  }
+
+  .photo-viewer__stage {
+    padding: 12px;
+  }
+
+  .photo-viewer__image-wrap img {
+    max-height: 70vh;
+  }
+
+  .client-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .client-hero__copy {
+    padding: 32px 22px 24px;
+  }
+
+  .client-hero__cover {
+    min-height: 300px;
+  }
+
+  .client-footer {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 12px;
+  }
+
+  .client-footer > div:first-child {
+    align-items: center;
+  }
+
+  .client-footer__links {
+    justify-content: center;
+  }
+}
+
+/* Dev grid responsive */
+@media (max-width: 900px) {
+  .dev-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dev-flow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .dev-page__actions {
+    flex-direction: column;
+  }
+
+  .dev-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Client gallery - dark theme overrides */
+.client-gallery,
+.client-lock-screen,
+.client-loading,
+.client-error {
+  --gallery-ink: #f3ede2;
+  --gallery-muted: rgba(243, 237, 226, 0.56);
+  --client-paper: #1e1d1b;
+  --client-ink: #f3f0ea;
+  --client-muted: #aaa49c;
+  --client-line: rgba(243, 240, 234, 0.22);
+  --client-accent: var(--gallery-accent, #bc6655);
+  --client-accent-soft: #55342f;
+}
+
+.client-gallery .photo-viewer {
+  background: rgba(0, 0, 0, 0.95);
+}
+
+.client-gallery .photo-viewer__topline,
+.client-gallery .photo-viewer__bottomline {
+  background: transparent;
+}
+
+.client-gallery .photo-viewer__topline button,
+.client-gallery .photo-viewer__arrow {
+  border-color: rgba(243, 237, 226, 0.2);
+  color: var(--gallery-ink);
+}
+
+.client-gallery .photo-viewer__topline button:hover,
+.client-gallery .photo-viewer__arrow:hover {
+  border-color: var(--accent);
+  background: rgba(188, 155, 122, 0.15);
+}
+
+.client-gallery .photo-viewer__bottomline button {
+  color: rgba(243, 237, 226, 0.5);
+}
+
+.client-gallery .photo-viewer__bottomline button:hover {
+  color: var(--gallery-ink);
+}
+
+.client-gallery .photo-viewer__bottomline button.is-favorited {
+  color: var(--accent);
+}
+
+.client-gallery .client-display {
+  font-family: Georgia, 'Times New Roman', serif;
+}
+
+/* Client gallery - responsive */
+@media (max-width: 700px) {
+  .client-gallery__nav {
+    padding: 16px;
+  }
+
+  .client-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .client-hero__copy {
+    padding: 28px 16px 16px;
+    order: 2;
+  }
+
+  .client-hero__cover {
+    min-height: 240px;
+    order: 1;
+  }
+
+  .client-section-heading {
+    padding: 16px 0;
+    margin: 0 16px;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .client-work-section {
+    padding: 0 16px;
+  }
+
+  .client-download-section {
+    padding: 24px 0;
+    margin: 0 16px;
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .client-download-button {
+    justify-self: start;
+  }
+
+  .client-footer {
+    padding: 20px 0;
+    margin: 0 16px;
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 16px;
+  }
+
+  .client-footer > div:first-child {
+    align-items: center;
+  }
+
+  .client-footer__links {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .photo-viewer__arrow--left,
+  .photo-viewer__arrow--right {
+    display: none;
+  }
+
+  .photo-viewer__image-wrap img {
+    max-height: 70vh;
+  }
+
+  .client-error {
+    padding: 24px 16px;
+  }
+
+  .client-lock-screen__brand {
+    padding: 16px;
+  }
+
+  .client-lock-screen__center {
+    padding: 24px 16px;
+  }
+
+  .client-password-form {
+    width: 100%;
+  }
+}
+
+/* Settings page responsive */
 @media (max-width: 700px) {
   .settings-layout {
     grid-template-columns: 1fr;
@@ -4461,3 +4230,86 @@ a {
     grid-column: auto;
   }
 }
+
+/* Root landing page */
+.root-shell {
+  display: flex;
+  min-height: 100svh;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  background-image: radial-gradient(circle at 50% 40%, rgba(188, 155, 122, 0.05) 0%, transparent 60%);
+}
+
+.root-shell__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 16px;
+  padding: 40px 24px;
+}
+
+.root-shell__mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--accent);
+  color: var(--bg);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.root-shell__title {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(36px, 6vw, 64px);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin: 0;
+  color: var(--fg);
+}
+
+.root-shell__lede {
+  font-size: 13px;
+  color: var(--fg-secondary);
+  line-height: 1.6;
+  max-width: 360px;
+  margin: 4px 0 8px;
+}
+
+.root-shell__actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+@media (max-width: 640px) {
+  .root-shell__actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .root-shell__actions .platform-button {
+    justify-content: center;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
\ No newline at end of file