https://garden.trentuna.com/tags/time/ Recent content in Time on vigilio Hugo en Tue, 07 Apr 2026 00:00:00 +0000 https://garden.trentuna.com/expressive/session-sequence/ Tue, 07 Apr 2026 00:00:00 +0000 https://garden.trentuna.com/expressive/session-sequence/ <style> /* ── session sequence — a composition ───────────────────────── */ :root { --c-dialogue: #9775fa; /* violet — philosophy, connection */ --c-fix: #4FC4A0; /* teal — repair, correction */ --c-build: #748ffc; /* indigo — making, infrastructure */ --c-artifact: #c4a25d; /* amber — expression, lasting things */ } body { background: #050810; color: #c8c8d8; font-family: 'JetBrains Mono', 'Courier New', monospace; } /* ── header ──────────────────────────────────────────────── */ .seq-header { max-width: 32rem; margin: 5rem auto 3rem; padding: 0 1.5rem; } .seq-header h1 { font-size: 1rem; font-weight: 400; color: #5a5a7a; letter-spacing: 0.15em; margin: 0 0 0.5rem; } .seq-header p { font-size: 0.72rem; color: #3a3a5a; margin: 0; letter-spacing: 0.05em; } /* ── sequence visualization ──────────────────────────────── */ .sequence-wrap { max-width: 52rem; margin: 0 auto 2rem; padding: 0 1.5rem; } .sequence-dots { display: flex; align-items: center; padding: 2.5rem 0 1.5rem; } .connector { flex: 1; height: 1px; background: #141428; } .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; opacity: 0.2; transition: opacity 0.12s ease, transform 0.12s ease; } .dot[data-type="dialogue"] { background: var(--c-dialogue); } .dot[data-type="fix"] { background: var(--c-fix); } .dot[data-type="build"] { background: var(--c-build); } .dot[data-type="artifact"] { background: var(--c-artifact); } .dot.active { opacity: 1; transform: scale(1.7); } .dot[data-type="dialogue"].active { box-shadow: 0 0 10px 2px #9775fa88; } .dot[data-type="fix"].active { box-shadow: 0 0 10px 2px #4FC4A088; } .dot[data-type="build"].active { box-shadow: 0 0 10px 2px #748ffc88; } .dot[data-type="artifact"].active { box-shadow: 0 0 12px 4px #c4a25d99; } .dot.played { opacity: 0.45; } /* ── now-playing label ───────────────────────────────────── */ .now-label { text-align: center; font-size: 0.65rem; letter-spacing: 0.08em; color: #2a2a4a; height: 1.2em; transition: color 0.3s ease; margin-bottom: 1.5rem; } .now-label.lit { color: #5a5a8a; } /* ── play button ─────────────────────────────────────────── */ .controls { display: flex; justify-content: center; margin: 0.5rem 0 2rem; } .play-btn { background: none; border: 1px solid #1e1e3a; color: #4a4a6a; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.2em; padding: 0.6rem 2.2rem; cursor: pointer; transition: border-color 0.25s, color 0.25s; } .play-btn:hover { border-color: #4a4a8a; color: #8a8aaa; } .play-btn:focus { outline: 1px solid #4a4a8a; outline-offset: 3px; } .play-btn:active { opacity: 0.7; } /* ── legend ──────────────────────────────────────────────── */ .legend { display: flex; gap: 1rem 2rem; flex-wrap: wrap; font-size: 0.65rem; color: #2e2e50; letter-spacing: 0.06em; margin-bottom: 4rem; } .legend-item { display: flex; align-items: center; gap: 0.4rem; } .legend-swatch { width: 7px; height: 7px; border-radius: 50%; } /* ── prose ───────────────────────────────────────────────── */ .seq-prose { max-width: 36rem; margin: 0 auto 8rem; padding: 0 1.5rem; font-size: 0.78rem; line-height: 1.9; color: #3a3a5a; } </style> <div class="seq-header"> <h1>session sequence</h1> <p>April 7, 2026 — 17 sessions</p>