diff --git a/public/style.css b/public/style.css
index a378e16..24e6bb3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -167,3 +167,46 @@ ul.plain li:last-child { border-bottom: none; }
 .rail-input { width:100%; resize:none; background:#0c0e14; color:#c9d1e0; border:1px solid #262b38; border-radius:8px; padding:7px 9px; }
 .err { color:#e08a8a; font-size:12px; }
 #shell.rail-collapsed .rail-chat { display:none; }
+
+/* ===== Sacred Valley (Plan 6) ===== */
+:root {
+  --lb: #7dd3d8;                 /* Little Blue cyan */
+  /* reserved for a future agent-output phase — unused now:
+     --hue-dross: #ff4f2e; --hue-yerin: #c45a4a; --hue-orthos: #6fa86a; */
+}
+#sv-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: start; }
+.sv-card { grid-column: span 2; }                /* m default */
+.sv-card[data-size="s"] { grid-column: span 2; }
+.sv-card[data-size="m"] { grid-column: span 3; }
+.sv-card[data-size="l"] { grid-column: span 6; }
+@media (max-width: 900px) { #sv-cards { grid-template-columns: 1fr; } .sv-card { grid-column: 1 / -1 !important; } }
+
+.sv-card {
+  position: relative; border: 1px solid #2c242a; border-radius: 10px; padding: 16px 18px;
+  background: radial-gradient(120% 90% at 100% 0%, rgba(255,79,46,.05), transparent 55%),
+              linear-gradient(160deg, #16131a, #0f0d12);
+  box-shadow: inset 0 0 30px rgba(255,79,46,.015);
+  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
+}
+.sv-card::after {
+  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
+  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 1px, transparent 1px 9px);
+  mix-blend-mode: overlay;
+}
+.sv-card:hover {
+  border-color: #4a2c28; transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 46px rgba(255,79,46,.06), 0 0 0 1px rgba(255,79,46,.10);
+}
+.sv-card.dragging { opacity: .5; }
+.sv-card.drag-over { border-color: var(--accent); }
+.sv-card-title {
+  font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
+  color: var(--text); padding-bottom: 7px; margin-bottom: 12px;
+  border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--accent), transparent 60%) 1;
+  cursor: grab;
+}
+.sv-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; margin: 7px 0; }
+.sv-row .k { color: var(--muted); letter-spacing: .04em; }
+.sv-bar { height: 5px; border-radius: 3px; background: #221820; overflow: hidden; margin-top: 3px; }
+.sv-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: box-shadow .35s; }
+.sv-card:hover .sv-bar > i { box-shadow: 0 0 9px rgba(255,79,46,.55); }