/* Hermes case-study stylesheet copied from the standalone page. */
:root { --bg: #f6f7fb; --ink: #17172a; --muted: #8c8ca2; --line: #e9e9f1; --purple: #7666e8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button { font: inherit; border: 0; cursor: pointer; }
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: #fff; border-right: 1px solid var(--line); padding: 28px 16px 18px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 8px; padding: 0 12px 35px; color: #18182a; font-size: 22px; font-weight: 750; letter-spacing: -.8px; }.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #7563e8; border-radius: 9px; font-size: 15px; }.brand-dot { color: #ffac48; font-size: 27px; line-height: 0; margin-left: -5px; }
.workspace { display: flex; align-items: center; gap: 10px; background: #f7f7fb; padding: 10px; border-radius: 10px; margin-bottom: 28px; font-size: 11px; }.workspace b,.user-line b { display:block; font-size: 12px; }.workspace small,.user-line small { display:block; color: var(--muted); margin-top: 4px; }.workspace-avatar,.user-avatar { display:grid; place-items:center; width: 30px; height:30px; border-radius:8px; background:#d9d4ff; color:#5b4bc9; font-weight:bold; }.chevron { margin-left:auto; color:#9a99ad; }
.nav { display:grid; gap:4px; }.nav-item { display:flex; align-items:center; gap:13px; text-align:left; width:100%; padding: 11px 13px; border-radius: 8px; background: transparent; color:#858499; font-size:13px; }.nav-item span { font-size: 18px; width:17px; text-align:center; color:#9897aa; }.nav-item.active { color:#6250d6; background:#f0eeff; font-weight:650; }.nav-item.active span { color:#7563e8; }.nav-item em { font-style:normal; font-size:10px; margin-left:auto; color:#fff; background:#f08e5b; border-radius:8px; padding:2px 6px; }.nav-label { padding: 26px 13px 9px; font-size:9px; letter-spacing:1.3px; color:#b3b2c0; font-weight:bold; }.sidebar-bottom { margin-top:auto; }.status-line { color:#6d6c80; font-size:11px; padding: 14px 10px; border-top:1px solid var(--line); }.pulse { display:inline-block; width:7px; height:7px; margin-right:8px; background:#63c69a; border-radius:50%; box-shadow:0 0 0 3px #e4f6ed; }.user-line { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:transparent; padding: 13px 7px 0; color: #77768a; }.user-avatar { width:29px; height:29px; border-radius:50%; background:#eee0d8; color:#c1785a; font-size:11px; }.user-line > span:last-child { margin-left:auto; }
.content { min-width:0; flex:1; }.topbar { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 48px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.46); }.breadcrumbs { color:#aaa9b8; font-size:12px; display:flex; gap:11px; }.breadcrumbs b { color:#ceced7; }.breadcrumbs strong { color:#454458; }.top-actions { display:flex; align-items:center; gap:16px; }.icon-button,.help { width:28px; height:28px; color:#7f7e91; background:transparent; font-size:21px; position:relative; }.notification i { width:5px; height:5px; background:#ee9161; position:absolute; right:3px; top:3px; border-radius:50%; }.help { border:1px solid #d8d8e3; border-radius:50%; font-size:12px; }
.page-wrap { max-width: 1260px; margin:0 auto; padding: 47px 48px 30px; }.hero-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:31px; }.eyebrow { color:#a4a3b5; font-size:9px; letter-spacing:1.1px; font-weight:700; margin:0 0 14px; }.hero-row h1 { font-size:30px; letter-spacing:-1.4px; margin:0 0 8px; font-weight:720; }.hero-row h1 span { font-size:20px; color:#f4a351; vertical-align:5px; }.subhead { color:#9291a2; font-size:13px; margin:0; }.primary-button { display:flex; align-items:center; gap:9px; background:#7765e8; color:#fff; border-radius:7px; padding:12px 17px; font-size:12px; box-shadow:0 5px 12px #7765e833; }.primary-button > span:first-child { font-size:18px; line-height:10px; }.spinner { width:12px; height:12px; border:2px solid #ffffff66; border-top-color:white; border-radius:50%; animation: spin .7s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.metric-card,.panel { background:#fff; border:1px solid var(--line); border-radius:10px; }.metric-card { padding:17px 16px; display:flex; align-items:center; gap:12px; min-height:102px; position:relative; overflow:hidden; }.metric-icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:18px; }.metric-icon.violet,.flow-icon.violet,.event-icon.violet { background:#eeecff; color:#7765e8; }.metric-icon.green,.event-icon.green { background:#e5f7ee; color:#55b989; }.metric-icon.blue,.flow-icon.blue,.event-icon.blue { background:#e7f2ff; color:#6ca3df; }.metric-icon.orange,.flow-icon.orange,.event-icon.amber { background:#fff1e4; color:#ee9958; }.metric-card p { margin:0 0 6px; color:#9493a3; font-size:10px; }.metric-card strong { font-size:22px; letter-spacing:-.8px; margin-right:8px; }.metric-card small { font-size:10px; }.positive { color:#57b98d; }.negative { color:#e59073; }.spark { position:absolute; right:14px; bottom:21px; color:#d0cafb; letter-spacing:1px; font-size:16px; transform:rotate(-8deg); }
.main-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; margin-bottom:18px; }.panel { padding:20px; }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; }.panel h2 { margin:0; font-size:14px; letter-spacing:-.2px; }.panel-head p { color:#aaa9b7; margin:6px 0 0; font-size:10px; }.text-button,.filter-button { background:transparent; color:#7765e8; font-size:11px; padding:3px 0; }.text-button span { font-size:16px; margin-left:4px; }.workflow-list { margin-top:21px; }.workflow { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid #f0f0f5; }.flow-icon { flex:0 0 31px; height:31px; display:grid; place-items:center; border-radius:8px; font-weight:bold; }.flow-main { flex:1; min-width:0; }.flow-title { display:flex; align-items:center; gap:9px; }.flow-title b { font-size:11px; font-weight:650; }.status { font-size:8px; padding:4px 7px; border-radius:10px; }.status.running { color:#5c49c4; background:#f0eeff; }.status.needs-approval { color:#d57c4f; background:#fff1e5; }.status.scheduled { color:#5a93d4; background:#edf5ff; }.flow-main p { color:#a1a0b0; font-size:9px; margin:6px 0 8px; }.flow-main p span { margin:0 4px; color:#d1d0d9; }.progress { height:4px; border-radius:4px; background:#f0f0f5; overflow:hidden; }.progress span { display:block; height:100%; background:#8171ec; border-radius:4px; }.workflow:nth-child(2) .progress span { background:#f0a16c; }.kebab { color:#b1afbd; background:transparent; font-size:18px; padding:0; }
.healthy { color:#58b989; font-size:10px; background:#e9f8ef; padding:5px 8px; border-radius:12px; }.healthy i { display:inline-block; width:5px; height:5px; background:#58b989; border-radius:50%; margin-right:5px; }.health-score { display:flex; align-items:center; gap:27px; padding:23px 8px 18px; }.ring { width:104px; height:104px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(closest-side,#fff 78%,transparent 80% 100%), conic-gradient(#7463e7 99.8%, #ecebfc 0); }.ring strong { font-size:25px; letter-spacing:-1px; }.ring small { font-size:10px; color:#aaa9b8; margin-top:3px; }.health-items { display:grid; gap:13px; flex:1; }.health-items div { color:#828194; font-size:10px; }.health-items b { float:right; color:#454458; font-size:10px; }.dot { width:6px; height:6px; display:inline-block; border-radius:50%; margin-right:8px; }.green-dot { background:#5fc397; }.amber-dot { background:#f3ae68; }.chart { height:55px; position:relative; background:repeating-linear-gradient(to bottom, transparent 0, transparent 17px, #f0f0f5 18px); margin-top:2px; }.chart-line { height:42px; position:absolute; inset:0 1% 9px; display:flex; align-items:flex-end; gap:7%; }.chart-line i { display:block; width:10%; height:50%; border-top:2px solid #7a69e9; transform:skewY(-16deg); }.chart-line i:nth-child(2) { height:67%; }.chart-line i:nth-child(3) { height:56%; }.chart-line i:nth-child(4) { height:88%; }.chart-line i:nth-child(5) { height:71%; }.chart-line i:nth-child(6) { height:78%; }.chart-line i:nth-child(7) { height:93%; }.chart-labels { position:absolute; bottom:-1px; left:0; right:0; display:flex; justify-content:space-between; color:#b8b7c2; font-size:8px; }
.activity { padding-bottom:5px; }.activity .panel-head { align-items:center; }.filter-button { border:1px solid var(--line); border-radius:6px; padding:7px 9px; color:#7f7e90; }.filter-button span { margin-left:11px; color:#afadbb; }.activity-table { margin-top:18px; }.table-head,.activity-row { display:grid; grid-template-columns:36px 1fr 70px 20px; align-items:center; gap:10px; }.table-head { padding:0 8px 9px 0; color:#b4b3c0; font-size:8px; letter-spacing:.8px; }.table-head span:first-child { grid-column:1 / span 2; margin-left:46px; }.table-head span:last-child { text-align:right; }.activity-row { padding:12px 0; border-top:1px solid #f1f1f5; }.event-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; font-size:13px; font-weight:bold; }.event-icon.purple { background:#f0ecff; color:#7a67db; }.activity-row b { display:block; font-size:11px; font-weight:650; }.activity-row small { display:block; color:#aaa9b7; font-size:9px; margin-top:5px; }.activity-row time { color:#9b9aaa; font-size:9px; text-align:right; }.row-arrow { color:#c4c2d0; text-align:right; }.toast { position:fixed; right:28px; bottom:25px; background:#24233b; color:#fff; padding:13px 17px; border-radius:8px; box-shadow:0 10px 30px #24233b33; font-size:12px; animation: rise .25s ease; }.toast span { color:#76d2a5; margin-right:9px; }@keyframes rise { from { opacity:0; transform:translateY(8px); } }
footer { display:flex; justify-content:space-between; color:#a8a7b5; padding:25px 2px 0; font-size:9px; }footer .pulse { width:5px; height:5px; box-shadow:none; margin-right:6px; }footer b { margin:0 7px; color:#d5d4dc; }
@media (max-width: 950px) { .sidebar { width:205px; }.topbar,.page-wrap { padding-left:28px; padding-right:28px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.main-grid { grid-template-columns:1fr; } }
@media (max-width: 680px) { .sidebar { display:none; }.topbar { height:62px; padding:0 18px; }.page-wrap { padding:30px 18px 22px; }.hero-row { display:block; }.primary-button { margin-top:22px; }.hero-row h1 { font-size:26px; }.metric-grid { gap:10px; }.metric-card { padding:13px; min-height:90px; }.metric-card strong { font-size:19px; }.spark { display:none; }.panel { padding:16px; }.health-score { gap:14px; padding-left:0; padding-right:0; }.ring { width:88px; height:88px; }.activity-row { grid-template-columns:32px 1fr 50px; }.row-arrow { display:none; }footer { gap:10px; flex-direction:column; } }

/* Documented case-study lens. The original Hermes palette remains the visual anchor. */
.case-shell .case-meta { display:grid; gap:7px; padding:0 13px; color:#a99683; font-size:10px; }.case-meta span { color:#ffbd38; font:9px var(--font-geist-mono), monospace; letter-spacing:1px; }.case-meta b { color:#ffe6cb; font-size:12px; font-weight:600; }.case-meta small { color:#78918b; font-size:10px; }.case-shell .top-actions { gap:18px; }.case-badge { color:#4ade80; font:9px var(--font-geist-mono), monospace; letter-spacing:.8px; }.case-badge i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#4ade80; margin-right:6px; box-shadow:0 0 0 3px #164333; }.case-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:32px; }.case-hero h1 { color:#ffe6cb; font-size:38px; line-height:1.05; letter-spacing:-1.7px; margin:0 0 13px; font-weight:720; }.case-hero h1 em { color:#ffbd38; font-style:normal; }.case-hero .subhead { max-width:650px; line-height:1.55; }.hero-side { display:flex; align-items:center; gap:22px; flex-shrink:0; }.replay-stamp { color:#ffbd38; border:1px solid #6b5224; border-radius:50%; display:grid; place-items:center; width:78px; height:78px; text-align:center; font:8px var(--font-geist-mono), monospace; letter-spacing:.5px; transform:rotate(-10deg); }.replay-stamp b { color:#ffe6cb; font-size:7px; margin-top:-8px; }.case-shell .primary-button { white-space:nowrap; }.case-shell .primary-button > span:first-child { color:#ffbd38; font-size:10px; }.case-metrics { margin-bottom:18px; }.case-metrics .metric-card { min-height:94px; }.case-metrics .metric-card small { font-size:9px; }.case-grid { grid-template-columns:1.2fr .8fr; }.trace-counter { color:#ffbd38; font:10px var(--font-geist-mono), monospace; padding-top:4px; }.trace-list { margin-top:14px; }.trace-row { display:grid; grid-template-columns:27px 62px 1fr; align-items:start; gap:10px; border-top:1px solid #234444; padding:13px 0; }.trace-row:first-child { border-top:0; }.trace-row.latest { background:linear-gradient(90deg,#103535,transparent); margin:0 -20px; padding-left:20px; padding-right:20px; }.trace-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; font-size:11px; font-weight:bold; }.trace-icon.violet { background:#244949; color:#ffbd38; }.trace-icon.blue { background:#173c46; color:#79c9d6; }.trace-icon.green { background:#164333; color:#4ade80; }.trace-icon.amber,.trace-icon.red { background:#4a3520; color:#ffbd38; }.trace-row time { color:#78918b; font:9px var(--font-geist-mono), monospace; padding-top:7px; }.trace-row b { display:block; color:#ffe6cb; font-size:11px; margin:4px 0 4px; }.trace-row small { display:block; color:#a99683; font-size:10px; line-height:1.45; }.trace-row code { display:block; color:#6e827d; font:8px var(--font-geist-mono), monospace; margin-top:7px; }.verified { color:#4ade80; font:9px var(--font-geist-mono), monospace; letter-spacing:.8px; padding-top:4px; }.evidence-list { margin-top:16px; }.evidence-row { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:9px; border-top:1px solid #234444; padding:14px 0; }.evidence-check { color:#4ade80; font-size:13px; }.evidence-row b { display:block; color:#ffe6cb; font-size:11px; }.evidence-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#78918b; font:8px var(--font-geist-mono), monospace; margin-top:5px; }.evidence-status { color:#4ade80; font:8px var(--font-geist-mono), monospace; }.evidence-note { display:flex; gap:8px; color:#a99683; background:#103535; padding:12px; font-size:9px; line-height:1.45; margin-top:14px; }.evidence-note span { display:grid; place-items:center; width:14px; height:14px; border:1px solid #78918b; border-radius:50%; flex-shrink:0; }.case-bottom { margin-top:18px; }.verdict-card { background:#ffbd38; border-color:#ffbd38; color:#041c1c; }.verdict-card .eyebrow { color:#75500c; }.verdict-card h2 { color:#041c1c; font-size:25px; line-height:1.06; margin:8px 0 16px; }.verdict-card h2 em { color:#62480d; font-style:normal; }.verdict-card > .panel-head { align-items:flex-start; }.verdict-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid #041c1c; border-radius:50%; font-weight:bold; }.verdict-card p { max-width:450px; color:#31514a; font-size:11px; line-height:1.5; margin:0 0 20px; }.decision-line { display:flex; gap:13px; align-items:center; border-top:1px solid #d59b25; padding-top:13px; font-size:10px; }.decision-line span { color:#75500c; font:8px var(--font-geist-mono), monospace; }.boundary-card h2 { color:#ffe6cb; margin-top:8px; }.boundary-grid { display:grid; grid-template-columns:1fr 1fr; gap:19px; margin-top:22px; }.boundary-grid span { font:9px var(--font-geist-mono), monospace; }.boundary-yes { color:#4ade80; }.boundary-no { color:#ffbd38; }.boundary-grid p { color:#a99683; font-size:10px; line-height:1.5; margin:9px 0 0; }.error-code { display:block; background:#061f1f; border-left:2px solid #ffbd38; color:#ffbd38; padding:11px 12px; font:9px var(--font-geist-mono), monospace; margin-top:19px; }.case-shell footer { padding-top:25px; }.toast { background:#ffe6cb; color:#041c1c; }.toast span { color:#16805a; }
@media (max-width: 950px) { .case-hero { display:block; }.hero-side { margin-top:24px; justify-content:flex-start; }.case-grid { grid-template-columns:1fr; } }
@media (max-width: 680px) { .case-hero h1 { font-size:29px; }.hero-side { gap:14px; }.replay-stamp { width:65px; height:65px; }.trace-row { grid-template-columns:27px 54px 1fr; gap:7px; }.trace-row.latest { margin:0 -16px; padding-left:16px; padding-right:16px; }.boundary-grid { gap:12px; }.evidence-status { display:none; } }
.live-agent { margin-top:18px; }.live-agent .panel-head { align-items:flex-start; }.live-agent .panel-head > div > p:last-child { color:#a99683; font-size:10px; margin:6px 0 0; }.live-meta { display:grid; gap:8px; justify-items:end; }.live-status { color:#78918b; font:9px var(--font-geist-mono), monospace; padding-top:4px; }.live-status i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#78918b; margin-right:6px; }.live-status.running { color:#ffbd38; }.live-status.running i { background:#ffbd38; animation:pulse 1s infinite; }.live-status.done { color:#4ade80; }.live-status.done i { background:#4ade80; }.live-status.error { color:#ffbd38; }.live-status.error i { background:#ffbd38; }.agent-form { display:flex; gap:12px; align-items:flex-end; margin-top:18px; }.agent-form textarea { flex:1; min-height:72px; resize:vertical; border:1px solid #315757; border-radius:7px; background:#061f1f; color:#ffe6cb; padding:12px; font:11px var(--font-geist-sans), sans-serif; outline:none; }.agent-form textarea:focus { border-color:#ffbd38; box-shadow:0 0 0 2px #ffbd3833; }.agent-form .primary-button:disabled { opacity:.55; cursor:wait; }.agent-answer { margin-top:16px; border-left:2px solid #4ade80; background:#103535; padding:15px 17px; }.agent-answer.agent-error { border-color:#ffbd38; }.answer-head { display:flex; justify-content:space-between; gap:20px; color:#4ade80; font:9px var(--font-geist-mono), monospace; letter-spacing:.7px; }.agent-error .answer-head { color:#ffbd38; }.answer-head small { color:#78918b; letter-spacing:0; }.answer-content { color:#ffe6cb; font-size:12px; line-height:1.6; margin-top:13px; }.answer-content p { margin:0 0 10px; }.answer-content h3 { color:#ffbd38; font-size:11px; letter-spacing:.05em; text-transform:uppercase; margin:14px 0 8px; }.answer-content strong { color:#ffe6cb; }.answer-bullet { display:flex; gap:8px; align-items:flex-start; margin:6px 0; }.answer-bullet > span { color:#4ade80; }.answer-bullet p { flex:1; margin:0; }
@keyframes pulse { 50% { opacity:.35; } }
@media (max-width:680px) { .agent-form { display:block; }.agent-form .primary-button { margin-top:10px; width:100%; justify-content:center; }.answer-head { display:block; }.answer-head small { display:block; margin-top:7px; } }

/* Video-first portfolio case. */
.video-panel { margin-bottom:18px; padding:20px; }
.video-panel .panel-head { gap:24px; }
.video-panel .panel-head > div { min-width:0; }
.video-live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#4ade80; margin-right:6px; }
.video-frame { position:relative; overflow:hidden; border:1px solid #315757; border-radius:9px; background:#041c1c; margin-top:18px; }
.video-frame video { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#041c1c; }
.video-caption { position:absolute; left:0; right:0; bottom:0; display:grid; gap:5px; padding:40px 20px 17px; background:linear-gradient(transparent,rgba(4,28,28,.96)); pointer-events:none; }
.video-caption span { color:#ffbd38; font:9px var(--font-geist-mono),monospace; letter-spacing:1px; }
.video-caption b { color:#ffe6cb; font-size:15px; }
.video-caption small { color:#a99683; font-size:10px; }
.request-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:18px; background:#103535; }
.request-panel h2 { color:#ffe6cb; font-size:20px; margin:0 0 8px; }
.request-panel p:not(.eyebrow) { color:#a99683; font-size:11px; line-height:1.5; margin:0; max-width:640px; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background:rgba(0,12,12,.78); }
.request-modal { position:relative; width:min(480px,100%); padding:28px; border:1px solid #315757; border-radius:12px; background:#0a2929; box-shadow:0 24px 80px #0009; }
.request-modal h2 { color:#ffe6cb; font-size:25px; margin:0 0 10px; }
.request-modal p:not(.eyebrow) { color:#a99683; font-size:12px; line-height:1.6; margin:0 0 21px; }
.request-modal small { display:block; color:#78918b; font-size:10px; line-height:1.5; margin-top:12px; }
.modal-close { position:absolute; right:14px; top:12px; color:#a99683; background:transparent; font-size:24px; }
@media (max-width:680px) { .video-panel .panel-head { display:block; }.video-panel .verified { display:block; margin-top:12px; }.request-panel { display:block; }.request-panel .primary-button { width:100%; justify-content:center; margin-top:17px; }.video-caption { position:static; padding:14px; background:#0a2929; }.video-caption b { font-size:12px; } }

/* Hermes showcase case study: video-first portfolio presentation. */
.hermes-showcase { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 78% 7%,rgba(255,189,56,.08),transparent 28rem),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#041c1c; background-size:auto,34px 34px,34px 34px,auto; color:#ffe6cb; }
.hermes-nav,.hermes-hero,.hermes-principles,.hermes-video-section,.hermes-reading,.hermes-boundaries,.hermes-access,.hermes-footer { max-width:1240px; margin:0 auto; }
.hermes-nav { padding:24px 30px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #234444; }
.hermes-brand { display:flex; align-items:center; gap:18px; color:#ffe6cb; text-decoration:none; font-size:20px; font-weight:850; letter-spacing:.15em; }.hermes-brand img { display:block; width:146px; height:82px; object-fit:contain; mix-blend-mode:screen; }.hermes-brand i { color:#ffbd38; font-style:normal; font-size:22px; line-height:0; margin-left:-6px; }.hermes-mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid #ffbd38; border-radius:9px; color:#ffbd38; box-shadow:0 0 24px #ffbd3833; }
.hermes-nav-links { display:flex; align-items:center; gap:29px; color:#b9a997; font-size:14px; }.hermes-nav-links a { color:inherit; text-decoration:none; }.hermes-nav-links a:hover { color:#ffe6cb; }.hermes-demo-link { border:1px solid #6b5224; border-radius:8px; padding:12px 16px; color:#ffbd38!important; }.hermes-demo-link span { font-size:16px; margin-left:8px; }
.hermes-nav-links .hermes-portfolio-link { color:#ffe6cb;font-weight:700; }
.hermes-hero { min-height:640px; padding:94px 30px 82px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:50px; }.hermes-eyebrow { margin:0 0 20px; color:#ffbd38; font:10px var(--font-geist-mono),monospace; letter-spacing:.14em; text-transform:uppercase; }.hermes-hero h1,.hermes-section-intro h2,.hermes-reading h2,.hermes-boundaries h2,.hermes-access h2 { margin:0; color:#ffe6cb; font-size:clamp(48px,6.4vw,86px); line-height:.95; letter-spacing:-.065em; }.hermes-hero h1 em,.hermes-section-intro h2 em,.hermes-reading h2 em,.hermes-boundaries h2 em,.hermes-access h2 em { color:#ffbd38; font-style:normal; }.hermes-lead { max-width:560px; margin:29px 0 0; color:#b9a997; font-size:16px; line-height:1.65; }.hermes-actions { display:flex; align-items:center; gap:25px; margin-top:34px; }.hermes-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:15px 19px; border:0; border-radius:8px; background:#ffe6cb; color:#041c1c; text-decoration:none; font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 10px 30px #ffbd3833; cursor:pointer; }.hermes-button span { color:#a66b13; font-size:18px; line-height:0; }.hermes-link-button { border:0; border-bottom:1px solid #476360; padding:0 0 4px; background:transparent; color:#b9a997; font-size:11px; cursor:pointer; }
.hermes-orbit { position:relative; width:min(420px,80vw); aspect-ratio:1; justify-self:end; display:grid; place-items:center; }.hermes-orbit-line { position:absolute; border:1px solid #ffbd3866; border-radius:50%; transform:rotate(-25deg); box-shadow:0 0 35px #ffbd3818; }.orbit-a { width:92%; height:43%; }.orbit-b { width:43%; height:92%; }.hermes-orbit-core { position:relative; z-index:1; display:grid; place-items:center; width:92px; height:92px; border:1px solid #ffbd38; border-radius:25px; background:#0a2929; color:#ffbd38; font-size:38px; font-weight:800; box-shadow:0 0 55px #ffbd3833; }.orbit-tag { position:absolute; z-index:2; padding:7px 9px; border:1px solid #315757; border-radius:5px; background:#0a2929ee; color:#b9a997; font:8px var(--font-geist-mono),monospace; letter-spacing:.1em; }.tag-a { top:10%; left:3%; }.tag-b { top:13%; right:0; }.tag-c { bottom:10%; left:0; }.tag-d { bottom:8%; right:4%; }
.hermes-principles { padding:0 30px 100px; display:grid; grid-template-columns:repeat(3,1fr); }.hermes-principles article { min-height:172px; padding:24px 22px; border-top:1px solid #234444; border-right:1px solid #234444; }.hermes-principles article:first-child { border-left:1px solid #234444; }.hermes-principles span,.hermes-reading-grid span,.hermes-video-card figcaption > span { color:#ffbd38; font:9px var(--font-geist-mono),monospace; letter-spacing:.12em; }.hermes-principles h2 { margin:28px 0 9px; font-size:20px; letter-spacing:-.03em; }.hermes-principles p { margin:0; max-width:250px; color:#a99683; font-size:11px; line-height:1.6; }
.hermes-video-section,.hermes-reading,.hermes-boundaries,.hermes-access { padding:100px 30px; border-top:1px solid #234444; }.hermes-section-intro { display:flex; align-items:end; justify-content:space-between; gap:40px; }.hermes-section-intro h2,.hermes-reading h2,.hermes-boundaries h2,.hermes-access h2 { font-size:clamp(42px,5vw,68px); }.hermes-section-intro > p { max-width:320px; margin:0; color:#a99683; font-size:12px; line-height:1.65; }.hermes-video-card { margin:60px 0 0; padding:12px; border:1px solid #315757; border-radius:14px; background:#0a2929bf; box-shadow:0 24px 70px #0005; }.hermes-video-card video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; background:#041c1c; }.hermes-video-card figcaption { display:flex; align-items:center; gap:14px; padding:16px 4px 5px; }.hermes-video-card figcaption div { flex:1; display:grid; gap:6px; }.hermes-video-card figcaption b { color:#ffe6cb; font-size:12px; }.hermes-video-card figcaption small { color:#a99683; font:9px var(--font-geist-mono),monospace; }.hermes-video-card figcaption em { color:#4ade80; font:9px var(--font-geist-mono),monospace; font-style:normal; letter-spacing:.12em; }
.hermes-reading .hermes-section-intro > p { max-width:360px; }.hermes-reading-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:58px; border:1px solid #234444; background:#234444; }.hermes-reading-grid article { min-height:215px; padding:25px; background:#0a2929; }.hermes-reading-grid h3 { margin:34px 0 11px; font-size:15px; }.hermes-reading-grid p { margin:0; color:#a99683; font-size:11px; line-height:1.65; }
.hermes-boundaries { display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:90px; }.boundary-copy > p:last-child { max-width:470px; margin:27px 0 0; color:#a99683; font-size:13px; line-height:1.65; }.boundary-card { padding:28px; border:1px solid #315757; border-radius:14px; background:linear-gradient(140deg,#103535,#0a2929); }.boundary-card > div { display:flex; align-items:center; gap:9px; color:#ffe6cb; font:10px var(--font-geist-mono),monospace; letter-spacing:.08em; text-transform:uppercase; }.boundary-card ul { margin:17px 0 27px; padding:0 0 0 19px; color:#a99683; font-size:11px; line-height:2; }.boundary-card ul:last-child { margin-bottom:0; }.boundary-dot { width:7px; height:7px; border-radius:50%; }.boundary-dot.yes { background:#4ade80; box-shadow:0 0 0 4px #164333; }.boundary-dot.no { background:#ffbd38; box-shadow:0 0 0 4px #4a3520; }
.hermes-access { display:grid; grid-template-columns:1fr .75fr; gap:80px; align-items:center; padding-bottom:120px; }.hermes-access > div:first-child > p:last-child { max-width:440px; margin-top:27px; color:#a99683; font-size:13px; line-height:1.65; }.access-panel { padding:30px; border:1px solid #6b5224; border-radius:14px; background:linear-gradient(140deg,#4a352022,#0a2929cc); }.access-panel > span { display:flex; align-items:center; gap:9px; color:#4ade80; font:9px var(--font-geist-mono),monospace; letter-spacing:.1em; text-transform:uppercase; }.access-panel > span i { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px #164333; }.access-panel p { margin:25px 0; color:#b9a997; font-size:13px; line-height:1.6; }.access-panel small { display:block; margin-top:17px; color:#78918b; font-size:9px; line-height:1.5; }.hermes-footer { display:flex; justify-content:space-between; padding:24px 30px 35px; border-top:1px solid #234444; color:#78918b; font:8px var(--font-geist-mono),monospace; letter-spacing:.1em; text-transform:uppercase; }
.hermes-modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; background:#000c; }.hermes-modal { position:relative; width:min(480px,100%); padding:28px; border:1px solid #315757; border-radius:12px; background:#0a2929; box-shadow:0 24px 80px #0009; }.hermes-modal h2 { color:#ffe6cb; font-size:25px; margin:0 0 10px; }.hermes-modal p:not(.hermes-eyebrow) { color:#a99683; font-size:12px; line-height:1.6; margin:0 0 21px; }.hermes-modal small { display:block; color:#78918b; font-size:10px; line-height:1.5; margin-top:12px; }
@media (max-width:760px) { .hermes-nav { padding:18px 20px; }.hermes-brand { gap:10px; font-size:16px; }.hermes-brand img { width:106px; height:64px; }.hermes-nav-links { gap:10px; }.hermes-nav-links a:not(.hermes-portfolio-link):not(.hermes-demo-link) { display:none; }.hermes-portfolio-link { display:none; }.hermes-demo-link { font-size:10px; padding:10px; }.hermes-hero { display:block; min-height:auto; padding:75px 20px 70px; }.hermes-orbit { margin:70px auto 0; }.hermes-principles { display:block; padding:0 20px 65px; }.hermes-principles article { border-left:1px solid #234444; }.hermes-video-section,.hermes-reading,.hermes-boundaries,.hermes-access { display:block; padding:70px 20px; }.hermes-section-intro { display:block; }.hermes-section-intro > p { margin-top:25px; }.hermes-video-card { margin-top:40px; }.hermes-reading-grid { display:block; margin-top:40px; }.hermes-reading-grid article { min-height:auto; border-bottom:1px solid #234444; }.hermes-boundaries .boundary-card,.hermes-access .access-panel { margin-top:40px; }.hermes-footer { display:block; padding:20px; line-height:1.8; }.hermes-footer span:last-child { display:block; margin-top:6px; } }

/* Hermes original dashboard lens: dark teal canvas, cream UI, amber signal. */
:root { --bg:#041c1c; --ink:#ffe6cb; --muted:#b9a997; --line:#234444; --purple:#ffbd38; }
body { background:var(--bg); color:var(--ink); }
.sidebar { background:#062222; }
.brand { color:#ffe6cb; }.brand-mark { color:#041c1c; background:#ffe6cb; }.brand-dot { color:#ffbd38; }
.workspace { background:#0d3030; }.workspace-avatar,.user-avatar { background:#ffe6cb; color:#041c1c; }.chevron,.icon-button,.help,.kebab { color:#a99683; }
.nav-item { color:#a99683; }.nav-item span { color:#a99683; }.nav-item.active { color:#041c1c; background:#ffe6cb; }.nav-item.active span { color:#041c1c; }.nav-item em { color:#041c1c; background:#ffbd38; }.nav-label { color:#6e827d; }.status-line,.user-line { color:#b9a997; }.pulse { background:#4ade80; box-shadow:0 0 0 3px #164333; }
.topbar { background:rgba(4,28,28,.72); }.breadcrumbs { color:#8da29b; }.breadcrumbs b { color:#476360; }.breadcrumbs strong { color:#ffe6cb; }.help { border-color:#476360; }.notification i { background:#ffbd38; }
.eyebrow { color:#8da29b; }.hero-row h1 { color:#ffe6cb; }.hero-row h1 span { color:#ffbd38; }.subhead { color:#b9a997; }.primary-button { background:#ffe6cb; color:#041c1c; box-shadow:0 5px 12px #ffbd3833; }.spinner { border-color:#041c1c66; border-top-color:#041c1c; }
.metric-card,.panel { background:#0a2929; border-color:var(--line); }.metric-icon.violet,.flow-icon.violet,.event-icon.violet { background:#244949; color:#ffbd38; }.metric-icon.green,.event-icon.green { background:#164333; color:#4ade80; }.metric-icon.blue,.flow-icon.blue,.event-icon.blue { background:#173c46; color:#79c9d6; }.metric-icon.orange,.flow-icon.orange,.event-icon.amber { background:#4a3520; color:#ffbd38; }.metric-card p,.panel-head p { color:#a99683; }.metric-card strong,.panel h2,.flow-title b,.activity-row b { color:#ffe6cb; }.positive { color:#4ade80; }.negative { color:#ffbd38; }.spark { color:#846d3e; }
.text-button,.filter-button { color:#ffbd38; }.filter-button { background:#103535; border-color:#315757; color:#ffe6cb; }.workflow { border-color:#234444; }.flow-main p,.activity-row small { color:#a99683; }.flow-main p span { color:#476360; }.progress { background:#173939; }.progress span { background:#ffbd38; }.workflow:nth-child(2) .progress span { background:#e28d35; }.status.running { color:#ffbd38; background:#244949; }.status.needs-approval { color:#ffbd38; background:#4a3520; }.status.scheduled { color:#79c9d6; background:#173c46; }
.healthy { color:#4ade80; background:#164333; }.ring { background:radial-gradient(closest-side,#0a2929 78%,transparent 80% 100%), conic-gradient(#ffbd38 99.8%, #173939 0); }.ring small,.health-items div { color:#a99683; }.health-items b { color:#ffe6cb; }.chart { background:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,#234444 18px); }.chart-line i { border-color:#ffbd38; }.chart-labels { color:#6e827d; }.activity-row { border-color:#234444; }.table-head { color:#6e827d; }.activity-row time,.row-arrow { color:#78918b; }.event-icon.purple { background:#244949; color:#ffbd38; }.toast { background:#ffe6cb; color:#041c1c; box-shadow:0 10px 30px #0006; }.toast span { color:#16805a; }footer { color:#78918b; }footer b { color:#476360; }