* { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #06090b;
      --surface: #0b1013;
      --border: #20292d;
      --border-hover: #333;
      --text: #fff;
      --text-secondary: #888;
      --text-muted: #555;
    }

    body {
      font-family: 'Inter Tight', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
      height: 100vh;
    }

    /* ==================== WORKFLOWS ==================== */
    #workflows { display: flex; padding: 0; position: relative; height: 100vh; overflow: hidden; }
    .wf-sidebar { width: 240px; min-width: 240px; background: #0b1013; border-right: 1px solid #20292d; overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; transition: width 0.2s, min-width 0.2s, padding 0.2s; }
    .wf-sidebar.collapsed { width: 0; min-width: 0; padding: 0; border-right: none; overflow: hidden; }
    .wf-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; margin-bottom: 4px; }
    .wf-sidebar-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
    .wf-sidebar-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 2px 6px; transition: color 0.15s; }
    .wf-sidebar-toggle:hover { color: var(--text); }
    .wf-expand-btn { background: #111; border: 1px solid #2a2a2a; border-radius: 5px; color: var(--text-muted); cursor: pointer; font-size: 10px; padding: 5px 8px; transition: all 0.15s; }
    .wf-expand-btn:hover { color: var(--text); background: #20292d; }
    .wf-sidebar-item { padding: 10px 16px; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; }
    .wf-sidebar-item:hover { background: rgba(255,255,255,0.03); color: var(--text); }
    .wf-sidebar-item.active { background: rgba(255,107,26,0.06); color: #dce3e6; border-left-color: #dce3e6; }
    .wf-sidebar-item .wf-item-agent { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .wf-sidebar-item .wf-item-example { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 0.3px; }
    .wf-add-item { padding: 10px 16px; font-size: 12px; color: #666; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; display: flex; align-items: center; gap: 8px; }
    .wf-add-item:hover { background: rgba(255,255,255,0.03); color: #999; }
    .wf-add-item svg { width: 14px; height: 14px; flex-shrink: 0; }
    .wf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
    .wf-modal { background: #0b1013; border: 1px solid #20292d; border-radius: 12px; padding: 28px; max-width: 460px; width: 90%; font-family: 'Inter Tight', sans-serif; position: relative; }
    .wf-modal h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; color: #e0e0e0; }
    .wf-modal p { font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 12px; }
    .wf-modal code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: #aaa; }
    .wf-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #555; font-size: 20px; cursor: pointer; }
    .wf-modal-close:hover { color: #fff; }
    .wf-main { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
    .wf-rubric-brand { position: absolute; top: 16px; left: 20px; z-index: 30; font-family: 'Inter Tight', sans-serif; }
    .wf-rubric-name { font-size: 27px; font-weight: 700; letter-spacing: 4px; color: #e0e0e0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    .wf-rubric-tagline { font-size: 16px; color: #555; margin-top: 2px; letter-spacing: 0.3px; }
    .wf-rubric-attribution { font-size: 10px; color: #444; margin-top: 4px; }
    .wf-rubric-link { color: #dce3e6; text-decoration: none; transition: color 0.15s; }
    .wf-rubric-link:hover { color: #f5f7f8; text-decoration: underline; }
    .wf-header { position: absolute; top: 110px; left: 20px; z-index: 30; display: flex; gap: 6px; align-items: center; }
    .wf-info-box { position: absolute; top: 16px; right: 16px; z-index: 30; width: 280px; background: rgba(10,10,10,0.9); border: 1px solid #20292d; border-radius: 10px; padding: 16px; backdrop-filter: blur(8px); transition: all 0.25s ease; }
    .wf-info-box.minimized { width: auto; padding: 8px 14px; cursor: pointer; }
    .wf-info-box.minimized .wf-info-collapsible { display: none; }
    .wf-info-box.minimized .wf-info-title { margin-bottom: 0; font-size: 13px; }
    .wf-info-minimize { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #555; font-size: 10px; cursor: pointer; padding: 2px 4px; transition: color 0.15s; line-height: 1; }
    .wf-info-minimize:hover { color: var(--text); }
    .wf-info-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .wf-info-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
    .wf-info-skills-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
    .wf-info-skills { display: flex; gap: 5px; flex-wrap: wrap; }
    .wf-header-skill-tag { font-size: 10px; padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,0.06); color: var(--text-secondary); border: 1px solid #2a2a2a; }
    .wf-canvas-wrap { flex: 1; position: relative; overflow: hidden; }
    .wf-canvas { display: block; width: 100%; height: 100%; }
    .wf-tooltip { position: absolute; background: #20292d; border: 1px solid #333; border-radius: 8px; padding: 10px 14px; font-family: 'Inter Tight', sans-serif; font-size: 13px; color: #e0e0e0; max-width: 280px; pointer-events: none; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
    .wf-tip-name { font-weight: 600; margin-bottom: 4px; }
    .wf-tip-desc { color: #888; font-size: 12px; line-height: 1.4; }
    .wf-detail { position: absolute; top: 16px; right: 312px; width: 300px; max-height: calc(100% - 32px); background: #0b1013; border: 1px solid #20292d; border-radius: 12px; padding: 20px; overflow-y: auto; z-index: 50; font-family: 'Inter Tight', sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,0.6); transition: right 0.25s ease; }
    .wf-detail h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
    .wf-detail p { margin: 6px 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    .wf-detail .wf-d-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 14px; }
    .wf-detail-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #666; font-size: 20px; cursor: pointer; padding: 4px 8px; }
    .wf-detail-close:hover { color: var(--text); }
    .wf-btn { padding: 5px 10px; font-size: 10px; font-family: 'Inter Tight', sans-serif; background: rgba(255,107,26,0.1); border: 1px solid rgba(255,107,26,0.3); border-radius: 5px; color: #dce3e6; cursor: pointer; transition: all 0.15s; }
    .wf-btn:hover { background: rgba(255,107,26,0.2); }
    .wf-btn.secondary { background: rgba(255,255,255,0.06); border-color: #2a2a2a; color: var(--text-secondary); }
    .wf-btn.secondary:hover { background: rgba(255,255,255,0.1); }

/* ViTo shell and responsive behavior around the inherited RUBRIC Canvas. */
:root { --bg:#06090b; --surface:#0b1013; --border:#20292d; --text:#e8edef; --text-secondary:#a2adb2; --text-muted:#748087; }
body { min-height:100vh; height:auto; overflow:auto; background:var(--bg); color:var(--text); font-family:"Inter Tight",Inter,system-ui,sans-serif; }
.site-header { min-height:58px; display:flex; align-items:center; gap:22px; padding:0 24px; border-bottom:1px solid var(--border); }
.site-header a,.inline-nav a { color:var(--text-secondary); font-size:12px; text-decoration:none; }
.brand { color:var(--text)!important; font-size:15px!important; font-weight:650; letter-spacing:-.03em; }
.site-nav { display:flex; gap:16px; flex:1; }
.language-nav { display:flex; gap:10px; }
#workflows { height:calc(100vh - 112px); min-height:620px; }
.wf-sidebar { background:#090d0f; border-color:var(--border); }
.wf-sidebar-title,.wf-info-skills-label,.info-kicker,.eyebrow { color:var(--text-muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.wf-sidebar-item { width:100%; display:block; border:0; border-left:2px solid transparent; background:transparent; color:var(--text-secondary); font:inherit; text-align:left; cursor:pointer; }
.wf-sidebar-item:hover,.wf-sidebar-item:focus-visible { background:rgba(255,255,255,.04); color:var(--text); }
.wf-sidebar-item.active { border-left-color:#dce3e6; background:rgba(255,255,255,.055); color:var(--text); }
.wf-main { background:#06090b; }
.wf-canvas-wrap { min-height:620px; background:#06090b; }
.wf-rubric-brand { max-width:min(650px,calc(100% - 330px)); }
.wf-rubric-name { font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:clamp(29px,4vw,48px); line-height:1; letter-spacing:-.045em; font-weight:580; color:var(--text); }
.wf-rubric-tagline { color:var(--text-secondary); font-size:13px; line-height:1.5; }
.wf-rubric-attribution { color:var(--text-muted); font-size:10px; }
.wf-header { left:20px; right:16px; top:auto; bottom:16px; display:flex; gap:8px; align-items:center; }
.inline-nav { display:flex; gap:10px; margin-right:auto; }
.wf-btn { background:rgba(220,227,230,.08); border-color:rgba(220,227,230,.24); color:#dce3e6; font-family:"Inter Tight",Inter,system-ui,sans-serif; font-size:11px; }
.wf-btn:hover:not(:disabled) { background:rgba(220,227,230,.16); }
.wf-btn.secondary { background:rgba(255,255,255,.035); border-color:var(--border); color:var(--text-secondary); }
.wf-btn:disabled { cursor:not-allowed; opacity:.4; }
.wf-info-box { background:rgba(9,13,15,.92); border-color:var(--border); }
.wf-info-title { color:var(--text); font-size:15px; }
.wf-info-desc { color:var(--text-secondary); }
.wf-info-skills { display:flex; flex-wrap:wrap; gap:5px; }
.wf-header-skill-tag { color:var(--text-secondary); background:rgba(255,255,255,.045); border-color:var(--border); }
.wf-tooltip,.wf-detail { background:#0b1013; border-color:var(--border); color:var(--text); font-family:"Inter Tight",Inter,system-ui,sans-serif; }
.wf-detail[hidden],#wf-tooltip[hidden],#wf-human-gate[hidden] { display:none; }
#wf-detail-title { margin:0 0 8px; font-size:16px; font-weight:600; }
#wf-detail-copy { margin:0; color:var(--text-secondary); font-size:12px; line-height:1.55; }
.wf-human-gate { position:absolute; bottom:70px; left:50%; z-index:25; max-width:min(420px,calc(100% - 32px)); transform:translateX(-50%); margin:0; padding:10px 14px; border:1px solid rgba(220,230,234,.2); border-radius:8px; background:rgba(9,13,15,.94); color:var(--text); font-size:12px; text-align:center; }
.wf-status { position:absolute; bottom:55px; left:20px; z-index:20; margin:0; color:var(--text-secondary); font-size:10px; }
.wf-progress { position:absolute; right:0; bottom:0; left:0; height:2px; background:rgba(230,240,244,.08); }
#wf-progress-fill { display:block; width:0; height:100%; background:#dce3e6; transition:width .12s linear; }
.site-footer { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 24px; color:var(--text-muted); font-size:10px; }
.site-footer p { margin:0; }
.site-footer a { color:var(--text-secondary); }
@media (max-width:700px) {
  .site-header { padding:0 14px; gap:13px; }
  .site-nav { gap:12px; }
  #workflows { height:auto; min-height:0; display:flex; flex-direction:column; }
  .wf-sidebar { width:100%; min-width:0; max-height:190px; padding:8px 0; border-right:0; border-bottom:1px solid var(--border); }
  .wf-sidebar-header { padding:5px 12px; }
  #wf-sidebar-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:auto; }
  .wf-sidebar-item { min-height:52px; padding:7px 10px; font-size:13px; }
  .wf-main { min-height:590px; }
  .wf-canvas-wrap { min-height:590px; }
  .wf-rubric-brand { top:14px; left:14px; max-width:calc(100% - 28px); }
  .wf-rubric-name { max-width:430px; }
  .wf-rubric-tagline { max-width:440px; }
  .wf-rubric-attribution { display:none; }
  .wf-info-box { top:130px; right:12px; left:12px; width:auto; padding:10px 13px; }
  .wf-info-desc { margin-bottom:5px; }
  .wf-info-skills { display:none; }
  .wf-header { right:10px; bottom:24px; left:10px; flex-wrap:wrap; }
  .inline-nav { display:none; }
  .wf-status { right:10px; bottom:70px; left:10px; text-align:center; }
  .wf-human-gate { bottom:88px; }
  .site-footer { align-items:flex-start; flex-direction:column; padding:12px 14px; }
}
:root[data-motion-reduced="true"],:root[data-motion-reduced="true"] *,:root[data-motion-reduced="true"]::before,:root[data-motion-reduced="true"]::after,:root[data-motion-reduced="true"] *::before,:root[data-motion-reduced="true"] *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }

.brand img { display:block; width:132px; height:28px; object-fit:contain; filter:invert(1); }


@media (max-width:700px) {
  #workflows { height:auto; min-height:0; }
  .wf-sidebar { max-height:180px; }
  .wf-main { min-height:680px; }
  .wf-canvas-wrap { min-height:680px; }
  #workflows[data-view="pipeline"] .wf-main,
  #workflows[data-view="pipeline"] .wf-canvas-wrap { min-height:980px; }
  .wf-info-box { display:none; }
  .wf-rubric-brand { max-width:calc(100% - 28px); }
  .wf-rubric-name { max-width:100%; font-size:clamp(30px,8vw,38px); letter-spacing:-.045em; }
  .wf-rubric-tagline { max-width:100%; }
  .wf-header { position:absolute; top:184px; bottom:auto; z-index:100; justify-content:center; padding:6px; border:1px solid var(--border); border-radius:10px; background:rgba(9,13,15,.96); }
  .wf-btn { min-height:44px; padding:8px 12px; font-size:12px; }
  .wf-detail { top:180px; right:12px; left:12px; width:auto; max-height:300px; }
  .wf-detail-close,.wf-sidebar-toggle,.wf-expand-btn { min-width:44px; min-height:44px; }
}

/* Give the diagram and notes separate columns; no card overlays the drawing. */
#workflows { height:auto; overflow:visible; align-items:stretch; }
.wf-main { overflow:visible; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 260px; }
.wf-canvas-wrap { height:max(680px,calc(100dvh - 58px)); min-height:680px; background-image:url('/static/cosmic.svg?v=66a614d9e675'); background-size:cover; background-position:center; }
.wf-rubric-brand { max-width:min(600px,calc(100% - 40px)); }
.wf-rubric-name { font-weight:400; font-size:clamp(30px,3.1vw,44px); line-height:1.06; }
.wf-panels { display:flex; flex-direction:column; gap:16px; padding:174px 18px 24px 0; align-items:stretch; }
.wf-info-box,.wf-info-box.minimized,.wf-detail { position:relative; inset:auto; width:100%; max-height:none; margin:0; transition:none; }
.wf-info-box { display:block; }
.wf-info-box.minimized { width:100%; }
.wf-detail { padding:16px; box-shadow:none; }
.wf-sidebar { width:208px; min-width:208px; }
.wf-sidebar-item { font-family:var(--display); font-size:12px; font-weight:400; line-height:1.6; letter-spacing:.02em; padding:11px 16px; color:var(--lit); }
.wf-sidebar-item[aria-current="step"] { font-weight:400; color:var(--ink); }
.wf-sidebar-title { font-family:var(--display); font-size:10px; font-weight:400; line-height:1.6; letter-spacing:.02em; text-transform:none; }
.wf-info-title,#wf-detail-title { font-size:16px; font-weight:400; }
.wf-info-desc,#wf-detail-copy { font-size:12px; line-height:1.6; }
@media (max-width:1179px) {
  .wf-main { display:block; }
  .wf-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
}
@media (max-width:700px) {
  .wf-sidebar { width:100%; min-width:0; max-height:none; }
  .wf-sidebar-item { font-size:12px; min-height:44px; padding:9px 12px; }
  .wf-canvas-wrap { height:max(790px,calc(100dvh - 58px)); }
  #workflows[data-view="pipeline"] .wf-canvas-wrap { height:1100px; }
  .wf-panels { grid-template-columns:1fr; padding:14px; }
  .wf-info-box { display:block; }
  .wf-detail { inset:auto; width:100%; max-height:none; margin:0; }
  .wf-sidebar.collapsed { height:0; max-height:0; border-bottom:0; }
}

/* The tablet layout switches from a full-width phone sidebar to a fixed rail.
   Avoid animating that structural width change while the canvas reflows. */
@media (min-width:701px) and (max-width:1179px) {
  .wf-sidebar { transition: padding .2s; }
}